/* Peças do InfraLaw, modo escritório (sistema de design, 28/out/2026).

   Carregado depois do style.css, só no escritório. Usa só as fichas de fichas.css.
   As variáveis antigas do style.css passam a apontar para as fichas: a tela antiga ganha a identidade
   nova sem mudar uma linha dela. Cada peça e a regra dela estão vivas em /pecas. */

body {
  --fundo: var(--cor-cartao);
  --gelo: var(--cor-caixa);
  --gelo-2: var(--cor-linha);
  --tinta: var(--cor-texto);
  --tinta-2: var(--cor-texto-suave);
  --tinta-3: var(--cor-texto-suave);
  --borda: var(--cor-linha);
  --borda-forte: var(--cor-linha-forte);
  --acento: var(--cor-principal);
  --acento-forte: var(--cor-principal-forte);
  --acento-suave: var(--cor-principal-suave);
  --ok: var(--cor-feito);
  --ok-suave: var(--cor-feito-suave);
  --erro: var(--cor-atraso);
  --erro-suave: var(--cor-atraso-suave);
  --alerta: var(--cor-aviso);
  --alerta-suave: var(--cor-aviso-suave);
  --raio: var(--canto-grande);
  --raio-s: var(--canto);
  --sombra-card: var(--sombra);
  --fonte: var(--fonte-texto);
  --mono: var(--fonte-texto);
  background: transparent;
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--letra-16);
  line-height: 1.5;
}
button, input, select, textarea { font-family: var(--fonte-texto); font-size: var(--letra-16); }

/* título da tela: 24; rótulo de bloco: 12 em caixa alta, suave */
h1 { font-size: var(--letra-24); font-weight: var(--peso-titulo); letter-spacing: 0; line-height: 1.25; }
h2 { font-size: var(--letra-12); font-weight: var(--peso-forte); letter-spacing: .06em; color: var(--cor-texto-suave); margin: 0 0 var(--espaco-12); }

/* menu lateral: branco, item ativo em azul suave (o azul cheio fica só para o botão principal) */
.sidebar { background: var(--cor-cartao); border-right: 1px solid var(--cor-linha); }
.sb-item { font-size: var(--letra-16); padding: var(--espaco-8) var(--espaco-12); gap: var(--espaco-12); border-radius: var(--canto); transition: background var(--movimento); }
.sb-item svg { width: 20px; height: 20px; }
.sb-item.atual { background: var(--cor-principal-suave); color: var(--cor-principal); font-weight: var(--peso-forte); }
.sb-item.atual svg { color: var(--cor-principal); }
.sb-rotulo { font-size: var(--letra-12); }
.sb-principal { display: flex; flex-direction: column; gap: var(--espaco-4); margin-top: var(--espaco-12); }
.sb-config { margin-top: var(--espaco-16); padding-top: var(--espaco-12); border-top: 1px solid var(--cor-linha); }

/* conteúdo: largura confortável de leitura, respiro de 32 */
.conteudo { padding: var(--espaco-32) var(--espaco-32) var(--espaco-48); }

/* cabeçalho da tela: título e frase à esquerda, o botão principal no alto à direita */
.hd { align-items: flex-start; gap: var(--espaco-16); margin: 0 0 var(--espaco-24); }
.hd p { font-size: var(--letra-16); color: var(--cor-texto-suave); margin: var(--espaco-4) 0 0; }

/* botões: principal (azul, um por tela), secundário (branco com linha), perigo (vermelho), texto (só o link) */
.btn { min-height: var(--altura-botao); padding: var(--espaco-8) var(--espaco-16); font-size: var(--letra-14); font-weight: var(--peso-forte);
  border-radius: var(--canto); gap: var(--espaco-8); transition: background var(--movimento), border-color var(--movimento); }
.btn.pri { background: var(--cor-principal); border-color: var(--cor-principal); color: var(--cor-sobre-principal); }
.btn.pri:hover { background: var(--cor-principal-forte); border-color: var(--cor-principal-forte); }
.btn.perigo { color: var(--cor-atraso); border-color: var(--cor-atraso); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--cor-principal); outline-offset: 2px; }

/* cartão: branco, canto grande, sombra leve, sem borda grossa e sem cartão dentro de cartão */
.card { background: var(--cor-cartao); border: 0; border-radius: var(--canto-grande); box-shadow: var(--sombra); padding: var(--espaco-24); margin-bottom: var(--espaco-16); }
.card .card { box-shadow: none; background: var(--cor-caixa); }

