/* =============================================================================
   Protocolo Administrativo · Prefeitura Municipal de Itapejara D'Oeste
   Visual inspirado no Padrão Digital de Governo (gov.br Design System).

   Organização (do mais genérico ao mais específico):
     1. Fonte        Rawline (fonte do gov.br, licença SIL OFL), servida pelo próprio sistema
     2. Paleta       cores-base do gov.br (primitivas; não usar direto nos componentes)
     3. Tokens       significado das cores, com o valor claro e o escuro (light-dark)
     4. Base         elementos HTML
     5. Estrutura    cabeçalho, conteúdo, rodapé
     6. Componentes  painel, tabela, formulário, botão, mensagem, etiqueta, abas...
     7. Telas        processos, ETP, acesso
     8. Responsivo e acessibilidade

   Tema: segue o sistema operacional; <html data-tema="claro|escuro"> força um dos dois
   (static/js/tema.js). Componentes usam SÓ os tokens da seção 3.
   ========================================================================== */

/* 1. Fonte ------------------------------------------------------------------ */
@font-face { font-family: "Rawline"; src: url("../fonts/rawline-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rawline"; src: url("../fonts/rawline-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Rawline"; src: url("../fonts/rawline-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* 2. Paleta (gov.br) -------------------------------------------------------- */
:root {
  --azul-90: #071d41; --azul-80: #0c326f; --azul-70: #1351b4; --azul-40: #5992ed; --azul-30: #81a9f0;
  --azul-20: #c5d4eb; --azul-10: #dbe8fb;
  --cinza-90: #1b1b1b; --cinza-80: #333333; --cinza-60: #636363; --cinza-40: #888888; --cinza-20: #cccccc;
  --cinza-10: #e6e6e6; --cinza-5: #ededed; --cinza-2: #f8f8f8; --branco: #ffffff;
  --verde-50: #168821; --verde-10: #e3f5e1; --amarelo-20: #fff5c2; --amarelo-texto: #6e5300;
  --vermelho-60: #b21f00; --vermelho-10: #fde0db; --laranja-foco: #c2850c;
  --noite-0: #0b1220; --noite-1: #131d2e; --noite-2: #1a2638; --noite-3: #22314a; --noite-borda: #2c3c56;
}

/* 3. Tokens: um só lugar para claro e escuro --------------------------------- */
:root { color-scheme: light dark; }
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }
:root {
  --fundo: light-dark(var(--cinza-2), var(--noite-0));
  --superficie: light-dark(var(--branco), var(--noite-1));
  --superficie-alt: light-dark(var(--cinza-2), var(--noite-2));
  --superficie-hover: light-dark(#f0f4fb, var(--noite-3));
  --texto: light-dark(var(--cinza-80), #ececec);
  --texto-suave: light-dark(var(--cinza-60), #aeb8c6);
  --borda: light-dark(#e0e0e0, var(--noite-borda));
  --borda-forte: light-dark(var(--cinza-40), #6e7d94);
  --primaria: light-dark(var(--azul-70), var(--azul-30));
  --primaria-escura: light-dark(var(--azul-80), #a9c6f7);
  --primaria-clara: light-dark(var(--azul-10), #1c2f4f);
  --sobre-primaria: light-dark(var(--branco), var(--azul-90));
  --ok: light-dark(var(--verde-50), #6fd27b);
  --ok-fundo: light-dark(var(--verde-10), #143a20);
  --aviso: light-dark(var(--amarelo-texto), #f3d36a);
  --aviso-fundo: light-dark(var(--amarelo-20), #3a300f);
  --erro: light-dark(var(--vermelho-60), #ff8f7a);
  --erro-fundo: light-dark(var(--vermelho-10), #4a1b13);
  --foco: light-dark(var(--laranja-foco), #ffcd07);
  --sombra-1: 0 1px 6px light-dark(rgba(51,51,51,.16), rgba(0,0,0,.5));
  --sombra-2: 0 4px 16px light-dark(rgba(51,51,51,.18), rgba(0,0,0,.55));
  --raio: 6px;
  --raio-pilula: 100em;
  --fonte: "Rawline", "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
/* Navegador sem light-dark(): tema claro */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --fundo: var(--cinza-2); --superficie: var(--branco); --superficie-alt: var(--cinza-2); --superficie-hover: #f0f4fb;
    --texto: var(--cinza-80); --texto-suave: var(--cinza-60); --borda: #e0e0e0; --borda-forte: var(--cinza-40);
    --primaria: var(--azul-70); --primaria-escura: var(--azul-80); --primaria-clara: var(--azul-10); --sobre-primaria: var(--branco);
    --ok: var(--verde-50); --ok-fundo: var(--verde-10); --aviso: var(--amarelo-texto); --aviso-fundo: var(--amarelo-20);
    --erro: var(--vermelho-60); --erro-fundo: var(--vermelho-10); --foco: var(--laranja-foco);
    --sombra-1: 0 1px 6px rgba(51,51,51,.16); --sombra-2: 0 4px 16px rgba(51,51,51,.18);
  }
}

/* 4. Base --------------------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* elementos escondidos pelo script não reaparecem por causa de display: flex */
html, body { margin: 0; }
body { background: var(--fundo); color: var(--texto); font: 16px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; }
a { color: var(--primaria); text-underline-offset: 2px; }
a:hover { color: var(--primaria-escura); }
h1 { font-size: 1.85rem; font-weight: 600; margin: 0 0 .25rem; line-height: 1.25; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 .75rem; }
code, .mono { font-family: var(--fonte-mono); font-size: .9em; }
:focus-visible { outline: 3px dashed var(--foco); outline-offset: 3px; }
.pular-conteudo { position: absolute; left: -999px; top: .5rem; background: var(--primaria); color: var(--sobre-primaria); padding: .5rem 1rem; border-radius: var(--raio-pilula); z-index: 50; }
.pular-conteudo:focus { left: .75rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 5. Estrutura ------------------------------------------------------------------ */
.cabecalho { background: var(--superficie); box-shadow: var(--sombra-1); position: relative; z-index: 5; }
.cabecalho-faixa { display: flex; align-items: center; gap: 1rem; padding: .5rem 2rem; border-bottom: 1px solid var(--borda); font-size: .85rem; }
.cabecalho-faixa .orgao { display: flex; align-items: center; gap: .6rem; color: var(--texto); text-decoration: none; font-weight: 700; }
.cabecalho-faixa .orgao img { width: 28px; height: 25px; border-radius: 3px; background: var(--branco); padding: 1px; }
.cabecalho-faixa .orgao span { font-weight: 400; color: var(--texto-suave); }
.cabecalho-faixa .espaco { flex: 1; }
.cabecalho-faixa a, .cabecalho-faixa .link { color: var(--primaria); font-weight: 600; text-decoration: none; }
.cabecalho-faixa form { margin: 0; }
.cabecalho-principal { display: flex; align-items: center; gap: 1.5rem; padding: .9rem 2rem .6rem; flex-wrap: wrap; }
.sistema { display: flex; flex-direction: column; text-decoration: none; color: var(--texto); }
.sistema strong { font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.sistema span { font-size: .85rem; color: var(--texto-suave); }
.busca-topo { margin-left: auto; display: flex; align-items: center; background: var(--superficie-alt); border-radius: var(--raio-pilula); padding: 0 .35rem 0 1.1rem; min-width: min(360px, 100%); }
.busca-topo input[type=search] { border: 0; background: transparent; padding: .6rem 0; font-style: italic; }
.busca-topo input[type=search]:focus { outline: none; }
.busca-topo:focus-within { outline: 3px dashed var(--foco); outline-offset: 3px; }
.busca-topo button { border: 0; background: transparent; color: var(--primaria); width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.busca-topo button:hover { background: var(--primaria-clara); }
.menu-principal { display: flex; gap: .25rem; padding: 0 1.5rem; overflow-x: auto; }
.menu-principal a { white-space: nowrap; padding: .7rem .9rem; color: var(--texto); text-decoration: none; font-weight: 600; font-size: .95rem; border-bottom: 4px solid transparent; }
.menu-principal a:hover { color: var(--primaria); background: var(--superficie-hover); }
.menu-principal a.ativo { color: var(--primaria); border-bottom-color: var(--primaria); }
.usuario-topo { display: inline-flex; align-items: center; gap: .5rem; background: var(--primaria); color: var(--sobre-primaria) !important; border-radius: var(--raio-pilula); padding: .2rem .9rem .2rem .25rem; font-weight: 600; }
.usuario-topo .iniciais { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--sobre-primaria); color: var(--primaria); display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; }
.botao-tema { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; font: inherit; font-weight: 600; color: var(--primaria); cursor: pointer; padding: .25rem .5rem; border-radius: var(--raio-pilula); }
.botao-tema:hover { background: var(--primaria-clara); }
.botao-tema svg { width: 1.05rem; height: 1.05rem; }
.conteudo { max-width: 1200px; margin: 0 auto; padding: 1.75rem 2rem 3rem; }
.rodape { border-top: 1px solid var(--borda); background: var(--superficie); color: var(--texto-suave); font-size: .85rem; padding: 1rem 2rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }
.cabecalho-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.subtitulo { color: var(--texto-suave); margin: .25rem 0 0; }
.voltar { display: inline-block; font-size: .9rem; font-weight: 600; margin-bottom: .4rem; text-decoration: none; }

/* 6. Componentes ------------------------------------------------------------------ */
/* Painel (cartão) */
.painel { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra-1); padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; }
.painel-estreito { max-width: 560px; }
.painel-tabela { padding: 0; overflow-x: auto; }
.painel-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.painel-cabecalho h2 { margin: 0; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.grade-2 .painel { margin-bottom: 0; }
.grade-2 + .painel, .grade-2 + h2 { margin-top: 1.5rem; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 1.5rem; }

/* Tabela */
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th, .tabela td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { font-size: .85rem; font-weight: 700; color: var(--texto); background: var(--superficie-alt); border-bottom: 1px solid var(--borda-forte); }
.tabela tbody tr:nth-child(even) td { background: var(--superficie-alt); }
.tabela tbody tr:hover td { background: var(--superficie-hover); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela td a { text-decoration: none; font-weight: 600; }
.tabela small { color: var(--texto-suave); }
.tabela .num { text-align: right; }
.tabela .centro { text-align: center; }
.tabela-perfis { margin-top: .5rem; }
.tabela-perfis th, .tabela-perfis td { padding: .5rem .5rem .5rem 0; background: none !important; }
.tabela-perfis select { width: 100%; }

/* Formulário */
.campo { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.campo label { font-weight: 600; font-size: .92rem; }
.campo-check label { font-weight: 400; display: flex; align-items: center; gap: .5rem; }
.obrig { color: var(--erro); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=date],
input[type=datetime-local], input[type=file], select, textarea {
  font: inherit; color: var(--texto); padding: .55rem .85rem; min-height: 2.5rem; border: 1px solid var(--borda-forte);
  border-radius: var(--raio); background: var(--superficie); width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--texto-suave); font-style: italic; }
input:hover, select:hover, textarea:hover { background: var(--superficie-hover); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--primaria); }
input[type=checkbox], input[type=radio] { width: 1.1rem; height: 1.1rem; min-height: 0; accent-color: var(--primaria); }
select[multiple] { min-height: 8rem; }
.ajuda { color: var(--texto-suave); font-size: .85rem; }
.erro { color: var(--erro); font-size: .88rem; display: block; }
.com-erro input, .com-erro select, .com-erro textarea { border-color: var(--erro); border-width: 2px; }
.acoes { display: flex; gap: .75rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
.filtros { display: flex; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filtros input[type=search] { flex: 1 1 260px; width: auto; }
.filtros select { width: auto; }
.campo > div > div > label { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; padding: .25rem 0; font-size: .95rem; }
.campo > div > div > label input { margin-top: .2rem; }

/* Botão: pílula; primário preenchido, padrão contornado, link sem borda */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.5rem;
  font: inherit; font-weight: 600; font-size: .95rem; padding: 0 1.4rem; border-radius: var(--raio-pilula);
  border: 1px solid var(--primaria); background: var(--superficie); color: var(--primaria); text-decoration: none; cursor: pointer;
}
.botao:hover { background: var(--primaria-clara); color: var(--primaria); }
.botao:active { transform: translateY(1px); }
.botao-primario { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
.botao-primario:hover { background: var(--primaria-escura); border-color: var(--primaria-escura); color: var(--sobre-primaria); }
.botao-largo { width: 100%; min-height: 2.75rem; margin-top: .25rem; }
.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--primaria); text-decoration: underline; }

/* Mensagem e etiqueta */
.mensagens { margin-bottom: 1.25rem; }
.msg { padding: .85rem 1.1rem; border-radius: var(--raio); margin-bottom: .6rem; background: var(--primaria-clara); color: var(--texto); border-left: 6px solid var(--primaria); }
.msg-success { background: var(--ok-fundo); color: var(--ok); border-left-color: var(--ok); }
.msg-error { background: var(--erro-fundo); color: var(--erro); border-left-color: var(--erro); }
.msg-warning { background: var(--aviso-fundo); color: var(--aviso); border-left-color: var(--aviso); }
.msg-info { background: var(--primaria-clara); color: var(--primaria-escura); }
.etiqueta { display: inline-block; font-size: .8rem; font-weight: 600; padding: .15rem .7rem; border-radius: var(--raio-pilula); background: var(--superficie-alt); color: var(--texto-suave); white-space: nowrap; margin: 0 .15rem .15rem 0; border: 1px solid var(--borda); }
.etiqueta-ok { background: var(--ok-fundo); color: var(--ok); border-color: transparent; }
.etiqueta-aviso { background: var(--aviso-fundo); color: var(--aviso); border-color: transparent; }
.etiqueta-erro { background: var(--erro-fundo); color: var(--erro); border-color: transparent; }
.etiqueta-info { background: var(--primaria-clara); color: var(--primaria); border-color: transparent; }
.vazio { color: var(--texto-suave); }
.lista-simples { list-style: none; padding: 0; margin: 0; }
.lista-simples li { padding: .5rem 0; border-bottom: 1px solid var(--borda); display: flex; justify-content: space-between; }
.lista-simples li:last-child { border-bottom: 0; }
.dados { display: grid; grid-template-columns: 7.5rem 1fr; gap: .45rem 1rem; margin: 0; }
.dados dt { color: var(--texto-suave); font-weight: 600; font-size: .9rem; }
.dados dd { margin: 0; }
.paginacao { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; }
.contador { display: inline-block; min-width: 1.6rem; text-align: center; font-size: .8rem; font-weight: 700; padding: .05rem .45rem; border-radius: var(--raio-pilula); background: var(--primaria); color: var(--sobre-primaria); margin-left: .4rem; }
.contador-zero { background: var(--superficie-alt); color: var(--texto-suave); }
.aviso-caixa { background: var(--aviso-fundo); color: var(--aviso); border-radius: var(--raio); border-left: 6px solid var(--aviso); padding: .85rem 1.1rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.opcao { display: flex !important; align-items: center; gap: .5rem; font-weight: 400 !important; cursor: pointer; }
details.acao { border-top: 1px solid var(--borda); padding: .85rem 0 .25rem; }
details.acao summary { cursor: pointer; font-weight: 600; color: var(--primaria); }
details.acao form { margin-top: .75rem; }

/* Abas */
.abas { display: flex; gap: .25rem; border-bottom: 1px solid var(--borda-forte); margin-bottom: 1.5rem; flex-wrap: wrap; }
.abas a { padding: .65rem 1.1rem; text-decoration: none; color: var(--texto); font-weight: 600; border-bottom: 4px solid transparent; margin-bottom: -1px; }
.abas a:hover { color: var(--primaria); background: var(--superficie-hover); }
.abas a.ativa { color: var(--primaria); border-bottom-color: var(--primaria); }

/* 7. Telas ---------------------------------------------------------------------- */
/* Processos */
.numero-processo { font-family: var(--fonte-mono); font-weight: 700; white-space: nowrap; }
.vencido { color: var(--erro); font-weight: 700; }
.grade-processo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(290px, 1fr); gap: 1.5rem; align-items: start; }
.grade-processo .painel { margin-bottom: 1.5rem; }
.texto-livre { white-space: pre-wrap; margin: 0; }
.historico { list-style: none; margin: 0; padding: 0; }
.historico li { position: relative; padding: 0 0 1.1rem 1.4rem; border-left: 2px solid var(--borda); margin-left: .4rem; }
.historico li:last-child { border-left-color: transparent; padding-bottom: 0; }
.historico li::before { content: ""; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--primaria); }
.historico .quando { color: var(--texto-suave); font-size: .85rem; }
.historico .despacho { background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: var(--raio); padding: .5rem .75rem; margin-top: .35rem; white-space: pre-wrap; }
.andamento { list-style: none; margin: 0 0 .75rem; padding: 0; counter-reset: etapa; }
.andamento li { position: relative; padding: .45rem 0 .45rem 2.3rem; counter-increment: etapa; line-height: 1.3; }
.andamento li::before { content: counter(etapa); position: absolute; left: 0; top: .35rem; width: 1.65rem; height: 1.65rem; border-radius: 50%; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; background: var(--superficie); color: var(--texto-suave); border: 2px solid var(--borda-forte); box-sizing: border-box; }
.andamento small { color: var(--texto-suave); }
.andamento-feita { color: var(--texto-suave); }
.andamento-feita::before { content: "✓" !important; background: var(--ok) !important; color: var(--superficie) !important; border-color: var(--ok) !important; }
.andamento-pulada { color: var(--texto-suave); opacity: .65; }
.andamento-pulada strong { text-decoration: line-through; font-weight: 400; }
.andamento-pulada::before { content: "–" !important; }
.andamento-atual::before { background: var(--primaria) !important; color: var(--sobre-primaria) !important; border-color: var(--primaria) !important; }
.andamento-atual strong { color: var(--primaria); }
.checklist { background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: var(--raio); padding: .7rem .9rem; margin-bottom: 1rem; font-size: .92rem; }
.checklist ul { list-style: none; margin: .4rem 0 0; padding: 0; }
.checklist li { padding: .15rem 0; }
.checklist .feito { color: var(--ok); }
.checklist .falta { color: var(--erro); }
.checklist small { color: var(--texto-suave); }
.hash { font-family: var(--fonte-mono); font-size: .75rem; color: var(--texto-suave); word-break: break-all; }

/* ETP */
.etapas-etp { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.etapas-etp a { padding: .35rem .9rem; border: 1px solid var(--primaria); border-radius: var(--raio-pilula); text-decoration: none; font-size: .88rem; font-weight: 600; background: var(--superficie); color: var(--primaria); }
.etapas-etp a.ativa { background: var(--primaria); color: var(--sobre-primaria); }
.campo-etp { border-bottom: 1px dashed var(--borda); padding-bottom: 1rem; }
.situacao-campo { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .88rem; color: var(--texto-suave); }
.opcao-inline { display: inline-flex; gap: .3rem; align-items: center; font-weight: 400 !important; }
.grade-prazo { display: grid; grid-template-columns: 8rem 8rem; gap: .5rem; }
.linha-etp { border: 1px solid var(--borda); border-radius: var(--raio); padding: .7rem .9rem; margin-bottom: .7rem; background: var(--superficie-alt); }
.cabeca-linha { display: flex; justify-content: space-between; margin-bottom: .3rem; }
.form-decisao { display: flex; gap: .4rem; flex-wrap: wrap; }
.form-decisao input { min-width: 10rem; }
.alerta-etp { border-left: 4px solid var(--borda-forte); padding: .55rem .8rem; margin-bottom: .7rem; font-size: .92rem; background: var(--superficie-alt); }
.alerta-etp.nivel-critico { border-left-color: var(--erro); }
.alerta-etp.nivel-atencao { border-left-color: var(--aviso); }
.alerta-etp form { display: flex; gap: .4rem; margin-top: .45rem; flex-wrap: wrap; }
.item-checklist { margin: .3rem 0; font-size: .92rem; }
.item-checklist .link { font-size: 1.15rem; text-decoration: none; }
.negrito { font-weight: 700; }
.diferencas { white-space: pre-wrap; font-size: .85rem; margin: 0; }
.diferencas .mais { background: var(--ok-fundo); display: block; }
.diferencas .menos { background: var(--erro-fundo); display: block; text-decoration: line-through; }
.dotacao-resultados li { font-size: .85rem; gap: .5rem; align-items: flex-start; }

/* Busca de pessoa (Interessado, diária) */
.busca-pessoa { position: relative; }
.busca-pessoa .sugestoes { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: .25rem 0 0; padding: .25rem 0; list-style: none; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-2); max-height: 18rem; overflow-y: auto; }
.busca-pessoa .sugestoes li { padding: .5rem .85rem; cursor: pointer; }
.busca-pessoa .sugestoes li:hover, .busca-pessoa .sugestoes li:focus { background: var(--superficie-hover); outline: none; }
.busca-pessoa .sugestoes li small { color: var(--texto-suave); }
.busca-pessoa .escolhidos { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.busca-pessoa .escolhidos li { background: var(--primaria-clara); color: var(--primaria); border-radius: var(--raio-pilula); padding: .15rem .35rem .15rem .75rem; font-size: .9rem; font-weight: 600; }
.busca-pessoa .escolhidos button { font-size: 1rem; line-height: 1; padding: 0 .3rem; color: inherit; }
.busca-pessoa .escolhidos:empty { display: none; }

/* Telas de acesso (entrar, trocar senha) */
.pagina-acesso { background: var(--fundo); min-height: 100vh; }
.acesso { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; }
.cartao-acesso { background: var(--superficie); width: 100%; max-width: 420px; padding: 2rem 2.25rem; border-radius: var(--raio); box-shadow: var(--sombra-2); border-top: 6px solid var(--primaria); }
.brasao-acesso { display: block; width: 88px; margin: 0 auto 1rem; border-radius: 6px; background: var(--branco); padding: 4px; }
.cartao-acesso h1 { font-size: 1.5rem; margin-bottom: 1.25rem; text-align: center; }
.sobretitulo { text-align: center; font-size: .85rem; font-weight: 600; color: var(--texto-suave); margin: 0 0 .3rem; }
.nota { font-size: .88rem; color: var(--texto-suave); margin: 1.25rem 0 0; text-align: center; }
.sair-discreto { text-align: center; margin-top: 1rem; }
.acesso .mensagens { width: 100%; max-width: 420px; }
.acesso .botao-tema { margin-top: 1rem; }

/* 8. Responsivo e acessibilidade --------------------------------------------------- */
@media (max-width: 900px) {
  .grade-processo { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cabecalho-faixa { padding: .5rem 1rem; flex-wrap: wrap; }
  .cabecalho-faixa .orgao span { display: none; }
  .cabecalho-principal { padding: .75rem 1rem .5rem; }
  .busca-topo { margin-left: 0; flex: 1 1 100%; }
  .menu-principal { padding: 0 .5rem; }
  .conteudo { padding: 1.25rem 1rem 2rem; }
  .painel { padding: 1.1rem; }
  h1 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Quadro "Para gerar o ETP em Word, faltam…" */
.pendencias { border-top: 6px solid var(--aviso); }
.pendencias-ok { border-top-color: var(--ok); }
.pendencias-acoes { margin: .5rem 0 1rem; padding-left: 1.25rem; }
.pendencias-acoes li { padding: .35rem 0; }
.pendencias-acoes li span { margin-right: .5rem; }
.pendencias-acoes .botao { min-height: 2rem; padding: 0 .9rem; font-size: .85rem; }
.pendencia-campo { border-left: 4px solid var(--aviso); padding-left: 1rem; margin-bottom: 1rem; }
.pendencias-subtitulo { font-size: 1rem; font-weight: 600; margin: .75rem 0; }
.pendencia-sugerida { border-left-color: var(--primaria); }
.sugestao-ia { font-size: .88rem; color: var(--texto-suave); margin: 0 0 .35rem; }

/* Campo de seleção com pesquisa (static/js/app.js, selectBusca) */
.select-busca { position: relative; }
.select-busca-nativo { position: absolute !important; inset: 0; opacity: 0; pointer-events: none; }
.select-busca-campo { padding-right: 2.4rem !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; }
.select-busca-lista { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: .25rem 0 0; padding: .25rem 0; list-style: none; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-2); max-height: 18rem; overflow-y: auto; }
.select-busca-lista li { padding: .5rem .85rem; cursor: pointer; }
.select-busca-lista li:hover, .select-busca-lista li.ativo { background: var(--superficie-hover); }
.select-busca-lista li[aria-selected="true"] { font-weight: 700; color: var(--primaria); }
.select-busca-lista li.vazio { cursor: default; }
.importar-itens { display: inline-flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-left: .5rem; }
.importar-itens select { width: auto; }

/* Busca de preços no PNCP: barra de progresso */
.barra { height: .75rem; background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: var(--raio-pilula); overflow: hidden; margin: .75rem 0 .5rem; }
.barra span { display: block; height: 100%; background: var(--primaria); border-radius: var(--raio-pilula); transition: width .4s ease; }
.busca-percentual { font-weight: 700; color: var(--primaria); font-size: 1.1rem; }
.busca-texto { font-weight: 600; margin: 0 0 .25rem; }
.busca-encontrados tr.novo td { animation: aparecer .6s ease; }
@keyframes aparecer { from { background: var(--primaria-clara); } to { background: transparent; } }

/* Pesquisa de preços: link do PNCP como entrada principal */
.painel-link-pncp { border-left: 4px solid var(--primaria); }
.form-link-pncp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) auto; gap: .75rem; align-items: start; }
.form-link-pncp .botao { margin-top: 1.6rem; }
.form-link-pncp .campo { margin: 0; }
@media (max-width: 720px) { .form-link-pncp { grid-template-columns: 1fr; } .form-link-pncp .botao { margin-top: 0; } }
.form-conversao { display: grid; gap: .4rem; margin-bottom: .75rem; padding: .6rem; border: 1px dashed var(--borda); border-radius: var(--raio, .5rem); }
.form-conversao p { margin: 0; }

/* Tela de preços do item: tudo na largura da tela, sem rolagem lateral */
.descricao-item summary { cursor: pointer; color: var(--primaria); font-weight: 600; font-size: .9rem; }
.descricao-item p { max-width: 75ch; color: var(--texto-suave); }
.precos-item { display: grid; gap: 0; min-width: 0; }
.precos-principal { min-width: 0; }
.precos-resumo .painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .5rem 1.5rem; align-items: start; }
.precos-resumo .painel > h2 { grid-column: 1 / -1; margin: 0; }
.precos-resumo .painel > .msg, .precos-resumo .painel > details { grid-column: 1 / -1; }
.lista-precos { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.preco-cartao { border: 1px solid var(--borda); border-radius: var(--raio); padding: .9rem 1rem; min-width: 0; overflow-wrap: anywhere; }
.preco-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; }
.preco-origem { min-width: 0; flex: 1 1 260px; }
.preco-origem small, .preco-descricao { color: var(--texto-suave); }
.preco-valor { font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.preco-valor small { font-size: .8rem; font-weight: 400; color: var(--texto-suave); }
.preco-descricao { margin: .4rem 0; font-size: .9rem; }
.preco-etiquetas { margin: 0 0 .5rem; }
.preco-acoes { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; border-top: 1px solid var(--borda); padding-top: .6rem; }
.preco-acoes .form-conversao { flex: 1 1 100%; margin: 0; }
.preco-acoes .form-decisao { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 100%; }
.preco-acoes .form-decisao input[type=text] { flex: 1 1 260px; width: auto; }
.form-conversao label { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.form-conversao label input { width: 7rem; }
.painel-orcamentos-item { border-left: 4px solid var(--ok); }
.orcamento-item { border: 1px solid var(--borda); border-radius: var(--raio); padding: .6rem .9rem; margin: 0 0 .75rem; min-width: 0; }
.orcamento-item legend { padding: 0 .35rem; overflow-wrap: anywhere; }
.orcamento-item .opcao { display: flex; gap: .5rem; align-items: flex-start; margin: .35rem 0; overflow-wrap: anywhere; }
.opcao-incluida { opacity: .8; }

/* Módulo de ETP: lista e página inicial */
.lista-etps { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.etp-cartao { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra-1); padding: 1rem 1.25rem; overflow-wrap: anywhere; }
.etp-cartao-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: flex-start; }
.etp-titulo { font-weight: 700; font-size: 1.05rem; }
.etp-cartao-dados { margin: .35rem 0 0; color: var(--texto-suave); font-size: .9rem; }
.dados-etp { margin-top: .5rem; grid-template-columns: minmax(8rem, 12rem) 1fr; }
@media (max-width: 560px) { .dados-etp { grid-template-columns: 1fr; } }
.form-novo-etp fieldset { border: 0; padding: 0; }
.form-novo-etp legend { font-weight: 600; margin-bottom: .35rem; }
.metodo-estimativa textarea { min-height: 16rem; line-height: 1.5; }
.pendencia-sugerida:not(.pendencia-campo) { border-left: 4px solid var(--primaria); padding-left: .85rem; margin-bottom: 1rem; }
.preco-print { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .25rem 0 .6rem; }
.print-miniatura { max-width: 220px; max-height: 140px; border: 1px solid var(--borda); border-radius: var(--raio); display: block; }
.form-print { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.form-print label { font-size: .88rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.botao-link { background: none; border: 0; color: var(--primaria); text-decoration: underline; cursor: pointer; font: inherit; font-size: .88rem; padding: 0; }

/* Fichas por tipo de objeto */
.painel-ficha { border-left: 4px solid var(--primaria); }
.perguntas-ficha textarea { min-height: 3rem; }
.base-legal { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .1rem 1rem; max-height: 18rem; overflow: auto; border: 1px solid var(--borda); border-radius: var(--raio); padding: .5rem; }
.texto-ficha { align-items: flex-start; overflow-wrap: anywhere; }
.texto-aprovado-corpo { max-height: 22rem; overflow: auto; padding: .5rem .75rem; background: var(--superficie-alt); border-radius: var(--raio); }
.tipo-info { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .5rem; border-radius: var(--raio-pilula); margin-left: .35rem; vertical-align: middle; border: 1px solid var(--borda); color: var(--texto-suave); }
.tipo-municipio { border-color: var(--aviso); color: var(--aviso); }
.tipo-calculo { border-color: var(--primaria); color: var(--primaria); }
.painel-perguntas { border-left: 4px solid var(--aviso); }
.pergunta-setor { margin-bottom: .75rem; }
.pergunta-aberta label { font-weight: 700; }

/* Auditoria do ETP */
.lista-apontamentos { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.apontamento { background: var(--superficie); border: 1px solid var(--borda); border-left-width: 5px; border-radius: var(--raio); padding: .8rem 1rem; overflow-wrap: anywhere; }
.ap-critico { border-left-color: var(--erro); } .ap-alto { border-left-color: #d9822b; } .ap-medio { border-left-color: var(--aviso); }
.ap-baixo { border-left-color: var(--primaria); } .ap-conforme { border-left-color: var(--ok); }
.ap-topo { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; }
.ap-classe-critico { background: var(--erro-fundo); color: var(--erro); border-color: transparent; }
.ap-classe-alto { background: #fdebd8; color: #9a4f0c; border-color: transparent; }
.ap-classe-medio { background: var(--aviso-fundo); color: var(--aviso); border-color: transparent; }
.ap-classe-baixo { background: var(--primaria-clara); color: var(--primaria); border-color: transparent; }
.ap-classe-conforme { background: var(--ok-fundo); color: var(--ok); border-color: transparent; }
.ap-dados { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: .3rem 1rem; margin: .6rem 0 0; }
.ap-dados dt { font-weight: 600; color: var(--texto-suave); font-size: .88rem; }
.ap-dados dd { margin: 0; }
.ap-trecho { font-style: italic; }
.ap-texto { background: var(--superficie-alt); border-radius: var(--raio); padding: .5rem .75rem; max-height: 16rem; overflow: auto; }
.ap-acoes { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .6rem; border-top: 1px solid var(--borda); padding-top: .6rem; }
.form-rejeitar { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 320px; }
.form-rejeitar input { flex: 1 1 220px; width: auto; }
.relatorio-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.resumo-cartao { display: flex; flex-direction: column; align-items: flex-start; }
.resumo-cartao strong { font-size: 2rem; line-height: 1.1; }
@media (max-width: 560px) { .ap-dados { grid-template-columns: 1fr; } }
@media print { .cabecalho, .rodape, .abas, .botao, .voltar { display: none !important; } .painel { box-shadow: none; border: 1px solid #ccc; } }

/* Novo ETP: modos de elaboração */
.modos-etp { border: 0; padding: 0; }
.cartoes-modo { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; margin: .5rem 0 .75rem; }
.cartao-modo { display: flex; gap: .6rem; align-items: flex-start; border: 2px solid var(--borda); border-radius: var(--raio); padding: .9rem; cursor: pointer; background: var(--superficie); }
.cartao-modo:has(input:checked) { border-color: var(--primaria); background: var(--primaria-clara); }
.cartao-modo input { margin-top: .25rem; }
.cartao-modo-corpo { display: flex; flex-direction: column; gap: .35rem; }
.cartao-modo-corpo span { font-size: .92rem; }
.cartao-modo-corpo small { color: var(--texto-suave); }

/* Elaboração automática: andamento */
.painel-automatico { border-left: 4px solid var(--primaria); }
.etapas-auto { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .45rem; }
.etapas-auto li { display: flex; gap: .6rem; align-items: flex-start; }
.etapa-marca { flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; border: 2px solid var(--borda); color: var(--texto-suave); }
.etapa-feito .etapa-marca { background: var(--ok); border-color: var(--ok); color: #fff; }
.etapa-andamento .etapa-marca { border-color: var(--primaria); color: var(--primaria); animation: girar 1.2s linear infinite; border-top-color: transparent; }
.etapa-erro .etapa-marca { background: var(--erro); border-color: var(--erro); color: #fff; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .etapa-andamento .etapa-marca { animation: none; } }

/* Requerentes e abertura do processo (Fase 1) ------------------------------- */
.orientacao-tipo { border-left: 4px solid var(--primaria); background: var(--primaria-clara); padding: .75rem 1rem; border-radius: 4px; margin: 0 0 1rem; }
.orientacao-tipo ul { margin: .35rem 0 0; padding-left: 1.25rem; }
.resumo-requerente { background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: 4px; padding: .75rem 1rem; margin: 0 0 1rem; }
.resumo-requerente p { margin: 0 0 .4rem; }
.resumo-requerente ul { margin: .35rem 0 0; padding-left: 1.25rem; }
.cep-escolhido { margin: -.25rem 0 1rem; font-size: 1.05rem; }
.painel h2 + .grade-campos, form h2 { margin-top: 1.25rem; }
.barra-lote { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: 4px; padding: .5rem .75rem; margin-bottom: .5rem; }
.barra-lote select, .barra-lote input[type=text] { width: auto; min-width: 12rem; }
.barra-lote [data-campos-texto] { display: contents; }
.barra-lote [data-campos-texto][hidden], .barra-lote [hidden] { display: none; }
.barra-lote-contagem { color: var(--texto-suave); font-size: .9rem; margin-right: auto; }
.col-marcar { width: 2.5rem; text-align: center; }
.resposta-parecer { border-left: 3px solid var(--ok); }
.sino { position: relative; display: inline-flex; align-items: center; gap: .25rem; }
.sino .contador { position: static; }
/* Prazos: cores e ícones (item 16) */
.prazo { display: inline-flex; gap: .25rem; align-items: center; padding: .1rem .45rem; border-radius: 999px; font-size: .9rem; white-space: nowrap; }
.prazo-em-dia { background: var(--ok-fundo); color: var(--ok); }
.prazo-alerta { background: var(--aviso-fundo); color: var(--aviso); }
.prazo-vencido { background: var(--erro-fundo); color: var(--erro); font-weight: 600; }
.legenda-prazos { display: flex; gap: .75rem; flex-wrap: wrap; font-size: .85rem; color: var(--texto-suave); margin: -.5rem 0 1rem; }
/* Linha do tempo (itens 26 e 27) */
.linha-tempo { list-style: none; margin: .75rem 0 0; padding: 0; }
.linha-tempo li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem; position: relative; padding-bottom: 1rem; }
.linha-tempo li::before { content: ""; position: absolute; left: 1.05rem; top: 2.2rem; bottom: 0; width: 2px; background: var(--borda); }
.linha-tempo li:last-child::before { display: none; }
.lt-icone { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primaria-clara); font-size: 1rem; }
.lt-ok .lt-icone { background: var(--ok-fundo); }
.lt-alerta .lt-icone { background: var(--aviso-fundo); }
.lt-erro .lt-icone { background: var(--erro-fundo); }
.lt-fim .lt-icone { background: var(--superficie-alt); border: 1px solid var(--borda-forte); }
.lt-corpo .quando { color: var(--texto-suave); font-size: .85rem; }
.lt-corpo .despacho { background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: var(--raio); padding: .5rem .75rem; margin-top: .35rem; white-space: pre-wrap; }
.lt-para { color: var(--texto-suave); }
.lt-imprimir { font-size: .8rem; }
.icones-processo { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.icones-processo span { display: inline-flex; gap: .3rem; align-items: center; font-size: .85rem; background: var(--superficie-alt); border: 1px solid var(--borda); border-radius: 999px; padding: .15rem .6rem; }
.gadget .painel-cabecalho { flex-wrap: wrap; gap: .5rem; }
.tabela-compacta td, .tabela-compacta th { padding: .45rem .6rem; font-size: .92rem; vertical-align: top; }
.gadget-acao details summary { list-style: none; cursor: pointer; display: inline-block; }
.gadget-acao details summary::-webkit-details-marker { display: none; }
.form-despacho { display: grid; gap: .35rem; margin-top: .4rem; min-width: 14rem; }
.opcao-grande { font-size: 1.05rem; padding: .75rem; border: 1px solid var(--borda); border-radius: 4px; margin: .5rem 0 1rem; }
.opcao-grande input { width: 1.4rem; height: 1.4rem; }
.acoes-anexos { display: flex; flex-wrap: wrap; gap: 1rem; margin: .25rem 0 .75rem; font-size: .92rem; }
.botao-whatsapp { margin-top: .4rem; border-color: #128c4a; color: #128c4a; }

/* Gráficos e painéis (itens 66 a 84). Cores por papel, validadas para daltonismo (claro e escuro). */
:root {
  --serie-1: light-dark(#2a78d6, #3987e5);
  --serie-2: light-dark(#eb6834, #d95926);
  --grade: light-dark(#e6e6e6, #2c3c56);
}
.grafico { width: 100%; height: auto; display: block; font-family: inherit; overflow: visible; }
.grafico text { font-size: 13px; fill: var(--texto); }
.grafico .g-tick, .grafico .g-cat { fill: var(--texto-suave); }
.grafico .g-valor { fill: var(--texto); font-weight: 600; }
.grafico .g-eixo, .grafico .g-grade { stroke: var(--grade); stroke-width: 1; }
.grafico .g-barra { fill: var(--serie-1); }
.grafico .g-alvo { fill: transparent; }
.grafico .g-item:hover .g-alvo { fill: var(--superficie-hover); }
.grafico .g-linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .g-linha.g-serie-1 { stroke: var(--serie-1); }
.grafico .g-linha.g-serie-2 { stroke: var(--serie-2); }
.grafico .g-ponto { stroke: var(--superficie); stroke-width: 2; }
.grafico .g-ponto.g-serie-1 { fill: var(--serie-1); }
.grafico .g-ponto.g-serie-2 { fill: var(--serie-2); }
.grafico .g-item:hover .g-ponto { r: 6; }
.g-legenda { display: flex; gap: 1rem; font-size: .85rem; color: var(--texto-suave); margin-bottom: .25rem; }
.g-legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.g-chave { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.g-chave.g-serie-1 { background: var(--serie-1); }
.g-chave.g-serie-2 { background: var(--serie-2); }
.grade-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.grade-graficos .painel { margin: 0; }
.grade-graficos details { margin-top: .5rem; font-size: .9rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.kpi strong { font-size: 1.9rem; line-height: 1.1; color: var(--texto); }
.kpi-rotulo { font-size: .85rem; color: var(--texto-suave); }
.kpi-sub { font-size: .8rem; color: var(--texto-suave); }
.kpi-alerta { border-color: var(--erro); }
.ranking { margin: 0; padding-left: 1.4rem; }
.ranking li { padding: .2rem 0; }
.ranking li span { display: inline-block; min-width: 60%; }
.tabela .num, .tabela-compacta .num { text-align: right; font-variant-numeric: tabular-nums; }
@media print { .nao-imprimir, .cabecalho, .menu-principal, .rodape { display: none !important; } }
@media (min-width: 900px) { .menu-principal { flex-wrap: wrap; overflow-x: visible; } }
/* Fluxograma do tipo de processo (visualização) */
.fluxograma { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.fluxo-ramo { flex: 1 1 260px; }
.fluxo-ramo h3 { font-size: 1rem; margin: 0 0 .5rem; }
.fluxo-ramo ol { list-style: none; margin: 0; padding: 0; }
.fluxo-etapa { position: relative; background: var(--superficie); border: 1.5px solid var(--primaria); border-radius: 6px; padding: .5rem .75rem; margin-bottom: 1.4rem; display: flex; flex-direction: column; gap: .15rem; }
.fluxo-etapa:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -1.35rem; transform: translateX(-50%); color: var(--texto-suave); }
.fluxo-etapa small { color: var(--texto-suave); }
.fluxo-decisao { border-color: var(--aviso); background: var(--aviso-fundo); }
.fluxo-opcional { border-style: dashed; }
.fluxo-tag { font-size: .78rem; color: var(--texto-suave); }

/* Portal do cidadão (Fase 2) */
.conteudo-portal { max-width: 1100px; }
.portal-destaque { background: var(--primaria-clara); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.25rem; }
.portal-destaque h1 { margin-top: 0; }
.grade-portal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.grade-portal .painel { margin: 0; }
.lista-assuntos { margin: 0; padding-left: 1.2rem; line-height: 1.9; }
.lista-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .75rem; }
.cartao-processo { display: flex; flex-direction: column; gap: .3rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 1rem; text-decoration: none; color: var(--texto); }
.cartao-processo:hover { border-color: var(--primaria); background: var(--superficie-hover); }
.cartao-processo small { color: var(--texto-suave); }
.cartao-processo .etiqueta { align-self: flex-start; }
.etiqueta-grande { font-size: 1rem; padding: .35rem .8rem; }
.painel-alerta { border: 2px solid var(--aviso); background: var(--aviso-fundo); }
.termo-aceite { border: 1px solid var(--borda); border-radius: 4px; padding: .75rem 1rem; margin: 1rem 0; }
.termo-texto { max-height: 14rem; overflow: auto; font-size: .92rem; margin: .5rem 0; }
.texto-legal h2 { font-size: 1.1rem; margin-top: 1.25rem; }
.painel-estreito { max-width: 460px; margin-left: auto; margin-right: auto; }
.aviso-caixa.aviso-info { background: var(--primaria-clara); color: var(--texto); border-left-color: var(--primaria); }
/* Editor do fluxograma */
.fluxo-lista-edicao { list-style: none; margin: 0 0 1rem; padding: 0; }
.fluxo-lista-edicao .fluxo-etapa { flex-direction: row; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.fluxo-lista-edicao .fluxo-etapa > div { display: flex; flex-direction: column; gap: .15rem; min-width: 14rem; flex: 1; }
.fluxo-botoes { display: flex; gap: .35rem; flex-wrap: wrap; }
.fluxo-botoes .botao { padding: .3rem .7rem; }
.acao-inline summary { list-style: none; cursor: pointer; }
.acao-inline summary::-webkit-details-marker { display: none; }
.acao-inline form { margin-top: .5rem; }
.passos { padding-left: 1.3rem; line-height: 1.7; }
.ok-texto { color: var(--ok); font-weight: 600; }
.campo-escondido { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }