/* =====================================================================
   DOCTUS GOV — "Papel timbrado"
   Design system: docs/design-system.md (leia antes de mexer aqui).
   Ordem deste arquivo: 1 tokens · 2 base · 2b desenho herdado · 3 estrutura (menu lateral,
   barra, rodapé) · 4 componentes · 5 telas · 6 site público (site.css) · 7 ajustes sobre o herdado.
   Arquivo único: não existe mais legado.css.
   ===================================================================== */

@font-face { font-family: "Public Sans"; font-weight: 400; font-display: swap; src: url("../fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 600; font-display: swap; src: url("../fonts/public-sans-latin-600-normal.woff2") format("woff2"); }

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root, .doc-folha, .qr-caixa, .papel {
  /* Cor: papel, tinta, linha e UMA cor de destaque */
  --branco:        #FFFFFF;  /* fundo de tudo */
  --tinta:         #171A1F;  /* texto (17,4:1 no branco) */
  --tinta-suave:   #565D69;  /* texto de apoio (6,6:1) */
  --linha:         #DADDE2;  /* fios divisórios (decorativos) */
  --linha-forte:   #7D8490;  /* contorno de campo e botão secundário (3,8:1) */
  --borda-bloco:   #C3C8CF;  /* borda do bloco de seção e das etapas (decorativa) */
  --borda-campo:   #5F6672;  /* contorno de campo e de opção de rádio (6,1:1) */
  --fundo-suave:   #F4F5F7;  /* realce de linha sob o mouse, item escolhido */
  --marinho:       #1D5FD6;  /* AÇÃO (azul vivo, opção a): botão principal, link, item ativo (5,7:1 no branco e com texto branco) */
  --marinho-escuro:#174DB0;  /* ação sob o mouse (7,7:1 com texto branco) */
  --marinho-degrau:#123E8F;  /* degrau do botão (borda de baixo) e pressionado */
  --marinho-claro: #E8F0FC;  /* fundo do item ativo (texto azul sobre ele: 5,0:1) */
  --papel:         #FFFFFF;  /* papel de verdade: fundo do PDF e das imagens, igual nos dois temas */
  --tinta-papel:   #171A1F;  /* texto impresso no papel (folha de rosto): igual nos dois temas */
  --superficie:    #FFFFFF;  /* fundo dos blocos de seção (no escuro, um tom acima do fundo) */
  --veu:           rgba(23, 26, 31, .45);  /* véu atrás da gaveta e do passeio */
  --sombra:        rgba(23, 26, 31, .14);  /* sombra só de caixa flutuante (menu, dica) */
  color-scheme: light;
  /* Status: só ponto ou texto, nunca bloco colorido */
  --atrasado:      #B42318;  /* 6,6:1 */
  --atencao:       #8A5300;  /* 6,3:1 */
  --concluido:     #1D6B45;  /* 6,5:1 */

  /* Estado: etiqueta com fundo claro tingido + texto escuro da mesma família + marcador.
     Só para ESTADO (tramita/tons.py). Ação continua sendo só o marinho. Contraste texto/fundo medido. */
  --ok-fundo:        #E6F2EA;  --ok-texto:        #17573A;  /* 7,4:1 */
  --atencao-fundo:   #FBF0DA;  --atencao-texto:   #74460A;  /* 7,1:1 */  --atencao-marca: #B26A00;  /* 3,7:1 no fundo */
  --problema-fundo:  #FBEAE7;  --problema-texto:  #8F1D14;  /* 7,7:1 */
  --neutro-fundo:    #EEF0F3;  --neutro-texto:    #3F4652;  /* 8,3:1 */

  /* Tipografia: Public Sans 400 e 600, cinco tamanhos */
  --fonte: "Public Sans", "Segoe UI", system-ui, Arial, sans-serif;
  --t-menor:   .875rem;    /* 14px  metadado, rótulo */
  --t-apoio:   1.0625rem;  /* 17px  texto de apoio, menu, tabela */
  --t-corpo:   1.0625rem;  /* 17px  texto corrido, campos, botões */
  --t-destaque: 1.1875rem; /* 19px  frase do próximo passo */
  --t-titulo2: 1.375rem;   /* 22px  título de seção */
  --t-titulo1: 1.875rem;   /* 30px  título da página */

  /* Espaço (múltiplos de 4px) */
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem; --e8: 4rem;

  --raio: 12px;              /* botão, campo, item de menu, caixa flutuante */
  --raio-etiqueta: 8px;      /* etiqueta de estado */
  --raio-bloco: 12px;        /* blocos de seção, botões e campos */
  --fio: 1px solid var(--linha);
  --timbre: 2px solid var(--tinta);  /* a linha do timbre: uma por tela, sob o título */
  --larg-lateral: 15.5rem;
  --alvo: 44px;
}

/* Opção (b) de azul de ação, mais claro e simpático: ative com AZUL_ACAO="b" (tramita/__init__.py) */
:root[data-azul="b"] { --marinho: #106CCB; --marinho-escuro: #0D5AA8; --marinho-claro: #E9F2FB; --marinho-degrau: #0A4A8C; }

/* Tema escuro ("papel timbrado à noite"): só os tokens mudam. Escolhido pela pessoa (data-tema="escuro") ou
   automático pelo aparelho (data-tema="auto"). Só na tela: a impressão é sempre clara. Contrastes no design-system.md. */
@media screen {
  :root[data-tema="escuro"] {
  --branco: #12161C; --superficie: #181D24; --fundo-suave: #212833;
  --tinta: #E8EBF0; --tinta-suave: #A9B2BF; --tinta-papel: #171A1F;
  --linha: #2C333D; --linha-forte: #7D8796; --borda-bloco: #3A424E; --borda-campo: #8A94A3;
  --marinho: #7FAEF5; --marinho-escuro: #A9C8F8; --marinho-claro: #1B2A44; --marinho-degrau: #4E78B8;
  --atrasado: #FF8F84; --atencao: #F0B95A; --concluido: #6DD39B;
  --ok-fundo: #173225; --ok-texto: #A6E8C1;
  --atencao-fundo: #3A2D12; --atencao-texto: #F7D08A; --atencao-marca: #E3A43C;
  --problema-fundo: #43201C; --problema-texto: #FFC0B8;
  --neutro-fundo: #29313C; --neutro-texto: #D5DBE3;
  --veu: rgba(0, 0, 0, .6); --sombra: rgba(0, 0, 0, .5);
  color-scheme: dark;
  }
}
@media screen and (prefers-color-scheme: dark) {
  :root[data-tema="auto"] {
  --branco: #12161C; --superficie: #181D24; --fundo-suave: #212833;
  --tinta: #E8EBF0; --tinta-suave: #A9B2BF; --tinta-papel: #171A1F;
  --linha: #2C333D; --linha-forte: #7D8796; --borda-bloco: #3A424E; --borda-campo: #8A94A3;
  --marinho: #7FAEF5; --marinho-escuro: #A9C8F8; --marinho-claro: #1B2A44; --marinho-degrau: #4E78B8;
  --atrasado: #FF8F84; --atencao: #F0B95A; --concluido: #6DD39B;
  --ok-fundo: #173225; --ok-texto: #A6E8C1;
  --atencao-fundo: #3A2D12; --atencao-texto: #F7D08A; --atencao-marca: #E3A43C;
  --problema-fundo: #43201C; --problema-texto: #FFC0B8;
  --neutro-fundo: #29313C; --neutro-texto: #D5DBE3;
  --veu: rgba(0, 0, 0, .6); --sombra: rgba(0, 0, 0, .5);
  color-scheme: dark;
  }
}
@media screen {
  :root[data-tema="escuro"][data-azul="b"] { --marinho: #74B4F2; --marinho-escuro: #A3CFF7; --marinho-claro: #16303F; --marinho-degrau: #3F7DB3; }
}
@media screen and (prefers-color-scheme: dark) {
  :root[data-tema="auto"][data-azul="b"] { --marinho: #74B4F2; --marinho-escuro: #A3CFF7; --marinho-claro: #16303F; --marinho-degrau: #3F7DB3; }
}

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
:target { scroll-margin-top: 5rem; }
body {
  margin: 0; font-family: var(--fonte); font-size: var(--t-corpo); line-height: 1.55; font-synthesis-weight: none;
  color: var(--tinta); background: var(--branco); overflow-wrap: anywhere;
}
h1, h2, h3 { font-family: var(--fonte); font-weight: 600; color: var(--tinta); letter-spacing: -.01em; overflow-wrap: break-word; }
h1 { font-size: var(--t-titulo1); line-height: 1.2; margin: 0 0 var(--e4); letter-spacing: -.02em; }
h2 { font-size: var(--t-titulo2); line-height: 1.3; margin: 0 0 var(--e3); }
h3 { font-size: var(--t-corpo); line-height: 1.4; margin: 0 0 var(--e2); }
p { margin: 0 0 var(--e4); }
b, strong, th, label, legend { font-weight: 600; }
dt { font-weight: 400; }
small { font-size: var(--t-menor); }
a { color: var(--marinho); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--marinho-escuro); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; border-radius: 2px; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .875em; background: none; padding: 0; overflow-wrap: anywhere; }
hr { border: 0; border-top: var(--fio); margin: var(--e5) 0; }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: var(--e4); top: var(--e4); background: var(--branco); padding: var(--e2) var(--e4); z-index: 100; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   2b. DESENHO HERDADO
   Regras do CSS antigo que ainda sustentam telas (medidas, grades e detalhes de cada formulário), já filtradas
   para o que os templates usam e escritas só com os tokens acima. As seções 3 a 7 vêm depois e mandam.
   Ao redesenhar uma tela à mão, apague daqui as regras dela.
   --------------------------------------------------------------------- */
.subtitulo { display: block; font-size: var(--t-apoio); font-weight: normal; color: var(--tinta-suave); }
.pular { position: absolute; left: -9var(--raio); }
.pular:focus { left: 1rem; top: 1rem; background: var(--branco); padding: .5rem 1rem; z-index: 10; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.faixa-demo { background: var(--linha-forte); color: var(--branco); text-align: center; font-weight: 600; padding: .35rem 1rem; letter-spacing: .02em; }
.topo { background: var(--branco); border-bottom: 1px solid var(--linha); }
.topo-linha { max-width: 960px; margin: 0 auto; padding: .75rem 16px; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; }
.topo-prefeitura { font-weight: 600; font-size: var(--t-corpo); display: flex; gap: .5rem; align-items: center; }
.rotulo-pequeno { font-size: var(--t-menor); color: var(--tinta-suave); }
.menu { background: var(--marinho); }
.menu ul { list-style: none; margin: 0 auto; padding: 0 16px; max-width: 960px; display: flex; flex-wrap: wrap; }
.menu a { display: block; color: var(--branco); text-decoration: none; padding: .75rem 1rem; min-height: 48px; font-weight: 600; }
.menu a:hover, .menu a[aria-current="page"] { background: var(--marinho-escuro); text-decoration: underline; }
.conteudo { max-width: 960px; margin: 0 auto; padding: 1rem 16px 3rem; }
.coluna-estreita { max-width: 560px; margin: 0 auto; }
.rodape { text-align: center; color: var(--tinta-suave); font-size: var(--t-menor); padding: 1.5rem 16px 2rem; }
.rodape p { margin: .2rem 0; }
.mensagem { padding: .8rem 1rem; border-radius: var(--raio); margin: 0 0 1rem; border-left: 1px solid; background: var(--branco); }
.mensagem-erro { border-color: var(--atrasado); background: transparent; color: var(--atrasado); font-weight: 600; }
.mensagem-aviso { border-color: var(--atencao); background: transparent; color: var(--atencao); }
.aviso-sessao { position: sticky; top: 0; z-index: 5; background: transparent; color: var(--atencao); border-bottom: 1px solid var(--atencao); padding: .6rem 16px; text-align: center; font-weight: 600; }
.agora { background: var(--branco); border: 1px solid var(--marinho); border-radius: var(--raio); padding: 1rem 1.1rem; margin: 0 0 1.5rem; }
.agora-titulo { font-size: var(--t-apoio); text-transform: none; color: var(--marinho); margin: 0 0 .25rem; }
.agora-frase { font-size: var(--t-corpo); font-weight: 600; margin: 0 0 .8rem; }
.agora-fornecedor { border-color: var(--atencao); }
.agora-fornecedor .agora-titulo { color: var(--atencao); }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .6rem 1.4rem; border-radius: var(--raio); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.botao-principal { background: var(--marinho); color: var(--branco); font-size: var(--t-corpo); }
.botao-principal:hover { background: var(--marinho-escuro); color: var(--branco); }
.botao-secundario { background: var(--branco); color: var(--marinho); border-color: var(--marinho); }
.botao-secundario:hover { background: var(--fundo-suave); color: var(--marinho-escuro); }
.botao-pequeno { min-height: 40px; padding: .3rem .9rem; font-size: var(--t-menor); background: var(--branco); color: var(--marinho); border-color: var(--marinho); }
.botao-largo { width: 100%; }
.botao-link { background: none; border: none; padding: .5rem 0; min-height: 44px; font: inherit; color: var(--marinho); text-decoration: underline; cursor: pointer; }
.link-acao { display: inline-block; margin: .6rem 1rem; min-height: 44px; line-height: 44px; }
.em-linha { display: inline; }
.botoes-empilhados { display: flex; flex-direction: column; gap: .8rem; max-width: 520px; margin-bottom: 1rem; }
.atalhos { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.5rem 0 1.2rem; }
.atalhos a { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .4rem .9rem; text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.bloco-mesa { margin: 0 0 2rem; }
.bloco-mesa > h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; border-bottom: 1px solid var(--linha); padding-bottom: .3rem; }
.contador { background: var(--tinta); color: var(--branco); border-radius: var(--raio); padding: 0 .6rem; font-size: var(--t-apoio); }
.explica { color: var(--tinta-suave); margin: .2rem 0 1rem; }
.vazio { background: var(--branco); border: 1px dashed var(--linha-forte); border-radius: var(--raio); padding: 1rem; color: var(--tinta-suave); }
.vazio-positivo { color: var(--marinho); border-color: var(--marinho); font-weight: 600; }
.cartao { background: var(--branco); border: 1px solid var(--linha); border-left: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.1rem; margin: 0 0 1rem; }
.cartao-amarelo { border-left-color: var(--atencao); }
.cartao-pausado { border-left-color: var(--tinta-suave); }
.cartao-fornecedor { border-left-color: var(--atencao); }
.cartao-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem .8rem; align-items: center; }
.cartao-numero { font-size: var(--t-titulo2); font-weight: 600; }
.cartao-assunto { margin: .1rem 0 .6rem; }
.cartao-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.cartao-acoes form { margin: 0; }
.valor { font-weight: 600; font-size: var(--t-corpo); }
.valor-grande { font-size: var(--t-titulo2); }
.migalha { font-size: var(--t-apoio); margin: 0 0 .3rem; }
.assunto { font-size: var(--t-corpo); margin: 0 0 .8rem; }
.dados-processo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .4rem 1rem; margin: 0 0 .8rem; }
.dados-processo dt { font-size: var(--t-menor); color: var(--tinta-suave); }
.dados-processo dd { margin: 0; }
.situacao-rotulo { font-size: var(--t-corpo); }
.linha-do-tempo, .documentos, .confirmacao { background: var(--branco); border-radius: var(--raio); padding: 1rem 1.1rem; margin-bottom: 1.2rem; }
.despacho { font-style: italic; }
.eventos { list-style: none; margin: 0; padding: 0 0 0 1.2rem; border-left: 1px solid var(--linha); }
.evento { position: relative; padding: 0 0 1rem .8rem; }
.evento::before { content: ""; position: absolute; left: -1.95rem; top: .35rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--branco); border: 1px solid var(--marinho); }
.evento p { margin: 0; }
.evento-quando { font-weight: 600; }
.evento-texto { margin: .1rem 0; }
.evento-autor { font-size: var(--t-menor); color: var(--tinta-suave); }
.selo-publico { font-size: var(--t-menor); font-weight: 600; color: var(--marinho); border: 1px solid var(--marinho); border-radius: var(--raio); padding: 0 .5rem; margin-left: .4rem; }
.lista-docs { list-style: none; margin: 0 0 1rem; padding: 0; }
.lista-docs li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid var(--linha); padding: .6rem 0; }
.anexar summary { cursor: pointer; font-weight: 600; color: var(--marinho); min-height: 44px; display: flex; align-items: center; }
.lista-simples { margin: 0; padding-left: 1.2rem; }
.etapas { list-style: none; padding: 0; margin: 0 0 1.2rem; background: var(--branco); border-radius: var(--raio); padding: 1rem; }
.etapa { display: flex; gap: .6rem; align-items: center; padding: .3rem 0; }
.cartao-situacao { background: var(--fundo-suave); border-radius: var(--raio); padding: .8rem 1rem; margin-bottom: 1rem; }
.cartao-situacao-fornecedor { background: transparent; color: var(--atencao); }
.cartao-situacao p { margin: 0; font-size: var(--t-titulo2); }
.formulario { background: var(--branco); border-radius: var(--raio); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.campo { margin: 0 0 1.2rem; border: 0; padding: 0; }
.campo label, .campo legend { display: block; font-weight: 600; margin-bottom: .3rem; }
.dica { color: var(--tinta-suave); font-size: var(--t-apoio); margin: 0 0 .4rem; }
.checkbox { display: flex !important; gap: .6rem; align-items: center; font-weight: 600; min-height: 44px; }
.checkbox input { width: 1.4rem; height: 1.4rem; }
.erro-campo { color: var(--atrasado); font-weight: 600; margin: 0 0 .3rem; }
.opcoes-grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; }
.opcao-grande { display: flex !important; gap: .7rem; align-items: center; border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: .7rem .9rem; min-height: 52px; cursor: pointer; font-weight: 600 !important; }
.opcao-grande input { width: 1.3rem; height: 1.3rem; }
.opcao-grande:has(input:checked) { border-color: var(--marinho); background: var(--fundo-suave); }
.resumo-processo { background: var(--branco); border-radius: var(--raio); padding: .8rem 1rem; }
.confirmacao { border: 1px solid var(--marinho); }
.busca { display: flex; gap: .6rem; flex-wrap: wrap; }
.busca input { flex: 1 1 240px; }
.info-prefeitura { font-weight: 600; }
.esqueci { margin: 1rem 0; }
.ajuda-exemplo { display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--marinho); color: var(--branco); align-items: center; justify-content: center; font-weight: 600; }
.glossario div { background: var(--branco); border-radius: var(--raio); padding: .8rem 1rem; margin-bottom: .6rem; }
.glossario dt { font-weight: 600; font-size: var(--t-corpo); }
.glossario dd { margin: .2rem 0 0; }
.grade-perfis { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.cartao-perfil { margin: 0; }
.cartao-perfil-botao { width: 100%; height: 100%; text-align: left; font: inherit; cursor: pointer; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem; display: flex; flex-direction: column; gap: .25rem; color: var(--tinta); }
.cartao-perfil-botao:hover { border-color: var(--marinho); background: var(--fundo-suave); }
.cartao-perfil-nome { font-size: var(--t-titulo2); font-weight: 600; color: var(--marinho); }
.cartao-perfil-pessoa { font-weight: 600; }
.cartao-perfil-setor, .cartao-perfil-desc { color: var(--tinta-suave); font-size: var(--t-apoio); }
.cartao-perfil-acao { margin-top: auto; padding-top: .5rem; font-weight: 600; color: var(--marinho); }
.tabela-rolagem { overflow-x: auto; background: var(--branco); border-radius: var(--raio); margin-bottom: 1rem; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela caption { text-align: left; font-weight: 600; padding: .8rem 1rem; }
.tabela th, .tabela td { text-align: left; padding: .6rem .8rem; border-top: 1px solid var(--linha); vertical-align: top; }
.tabela th { background: var(--fundo-suave); }
.linha-erro { background: transparent; }
.resultado { border-radius: var(--raio); padding: 1rem 1.2rem; margin: 0 0 1rem; border: 1px solid; }
.resultado-titulo { font-size: var(--t-titulo1); font-weight: 600; margin: 0 0 .3rem; }
.resultado-ok { border-color: var(--marinho); background: var(--fundo-suave); color: var(--marinho-escuro); }
.resultado-erro { border-color: var(--atrasado); background: transparent; color: var(--atrasado); }
.resumo-numeros { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.resumo-numeros p { background: var(--branco); border-radius: var(--raio); padding: .6rem 1rem; margin: 0; }
.lista-integridade { background: var(--branco); border-radius: var(--raio); padding: 1rem 1rem 1rem 2rem; }
.lista-integridade li { margin: .4rem 0; }
.lista-golpe li { margin: .5rem 0; font-size: var(--t-corpo); }
@media (max-width: 640px) {
  .menu a { padding: .7rem .8rem; }
  .botao-principal { width: 100%; }
  .cartao-acoes { flex-direction: column; align-items: stretch; }
  .cartao-acoes .botao, .cartao-acoes form, .cartao-acoes form .botao { width: 100%; }
  .lista-docs li { flex-direction: column; align-items: flex-start; }
  .ajuda-texto { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
}
@media print {
  .faixa-demo, .menu, .agora, .rodape, .atalhos { display: none !important; }
}
div.explica, div.via-fisica { margin: .2rem 0 .8rem; }
.lista-docs li > .botao { flex-shrink: 0; white-space: nowrap; }
.ic { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.12em; }
.ajuda-termo { display: inline-block; position: relative; vertical-align: middle; }
.ajuda-termo summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px -4px; cursor: pointer; user-select: none; border-radius: 50%; }
.ajuda-termo summary::-webkit-details-marker { display: none; }
.ajuda-bolinha { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--marinho); color: var(--branco); font-weight: 600; font-size: var(--t-menor); }
.ajuda-termo[open] .ajuda-bolinha { background: var(--marinho-escuro); }
.ajuda-texto { display: block; position: absolute; z-index: 6; left: 0; top: 2.4rem; width: min(320px, 80vw); background: var(--branco); color: var(--tinta); border: 1px solid var(--marinho); border-radius: var(--raio); padding: .7rem .8rem; font-weight: normal; font-size: var(--t-apoio); text-align: left; white-space: normal; }
.cartao-numero, .migalha a, .link-tabela, .link-acao, .lista-integridade a, .rodape a, .selo-oficial a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .15rem; }
.botao-pequeno { min-height: 44px; }
.checkbox { min-height: 48px; padding: .3rem .4rem; border-radius: var(--raio); cursor: pointer; }
.opcao-grande { min-height: 56px; }
.topo-linha { padding: .5rem 16px; flex-wrap: nowrap; }
.topo-prefeitura { font-size: var(--t-apoio); min-width: 0; }
.topo-prefeitura span:last-child { overflow: hidden; text-overflow: ellipsis; }
.menu-usuario { position: relative; flex-shrink: 0; }
.menu-usuario > summary { list-style: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: 48px; padding: .25rem .8rem .25rem .6rem; border: 1px solid var(--linha); border-radius: var(--raio); cursor: pointer; position: relative; padding-right: 1.8rem; background: var(--branco); line-height: 1.2; }
.menu-usuario > summary::-webkit-details-marker { display: none; }
.mu-nome { font-weight: 600; }
.mu-perfil { font-size: var(--t-menor); color: var(--tinta-suave); }
.mu-seta { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); }
.menu-usuario[open] > summary { border-color: var(--marinho); }
.mu-painel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; width: min(320px, calc(100vw - 32px)); background: var(--branco); border: 1px solid var(--marinho); border-radius: var(--raio); padding: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.mu-painel form { margin: 0; }
.mu-quem { margin: 0 0 .3rem; }
.mu-titulo { margin: .3rem 0 0; font-weight: 600; font-size: var(--t-menor); color: var(--tinta-suave); }
.subtitulo-inline { font-size: var(--t-apoio); font-weight: normal; color: var(--tinta-suave); }
.conteudo { padding-top: .6rem; }
.agora { padding: .7rem 1rem; margin-bottom: 1rem; }
.agora-frase { margin-bottom: .6rem; }
.resumo-prazos { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; }
.bloco-mesa > h2 { margin-bottom: .5rem; }
.cartao { padding: .8rem 1rem; }
.assunto { margin: 0 0 .6rem; }
.acoes-secundarias { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: -.5rem 0 1rem; }
.detalhe > summary { cursor: pointer; color: var(--marinho); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.caixa-pendencia { background: transparent; border: 1px solid var(--atencao); border-radius: var(--raio); padding: .8rem 1rem; margin-bottom: 1rem; }
.caixa-pendencia h2 { color: var(--atencao); font-size: var(--t-corpo); display: flex; gap: .4rem; align-items: center; }
.pendencia-motivo { font-weight: 600; color: var(--atencao); margin: .3rem 0; }
.previa-fornecedor { margin: .3rem 0 0; background: var(--branco); border-left: 2px solid var(--atencao); padding: .6rem .8rem; border-radius: var(--raio); }
.previa-caixa { background: var(--fundo-suave); border-radius: var(--raio); padding: .7rem .9rem; margin: 0 0 1.2rem; }
.faixa-balcao { background: transparent; color: var(--atencao); border: 1px solid var(--atencao); border-radius: var(--raio); padding: .6rem .9rem; margin-bottom: .8rem; font-weight: 600; }
.selo-oficial { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; color: var(--marinho-escuro); background: var(--fundo-suave); border-radius: var(--raio); padding: .35rem .8rem; margin: 0 0 .6rem; font-size: var(--t-apoio); }
.alerta-cnd { border-left: 2px solid var(--atencao); }
.salvo { color: var(--marinho); font-size: var(--t-menor); margin: 0 0 .8rem; display: flex; gap: .3rem; align-items: center; }
.ja-enviado { color: var(--marinho-escuro); font-weight: 600; }
.passos { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 .6rem; }
.passo { display: flex; align-items: center; gap: .4rem; padding: .25rem .7rem .25rem .3rem; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--branco); font-size: var(--t-apoio); }
.passo-num { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--fundo-suave); font-weight: 600; }
.passo-feito { border-color: var(--marinho); color: var(--marinho); }
.passo-feito .passo-num { background: var(--marinho); color: var(--branco); }
.passo-atual { border-color: var(--marinho); color: var(--marinho); font-weight: 600; }
.passo-atual .passo-num { background: var(--marinho); color: var(--branco); }
.passo-futuro { color: var(--tinta-suave); }
.triagem-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; align-items: start; }
.item-triagem, .item-cnd { border: 1px solid var(--linha); border-radius: var(--raio); padding: .6rem .8rem; margin: 0 0 .8rem; }
.item-triagem legend, .item-cnd legend { padding: 0 .3rem; }
.item-triagem .dica { margin: .2rem 0 .4rem; }
.opcoes-triagem { display: flex; flex-wrap: wrap; gap: .4rem; }
.opcao-triagem { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: .4rem .8rem; min-height: 48px; cursor: pointer; font-weight: 600; }
.opcao-triagem:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.aviso-item { color: var(--atrasado); font-weight: 600; margin: 0 0 .4rem; }
.resumo-conferidos { font-weight: 600; }
.opcoes-lista { display: flex; flex-direction: column; gap: .5rem; }
.opcao-bloco { align-items: flex-start !important; }
.opcao-bloco input { margin-top: .2rem; }
.comprovante { background: var(--branco); border: 1px solid var(--marinho); border-radius: var(--raio); padding: 1rem 1.2rem; }
.comp-prefeitura { font-weight: 600; margin: 0; }
.comp-titulo { color: var(--marinho-escuro); display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; }
.nao-imprimir { display: flex; flex-wrap: wrap; gap: .6rem; }
.cartao-escolha { margin: 0 0 .8rem; }
@media (max-width: 700px) {
  .tabela-cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; width: 100%; }
  .tabela-cartoes caption { display: block; }
  .tabela-cartoes tr { border-top: 1px solid var(--linha); padding: .4rem 0; }
  .tabela-cartoes td { border-top: 0; padding: .3rem .9rem .3rem calc(38% + 1.2rem); position: relative; min-height: 2rem; }
  .tabela-cartoes td::before { content: attr(data-rotulo); position: absolute; left: .9rem; width: 38%; font-weight: 600; color: var(--tinta-suave); font-size: var(--t-menor); }
  .tabela-rolagem { overflow-x: visible; }
  .triagem-grade { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topo-linha { gap: .5rem; }
  .topo-prefeitura { font-size: var(--t-menor); }
  .topo-prefeitura span:last-child { white-space: normal; overflow: visible; }
  .mu-perfil { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu > ul { flex-wrap: wrap; padding: 0 8px; }
  .menu a, .menu-mais summary { font-size: var(--t-apoio); padding: .6rem .6rem; }
  .menu-mais { display: block !important; margin-left: auto; }
  .menu a { white-space: nowrap; padding: .6rem .7rem; }
  .faixa-demo { font-size: var(--t-menor); padding: .2rem 1rem; }
  .ajuda-texto { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
}
@media print {
  .nao-imprimir, .selo-oficial, .menu-usuario, .acoes-secundarias { display: none !important; }
  .comprovante { border: 1px solid var(--tinta); }
}
.menu-mais { display: none; position: relative; }
.menu-mais summary { list-style: none; color: var(--branco); font-weight: 600; padding: .6rem .8rem; min-height: 48px; display: flex; align-items: center; gap: .3rem; cursor: pointer; }
.menu-mais summary::-webkit-details-marker { display: none; }
.topo-prefeitura span:last-child { white-space: normal; }
.so-computador { display: block; }
.so-celular { display: none; }
@media (max-width: 900px) {
  .so-computador { display: none; }
  .so-celular { display: block; }
}
.aviso-etapa { background: transparent; color: var(--atencao); border: 1px solid var(--atencao); border-radius: var(--raio); padding: .7rem .9rem; margin: 0 0 1rem; }
.aviso-etapa a { color: var(--marinho); font-weight: 600; }
.evento-interno { background: var(--fundo-suave); border-left: 1px solid var(--tinta-suave); padding: .3rem .6rem; border-radius: 4px; margin: .3rem 0 !important; }
.evento-publico { background: var(--fundo-suave); border-left: 2px solid var(--marinho); padding: .3rem .6rem; border-radius: 4px; margin: .3rem 0 !important; }
.evento-publico .selo-publico { margin: 0 .4rem 0 0; display: inline-block; }
.link-arquivo { display: inline-flex; align-items: center; min-height: 44px; }
.texto-erro { color: var(--atrasado); }
.caixa-codigo-demo { background: transparent; border: 1px dashed var(--atencao); border-radius: var(--raio); padding: .6rem .9rem; margin: 0 0 1rem; }
.caixa-codigo-demo p { margin: .1rem 0; }
.codigo-demo { font-size: var(--t-titulo1); letter-spacing: .25em; font-family: ui-monospace, Consolas, monospace; }
.campo-codigo { font-size: var(--t-titulo1)!important; letter-spacing: .3em; max-width: 12rem; font-family: ui-monospace, Consolas, monospace; }
.cartao-quebra { border: 1px solid var(--atencao); background: transparent; }
.total-grande { font-size: var(--t-titulo1); font-weight: 600; margin: 0 0 .8rem; }
.barra-lote { position: sticky; bottom: 0; background: var(--fundo-suave); padding: .6rem 0; z-index: 3; }
.checkbox-cartao { align-items: flex-start !important; font-weight: normal; }
.checkbox-cartao input { margin-top: .3rem; }
.filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.filtro { border: 1px solid var(--marinho); border-radius: var(--raio); padding: .3rem .9rem; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; font-weight: 600; color: var(--marinho); background: var(--branco); }
.filtro-ativo { background: var(--marinho); color: var(--branco); }
.cadeado { color: var(--tinta-suave); display: flex; gap: .4rem; align-items: center; }
.linha-campos { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.linha-campos .campo { flex: 1 1 9rem; margin-bottom: .6rem; }
.conta-liquido { background: var(--fundo-suave); border: 1px solid var(--marinho); border-radius: var(--raio); padding: .6rem 1rem; margin: 0 0 1.2rem; }
.conta-liquido p { margin: .2rem 0; }
.previa-glosa { font-weight: 600; color: var(--atencao); }
.quadro-documento { display: none; }
@media (min-width: 901px) {
  .triagem-grade { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .visualizador { position: sticky; top: .5rem; }
  .quadro-documento { display: block; }
  .quadro-documento iframe { width: 100%; height: 70vh; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); }
  .lista-visualizar li { padding: .3rem 0; }
  .lista-visualizar a[aria-current="true"] { background: var(--marinho); color: var(--branco); }
}
.tabela td.valor, .tabela td[data-rotulo="Liquidado em"], .tabela td[data-rotulo="Processo"], .tabela td[data-rotulo="Posição"] { white-space: nowrap; }
.quadro-documento { margin-bottom: .8rem; }
@media (max-width: 640px) {
  .topo-prefeitura { font-size: var(--t-menor); }
  .mu-perfil { max-width: 7.5rem; }
  .tabela td.valor, .tabela td[data-rotulo] { white-space: normal; }
}
.faixa-demo a { color: var(--branco); text-decoration: underline; font-weight: 600; }
.faixa-data { background: var(--branco); color: var(--linha-forte); border-radius: 4px; padding: 0 .4rem; }
.aguardando { display: inline-flex; gap: .3rem; align-items: center; color: var(--tinta-suave); }
.h2-lote { margin-top: .4rem; }
.campo-curto { max-width: 7rem; }
.campo-medio { max-width: 15rem; }
.cards-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin: 0 0 1rem; }
.card-resumo { background: var(--branco); border-radius: var(--raio); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .2rem; color: var(--tinta); text-decoration: none; border-left: 2px solid var(--marinho); }
.card-alerta { border-left-color: var(--atrasado); }
.card-atencao { border-left-color: var(--atencao); }
.card-num { font-size: var(--t-titulo1); font-weight: 600; line-height: 1; }
.grafico-barras { display: flex; flex-direction: column; gap: .5rem; }
.barra-linha { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr 5.5rem; gap: .6rem; align-items: center; }
.barra-trilho { background: var(--fundo-suave); border-radius: var(--raio); height: 1.4rem; overflow: hidden; }
.barra { display: block; height: 100%; background: var(--marinho); border-radius: var(--raio); }
.barra-valor { font-weight: 600; }
@media (max-width: 640px) {
  .barra-linha { grid-template-columns: 1fr 4.5rem; }
  .barra-rotulo { grid-column: 1 / -1; }
}
.wa-grade { display: grid; grid-template-columns: minmax(14rem, 18rem) 1fr; gap: 1rem; }
.wa-lista { display: flex; flex-direction: column; gap: .3rem; max-height: 75vh; overflow-y: auto; }
.wa-pessoa { flex-shrink: 0; display: flex; flex-direction: column; background: var(--branco); border-radius: var(--raio); padding: .5rem .7rem; text-decoration: none; color: var(--tinta); min-height: 48px; border: 1px solid transparent; }
.wa-pessoa small { color: var(--tinta-suave); }
.wa-ativa { border-color: var(--marinho); }
.wa-tela { background: var(--fundo-suave); border-radius: var(--raio); padding: 0; display: flex; flex-direction: column; min-height: 60vh; }
.wa-topo { background: var(--tinta); color: var(--branco); padding: .6rem .9rem; border-radius: var(--raio) var(--raio) 0 0; display: flex; gap: .6rem; align-items: center; }
.wa-topo small { color: var(--branco); }
.wa-avatar { font-size: var(--t-titulo1); }
.wa-verificado { background: var(--ok-fundo); color: var(--ok-texto); border-radius: 50%; padding: 0 .3rem; font-size: var(--t-menor); }
.wa-mensagens { padding: .8rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; overflow-y: auto; max-height: 65vh; }
.wa-bolha { max-width: 85%; padding: .5rem .7rem; border-radius: var(--raio); background: var(--branco); align-self: flex-start; }
.wa-entrada { background: var(--ok-fundo); align-self: flex-end; }
.wa-pendente { opacity: .75; border: 1px dashed var(--atencao); }
.wa-cancelada { opacity: .55; text-decoration: line-through; }
.wa-texto { white-space: pre-wrap; margin: 0; }
.wa-meta { font-size: var(--t-menor); color: var(--tinta-suave); margin: .3rem 0 0; text-align: right; }
.wa-escrever { display: flex; gap: .5rem; padding: .6rem; background: var(--fundo-suave); border-radius: 0 0 var(--raio) var(--raio); }
.wa-escrever input { flex: 1; }
.email-tela { background: var(--branco); padding: .8rem; }
.email-lista { list-style: none; padding: 0; margin: 0 0 1rem; }
.email-lista a { display: block; padding: .5rem; border-bottom: 1px solid var(--linha); text-decoration: none; min-height: 44px; }
.email-ativo { background: var(--fundo-suave); }
.email-texto { white-space: pre-wrap; font-family: inherit; background: var(--fundo-suave); padding: .8rem; border-radius: var(--raio); }
@media (max-width: 760px) {
  .wa-grade { grid-template-columns: 1fr; }
  .wa-lista { max-height: 14rem; }
}
.faixa-treino { background: var(--fundo-suave); color: var(--branco); text-align: center; font-weight: 600; padding: .4rem 1rem; }
.dica-primeira { background: var(--fundo-suave); border: 1px solid var(--marinho); border-radius: var(--raio); padding: .7rem .9rem; margin: 0 0 1rem; position: relative; }
.dica-primeira p { margin: .2rem 0; }
.dica-primeira form { margin-top: .4rem; }
.tour { position: fixed; inset: 0; z-index: 50; background: var(--veu); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.tour[hidden] { display: none; }
.tour-caixa { background: var(--branco); border-radius: var(--raio); padding: 1rem 1.2rem; max-width: 520px; width: 100%; }
.tour-passo { color: var(--tinta-suave); font-weight: 600; margin: 0; }
.tour-acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.tour.tour-com-alvo { background: transparent; }
.tour-destaque { position: relative; z-index: 49; outline: 4px solid var(--linha-forte); outline-offset: 4px; border-radius: var(--raio); box-shadow: 0 0 0 9var(--raio) var(--veu); }
.manual-perfil h2 { margin-top: 1rem; }
.manual-perfil ol li { margin: .4rem 0; }
.impressao .capa { border: 1px solid var(--tinta); border-radius: var(--raio); padding: 1rem; background: var(--branco); }
.impressao .linha-qr { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
@media print {
  .faixa-treino { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .impressao .capa { break-inside: avoid; }
  .tour, .dica-primeira { display: none !important; }
}
.botao-perigo { background: var(--atrasado); color: var(--branco); border-color: var(--atrasado); }
.lista-links { padding-left: 1.2rem; }
.lista-links li { margin: .5rem 0; }
.destaque { font-size: var(--t-corpo); background: var(--fundo-suave); padding: .6rem .8rem; border-radius: var(--raio); }
.manual-rodape { margin-top: 1.5rem; color: var(--tinta-suave); font-size: var(--t-menor); }
.faq details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
@media print {
  .topo, .rodape, .faixa-demo { display: none !important; }
  .manual-perfil { font-size: 11pt; }
  .manual-perfil h1 { font-size: 16pt; }
}
.link-claro { color: var(--branco); text-decoration: underline; }
.codigo-grande { font-family: ui-monospace, Consolas, monospace; font-size: var(--t-titulo1); font-weight: 600; letter-spacing: .05em; word-break: break-all; margin: .3rem 0; }
.qr-caixa svg { width: 150px; height: 150px; display: block; background: var(--branco); }
.hash-curto { font-family: ui-monospace, Consolas, monospace; font-size: var(--t-menor); word-break: break-all; }
.tabela-impressao { width: 100%; border-collapse: collapse; }
.tabela-impressao th, .tabela-impressao td { border-bottom: 1px solid var(--linha); padding: .35rem .4rem; text-align: left; vertical-align: top; }
@media print {
  .tabela-impressao { font-size: 9.5pt; }
  .capa h1 { font-size: 18pt; }
}
.acoes-linha { display: flex; flex-wrap: wrap; gap: .5rem; }
.wa-escrever input { min-width: 0; }
.wa-escrever .botao { width: auto; flex: 0 0 auto; }
.tabela-impressao td:first-child { white-space: nowrap; }
.tabela-tempo td:nth-child(3) { min-width: 9rem; }
.tabela-tempo td:nth-child(4) { min-width: 6.5rem; }
.botao, .mu-nome, .menu a { font-weight: 600; }
.agora-titulo { font-family: var(--fonte); font-weight: 600; color: var(--tinta); letter-spacing: -.005em; }
.logo { display: inline-flex; align-items: baseline; gap: .28em; font-family: var(--fonte); font-weight: 600; font-size: var(--t-titulo2); line-height: 1; text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.logo-doctus { color: var(--tinta); }
.logo-gov { color: var(--linha-forte); }
.logo-pequeno { font-size: var(--t-corpo); }
.logo:hover .logo-doctus { color: var(--branco); }
.logo:focus-visible { outline-color: var(--linha-forte); }
.sobre-claro .logo-doctus { color: var(--tinta); }
.faixa-demo { background: var(--linha-forte); color: var(--tinta); font-weight: 600; letter-spacing: .01em; }
.faixa-demo a { color: var(--tinta); }
.topo { background: var(--tinta); border-bottom: 0; color: var(--tinta); }
.topo-marca { display: flex; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; min-width: 0; }
.topo-prefeitura { color: var(--tinta-suave); font-weight: 400; font-size: var(--t-apoio); display: block; padding-left: 1rem; border-left: 1px solid var(--linha); }
.menu-usuario > summary { background: transparent; border-color: var(--linha); color: var(--tinta); }
.menu-usuario > summary:hover, .menu-usuario[open] > summary { border-color: var(--linha-forte); }
.mu-perfil { color: var(--tinta-suave); }
.mu-painel { color: var(--tinta); border-color: var(--tinta); }
.menu { background: var(--tinta); border-top: 1px solid var(--linha); }
.menu a { color: var(--tinta); text-decoration: none; }
.menu a:hover { background: var(--fundo-suave); text-decoration: underline; }
.menu a[aria-current="page"] { background: var(--marinho); text-decoration: none; }
.menu-mais summary { color: var(--tinta); }
.rodape { background: var(--tinta); color: var(--tinta-suave); text-align: left; margin-top: 2rem; padding: 1.4rem 16px; }
.rodape-linha { max-width: 960px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: center; justify-content: space-between; }
.rodape-marca { display: flex; flex-direction: column; gap: .2rem; }
.rodape-slogan { font-size: var(--t-menor); color: var(--tinta-suave); }
.rodape-info p { margin: .15rem 0; }
.rodape a { color: var(--tinta); }
.rodape a:hover { color: var(--branco); }
.botao { border-radius: var(--raio); }
.botao-principal { background: var(--marinho); color: var(--branco); }
.botao-principal:hover { background: var(--marinho-escuro); color: var(--branco); }
.botao-secundario, .botao-pequeno { background: var(--branco); color: var(--marinho); border-color: var(--marinho); }
.botao-secundario:hover { background: var(--fundo-suave); color: var(--marinho-escuro); }
.agora { border-color: var(--marinho); border-width: 1px; border-left: 2px solid var(--marinho); }
.agora-titulo { font-size: var(--t-corpo); }
.cartao, .card-resumo, .comprovante, .mu-painel { border-radius: var(--raio); }
.vazio-positivo, .resultado-ok { color: var(--concluido); border-color: var(--concluido); background: transparent; }
.passo-feito { color: var(--concluido); border-color: var(--concluido); }
.passo-feito .passo-num { background: var(--concluido); color: var(--branco); }
.salvo, .ja-enviado, .comp-titulo { color: var(--concluido); }
.comprovante, .conta-liquido { border-color: var(--concluido); }
.conta-liquido { background: transparent; }
.selo-oficial { color: var(--tinta); background: transparent; border: 1px solid var(--linha-forte); }
.cartao-perfil-nome, .cartao-perfil-acao { color: var(--marinho); }
.login-grade { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; max-width: 960px; margin: 1rem auto 0; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); background: var(--branco); }
@media (max-width: 760px) {
  .login-grade { grid-template-columns: 1fr; margin-top: 0; border-radius: 0; border-left: 0; border-right: 0; }
  .topo-prefeitura { padding-left: 0; border-left: 0; flex-basis: 100%; font-size: var(--t-menor); }
  .rodape-linha { flex-direction: column; align-items: flex-start; }
}
@media print {
  .logo-doctus { color: var(--tinta); }
}
.faixa-demo a, .faixa-treino a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .3rem; }
.faixa-demo { padding-top: 0; padding-bottom: 0; }
.faixa-data { background: var(--tinta); color: var(--tinta); border-radius: 4px; padding: .1rem .5rem; }
.faixa-treino { background: var(--fundo-suave); color: var(--tinta); border-bottom: 1px solid var(--linha-forte); font-weight: 600; }
.faixa-treino .link-claro { color: var(--tinta); }
.wa-pendente { opacity: 1; background: transparent; border: 1px dashed var(--atencao); }
.wa-pendente .wa-meta, .wa-cancelada .wa-meta { color: var(--atencao); }
.wa-cancelada { opacity: 1; text-decoration: none; background: var(--fundo-suave); }
.wa-cancelada .wa-texto { text-decoration: line-through; color: var(--tinta-suave); }
.wa-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--linha-forte); color: var(--tinta); font-family: var(--fonte); font-size: var(--t-apoio); flex-shrink: 0; white-space: nowrap; }
.tabela th, .tabela td { overflow-wrap: normal; word-break: normal; hyphens: auto; }
.qr-caixa svg { width: 160px; height: 160px; display: block; background: var(--branco); }
@media screen and (max-width: 640px) {
  .tabela-impressao.tabela-cartoes td { padding: .3rem .6rem .3rem calc(38% + 1rem); border-bottom: 0; }
  .tabela-impressao.tabela-cartoes td::before { left: .6rem; }
  .tabela-impressao.tabela-cartoes td:first-child { white-space: normal; }
  .tabela-tempo td:nth-child(3), .tabela-tempo td:nth-child(4) { min-width: 0; }
  .hash-curto { word-break: break-all; }
}
a.card-resumo { text-decoration: none; color: var(--tinta); }
a.card-resumo:hover { border-color: var(--marinho); background: var(--fundo-suave); }
.card-link { color: var(--marinho); text-decoration: underline; font-size: var(--t-menor); }
.aviso-mesa { border-left: 2px solid var(--marinho); background: var(--fundo-suave); }
.treino-fim { border-left: 2px solid var(--concluido); }
@media print {
  .tabela-impressao.tabela-cartoes { display: table; width: 100%; }
  .tabela-impressao.tabela-cartoes thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .tabela-impressao.tabela-cartoes tbody { display: table-row-group; }
  .tabela-impressao.tabela-cartoes tr { display: table-row; border-top: 0; padding: 0; }
  .tabela-impressao.tabela-cartoes td { display: table-cell; width: auto; padding: .35rem .4rem; min-height: 0; }
  .tabela-impressao.tabela-cartoes td::before { content: none; }
}
.card-num-valor { font-size: var(--t-titulo1); }
.cards-resumo { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 640px) {
  .cards-resumo { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .card-resumo { padding: .6rem .7rem; }
  .card-num { font-size: var(--t-titulo1); }
  .card-num-valor { font-size: var(--t-corpo); }
  .card-resumo small { display: none; }
}
.tabela-cartoes td.hash-curto::before { font-family: var(--fonte); }
.tabela td, .impressao td { overflow-wrap: anywhere; }
.botao, .mu-nome, .menu a { font-weight: 600; }
.agora-titulo, .logo { font-family: var(--fonte); font-weight: 600; letter-spacing: -.01em; }
.app { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.principal { display: flex; flex-direction: column; min-width: 0; }
.principal > .conteudo { flex: 1; width: 100%; max-width: 1060px; padding: 2rem 2.5rem 3rem; margin: 0; }
.lateral { background: var(--tinta); color: var(--tinta); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 1.6rem; padding: 1.6rem 1.1rem 1.2rem; }
.lateral-marca { display: flex; flex-direction: column; gap: .45rem; padding: 0 .5rem; }
.lateral-marca .logo { font-size: var(--t-titulo1); }
.lateral-titulo { font-size: var(--t-menor); text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-suave); margin: 0 0 .5rem; padding: 0 .5rem; font-weight: 600; }
.lateral .menu { background: transparent; border: 0; }
.lateral .menu ul { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; max-width: none; flex-wrap: nowrap; }
.lateral .menu li { display: block; }
.lateral .menu a { display: flex; align-items: center; min-height: 44px; padding: .55rem .75rem; border-radius: var(--raio); color: var(--tinta); text-decoration: none; white-space: normal; font-size: var(--t-apoio); }
.lateral .menu a:hover { background: var(--fundo-suave); text-decoration: none; }
.lateral .menu a[aria-current="page"] { background: var(--marinho); }
.fluxo ol { list-style: none; margin: 0; padding: 0 .5rem; position: relative; }
.fluxo-nota { font-size: var(--t-menor); color: var(--tinta-suave); margin: 0 0 .6rem; padding: 0 .5rem; }
.fluxo-etapa { display: flex; gap: .7rem; align-items: flex-start; position: relative; padding: 0 0 .85rem; }
.fluxo-etapa:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 1px; background: var(--linha); }
.fluxo-num { flex: 0 0 23px; height: 23px; border-radius: 50%; border: 1px solid var(--linha); color: var(--tinta-suave); font-size: var(--t-menor); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.fluxo-texto { display: flex; flex-direction: column; line-height: 1.25; }
.fluxo-nome { font-size: var(--t-apoio); color: var(--tinta); }
.fluxo-quem { font-size: var(--t-menor); color: var(--tinta-suave); }
.fluxo-minha .fluxo-num { background: var(--linha-forte); border-color: var(--linha-forte); color: var(--tinta); }
.fluxo-minha .fluxo-nome { font-weight: 600; }
.fluxo-minha .fluxo-quem strong { color: var(--linha-forte); font-weight: 600; }
.lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: .1rem; padding: 1rem .5rem 0; border-top: 1px solid var(--linha); }
.lateral-rodape a { color: var(--tinta-suave); font-size: var(--t-menor); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.lateral-rodape a:hover { color: var(--tinta); text-decoration: underline; }
.barra-topo { display: flex; align-items: center; gap: 1rem; min-height: 64px; padding: .5rem 2.5rem; background: var(--branco); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 20; }
.barra-logo { display: none; }
.barra-topo .menu-usuario { margin-left: auto; }
.barra-topo .menu-usuario > summary { background: var(--branco); border: 1px solid var(--linha); color: var(--tinta); }
.barra-topo .menu-usuario > summary:hover, .barra-topo .menu-usuario[open] > summary { border-color: var(--marinho); }
.barra-topo .mu-perfil { color: var(--tinta-suave); }
.botao-lateral { display: none; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .8rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); color: var(--tinta); font: inherit; font-weight: 600; cursor: pointer; }
.icone-menu, .icone-menu::before, .icone-menu::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; position: relative; }
.icone-menu::before, .icone-menu::after { content: ""; position: absolute; left: 0; }
.icone-menu::before { top: -6px; }
.icone-menu::after { top: 6px; }
.lateral-fundo { position: fixed; inset: 0; background: var(--veu); z-index: 55; }
.rodape-discreto { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; padding: 1.2rem 2.5rem 1.6rem; border-top: 1px solid var(--linha); color: var(--tinta-suave); font-size: var(--t-menor); }
.agora { background: var(--branco); border: 1px solid var(--linha); border-left: 2px solid var(--marinho); padding: 1.1rem 1.3rem; }
.agora-titulo { font-size: var(--t-apoio); color: var(--tinta); }
.cartao, .card-resumo, .comprovante {  }
.cartao { border: 1px solid var(--linha); }
.faixa-demo { font-size: var(--t-menor); padding: .3rem 1rem; }
@media (max-width: 900px) {
  .app { display: block; }
  .js .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto; z-index: 60; transform: translateX(-102%); transition: transform .2s ease; }
  .js .lateral.aberta { transform: none; }
  html:not(.js) .lateral { position: static; height: auto; }
  .botao-lateral { display: inline-flex; }
  .barra-logo { display: inline-flex; font-size: var(--t-corpo); }
  .barra-logo .logo-doctus { color: var(--tinta); }
  .barra-topo { padding: .5rem 16px; gap: .6rem; }
  .principal > .conteudo { padding: 1.2rem 16px 2.5rem; }
  .rodape-discreto { padding: 1rem 16px 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .lateral { transition: none; }
}
@media print {
  .lateral, .barra-topo, .rodape-discreto, .lateral-fundo { display: none !important; }
  .app { display: block; }
}
.botao-lateral { white-space: nowrap; flex-shrink: 0; overflow-wrap: normal; min-width: 44px; min-height: 44px; justify-content: center; }
.barra-logo { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 480px) {
  .botao-lateral { padding: .4rem .65rem; }
  .botao-lateral .texto-menu { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .barra-topo .menu-usuario { min-width: 0; }
  .barra-topo .mu-perfil { display: none; }
  .barra-topo .menu-usuario > summary { padding-left: .6rem; }
}
.fluxo-previa { list-style: none; margin: .5rem 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.fluxo-previa .fluxo-etapa { display: flex; gap: .6rem; align-items: flex-start; }
.fluxo-previa .fluxo-num { flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--linha-forte); display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-menor); }
.fluxo-previa .fluxo-texto { display: flex; flex-direction: column; }
.fluxo-previa .fluxo-quem { color: var(--tinta-suave); font-size: var(--t-menor); }
.fluxo-previa .fluxo-configuravel .fluxo-num { border-color: var(--marinho); color: var(--marinho); }
.fluxo-comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) {
  .fluxo-comparar { grid-template-columns: 1fr; }
}
.barra-logo .logo-gov, .rodape-discreto .logo-gov, .sobre-claro .logo-gov { color: var(--tinta-suave); }
.fluxo-previa .fluxo-etapa { padding: 0; }
.fluxo-previa .fluxo-etapa::after { content: none !important; }
.fluxo-previa .fluxo-nome { color: var(--tinta); }
.fluxo-previa .fluxo-quem { color: var(--tinta-suave); }
.fluxo-previa .fluxo-num { color: var(--tinta); background: var(--branco); }
.tabela th { hyphens: manual; }
@media (max-width: 900px) {
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto; z-index: 60; transform: translateX(-102%); visibility: hidden; }
  .lateral.aberta { transform: none; visibility: visible; }
  .lateral.lateral-animada { transition: transform .2s ease, visibility .2s; }
  .js .lateral { transition: none; }
  .js .lateral.lateral-animada { transition: transform .2s ease, visibility .2s; }
}
@media (prefers-reduced-motion: reduce) {
  .lateral.lateral-animada { transition: none !important; }
}
.so-estreito { display: none; }
@media (max-width: 640px) {
  .so-largo { display: none; }
  .so-estreito { display: inline; }
  .faixa-demo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-menor); padding: 0 8px; }
}
@media (min-width: 901px) {
  .lateral { gap: 1rem; padding-top: 1.1rem; height: 100vh; max-height: 100vh; }
  .lateral .fluxo { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .lateral .fluxo-etapa { padding-bottom: .5rem; }
  .lateral .fluxo-etapa:not(:last-child)::after { top: 24px; }
  .lateral .menu a { min-height: 40px; padding: .4rem .75rem; }
  .lateral-rodape { padding-top: .6rem; }
  .lateral-rodape a { min-height: 44px; }
}
@media (min-width: 901px) {
  .faixa-demo { min-height: 44px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 .3rem; }
  body:has(.faixa-demo) .lateral { height: calc(100vh - 44px); max-height: calc(100vh - 44px); }
}
@media (max-width: 640px) {
  .card-pagar small { display: block; }
  .card-pagar { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .lateral.lateral-animada, .js .lateral.lateral-animada { transition: transform .2s ease, visibility 0s linear .2s; }
  .lateral.lateral-animada.aberta, .js .lateral.lateral-animada.aberta { transition: transform .2s ease, visibility 0s; }
}
.contador-menu { margin-left: auto; background: var(--linha-forte); color: var(--tinta); border-radius: var(--raio); padding: 0 .55rem; font-size: var(--t-menor); font-weight: 600; line-height: 1.6; }
.lateral .menu-comunicacoes { margin-top: -.3rem; }
.abas-com { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.abas-com a { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .4rem .8rem; min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; font-weight: 600; color: var(--marinho); }
.abas-com a:hover { border-color: var(--marinho); }
.lista-com { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.lista-com > li, .com-item { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .7rem .9rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.com-item-texto { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.com-item-numero, .lista-com a { font-weight: 600; overflow-wrap: anywhere; }
.com-item-assunto, .lista-com-assunto { overflow-wrap: anywhere; }
.lista-com small, .com-item small { color: var(--tinta-suave); overflow-wrap: anywhere; }
.com-treino { border-left: 2px solid var(--linha-forte); }
.selo-acesso { display: inline-flex; align-items: center; gap: .25rem; color: var(--atencao); font-weight: 600; }
.tipos-escrever { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tipo-escrever { display: flex; flex-direction: column; gap: .3rem; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.1rem; text-decoration: none; color: var(--tinta); min-height: 100%; }
.tipo-escrever:hover { border-color: var(--marinho); }
.tipo-escrever-nome { color: var(--marinho); font-weight: 600; font-size: var(--t-titulo2); }
.tipo-escrever-explica { color: var(--tinta-suave); }
.redacao { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) {
  .redacao { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .redacao-previa { position: sticky; top: 1rem; }
}
.redacao-form textarea { width: 100%; font-family: inherit; }
.grade-checks { display: grid; gap: .2rem .8rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.lista-modelos { list-style: none; padding: 0; margin: .3rem 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.lista-modelos a { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem .8rem; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--branco); text-decoration: none; }
.rotulo { font-weight: 600; margin: 0 0 .3rem; }
.doc-folha { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0 0 1rem; color: var(--tinta); overflow-wrap: anywhere; font-size: var(--t-apoio); }
.doc-cabecalho { background: var(--tinta); color: var(--tinta); border-radius: var(--raio) var(--raio) 0 0; padding: .8rem 1.2rem; display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.doc-cabecalho p { margin: 0; }
.doc-prefeitura { font-weight: 600; }
.doc-setor { color: var(--tinta-suave); font-size: var(--t-menor); }
.doc-marca { font-weight: 600; white-space: nowrap; }
.doc-marca .logo-gov { color: var(--linha-forte); }
.doc-folha > p, .doc-corpo, .doc-assinaturas { margin-left: 1.2rem; margin-right: 1.2rem; }
.doc-titulo { font-weight: 600; font-size: var(--t-corpo); margin-top: 1rem; }
.doc-topo { margin: .2rem 1.2rem; }
.doc-vocativo { margin-top: 1rem; }
.doc-corpo p, .doc-corpo ul, .doc-corpo ol { margin: .6rem 0; }
.doc-fecho, .doc-local { margin-top: 1rem; }
.doc-assinaturas { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 1.4rem; }
.doc-assinatura { border-top: 1px solid var(--tinta); padding-top: .3rem; min-width: 200px; flex: 1 1 200px; }
.doc-assinatura p { margin: 0; }
.doc-ass-nome { font-weight: 600; }
.doc-ass-reg { color: var(--tinta-suave); font-size: var(--t-menor); }
.doc-rodape { border-top: 1px solid var(--linha); margin: 1.2rem 1.2rem 0; padding-top: .5rem; color: var(--tinta-suave); font-size: var(--t-menor); }
.painel-ciencia .ciencia-resumo { font-size: var(--t-corpo); margin: 0 0 .4rem; }
.barra-progresso { width: 100%; height: 14px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: var(--linha); overflow: hidden; }
.barra-progresso::-webkit-progress-bar { background: var(--linha); border-radius: 999px; }
.barra-progresso::-webkit-progress-value { background: var(--concluido); border-radius: 999px; }
.barra-progresso::-moz-progress-bar { background: var(--concluido); border-radius: 999px; }
.cadeia { margin: 0; padding-left: 1.4rem; }
.cadeia li { margin: .2rem 0; overflow-wrap: anywhere; }
.selos-com { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.lista-assinar { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.lista-assinar li { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: .6rem .8rem; }
.lista-assinar .checkbox { align-items: flex-start; }
.linha-campos select { max-width: 100%; }
.bloco-com-mesa .lista-com { margin-bottom: .6rem; }
.linha-etapas, .previa-fluxo { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.linha-etapas li, .pf-etapa { display: flex; gap: .6rem; align-items: flex-start; min-width: 0; }
.le-num, .pf-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--raio); border: 1px solid var(--linha-forte); background: var(--branco); font-weight: 600; font-size: var(--t-menor); }
.le-nome, .pf-texto { overflow-wrap: anywhere; min-width: 0; padding-top: .15rem; }
.pf-texto { display: flex; flex-direction: column; gap: .1rem; }
.pf-nome { font-weight: 600; }
.pf-quem { color: var(--tinta-suave); font-size: var(--t-menor); }
.pf-ramo { font-size: var(--t-menor); color: var(--marinho); display: inline-flex; gap: .3rem; align-items: center; }
.pf-ramo-erro { color: var(--atrasado); font-weight: 600; }
.pf-final .pf-num { border-color: var(--concluido); }
.editor-grade { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .editor-grade { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .editor-previa { position: sticky; top: 1rem; }
}
.editor-previa { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem; min-width: 0; }
.cartao-editor { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); margin: 0 0 .5rem; }
.cartao-editor > summary { min-height: 44px; padding: .6rem .8rem; cursor: pointer; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; overflow-wrap: anywhere; }
.cartao-editor > form { padding: 0 .8rem .8rem; }
.cartao-novo > summary { color: var(--marinho); font-weight: 600; }
.lista-erros { list-style: none; padding: 0; margin: .4rem 0; display: flex; flex-direction: column; gap: .3rem; color: var(--atrasado); }
.lista-erros li { display: flex; gap: .4rem; align-items: flex-start; overflow-wrap: anywhere; }
.linha-campos-2 { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.barras { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-direction: column; gap: .5rem; }
.barras li { display: grid; gap: .2rem .8rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .barras li { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; align-items: center; }
}
.barra-rotulo { overflow-wrap: anywhere; }
.barra-valor { color: var(--tinta-suave); font-size: var(--t-menor); }
.barra-atraso::-webkit-progress-value { background: var(--atrasado); }
.barra-atraso::-moz-progress-bar { background: var(--atrasado); }
.campo-erro input, .campo-erro select, .campo-erro textarea { border-color: var(--atrasado); }
.etapas-processo h2 small { font-weight: 400; }
.opcao-assinar { background: var(--branco); border: 1px solid var(--linha); border-left: 2px solid var(--marinho); border-radius: var(--raio); padding: .9rem 1rem; margin: 0 0 1rem; }
.opcao-assinar h2, .opcao-assinar h3 { margin: 0 0 .3rem; font-size: var(--t-corpo); }
.opcao-escolhida { border-left-color: var(--linha-forte); }
.faixa-cert-teste { display: block; background: var(--linha-forte); color: var(--tinta); font-weight: 600; text-align: center; padding: .3rem .8rem; border-radius: var(--raio); margin: .4rem 0; letter-spacing: .02em; }
.faixa-cert-teste-linha { display: inline-block; padding: 0 .5rem; margin: 0 0 0 .3rem; font-size: var(--t-menor); }
.caixa-instalar { background: transparent; color: var(--atencao); border: 1px solid var(--atencao); border-radius: var(--raio); padding: .7rem .9rem; margin: .6rem 0; }
.caixa-instalar a { color: var(--marinho-escuro); }
.caixa-instalar ol { margin: .4rem 0 .4rem 1.2rem; padding: 0; }
.webpki-estado { font-weight: 600; }
.lista-assinaturas { list-style: none; margin: 0; padding: 0; }
.lista-assinaturas li { border-top: 1px solid var(--linha); padding: .6rem 0; }
.lista-assinaturas li:first-child { border-top: 0; }
.explica-nivel summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--marinho); }
.resultados-busca { list-style: none; margin: 0; padding: 0; }
.resultados-busca .cartao { display: block; }
.resultados-busca .rotulo-pequeno, .resultados-busca .cartao-numero { margin: 0 0 .2rem; }
.trecho { margin: .3rem 0; }
.trecho mark { background: transparent; color: var(--tinta); font-weight: 600; padding: 0 .1rem; border-bottom: 1px solid var(--linha-forte); }
.filtros-busca select, .filtros-busca input { max-width: 100%; }
.assinatura-icp-lista { margin: .3rem 0 0; padding-left: 1.1rem; }
.assinatura-icp-lista li { margin: .3rem 0; }
.explica-nivel > div { margin: .8rem 0; }
.doctus-codigo { background: transparent; color: var(--tinta); border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: .6rem .8rem; font-size: var(--t-corpo); margin: .5rem 0; }
.doctus-codigo strong { font-size: var(--t-titulo2); letter-spacing: .08em; white-space: nowrap; }

/* ---------------------------------------------------------------------
   3. ESTRUTURA
   --------------------------------------------------------------------- */
/* Faixa da demonstração: uma linha de texto discreta, sem cor */
.faixa-demo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--e2);
  min-height: 2rem; padding: 0 var(--e4); background: var(--fundo-suave); border-bottom: var(--fio);
  color: var(--tinta-suave); font-size: var(--t-menor); font-weight: 400; letter-spacing: 0; text-align: center;
}
.faixa-demo a { color: var(--tinta); font-weight: 400; display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--e1); }
.faixa-data { background: none; color: var(--tinta); padding: 0; border-radius: 0; }
.so-estreito { display: none; }

/* Logo em texto: "Doctus" forte, "Gov" leve. Sem cor. */
.logo { display: inline-flex; align-items: baseline; gap: .25em; font-family: var(--fonte); font-size: var(--t-titulo2); line-height: 1;
  letter-spacing: -.02em; text-decoration: none; white-space: nowrap; color: var(--tinta); }
.logo-doctus, .logo:hover .logo-doctus, .sobre-claro .logo-doctus, .barra-logo .logo-doctus { color: var(--tinta); font-weight: 600; }
.logo-gov, .barra-logo .logo-gov, .rodape-discreto .logo-gov, .sobre-claro .logo-gov { color: var(--tinta-suave); font-weight: 400; }
.logo-pequeno { font-size: var(--t-apoio); }
a.logo { align-items: center; min-height: var(--alvo); }
a.logo:focus-visible { outline-color: var(--marinho); }
.logo-grande { font-size: var(--t-titulo1); margin: 0; }

.app { display: grid; grid-template-columns: var(--larg-lateral) minmax(0, 1fr); min-height: 100vh; }
.principal { display: flex; flex-direction: column; min-width: 0; }
.conteudo { width: 100%; max-width: 60rem; margin: 0 auto; padding: var(--e6) var(--e4) var(--e8); }
.principal > .conteudo { flex: 1; max-width: 70rem; margin: 0; padding: var(--e6) var(--e7) var(--e8); }
.coluna-estreita { max-width: 36rem; margin: 0; }

/* Menu lateral: papel branco, um fio à direita; o item ativo é a única coisa em marinho */
.lateral {
  z-index: 19; position: sticky; top: 0; height: 100vh; max-height: 100vh; overflow-y: auto; background: var(--branco); color: var(--tinta);
  display: flex; flex-direction: column; gap: var(--e5); padding: var(--e5) var(--e4) var(--e4);
}
.principal { border-left: var(--fio); }
.lateral-marca { display: flex; flex-direction: column; gap: var(--e1); padding: 0 var(--e3); min-height: 2.5rem; justify-content: center; }
.lateral-marca .logo { font-size: var(--t-titulo2); }
.lateral-prefeitura { display: none; }
.lateral-titulo { font-size: var(--t-menor); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tinta-suave);
  margin: 0 0 var(--e1); padding: 0 var(--e3); }
.menu, .lateral .menu { background: none; border: 0; }
.menu ul, .lateral .menu ul { list-style: none; margin: 0; padding: 0; max-width: none; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; }
.menu li, .lateral .menu li { display: block; }
.menu a, .lateral .menu a {
  display: flex; align-items: center; gap: var(--e2); min-height: 2.5rem; padding: var(--e2) var(--e3); border-radius: 0;
  border-left: 2px solid transparent; color: var(--tinta); font-size: var(--t-apoio); font-weight: 400; text-decoration: none;
  white-space: normal; box-shadow: none; background: none;
}
.menu a:hover, .lateral .menu a:hover { background: var(--fundo-suave); text-decoration: none; color: var(--tinta); }
.menu a[aria-current="page"], .lateral .menu a[aria-current="page"] {
  background: none; border-left-color: var(--marinho); color: var(--marinho); font-weight: 600; box-shadow: none; text-decoration: none;
}
.lateral .menu-comunicacoes { margin-top: 0; }
.contador-menu { margin-left: auto; background: none; color: inherit; border-radius: 0; padding: 0; font-size: var(--t-apoio);
  font-weight: 600; line-height: inherit; font-variant-numeric: tabular-nums; }

/* Fluxo do pagamento: ajuda sob demanda (recolhido) */
.lateral .fluxo { flex: 0 0 auto; overflow: visible; }
.fluxo-recolhe > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  min-height: 2.5rem; padding: var(--e2) var(--e3); color: var(--tinta-suave); font-size: var(--t-menor); }
.fluxo-recolhe > summary::-webkit-details-marker { display: none; }
.fluxo-recolhe > summary::after { content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-right: .25rem; flex: none; }
.fluxo-recolhe[open] > summary::after { transform: rotate(-135deg); margin-top: .3rem; }
.fluxo-recolhe > summary:hover { color: var(--tinta); }
.fluxo ol { list-style: none; margin: var(--e1) 0 0; padding: 0 var(--e3); counter-reset: none; }
.fluxo-nota { font-size: var(--t-menor); color: var(--tinta-suave); margin: 0; padding: 0 var(--e3); }
.fluxo-etapa, .lateral .fluxo-etapa { display: flex; gap: var(--e2); align-items: baseline; padding: 0 0 var(--e2); position: relative; }
.fluxo-etapa:not(:last-child)::after, .lateral .fluxo-etapa:not(:last-child)::after { content: none; }
.fluxo-num { flex: 0 0 1.25rem; height: auto; border: 0; border-radius: 0; background: none; color: var(--tinta-suave);
  font-size: var(--t-menor); font-weight: 400; display: inline; font-variant-numeric: tabular-nums; }
.fluxo-num::after { content: "."; }
.fluxo-texto { display: flex; flex-direction: column; line-height: 1.3; }
.fluxo-nome { font-size: var(--t-menor); color: var(--tinta); }
.fluxo-quem { font-size: var(--t-menor); color: var(--tinta-suave); }
.fluxo-minha .fluxo-num { background: none; border: 0; color: var(--marinho); font-weight: 600; }
.fluxo-minha .fluxo-nome { font-weight: 600; color: var(--marinho); }
.fluxo-minha .fluxo-quem strong { color: var(--marinho); font-weight: 600; }

.lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 0; padding: var(--e3) 0 0; border-top: var(--fio); }
.lateral-rodape a { display: flex; align-items: center; min-height: 2.25rem; padding: 0 var(--e3); color: var(--tinta-suave);
  font-size: var(--t-menor); text-decoration: none; }
.lateral-rodape a:hover { color: var(--tinta); text-decoration: underline; }

/* Barra do topo: o "timbre" (nome da prefeitura) à esquerda, a pessoa à direita */
.barra-topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--e4); min-height: 3.5rem;
  padding: var(--e2) var(--e7); background: var(--branco); border-bottom: var(--fio); }
.barra-prefeitura { color: var(--tinta-suave); font-size: var(--t-menor); min-width: 0; overflow-wrap: break-word; }
.barra-logo { display: none; white-space: nowrap; flex-shrink: 0; }
.barra-topo .menu-usuario { margin-left: auto; }
.botao-lateral { display: none; align-items: center; justify-content: center; gap: var(--e2); min-width: var(--alvo); min-height: var(--alvo);
  padding: 0 var(--e3); border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--branco); color: var(--tinta);
  font: inherit; font-size: var(--t-apoio); font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; overflow-wrap: normal; }
.icone-menu, .icone-menu::before, .icone-menu::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 0; position: relative; }
.icone-menu::before, .icone-menu::after { content: ""; position: absolute; left: 0; }
.icone-menu::before { top: -6px; } .icone-menu::after { top: 6px; }
.lateral-fundo { position: fixed; inset: 0; background: var(--veu); z-index: 55; }

/* Menu da pessoa (nome + perfil): texto simples que abre um painel */
.menu-usuario { position: relative; flex-shrink: 0; }
.menu-usuario > summary, .barra-topo .menu-usuario > summary {
  list-style: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; position: relative;
  min-height: var(--alvo); padding: var(--e1) 1.75rem var(--e1) var(--e2); border: 0; border-radius: var(--raio); background: none;
  color: var(--tinta); cursor: pointer; line-height: 1.25;
}
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario > summary:hover, .menu-usuario[open] > summary { background: var(--fundo-suave); }
.mu-nome { font-weight: 600; font-size: var(--t-apoio); }
.mu-perfil, .barra-topo .mu-perfil { font-size: var(--t-menor); color: var(--tinta-suave); }
.mu-seta { position: absolute; right: var(--e2); top: 50%; width: .45rem; height: .45rem; border-right: 1.5px solid var(--tinta-suave);
  border-bottom: 1.5px solid var(--tinta-suave); transform: translateY(-70%) rotate(45deg); font-size: 0; }
.mu-painel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: min(20rem, calc(100vw - 2rem));
  background: var(--branco); color: var(--tinta); border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: var(--e4);
  display: flex; flex-direction: column; gap: var(--e2); box-shadow: 0 8px 24px var(--sombra); }
.mu-painel form { margin: 0; }
.mu-quem { margin: 0 0 var(--e2); font-size: var(--t-apoio); }
.mu-titulo { margin: var(--e2) 0 0; font-weight: 400; font-size: var(--t-menor); color: var(--tinta-suave); }

/* Páginas públicas (sem menu lateral): cabeçalho e rodapé em papel branco */
.topo { background: var(--branco); color: var(--tinta); border-bottom: var(--fio); }
.topo-linha { max-width: 60rem; margin: 0 auto; padding: var(--e2) var(--e4); min-height: 3.5rem; display: flex; flex-wrap: nowrap;
  gap: var(--e2) var(--e5); align-items: center; justify-content: space-between; }
.topo-marca { display: flex; align-items: baseline; gap: var(--e1) var(--e4); flex-wrap: wrap; min-width: 0; }
.topo-prefeitura { display: block; color: var(--tinta-suave); font-weight: 400; font-size: var(--t-menor); padding: 0; border: 0; min-width: 0; }
.rodape { background: var(--branco); color: var(--tinta-suave); border-top: var(--fio); margin-top: 0; padding: var(--e5) 0; text-align: left; font-size: var(--t-menor); }
.rodape-linha { max-width: 60rem; margin: 0 auto; padding: 0 var(--e4); display: flex; flex-wrap: wrap; gap: var(--e2) var(--e6); align-items: baseline; justify-content: space-between; }
.rodape-marca { display: flex; flex-direction: row; align-items: baseline; gap: var(--e3); }
.rodape-slogan { font-size: var(--t-menor); color: var(--tinta-suave); }
.rodape-info { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e5); align-items: baseline; }
.rodape-info p, .rodape p { margin: 0; }
.rodape a { color: var(--tinta); display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 .15rem; }
.rodape a:hover { color: var(--marinho-escuro); }
.rodape-discreto { display: flex; gap: var(--e3); align-items: baseline; flex-wrap: wrap; padding: var(--e4) var(--e7) var(--e5);
  border-top: var(--fio); color: var(--tinta-suave); font-size: var(--t-menor); }

/* Menu recolhido no computador: o botão "Menu" da barra esconde a lateral e o conteúdo ocupa a largura toda.
   A escolha fica guardada no navegador (static/js/cedo.js aplica a classe antes do primeiro paint). */
@media (min-width: 960px) {
  .botao-lateral { display: inline-flex; margin-left: calc(-1 * var(--e3)); }
  .lateral-recolhida .app { grid-template-columns: minmax(0, 1fr); }
  .lateral-recolhida .lateral { display: none; }
  .lateral-recolhida .principal { border-left: 0; }
  .lateral-recolhida .barra-logo { display: inline-flex; font-size: var(--t-corpo); }
  .lateral-recolhida .principal > .conteudo { margin: 0 auto; }
}

/* I5-1 / M5-1: abaixo de 960px o menu lateral vira gaveta, fechada já no primeiro paint (sem depender da
   classe .js) e fora do Tab (visibility: hidden). Sem JavaScript, static/css/sem-js.css (via <noscript>)
   mostra a lateral no fluxo da página. */
@media (max-width: 959px) {
  .app { display: block; }
  .principal { border-left: 0; }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: min(18.5rem, 86vw); height: auto; max-height: none; z-index: 60;
    transform: translateX(-102%); visibility: hidden; border-right: 1px solid var(--linha-forte); }
  .lateral.aberta { transform: none; visibility: visible; box-shadow: 0 0 32px var(--sombra); }
  .lateral.lateral-animada { transition: transform .2s ease, visibility 0s linear .2s; }
  .lateral.lateral-animada.aberta { transition: transform .2s ease, visibility 0s; }
  .lateral .menu a { min-height: var(--alvo); }
  .lateral-rodape a, .fluxo-recolhe > summary, .faixa-demo a, a.ip-numero { min-height: var(--alvo); }
  .faixa-demo { min-height: var(--alvo); }
  .botao-lateral { display: inline-flex; }
  .barra-logo { display: inline-flex; font-size: var(--t-corpo); }
  .barra-prefeitura { display: none; }
  .barra-topo { padding: var(--e2) var(--e4); gap: var(--e3); }
  .principal > .conteudo { padding: var(--e5) var(--e4) var(--e7); }
  .rodape-discreto { padding: var(--e4) var(--e4) var(--e5); }
}
/* Tela baixa (notebook 1366×768 com zoom de 125% = 1093×614): a lateral cabe sem rolar */
@media (min-width: 960px) and (max-height: 700px) {
  .lateral { gap: var(--e3); padding-top: var(--e4); padding-bottom: var(--e2); }
  .menu a, .lateral .menu a { min-height: 2.25rem; padding-top: var(--e1); padding-bottom: var(--e1); }
  .lateral-rodape { padding-top: var(--e2); }
  .lateral-rodape a { min-height: 1.75rem; }
  .fluxo-recolhe > summary { min-height: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .lateral.lateral-animada, .lateral.lateral-animada.aberta { transition: none !important; } }
@media (max-width: 640px) {
  .so-largo { display: none; }
  .so-estreito { display: inline; }
  .faixa-demo { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; min-height: var(--alvo); padding: 0 var(--e2); }
  .faixa-demo a { min-height: var(--alvo); }
  .topo-marca { flex-direction: column; gap: 0; }
  .rodape-linha { flex-direction: column; }
}
@media (max-width: 480px) {
  .botao-lateral { padding: 0 var(--e3); }
  .botao-lateral .texto-menu { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .barra-topo .menu-usuario { min-width: 0; }
  .barra-topo .mu-perfil, .topo .mu-perfil { display: none; }
}

/* ---------------------------------------------------------------------
   4. COMPONENTES
   --------------------------------------------------------------------- */
/* Botões: um principal por tela (marinho). O resto é contorno ou link. */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: var(--alvo); padding: var(--e2) 1.25rem;
  border: 1px solid transparent; border-radius: var(--raio); box-shadow: none; font: inherit; font-size: var(--t-corpo); font-weight: 600;
  line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer;
}
.botao-principal, .botao-assinar { background: var(--marinho); border-color: var(--marinho); color: var(--branco); font-size: var(--t-corpo); }
.botao-principal:hover, .botao-assinar:hover { background: var(--marinho-escuro); border-color: var(--marinho-escuro); color: var(--branco); }
.botao-secundario, .botao-pequeno { background: var(--branco); border-color: var(--linha-forte); color: var(--tinta); }
.botao-secundario:hover, .botao-pequeno:hover { background: var(--fundo-suave); border-color: var(--tinta); color: var(--tinta); }
.botao-pequeno { min-height: var(--alvo); padding: var(--e1) var(--e4); font-size: var(--t-apoio); }
.botao-perigo { background: var(--branco); border-color: var(--atrasado); color: var(--atrasado); }
.botao-perigo:hover { background: var(--atrasado); color: var(--branco); }
.botao-largo { width: 100%; }
.botao:disabled, .botao[aria-disabled="true"] { background: var(--fundo-suave); border-color: var(--linha); color: var(--tinta-suave); cursor: not-allowed; }
.botao-link { background: none; border: 0; padding: 0; min-height: var(--alvo); font: inherit; color: var(--marinho); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.botao-link:hover { color: var(--marinho-escuro); text-decoration-thickness: 2px; }
.link-acao { display: inline-flex; align-items: center; min-height: var(--alvo); margin: 0 var(--e4) 0 0; line-height: 1.3; }
@media (max-width: 640px) { .botao-principal { width: 100%; } }

/* Campos */
.campo { margin: 0 0 var(--e5); border: 0; padding: 0; min-width: 0; }
.campo label, .campo legend { display: block; font-weight: 600; margin-bottom: var(--e1); padding: 0; }
.dica { color: var(--tinta-suave); font-size: var(--t-apoio); margin: 0 0 var(--e2); }
input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=number], input[type=tel],
input[type=date], input[type=file], select, textarea {
  width: 100%; min-height: var(--alvo); padding: var(--e2) var(--e3); font: inherit; font-size: var(--t-corpo); color: var(--tinta);
  background: var(--branco); border: 1px solid var(--linha-forte); border-radius: var(--raio);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--marinho); outline-offset: 0; border-color: var(--marinho); border-radius: var(--raio); }
::placeholder { color: var(--tinta-suave); opacity: 1; }
textarea { min-height: 6rem; }
input[type=radio], input[type=checkbox] { width: 1.25rem; height: 1.25rem; accent-color: var(--marinho); flex: none; }
.checkbox { display: flex !important; gap: var(--e3); align-items: center; min-height: var(--alvo); padding: 0; font-weight: 400 !important; cursor: pointer; border-radius: 0; }
.erro-campo { color: var(--atrasado); font-weight: 600; font-size: var(--t-apoio); margin: 0 0 var(--e1); display: flex; gap: var(--e2); align-items: baseline; }
.campo-erro input, .campo-erro select, .campo-erro textarea { border-color: var(--atrasado); }
.formulario { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 var(--e5); max-width: 40rem; }
.opcao-grande, .opcao-triagem { border: 1px solid var(--linha-forte); border-radius: var(--raio); font-weight: 400 !important; }
.opcao-grande:has(input:checked), .opcao-ok:has(input:checked) { border-color: var(--marinho); background: var(--fundo-suave); box-shadow: inset 0 0 0 1px var(--marinho); }
.opcao-falta:has(input:checked), .opcao-vencida:has(input:checked) { border-color: var(--atrasado); box-shadow: inset 0 0 0 1px var(--atrasado); background: none; }

/* Ícones: 16px, traço simples, cor do texto */
.ic { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -.12em; }

/* Status: etiqueta de estado. Fundo claro tingido, texto escuro, marcador de forma própria; raio pequeno, sem sombra.
   .sem-* são os nomes antigos (telas ainda não migradas) apontando para o mesmo desenho. */
.status, .sem { display: inline-flex; align-items: baseline; gap: .4em; max-width: 100%; padding: .1875rem var(--e2); border: 0; border-radius: 3px;
  background: var(--neutro-fundo); color: var(--neutro-texto); font-size: var(--t-menor); font-weight: 600; line-height: 1.35; text-align: left; }
.status .ic, .sem .ic { width: .625em; height: .625em; align-self: center; flex: none; color: var(--linha-forte); }
.status-ok, .sem-verde, .sem-concluido { background: var(--ok-fundo); color: var(--ok-texto); }
.status-ok .ic, .sem-verde .ic, .sem-concluido .ic { color: var(--concluido); }
.status-atencao, .sem-amarelo, .sem-pausado, .sem-fornecedor { background: var(--atencao-fundo); color: var(--atencao-texto); }
.status-atencao .ic, .sem-amarelo .ic, .sem-pausado .ic, .sem-fornecedor .ic { color: var(--atencao-marca); }
.status-problema, .sem-vermelho { background: var(--problema-fundo); color: var(--problema-texto); }
.status-problema .ic, .sem-vermelho .ic { color: var(--atrasado); }
.status-neutro, .sem-tramitacao, .em-tramitacao { background: var(--neutro-fundo); color: var(--neutro-texto); }
.status a, .sem a { color: inherit; }
.texto-erro { color: var(--atrasado); }
.status-detalhe { display: inline-block; color: var(--tinta-suave); font-size: var(--t-menor); font-weight: 400; }
.ip-id .status-detalhe { display: block; }
.resumo-texto { color: var(--tinta-suave); }
.status { white-space: normal; }

/* Cabeçalho de página: caminho, título, uma linha de contexto */
.migalha { font-size: var(--t-menor); color: var(--tinta-suave); margin: 0 0 var(--e2); }
.migalha a { color: var(--tinta-suave); display: inline; min-height: 0; padding: 0; }
.h1-compacto { font-size: var(--t-titulo1); margin: 0 0 var(--e1); }
.subtitulo, .subtitulo-inline { font-size: var(--t-apoio); font-weight: 400; color: var(--tinta-suave); letter-spacing: 0; }
.cabecalho-pagina { margin: 0 0 var(--e5); }
.cabecalho-pagina h1 { margin: 0 0 var(--e1); }
.cabecalho-pagina .contexto { margin: 0; color: var(--tinta-suave); font-size: var(--t-apoio); }
.cabecalho-pagina .contexto strong { color: var(--tinta); }

/* "O que fazer agora": o próximo passo. Uma frase + um botão, sob a linha do timbre. */
.agora {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e6); background: none; box-shadow: none; border: 0;
  border-top: var(--timbre); border-bottom: var(--fio); border-radius: 0; padding: var(--e4) 0 var(--e5); margin: 0 0 var(--e6);
}
.agora-titulo { flex: 0 0 100%; margin: 0; font-size: var(--t-menor); font-weight: 400; color: var(--tinta-suave); letter-spacing: 0; }
.agora-titulo .ic { display: none; }
.agora-frase { flex: 1 1 24rem; margin: 0; font-size: var(--t-titulo2); font-weight: 600; line-height: 1.35; max-width: 44rem; }
.agora-frase strong { font-weight: 600; }
.agora > form { margin: 0; }
.agora-fornecedor .agora-titulo { color: var(--tinta-suave); }
@media (max-width: 640px) { .agora { padding-bottom: var(--e4); } .agora-frase { font-size: var(--t-corpo); flex-basis: 100%; } .agora > form, .agora > .botao { width: 100%; } .agora > form .botao { width: 100%; } }

/* Aviso: texto com um fio à esquerda. Nunca caixa colorida. A cor do fio é o status. */
.aviso, .mensagem, .aviso-etapa, .caixa-pendencia, .dica-primeira, .caixa-instalar, .caixa-codigo-demo, .faixa-balcao, .conta-liquido,
.doctus-codigo, .resultado, .cartao-quebra, .caixa-demo, .cartao-situacao, .situacao, .previa-fornecedor, .evento-interno, .evento-publico,
.aviso-mesa, .treino-fim, .alerta-cnd, .previa-caixa, .destaque, .comprovante {
  background: none; box-shadow: none; border: 0; border-left: 2px solid var(--linha-forte); border-radius: 0;
  padding: var(--e1) 0 var(--e1) var(--e4); margin: 0 0 var(--e5); color: var(--tinta); font-weight: 400;
}
.aviso > :last-child, .mensagem > :last-child, .aviso-etapa > :last-child, .caixa-pendencia > :last-child, .dica-primeira > :last-child { margin-bottom: 0; }
.mensagem { display: flex; gap: var(--e3); align-items: baseline; }
.mensagem > .ic { width: .7em; height: .7em; align-self: center; color: var(--linha-forte); }
.mensagem-erro, .resultado-erro, .aviso-erro { border-left-color: var(--atrasado); color: var(--tinta); font-weight: 400; }
.mensagem-erro > .ic { color: var(--atrasado); }
.mensagem-sucesso, .resultado-ok, .aviso-ok, .treino-fim, .conta-liquido, .comprovante { border-left-color: var(--concluido); color: var(--tinta); }
.mensagem-sucesso > .ic { color: var(--concluido); }
.mensagem-aviso > .ic { color: var(--atencao-marca); }
.erro-campo .ic { width: .7em; height: .7em; align-self: center; flex: none; }
.resultado-atencao .resultado-titulo .ic { color: var(--atencao-marca); }
.resultado-ok .resultado-titulo .ic { color: var(--concluido); }
.resultado-erro .resultado-titulo .ic { color: var(--atrasado); }
.resultado-titulo { color: var(--tinta); }
.mensagem-aviso, .resultado-atencao, .aviso-etapa, .caixa-pendencia, .caixa-instalar, .faixa-balcao, .cartao-quebra, .alerta-cnd, .aviso-atencao { border-left-color: var(--atencao); color: var(--tinta); }
.caixa-pendencia h2, .pendencia-motivo, .pendencia-fornecedor { color: var(--tinta); font-size: var(--t-corpo); }
.caixa-pendencia h2 .ic { color: var(--atencao); }
.aviso-etapa a, .caixa-instalar a { color: var(--marinho); font-weight: 400; }
.dica-primeira { color: var(--tinta-suave); font-size: var(--t-apoio); }
.dica-primeira { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); }
.dica-primeira p { margin: 0; flex: 1 1 24rem; }
.dica-primeira form { margin: 0; }
.aviso-mesa { align-items: center; flex-wrap: wrap; }
.aviso-mesa p { margin: 0; flex: 1 1 20rem; }
.aviso-mesa form { margin: 0; }
.aviso-sessao { position: sticky; top: 0; z-index: 25; background: var(--branco); color: var(--tinta); border-bottom: 2px solid var(--atencao);
  padding: var(--e2) var(--e4); text-align: center; font-weight: 600; }
.faixa-treino { background: var(--fundo-suave); color: var(--tinta); border-bottom: 2px solid var(--atencao); font-weight: 400;
  font-size: var(--t-apoio); text-align: center; padding: var(--e2) var(--e4); }
.faixa-treino .link-claro, .faixa-treino a { color: var(--marinho); display: inline; min-height: 0; padding: 0; }
.faixa-cert-teste { background: none; color: var(--atencao); border: 0; border-radius: 0; padding: 0; text-align: left; letter-spacing: 0; font-weight: 600; }

/* "?" ao lado de um termo: ajuda sob demanda */
.ajuda-termo { display: inline-block; position: relative; vertical-align: middle; font-weight: 400; letter-spacing: 0; }
.ajuda-termo summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: var(--alvo); height: var(--alvo);
  margin: -12px -10px; cursor: pointer; user-select: none; border-radius: 50%; }
.ajuda-termo summary::-webkit-details-marker { display: none; }
.ajuda-bolinha, .ajuda-termo[open] .ajuda-bolinha { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; background: var(--branco); border: 1px solid var(--linha-forte); color: var(--tinta-suave); font-size: var(--t-menor); font-weight: 600; line-height: 1; }
.ajuda-termo summary:hover .ajuda-bolinha, .ajuda-termo[open] .ajuda-bolinha { border-color: var(--marinho); color: var(--marinho); }
.ajuda-texto { display: block; position: absolute; z-index: 15; left: 0; top: 2rem; width: min(20rem, 80vw); background: var(--branco); color: var(--tinta);
  border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: var(--e3) var(--e4); font-size: var(--t-apoio); font-weight: 400;
  line-height: 1.5; text-align: left; white-space: normal; box-shadow: 0 8px 24px var(--sombra); }
@media (max-width: 640px) { .ajuda-texto { position: fixed; left: 1rem; right: 1rem; top: auto; bottom: 1rem; width: auto; } }

/* Barra de proporção (painéis): largura por classe larg-0 … larg-100, de 5 em 5 (a CSP não aceita style=). */
.barra-trilho { display: block; background: var(--fundo-suave); height: .5rem; overflow: hidden; }
.barra { display: block; height: 100%; min-width: 2px; background: var(--tinta-suave); }
.larg-0 { width: 0%; }
.larg-5 { width: 5%; }
.larg-10 { width: 10%; }
.larg-15 { width: 15%; }
.larg-20 { width: 20%; }
.larg-25 { width: 25%; }
.larg-30 { width: 30%; }
.larg-35 { width: 35%; }
.larg-40 { width: 40%; }
.larg-45 { width: 45%; }
.larg-50 { width: 50%; }
.larg-55 { width: 55%; }
.larg-60 { width: 60%; }
.larg-65 { width: 65%; }
.larg-70 { width: 70%; }
.larg-75 { width: 75%; }
.larg-80 { width: 80%; }
.larg-85 { width: 85%; }
.larg-90 { width: 90%; }
.larg-95 { width: 95%; }
.larg-100 { width: 100%; }

/* Seções: um fio em cima, título, conteúdo. Sem cartão, sem sombra. */
.secao, .bloco, .bloco-mesa, .linha-do-tempo, .com-quem, .documentos, .visualizacoes, .cabecalho-processo, .situacao-posse, .etapas,
.resumo-processo, .lista-integridade, .visualizador {
  background: none; box-shadow: none; border: 0; border-top: var(--fio); border-radius: 0; padding: var(--e5) 0 0; margin: 0 0 var(--e6);
}
.secao > h2, .bloco > h2, .bloco-mesa > h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e2); border: 0; padding: 0; margin: 0 0 var(--e3); }
.contador { background: none; color: var(--tinta-suave); border-radius: 0; padding: 0; font-size: inherit; font-weight: 400; font-variant-numeric: tabular-nums; }
.explica { color: var(--tinta-suave); font-size: var(--t-apoio); margin: 0 0 var(--e4); }
.vazio, .vazio-positivo { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 var(--e2); color: var(--tinta-suave); font-weight: 400; font-size: var(--t-apoio); }
.vazio-positivo .ic { color: var(--concluido); width: .8em; height: .8em; }
.rotulo-pequeno { font-size: var(--t-menor); color: var(--tinta-suave); }
.detalhe > summary, .anexar summary, .explica-nivel summary, .faq details summary {
  cursor: pointer; color: var(--marinho); font-weight: 400; min-height: var(--alvo); display: flex; align-items: center; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px; }

main details > summary { cursor: pointer; }
@media (max-width: 959px) { main details:not([class]) > summary, main details > summary:not([class]) { padding-block: .6rem; } }

/* Ficha: pares rótulo/valor, como num formulário oficial */
.ficha, .dados-processo, .cartao-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--e4) var(--e6); margin: 0 0 var(--e4); }
.ficha dt, .dados-processo dt, .cartao-dados dt, .sp-rotulo { font-size: var(--t-menor); font-weight: 400; color: var(--tinta-suave); margin: 0; }
.ficha dd, .dados-processo dd, .cartao-dados dd { margin: 0; }
.ficha-linhas { display: block; margin: 0; }
.ficha-linhas > div { display: grid; grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr); gap: var(--e1) var(--e4); padding: var(--e2) 0; border-bottom: var(--fio); }
.ficha-linhas > div:last-child { border-bottom: 0; }
.ficha-linhas dt { color: var(--tinta-suave); font-size: var(--t-apoio); }
.valor { font-weight: 600; font-size: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
.valor-grande { font-size: var(--t-titulo2); }

/* Tabela: fios horizontais, cabeçalho em texto de apoio. Abaixo de 960 px vira lista (classe tabela-cartoes + data-rotulo).
   A última coluna, quando é a da ação, alinha à direita. */
.tabela-rolagem { overflow-x: auto; background: none; border-radius: 0; box-shadow: none; margin: 0 0 var(--e5); }
.tabela, .tabela-impressao { width: 100%; border-collapse: collapse; font-size: var(--t-apoio); }
.tabela caption { text-align: left; font-weight: 600; font-size: var(--t-corpo); padding: 0 0 var(--e2); }
.tabela th, .tabela td { text-align: left; padding: var(--e3) var(--e4) var(--e3) 0; border: 0; border-bottom: var(--fio); vertical-align: top;
  overflow-wrap: normal; word-break: normal; }
.tabela td { overflow-wrap: anywhere; }
.tabela th { background: none; font-size: var(--t-menor); font-weight: 400; color: var(--tinta-suave); border-bottom: 1px solid var(--tinta); }
.tabela tbody tr:hover { background: var(--fundo-suave); }
.tabela th:last-child, .tabela td:last-child { padding-right: 0; }
.tabela td[data-rotulo="Ação"], .tabela th.col-acao { text-align: right; }
.tabela .botao { white-space: nowrap; padding-left: var(--e3); padding-right: var(--e3); }
.tabela th, .tabela td { padding-right: var(--e3); }
@media (min-width: 1200px) { .tabela td[data-rotulo="Situação"] { min-width: 13rem; } }
.tabela td[data-rotulo="Ação"] .checkbox { justify-content: flex-end; }
.linha-erro { background: none; box-shadow: inset 2px 0 0 var(--atrasado); }
.link-tabela { display: inline-flex; align-items: center; min-height: var(--alvo); }
.tabela select, .tabela input { min-width: 0; max-width: 100%; }
@media (max-width: 959px) {
  .tabela-cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes tr, .tabela-cartoes td { display: block; width: 100%; }
  .tabela-cartoes caption { display: block; }
  .tabela-cartoes tr { border: 0; border-top: var(--fio); padding: var(--e3) 0; }
  .tabela-cartoes tbody tr:hover { background: none; }
  .tabela-cartoes td { border: 0; padding: var(--e1) 0 var(--e1) 40%; position: relative; min-height: 1.75rem; white-space: normal; }
  .tabela-cartoes td::before { content: attr(data-rotulo); position: absolute; left: 0; width: 37%; font-weight: 400; font-size: var(--t-menor); color: var(--tinta-suave); }
  .tabela-cartoes tbody th { display: block; width: 100%; border: 0; padding: 0 0 var(--e1); white-space: normal; font-size: var(--t-apoio); font-weight: 600; color: var(--tinta); }
  .tabela-cartoes td:not([data-rotulo]) { padding-left: 0; }
  .tabela-cartoes td[data-rotulo="Ação"] { text-align: left; }
  .tabela-cartoes td[data-rotulo="Ação"] .checkbox { justify-content: flex-start; }
  .tabela-cartoes td:not([data-rotulo])::before { content: none; }
  .tabela-cartoes .botao { width: 100%; }
  .tabela-rolagem { overflow-x: visible; }
}
/* Tabela larga (fila de pagamento): vira lista já abaixo de 1200 px, para não espremer as colunas */
@media (max-width: 1199px) {
  .tabela-larga thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-larga, .tabela-larga tbody, .tabela-larga tr, .tabela-larga td { display: block; width: 100%; }
  .tabela-larga caption { display: block; }
  .tabela-larga tr { border: 0; border-top: var(--fio); padding: var(--e3) 0; }
  .tabela-larga tbody tr:hover { background: none; }
  .tabela-larga td { border: 0; padding: var(--e1) 0 var(--e1) 40%; position: relative; min-height: 1.75rem; white-space: normal; }
  .tabela-larga td::before { content: attr(data-rotulo); position: absolute; left: 0; width: 37%; font-weight: 400; font-size: var(--t-menor); color: var(--tinta-suave); }
  .tabela-larga tbody th { display: block; width: 100%; border: 0; padding: 0 0 var(--e1); white-space: normal; font-size: var(--t-apoio); font-weight: 600; color: var(--tinta); }
  .tabela-larga td:not([data-rotulo]) { padding-left: 0; }
  .tabela-larga td[data-rotulo="Ação"] { text-align: left; }
  .tabela-larga td[data-rotulo="Ação"] .checkbox { justify-content: flex-start; }
  .tabela-larga td:not([data-rotulo])::before { content: none; }
  .tabela-larga .botao { width: 100%; }
}

/* Lista de processos (mesa, busca): uma linha por processo, separada por fio */
.lista-proc { list-style: none; margin: 0; padding: 0; }
.bloco-mesa { border-top: 0; padding-top: 0; margin-bottom: var(--e7); }
.bloco-mesa > h2 { margin-bottom: var(--e3); }
.bloco-mesa .vazio { border-top: var(--fio); padding-top: var(--e3); }
.item-proc { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 14.5rem; gap: var(--e1) var(--e5); align-items: start;
  padding: var(--e4) 0; border-top: var(--fio); }
.ip-id { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e1); min-width: 0; }
.ip-numero { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
a.ip-numero { display: inline-flex; align-items: center; min-height: 1.75rem; }
.ip-corpo { min-width: 0; }
.ip-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e1) var(--e5); flex-wrap: wrap; margin: 0; }
.ip-interessado { font-weight: 600; }
.ip-assunto { margin: 0; }
.ip-meta { margin: var(--e1) 0 0; color: var(--tinta-suave); font-size: var(--t-apoio); }
.ip-meta span + span::before { content: ""; display: inline-block; width: 1px; height: .8em; background: var(--linha-forte); margin: 0 .6em; vertical-align: -.05em; }
.ip-despacho { margin: var(--e1) 0 0; color: var(--tinta-suave); font-size: var(--t-apoio); }
.ip-acoes { display: flex; flex-direction: column; align-items: stretch; gap: var(--e1); text-align: center; }
.ip-acoes form { margin: 0; display: flex; }
.ip-acoes .botao { width: 100%; }
.ip-acoes .link-acao { margin: 0; justify-content: center; font-size: var(--t-apoio); }
.item-proc { position: relative; }
.item-proc-problema::before, .item-proc-atencao::before { content: ""; position: absolute; left: calc(-1 * var(--e4)); top: var(--e4); bottom: var(--e4); width: 3px; background: var(--atrasado); }
.item-proc-atencao::before { background: var(--atencao-marca); }
.ip-situacao { margin: var(--e2) 0 0; }
.item-proc-restrito .ip-corpo { color: var(--tinta-suave); }
.item-proc-restrito .ip-numero { white-space: normal; }
@media (max-width: 760px) {
  .item-proc { grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
  .ip-id { flex-direction: row; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
  a.ip-numero { min-height: var(--alvo); }
  .ip-acoes { margin-top: var(--e2); }
  .item-proc-problema::before, .item-proc-atencao::before { left: calc(-1 * var(--e3)); }
}

@media (max-width: 959px) { a.ip-numero { min-height: var(--alvo); } }

/* Linha do tempo: data à esquerda, um fio vertical, o fato à direita */
.eventos { list-style: none; margin: 0; padding: 0; border: 0; }
.evento { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0 var(--e5); padding: 0; position: relative; }
.evento::before { content: none; }
.evento p { margin: 0; }
.evento-quando { font-size: var(--t-menor); font-weight: 400; color: var(--tinta-suave); font-variant-numeric: tabular-nums; text-align: right; padding-top: .2rem; white-space: nowrap; }
.evento-corpo { position: relative; border-left: var(--fio); padding: 0 0 var(--e5) var(--e5); min-width: 0; }
.evento:last-child .evento-corpo { padding-bottom: 0; }
.evento-corpo::before { content: ""; position: absolute; left: -4px; top: .6rem; width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-suave); box-shadow: 0 0 0 3px var(--branco); }
.evento:first-child .evento-corpo::before { background: var(--tinta); width: 9px; height: 9px; left: -5px; top: .55rem; }
.evento-texto { margin: 0; }
.evento-decisao { margin: 0 0 var(--e1) !important; }
.evento-ok .evento-corpo::before { background: var(--concluido); }
.evento-atencao .evento-corpo::before { background: var(--atencao-marca); }
.evento-problema .evento-corpo::before { background: var(--atrasado); }
.evento:first-child .evento-texto { font-weight: 600; }
.evento-autor { font-size: var(--t-menor); color: var(--tinta-suave); margin-top: var(--e1) !important; }
.evento .evento-interno, .evento .evento-publico { margin: var(--e2) 0 !important; padding: 0 0 0 var(--e3); font-size: var(--t-apoio); border-left: 2px solid var(--linha); }
.evento-rotulo, .selo-publico, .evento-publico .selo-publico { display: block; margin: 0; padding: 0; border: 0; border-radius: 0; font-size: var(--t-menor); font-weight: 400; color: var(--tinta-suave); }
@media (max-width: 640px) {
  .evento { grid-template-columns: minmax(0, 1fr); border-left: var(--fio); padding: 0 0 var(--e5) var(--e4); }
  .evento:last-child { padding-bottom: 0; }
  .evento-quando { text-align: left; padding: 0; position: relative; }
  .evento-quando::before { content: ""; position: absolute; left: calc(-1 * var(--e4) - 4px); top: .45rem; width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-suave); box-shadow: 0 0 0 3px var(--branco); }
  .evento-corpo { border: 0; padding: 0; }
  .evento-corpo::before { content: none; }
  .evento-ok .evento-quando::before { background: var(--concluido); }
  .evento-atencao .evento-quando::before { background: var(--atencao-marca); }
  .evento-problema .evento-quando::before { background: var(--atrasado); }
}

/* Lista de documentos / itens com ação à direita */
.lista-docs { list-style: none; margin: 0 0 var(--e4); padding: 0; }
.lista-docs li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e2) var(--e5); border: 0; border-bottom: var(--fio); padding: var(--e3) 0; }
.lista-docs li:first-child { padding-top: 0; }
.lista-docs li > div:first-child { min-width: 0; }
.lista-docs small { color: var(--tinta-suave); }
.lista-docs li > .botao, .lista-docs .botoes-empilhados .botao { flex-shrink: 0; white-space: nowrap; }
.lista-docs .botoes-empilhados { flex: none; max-width: none; margin: 0; gap: var(--e2); }
.assinatura-icp-lista { list-style: none; margin: var(--e1) 0 0; padding: 0; }
.assinatura-icp-lista li { display: block; border: 0; padding: 0; margin: 0; }
.lista-simples { margin: 0; padding-left: 1.2rem; }
@media (max-width: 640px) { .lista-docs li { flex-direction: column; } .lista-docs .botoes-empilhados { flex-direction: row; flex-wrap: wrap; } }

/* Confirmação ("Confira antes de…", código de 6 números): cabeçalho padrão + próximo passo + resumo + um botão */
.confirmacao { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 var(--e6); max-width: 44rem; }
.confirmacao .lista-simples { list-style: none; padding: 0; margin: 0 0 var(--e4); }
.confirmacao .lista-simples li { display: flex; gap: var(--e2); align-items: baseline; padding: var(--e2) 0; border-bottom: var(--fio); }
.confirmacao .lista-simples .ic { color: var(--concluido); width: .8em; height: .8em; flex: none; align-self: center; }
.confirmacao form { margin: var(--e4) 0 var(--e2); }
.caixa-codigo-demo { font-size: var(--t-apoio); }
.codigo-demo, .campo-codigo { font-size: var(--t-titulo1) !important; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.campo-codigo { max-width: 14rem; }

/* Página longa de configuração: índice de assuntos à esquerda (fixo ao rolar), conteúdo à direita */
.pagina-indice { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e5) var(--e7); align-items: start; }
.pagina-indice > * { min-width: 0; }
.indice ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e5); }
.indice li a { display: inline-flex; align-items: center; min-height: var(--alvo); }
.indice-outros { margin: var(--e2) 0 0; color: var(--tinta-suave); font-size: var(--t-menor); }
.indice-conteudo > .secao:first-child, .indice-conteudo > form > .secao:first-of-type { border-top: 0; padding-top: 0; }
.indice-conteudo .formulario { max-width: none; }
.indice-conteudo .campo, .indice-conteudo .dica, .indice-conteudo p { max-width: 44rem; }
.indice-conteudo .secao { margin-bottom: var(--e5); }
@media (min-width: 1100px) {
  .pagina-indice { grid-template-columns: 13rem minmax(0, 1fr); }
  .indice { position: sticky; top: 5rem; }
  .indice ul { display: block; }
  .indice li { border-bottom: var(--fio); }
  .indice li a { display: flex; min-height: 2.5rem; text-decoration: none; color: var(--tinta); }
  .indice li a:hover { color: var(--marinho); text-decoration: underline; }
}

/* Passeio guiado e sobreposições */
.tour { position: fixed; inset: 0; z-index: 70; background: var(--veu); display: flex; align-items: flex-end; justify-content: center; padding: var(--e4); }
.tour[hidden] { display: none; }
.tour.tour-com-alvo { background: transparent; }
.tour-caixa { background: var(--branco); border: 1px solid var(--linha-forte); border-top: var(--timbre); border-radius: 0; padding: var(--e4) var(--e5) var(--e5);
  max-width: 34rem; width: 100%; box-shadow: 0 12px 40px var(--sombra); }
.tour-passo { color: var(--tinta-suave); font-weight: 400; font-size: var(--t-menor); margin: 0 0 var(--e1); }
.tour-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin: var(--e4) 0 var(--e3); }
.tour-acoes form { margin: 0; }
.tour-destaque { position: relative; z-index: 69; outline: 2px solid var(--marinho); outline-offset: 6px; border-radius: 0; box-shadow: 0 0 0 9999px var(--veu); }

/* ---------------------------------------------------------------------
   5. TELAS MIGRADAS (login, mesa, processo)
   --------------------------------------------------------------------- */
/* Ação presa: quando o botão principal da tela está abaixo da janela, o app.js o prende ao pé da janela
   (classe .preso) até a pessoa rolar até o lugar dele. Sem JavaScript, ele fica no lugar normal. */
.botao-principal.preso { position: fixed; bottom: var(--e3); z-index: 18; margin: 0; }
.preso-fundo { position: fixed; right: 0; bottom: 0; z-index: 17; background: var(--branco); border-top: 1px solid var(--linha-forte); }
.preso-lugar { display: block; }
@media print { .botao-principal.preso { position: static; } .preso-fundo { display: none; } }

/* Login: uma folha timbrada. Marca e fio em cima; formulário à esquerda, o que o sistema faz à direita. */
.login { margin: var(--e5) 0 0; }
.info-prefeitura { font-weight: 400; }
.login-timbre { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--e1) var(--e5);
  padding: 0 0 var(--e3); border-bottom: var(--timbre); margin: 0 0 var(--e6); }
.login-timbre p { margin: 0; }
.login-slogan { color: var(--tinta-suave); font-size: var(--t-apoio); font-weight: 400; }
.login-grade { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: var(--e6) var(--e8); align-items: start;
  max-width: none; margin: 0; border: 0; border-radius: 0; overflow: visible; background: none; }
.login-form h1 { margin: 0 0 var(--e1); }
.login-form .agora { padding: var(--e3) 0; margin-bottom: var(--e4); }
.login-form .agora-frase { font-size: var(--t-corpo); flex-basis: 100%; }
.login-form .dica { font-size: var(--t-menor); margin-bottom: var(--e1); }
.login-form .campo { margin-bottom: var(--e3); }
@media (max-height: 700px) and (min-width: 761px) {
  .login { margin-top: 0; }
  .principal > .conteudo, .conteudo { padding-top: var(--e4); }
  .login-prefeitura { margin-bottom: var(--e3); }
  .login-form .agora { padding: var(--e2) 0; margin-bottom: var(--e3); }
  .login-form .checkbox { min-height: 2rem; }
}
.login-prefeitura { color: var(--tinta-suave); font-size: var(--t-apoio); margin: 0 0 var(--e5); }
.login-passo { font-size: var(--t-corpo); margin: 0 0 var(--e5); }
.login-form .formulario { max-width: none; margin: 0 0 var(--e4); }
.login-form .campo { margin-bottom: var(--e4); }
.login-ajuda { font-size: var(--t-apoio); color: var(--tinta-suave); margin: 0 0 var(--e5); }
.login-demo { border-top: var(--fio); padding-top: var(--e4); margin: 0; font-size: var(--t-apoio); }
.login-demo a { display: inline-flex; align-items: center; min-height: var(--alvo); }
.login-sobre { border-left: var(--fio); padding: 0 0 0 var(--e6); color: var(--tinta-suave); font-size: var(--t-apoio); }
.login-sobre h2 { font-size: var(--t-corpo); margin: 0 0 var(--e3); }
.login-sobre ul { list-style: none; margin: 0 0 var(--e5); padding: 0; }
.login-sobre li { padding: var(--e3) 0; border-bottom: var(--fio); }
.login-sobre li:first-child { padding-top: 0; }
.login-sobre p { margin: 0; }
@media (max-width: 760px) {
  .login { margin-top: 0; }
  .login-grade { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .login-timbre { margin-bottom: var(--e5); }
  .login-sobre { border-left: 0; border-top: var(--fio); padding: var(--e5) 0 0; }
}

/* Mesa */
.resumo-prazos { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e4); margin: 0 0 var(--e6); font-size: var(--t-apoio); }
.atalhos-mesa { display: flex; flex-wrap: wrap; gap: 0 var(--e5); margin: calc(-1 * var(--e4)) 0 var(--e5); font-size: var(--t-apoio); }
.atalhos-mesa a { display: inline-flex; align-items: center; min-height: var(--alvo); }
.lista-com { list-style: none; margin: 0 0 var(--e4); padding: 0; display: block; }
.lista-com > li, .com-item { background: none; box-shadow: none; border: 0; border-top: var(--fio); border-radius: 0; padding: var(--e3) 0;
  display: flex; flex-direction: column; gap: 0; min-width: 0; }
.lista-com > li:first-child { border-top: 0; padding-top: 0; }
.lista-com a, .com-item-numero { font-weight: 600; overflow-wrap: anywhere; }
.lista-com a { display: inline-flex; align-items: center; min-height: var(--alvo); }
.lista-com small, .com-item small { color: var(--tinta-suave); overflow-wrap: anywhere; }

/* Processo */
.proc-situacao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4) var(--e6); margin: 0 0 var(--e5); }
.proc-situacao > div { min-width: 0; }
.proc-situacao dt { font-size: var(--t-menor); font-weight: 400; color: var(--tinta-suave); }
.proc-situacao dd { margin: 0; }
.proc-situacao dd small { display: block; color: var(--tinta-suave); }
.proc-nota { color: var(--tinta-suave); font-size: var(--t-apoio); margin: 0 0 var(--e2); }
.outras-acoes { margin: 0 0 var(--e6); border-top: var(--fio); border-bottom: var(--fio); }
.outras-acoes > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  min-height: var(--alvo); padding: var(--e2) 0; font-size: var(--t-apoio); color: var(--tinta); }
.outras-acoes > summary::-webkit-details-marker { display: none; }
.outras-acoes > summary::after { content: ""; width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin: 0 .35rem .2rem 0; flex: none; }
.outras-acoes[open] > summary::after { transform: rotate(-135deg); margin-bottom: -.2rem; }
.outras-acoes > summary:hover { color: var(--marinho); }
.outras-acoes ul { list-style: none; margin: 0; padding: 0 0 var(--e3); display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0 var(--e6); }
.outras-acoes li { min-width: 0; }
.outras-acoes form { margin: 0; }
.outras-acoes .link-acao { margin: 0; }
.proc-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--e7); align-items: start; }
.proc-grade > * { min-width: 0; }
@media (min-width: 1280px) {
  .proc-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }
  .proc-lado { grid-column: 2; grid-row: 1; }
  .proc-centro { grid-column: 1; grid-row: 1; }
  .proc-lado .ficha, .proc-lado .dados-processo { display: block; }
}
.proc-lado .secao h2 { font-size: var(--t-corpo); }
.proc-lado > .secao:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 1280px) { .proc-centro > .secao:first-child { border-top: 0; padding-top: 0; } }
@media (max-width: 640px) {
  .proc-situacao { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
  .outras-acoes ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   6. SITE PÚBLICO: fica em static/css/site.css (carregado só em "/", sem app.css)
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   7. AJUSTES SOBRE O DESENHO HERDADO (seção 2b)
   Tira cartão, sombra, pílula e cor das regras herdadas. Some junto com elas.
   --------------------------------------------------------------------- */
/* Cartões antigos viram linhas separadas por fio */
.cartao, .cartao-escolha { background: none; box-shadow: none; border: 0; border-top: var(--fio); border-radius: 0; padding: var(--e4) 0; margin: 0; }
.cartao-verde, .cartao-amarelo, .cartao-vermelho, .cartao-pausado, .cartao-fornecedor { border-left: 0; }
.cartao-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e1) var(--e4); align-items: baseline; }
.cartao-numero { font-size: var(--t-corpo); font-weight: 600; font-variant-numeric: tabular-nums; }
.cartao-numero a { display: inline-flex; align-items: center; min-height: var(--alvo); }
.cartao-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); }
.selo-etapa, .selo-acesso { background: none; border-radius: 0; padding: 0; color: var(--tinta-suave); font-weight: 400; }
.selo-oficial { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 var(--e4); color: var(--tinta-suave); font-size: var(--t-menor); }
.selo-oficial .ic { display: none; }
.situacao-rotulo, .cartao-situacao p, .com-quem-linha, .sp-valor, .confirmacao-frase { font-size: var(--t-corpo); }
.despacho { font-style: normal; color: var(--tinta-suave); }
/* Blocos clicáveis (painéis, escolha de tipo, perfis da demonstração): contorno de fio, sem sombra */
.card-resumo, a.card-resumo, .tipo-escrever, .cartao-perfil-botao, .cartao-editor, .editor-previa, .opcao-assinar, .lista-assinar li, .doc-folha, .wa-pessoa {
  background: var(--branco); box-shadow: none; border: var(--fio); border-left: var(--fio); border-radius: 0; }
a.card-resumo:hover, .tipo-escrever:hover, .cartao-perfil-botao:hover { border-color: var(--tinta); background: var(--branco); }
.card-alerta { box-shadow: inset 0 2px 0 var(--atrasado); }
.card-atencao { box-shadow: inset 0 2px 0 var(--atencao); }
.card-num { font-size: var(--t-titulo1); font-weight: 600; font-variant-numeric: tabular-nums; }
.card-link, .tipo-escrever-nome, .cartao-perfil-nome, .cartao-perfil-acao { color: var(--marinho); }
.tipo-escrever-nome, .cartao-perfil-nome { font-size: var(--t-corpo); }
.opcao-escolhida { border-color: var(--marinho); }
.cartao-editor > summary { min-height: var(--alvo); }
.doc-cabecalho { background: none; color: var(--tinta); border-radius: 0; border-bottom: var(--timbre); }
.doc-setor { color: var(--tinta-suave); }
.doc-marca .logo-gov { color: var(--tinta-suave); }
.glossario div { background: none; border-radius: 0; border-top: var(--fio); padding: var(--e3) 0; margin: 0; }
.glossario dt { font-size: var(--t-corpo); }
.resumo-numeros p { background: none; box-shadow: none; border-radius: 0; padding: 0; }
.resultado-titulo { font-size: var(--t-titulo2); }
/* Escolha de tipo (comunicação, abrir processo): lista de linhas, não grade de cartões */
.tipos-escrever { display: block; margin: 0 0 var(--e6); padding: 0; list-style: none; border-bottom: var(--fio); }
.tipos-escrever > li { display: block; }
.tipo-escrever, .tipo-escrever:hover { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--e1) var(--e5); align-items: baseline;
  border: 0; border-top: var(--fio); padding: var(--e3) 0; min-height: var(--alvo); text-decoration: none; }
.tipo-escrever:hover { background: var(--fundo-suave); }
.tipo-escrever-nome { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 640px) { .tipo-escrever, .tipo-escrever:hover { grid-template-columns: minmax(0, 1fr); } }
/* Pílulas e abas antigas viram texto/contorno */
.lista-modelos a { background: var(--branco); border: 1px solid var(--linha-forte); border-radius: var(--raio); color: var(--tinta); font-weight: 400; }
.passos { gap: var(--e1) var(--e5); margin-bottom: var(--e5); }
.passo, .passo-feito, .passo-atual, .passo-futuro { border: 0; border-radius: 0; background: none; padding: 0; color: var(--tinta-suave); font-size: var(--t-apoio); }
.passo-num, .passo-feito .passo-num, .passo-atual .passo-num, .le-num, .pf-num, .fluxo-previa .fluxo-num, .etapa-icone, .etapa-feita .etapa-icone {
  background: none; color: inherit; border: 1px solid currentColor; border-radius: 50%; width: 1.5rem; height: 1.5rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-menor); font-weight: 400; }
.fluxo-previa .fluxo-num::after { content: none; }
.passo-feito, .etapa-feita, .le-feita .le-nome { color: var(--tinta-suave); }
.passo-feito .passo-num, .le-feita .le-num, .etapa-feita .etapa-icone { color: var(--concluido); border-color: var(--concluido); background: none; }
.passo-atual, .etapa-atual, .le-atual .le-nome { color: var(--tinta); font-weight: 600; }
.passo-atual .passo-num, .le-atual .le-num { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }
.ajuda-exemplo { background: none; color: var(--tinta-suave); border: 1px solid var(--linha-forte); }
.barra, .barra-progresso::-webkit-progress-value { background: var(--tinta-suave); border-radius: 0; }
.barra-progresso::-moz-progress-bar { background: var(--tinta-suave); border-radius: 0; }
.barra-trilho, .barra-progresso, .barra-progresso::-webkit-progress-bar { background: var(--fundo-suave); border-radius: 0; height: .5rem; }
.barra-atraso::-webkit-progress-value { background: var(--atrasado); }
.barra-atraso::-moz-progress-bar { background: var(--atrasado); }
.barra-lote { background: var(--branco); border-top: var(--fio); }
.codigo-demo, .campo-codigo, .codigo-grande, .hash-curto { font-family: ui-monospace, Consolas, monospace; }
.trecho mark { background: none; color: var(--tinta); font-weight: 600; border-bottom: 2px solid var(--marinho); padding: 0; }
.link-desabilitado { color: var(--tinta-suave); text-decoration: none; }
.menu-mais-lista { background: var(--branco); border: 1px solid var(--linha-forte); }
.wa-avatar { background: var(--fundo-suave); color: var(--tinta); }
.wa-pendente { background: var(--branco); border: 1px dashed var(--linha-forte); }
.grade-perfis { gap: 0 var(--e5); }
.cartao-perfil-botao { border: 0; border-top: var(--fio); padding: var(--e4) 0; }
.cartao-perfil-botao:hover { border-color: var(--linha); background: var(--fundo-suave); }
.impressao .capa { border: 0; border-top: var(--timbre); border-radius: 0; padding: var(--e4) 0; }
.botoes-empilhados { max-width: 32rem; }

/* ---------------------------------------------------------------------
   8. SEM CAIXAS: vale por último, sobre o herdado
   --------------------------------------------------------------------- */
/* Itens de formulário em sequência (triagem, retenções, opções de assinatura, campos e etapas do editor):
   separados por fio, nunca em caixa com borda. */
.item-triagem, .item-cnd, fieldset.campo, .conteudo fieldset { border: 0; border-top: var(--fio); border-radius: 0; padding: var(--e4) 0 0; margin: 0 0 var(--e4); min-width: 0; }
.item-triagem legend, .item-cnd legend, fieldset.campo > legend, .conteudo fieldset > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--e2); font-weight: 600; }
.item-triagem legend + *, .item-cnd legend + *, fieldset.campo > legend + *, .conteudo fieldset > legend + * { clear: both; }
.conteudo fieldset > legend.visualmente-oculto { float: none; width: 1px; margin: 0; }
.opcao-assinar, .lista-assinar li, .cartao-editor, .editor-previa, .card-resumo, a.card-resumo { border: 0; border-top: var(--fio); border-radius: 0; background: none; box-shadow: none; }
.opcao-assinar { padding: 0; margin: 0; }
.opcao-assinar > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: var(--alvo); padding: var(--e2) 0; font-weight: 600; }
.opcao-assinar > summary::-webkit-details-marker { display: none; }
.opcao-assinar > summary::after { content: ""; width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 .35rem .2rem 0; flex: none; }
.opcao-assinar[open] > summary::after { transform: rotate(-135deg); margin-bottom: -.2rem; }
.opcao-assinar[open] { padding-bottom: var(--e4); }
.opcao-assinar:not([open]) > summary { font-weight: 400; color: var(--marinho); }
.opcao-escolhida { border-color: var(--linha); }
.cartao-editor { margin: 0; }
.cartao-editor > summary { padding: var(--e2) 0; }
.cartao-editor > form { padding: 0 0 var(--e4); }
.cartao-novo > summary { color: var(--marinho); font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.editor-previa { padding: var(--e4) 0 0; }
.pf-ramo { color: var(--tinta-suave); }
.pf-ramo .ic { display: none; }
/* Indicadores do painel: número + rótulo em linhas separadas por fio (não cartões) */
.cards-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 var(--e6); margin: 0 0 var(--e6); border-bottom: var(--fio); }
.card-resumo, a.card-resumo { display: flex; flex-direction: column; gap: 0; padding: var(--e3) 0 var(--e4); color: var(--tinta); text-decoration: none; }
a.card-resumo:hover { background: var(--fundo-suave); border-color: var(--linha); }
.card-alerta, .card-atencao { box-shadow: none; }
.card-alerta .card-num { color: var(--atrasado); }
.card-atencao .card-num { color: var(--atencao); }
.card-resumo small { color: var(--tinta-suave); }
/* Visor de documento ao lado: só ocupa espaço depois de abrir um documento */
.quadro-documento iframe:not([src]), .quadro-documento iframe[src=""] { height: 0; border: 0; }
.quadro-documento iframe { border: var(--fio); border-radius: 0; }
.triagem-grade { align-items: start; }
.triagem-grade > * > h2:first-child, .triagem-grade > section { margin-top: 0; }
.triagem-grade > .secao, .triagem-grade .visualizador { border-top: 0; padding-top: 0; }
/* Filtros e contadores: links, não pílulas */
.filtros, .abas-com { display: flex; flex-wrap: wrap; gap: 0 var(--e5); margin: 0 0 var(--e5); }
.filtro, .abas-com a, .atalhos a { display: inline-flex; align-items: center; gap: var(--e1); min-height: var(--alvo); padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--marinho); font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; box-shadow: none; }
.filtro-ativo, .lista-visualizar a[aria-current="true"] { color: var(--tinta); font-weight: 600; text-decoration: none; background: none; border: 0; box-shadow: none; }
.campo-curto { max-width: 6rem; }
.campo-medio { max-width: 15rem; }
h1 .ajuda-termo { font-size: var(--t-apoio); }
.hash-curto, code { font-size: var(--t-menor); }
@media (max-width: 640px) { .linha-campos { display: block; } .linha-campos .campo { margin-bottom: var(--e4); } }

/* Recolhíveis: seta desenhada, nunca o triângulo nativo */
main details:not(.ajuda-termo) > summary { list-style: none; }
main details:not(.ajuda-termo) > summary::-webkit-details-marker { display: none; }
main details:not(.ajuda-termo):not(.outras-acoes):not(.opcao-assinar) > summary::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .6rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.15rem) rotate(45deg); flex: none; }
main details[open]:not(.ajuda-termo):not(.outras-acoes):not(.opcao-assinar) > summary::after { transform: translateY(.1rem) rotate(-135deg); }

/* Campo de arquivo: o nativo fica oculto mas focável; quem aparece é o botão em português (app.js) */
.arquivo-nativo { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.campo label.arquivo-botao, .arquivo-botao.botao { display: inline-flex; width: auto; margin: 0; padding: var(--e2) 1.25rem; font-weight: 600; }
.arquivo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); }
.arquivo-nome { color: var(--tinta-suave); font-size: var(--t-apoio); overflow-wrap: anywhere; }
.arquivo-nativo:focus-visible + .arquivo-linha .arquivo-botao { outline: 2px solid var(--marinho); outline-offset: 2px; }
.campo-erro .arquivo-botao { border-color: var(--atrasado); }
[aria-invalid="true"] { border-color: var(--atrasado) !important; }
.tabela td[data-rotulo="Linha do tempo"], .tabela td[data-rotulo="Prazo"] { min-width: 9.5rem; }
@media (max-width: 959px) { .tabela td[data-rotulo="Linha do tempo"], .tabela td[data-rotulo="Prazo"] { min-width: 0; } }

/* Formulário em partes (V6): cada parte é uma seção com fio e título; dentro dela, campos sem fio próprio */
.form-grupo { margin-bottom: var(--e5); }
.form-grupo > h2 { font-size: var(--t-titulo2); }
.form-grupo fieldset.campo, .conteudo .form-grupo fieldset { border-top: 0; padding-top: 0; }
.opcional { font-weight: 400; color: var(--tinta-suave); }
.grupo-recolhido > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3); min-height: var(--alvo); padding: 0 0 var(--e3); }
.grupo-titulo { font-size: var(--t-titulo2); font-weight: 600; color: var(--tinta); }
.grupo-resumo { color: var(--tinta-suave); font-size: var(--t-apoio); }
.barra-formatar { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0 0 var(--e2); }
.barra-formatar .botao { min-width: var(--alvo); width: auto; padding: var(--e1) var(--e3); flex: none; }
.barra-redacao { align-items: center; border-top: var(--fio); padding-top: var(--e4); gap: var(--e2) var(--e4); }

/* Lista com fio (Ajuda e afins): itens separados por fio, sem marcador */
.lista-fio { list-style: none; margin: 0 0 var(--e4); padding: 0; }
.lista-fio li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e3); padding: var(--e2) 0; border-top: var(--fio); }
.lista-fio li:last-child { border-bottom: var(--fio); }
.lista-fio li > a, .lista-fio .botao-link { display: inline-flex; align-items: center; min-height: var(--alvo); }
.apoio { color: var(--tinta-suave); font-size: var(--t-apoio); }
.praticar-linha { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: center; }
.praticar-linha select { flex: 1 1 16rem; max-width: 28rem; }
.praticar-linha .botao { flex: none; width: auto; }
.glossario-letra > summary { font-weight: 600; text-decoration: none; gap: var(--e2); min-height: 2.5rem; }
.glossario-letra { border-top: var(--fio); }
.glossario-letra:last-of-type { border-bottom: var(--fio); }
.glossario-letra .glossario div:first-child { border-top: 0; }

/* Retenções raras (INSS, Outra) recolhidas na liquidação (V4) */
.retencao-recolhida { padding-bottom: 0; }
.retencao-recolhida > summary { display: flex; align-items: center; gap: var(--e2); min-height: var(--alvo); font-weight: 600; color: var(--tinta); text-decoration: none; padding: 0 0 var(--e2); }
.retencao-recolhida:not([open]) > summary { color: var(--marinho); font-weight: 400; }
.retencao-recolhida[open] { padding-bottom: var(--e2); }
.conteudo .retencao-recolhida fieldset.retencao-campos, .retencao-recolhida fieldset.retencao-campos { border: 0; padding: 0; margin: 0; }

/* Assinar documento (V5): coluna de leitura mais larga no computador, para as opções não quebrarem em 2 linhas */
.coluna-assinar { max-width: 48rem; }

.opcoes-grandes + .campo, .opcoes-grandes + label { margin-top: var(--e4); }

.botao-principal.preso { white-space: nowrap; }
.tabela td input.campo-curto, .conteudo input.campo-curto { max-width: 6rem; }


/* ---------------------------------------------------------------------
   9. BORDAS VISÍVEIS (retorno do usuário: "botão tem que parecer botão"; "uma borda entre as fases")
   Vale por último. Sóbrio: borda fina, raio pequeno, sem sombra, sem gradiente, sem fundo forte.
   --------------------------------------------------------------------- */

/* Botões: o secundário tem contorno marinho de 2 px; ação nunca é link solto */
.botao { border-width: 2px; border-radius: var(--raio-bloco); }
.botao-secundario, .botao-pequeno, .link-acao, .botao-link, a.botao-secundario {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: var(--alvo);
  padding: var(--e2) 1.1rem; background: var(--branco); border: 2px solid var(--marinho); border-radius: var(--raio-bloco);
  color: var(--marinho); font: inherit; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; }
.botao-pequeno, .link-acao, .botao-link { font-size: var(--t-apoio); padding: var(--e1) var(--e4); }
.link-acao { margin: 0 var(--e3) var(--e2) 0; }
.botao-secundario:hover, .botao-pequeno:hover, .link-acao:hover, .botao-link:hover {
  background: var(--fundo-suave); border-color: var(--marinho-escuro); color: var(--marinho-escuro); text-decoration: none; }
.botao-perigo, .botao-secundario.botao-perigo { border: 2px solid var(--atrasado); color: var(--atrasado); background: var(--branco); }
.botao-perigo:hover { background: var(--atrasado); color: var(--branco); }
.botao:focus-visible, .link-acao:focus-visible, .botao-link:focus-visible, .filtro:focus-visible { outline: 3px solid var(--marinho); outline-offset: 2px; }
.botao:disabled, .botao[aria-disabled="true"] { border-color: var(--linha); }
/* Filtros e atalhos: botões pequenos com contorno; o ativo fica marcado */
.filtro, .abas-com a, .atalhos a { min-height: 2.5rem; padding: var(--e1) var(--e4); border: 1.5px solid var(--linha-forte); border-radius: var(--raio-bloco);
  background: var(--branco); color: var(--marinho); font-weight: 600; text-decoration: none; }
.filtro:hover, .abas-com a:hover, .atalhos a:hover { border-color: var(--marinho); background: var(--fundo-suave); }
.filtros, .abas-com, .atalhos { gap: var(--e2); }
.filtro-ativo, .abas-com a[aria-current], .lista-visualizar a[aria-current="true"] { border: 2px solid var(--tinta); background: var(--fundo-suave); color: var(--tinta); }

/* Campos: contorno bem visível */
input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=number], input[type=tel],
input[type=date], select, textarea { border: 1.5px solid var(--borda-campo); border-radius: var(--raio-bloco); }

/* Seções: cada uma é um bloco com borda fina; o título fica numa faixa suave com fio embaixo */
.secao, .bloco, .bloco-mesa, .linha-do-tempo, .com-quem, .documentos, .visualizacoes, .resumo-processo, .lista-integridade,
.etapas, .triagem-grade > .secao, .triagem-grade .visualizador, .conteudo .form-grupo {
  border: 1px solid var(--borda-bloco); border-radius: var(--raio-bloco); background: var(--superficie);
  padding: var(--e4) var(--e5) var(--e5); margin: 0 0 var(--e5); }
:is(.secao, .bloco, .bloco-mesa, .linha-do-tempo, .com-quem, .documentos, .visualizacoes, .resumo-processo, .lista-integridade, .etapas)
  :is(.secao, .bloco, .bloco-mesa, .linha-do-tempo, .com-quem, .documentos, .visualizacoes, .resumo-processo, .lista-integridade, .etapas) {
  border: 0; border-top: 1px solid var(--linha); border-radius: 0; padding: var(--e4) 0 0; margin: var(--e4) 0 0; }
:is(.secao, .bloco, .bloco-mesa, .linha-do-tempo, .com-quem, .documentos, .visualizacoes, .resumo-processo, .lista-integridade, .etapas, .form-grupo) > h2:first-child,
.grupo-recolhido > summary {
  margin: calc(-1 * var(--e4)) calc(-1 * var(--e5)) var(--e4); padding: var(--e3) var(--e5); background: var(--fundo-suave);
  border-bottom: 1px solid var(--borda-bloco); border-radius: var(--raio-bloco) var(--raio-bloco) 0 0; }
.grupo-recolhido:not([open]) > summary { margin-bottom: calc(-1 * var(--e5)); border-bottom: 0; border-radius: var(--raio-bloco); }
:is(.secao, .bloco, .bloco-mesa, .linha-do-tempo, .com-quem, .documentos, .visualizacoes, .resumo-processo, .lista-integridade, .etapas)
  :is(.secao, .bloco, .bloco-mesa, .linha-do-tempo, .com-quem, .documentos, .visualizacoes, .resumo-processo, .lista-integridade, .etapas) > h2:first-child {
  margin: 0 0 var(--e3); padding: 0; background: none; border: 0; }
.secao > :last-child, .bloco-mesa > :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .secao, .bloco, .bloco-mesa, .linha-do-tempo, .com-quem, .documentos, .visualizacoes, .resumo-processo, .lista-integridade,
  .etapas, .triagem-grade > .secao, .triagem-grade .visualizador, .conteudo .form-grupo { padding: var(--e3) var(--e4) var(--e4); }
  :is(.secao, .bloco, .bloco-mesa, .linha-do-tempo, .com-quem, .documentos, .visualizacoes, .resumo-processo, .lista-integridade, .etapas, .form-grupo) > h2:first-child,
  .grupo-recolhido > summary { margin: calc(-1 * var(--e3)) calc(-1 * var(--e4)) var(--e3); padding: var(--e3) var(--e4); }
  .grupo-recolhido:not([open]) > summary { margin-bottom: calc(-1 * var(--e4)); }
}

/* Etapas e passos: cada um com borda; o atual em destaque (contorno marinho, fundo suave) */
.passos { gap: var(--e2); }
.passo { border: 1px solid var(--borda-bloco); border-radius: var(--raio-bloco); padding: var(--e1) var(--e3) var(--e1) var(--e1); background: var(--branco); }
.passo-atual { border: 2px solid var(--marinho); background: var(--fundo-suave); color: var(--tinta); font-weight: 600; }
.passo-feito { border-color: var(--borda-bloco); }
main .fluxo-previa { display: grid; gap: var(--e2); padding: 0; }
main .fluxo-previa .fluxo-etapa, .pf-etapa { border: 1px solid var(--borda-bloco); border-radius: var(--raio-bloco); padding: var(--e2) var(--e3); background: var(--branco); }
.previa-fluxo { display: grid; gap: var(--e2); }
.cartao-editor { border: 1px solid var(--borda-bloco); border-radius: var(--raio-bloco); margin: 0 0 var(--e2); padding: 0 var(--e3); }
.cartao-editor[open] { border-color: var(--marinho); }
.cartao-novo { border-style: dashed; }
.cartao-meta { color: var(--tinta-suave); font-weight: 400; }

/* Opções de rádio (editor de tipos, credenciamento, triagem, comunicação): o mesmo cartão com contorno */
.opcao-grande, .opcao-triagem { display: flex; align-items: center; gap: var(--e3); min-height: var(--alvo); padding: var(--e2) var(--e3);
  border: 1.5px solid var(--borda-campo); border-radius: var(--raio-bloco); background: var(--superficie); cursor: pointer; }
.opcao-grande:hover, .opcao-triagem:hover { border-color: var(--marinho); }
.opcao-grande:has(input:checked), .opcao-ok:has(input:checked) { border: 2px solid var(--marinho); background: var(--fundo-suave); box-shadow: none; }
.opcao-falta:has(input:checked), .opcao-vencida:has(input:checked) { border: 2px solid var(--atrasado); box-shadow: none; }


/* Ficha do processo e "Outras ações" também em bloco; a primeira lista de um bloco não repete o fio do cabeçalho */
.situacao-resumo, details.outras-acoes { border: 1px solid var(--borda-bloco); border-radius: var(--raio-bloco); padding: var(--e4) var(--e5); margin: 0 0 var(--e5); background: var(--branco); }
details.outras-acoes { padding-top: 0; padding-bottom: 0; }
details.outras-acoes[open] { padding-bottom: var(--e4); }
:is(.secao, .bloco-mesa, .bloco, .form-grupo) > h2:first-child + * { border-top: 0; }
:is(.secao, .bloco-mesa, .bloco, .form-grupo) > h2:first-child + * > :first-child { border-top: 0; }
:is(.secao, .bloco-mesa, .bloco) > h2:first-child + .explica + * > :first-child { border-top: 0; }
@media (max-width: 640px) { .situacao-resumo, details.outras-acoes { padding-left: var(--e4); padding-right: var(--e4); } }

/* Formulário ao lado do visor (triagem, conferência, liquidação): também é um bloco com cabeçalho */
.triagem-grade > form { border: 1px solid var(--borda-bloco); border-radius: var(--raio-bloco); padding: var(--e4) var(--e5) var(--e5); background: var(--superficie); max-width: none; }
.triagem-grade > form > h2:first-of-type { margin: calc(-1 * var(--e4)) calc(-1 * var(--e5)) var(--e4); padding: var(--e3) var(--e5); background: var(--fundo-suave);
  border-bottom: 1px solid var(--borda-bloco); border-radius: var(--raio-bloco) var(--raio-bloco) 0 0; }
.triagem-grade > form > h2:not(:first-of-type) { border-top: 1px solid var(--borda-bloco); padding-top: var(--e4); margin-top: var(--e5); }
@media (max-width: 640px) { .triagem-grade > form { padding: var(--e3) var(--e4) var(--e4); }
  .triagem-grade > form > h2:first-of-type { margin: calc(-1 * var(--e3)) calc(-1 * var(--e4)) var(--e3); padding: var(--e3) var(--e4); } }

/* Menu lateral com cara de botão (retorno do usuário): cada item é um botão de contorno; o ativo, marinho claro.
   "Fluxo do pagamento" fica como está. */
.lateral .menu ul { gap: var(--e2); }
.lateral .menu a { min-height: var(--alvo); padding: var(--e2) var(--e3); border: 1px solid var(--linha-forte); border-radius: var(--raio-bloco);
  background: var(--branco); color: var(--tinta); }
.lateral .menu a:hover { background: var(--fundo-suave); border-color: var(--marinho); color: var(--tinta); }
.lateral .menu a[aria-current="page"] { background: var(--marinho-claro); border: 2px solid var(--marinho); color: var(--marinho); font-weight: 600;
  box-shadow: inset 4px 0 0 var(--marinho); }
.lateral .menu a:focus-visible { outline: 3px solid var(--marinho); outline-offset: 2px; }
.lateral-titulo { margin-top: var(--e1); }
.lateral { gap: var(--e4); }
.lateral-rodape { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.lateral-rodape a { min-height: 2.25rem; padding: var(--e1) var(--e2); line-height: 1.2; justify-content: center; text-align: center; border: 1px solid var(--linha-forte); border-radius: var(--raio-bloco);
  background: var(--branco); color: var(--tinta); font-size: var(--t-menor); text-decoration: none; }
.lateral-rodape a:hover { background: var(--fundo-suave); border-color: var(--marinho); color: var(--tinta); text-decoration: none; }
.botao-lateral, .barra-topo .menu-usuario > summary { border: 1.5px solid var(--linha-forte); border-radius: var(--raio-bloco); }
.botao-lateral:hover, .barra-topo .menu-usuario > summary:hover { border-color: var(--marinho); background: var(--fundo-suave); }
@media (max-width: 959px) { .lateral-rodape a { min-height: var(--alvo); } }
@media (min-width: 960px) and (max-height: 700px) {
  .lateral .menu ul { gap: var(--e1); }
  .lateral .menu a { min-height: 2.25rem; padding-top: var(--e1); padding-bottom: var(--e1); }
  .lateral-rodape { gap: var(--e1); }
  .lateral-rodape a { min-height: 1.875rem; padding: 0 var(--e2); }
}

/* Caminho deste processo: trilha vertical no menu lateral (substitui "Fluxo do pagamento" dentro de um processo) */
.lateral .caminho { position: relative; flex: 1 1 auto; min-height: 7rem; overflow-y: auto; margin: 0 calc(-1 * var(--e1)); padding: 0 var(--e1); }
.lateral > :not(.caminho) { flex-shrink: 0; }
.caminho-titulo { font-size: var(--t-menor); font-weight: 600; color: var(--tinta); margin: 0 0 var(--e2); padding: 0 var(--e1); }
.caminho-numero { font-weight: 400; color: var(--tinta-suave); }
.caminho-aviso { margin: 0 0 var(--e2); }
.caminho-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.caminho-etapa { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--e2); align-items: start; padding: var(--e2);
  border: 1px solid var(--borda-bloco); border-radius: var(--raio-bloco); background: var(--superficie); font-size: var(--t-menor); line-height: 1.35; }
.caminho-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--linha-forte); font-size: var(--t-menor); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.caminho-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.caminho-nome { font-weight: 600; color: var(--tinta); }
.caminho-info { color: var(--tinta-suave); }
.caminho-prazo, .caminho-desvio { margin-top: 2px; }
.caminho-feita .caminho-num { border-color: var(--concluido); background: var(--ok-fundo); color: var(--concluido); }
.caminho-feita .caminho-num .ic { width: .8rem; height: .8rem; }
.caminho-atual { border: 2px solid var(--marinho); background: var(--marinho-claro); }
.caminho-atual .caminho-num { border-color: var(--marinho); background: var(--marinho); color: var(--branco); }
.caminho-atual .caminho-nome { color: var(--marinho); }
.caminho-proxima { border-style: dashed; }
.caminho-proxima .caminho-nome { font-weight: 400; color: var(--tinta-suave); }
/* No celular a lateral é gaveta: a trilha vem numa faixa no topo do processo */
.caminho-faixa { display: none; }
@media (max-width: 959px) {
  .caminho-faixa { display: block; border: 1px solid var(--borda-bloco); border-radius: var(--raio-bloco); margin: 0 0 var(--e4); background: var(--branco); }
  .caminho-faixa > summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--alvo); padding: var(--e2) var(--e3);
    font-weight: 600; color: var(--marinho); text-decoration: none; }
  .caminho-faixa[open] > summary { border-bottom: 1px solid var(--borda-bloco); }
  .caminho-faixa > .caminho-lista, .caminho-faixa > .caminho-aviso { margin: var(--e3); }
  .lateral .caminho { flex: none; overflow: visible; }
}

/* Dentro de um processo o menu fica compacto para a trilha ter espaço */
@media (min-width: 960px) {
  .lateral:has(.caminho) { gap: var(--e3); }
  .lateral:has(.caminho) .menu ul { gap: 2px; }
  .lateral:has(.caminho) .menu a { min-height: 2.125rem; padding-top: 2px; padding-bottom: 2px; }
  .lateral:has(.caminho) .lateral-titulo { margin-bottom: 2px; }
  .lateral:has(.caminho) .lateral-rodape { gap: var(--e1); padding-top: var(--e2); }
  .lateral:has(.caminho) .lateral-rodape a { min-height: 1.875rem; padding: 0 var(--e1); }
  .lateral .caminho { min-height: 10rem; }
  .caminho-titulo { position: sticky; top: 0; z-index: 1; background: var(--branco); padding-bottom: var(--e1); margin-bottom: var(--e1); }
}
@media (min-width: 960px) and (max-height: 700px) {
  .lateral .caminho { min-height: 5rem; }
  .lateral:has(.caminho) .lateral-marca { min-height: 2rem; }
}

/* Escolha do tema (menu da pessoa, topo das páginas públicas): três botões lado a lado */
.tema-escolha fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.tema-rotulo { float: none; font-size: var(--t-menor); color: var(--tinta-suave); font-weight: 400; margin: 0 0 var(--e1); padding: 0; }
.tema-opcoes { display: flex; gap: var(--e1); flex-wrap: wrap; }
.tema-opcao { min-height: 2.25rem; padding: 0 var(--e3); border: 1.5px solid var(--linha-forte); border-radius: var(--raio-bloco);
  background: var(--branco); color: var(--tinta); font: inherit; font-size: var(--t-menor); cursor: pointer; }
.tema-opcao:hover { border-color: var(--marinho); background: var(--fundo-suave); }
.tema-opcao[aria-pressed="true"] { border: 2px solid var(--marinho); background: var(--marinho-claro); color: var(--marinho); font-weight: 600; }
.tema-opcao:focus-visible { outline: 3px solid var(--marinho); outline-offset: 2px; }
.mu-painel .tema-escolha { padding: var(--e2) 0; border-top: var(--fio); border-bottom: var(--fio); }
.topo .tema-escolha { margin-left: auto; }
.topo .tema-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 480px) { .topo .tema-opcao { padding: 0 var(--e2); } }
/* Folhas de papel (prévia do documento, QR) continuam brancas no escuro */
.doc-folha, .qr-caixa, .papel { background: var(--branco); color: var(--tinta); }
.quadro-documento iframe { background: var(--papel); }

@media print {
  .faixa-demo, .lateral, .barra-topo, .rodape-discreto, .lateral-fundo, .topo, .rodape, .tour, .dica-primeira, .agora, .outras-acoes, .nao-imprimir { display: none !important; }
  .app { display: block; }
  body { font-size: 11pt; }
}

/* ---------------------------------------------------------------------
   Fase 8b: aplicativo no celular (instalar, notificações, sem internet, nova versão)
   --------------------------------------------------------------------- */
.app-grade { display: grid; gap: var(--e5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.app-grade > .secao { margin: 0; }
.app-qr-caixa { display: inline-block; padding: var(--e2); border: var(--fio); border-radius: var(--raio); background: var(--papel); }
.app-qr-caixa svg { width: 200px; height: 200px; display: block; }
.app-endereco, .cartaz-endereco { font-weight: 600; overflow-wrap: anywhere; margin: var(--e3) 0; }
.app-passos { margin: 0; padding-left: 1.4rem; }
.app-passos li { padding: var(--e1) 0; }
.app-instalado { font-weight: 600; color: var(--concluido); margin: var(--e2) 0 0; }
.push-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.push-estado { flex-basis: 100%; margin: 0; color: var(--tinta-suave); }
.push-estado:empty { display: none; }
.lista-aparelhos li { justify-content: space-between; align-items: center; }
.aparelho-nome { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.versao-sistema { color: var(--tinta-suave); font-size: var(--t-menor); }
.rodape-discreto .versao-sistema { margin-left: auto; }

/* faixa "Nova versão disponível" e bloqueio por versão mínima */
.faixa-versao { position: sticky; top: 0; z-index: 1000; display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; justify-content: center;
  padding: var(--e2) 16px; background: var(--superficie); color: var(--tinta); border-bottom: 2px solid var(--marinho); font-weight: 600; }
.faixa-versao p { margin: 0; }
.versao-obrigatoria { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--veu); }
.versao-obrigatoria > div { max-width: 28rem; width: 100%; background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-bloco); border-radius: 6px; padding: var(--e5); }
.versao-obrigatoria h2 { margin: 0 0 var(--e3); font-size: var(--t-titulo2); }

/* página sem internet */
.pagina-offline { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--branco); color: var(--tinta); }
.offline-caixa { max-width: 32rem; width: 100%; }
.offline-caixa h1 { margin: var(--e5) 0 var(--e4); }

/* cartaz A4 */
.pagina-cartaz { background: var(--branco); color: var(--tinta); padding: 16px; }
.cartaz-barra { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: center; margin: 0 auto var(--e5); }
.cartaz { max-width: 180mm; margin: 0 auto; padding: var(--e6) var(--e5); border: 1px solid var(--borda-bloco); border-radius: 6px; text-align: center;
  background: var(--papel); color: var(--tinta); }
.cartaz .logo-doctus { color: var(--tinta); }
.cartaz .logo-gov { color: var(--tinta-suave); }
.cartaz h1 { font-size: 2rem; margin: var(--e4) 0 var(--e5); color: var(--tinta); }
.cartaz-qr { display: inline-block; padding: var(--e2); }
.cartaz-qr svg { width: min(90mm, 70vw); height: auto; display: block; }
.cartaz-passos { text-align: left; max-width: 140mm; margin: var(--e5) auto; padding-left: 1.6rem; font-size: 1.15rem; }
.cartaz-passos li { padding: var(--e2) 0; }
.cartaz-rodape { color: var(--tinta-suave); margin: 0; }
/* ---------------------------------------------------------------------
   10. AMIGÁVEL ("papel timbrado" mais acolhedor): cantos de 12 px, bordas de 2 px, botão com degrau de adesivo,
   texto base 17 px e mais respiro. Sem sombra difusa, sem gradiente; azul só para ação, verde/âmbar/vermelho só estado.
   --------------------------------------------------------------------- */
body { line-height: 1.6; }
.agora-frase { font-size: var(--t-destaque); line-height: 1.4; }
.status, .sem { border-radius: var(--raio-etiqueta); }
/* Botões: 2 px de borda, 12 px de canto e um degrau embaixo (borda de 4 px num tom mais escuro); ao apertar, afunda */
.botao, .link-acao, .botao-link, .tema-opcao, .filtro, .abas-com a, .atalhos a { border-radius: var(--raio); }
.botao-principal, .botao-assinar { border: 2px solid var(--marinho); border-bottom: 4px solid var(--marinho-degrau); }
.botao-principal:hover, .botao-assinar:hover { border-color: var(--marinho-escuro); border-bottom-color: var(--marinho-degrau); }
.botao-secundario, .botao-pequeno, .link-acao, .botao-link, a.botao-secundario { border-width: 2px; border-bottom-width: 4px; border-bottom-color: var(--marinho-degrau); }
.botao-perigo, .botao-secundario.botao-perigo { border-bottom: 4px solid var(--atrasado); }
.botao:active, .link-acao:active, .botao-link:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.botao:disabled, .botao[aria-disabled="true"] { border-bottom-width: 2px; transform: none; }
/* Campos e opções: canto de 12 px */
input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=number], input[type=tel],
input[type=date], select, textarea, .opcao-grande, .opcao-triagem { border-radius: var(--raio); }
/* Blocos de seção: borda de 2 px, canto de 12 px e mais respiro entre eles */
.secao, .bloco, .bloco-mesa, .linha-do-tempo, .com-quem, .documentos, .visualizacoes, .resumo-processo, .lista-integridade,
.etapas, .triagem-grade > .secao, .triagem-grade .visualizador, .conteudo .form-grupo, .triagem-grade > form, .situacao-resumo, details.outras-acoes {
  border-width: 2px; border-radius: var(--raio-bloco); margin-bottom: var(--e6); }
:is(.secao, .bloco, .bloco-mesa, .linha-do-tempo, .com-quem, .documentos, .visualizacoes, .resumo-processo, .lista-integridade, .etapas, .form-grupo) > h2:first-child,
.grupo-recolhido > summary, .triagem-grade > form > h2:first-of-type { border-radius: calc(var(--raio-bloco) - 2px) calc(var(--raio-bloco) - 2px) 0 0; }
.grupo-recolhido:not([open]) > summary { border-radius: calc(var(--raio-bloco) - 2px); }
:is(.secao, .bloco, .bloco-mesa, .linha-do-tempo, .com-quem, .documentos, .visualizacoes, .resumo-processo, .lista-integridade, .etapas)
  :is(.secao, .bloco, .bloco-mesa, .linha-do-tempo, .com-quem, .documentos, .visualizacoes, .resumo-processo, .lista-integridade, .etapas) { border-width: 0; border-top-width: 1px; margin-bottom: 0; }
/* Menu lateral, etapas e caminho: mesmo canto */
.lateral .menu a, .lateral-rodape a, .caminho-etapa, .passo, .cartao-editor, main .fluxo-previa .fluxo-etapa, .pf-etapa, .caminho-faixa { border-radius: var(--raio); }
.botao-lateral, .barra-topo .menu-usuario > summary { border-radius: var(--raio); }

/* Tela baixa (1093×614): o menu continua cabendo sem rolar com o texto de 17 px */
@media (min-width: 960px) and (max-height: 700px) {
  .lateral .menu a { font-size: 1rem; min-height: 2rem; }
  .lateral { gap: var(--e3); }
  .lateral-marca { min-height: 2rem; }
}

@media print {
  @page { size: A4; margin: 15mm; }
  .pagina-cartaz { padding: 0; }
  .so-tela, .faixa-versao { display: none !important; }
  .cartaz { border: 0; max-width: none; padding: 0; }
}

/* =====================================================================
   Tramitação livre + painel de páginas (processo): centro + painel à direita
   (docs/design-system.md › "Painel à direita da página do processo")
   ===================================================================== */
.principal > .conteudo:has(> .proc-layout) { max-width: none; padding-left: var(--e5); padding-right: var(--e5); }
.proc-layout { --painel-largura: 300px; display: grid; grid-template-columns: minmax(0, 1fr) var(--painel-largura); gap: var(--e5); align-items: start; }
.proc-principal { min-width: 0; }
.proc-layout[data-recolhido] { grid-template-columns: minmax(0, 1fr) auto; }

.proc-painel { position: sticky; top: calc(4.5rem + var(--e3)); max-height: calc(100vh - 4.5rem - 2 * var(--e3)); min-width: 0; display: flex; flex-direction: column;
  border: 2px solid var(--borda-bloco); border-radius: var(--raio-bloco); background: var(--superficie); }
.painel-topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); border-bottom: 1px solid var(--borda-bloco);
  background: var(--fundo-suave); border-radius: var(--raio-bloco) var(--raio-bloco) 0 0; }
.painel-abas { display: flex; gap: var(--e1); flex: 1 1 auto; min-width: 0; }
.painel-abas [role="tab"] { min-height: var(--alvo); padding: var(--e1) var(--e3); border: 2px solid transparent; border-radius: var(--raio-bloco);
  background: none; color: var(--tinta); font: inherit; font-size: var(--t-apoio); cursor: pointer; display: inline-flex; align-items: center; gap: var(--e1); }
.painel-abas [role="tab"]:hover { border-color: var(--linha-forte); }
.painel-abas [role="tab"][aria-selected="true"] { border-color: var(--marinho); background: var(--marinho-claro); color: var(--marinho); font-weight: 600; }
.painel-abas [role="tab"]:focus-visible, .painel-alca:focus-visible, .miniatura:focus-visible { outline: 3px solid var(--marinho); outline-offset: 2px; }
.painel-recolher, .painel-fechar { min-height: var(--alvo); }
.painel-fechar { display: none; }
.painel-aba { overflow-y: auto; padding: var(--e3); min-height: 0; flex: 1 1 auto; }
.painel-aba[hidden] { display: none; }
.painel-subtitulo { font-size: var(--t-apoio); margin: var(--e4) 0 var(--e2); }
.painel-baixar { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin: 0 0 var(--e3); }
.painel-baixar .botao { white-space: normal; text-align: center; }
.proc-layout[data-recolhido] .painel-abas, .proc-layout[data-recolhido] .painel-aba, .proc-layout[data-recolhido] .painel-alca { display: none; }
.proc-layout[data-recolhido] .painel-topo { border-bottom: 0; border-radius: var(--raio-bloco); }

.painel-alca { position: absolute; left: -12px; top: 0; bottom: 0; width: 10px; cursor: col-resize; border-radius: var(--raio-bloco); }
.painel-alca::after { content: ""; position: absolute; left: 3px; top: 50%; height: 3rem; margin-top: -1.5rem; width: 4px; border-radius: 2px; background: var(--linha-forte); }
.painel-alca:hover::after { background: var(--marinho); }
.js .proc-painel { position: sticky; }

.indice-pecas { margin: 0 0 var(--e3); }
.indice-pecas ol { margin: var(--e2) 0 0; padding-left: var(--e5); font-size: var(--t-menor); }
.indice-pecas li { margin: var(--e1) 0; }
.miniaturas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.miniatura { display: grid; justify-items: center; gap: var(--e1); padding: var(--e2); border: 2px solid var(--borda-bloco); border-radius: var(--raio-bloco);
  color: var(--tinta); text-decoration: none; background: var(--superficie); }