/* avisos: o mesmo quadro para o mesmo tipo de aviso */
.aviso, .erro, .ok-box { font-size: var(--letra-14); padding: var(--espaco-12) var(--espaco-16); border-radius: var(--canto); border-left: 0; margin-bottom: var(--espaco-16); }
.aviso { background: var(--cor-aviso-suave); color: var(--cor-texto); }
.erro { background: var(--cor-atraso-suave); color: var(--cor-atraso); }
.ok-box { background: var(--cor-feito-suave); color: var(--cor-feito); }

/* pílula de situação: letra normal, sem caixa alta, cor só quando quer dizer algo */
.chip { font-family: var(--fonte-texto); font-size: var(--letra-12); font-weight: var(--peso-forte); letter-spacing: 0; text-transform: none;
  padding: 2px var(--espaco-8); border-radius: var(--canto-grande); border: 0; background: var(--cor-caixa); color: var(--cor-texto-suave); }
.chip.ok { background: var(--cor-feito-suave); color: var(--cor-feito); }
.chip.alerta { background: var(--cor-aviso-suave); color: var(--cor-aviso); }
.chip.erro { background: var(--cor-atraso-suave); color: var(--cor-atraso); }
.chip.parc { background: var(--cor-principal-suave); color: var(--cor-principal); }

/* tabela: texto 14, cabeçalho 12 sem fonte de máquina */
table { font-size: var(--letra-14); background: var(--cor-cartao); }
th, td { padding: var(--espaco-12); border-bottom: 1px solid var(--cor-linha); }
thead th { font-family: var(--fonte-texto); font-size: var(--letra-12); letter-spacing: .04em; font-weight: var(--peso-forte); background: var(--cor-cartao); }
td.num { font-family: var(--fonte-texto); }

/* campo: rótulo 14 em cima, campo 16 (no celular, menos de 16 faz o telefone dar zoom) */
label.f { font-size: var(--letra-14); color: var(--cor-texto); font-weight: var(--peso-forte); margin: var(--espaco-16) 0 var(--espaco-8); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], input[type=tel], input[type=date], select, textarea {
  font-size: var(--letra-16); padding: var(--espaco-8) var(--espaco-12); min-height: var(--altura-botao); border-radius: var(--canto); border-color: var(--cor-linha-forte); }

/* tela vazia: diz o que é e o que fazer, com o botão que faz */
.vazio { font-size: var(--letra-16); color: var(--cor-texto-suave); padding: var(--espaco-32) var(--espaco-24); border: 1px dashed var(--cor-linha-forte); border-radius: var(--canto-grande); background: var(--cor-cartao); }

/* Saiba mais: a explicação longa fica fechada até a pessoa pedir */
details.saiba-mais { margin-top: var(--espaco-12); }
details.saiba-mais > summary { cursor: pointer; color: var(--cor-principal); font-size: var(--letra-14); font-weight: var(--peso-forte); list-style: none; }
details.saiba-mais > summary::-webkit-details-marker { display: none; }
details.saiba-mais > summary::after { content: " +"; }
details.saiba-mais[open] > summary::after { content: " −"; }
details.saiba-mais > div { margin-top: var(--espaco-8); color: var(--cor-texto-suave); font-size: var(--letra-14); }

/* carregamento sem piscar: a página entra com um fade curto; quem pediu menos movimento não vê nada */
@keyframes entra { from { opacity: 0; } to { opacity: 1; } }
main.conteudo { animation: entra var(--movimento) backwards; }   /* sem 'both': a animação presa prende os painéis (z-index) dentro do main, embaixo do Caminho */

/* celular: 390 é tão bom quanto 1440 */
@media (max-width: 760px) {
  .conteudo { padding: var(--espaco-16) var(--espaco-16) var(--espaco-48); }
  .hd { flex-direction: column; }
  .hd .acoes, .hd > .btn.pri, .hd > form > .btn.pri { width: 100%; }
  .card { padding: var(--espaco-16); }
}

/* Configurações: grupos de atalhos */
.cfg-titulo { margin: var(--espaco-32) 0 var(--espaco-12); }
body .cfg-grade { gap: var(--espaco-12); }
body .cfg-cartao { border: 0; border-radius: var(--canto-grande); box-shadow: var(--sombra); padding: var(--espaco-16); transition: box-shadow var(--movimento); }
body .cfg-cartao:hover { box-shadow: var(--sombra-alta); }
body .cfg-cartao b { font-size: var(--letra-16); margin-bottom: var(--espaco-4); }
body .cfg-cartao span { font-size: var(--letra-14); color: var(--cor-texto-suave); }

