/* ============================================================================
   Lavraria — sistema de design (protótipo de 22/09, plano §3)
   Ordem: tokens → base e tipografia → casca (lateral, topo, rodapé) → controles
   → componentes do protótipo → telas atuais (ficha, documentos, matriz, robô)
   → modo apresentação → responsivo.

   Regra de cor: ouro = "precisa de você" (sobretítulo, marcador da nav ativa,
   indicador selecionado, faixa de atenção, marcas "a conferir" da ficha).
   Regra de contraste: todo texto pequeno fica em 4,5:1 ou mais sobre o seu fundo.
   Os cinzas claros do protótipo (#8b95a4, #9ca4ae, #a6aeb9…) reprovavam nessa
   conta, então o texto secundário todo caiu em --suave e --texto-2; os tons
   claros sobraram só para traço e preenchimento (sem texto).
   ============================================================================ */

:root {
  /* --- Marca --- */
  --navy: #19283d;          /* lateral, botão primário, texto forte sobre claro */
  --navy-2: #23374f;        /* navy um passo mais claro (bordas, faixas) */
  --navy-3: #2b425f;        /* hover do botão primário (protótipo) */
  --ouro: #bd9351;          /* preenchimento/borda de ouro — nunca texto pequeno (2,8:1 no branco) */
  --ouro-suave: #d6b47a;    /* botão ouro, marcador da nav ativa, tracinho de etapa feita */
  --ouro-texto: #8a6a36;    /* o ouro quando vira texto (sobretítulo): 4,6:1 sobre --fundo */
  --ouro-claro: #fcf3df;    /* fundo dos avisos e marcas "a conferir" */
  --ouro-borda: #d9c49b;
  --ouro-anel: rgba(217, 196, 155, .7); /* --ouro-borda a 70% (rgba() não aceita var() sem color-mix) */

  /* --- Superfícies --- */
  --fundo: #f5f6f8;
  --fundo-2: #f1f4f7;       /* cabeçalho de tabela, trilho de abas, rodapé de modal */
  --superficie: #fff;
  --linha: #e7eaf0;         /* divisórias */
  --linha-2: #dce2ea;       /* borda de campo e de botão */
  --trilho: #e4e9ef;        /* barras de progresso e tracinhos (decoração, sem texto) */
  --traco-suave: #98a2b0;   /* setas, chevrons e ícones decorativos (não é cor de texto) */

  /* --- Texto --- */
  --texto: #233047;         /* 12,3:1 sobre --fundo */
  --texto-2: #46536a;       /* rótulos e valores secundários — 7,2:1 sobre --fundo */
  --suave: #646e7d;         /* #737e8e do protótipo escurecido: 3,8:1 reprovava; agora 4,8:1 */
  --sobre-navy: #dfe5ec;    /* texto corrido sobre a lateral */
  --nav-link: #aebaca;      /* link da nav em repouso — 7,6:1 sobre --navy */
  --nav-rotulo: #8493aa;    /* "PRINCIPAL" e legendas da lateral — 4,8:1 sobre --navy */

  /* --- Situações (fundo claro + texto que passa em 4,5:1 sobre ele) --- */
  --verde: #2a7c65;         --verde-claro: #eef8f4;
  --ambar: #916321;         /* #9c6b25 do plano escurecido: reprovava sobre --ouro-claro (4,2:1) */
  --ambar-claro: #fcf3df;
  --azul: #45618a;          --azul-claro: #eaf0f8;
  --vermelho: #a33a3a;      --vermelho-claro: #fbeceb;
  --roxo: #5d4e8c;          --roxo-claro: #eeeaf7;
  --cinza: #646d79;         --cinza-claro: #f0f2f5;

  /* --- Medidas --- */
  --raio: 14px;             /* painéis e modal */
  --raio-m: 10px;           /* cartões e faixas */
  --raio-s: 7px;            /* botões e campos */
  --sombra: 0 3px 12px rgba(24, 43, 64, .065);
  --sombra-alta: 0 24px 90px rgba(18, 35, 56, .21);
  --largura-lateral: 244px; /* 218 ≤1250 · 190 ≤1020 · gaveta ≤740 */
  --altura-topo: 76px;      /* 62 ≤740 */
  /* Foco: o #c4a46b do protótipo dá 2,2:1 sobre --fundo — um anel de foco precisa ser visto.
     Sobre claro vale o mesmo ouro legível de --ouro-texto (4,6:1 no fundo, 5,0:1 no branco);
     sobre o navy da lateral e da barra do robô ele cai para 2,4:1, então lá entra --foco-lateral. */
  --foco: #8a6a36;
  --foco-lateral: #e3c992;  /* 9,2:1 sobre --navy e 7,5:1 sobre --navy-2 */

  /* --- Tipografia --- */
  --f-texto: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --f-titulo: 'Manrope', 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --f-marca: Georgia, 'Times New Roman', serif;
  --f-mono: ui-monospace, Menlo, Consolas, monospace;

  --rapido: 150ms ease-out;
  --medio: 240ms ease-out;

  font-family: var(--f-texto);
  font-size: 16px;
  color: var(--texto);
  background: var(--fundo);
}

/* ---------- Base e tipografia ---------- */
* { box-sizing: border-box; }
body { margin: 0; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }

h1, h2, h3, p { margin-top: 0; }
h1 { font-family: var(--f-titulo); font-size: 30px; font-weight: 750; letter-spacing: -1.1px; line-height: 1.3; margin-bottom: 9px; }
h2 { font-family: var(--f-titulo); font-size: 17px; font-weight: 750; letter-spacing: -.35px; margin-bottom: 7px; }
h3 { font-family: var(--f-titulo); font-size: 15px; font-weight: 650; margin-bottom: 7px; }
small { font-size: 12px; }
code { font-family: var(--f-mono); font-size: 12.5px; background: var(--fundo-2); padding: 1px 5px; border-radius: 4px; }
.cpf, .pessoa-meta, .numero strong { font-variant-numeric: tabular-nums; }
.suave { color: var(--suave); }
.sobretitulo { font-size: 11px; font-weight: 650; letter-spacing: 1.9px; color: var(--ouro-texto); text-transform: uppercase; margin-bottom: 10px; }
.subtitulo { color: var(--suave); font-size: 14px; line-height: 1.7; margin-bottom: 0; }
.rotulo-mini { font-size: 11px; letter-spacing: 1px; color: var(--suave); text-transform: uppercase; margin: 0 0 10px; }
/* Texto que só o leitor de tela lê (fica no fluxo, sem display:none, que o esconderia dele também). */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Foco sempre por outline — nunca por box-shadow, que some em alto contraste. */
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.lateral :focus-visible, .aviso :focus-visible, .barra-linha :focus-visible { outline-color: var(--foco-lateral); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@keyframes aparecer { from { opacity: 0; transform: translateY(5px); } }
@keyframes entrar { from { transform: translateY(6px); opacity: 0; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes pulsar { 50% { opacity: .25; } }
/* Chama atenção para o quadro do captcha pela borda, nunca pela opacidade: apagar a imagem
   tiraria a única forma de ler o código. */
@keyframes pulsarBorda { 50% { border-color: var(--ouro); box-shadow: 0 0 0 3px var(--ouro-anel); } }
.aparecer { animation: aparecer .3s ease-out; }

/* ---------- Pular para o conteúdo ---------- */
.pular {
  position: fixed; top: -60px; left: 20px; z-index: 100;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--linha-2);
  border-radius: var(--raio-s); padding: 12px 16px; font-weight: 600;
}
.pular:focus { top: 10px; }

/* ---------- Lateral ---------- */
.lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 20;
  width: var(--largura-lateral); padding: 33px 20px 12px;
  background: var(--navy); color: var(--sobre-navy);
  display: flex; flex-direction: column; overflow-y: auto;
}
.lateral .marca {
  display: flex; align-items: center; gap: 12px; margin: 0 13px 34px;
  font-family: var(--f-marca); font-size: 31px; letter-spacing: -1px; color: #fff;
}
.lateral .marca:hover { text-decoration: none; }
.lateral .marca .monograma { flex: none; }
/* Sobre o navy o monograma vira contorno: a placa cheia do favicon sumiria no fundo. */
.lateral .marca .monograma .fundo { fill: none; stroke: rgba(245, 241, 232, .38); stroke-width: 2; }
.nome-marca { display: block; line-height: 1; text-transform: lowercase; }
.legenda-marca {
  display: block; text-transform: none; font-family: var(--f-texto);
  font-size: 9px; letter-spacing: 2px; color: var(--nav-rotulo); margin-top: 6px;
}

.escritorio {
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px; padding: 13px 10px;
  display: flex; gap: 10px; align-items: center; font-size: 14px; color: #f0f3f6; min-width: 0;
}
.escritorio > div { min-width: 0; }
.escritorio > div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escritorio small, .perfil small { display: block; font-size: 11px; color: var(--nav-rotulo); margin-top: 5px; }
.escritorio-icone { display: grid; place-items: center; background: rgba(255, 255, 255, .05); border-radius: 6px; padding: 7px; color: #c7af82; flex: none; }

.rotulo-nav { font-size: 10px; letter-spacing: 1.8px; color: var(--nav-rotulo); margin: 31px 13px 14px; }
.lateral nav { display: grid; gap: 6px; }
.lateral nav a {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  font-size: 14px; border-radius: 7px; color: var(--nav-link); position: relative;
}
.lateral nav a:hover { background: rgba(255, 255, 255, .04); color: #fff; text-decoration: none; }
.lateral nav a .icone { width: 20px; height: 20px; flex: none; }
.lateral nav a.ativa { background: rgba(255, 255, 255, .06); color: #fff; }
.lateral nav a.ativa::before {
  content: ""; position: absolute; left: -20px; width: 3px; height: 24px;
  border-radius: 0 3px 3px 0; background: var(--ouro-suave);
}
.lateral nav a.ativa .icone { color: var(--ouro-suave); }
.contador-nav { margin-left: auto; background: rgba(255, 255, 255, .1); border-radius: 5px; padding: 2px 7px; font-size: 11px; }
.contador-nav:empty { display: none; }

.lateral-rodape { margin-top: auto; }
.perfil { display: flex; align-items: center; gap: 11px; border-top: 1px solid rgba(255, 255, 255, .12); padding: 22px 4px; font-size: 13px; min-width: 0; }
.perfil > div { min-width: 0; }
.perfil > div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  display: grid; place-items: center; flex: none; height: 35px; width: 35px; border-radius: 50%;
  background: #ece6db; color: #745e3c; font-size: 12px; font-weight: 600;
}

/* ---------- Casca, topo e rodapé ---------- */
.casca { margin-left: var(--largura-lateral); min-height: 100vh; display: flex; flex-direction: column; }
.topo {
  position: sticky; top: 0; z-index: 15;
  height: var(--altura-topo); padding: 0 42px; gap: 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--superficie); border-bottom: 1px solid var(--linha);
}
.trilha { display: flex; align-items: center; gap: 17px; font-size: 13px; color: var(--texto-2); min-width: 0; }
.trilha .icone { width: 17px; height: 17px; color: var(--suave); flex: none; }
.trilha .barra { color: var(--suave); }
/* #trilha guarda as partes escritas por definirTrilha (comum.js), com as mesmas barras do topo. */
.trilha #trilha { display: flex; align-items: center; gap: 8px; min-width: 0; }
.trilha #trilha > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-direita { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--suave); }
.topo-direita .data { white-space: nowrap; }
.separador-topo { height: 18px; width: 1px; background: var(--linha); }
.topo .menu-lateral { display: none; }
.topo .botao-icone[aria-pressed="true"] { background: var(--ouro-claro); color: var(--ambar); }

.conteudo { flex: 1; width: 100%; max-width: 1600px; margin: 0 auto; padding: 38px 42px 28px; }
.rodape-pagina { display: flex; justify-content: space-between; gap: 12px; padding: 20px 42px; font-size: 11px; color: var(--suave); }
.ponto-rodape { margin: 0 7px; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--linha-2); background: var(--superficie); color: var(--texto);
  border-radius: var(--raio-s); min-height: 41px; padding: 10px 16px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; text-decoration: none;
  transition: background var(--rapido), border-color var(--rapido), transform var(--rapido);
}
.botao:hover { background: #f5f7fa; text-decoration: none; } /* o link vira botão: o sublinhado de a:hover não vale aqui */
.botao:active { transform: translateY(1px); }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.botao .icone, .botao-icone .icone { width: 17px; height: 17px; flex: none; }
.botao-primario { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 3px 4px rgba(25, 40, 61, .07); }
.botao-primario:hover { background: var(--navy-3); }
.botao-ouro { background: var(--ouro-suave); border-color: var(--ouro-suave); color: var(--navy); }
.botao-ouro:hover { background: var(--ouro); }
.botao-pequeno { min-height: 33px; padding: 7px 12px; font-size: 13px; }
.botao-perigo { color: var(--vermelho); }
.botao-perigo:hover { background: var(--vermelho-claro); }
.botao-confirmar { border-color: var(--verde); color: var(--verde); }
.botao-confirmar:hover { background: var(--verde-claro); }
.botao-icone {
  border: 0; background: transparent; color: var(--suave);
  border-radius: 6px; padding: 7px; min-height: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.botao-icone:hover { background: var(--fundo-2); color: var(--texto); }
/* Ícone solto ao lado de texto fora de um contêiner flex (links do modal, selo de legibilidade). */
.documento-legibilidade > .icone:first-child,
.modal-corpo a:not(.botao) > .icone:first-child { margin-right: 6px; vertical-align: middle; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
td .acoes { flex-wrap: nowrap; } /* a tabela já rola na horizontal: quebrar aqui só desalinha a linha */

/* ---------- Campos ---------- */
label.campo, .campo { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; color: var(--texto-2); min-width: 0; }
label.campo span.dica, .campo small, .dica { font-size: 12px; font-weight: 400; color: var(--suave); }
input, select, textarea {
  font: inherit; font-size: 14px; font-weight: 400; color: var(--texto);
  border: 1px solid var(--linha-2); border-radius: var(--raio-s); background: var(--superficie);
  padding: 12px 13px; width: 100%; min-width: 0;
  transition: border-color var(--rapido);
}
input::placeholder, textarea::placeholder { color: #6c7686; } /* 4,6:1 no branco — o #a8b0bc do protótipo reprovava */
input:focus, select:focus, textarea:focus { border-color: var(--ouro); }
input.invalido, select.invalido, textarea.invalido { border-color: var(--vermelho); background: var(--vermelho-claro); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--navy); }
textarea { min-height: 120px; resize: vertical; font-family: var(--f-mono); font-size: 12.5px; }
input:disabled, select:disabled, textarea:disabled { color: var(--suave); background: var(--fundo-2); border-color: var(--linha); cursor: not-allowed; }
.grade { display: grid; gap: 14px; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 18px 16px; align-items: start; }
.campo-largo { grid-column: 1 / -1; }
.rodape-formulario {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--linha);
}
.rodape-formulario > .dica { margin: 0; max-width: 62ch; }
.estado-salvamento { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--suave); }
.estado-salvamento .icone { width: 14px; height: 14px; color: var(--verde); }
.estado-salvamento.erro { color: var(--vermelho); font-weight: 600; }

/* ---------- Cabeçalho de página ---------- */
.cabecalho-pagina { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.cabecalho-pagina .meta { color: var(--suave); font-size: 12px; margin-top: 4px; }
.cabecalho-pagina .meta a { color: var(--suave); }
.voltar { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--suave); margin-bottom: 20px; }
.cabecalho-pagina .voltar { margin-bottom: 0; } /* aqui ele é a ação da direita, não a volta acima do título */
.voltar .icone { width: 14px; height: 14px; }
/* Cabeçalho da página de processo: o nome é o título e a linha de baixo situa o caso. */
.titulo-processo { font-size: 26px; letter-spacing: -.7px; }
.sub-processo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--suave); font-size: 12px; }
.sub-processo .icone { width: 13px; height: 13px; }