.miniatura:hover { border-color: var(--marinho); color: var(--tinta); text-decoration: none; }
.miniatura[aria-current="page"] { border-color: var(--marinho); background: var(--marinho-claro); box-shadow: inset 0 0 0 1px var(--marinho); }
.miniatura img { width: 100%; max-width: 180px; height: auto; aspect-ratio: 180 / 254; object-fit: contain; background: var(--papel); border: 1px solid var(--linha); border-radius: 4px; }
.miniatura-num { font-size: var(--t-menor); font-weight: 600; }
.miniatura-peca { font-size: var(--t-menor); color: var(--tinta-suave); text-align: center; overflow-wrap: anywhere; }
.miniatura[aria-current="page"] .miniatura-num { color: var(--marinho); }
.miniatura-cancelada img { opacity: .55; }

.visor-pagina { margin: var(--e5) 0; border: 2px solid var(--borda-bloco); border-radius: var(--raio-bloco); background: var(--superficie); padding: var(--e3) var(--e4) var(--e4); }
.visor-titulo { font-size: var(--t-destaque); margin: 0 0 var(--e1); }
.visor-legenda { margin: 0 0 var(--e3); color: var(--tinta-suave); font-size: var(--t-apoio); }
.visor-folha { display: flex; justify-content: center; background: var(--fundo-suave); border-radius: var(--raio-bloco); padding: var(--e3); }
.visor-folha img { display: block; max-width: 100%; height: auto; max-height: 78vh; object-fit: contain; background: var(--papel); border: 1px solid var(--linha); }
.visor-links { margin: var(--e2) 0 0; }

.acoes-processo { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin: var(--e4) 0; }
.acoes-processo form { margin: 0; }

.mensagem-tramite { margin: var(--e4) 0; padding: var(--e3) var(--e4); border: 2px solid var(--borda-bloco); border-radius: var(--raio-bloco); background: var(--superficie); }
.mensagem-tramite-nova { border-color: var(--marinho); background: var(--marinho-claro); }
.mensagem-tramite h2 { font-size: var(--t-destaque); margin: 0 0 var(--e1); }
.mensagem-tramite-de { margin: 0 0 var(--e2); font-size: var(--t-apoio); }
.mensagem-tramite-texto { font-size: var(--t-destaque); overflow-wrap: anywhere; }
.mensagem-tramite-texto > :last-child { margin-bottom: 0; }

.tramites { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.tramite { border: 1px solid var(--borda-bloco); border-radius: var(--raio-bloco); padding: var(--e2) var(--e3); }
.tramite-atual { border: 2px solid var(--marinho); background: var(--marinho-claro); }
.tramite p { margin: 0 0 var(--e1); font-size: var(--t-menor); overflow-wrap: anywhere; }
.tramite-cab { display: flex; flex-wrap: wrap; gap: var(--e1); align-items: center; }
.tramite-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; border-radius: 999px;
  border: 2px solid var(--tinta); font-weight: 600; }
.tramite-rota { font-size: var(--t-apoio) !important; }
.tramite-para { color: var(--tinta-suave); }
.tramite-msg { font-size: var(--t-menor); overflow-wrap: anywhere; }
.tramite-msg p, .tramite-msg ul, .tramite-msg ol { margin: 0 0 var(--e1); }
.tramite-quando { color: var(--tinta-suave); }
.fases-sugeridas .caminho-proxima .caminho-nome { color: var(--tinta-suave); }

.opcao { display: flex; gap: var(--e2); align-items: flex-start; min-height: var(--alvo); padding: var(--e2) 0; cursor: pointer; }
.opcao input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; flex: 0 0 auto; }
.anexos-linhas { border: 0; padding: 0; margin: 0 0 var(--e3); min-width: 0; }
.anexos-linhas legend { font-weight: 600; margin-bottom: var(--e2); }
.anexo-linha { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--e1) var(--e3); padding: var(--e3) 0; border-top: 1px solid var(--linha); }
.anexo-linha .opcao { grid-column: 1 / -1; padding: 0; }
.anexo-linha .campo { margin: 0; min-width: 0; }
.sugestao-fluxo { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.links-cadastro { margin: var(--e3) 0; }

.contadores-mesa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); margin: var(--e4) 0 var(--e2); }
.contador-mesa { display: flex; flex-direction: column; gap: 0; padding: var(--e2) var(--e3); border: 2px solid var(--borda-bloco); border-radius: var(--raio-bloco);
  color: var(--tinta); text-decoration: none; background: var(--superficie); min-height: var(--alvo); }
.contador-mesa:hover { border-color: var(--marinho); color: var(--tinta); text-decoration: none; }
.contador-mesa-n { font-size: var(--t-titulo2); font-weight: 600; line-height: 1.2; }
.contador-mesa-alerta { border-color: var(--atrasado); }
.contador-mesa-alerta .contador-mesa-n { color: var(--atrasado); }
.mesa-atalhos { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin: 0 0 var(--e4); }
.filtros-busca { margin: var(--e3) 0; }
.filtros-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2) var(--e3); max-width: none; margin-top: var(--e3); }
.filtros-grade .campo { margin: 0; min-width: 0; }
.filtros-acoes { grid-column: 1 / -1; display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }

.painel-botoes { display: none; }
.painel-veu { display: none; }

@media (max-width: 1199px) and (min-width: 960px) {
  .proc-layout { --painel-largura: 260px; gap: var(--e4); }
}
@media (max-width: 959px) {
  .principal > .conteudo:has(> .proc-layout) { padding-left: var(--e4); padding-right: var(--e4); }
  .proc-layout, .proc-layout[data-recolhido] { grid-template-columns: minmax(0, 1fr); }
  .painel-alca, .painel-recolher { display: none !important; }
  .contadores-mesa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros-grade { grid-template-columns: minmax(0, 1fr); }
  .anexo-linha { grid-template-columns: minmax(0, 1fr); }
  .proc-painel { position: static; max-height: none; }
  /* Com JavaScript: o painel vira gaveta de baixo, aberta pelos botões fixos "Páginas" e "Caminho" */
  .js .proc-painel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: 86vh; max-height: 86vh; z-index: 70;
    border-radius: var(--raio-bloco) var(--raio-bloco) 0 0; border-bottom: 0; transform: translateY(105%); visibility: hidden; }
  .js .proc-painel[data-aberto] { transform: none; visibility: visible; box-shadow: 0 -4px 16px var(--sombra); }
  .js .painel-fechar { display: inline-flex; }
  .js .painel-botoes:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; gap: var(--e2); padding: var(--e2) var(--e4);
    background: var(--branco); border-top: 1px solid var(--borda-bloco); }
  .js .painel-botoes .botao { flex: 1 1 0; min-width: 0; }
  .js .painel-veu:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 65; background: var(--veu); }
  .js .conteudo:has(> .proc-layout) { padding-bottom: 6rem; }
  .js .proc-layout .miniaturas { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
}
@media print { .proc-painel, .painel-botoes, .painel-veu { display: none !important; } .proc-layout { display: block; } }
@media (min-width: 960px) {
  .painel-topo { flex-wrap: nowrap; padding: var(--e2); }
  .painel-abas [role="tab"] { padding: var(--e1) var(--e2); }
  .painel-recolher { flex: 0 0 auto; min-height: 2.25rem; padding: 0 var(--e2); font-size: var(--t-menor); }
}
.painel-abas [role="tab"] { white-space: nowrap; flex: 0 0 auto; }
@media (min-width: 1200px) { .proc-layout { --painel-largura: 320px; } }
@media (min-width: 960px) { .painel-topo { flex-wrap: wrap; } .painel-abas [role="tab"] { font-size: var(--t-menor); } }
/* D5: no computador a página grande do processo aparece já na primeira dobra (1366×768 e 1093×614) */
@media (min-width: 960px) {
  .proc-principal > .cabecalho-pagina { margin-bottom: var(--e2); padding-bottom: 0; }
  .proc-principal > .cabecalho-pagina h1 { font-size: var(--t-titulo2); margin: 0; }
  .proc-principal > .cabecalho-pagina .contexto { margin: 0; }
  .proc-principal > .cabecalho-pagina .migalha { margin: 0; }
  .proc-principal > .agora { padding-top: var(--e2); padding-bottom: var(--e2); margin-bottom: 0; }
  .proc-principal > .acoes-processo { margin: var(--e2) 0; }
  .proc-principal > .visor-pagina { margin-top: var(--e2); padding-top: var(--e2); }
  .proc-principal .visor-titulo { display: inline; font-size: var(--t-corpo); }
  .proc-principal .visor-legenda { display: inline; margin-left: var(--e2); }
  .proc-principal .visor-folha { margin-top: var(--e2); padding: var(--e2); }
  .proc-principal .visor-folha img { max-height: calc(100vh - 7rem); }
  .painel-recolher { white-space: nowrap; }
}
@media (max-width: 1199px) and (min-width: 960px) { .proc-layout { --painel-largura: 280px; } }
@media (min-width: 960px) {
  .proc-principal > .agora { flex-wrap: nowrap; gap: var(--e1) var(--e4); }
  .proc-principal > .agora .agora-titulo { flex: 0 0 6.5rem; }
  .proc-principal > .agora .agora-frase { flex: 1 1 auto; font-size: var(--t-corpo); }
  .proc-principal > .agora > .botao, .proc-principal > .agora > form { flex: 0 0 auto; }
  .painel-topo { flex-wrap: nowrap; gap: var(--e1); }
  .painel-abas { gap: 0; }
  .painel-recolher { padding: 0 var(--e1); }
}
.motivo-acao { display: block; margin-top: var(--e1); color: var(--tinta-suave); font-weight: 400; font-size: var(--t-menor); }
.opcao-grande.opcao-indisponivel { border-style: dashed; }
@media (min-width: 960px) {
  .proc-principal > .acoes-processo { gap: var(--e1) var(--e2); }
  .proc-principal > .acoes-processo .botao { min-height: 2.5rem; padding: var(--e1) var(--e3); font-size: var(--t-menor); }
}
@media (min-width: 960px) { .proc-principal > .acoes-processo .link-acao { min-height: 2.5rem; padding: var(--e1) var(--e3); font-size: var(--t-menor); } }
@media (min-width: 960px) and (max-height: 700px) { .proc-principal > .cabecalho-pagina .migalha { display: none; } }

/* ===================== Fase 9 – arquivo (temporalidade, eliminação, folha de rosto) ===================== */
.form-compacto { padding: var(--e3) 0 0; margin: 0 0 var(--e3); background: transparent; }
.form-compacto h3 { font-size: var(--t-corpo); margin: 0 0 var(--e2); }
.bloco-arquivo .outras-acoes .form-compacto + .form-compacto { border-top: 1px solid var(--linha); }
.acoes-relatorio { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0 0 var(--e3); }
.hash { font-family: ui-monospace, Consolas, monospace; font-size: var(--t-apoio); overflow-wrap: anywhere; word-break: break-all; }
.folha-rosto { background: var(--papel); color: var(--tinta-papel); border: 2px solid var(--borda-bloco); border-radius: var(--raio-bloco);
  padding: var(--e4); max-width: 46rem; }
.folha-rosto h1 { margin: var(--e2) 0; }
.folha-rosto h1, .folha-rosto p, .folha-rosto small, .folha-rosto .ficha-linhas dt, .folha-rosto .ficha-linhas dd { color: var(--tinta-papel); }
.folha-rosto-orgao { font-weight: 600; margin: 0; }
.folha-rosto-assunto { font-size: var(--t-titulo3, 1.2rem); margin: 0 0 var(--e3); }
.folha-rosto .linha-qr { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; margin-top: var(--e3); }
.folha-rosto .codigo-grande { font-size: var(--t-corpo); }
@media print {
  .folha-rosto { border: 2px solid var(--tinta-papel); max-width: none; }
}

/* Fase 9 (D3): etiqueta do destino na tabela de temporalidade nunca quebra palavra ("Elimina-ção") */
.tabela td.col-destino { hyphens: none; overflow-wrap: normal; word-break: keep-all; min-width: 9.5rem; }
.tabela td.col-destino .status { white-space: nowrap; }

/* Contador de tempo no setor (sem prazo): sempre neutro, com relógio; sem verde/âmbar/vermelho por tempo */
.status-tempo { font-variant-numeric: tabular-nums; }
.ordem-mesa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2, .5rem); margin: 0 0 var(--e2, .5rem); }
.ordem-mesa label { font-weight: 600; }
.ordem-mesa select { width: auto; max-width: 100%; }
.tramite-tempo, .caminho-total { margin: .25rem 0 0; }
.tempo-total { display: block; margin-top: .2rem; color: var(--tinta-suave); }
.filtro-dias { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2, .5rem) var(--e4, 1rem); margin: 0 0 1rem; }
.filtro-dias .campo { margin: 0; }
.filtro-dias input { width: 8rem; }
.botoes-linha { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.tabela-tempo td.num { white-space: nowrap; font-variant-numeric: tabular-nums; overflow-wrap: normal; word-break: keep-all; hyphens: none; }

/* ---------------------------------------------------------------------
   8. PASTA ("o processo é uma pasta"): aba + capa + barra única de 8 ações
   Protótipo aprovado: /tramita-testes/prototipo-pasta. Tokens de sempre (azul de ação, raio 12, borda 2, degrau).
   --------------------------------------------------------------------- */
.pasta { position: relative; margin: var(--e6) 0 var(--e4); }
.pasta-aba { position: absolute; top: -30px; left: 28px; height: 32px; margin: 0; padding: 0 18px; display: flex; align-items: center; gap: 10px;
  background: var(--fundo-suave); border: 2px solid var(--borda-bloco); border-bottom: 0; border-radius: 10px 10px 0 0;
  font-size: var(--t-menor); color: var(--tinta-suave); max-width: calc(100% - 44px); overflow: hidden; white-space: nowrap; }
.pasta-aba strong { color: var(--tinta); font-size: var(--t-apoio); font-variant-numeric: tabular-nums; }
.pasta-aba span { overflow: hidden; text-overflow: ellipsis; }
.capa { background: var(--superficie); border: 2px solid var(--borda-bloco); border-radius: var(--raio-bloco); padding: 18px 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 32px; align-items: start; }
.capa .migalha { margin: 0 0 var(--e2); }
.capa-titulo { font-size: var(--t-titulo2); line-height: 1.25; margin: 0; max-width: 46ch; overflow-wrap: anywhere; }
.capa-dados { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 8px 0 0; font-size: var(--t-apoio); }
.capa-dados div { display: flex; gap: 6px; min-width: 0; }
.capa-dados dt { color: var(--tinta-suave); flex: none; }
.capa-dados dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.capa-posse { border-left: 2px solid var(--borda-bloco); padding-left: 24px; max-width: 26rem; }
.capa-posse p { margin: 0; }
.capa-rotulo { font-size: var(--t-menor); color: var(--tinta-suave); }
.capa-quem { font-weight: 600; font-size: var(--t-destaque); overflow-wrap: anywhere; }
.capa-desde { margin-top: 4px !important; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }

.barra-pasta { position: sticky; top: 0; z-index: 5; background: var(--branco); padding: 12px 0 6px; margin-top: 6px; }
.barra-pasta-in { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.barra-form { display: contents; }
.acao { display: inline-flex; align-items: center; gap: 5px; min-height: var(--alvo); padding: 4px 9px; border-radius: var(--raio);
  border: 2px solid var(--marinho); border-bottom-width: 4px; border-bottom-color: var(--marinho-degrau); background: var(--superficie);
  color: var(--marinho); font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; white-space: nowrap; text-decoration: none; }
.acao .ic { width: 18px; height: 18px; flex: none; }
/* nome curto (Juntar, Despacho, Ofício) quando a tela não cabe os 8 nomes inteiros: o nome inteiro continua sendo o
   nome acessível (fica só visualmente oculto) */
@media (max-width: 1499px) {
  .acao-nome { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .acao .acao-curto { display: inline; white-space: nowrap; }
}
.acao:hover { background: var(--marinho-claro); }
.acao:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.acao-principal { background: var(--marinho); color: var(--branco); border-color: var(--marinho) var(--marinho) var(--marinho-degrau); }
.acao-principal:hover { background: var(--marinho-escuro); }
.acao[aria-current="page"] { background: var(--marinho-claro); }
.acao[aria-disabled="true"] { border: 2px dashed var(--linha-forte); color: var(--tinta-suave); background: transparent; cursor: not-allowed; }
.acao[aria-disabled="true"]:active { transform: none; margin-bottom: 0; }
.acao-curto { display: none; }
.acao-mais { position: relative; }
.acao-mais > summary { list-style: none; }
.acao-mais > summary::-webkit-details-marker { display: none; }
.acao-mais-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 18rem; margin: 0; padding: 6px;
  list-style: none; background: var(--superficie); border: 2px solid var(--borda-bloco); border-radius: var(--raio); box-shadow: 0 8px 28px var(--sombra); }
.acao-mais-lista a, .acao-mais-lista .botao-link { display: flex; align-items: center; min-height: var(--alvo); padding: 4px 10px; width: 100%;
  border: 0 !important; border-radius: 8px; text-align: left; color: var(--marinho); font-weight: 600; text-decoration: none; background: none; }
.acao-mais-lista a:hover, .acao-mais-lista .botao-link:hover { background: var(--marinho-claro); }
.acao-mais-lista form { margin: 0; }
.acao-mais-lista .so-celular { display: none; }
.mais-apagada { display: block; padding: 6px 10px; color: var(--tinta-suave); }
@media (max-width: 760px) { .acao-mais-lista .so-celular { display: block; } }
.barra-motivo { margin: 8px 0 0; font-size: var(--t-menor); color: var(--tinta-suave); min-height: 1.4em; }
.barra-motivo strong { color: var(--tinta); }

/* telas de ação da pasta (Juntar, Devolver, Carimbar, Arquivar) */
.lista-opcoes-pasta { list-style: none; margin: var(--e4) 0; padding: 0; display: grid; gap: var(--e3); }
.lista-opcoes-pasta li { border: 2px solid var(--borda-bloco); border-radius: var(--raio-bloco); background: var(--superficie);
  padding: var(--e4); display: flex; gap: var(--e4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.lista-opcoes-pasta .opcao-texto { min-width: 0; flex: 1 1 18rem; }
.lista-opcoes-pasta .opcao-texto strong { display: block; font-size: var(--t-apoio); }
.lista-opcoes-pasta .opcao-texto small { color: var(--tinta-suave); }
.lista-opcoes-pasta li.indisponivel { border-style: dashed; }
.carimbo-rotulo { display: inline-block; padding: 2px 12px; border: 2px solid var(--marinho); border-radius: 4px; color: var(--marinho);
  font-weight: 600; letter-spacing: .02em; transform: rotate(-2deg); }
.indisponivel .carimbo-rotulo { border-color: var(--linha-forte); color: var(--tinta-suave); }

/* Mesa: abas (filtros especiais) */
.abas-mesa { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--e4); padding: 0; list-style: none; }
.abas-mesa a { display: inline-flex; align-items: center; min-height: var(--alvo); padding: 4px 14px; border-radius: var(--raio);
  border: 2px solid var(--borda-bloco); color: var(--tinta); text-decoration: none; font-weight: 600; }
.abas-mesa .contador-menu { margin-left: 6px; }
.abas-mesa a[aria-current="page"] { border-color: var(--marinho); background: var(--marinho-claro); color: var(--marinho); }

@media (max-width: 900px) {
  .capa { grid-template-columns: 1fr; }
  .capa-posse { border-left: 0; padding-left: 0; border-top: 2px solid var(--linha); padding-top: 10px; max-width: none; }
}
@media (max-width: 760px) {
  .pasta { margin-top: var(--e6); }
  .pasta-aba { left: 16px; }
  .capa { padding: 14px 16px; }
  .capa-titulo { font-size: 1.25rem; }
  .capa-dados { font-size: var(--t-menor); }
  /* celular: barra fixa embaixo com as principais + "Mais"; folhas e caminho já viram gaveta (painel) */
  .barra-pasta { position: fixed; left: 0; right: 0; bottom: 0; top: auto; margin: 0; padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    background: var(--superficie); border-top: 2px solid var(--borda-bloco); z-index: 40; }
  /* UX 3: 4 principais + “Mais” sempre visível (sem rolagem escondida); Devolver, Carimbar, Ofício e Arquivar vão para o Mais */
  .barra-pasta-in { flex-wrap: nowrap; padding: 0 6px; gap: 4px; }
  .barra-pasta-in > [data-acao="devolver"], .barra-pasta-in > [data-acao="carimbar"], .barra-pasta-in > [data-acao="oficio"],
  .barra-pasta-in > [data-acao="arquivar"], .barra-pasta-in > .barra-form:has([data-acao="devolver"]) { display: none; }
  .barra-pasta-in > *, .barra-pasta-in > .barra-form > .acao { flex: 1 1 0; min-width: 0; }
  .acao-mais > summary { width: 100%; }
  .acao { flex-direction: column; gap: 2px; min-width: 0; min-height: 58px; padding: 6px 6px 4px; font-size: 12px; line-height: 1.15;
    white-space: normal; text-align: center; justify-content: center; }
  .acao-mais { position: static; }
  .acao-mais-lista { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); min-width: 0;
    z-index: 60; max-height: 70vh; overflow-y: auto; }
  .barra-motivo { padding: 0 12px; margin: 4px 0 0; font-size: 13px; min-height: 0; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  body:has([data-barra-pasta]) .conteudo { padding-bottom: 180px !important; }
  .painel-botoes { bottom: calc(116px + env(safe-area-inset-bottom)) !important; }
}
.botoes-form { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e4); }
.cabecalho-mesa { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); align-items: flex-end; justify-content: space-between; }

/* Fase 10: cópias de segurança, integrações (API), importador e documentação da API */
.texto-quebra { overflow-wrap: anywhere; min-width: 0; }
.passos-importar { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; margin: 0 0 var(--e4); padding: 0; }
.passos-importar li { border: 2px solid var(--borda-bloco); border-radius: var(--raio); padding: var(--e1) var(--e3);
  color: var(--tinta-suave); font-size: var(--t-apoio); }
.passos-importar li[aria-current="step"] { border-color: var(--marinho); color: var(--tinta); font-weight: 600; }
.grade-mapa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0 var(--e4); }
.grade-mapa select { width: 100%; max-width: 100%; }
.token-unico { margin: 0 0 var(--e3); }
.token-unico code, .api-exemplo { display: block; font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere;
  word-break: break-all; white-space: pre-wrap; background: var(--fundo-suave); border: 2px solid var(--borda-bloco);
  border-radius: var(--raio); padding: var(--e2) var(--e3); color: var(--tinta); }
.api-op { border-top: var(--fio); padding: var(--e3) 0; }
.api-op h3 { margin: 0 0 var(--e1); overflow-wrap: anywhere; }
.api-metodo { font-family: ui-monospace, Consolas, monospace; font-size: var(--t-apoio); border: 2px solid var(--borda-bloco);
  border-radius: var(--raio); padding: 0 var(--e2); }
.baixar-copia summary { white-space: nowrap; hyphens: none; cursor: pointer; color: var(--marinho); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.formulario-curto { margin-top: var(--e2); }
.formulario-curto .campo { margin-bottom: var(--e2); }