/* Hoje: uma linha por ação. Quando, o quê e de qual família, e o botão que faz. */
.hj-data { margin: 0 0 var(--espaco-4); font-size: var(--letra-14); color: var(--cor-texto-suave); }
.hj-de-quem { display: flex; align-items: center; gap: var(--espaco-12); margin: 0 0 var(--espaco-24); font-size: var(--letra-14); }
.hj-de-quem select { width: auto; }
.hj-bloco { padding: var(--espaco-16) var(--espaco-24); }
.hj-rotulo { margin: var(--espaco-8) 0 var(--espaco-8); }
.hj-rotulo.atraso { color: var(--cor-atraso); }
.hj-linhas { list-style: none; margin: 0; padding: 0; }
.hj-linha { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--espaco-16); align-items: center; padding: var(--espaco-12) 0; border-top: 1px solid var(--cor-linha); }
.hj-linha:first-child { border-top: 0; }
.hj-quando { font-size: var(--letra-14); color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.hj-linha.atraso .hj-quando { color: var(--cor-atraso); font-weight: var(--peso-forte); }
.hj-texto b { display: block; font-size: var(--letra-16); font-weight: var(--peso-forte); }
.hj-texto span { display: block; font-size: var(--letra-14); color: var(--cor-texto-suave); }
.hj-acao { display: flex; gap: var(--espaco-8); }
.hj-acao form { margin: 0; }
.hj-vazio { margin: var(--espaco-8) 0; color: var(--cor-texto-suave); }
.hj-atalhos { display: flex; flex-wrap: wrap; gap: var(--espaco-8) var(--espaco-24); margin-top: var(--espaco-24); font-size: var(--letra-14); }
.hj-atalhos a { color: var(--cor-principal); text-decoration: none; font-weight: var(--peso-forte); }
@media (max-width: 760px) {
  .hj-bloco { padding: var(--espaco-12) var(--espaco-16); }
  .hj-linha { grid-template-columns: 1fr; gap: var(--espaco-8); }
  .hj-quando:empty { display: none; }
  .hj-acao .btn { width: 100%; justify-content: center; }
  .hj-acao form { flex: 1; }
}
.nr-busca input { font-size: var(--letra-14); }
.hj-de-quem label { white-space: nowrap; }
@media (max-width: 760px) { .hd > .btn.pri { justify-content: center; } }

/* /pecas: a página interna das peças */
.pc-bloco { display: flex; flex-direction: column; gap: var(--espaco-12); }
.pc-regra { margin: 0; font-size: var(--letra-14); color: var(--cor-texto-suave); max-width: 72ch; }
.pc-cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--espaco-12); }
.pc-cor { display: flex; flex-direction: column; gap: var(--espaco-4); font-size: var(--letra-14); }
.pc-amostra { display: block; height: 48px; border-radius: var(--canto); box-shadow: inset 0 0 0 1px var(--cor-linha); }
.pc-cor code, .pc-letra code, .pc-espacos code { font-size: var(--letra-12); color: var(--cor-texto-suave); }
.pc-letra { margin: 0; line-height: 1.3; }
.pc-espacos { display: flex; flex-direction: column; gap: var(--espaco-8); }
.pc-espacos div { display: flex; align-items: center; gap: var(--espaco-12); }
.pc-barra { display: inline-block; height: var(--espaco-12); background: var(--cor-principal); border-radius: var(--canto); }
.pc-cantos { display: flex; flex-wrap: wrap; gap: var(--espaco-16); }
.pc-canto { padding: var(--espaco-16) var(--espaco-24); background: var(--cor-caixa); font-size: var(--letra-14); }
.pc-canto.um { border-radius: var(--canto); }
.pc-canto.dois { border-radius: var(--canto-grande); box-shadow: var(--sombra); background: var(--cor-cartao); }
.pc-canto.tres { border-radius: var(--canto-grande); box-shadow: var(--sombra-alta); background: var(--cor-cartao); }
.pc-linha { display: flex; flex-wrap: wrap; gap: var(--espaco-8); align-items: center; }
.hj-linha.sem-quando { grid-template-columns: 1fr auto; }

/* link: azul basta para dizer que é link; o sublinhado aparece ao passar o mouse e no foco */
.conteudo a:not(.btn) { text-decoration: none; }
.conteudo a:not(.btn):hover, .conteudo a:not(.btn):focus-visible { text-decoration: underline; }
.conteudo p a:not(.btn), .conteudo li > small a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }

/* entrada (login, senha, recuperar): um cartão branco no fundo claro */
.login { border: 0; border-radius: var(--canto-grande); box-shadow: var(--sombra-alta); padding: var(--espaco-32); }
.login h1 { font-size: var(--letra-24); margin-bottom: var(--espaco-4); }
.login p.sub { font-size: var(--letra-16); color: var(--cor-texto-suave); margin: 0 0 var(--espaco-8); }
.login .btn { min-height: 44px; margin-top: var(--espaco-24); font-size: var(--letra-16); }
@media (max-width: 760px) { .login { padding: var(--espaco-24) var(--espaco-16); } .login h1 { font-size: var(--letra-24); } .login p.sub, .login .erro { font-size: var(--letra-16); } }
/* O degradê do fundo fica preso na tela (não rola junto), numa camada atrás de tudo: só CSS, sem imagem. O html leva a
   cor lisa para o caso raro de o degradê não pintar. */