/* ---------- Painéis e cartões ---------- */
.painel, .cartao { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); padding: 25px; }
.cartao + .cartao { margin-top: 16px; }
.cabecalho-painel { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 22px; }
.cabecalho-painel p { font-size: 12px; color: var(--suave); margin: 7px 0 0; }
.vazio { text-align: center; padding: 40px 15px; }
.vazio > .icone {
  display: block; width: 58px; height: 58px; margin: 0 auto 18px; padding: 14px;
  background: var(--fundo-2); border: 1px solid var(--linha); border-radius: 16px; color: #64748b;
}
.vazio strong, .vazio h2, .vazio h3 { display: block; font-family: var(--f-titulo); font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.vazio p { font-size: 13px; color: var(--suave); line-height: 1.7; max-width: 360px; margin: 9px auto 20px; }

.painel-contexto h3 { font-size: 13px; }
.painel-contexto p { font-size: 12px; color: var(--suave); line-height: 1.8; }
.painel-contexto .divisoria { border-top: 1px solid var(--linha); margin: 21px 0; }
.lista-checagem { list-style: none; padding: 0; margin: 20px 0 0; }
.lista-checagem li { display: flex; gap: 9px; align-items: center; font-size: 12px; color: var(--suave); margin-bottom: 17px; }
.marca-checagem { display: flex; flex: none; }
.lista-checagem .icone { width: 16px; height: 16px; color: var(--traco-suave); flex: none; }
.lista-checagem .completa { color: var(--texto-2); }
.lista-checagem .completa .icone { color: var(--verde); }
.linha-info { display: flex; gap: 9px; align-items: center; font-size: 12px; color: var(--texto-2); margin: 13px 0; }
.linha-info .icone { width: 15px; height: 15px; color: var(--suave); flex: none; }
.aviso-suave {
  display: flex; gap: 10px; padding: 13px 15px; border-radius: var(--raio-s);
  background: var(--fundo-2); font-size: 12px; color: var(--texto-2); line-height: 1.65; margin-top: 20px;
}
.aviso-suave .icone { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--suave); }
/* Alternância dentro de um aviso suave (ex.: "este processo não tem documentos para ler"). */
.aviso-suave .alternancia { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }

/* ---------- Indicadores (números da lista) ---------- */
.indicadores, .resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 27px; }
.resumo { grid-template-columns: 1.4fr repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.indicador, .numero {
  display: block; text-align: left; position: relative;
  border: 1px solid var(--linha); background: var(--superficie); border-radius: var(--raio-m);
  padding: 19px 21px; color: inherit;
}
.indicador { min-height: 119px; font: inherit; }
.indicador[aria-pressed="true"] { border-color: var(--ouro-borda); background: #fffdf9; }
.indicador-topo { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--texto-2); margin-bottom: 14px; }
.indicador-topo .icone { width: 17px; height: 17px; color: var(--suave); }
.indicador strong, .numero strong { display: block; font-family: var(--f-titulo); font-size: 29px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.indicador-rodape { font-size: 12px; color: var(--suave); margin-left: 8px; }
.numero { padding: 12px 14px; box-shadow: var(--sombra); }
.numero strong { font-size: 24px; }
.numero span { color: var(--suave); font-size: 12px; }
.numero.alerta strong { color: var(--vermelho); }

/* ---------- Faixa de atenção ---------- */
.faixa-atencao {
  display: flex; align-items: center; gap: 15px; padding: 18px 21px; margin-bottom: 32px;
  border: 1px solid #e9dfce; background: #faf6ee; border-radius: var(--raio-m);
}
.faixa-atencao .icone-atencao {
  width: 37px; height: 37px; border-radius: 50%; background: #f1e8d7; color: var(--ambar);
  display: grid; place-items: center; flex: none;
}
.faixa-atencao strong { font-size: 14px; font-weight: 650; }
.faixa-atencao p { font-size: 12px; color: #6f6250; margin: 5px 0 0; }
.faixa-atencao .botao { margin-left: auto; background: transparent; border-color: var(--ouro-borda); color: #7a6134; }

/* ---------- Cabeçalho da lista, ferramentas, filtros e busca ---------- */
.cabecalho-lista { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; }
.cabecalho-lista h2 { margin: 0; }
.cabecalho-lista small { font-size: 12px; color: var(--suave); font-weight: 400; margin-left: 8px; }
.ferramentas { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 19px; flex-wrap: wrap; }
.filtros { display: flex; gap: 6px; background: #eef1f5; padding: 4px; border-radius: var(--raio-s); }
.filtro {
  border: 0; background: transparent; padding: 8px 13px; border-radius: 5px; min-height: 44px;
  color: var(--suave); font: inherit; font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.filtro[aria-pressed="true"] { background: var(--superficie); color: var(--navy); font-weight: 600; box-shadow: 0 1px 3px rgba(25, 40, 61, .07); }
.filtro b { font-size: 11px; font-weight: 600; background: #e4e8ee; color: var(--texto-2); min-width: 17px; padding: 2px 5px; border-radius: 4px; }
.busca {
  display: flex; align-items: center; gap: 9px; flex: 1; max-width: 290px; height: 40px; padding: 0 11px;
  border: 1px solid var(--linha-2); background: var(--superficie); border-radius: var(--raio-s); color: var(--suave);
}
.busca .icone { width: 16px; height: 16px; flex: none; }
.busca input { border: 0; padding: 0; background: transparent; font-size: 13px; }
/* Exceção ao foco por outline: quem desenha o anel é o invólucro (o input não tem borda própria),
   por isso — e só por isso — o outline do input é suprimido. */
.busca input:focus-visible { outline: none; }
.busca:focus-within { border-color: var(--ouro); outline: 3px solid var(--foco); outline-offset: 2px; }
.busca-campos { max-width: 420px; margin-bottom: 0; }
.contagem-campos { font-size: 12px; color: var(--suave); }
.paineis-referencia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } /* minmax(0,…): a tabela rola dentro do painel, não empurra a página */

/* ---------- Lista de processos ---------- */
.lista-processos { display: grid; gap: 12px; }
.item-processo {
  /* símbolo · texto · progresso · etiquetas · chevron */
  display: grid; grid-template-columns: 43px minmax(180px, 1fr) 155px 185px 16px;
  align-items: center; gap: 14px; width: 100%; text-align: left; color: inherit;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 24px 23px;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.item-processo:hover { border-color: #c5cdd8; box-shadow: var(--sombra); transform: translateY(-2px); text-decoration: none; }
/* Os cartões entram em cascata só na primeira pintura da lista (a classe sai depois): filtrar ou
   digitar na busca redesenha a lista o tempo todo, e reanimar a cada tecla embrulha o estômago. */
.lista-processos.entrando > .item-processo { animation: entrar var(--medio) both; }
.lista-processos.entrando > .item-processo:nth-child(2) { animation-delay: 40ms; }
.lista-processos.entrando > .item-processo:nth-child(3) { animation-delay: 80ms; }
.lista-processos.entrando > .item-processo:nth-child(4) { animation-delay: 120ms; }
.lista-processos.entrando > .item-processo:nth-child(5) { animation-delay: 160ms; }
.lista-processos.entrando > .item-processo:nth-child(6) { animation-delay: 200ms; }
.simbolo-processo {
  width: 43px; height: 48px; display: grid; place-items: center; flex: none;
  border: 1px solid #e9e3d8; background: #faf7f1; border-radius: 9px; color: var(--ouro-texto);
}
.simbolo-processo.azul { background: #f0f4f8; border-color: #e2e8ef; color: var(--azul); }
.tipo-processo { font-size: 11px; font-weight: 700; letter-spacing: 1.3px; color: var(--suave); text-transform: uppercase; margin-bottom: 7px; }
.item-processo .titulo { font-family: var(--f-titulo); font-size: 15px; font-weight: 650; letter-spacing: -.1px; line-height: 1.45; margin: 0 0 9px; }
.item-processo .meta, .meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--suave); flex-wrap: wrap; }
.meta .icone { width: 12px; height: 12px; }
.ponto-meta { margin: 0 2px; } /* herda a cor da meta: um separador também é texto */
.progresso-etapas { font-size: 12px; color: var(--texto-2); }
.rotulo-progresso { display: flex; gap: 8px; margin-bottom: 9px; }
.progresso-etapas b { font-weight: 600; color: var(--texto-2); }
.progresso-etapas i { height: 4px; flex: 1; background: var(--trilho); border-radius: 2px; }
.trilho-progresso { display: flex; gap: 4px; max-width: 150px; }
.progresso-etapas i.feita { background: #b69b6d; }
.progresso-etapas i.atual { background: var(--ouro); }
.etiquetas { justify-self: end; text-align: right; }
.proxima-acao { display: block; font-size: 11px; color: var(--suave); margin-top: 9px; text-align: right; }
.chevron-cartao { width: 16px; height: 16px; color: var(--traco-suave); }
.rodape-lista { margin: 16px 2px 30px; display: flex; justify-content: space-between; color: var(--suave); font-size: 12px; }

/* ---------- Guia "do documento à minuta" ---------- */
.guia { border-top: 1px solid var(--linha); padding-top: 26px; margin-top: 27px; }
.guia-cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.guia-cabecalho h2 { font-family: var(--f-texto); font-size: 14px; color: var(--texto-2); font-weight: 600; margin: 0; }
.guia-cabecalho span { font-size: 12px; color: var(--suave); }
.passos-guia { display: flex; align-items: flex-start; gap: 14px; }
.passo-guia { display: flex; align-items: flex-start; gap: 10px; flex: 1; }
.passo-guia strong { display: block; font-size: 12px; color: var(--texto-2); font-weight: 500; margin-top: 3px; }
.passo-guia p { font-size: 11px; line-height: 1.5; color: var(--suave); margin: 6px 0; }
.numero-passo {
  height: 25px; width: 25px; flex: none; border: 1px solid var(--linha-2); border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; color: var(--suave);
}
.seta-guia { width: 14px; height: 14px; color: var(--traco-suave); margin-top: 6px; }

/* ---------- Chips ---------- */
/* Os chip-<situação> são montados no JavaScript (`chip-${emissao.status}`, `chip-${resultado}`,
   `chip-${arquivo.status}`): o nome da classe nunca aparece escrito por inteiro no código, então
   uma varredura por texto os daria como mortos. Nenhum deles sai daqui sem conferir o status. */
.chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  border-radius: 5px; padding: 6px 8px; font-size: 11px; font-weight: 500;
  background: var(--cinza-claro); color: var(--cinza); border: 1px solid transparent;
}
.chip .icone { width: 12px; height: 12px; }
.chip-ambar, .chip-aguardando_usuario, .chip-aguardando, .chip-sugerido, .chip-positiva_efeito_negativa, .selo-conferir { background: var(--ambar-claro); color: var(--ambar); }
.chip-azul, .chip-na_fila, .chip-em_andamento, .chip-lendo { background: var(--azul-claro); color: var(--azul); }
.chip-verde, .chip-emitida, .chip-negativa, .chip-lido { background: var(--verde-claro); color: var(--verde); }
.chip-cinza, .chip-pendente, .chip-faltam { background: var(--cinza-claro); color: var(--cinza); }
.chip-pendente, .chip-faltam { background: transparent; border-color: var(--linha-2); border-style: dashed; }
.chip-positiva, .chip-erro { background: var(--vermelho-claro); color: var(--vermelho); }
.chip-nao_emitida { background: var(--roxo-claro); color: var(--roxo); }
.chip-quebra { white-space: normal; max-width: 360px; }
.pulsar::before, .chip-lendo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; animation: pulsar 1s infinite; }
.ponto { display: none; }
.papel { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--ouro-claro); color: var(--ambar); font-weight: 700; }
.papel-falecido { background: var(--navy); color: #fff; }

/* ---------- Régua de etapas (stepper) ---------- */
.etapas {
  /* position: relative deixa cada .etapa medir o próprio offsetLeft dentro da régua — é o que
     centralizarEtapaAtiva() usa para rolar até a etapa aberta nas telas estreitas. */
  display: flex; position: relative; margin: 25px 0; padding: 0; list-style: none; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-m);
}
.etapa {
  display: flex; gap: 9px; align-items: center; justify-content: center; flex: 1;
  background: var(--superficie); border: 0; border-bottom: 2px solid transparent;
  padding: 18px 8px; font: inherit; font-size: 12px; color: var(--suave); text-align: center;
}
.etapa:hover { background: var(--fundo-2); color: var(--texto); text-decoration: none; }
.numero-etapa {
  height: 25px; width: 25px; flex: none; border: 1px solid var(--linha-2); border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; color: var(--suave); background: var(--superficie);
}
.rotulo-etapa { color: inherit; }
.etapa.feita .numero-etapa { background: var(--verde); border-color: var(--verde); color: #fff; }
/* Alerta depois de feita: uma etapa concluída que ainda pede conferência continua em âmbar. */
.etapa.alerta .numero-etapa { background: var(--ambar-claro); border-color: var(--ambar); color: var(--ambar); }
.etapa.alerta .rotulo-etapa { color: var(--ambar); font-weight: 600; }
/* "Você está aqui" é a pista mais forte da régua: na etapa aberta o número volta ao navy (mesmo em
   alerta, que fica só no rótulo) — por isso estas regras vêm por último. */
.etapa.atual, .etapa[aria-current="step"] { background: var(--fundo-2); border-bottom-color: var(--navy); color: var(--navy); font-weight: 650; }
.etapa.atual .numero-etapa, .etapa[aria-current="step"] .numero-etapa { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- Grade da página de processo ---------- */
.grade-processo { display: grid; grid-template-columns: minmax(0, 1fr) 278px; gap: 23px; align-items: start; }
/* Miolo da etapa: um painel atrás do outro, sempre com o mesmo respiro entre eles.
   min-width: 0 para a matriz de certidões rolar dentro do painel em vez de esticar a coluna. */
.conteudo-etapa { min-width: 0; }
.conteudo-etapa > * + * { margin-top: 16px; }
.conteudo-etapa .painel > .secao-documentos { margin-top: 0; }

/* ---------- Abas de seção (dentro de uma etapa) ---------- */
.abas-secao { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 23px; }
.abas-secao button {
  /* relative: o texto só de leitor de tela (.so-leitor, absoluto) fica preso ao botão, e não à página. */
  position: relative;
  display: inline-flex; align-items: center; gap: 8px; min-height: 41px; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 6px;
  padding: 9px 12px; font: inherit; font-size: 14px; color: var(--suave);
  transition: background var(--rapido), color var(--rapido);
}
.abas-secao button:hover { background: var(--fundo-2); color: var(--texto); }
.abas-secao button.ativa, .abas-secao button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.abas-secao button[aria-pressed="true"]:hover { background: var(--navy-2); color: #fff; }
.abas-secao button:disabled { opacity: .55; cursor: not-allowed; }
/* Quantos dados daquela aba esperam conferência (o contador da barra fala da ficha inteira). */
.selo-aba {
  min-width: 20px; padding: 1px 6px; border-radius: 99px; font-size: 11px; font-weight: 700;
  background: var(--ouro-claro); color: var(--ambar); border: 1px solid var(--ouro-borda);
}
.abas-secao button[aria-pressed="true"] .selo-aba { background: var(--ouro); color: var(--navy); border-color: var(--ouro); }
/* Na etapa, as abas seguem o mesmo respiro dos painéis (o margin-top de .conteudo-etapa > * + *). */
.conteudo-etapa > .abas-secao { margin-bottom: 0; }

/* ---------- Etapa Pessoas e bens ---------- */
.painel-pessoas .tabela-pessoas td { vertical-align: middle; }
.painel-pessoas .tabela-pessoas td:last-child { width: 96px; text-align: right; }
.painel-pessoas .papel { font-size: 12px; }
/* A cor suave vale só para as etiquetas de fundo claro: no :not() ela não alcança o falecido,
   que é navy com texto branco — sem isso ela ganharia por especificidade e cairia para 2,9:1. */
.painel-pessoas .papel:not(.papel-falecido) { color: var(--suave); }
.acoes-pessoas { margin-top: 16px; }

/* ---------- Tabelas ---------- */
/* position: relative para que um texto só de leitor de tela (.so-leitor, absoluto) dentro da tabela fique
   preso a este quadro: sem isso ele se posiciona contra a página e a faz rolar de lado no celular. */
.tabela-rolagem { position: relative; overflow: auto; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.matriz { border-collapse: separate; border-spacing: 0; }
th { text-align: left; color: var(--suave); font-size: 11px; letter-spacing: .9px; font-weight: 600; background: #fafbfd; text-transform: uppercase; }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--linha); white-space: nowrap; vertical-align: middle; }
td strong { font-weight: 600; }
td small { display: block; font-size: 11px; color: var(--suave); margin-top: 5px; }
.matriz thead th { position: sticky; top: 0; min-width: 132px; background: #fafbfd; z-index: 1; }
.matriz thead th small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; }
.matriz tbody tr:last-child td { border-bottom: 0; }
.matriz tbody tr:hover td { background: #fbfcfd; }
.matriz .col-pessoa { position: sticky; left: 0; background: var(--superficie); min-width: 260px; z-index: 1; border-right: 1px solid var(--linha); }
.matriz thead .col-pessoa { background: #fafbfd; z-index: 2; }
.pessoa-nome { font-weight: 600; text-transform: uppercase; font-size: 13px; }
.pessoa-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--suave); }
/* Célula da matriz que abre o detalhe da emissão: botão sem cara de botão, só o chip. Ele ocupa a
   largura toda da célula para o alvo do clique continuar sendo a célula inteira, como antes. */
.botao-celula { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: flex; width: 100%; border-radius: 6px; }
.botao-celula:hover .chip { box-shadow: 0 0 0 2px var(--linha-2); }
.linha-acoes { display: flex; gap: 2px; margin-top: 4px; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--suave); align-items: center; }
.tabela-simples td, .tabela-simples th { vertical-align: top; white-space: normal; }
.tabela-pessoas { width: 100%; border-collapse: collapse; }
.tabela-pessoas th { font-size: 11px; padding: 0 6px 6px; background: transparent; border: 0; }
.tabela-pessoas td { padding: 4px 6px; border: 0; white-space: normal; }
.tabela-pessoas td:first-child { width: 160px; }
.tabela-pessoas td.cpf { width: 150px; }
.tabela-pessoas td.data { width: 125px; }
.tabela-pessoas td:last-child { width: 44px; }
.definicoes { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.definicoes dt { color: var(--suave); }
.definicoes dd { margin: 0; }

/* ---------- Formulário de processo (Novo / Editar) ---------- */
/* Um painel atrás do outro, com o mesmo respiro da etapa; o painel de perigo fica fora do <form>. */
.formulario-processo > .painel + .painel, .formulario-processo + .painel-perigo { margin-top: 16px; }
.formulario-processo .painel > h2 + .grade-campos { margin-top: 18px; }
.formulario-processo p.suave { margin: 0 0 10px; } /* aviso da UF sem robô estadual */
.formulario-processo .tabela-rolagem { border: 0; margin-top: 10px; } /* a moldura já é a do painel */
.esfera-certidoes + .esfera-certidoes { margin-top: 14px; }
.grupo-certidoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 8px; }
.opcao-certidao {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--linha); border-radius: var(--raio-s); background: var(--superficie); cursor: pointer;
  transition: border-color var(--rapido), background var(--rapido);
}
.opcao-certidao:has(input:checked) { border-color: var(--navy); background: var(--fundo-2); }
.opcao-certidao input { width: auto; margin-top: 3px; }
.opcao-certidao small { display: block; color: var(--suave); font-size: 12px; }
/* Painel de perigo: borda tingida de vermelho e título na cor do risco — o resto do painel é igual. */
.painel-perigo { border-color: #eed7d4; }
.painel-perigo > h2 { color: var(--vermelho); }
.painel-perigo > p { font-size: 13px; color: var(--suave); line-height: 1.7; }
.painel-perigo > .campo { max-width: 420px; margin-top: 18px; }
.painel-perigo > .acoes { margin-top: 18px; }

/* ---------- Barra do robô ----------
   Faixa fina de navy sob o topo (plano §2). Quando o robô precisa de alguém ela ganha o traço de
   ouro na borda esquerda e o ícone de atenção pulsa; o fundo continua navy, para o quadro branco
   do captcha ser a única coisa clara da faixa — é nele que a pessoa tem de olhar. */
.barra-robo {
  position: sticky; top: var(--altura-topo); z-index: 14;
  padding: 10px 42px; background: var(--navy-2); color: #e7ecf3; font-size: 13px;
  border-bottom: 1px solid var(--navy); box-shadow: inset 0 -2px 0 var(--ouro-suave);
}
.barra-robo.atencao { box-shadow: inset 4px 0 0 var(--ouro), inset 0 -2px 0 var(--ouro); }
/* --ouro-suave sobre --navy-2: 6,2:1. */
.barra-robo .icone-atencao, .barra-robo.atencao .texto strong { color: var(--ouro-suave); }
/* :not(.botao-primario) para o botão de ação principal da barra continuar sendo o botão navy cheio. */
.barra-robo .botao:not(.botao-primario) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); color: inherit; }
.barra-robo .botao:not(.botao-primario):hover { background: rgba(255, 255, 255, .16); }
/* O vermelho de --botao-perigo desaparece no navy: sobre a faixa escura o "Parar tudo" fica em rosa
   claro (8,3:1). Dois nomes de classe no mesmo elemento para ganhar da regra de cor acima. */
.barra-robo .botao.botao-perigo { color: #f6ccc7; }
.barra-robo .botao.botao-perigo:hover { background: rgba(255, 255, 255, .16); }
/* O --suave dos textos secundários dá 2,4:1 sobre o navy: na faixa ele vira um cinza claro (6,9:1). */
.barra-robo .suave { color: #b9c4d2; }
.barra-robo a:not(.botao) { text-decoration: underline; }
.barra-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.barra-linha .texto { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.barra-linha .texto strong { font-weight: 650; }
.barra-linha .texto .mensagem { flex-basis: 100%; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ouro é a cor de "precisa de você": o robô trabalhando fica no cinza claro da faixa (6,9:1). */
.icone-robo { display: flex; flex: none; color: #b9c4d2; }
.acoes-robo { gap: 8px; }
/* O captcha é um cartão claro dentro da faixa: a mesma pele dos painéis, com a borda de ouro. */
.quadro-captcha {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; padding: 14px 16px;
  background: var(--superficie); border: 1px solid var(--ouro-borda); border-radius: var(--raio-m);
  color: var(--texto); box-shadow: var(--sombra);
}
.quadro-captcha.pedindo-atencao { animation: pulsarBorda 1.2s infinite; }
.captcha-imagem { height: 70px; border-radius: 6px; border: 1px solid var(--linha); background: #fff; }
.captcha-formulario { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.captcha-mensagem { flex-basis: 100%; font-size: 13px; color: var(--ambar); }
.quadro-captcha .campo { min-width: 190px; max-width: 230px; } /* o rótulo "Código da imagem" dá a largura */
.captcha-campo { font-size: 18px; letter-spacing: .1em; font-family: var(--f-mono); }
.girando { width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .8s linear infinite; }
.icone-atencao { display: flex; animation: pulsar 1s infinite; }
.chip-lendo .girando { width: 11px; height: 11px; border-width: 2px; }

/* ---------- Modal ---------- */
.modal {
  border: 1px solid var(--linha); border-radius: 15px; padding: 0; overflow: hidden;
  max-width: 570px; width: calc(100% - 32px); max-height: 90vh;
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta);
}
/* Coluna com cabeçalho e rodapé parados e o corpo rolando no meio: num modal alto (Novo modelo,
   Pessoa, Emissão) os botões continuam à vista. [open], e não .modal: dar display a um diálogo
   fechado anularia o display:none que o navegador dá a ele. */
.modal[open], .modal[open] > form { display: flex; flex-direction: column; min-height: 0; }
.modal[open] > form { flex: 1; }
.modal::backdrop { background: rgba(17, 31, 54, .45); backdrop-filter: blur(4px); }
.modal-cabecalho { flex: none; padding: 26px 28px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--linha); }
.modal-cabecalho h2 { font-size: 20px; margin: 0; }
.modal-cabecalho p { font-size: 12px; color: var(--suave); margin: 8px 0 0; }
.modal-corpo { flex: 1; min-height: 0; overflow: auto; padding: 24px 28px; display: grid; gap: 16px; align-content: start; }
.modal-rodape { flex: none; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 18px 28px; background: #f9fafb; border-top: 1px solid var(--linha); }
.caixa-mensagem { background: var(--fundo-2); border-radius: var(--raio-s); padding: 12px 14px; font-size: 13px; white-space: pre-wrap; }
.caixa-mensagem.ok { background: var(--verde-claro); color: var(--verde); }
.caixa-mensagem.erro { background: var(--vermelho-claro); color: var(--vermelho); }

/* ---------- Avisos (toast) ---------- */
.avisos {
  position: fixed; bottom: 25px; left: calc(50% + var(--largura-lateral) / 2); transform: translateX(-50%);
  display: grid; gap: 8px; justify-items: center; z-index: 100; max-width: 90vw;
  pointer-events: none; /* aviso nenhum tem botão: ele nunca fica na frente do que está embaixo */
}
.aviso {
  display: flex; align-items: center; gap: 10px;
  background: var(--navy); color: #fff; padding: 15px 23px; border-radius: 9px;
  box-shadow: 0 7px 25px rgba(25, 40, 61, .22); font-size: 13px; max-width: 420px;
  animation: entrar var(--medio) both;
}
.aviso.erro { background: var(--vermelho); }
.aviso.ok { background: var(--verde); }

/* ---------- Avisos embutidos nas telas ---------- */
.aviso-leitura, .aviso-previa, .aviso-chave-ambiente, .avisos-proposta {
  background: var(--ouro-claro); border: 1px solid var(--ouro-borda); color: var(--ambar); border-radius: var(--raio-s);
}
.aviso-leitura { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; padding: 12px 14px; }
.aviso-leitura a { color: var(--ambar); font-weight: 700; }
.aviso-previa { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 14px; font-weight: 600; }
.aviso-chave-ambiente { margin: 8px 0 0; padding: 12px 14px; }
.avisos-proposta ul { margin: 4px 0 0; padding-left: 18px; max-height: 128px; overflow: auto; }
.avisos-proposta li { margin: 2px 0; }
.avisos-proposta .botao-icone { color: var(--ambar); }
.suave-ambar { font-size: 12px; opacity: .85; }
.linha-espera { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.linha-espera .botao { background: var(--superficie); border-color: var(--ouro-borda); }
.aviso-tipo-ato { margin: 6px 0 0; font-size: 12px; }
.erros-modelo { background: var(--vermelho-claro); color: var(--vermelho); border: 1px solid #eed7d4; border-radius: var(--raio-s); padding: 12px 14px; }
.erros-modelo ul { margin: 6px 0 0; padding-left: 20px; }
.erro-consulta { margin: 8px 0 0; color: var(--vermelho); font-size: 13px; }
.aviso-conflito {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px; border-color: #eed7d4; background: var(--vermelho-claro); color: var(--vermelho);
}
.aviso-conflito p { margin: 4px 0 0; color: #7a2018; max-width: 70ch; }

/* ---------- Minuta: barra e prévia ---------- */
.barra-minuta { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.barra-minuta .campo { min-width: min(320px, 100%); }
/* Etapa Pessoas e bens: a barra é só o contador e o indicador de salvamento, dentro do painel da ficha. */
.barra-minuta.barra-compacta {
  align-items: center; justify-content: flex-start; gap: 12px;
  padding: 0 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--linha);
}
.area-previa:empty { display: none; } /* a prévia só ocupa espaço depois de gerada */
.linha-resumo { display: flex; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--linha); padding: 16px 0; font-size: 13px; }
.linha-resumo span { color: var(--suave); }
.linha-resumo strong { font-weight: 500; text-align: right; }
.linha-resumo:last-child { border-bottom: 0; }
.previa-minuta {
  font-family: var(--f-marca); line-height: 1.9; font-size: 14px; text-align: justify;
  background: var(--superficie); padding: 35px; border: 1px solid var(--linha); border-radius: var(--raio-s);
  max-height: 75vh; overflow: auto;
}
.previa-minuta h2 { text-align: center; font-family: var(--f-marca); margin-bottom: 25px; }
.previa-minuta mark { background: var(--ouro-claro); outline: 1px solid var(--ouro-borda); padding: 0 2px; }
.previa-minuta.previa-desatualizada { opacity: .55; }

/* ---------- Etapa Revisão ---------- */
.resumo-pendencias { margin: 0 0 4px; font-size: 12px; color: var(--suave); }
.lista-pendencias ul { margin: 6px 0 0; padding-left: 18px; }
.lista-pendencias li { margin: 3px 0; break-inside: avoid; }
.lista-pendencias li .dica { display: inline; }
.lista-pendencias strong { display: block; }
.lista-pendencias > div { min-width: 0; flex: 1; }
@media (min-width: 1020px) { .lista-pendencias ul { columns: 2; column-gap: 28px; } }
.resumo-revisao { margin: 20px 0; }
.acoes-revisao { justify-content: flex-start; }
/* Botão que se lê como um link (pendência que leva ao campo). */
.link {
  background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left;
  text-decoration: underline dotted; cursor: pointer; overflow-wrap: anywhere;
}
.link:hover { text-decoration-style: solid; }
/* Em bloco: como inline-block, um item que quebrava em duas linhas deixava o marcador da lista lá embaixo. */
.lista-pendencias li .link { display: block; }

/* ---------- Ficha ---------- */
.ficha-secao h3 { font-size: 16px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
section.ficha-secao.invalido { border-color: var(--vermelho); box-shadow: 0 0 0 1px var(--vermelho); }
section.ficha-secao.a-conferir:not(.invalido) { border-color: var(--ouro); box-shadow: 0 0 0 1px var(--ouro-borda); }
/* Vence "label.campo" e ".campo" pela especificidade, sem !important. */
label.campo-simnao, .campo.campo-simnao { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.campo-simnao input { width: auto; }
.campo-simnao.invalido { color: var(--vermelho); }
fieldset.grupo-ficha {
  grid-column: 1 / -1; position: relative; margin: 0; padding: 12px 16px 16px;
  border: 1px solid var(--linha); border-radius: var(--raio-s); background: var(--superficie);
}
fieldset.grupo-ficha legend { font-size: 11px; font-weight: 700; color: var(--suave); padding: 0 6px; text-transform: uppercase; letter-spacing: .06em; }
fieldset.grupo-ficha.invalido { border-color: var(--vermelho); }
fieldset.grupo-ficha.a-conferir { border-color: var(--ouro); background: #fffdf8; }
fieldset.grupo-ficha.a-conferir.invalido { border-color: var(--vermelho); }
fieldset.grupo-ficha > label.campo-simnao { display: inline-flex; margin: 4px 18px 4px 0; }
details.entidade, .item-ficha { border: 1px solid var(--linha); border-radius: var(--raio-s); padding: 12px 16px; margin-top: 8px; background: var(--superficie); transition: border-color var(--rapido); }
details.entidade[open] { border-color: var(--linha-2); }
details.entidade summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; list-style: none; }
details.entidade summary::-webkit-details-marker { display: none; }
details.entidade[open] summary { margin-bottom: 10px; }
.titulo-entidade { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.titulo-entidade strong { text-transform: uppercase; font-size: 13px; }
.item-ficha-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.linha-parte { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: 8px; margin-top: 8px; align-items: center; }
/* Sem isto, um <select> com um nome longo não encolhe (min-width: auto dos itens de grade) e empurra
   a ficha inteira para fora da tela no celular. */
.linha-parte > select { min-width: 0; }
.linha-parte.parte-sugerida { padding: 8px; border-radius: var(--raio-s); background: var(--ouro-claro); border: 1px solid var(--ouro-borda); }
.sugestao-parte { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ambar); }
.sugestao-parte .botao { margin-left: auto; }
.campo-ficha { display: flex; flex-direction: column; min-width: 0; position: relative; }
.campo-ficha.com-origem .rotulo-texto { padding-right: 22px; }
input.a-conferir:not(.invalido), select.a-conferir:not(.invalido), textarea.a-conferir:not(.invalido) { border-color: var(--ouro); background: var(--ouro-claro); }
.origem-valor { font-size: 12px; line-height: 1.35; }
.origem-conferir {
  display: flex; flex-direction: column; gap: 5px; margin-top: 6px; padding: 8px 10px;
  border-radius: var(--raio-s); background: var(--ouro-claro); border: 1px solid var(--ouro-borda);
  color: var(--ambar); font-weight: 500; font-size: 12px;
}
fieldset.grupo-ficha .origem-conferir { margin-top: 8px; }
.origem-botoes { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.origem-botoes .botao { min-height: 28px; font-size: 12px; padding: 4px 9px; }
.origem-sutil { position: absolute; top: -3px; right: 0; }
fieldset.grupo-ficha > .origem-sutil { top: 2px; right: 6px; }
.alternativa { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.botao-usar { white-space: normal; text-align: left; border-color: var(--ouro-borda); background: var(--superficie); max-width: 100%; overflow-wrap: anywhere; }
.botao-usar:hover { background: #fdf7e9; }
.link-arquivo { background: none; border: 0; padding: 0; font: inherit; color: var(--texto); text-decoration: underline dotted; cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.arquivo-removido { font-style: italic; }
.link-origem { background: none; border: 0; padding: 1px 3px; font-size: 12px; line-height: 1; cursor: pointer; border-radius: 4px; color: var(--suave); display: inline-flex; align-items: center; gap: 3px; }
.link-origem:hover, .link-origem:focus-visible { color: var(--texto); background: var(--fundo-2); }
span.link-origem { cursor: default; opacity: .6; }
.contador-conferir {
  font: inherit; font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 99px; cursor: pointer;
  background: var(--ouro-claro); color: var(--ambar); border: 1px solid var(--ouro-borda);
}
.contador-conferir::before { content: "● "; color: var(--ouro); }
.contador-conferir:hover { background: #fdf7e9; }
.selo-conferir { border-radius: 5px; padding: 4px 8px; font-size: 11px; font-weight: 500; }

/* ---------- Documentos (leitura pela IA) ---------- */
.secao-documentos { margin-top: 16px; }
/* Só os avisos da leitura: sem moldura e sem altura quando não há nada a dizer. */
.secao-documentos.so-avisos { margin: 0; padding: 0; border: 0; background: none; }
.cabecalho-documentos { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cabecalho-documentos h2 { margin: 0; }
.resumo-documentos { margin: 2px 0 0; font-size: 13px; color: var(--suave); }
.zona-envio {
  border: 1px dashed #cad3de; border-radius: var(--raio-m); background: #f9fafc;
  padding: 32px 20px; text-align: center; transition: background var(--rapido), border-color var(--rapido);
}
.zona-envio > .icone { width: 30px; height: 30px; color: #64748b; margin-bottom: 15px; }
.zona-envio p { margin: 0; font-size: 12px; color: var(--suave); }
.zona-envio p strong { display: block; font-family: var(--f-titulo); font-size: 14px; font-weight: 700; color: var(--texto); margin-bottom: 8px; }
.zona-envio p + p { margin-top: 8px; }
.zona-envio .botao { margin: 8px 4px 0; }
.zona-envio.arrastando { border-color: var(--ouro); background: #fbf6eb; }
.lista-envios, .lista-documentos { list-style: none; margin: 0; padding: 0; }
.lista-envios:not(:empty) { margin-top: 8px; display: grid; gap: 4px; }
.envio { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); }
.envio-erro { justify-content: space-between; padding: 8px 12px; border-radius: var(--raio-s); background: var(--vermelho-claro); color: var(--vermelho); }
.envio-erro .botao-icone { color: var(--vermelho); }
.envio .girando { width: 12px; height: 12px; }
.lista-documentos:not(:empty) { margin-top: 10px; border: 1px solid var(--linha); border-radius: var(--raio-s); }
.documento { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--linha); }
.documento:last-child { border-bottom: 0; }
.documento-info { display: flex; flex-direction: column; min-width: 0; }
.documento-nome { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.documento-meta { font-size: 12px; color: var(--suave); margin-top: 4px; }
.documento-legibilidade { font-size: 12px; color: var(--ambar); }
.documento-observacoes { font-size: 12px; color: var(--suave); }
.documento-acoes { display: flex; justify-content: flex-end; gap: 6px; }
.lista-recolhivel { margin-top: 10px; border: 1px solid var(--linha); border-radius: var(--raio-s); }
.lista-recolhivel > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: var(--suave); }
.lista-recolhivel > summary.com-erro { color: var(--vermelho); }
.lista-recolhivel[open] > summary { border-bottom: 1px solid var(--linha); }
.lista-recolhivel .lista-documentos { margin: 0; border: 0; max-height: min(45vh, 420px); overflow: auto; }
.sem-documentos { margin: 12px 0 0; font-size: 12px; color: var(--suave); }
.sem-documentos button { background: none; border: 0; padding: 0; font: inherit; color: var(--suave); text-decoration: underline dotted; cursor: pointer; }

/* Visualizador de documento: painel à direita, acoplado à ficha */
.visualizador {
  position: sticky; top: calc(var(--altura-topo) + 12px); display: flex; flex-direction: column;
  max-height: calc(100vh - 100px); overflow: hidden;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-m); box-shadow: var(--sombra);
}
.visualizador-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linha); }
.visualizador-titulo { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.visualizador-titulo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visualizador-titulo small { color: var(--suave); }
.visualizador-topo .acoes { flex-wrap: nowrap; }
.visualizador-corpo { flex: 1; min-height: 360px; background: #e7eaee; }
.visualizador-corpo iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }
.visualizador-imagem { overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 12px; }
.visualizador-imagem img { max-width: 100%; height: auto; background: #fff; }

/* O visualizador fixo (≤1100 px) cobre a direita da tela: o topo e a barra do robô recuam. */
body.com-visualizador .topo, body.com-visualizador .barra-robo { padding-right: 24px; }

/* ---------- Modelos ---------- */
.grade-modelos { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; align-items: start; }
.cartoes-modelos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cartao-modelo { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); overflow: hidden; }
.arte-modelo { height: 160px; background: #eef1f5; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; padding-top: 26px; }
.papel-modelo {
  width: 190px; height: 170px; padding: 23px 21px; text-align: center; transform: rotate(-4deg);
  background: var(--superficie); border: 1px solid var(--linha); box-shadow: 0 4px 20px rgba(28, 44, 73, .07);
}
.papel-modelo .marca-papel { font-family: var(--f-marca); font-size: 15px; color: var(--ouro-texto); margin-bottom: 14px; }
.papel-modelo strong { display: block; font-size: 9px; letter-spacing: 1px; margin-bottom: 16px; }
.papel-modelo i { display: block; height: 2px; background: #e3e8ee; margin: 6px 0; }
.papel-modelo i:last-child { width: 65%; }
.corpo-modelo { padding: 24px; display: flex; flex-direction: column; flex: 1; }
/* Numa coluna flex o chip esticaria de ponta a ponta: aqui ele fica do tamanho do rótulo. */
.corpo-modelo > .chip { align-self: flex-start; }
.cartao-modelo h2 { font-size: 17px; line-height: 1.5; margin: 14px 0 7px; }
.cartao-modelo p { font-size: 12px; color: var(--suave); line-height: 1.75; }
.meta-modelo { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 18px 0; font-size: 12px; color: var(--suave); }
.acoes-modelo {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin-top: auto; padding-top: 19px; border-top: 1px solid var(--linha);
}
/* Chamada do painel de contexto (ex.: "Campos disponíveis"): ocupa a largura da coluna. */
.painel-contexto > .botao { width: 100%; margin-top: 10px; }

/* ---------- Configurações ---------- */
.grade-configuracoes { display: grid; grid-template-columns: 220px minmax(0, 690px); gap: 25px; align-items: start; }
.nav-configuracoes { display: flex; flex-direction: column; gap: 5px; }
.nav-configuracoes a {
  display: block; text-align: left; border-radius: var(--raio-s); background: transparent;
  font-size: 14px; padding: 13px; color: var(--suave);
}
.nav-configuracoes a:hover { background: var(--fundo-2); color: var(--texto); text-decoration: none; }
.nav-configuracoes a.ativa { background: #e9edf2; color: var(--navy); font-weight: 600; }
.linha-interruptor { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; }
.linha-interruptor strong { font-size: 13px; }
.linha-interruptor p { font-size: 12px; color: var(--suave); margin: 7px 0 0; }
.interruptor {
  appearance: none; cursor: pointer; position: relative; flex: none;
  min-width: 38px; width: 38px; height: 22px; border-radius: 15px; background: #d9e0e8; transition: background .2s;
}
.interruptor::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--superficie); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); transition: left .2s;
}
.interruptor:checked { background: var(--navy); }
.interruptor:checked::after { left: 19px; }
.pagina-configuracoes { max-width: 760px; }
.pagina-configuracoes p { margin: 0 0 10px; }
.pagina-configuracoes > h3 { margin-top: 26px; }
.pagina-configuracoes select, .pagina-configuracoes .formulario-chave input { max-width: 460px; }
.pagina-configuracoes .caixa-mensagem.ok, .pagina-configuracoes .caixa-mensagem.erro { margin-top: 12px; }
.lista-explicacao { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 4px; }
.situacao-chave { padding: 12px 14px; border-radius: var(--raio-s); background: var(--fundo-2); }
.situacao-chave.com-chave { background: var(--verde-claro); color: var(--verde); }
.formulario-chave { display: grid; gap: 6px; margin-top: 12px; }
.formulario-chave input { font-family: var(--f-mono); }
.formulario-chave .dica { font-size: 12px; }
.formulario-chave .acoes { margin-top: 6px; }

/* ---------- Modo apresentação ---------- */
body.apresentacao [data-pessoal] { filter: blur(5px); user-select: none; }
body.apresentacao .visualizador-corpo { position: relative; }
body.apresentacao .visualizador-corpo > * { visibility: hidden; }
body.apresentacao .visualizador-corpo::after {
  content: "documento oculto no modo apresentação"; display: grid; place-items: center;
  position: absolute; inset: 0; color: var(--suave);
}

/* ============================ Responsivo ============================ */
@media (min-width: 1600px) {
  .conteudo { padding-top: 49px; }
  .item-processo { padding-top: 29px; padding-bottom: 29px; }
  .indicadores { margin-bottom: 30px; }
  .faixa-atencao { margin-bottom: 39px; }
  .guia { margin-top: 43px; }
}

@media (max-width: 1250px) {
  :root { --largura-lateral: 218px; }
  .lateral { padding-left: 16px; padding-right: 16px; }
  .lateral .marca { margin-left: 8px; }
  .lateral nav a.ativa::before { left: -16px; }
  .topo, .barra-robo { padding-left: 28px; padding-right: 28px; }
  .conteudo, .rodape-pagina { padding-left: 28px; padding-right: 28px; }
  .item-processo { grid-template-columns: 40px minmax(180px, 1fr) 185px 16px; gap: 12px; padding: 21px 17px; }
  .progresso-etapas { display: none; }
  .grade-processo { grid-template-columns: minmax(0, 1fr) 238px; }
  .cartoes-modelos { grid-template-columns: 1fr; }
  .indicador { padding: 18px; }
  .busca { min-width: 210px; }
}

@media (max-width: 1020px) {
  :root { --largura-lateral: 190px; }
  .lateral { padding: 25px 12px 12px; }
  .lateral .marca { font-size: 27px; gap: 9px; margin-left: 7px; }
  .legenda-marca { letter-spacing: 1.4px; } /* 9 px é o piso: abaixo disso ninguém lê */
  .lateral nav a.ativa::before { left: -12px; }
  .escritorio { padding: 11px 7px; font-size: 12px; gap: 7px; }
  .escritorio small { font-size: 9px; }
  .lateral nav a { font-size: 12px; padding: 12px 9px; gap: 9px; }
  .contador-nav { display: none; }
  .topo, .barra-robo { padding-left: 23px; padding-right: 23px; }
  .conteudo, .rodape-pagina { padding-left: 23px; padding-right: 23px; }
  .topo-direita .data, .separador-topo { display: none; }
  .item-processo { grid-template-columns: 40px 1fr 148px 16px; }
  .ferramentas { align-items: stretch; flex-wrap: wrap; }
  .busca { max-width: none; min-width: 220px; }
  /* minmax(0, 1fr), não 1fr: sem isso a matriz de certidões empurra a coluna e a página rola de lado. */
  .grade-processo, .grade-modelos { grid-template-columns: minmax(0, 1fr); }
  .grade-processo > .painel-contexto { display: none; }
  .passos-guia { gap: 8px; }
  .seta-guia { display: none; }
  .passo-guia { gap: 7px; }
  .etapa { font-size: 11px; gap: 6px; }
  .grade-configuracoes { grid-template-columns: 170px 1fr; }
  .indicadores, .resumo { grid-template-columns: repeat(2, 1fr); }
  .etapas { overflow: auto; }
}

@media (max-width: 740px) {
  :root { --largura-lateral: 244px; --altura-topo: 62px; }
  /* visibility tira os links da gaveta fechada da ordem de tabulação (transform sozinho não tira);
     o atraso de 0,2 s segura a visibilidade até a animação de saída terminar. */
  .lateral { transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility 0s .2s; width: 244px; }
  .lateral.aberta { transform: translateX(0); visibility: visible; transition: transform .2s; box-shadow: 30px 0 60px rgba(23, 38, 58, .27); }
  .casca { margin-left: 0; }
  .topo .menu-lateral { display: inline-flex; }
  .topo, .barra-robo { padding-left: 18px; padding-right: 18px; }
  .conteudo, .rodape-pagina { padding-left: 18px; padding-right: 18px; }
  /* A faixa do robô em pé: o texto quebra ao lado do ícone e os botões dividem a linha de baixo
     entre si, todos alcançáveis sem rolar de lado. */
  .barra-linha .texto { min-width: 0; }
  .acoes-robo { width: 100%; }
  .acoes-robo > * { flex: 1 1 auto; }
  .quadro-captcha { gap: 12px; padding: 12px; }
  .captcha-imagem { height: 58px; }
  .quadro-captcha .campo { min-width: 100%; max-width: none; }
  .conteudo { padding-top: 25px; }
  .topo { justify-content: flex-start; gap: 10px; }
  .trilha { gap: 10px; flex: 1; }
  .trilha .icone, .trilha > .barra { display: none; }
  .topo .menu-lateral, .topo #modo-apresentacao { min-width: 44px; min-height: 44px; }
  /* O botão de apresentação fica só com o ícone; o rótulo continua lá para o leitor de tela
     (as mesmas declarações de .so-leitor — aqui elas dependem da largura da tela). */
  .rotulo-apresentacao { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cabecalho-pagina { gap: 13px; align-items: flex-start; margin-bottom: 22px; }
  h1 { font-size: 26px; }
  .subtitulo { font-size: 12px; }
  .sobretitulo { font-size: 10px; }
  .indicadores, .resumo { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 19px; }
  .indicador { padding: 15px; min-height: 110px; }
  .indicador-rodape { display: inline; margin-left: 7px; }
  .faixa-atencao { padding: 15px 13px; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; }
  .faixa-atencao strong { font-size: 13px; }
  .faixa-atencao .botao { margin-left: 47px; }
  .ferramentas { gap: 11px; }
  /* Quatro abas com contagem não cabem numa linha de 390 px: quebram em duas, cada uma preenchendo a sua. */
  .filtros { width: 100%; flex-wrap: wrap; }
  .filtro { flex: 1 1 40%; justify-content: center; padding: 8px; font-size: 12px; } /* 40%: duas por linha */
  .busca { flex-basis: 100%; max-width: none; }
  .item-processo { grid-template-columns: 36px 1fr 16px; gap: 12px; padding: 18px 15px; }
  .simbolo-processo { width: 35px; height: 41px; }
  /* Sem coluna para o progresso, a situação desce para a linha de baixo, ao lado do texto. */
  .etiquetas { grid-column: 2; justify-self: start; text-align: left; margin-top: -3px; display: flex; align-items: center; gap: 10px; }
  .chevron-cartao { grid-column: 3; grid-row: 1; }
  .proxima-acao { margin-top: 0; text-align: left; }
  .rodape-lista span:last-child { display: none; }
  .passos-guia { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
  .guia-cabecalho span { display: none; }
  .rodape-pagina { font-size: 10px; }
  .rodape-pagina span:last-child { display: none; }
  .titulo-processo { font-size: 22px; }
  .sub-processo { font-size: 11px; gap: 8px; }
  /* A régua não cabe em 390 px: rola de lado, com cada etapa inteira à vista. O desbotado nas pontas
     mostra que há mais etapa fora do quadro, e o encaixe faz a rolagem parar numa etapa inteira. */
  .etapas {
    overflow: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .etapas::-webkit-scrollbar { display: none; }
  .etapa { min-width: 101px; flex: 0 0 auto; flex-direction: column; padding: 12px 5px; scroll-snap-align: center; }
  .painel, .cartao { padding: 20px; }
  .cabecalho-painel { align-items: flex-start; }
  /* No celular o título do painel do formulário fica com uma coluna de 90 px se o botão dividir a linha. */
  .formulario-processo .cabecalho-painel { flex-direction: column; align-items: flex-start; }
  .grade-campos, .grade-configuracoes { grid-template-columns: 1fr; }
  .rodape-formulario { flex-wrap: wrap; }
  .nav-configuracoes { flex-direction: row; overflow: auto; }
  .nav-configuracoes a { white-space: nowrap; font-size: 13px; }
  .avisos { left: 50%; }
  .modal-cabecalho, .modal-corpo { padding: 22px; }
  .modal-rodape { padding: 18px 22px; }
  .linha-parte { grid-template-columns: minmax(0, 1fr) auto; }
  .linha-parte > select:first-child { grid-column: 1 / -1; }
  .previa-minuta { padding: 20px 16px; }
  .documento { grid-template-columns: minmax(0, 1fr) auto; }
  .documento-acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .chip-quebra { max-width: 100%; }
  .visualizador-topo { flex-wrap: wrap; }
  .zona-envio { padding: 20px 12px; }
  .sugestao-parte .botao { margin-left: 0; }
  .tabela-pessoas td:first-child, .tabela-pessoas td.cpf, .tabela-pessoas td.data { width: auto; }
}

/* ---------- Menu do usuário (lateral, modo web) ---------- */
.menu-usuario { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 10px; }
.sessao-expira { font-size: 11px; color: var(--nav-rotulo); font-variant-numeric: tabular-nums; }
.botao-sair {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 10px;
  background: none; border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px; color: var(--nav-link); font-size: 12.5px;
}
.botao-sair:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.botao-sair .icone { width: 16px; height: 16px; }