html { background: var(--cor-fundo); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--fundo-pagina); pointer-events: none; }
.tela-central { background: transparent; }

/* cabeçalho do planejamento: no fundo claro; as margens continuam as do trilho.css (a página do planejamento depende delas) */
body .pg-cab { max-height: none; background: var(--fundo-pagina) fixed; border-bottom: 1px solid var(--cor-linha); padding-bottom: var(--espaco-12); margin-bottom: var(--espaco-16); }
body .pg-cab h1 { font-size: var(--letra-20); }
body .pg-cab-2 { font-size: var(--letra-14); }

/* dentro do planejamento, o botão principal da tela é o da coluna do caminho (o próximo passo).
   Quando o caminho tem botão, os principais da página viram secundários: um principal por tela, sempre. */
body:has(.cam .btn.pri) main.conteudo.com-caminho .btn.pri { background: var(--cor-cartao); border-color: var(--cor-linha-forte); color: var(--cor-texto); }
body:has(.cam .btn.pri) main.conteudo.com-caminho .btn.pri:hover { background: var(--cor-caixa); border-color: var(--cor-linha-forte); }

/* campo sem tipo declarado também é campo de texto */
input:not([type]) { width: 100%; font-size: var(--letra-16); padding: var(--espaco-8) var(--espaco-12); min-height: var(--altura-botao);
  border: 1px solid var(--cor-linha-forte); border-radius: var(--canto); background: var(--cor-cartao); color: var(--cor-texto); }

/* "Próximo passo" do planejamento: bloco azul suave (cor de ação), não faixa preta (preto não é ficha) */
body .tc-proximo { background: var(--cor-principal-suave); color: var(--cor-texto); border-radius: var(--canto-grande);
  padding: var(--espaco-16) var(--espaco-24); font-size: var(--letra-16); margin: 0 0 var(--espaco-16); }
body .tc-proximo b { font-family: var(--fonte-texto); font-size: var(--letra-12); font-weight: var(--peso-forte); letter-spacing: .06em;
  color: var(--cor-principal); opacity: 1; margin-bottom: var(--espaco-4); }
body .tc-proximo .btn, body .tc-proximo .pg-botao-claro { background: var(--cor-cartao); color: var(--cor-texto); border: 1px solid var(--cor-linha-forte);
  border-radius: var(--canto); min-height: var(--altura-botao); padding: var(--espaco-8) var(--espaco-16); font-size: var(--letra-14);
  font-weight: var(--peso-forte); text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; }

/* o que está escolhido ou em andamento (aba, visão, passo atual, selo da etapa): azul suave, nunca preto */
body .pg-lado button.on, body .vv-lista a.on, body .vd-visoes a.on, body .vv-alterna a.on, body .tc-subs li.agora,
body .tc-venda-passos i.agora, body .step.agora, body .bl-lado a.on, body .pv-abas button.on, body .chip.tinta, body .tc-venda > b {
  background: var(--cor-principal-suave); color: var(--cor-principal); border-color: var(--cor-principal-suave); }
body .pg-lado button.on i, body .vv-lista a.on i { background: var(--cor-cartao); color: var(--cor-principal); }

/* Escolha por botões (30/out/2026): poucas opções à vista, no lugar de uma lista que abre. Por dentro é rádio, então vale teclado. */
.opcoes { border: 0; padding: 0; margin: var(--espaco-16) 0 0; min-width: 0; }
.opcoes legend { padding: 0; margin-bottom: var(--espaco-8); font-size: var(--letra-14); font-weight: var(--peso-forte); color: var(--cor-texto); }
.opcoes-lista { display: flex; flex-wrap: wrap; gap: var(--espaco-8); }
.opcoes-lista label { position: relative; cursor: pointer; }
.opcoes-lista input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcoes-lista span { display: block; padding: var(--espaco-8) var(--espaco-16); font-size: var(--letra-14); border: 1px solid var(--cor-linha-forte);
  border-radius: var(--canto); background: var(--cor-cartao); color: var(--cor-texto); transition: background var(--movimento), color var(--movimento); }
.opcoes-lista input:checked + span { background: var(--cor-principal-suave); color: var(--cor-principal); border-color: var(--cor-principal); font-weight: var(--peso-forte); }
.opcoes-lista input:focus-visible + span { outline: 2px solid var(--cor-principal); outline-offset: 2px; }