/* Plataforma Leite & Fontes — folha de estilo de produção (rodada "telas").
   Origem: docs/design/telas-2026-09-29/lf.css (protótipo aprovado em 29/09).
   Regras da casa:
   - CSP `default-src 'self'`: só recurso da própria origem (fontes em
     /estatico/fontes, marca em /estatico/marca); nenhum gabarito usa
     `style=` — toda variação vira classe aqui (tests/test_pwa.py).
   - Tokens em :root idênticos aos do protótipo (tests/test_design_system.py).
   - Uma marcação por tela; o celular (<= 899px) é o MESMO HTML reposicionado
     por @media no fim deste arquivo (decisão D5 do plano). */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url(/estatico/fontes/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url(/estatico/fontes/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url(/estatico/fontes/hanken-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url(/estatico/fontes/hanken-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;
  src:url(/estatico/fontes/cinzel-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url(/estatico/fontes/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url(/estatico/fontes/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;
  src:url(/estatico/fontes/cormorant-garamond-latin-500-italic.woff2) format("woff2")}

:root{
  /* Esquema claro declarado (CRM-2, etapa 0): sem ele o Chrome do Windows em tema escuro escolhia sozinho as cores da
     lista aberta dos <select>, e as opções apareciam em branco (tests/test_estilo_listas.py). */
  color-scheme:only light;                                     /* `only`: também recusa o escurecimento forçado do Chrome */
  --petroleo:#0F3D3B; --petroleo-escuro:#0A2C2A; --petroleo-700:#1F5652; --petroleo-100:#DCE8E4; --petroleo-50:#EEF3F1;
  --ouro:#B39460; --ouro-claro:#D9C9A3;
  /* Publicações novas no menu (spec §12, item 8): azul — o dourado agora é o número de revisão. Medido (WCAG, 11,5 px em negrito,
     mínimo 4,5:1): #1F4E8C sobre #DCE8F7 = 6,70:1 (computador); #F5F0E6 sobre #1F4E8C = 7,32:1 (celular). Travado em
     tests/test_navegacao_revisao.py. */
  --azul:#1F4E8C; --azul-fundo:#DCE8F7;
  --pedra:#5B6B68; --pedra-borda:#7C8A87;
  --marfim:#F5F0E6; --papel:#FFFDF9; --linha:#DCD6CA; --linha-suave:#E8E3D8; --realce:#F8F4EC;
  --tinta:#1B2A29;
  --sucesso:#2E6B45; --sucesso-fundo:#E2EFE5;
  --aviso:#6A4B08;   --aviso-fundo:#F2E2B8;
  --erro:#9E2A2B;    --erro-fundo:#F6E1DF;
  /* Tarefas: o fundo bem claro da tarefa atrasada (protótipo 2026-10-08) */
  --erro-leve:#FBF1EF;
  /* A2a: as cinco cores que o protótipo de 30/09 traz soltas (faixa do prazo, motivo de cancelamento, mensagens do CEP) */
  --aviso-faixa:#FAF0D6; --aviso-borda:#E0C77F; --erro-borda:#E3B3AE; --petroleo-borda:#B9CFC9; --sucesso-borda:#B5D3BE;
  --f-marca:'Cinzel',Georgia,serif;
  --f-titulo:'Cormorant Garamond',Georgia,serif;
  --f-texto:'Hanken Grotesk',system-ui,sans-serif;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--marfim);color:var(--tinta);font-family:var(--f-texto);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
body a{color:var(--petroleo);text-underline-offset:3px;text-decoration-thickness:1px}
body a:hover{color:var(--petroleo-escuro);text-decoration-thickness:2px}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%}
.num{font-variant-numeric:tabular-nums lining-nums}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:15px;height:15px}
.ic-lg{width:22px;height:22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Foco visível em todo interativo (WCAG 2.4.7): anel petróleo + halo ouro. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--petroleo);outline-offset:2px;box-shadow:0 0 0 4px rgba(179,148,96,.45)}
.topo a:focus-visible,.topo button:focus-visible,.topo-m a:focus-visible{outline-color:var(--marfim)}

/* "Pular para o conteúdo": invisível até receber foco. */
.pular{position:absolute;left:16px;top:-64px;z-index:20;padding:12px 18px;background:var(--petroleo);color:var(--marfim);font-weight:600;text-decoration:none;border:1px solid var(--ouro)}
body a.pular{color:var(--marfim)}
.pular:focus{top:8px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* ---------- Tipografia ---------- */
.marca-texto{font-family:var(--f-marca);font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.sobretitulo{font-family:var(--f-marca);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--pedra)}
.titulo{font-family:var(--f-titulo);font-weight:600;font-size:38px;line-height:1.1;color:var(--petroleo);letter-spacing:-.005em}
.titulo-2{font-family:var(--f-titulo);font-weight:600;font-size:23px;line-height:1.2;color:var(--petroleo)}
.titulo-3{font-size:15px;font-weight:600;color:var(--tinta)}
.apoio{color:var(--pedra)}
.pequeno{font-size:12.5px}
.rotulo{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--pedra)}

/* ---------- Cabeçalho (computador) ---------- */
.topo{height:64px;background:var(--petroleo);display:flex;align-items:center;gap:40px;padding:0 40px;border-bottom:1px solid var(--ouro)}
.topo .marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--marfim)}
.topo .marca img{width:38px;height:38px;display:block}
.topo .marca span{font-family:var(--f-marca);font-weight:600;font-size:14px;letter-spacing:.16em;color:var(--marfim)}
.nav{display:flex;align-items:stretch;height:64px;gap:2px}
.nav a,.nav .futuro{position:relative;display:flex;align-items:center;gap:6px;padding:0 14px;font-size:14px;font-weight:500;color:#BCC6C4;text-decoration:none}
.nav a:hover{color:var(--marfim)}
.nav a.ativo{color:var(--marfim);font-weight:600}
.nav a.ativo::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;background:var(--ouro)}
.nav .futuro{color:rgba(188,198,196,.5);cursor:not-allowed}
.nav .futuro small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(188,198,196,.35);padding:1px 5px;border-radius:2px}
.topo-usuario{margin-left:auto;display:flex;align-items:center;gap:14px;color:var(--marfim);font-size:14px}
.avatar{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--ouro);outline:1px solid rgba(179,148,96,.45);outline-offset:2px;font-family:var(--f-marca);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--marfim)}
.topo-usuario .sep{width:1px;height:22px;background:rgba(245,240,230,.25)}
body .topo-usuario a{color:var(--marfim);display:flex;align-items:center;gap:6px;text-decoration:none;min-height:44px}
body .topo-usuario a:hover{text-decoration:underline}
/* ---------- Barra de menu: NUNCA estoura a página, qualquer que seja o nome do usuário, os contadores ou a largura (900 a 1440 px; tests/test_barra_de_menu_navegador.py varre no Chromium) ----------
   Nada aqui depende da largura de um texto, e a PRIORIDADE é sempre a mesma, em qualquer largura, em três degraus de `flex-shrink` (1e12 / 1e6 / 1, longe o bastante para nenhuma fração de
   pixel vazar de um degrau para o seguinte): 1º o nome do usuário (reticências, depois só o avatar, que leva às Preferências); 2º o texto "LEITE & FONTES" (fica o selo); 3º os itens do menu,
   que rolam DENTRO da barra (com esmaecimento na ponta que tem mais, `barra.js`). O texto da marca é TUDO OU NADA e o nome nunca vira toco ("A…"): os dois moram numa caixa de UMA linha
   que quebra (`flex-wrap`) e recorta a segunda, então o que não cabe inteiro (a marca) ou com pelo menos 56 px (o nome, com reticências) cai para a linha escondida em vez de truncar —
   sem medir texto, sem corte por largura. Custo conhecido: enquanto a caixa da marca está entre o selo e o texto inteiro, a sobra fica em branco ao lado do selo. O avatar (34 px) nunca encolhe;
   o selo, o "?", o "Sair" e o "Ajuda" nunca encolhem nem rolam. A área do usuário não encolhe abaixo de 173 px: "?" 32 + avatar 42 + separador 1 + "Sair" 56 (largura reservada) + 3 vãos de 14. Espaçamentos crescem com a janela (`clamp`, inclinação bem menor que 1): a barra nunca fica pior quando a janela cresce. */
.topo{--nav-pad:clamp(7px,1.4vw - 5px,14px);gap:clamp(12px,4.4vw - 28px,40px);padding:0 clamp(12px,4.4vw - 28px,40px);min-width:0}
.topo .marca{flex:0 1000000 auto;min-width:38px;height:38px;flex-wrap:wrap;align-content:flex-start;overflow:hidden}
.topo .marca img,.topo .marca span{flex:none}
.topo .marca span{white-space:nowrap}
.nav{flex:0 1 auto;min-width:0}
.nav .nav-itens{display:flex;align-items:stretch;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:32px}
.nav .nav-itens::-webkit-scrollbar{display:none}
.nav .nav-itens.rola-dir{-webkit-mask-image:linear-gradient(to right,black calc(100% - 32px),transparent);mask-image:linear-gradient(to right,black calc(100% - 32px),transparent)}
.nav .nav-itens.rola-esq{-webkit-mask-image:linear-gradient(to left,black calc(100% - 32px),transparent);mask-image:linear-gradient(to left,black calc(100% - 32px),transparent)}
.nav .nav-itens.rola-esq.rola-dir{-webkit-mask-image:linear-gradient(to right,transparent,black 32px,black calc(100% - 32px),transparent);mask-image:linear-gradient(to right,transparent,black 32px,black calc(100% - 32px),transparent)}
.nav a,.nav .futuro{flex:none;white-space:nowrap;padding:0 var(--nav-pad)}
.nav a:focus-visible{outline-offset:-3px}
.nav a.ativo::after{bottom:0;left:var(--nav-pad);right:var(--nav-pad)}
.nav .futuro{display:none}
.topo-usuario{flex:0 1000000000000 auto;min-width:173px}
.topo-usuario>*{flex:none}
.topo-usuario form{width:56px}
body .topo-usuario a.topo-nome{position:relative;display:flex;align-items:center;gap:8px;flex:0 1000 auto;min-width:42px;max-width:220px;flex-wrap:wrap;align-content:flex-start;height:44px;overflow-x:visible;overflow-y:clip}
.topo-nome .avatar{flex:none;margin:5px 0}
.topo-nome-t{flex:1 1 0;min-width:56px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body .topo-usuario a.topo-nome:hover{text-decoration:none}
body .topo-usuario a.topo-nome:hover .topo-nome-t{text-decoration:underline}



/* ---------- Página ---------- */
.pagina{padding:28px 80px 72px}
.trilha{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--pedra);margin-bottom:14px}
.trilha .ic{width:13px;height:13px}
.cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:20px;border-bottom:1px solid var(--ouro);margin-bottom:28px}
.cabeca .acoes{display:flex;gap:10px;align-items:center}
.pilha{display:flex;flex-direction:column}
.linha{display:flex;align-items:center}
.g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}.g32{gap:32px}
.entre{justify-content:space-between}
.duas-colunas{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;align-items:start}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border:1px solid transparent;border-radius:2px;font-family:var(--f-texto);font-size:14px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;background:none}
body a.btn{text-decoration:none}
.btn-primario{background:var(--petroleo);color:var(--marfim);border-color:var(--petroleo)}
body a.btn-primario{color:var(--marfim)}
.btn-primario:hover{background:var(--petroleo-escuro)}
.btn-secundario{background:var(--papel);color:var(--petroleo);border-color:var(--petroleo)}
.btn-secundario:hover{background:var(--petroleo-50)}
.btn-sutil{color:var(--petroleo);padding:0 10px}
.btn-sutil:hover{background:var(--petroleo-50)}
.btn-perigo{background:var(--papel);color:var(--erro);border-color:var(--erro)}
body a.btn-perigo{color:var(--erro)}
.btn[disabled],.btn.desab{background:#E9E6DF;color:#6F7C79;border-color:#D3CEC3;cursor:not-allowed}
.btn-grande{height:48px;padding:0 22px;font-size:15px}
.btn-peq{height:34px;padding:0 12px;font-size:13px}
.btn-bloco{width:100%}
.btn-icone{width:42px;padding:0}
.foco-visivel{box-shadow:0 0 0 2px var(--papel),0 0 0 4px var(--petroleo)}

/* ---------- Campos ---------- */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label,.campo .legenda{font-size:13px;font-weight:600;color:var(--tinta)}
.campo .opcional{font-weight:400;color:var(--pedra)}
.dica{font-size:12.5px;color:var(--pedra)}
.entrada,body select,body textarea{width:100%;height:42px;padding:0 12px;border:1px solid var(--pedra-borda);border-radius:2px;background:var(--papel);font-family:var(--f-texto);font-size:14px;color:var(--tinta)}
/* A lista aberta não herda com segurança a cor do <select>: cor explícita nas opções e nos grupos; a marcada e a desativada
   perderiam o realce e o cinza do navegador, então também ganham cor (tests/test_estilo_listas.py). */
select option,select optgroup{color:var(--tinta);background:var(--papel)}
select option:checked{color:var(--tinta);background:var(--petroleo-100)}
select option:disabled{color:var(--pedra)}
select option:checked:disabled{background:var(--papel)}       /* --pedra sobre --petroleo-100 dá 4,46:1, abaixo do AA */
body textarea{height:auto;min-height:76px;padding:10px 12px;line-height:1.45;resize:vertical}
.entrada::placeholder,body textarea::placeholder{color:#5B6B68}
.entrada.foco,.foco{border-color:var(--petroleo);box-shadow:0 0 0 1px var(--petroleo),0 0 0 4px rgba(179,148,96,.45);outline:none}
.entrada.invalida,.entrada[aria-invalid="true"],body select[aria-invalid="true"],body textarea[aria-invalid="true"]{border-color:var(--erro);box-shadow:0 0 0 1px var(--erro)}
.entrada[disabled],.entrada.desab{background:#EFECE5;color:#6F7C79;border-color:#C9C3B7}
.msg-erro{display:flex;align-items:flex-start;gap:6px;font-size:13px;font-weight:500;color:var(--erro)}
.msg-erro .ic{width:16px;height:16px;margin-top:1px}
.sel{position:relative;display:block}
.sel select{appearance:none;-webkit-appearance:none;padding-right:36px}
.sel::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border-right:1.6px solid var(--petroleo);border-bottom:1.6px solid var(--petroleo);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.com-icone{position:relative;display:block}
.com-icone .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--pedra)}
.com-icone .entrada{padding-left:40px}
.grade-campos{display:grid;gap:18px 20px}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.intervalo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}
.opcao{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer}
.opcao input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--petroleo);flex:none}
.opcao-cartao{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--linha);border-radius:2px;background:var(--papel);cursor:pointer}
.opcao-cartao input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--petroleo);flex:none}
.opcao-cartao.marcada{border-color:var(--petroleo);box-shadow:inset 0 0 0 1px var(--petroleo);background:var(--petroleo-50)}

/* ---------- Selos de estado ---------- */
.selo{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:2px;font-size:12.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;border:1px solid transparent}
.selo::before{content:"";width:6px;height:6px;background:currentColor;flex:none}
.s-consulta{background:#E9E7E1;color:#46524F}
.s-contratado{background:var(--petroleo-100);color:var(--petroleo)}
.s-instrucao{background:#E8EBD9;color:#4A5620}
.s-peca{background:var(--aviso-fundo);color:var(--aviso)}
.s-protocolado{background:#EEE2E8;color:#5E3350}
.s-andamento{background:#DDEDE1;color:#25603A}
.s-encerrado{background:var(--petroleo);color:var(--marfim)}
.s-arquivado{background:transparent;color:var(--pedra);border:1px dashed var(--pedra-borda)}
.etiqueta{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:2px;font-size:12px;font-weight:600;background:var(--realce);border:1px solid var(--linha);color:var(--tinta)}
.etiqueta-ouro{border-color:var(--ouro);background:var(--papel);color:var(--petroleo)}
.etiqueta-nova{background:var(--petroleo);color:var(--marfim);border-color:var(--petroleo)}

/* ---------- Cartão ---------- */
.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:3px}
.cartao-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--linha-suave)}
.cartao-corpo{padding:20px}
.cartao-pe{padding:12px 20px;border-top:1px solid var(--linha-suave);display:flex;align-items:center;justify-content:space-between}
.contador{display:flex;flex-direction:column;gap:8px;padding:16px 18px;background:var(--papel);border:1px solid var(--linha);border-radius:3px;text-decoration:none;color:var(--tinta)}
body a.contador{text-decoration:none;color:var(--tinta)}
body a.contador:hover{border-color:var(--petroleo)}
.contador .n{font-family:var(--f-titulo);font-size:40px;line-height:1;font-weight:600;color:var(--petroleo);font-variant-numeric:lining-nums}

.cartao-caso{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--papel);border:1px solid var(--linha);border-radius:3px;text-decoration:none;color:var(--tinta)}
body a.cartao-caso{text-decoration:none;color:var(--tinta)}

/* ---------- Dados (rótulo / valor) ---------- */
.dados{display:grid;grid-template-columns:136px minmax(0,1fr);gap:12px 16px;font-size:14px}
.dados dt{color:var(--pedra);font-size:13px;padding-top:1px}
.dados dd{margin:0;color:var(--tinta)}

/* ---------- Tabela ---------- */
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th{text-align:left;padding:11px 16px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--pedra);background:var(--realce);border-bottom:1px solid var(--linha)}
.tabela td{padding:13px 16px;border-bottom:1px solid var(--linha-suave);vertical-align:top}
.tabela tr:last-child td{border-bottom:0}
.tabela tbody tr:hover td{background:#FAF6EE}
.tabela .sub{display:block;font-size:12.5px;color:var(--pedra);margin-top:2px}
.lf{font-weight:700;color:var(--petroleo);font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap}
body a.lf{text-decoration:none}
body a.lf:hover{text-decoration:underline}

/* ---------- Alertas ---------- */
.alerta{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid;border-radius:3px;font-size:14px}
.alerta .ic{width:20px;height:20px;margin-top:1px}
.alerta strong{display:block;margin-bottom:2px}
.a-info{background:var(--petroleo-50);border-color:#B9CFC9;color:var(--petroleo)}
.a-sucesso{background:var(--sucesso-fundo);border-color:#B5D3BE;color:var(--sucesso)}
.a-aviso{background:#FAF0D6;border-color:#E0C77F;color:var(--aviso)}
.a-erro{background:var(--erro-fundo);border-color:#E3B3AE;color:var(--erro)}
.alerta p{color:var(--tinta)}

/* ---------- Recolhível (details/summary, sem JS) ---------- */
.recolhe>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px}
.recolhe>summary::-webkit-details-marker{display:none}
.recolhe>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--petroleo);border-bottom:1.6px solid var(--petroleo);transform:rotate(45deg);margin:-4px 4px 0 auto}
.recolhe[open]>summary::after{transform:rotate(-135deg);margin-top:4px}

/* ---------- Fases (stepper) ---------- */
.fases{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:start}
.fase{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 4px}
.fase::after{content:"";position:absolute;top:12px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;background:var(--linha)}
.fase:last-child::after{display:none}
.fase.feita::after{background:var(--petroleo)}
.fase .marca-fase{width:26px;height:26px;display:grid;place-items:center;border:1.5px solid var(--pedra-borda);background:var(--papel);color:var(--marfim)}
.fase.feita .marca-fase{background:var(--petroleo);border-color:var(--petroleo)}
.fase.atual .marca-fase{background:var(--petroleo);border-color:var(--petroleo);outline:1.5px solid var(--ouro);outline-offset:3px}
.fase .marca-fase .ic{width:14px;height:14px;stroke-width:2.4}
.fase .nome{font-size:13px;font-weight:600;color:var(--tinta);margin-top:4px}
.fase.futura .nome{color:var(--pedra);font-weight:500}
.fase .quando{font-size:12px;color:var(--pedra)}
.fase.atual .nome{color:var(--petroleo)}
.saida-lateral{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px dashed var(--pedra-borda);border-radius:2px;color:var(--pedra);font-size:13px}
.saida-lateral .marca-fase{width:18px;height:18px;flex:none;border:1.5px dashed var(--pedra-borda)}

/* ---------- Linha do tempo ---------- */
.tempo{position:relative;padding-left:30px}
.tempo::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--linha)}
.evento{position:relative;padding-bottom:22px}
.evento:last-child{padding-bottom:0}
.evento::before{content:"";position:absolute;left:-30px;top:5px;width:11px;height:11px;background:var(--papel);border:1.5px solid var(--ouro)}
.evento.destaque::before{background:var(--petroleo);border-color:var(--petroleo);outline:1px solid var(--ouro);outline-offset:2px}
.de-para{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- Chips de filtro ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 6px 0 12px;border:1px solid var(--petroleo);border-radius:2px;background:var(--petroleo-50);color:var(--petroleo);font-size:13px;font-weight:600}
.chip button{width:26px;height:26px;display:grid;place-items:center;border:0;background:none;color:var(--petroleo);cursor:pointer;padding:0}

/* ---------- Entrar ---------- */
.entrar{display:grid;grid-template-columns:600px minmax(0,1fr);min-height:max(100vh,760px)}
.entrar-marca{position:relative;background:var(--petroleo);display:flex;flex-direction:column;justify-content:space-between;padding:56px 64px;color:var(--marfim)}
.entrar-marca::before{content:"";position:absolute;inset:24px;border:1px solid rgba(179,148,96,.55);pointer-events:none}
.entrar-marca::after{content:"";position:absolute;inset:30px;border:1px solid rgba(179,148,96,.25);pointer-events:none}
.entrar-form{display:flex;align-items:center;justify-content:center;padding:48px 48px 84px}
.codigo{width:100%;height:64px;padding:0 0 0 .55em;text-align:center;font-size:30px;font-weight:600;letter-spacing:.55em;font-variant-numeric:tabular-nums;color:var(--petroleo);border:1px solid var(--pedra-borda);background:var(--papel);border-radius:2px;font-family:var(--f-texto)}

/* Telas de entrada (Main/Codigo): tela cheia, sem o respiro da página pública. */
.entrar-pagina{padding:0}
.entrar{position:relative}
.entrar-logo{position:relative;display:block;width:400px;max-width:100%;height:auto;margin-left:-12px}
.entrar-apresenta{position:relative;display:flex;flex-direction:column;gap:16px;max-width:420px}
.entrar-nome{font-family:var(--f-titulo);font-size:44px;line-height:1.08;font-weight:500;font-style:italic;color:var(--marfim)}
.entrar-descricao{font-size:16px;line-height:1.6;color:#D9E0DE}
.entrar-rodape-marca{position:relative;display:flex;flex-direction:column;gap:6px;font-size:13px;color:#BCC6C4}
.entrar-rodape-marca .marca-texto{font-size:11px;color:var(--ouro-claro)}
.entrar-formulario{width:400px;max-width:100%;display:flex;flex-direction:column;gap:24px}
.titulo-entrar{font-size:44px}
.texto-form{font-size:15px}
.entrada-entrar{height:48px;font-size:15px}
.entrar-nota{display:flex;align-items:flex-start;gap:12px;padding-top:18px;border-top:1px solid var(--linha);color:var(--pedra);font-size:13.5px}
.entrar-nota .ic{margin-top:1px}
.entrar-nota-reenvio{flex-direction:column;align-items:stretch;gap:10px}
.link-outra-conta{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.entrar-ajuda{position:absolute;right:48px;bottom:28px;font-size:12.5px;color:var(--pedra)}
.codigo.invalida{border-color:var(--erro);box-shadow:0 0 0 1px var(--erro)}

/* ---------- Início, lista de casos e ficha do caso (Lote 5) ---------- */
.busca-geral{display:flex;align-items:center;gap:12px;margin-bottom:36px}
.busca-botao{height:52px;padding:0 28px}
.secao-espaco{margin-bottom:36px}
.quebra{flex-wrap:wrap}
.ver-todos{font-size:14px}
.cartao-lista{overflow:hidden}
.tabela-cartoes .c-quando{white-space:nowrap}
.busca-casos{margin-bottom:24px}
.busca-casos .busca-grande{height:48px}
.busca-casos .busca-botao{height:48px}
.filtros-corpo{display:flex;flex-direction:column;gap:20px;padding:8px 20px 20px;border-top:1px solid var(--linha-suave)}
.filtros-corpo .grade-campos{padding-top:12px}
.acoes-filtros{justify-content:flex-end}
.col-2{grid-column:span 2}
.sem-borda{border:0;padding:0;margin:0}
fieldset.campo legend{padding:0;margin-bottom:6px}
.contagem-casos{margin-bottom:12px}
.tinta{color:var(--tinta)}
.rodape-lista{align-items:center;margin-top:24px}
.mais-resultados{min-width:240px}
.tabela-casos .c-caso{width:290px}
.prescricao-proxima .sub,.prescricao-vencida .sub{color:inherit}
.tabela .sem-itens td{padding:28px 16px;color:var(--pedra);text-align:center}
/* Filtros: checkbox sem `name` (nunca vai no POST nem na URL) + <label for> + :checked.
   No computador o painel fica sempre à mostra (qualquer navegador, sem JS, CSP intacta);
   no celular começa recolhido e o rótulo abre/fecha. */
.filtros-casos{position:relative}
.filtros-toggle:checked~.filtros-painel{display:block}
.filtros-cab{display:flex;align-items:center;gap:10px;padding:4px 20px;min-height:44px;font-weight:600;color:var(--petroleo);cursor:pointer}
.filtros-cab::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--petroleo);border-bottom:1.6px solid var(--petroleo);transform:rotate(45deg);margin:-4px 4px 0 auto}
.filtros-toggle:checked+.filtros-cab::after{transform:rotate(-135deg);margin-top:4px}
.filtros-toggle:focus-visible+.filtros-cab{outline:2px solid var(--petroleo);outline-offset:2px;box-shadow:0 0 0 4px rgba(179,148,96,.45)}
.filtros-painel{display:none}
@media (min-width: 900px){
  .filtros-painel{display:block}
  .filtros-cab{cursor:default}
  .filtros-cab::after{display:none}
  /* O painel já está sempre aberto: o checkbox não faz nada aqui e não pode ser anunciado
     ("Filtros, caixa de seleção") nem receber foco. display:none o tira da árvore de
     acessibilidade e da ordem de Tab; o :checked do celular não é afetado. */
  .filtros-toggle{display:none}
}
/* Ficha do caso */
.cabeca-caso{align-items:flex-start}
.cabeca-texto{max-width:900px}
.titulo-caso{font-size:42px}
.acoes-caso{padding-top:26px}
.info-caso{font-size:14.5px}
.fases-corpo{display:flex;align-items:flex-start;gap:24px;padding:26px 24px 24px}
.fases-corpo .fases{flex-grow:1}
.lateral-fases{width:190px;flex:none;padding-left:24px;border-left:1px solid var(--linha-suave)}
.resumo-fases{text-align:right}
.fase.pulada .marca-fase{border-style:dashed}
.fase.pulada .marca-fase::before{content:"";width:9px;height:2px;background:var(--pedra-borda)}
.fase.pulada .nome{color:var(--pedra);font-weight:500}
.fase.pulada .quando{font-style:italic}
.fase.saida .marca-fase{border:1.5px dashed var(--pedra);background:var(--papel)}
.fase.saida .nome{color:var(--pedra)}
.fase.saida .quando{color:var(--pedra);font-style:italic}
.saida-lateral.atual{border:1px solid var(--petroleo);color:var(--petroleo);background:var(--petroleo-50);font-weight:600}
.saida-lateral.atual .marca-fase{border-color:var(--petroleo)}
.saida-lateral{flex-wrap:wrap}
.saida-lateral .quando{flex-basis:100%;padding-left:28px;font-weight:400;font-size:12px;text-align:left}
.acoes-recolhiveis{border-top:1px solid var(--linha-suave);padding:4px 20px 8px}
.acoes-recolhiveis .recolhe+.recolhe{border-top:1px solid var(--linha-suave)}
.acoes-recolhiveis .recolhe>summary{font-weight:600}
.recolhe-corpo{padding:4px 0 14px}
.dados .prazo{display:block}
.tabela-partes .c-acoes{width:1%;white-space:nowrap}
.tabela-partes td{vertical-align:middle}
.cartao-partes{overflow:visible}
/* F3b, D: os lados do caso no cartão de partes (os nossos clientes só para leitura, depois as contrapartes e os terceiros) */
.rotulo-lado{margin:0;padding:14px 20px 8px;font-size:13px;font-weight:600;line-height:1.3;color:var(--pedra)}
.lado-nosso{border-bottom:1px solid var(--linha-suave)}
.lista-lado{list-style:none;margin:0;padding:0 20px 14px;display:flex;flex-direction:column;gap:8px}
.lista-lado li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;overflow-wrap:anywhere}
.cartao-partes .dica.linha-dica{padding:12px 20px;border-top:1px solid var(--linha-suave)}   /* vence `.pilha-secoes .dica{padding:0 4px}` */
.lista-lado li .dica{padding:0}
.acao-parte{position:relative;display:inline-block;text-align:left;white-space:normal}
.acao-parte>summary{list-style:none;display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--petroleo);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.acao-parte>summary::-webkit-details-marker{display:none}
.painel-parte{position:absolute;right:0;top:100%;z-index:6;width:440px;display:flex;flex-direction:column;gap:14px;padding:16px;background:var(--papel);border:1px solid var(--linha);border-radius:3px;box-shadow:0 6px 24px rgba(15,61,59,.16)}
.painel-parte form{display:flex;flex-direction:column;gap:12px}
.painel-parte form+form{padding-top:12px;border-top:1px solid var(--linha-suave)}
.nova-parte{margin:8px 20px 20px;background:var(--realce);border:1px solid var(--linha-suave)}
.nova-parte>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:0 18px;min-height:48px;font-weight:600;color:var(--petroleo);cursor:pointer}
.nova-parte>summary::-webkit-details-marker{display:none}
.nova-parte-corpo{padding:4px 18px 18px}
.nova-parte-corpo form{display:flex;flex-direction:column;gap:16px}
.acoes-form-parte{justify-content:flex-end}
.processo-item{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:24px;padding:18px 20px;border-bottom:1px solid var(--linha-suave)}
.cnj{font-size:17px;font-weight:700}
.aviso-vinculo{margin:16px 20px 20px}
.aviso-vinculo ul{margin-top:6px;padding-left:0}
.historico{margin:22px 24px 24px}
.evento p{font-size:14px}

/* ---------- Complementos de produção (o protótipo os escrevia em style=) ---------- */
.futuro{cursor:not-allowed}
.link-botao{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.link-botao:hover{text-decoration:underline}
.topo-usuario form{margin:0}
.topo-m,.abas{display:none}
.abas .mais{position:relative;display:flex;align-items:stretch;justify-content:center}
.abas .mais>summary{list-style:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:56px;font-size:11.5px;font-weight:600;color:var(--pedra);cursor:pointer}
.abas .mais>summary::-webkit-details-marker{display:none}
.abas .mais[open]>summary{color:var(--petroleo)}
.mais-painel{position:absolute;right:8px;bottom:calc(100% + 8px);min-width:220px;padding:8px;background:var(--papel);border:1px solid var(--linha);border-radius:3px;box-shadow:0 6px 24px rgba(15,61,59,.16);display:flex;flex-direction:column;gap:2px}
.mais-painel a,.mais-painel .futuro,.mais-painel .link-botao{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;font-size:14px;font-weight:500;color:var(--tinta);text-decoration:none}
.mais-painel .futuro{color:var(--pedra)}
.mais-painel small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--pedra-borda);padding:1px 5px;border-radius:2px}
.titulo-pagina{font-size:44px}
.busca-grande{height:52px;font-size:15px;padding:0 28px}
.busca-grande.entrada{padding:0 14px 0 40px;text-overflow:ellipsis}
.busca-grande::placeholder{text-overflow:ellipsis}
.alternador{display:inline-flex;border:1px solid var(--pedra-borda);border-radius:2px;overflow:hidden;font-size:13px;font-weight:600}
.alternador a,.alternador span{display:inline-flex;align-items:center;min-height:32px;padding:6px 12px;text-decoration:none}
.alternador .ativo{background:var(--petroleo);color:var(--marfim)}
body .alternador a.ativo{color:var(--marfim)}
.contadores{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.moldura-dourada{border-color:var(--ouro);outline:1px solid var(--linha);outline-offset:3px}
.lf-destaque{display:inline-block;font-size:15px;padding:3px 10px;border:1px solid var(--ouro);outline:1px solid var(--linha);outline-offset:2px;background:var(--papel)}
.prescricao-proxima{color:var(--aviso);font-weight:600}
.prescricao-vencida{color:var(--erro);font-weight:600}
.ficha{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;align-items:start}
.ficha>.principal{grid-column:1;grid-row:1;min-width:0}
.ficha>.lateral{grid-column:2;grid-row:1;min-width:0}
.pilha-secoes{display:flex;flex-direction:column;gap:24px}
.negrito{font-weight:600}
.nowrap{white-space:nowrap}
.direita{text-align:right}
.cresce{flex-grow:1}
.topo-alinhado{align-self:flex-start}
.tabela td.num,.tabela td.nw{white-space:nowrap}
.dados dd{overflow-wrap:anywhere}
.passos{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--pedra)}
.passos .p{display:flex;align-items:center;gap:8px}
.passos .n{width:24px;height:24px;display:grid;place-items:center;border:1.5px solid var(--pedra-borda);font-size:12px}
.passos .p.feito .n,.passos .p.atual .n{background:var(--petroleo);border-color:var(--petroleo);color:var(--marfim)}
.passos .p.atual{color:var(--petroleo)}
.passos .p.atual .n{outline:1.5px solid var(--ouro);outline-offset:2px}
.passos .traco{width:40px;height:1px;background:var(--linha)}
.etiqueta{white-space:nowrap}
/* Vincular processo (Tarefa 22) */
.cartao-largo{max-width:900px}
.cartao-form{max-width:900px}   /* formulário que MANTÉM a moldura no celular (como o Novo caso) */
.entrada-grande{height:48px;font-size:16px;font-weight:600}
.quadro{padding:16px 18px;background:var(--realce);border:1px solid var(--linha-suave)}
.quadro ul{font-size:14px}
.o-que{display:flex;flex-direction:column;gap:8px}
.o-que li{position:relative;padding-left:18px;font-size:14px;color:var(--tinta)}
.o-que li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;background:var(--ouro)}
.o-que strong{font-weight:700}
.alerta-topo{margin-bottom:20px}
.recolhivel>summary{display:flex;align-items:center;gap:6px;min-height:44px;font-weight:600;color:var(--petroleo);cursor:pointer}
.recolhivel[open]>summary{margin-bottom:12px}
.recolhivel>summary::-webkit-details-marker{display:none}
.recolhivel>summary .ic{width:14px;height:14px;transition:transform .15s}
.recolhivel[open]>summary .ic{transform:rotate(90deg)}
.voltar-m{display:none}
.msg-erro-grande{font-size:14px}
.acoes-formulario{flex-wrap:wrap}

.publica{padding:48px 16px}
.conteudo-simples{max-width:24rem;margin:0 auto}
.pagina-erro{text-align:center}
.pagina-erro img{display:block;margin:0 auto 12px}
.pagina-erro .alerta{margin:16px 0;text-align:left}
.pagina-erro .titulo-2{margin:8px 0 4px}
.conteudo-simples label{display:block;margin-top:1rem;font-weight:600}
.conteudo-simples input:not([type=hidden]):not([type=checkbox]):not([type=radio]),.conteudo-simples select{width:100%;padding:.6rem;font-size:1rem}
.conteudo-simples button{margin-top:1.5rem;width:100%;padding:.7rem;font-size:1rem}

/* ---------- Telas do Lote 6: Novo caso, Editar caso, Clientes, fichas, Preferências ---------- */
.opcao-cartao:has(input:checked){border-color:var(--petroleo);box-shadow:inset 0 0 0 1px var(--petroleo);background:var(--petroleo-50)}
.duas-colunas-novo{grid-template-columns:minmax(0,1fr) 360px}
.form-corpo{gap:28px;padding:28px 32px 32px}
.grupo-form{border:0;margin:0;padding:0;min-width:0}
.grupo-form>legend{padding:0;margin-bottom:12px}
.grupo-form-sobre{padding-top:24px;border-top:1px solid var(--linha-suave)}
.grupo-form-sobre>legend{float:left;width:100%;margin-bottom:16px}
.grupo-form-sobre>legend+*{clear:both}
.cliente-escolhido{align-items:center;cursor:default}
.origens{gap:10px}
.origens .opcao-cartao{min-width:0}
.pe-form{padding:18px 32px;justify-content:flex-end;gap:12px;background:var(--realce)}
.dados-ao-criar{grid-template-columns:110px minmax(0,1fr)}
.dica.bloco{display:block}

/* Formulário do cliente em seções (rodada Q, T45). PF/PJ só com CSS: sem `:has()` o navegador
   mostra os dois grupos e as dicas `.so-dica` dizem a quem cada um vale (o servidor descarta o
   grupo que não é do tipo). */
.secao-form{border:0;margin:0;padding:0;min-width:0}
.secao-form>legend{padding:0;margin-bottom:16px}
.secao-form+.secao-form{padding-top:24px;border-top:1px solid var(--linha-suave)}
.secao-form+.secao-form>legend{float:left;width:100%;margin-bottom:0}
.secao-form+.secao-form>legend+*{clear:both}
.cartao-form:has(input[name="tipo_documento"][value="cnpj"]:checked) .so-pf{display:none}
.cartao-form:has(input[name="tipo_documento"]:not([value="cnpj"]):checked) .so-pj{display:none}
.so-dica{display:none}
legend .so-dica{font-family:var(--f-texto);font-size:14px;font-weight:400;color:var(--pedra)}
@supports not selector(:has(*)){.so-dica{display:block}legend .so-dica{display:inline}}

/* CRM-1c, R3: o representante legal no cadastro do cliente (tela 3s). Cada bloco é um quadro; o 2º nasce recolhido (details, sem JS).
   O cargo só aparece com «Administrador(a)»: `:has()` lê a opção marcada do seletor de tipo do próprio bloco; sem `:has()` o campo fica sempre à vista. */
.rep-bloco{border:1px solid var(--linha);border-radius:8px;padding:16px;background:var(--papel)}
.rep-bloco>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600;color:var(--petroleo)}
.rep-bloco>summary::-webkit-details-marker{display:none}
.rep-bloco[open]>summary{margin-bottom:12px}
.rep-cargo{display:none}
.rep-bloco:has([data-rep-tipo] option[value="administrador"]:checked) .rep-cargo{display:block}
@supports not selector(:has(*)){.rep-cargo{display:block}}
.rep-bloco .secao-form{padding:0;border:0}
.cartao h3.cartao-corpo{padding-bottom:0}   /* o título «Representante legal N» da ficha cola no bloco de dados dele (dois `cartao-corpo` seguidos somariam o respiro) */

.tabela-clientes .c-acoes{width:1%;white-space:nowrap;text-align:right}
.tabela-clientes td{vertical-align:middle}
.tabela-clientes .c-nome{width:46%}

.duas-colunas-cliente{grid-template-columns:440px minmax(0,1fr)}
.dados-cliente{gap:14px 16px}
.dados-cliente dd.num{font-size:15px}
.dados-cliente dd.num .apoio{font-size:14px}
.nq{white-space:nowrap}
.linha-selo{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.selo.q-completa{background:var(--sucesso-fundo);color:var(--sucesso)}
.selo.q-faltam{background:var(--aviso-fundo);color:var(--aviso)}
.pilha-secoes .dica{padding:0 4px}
.tabela-casos-cliente .c-resp,.tabela-processos-cliente .c-proc{white-space:nowrap}

.titulo-cnj{font-family:var(--f-texto);font-size:34px;font-weight:600;color:var(--petroleo);letter-spacing:.01em;line-height:1.15;overflow-wrap:anywhere}
.dados-processo{grid-template-columns:112px minmax(0,1fr)}
.caso-ligado{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-bottom:1px solid var(--linha-suave)}
.caso-ligado:last-child{border-bottom:0}
.sem-itens-lista{padding:24px 20px;color:var(--pedra)}
.corrigir>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;min-height:56px;padding:0 20px}
.corrigir>summary::-webkit-details-marker{display:none}
.corpo-corrigir{padding:4px 20px 20px}

.canal-linha{display:flex;align-items:flex-start;gap:14px;padding-bottom:20px;border-bottom:1px solid var(--linha-suave)}
.canal-icone{width:44px;height:44px;flex:none;display:grid;place-items:center;border:1px solid var(--ouro);color:var(--petroleo);background:var(--petroleo-50)}

/* ---------- Celular: a MESMA marcação, reposicionada (D5) ---------- */
@media (max-width: 899px){
  body{font-size:15px}
  .topo{display:none}
  .topo-m{height:60px;background:var(--petroleo);border-bottom:1px solid var(--ouro);display:flex;align-items:center;gap:12px;padding:0 8px 0 16px;color:var(--marfim)}
  .topo-m img{width:34px;height:34px;display:block}
  .topo-m .t{font-family:var(--f-marca);font-weight:600;font-size:13px;letter-spacing:.16em;color:var(--marfim)}
  .topo-m .btn-icone{margin-left:auto;width:44px;height:44px;color:var(--marfim);border:0}
  body .topo-m a.btn-icone{color:var(--marfim)}
  .abas{position:fixed;left:0;right:0;bottom:0;z-index:10;height:calc(66px + max(18px, env(safe-area-inset-bottom)));padding-bottom:max(18px, env(safe-area-inset-bottom));background:var(--papel);border-top:1px solid var(--linha);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .abas a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11.5px;font-weight:600;min-height:56px;text-decoration:none}
  body .abas a{color:var(--pedra);text-decoration:none}
  body .abas a.ativo{color:var(--petroleo)}
  .abas a.ativo::before{content:"";position:absolute;top:-1px;left:28%;right:28%;height:3px;background:var(--ouro)}
  .abas .mais .mais-painel a{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;min-height:44px;font-size:14px;font-weight:500}
  body .abas .mais-painel a{color:var(--tinta)}
  .abas .ic{width:22px;height:22px}
  .pagina{padding:20px 16px 112px}
  .trilha{display:none}
  .acoes-formulario{flex-direction:column;align-items:stretch}
  .cartao.cartao-largo{border:0;background:transparent}
  .cartao.cartao-largo>.cartao-corpo{padding:0}
  .cartao.cartao-largo>.pe-form{background:transparent;border-top:0;padding:16px 0 0}
  .voltar-m{display:flex;align-items:center;gap:4px;min-height:44px;margin-bottom:8px;font-weight:600}
  .titulo{font-size:30px}
  .titulo-pagina{font-size:30px}
  .cabeca{flex-direction:column;align-items:stretch;gap:14px}
  .cabeca .acoes{flex-wrap:wrap}
  .duas-colunas,.ficha,.c2,.c3,.c4{grid-template-columns:minmax(0,1fr)}
  .ficha>.principal,.ficha>.lateral{grid-column:1;grid-row:auto}
  .contadores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intervalo{grid-template-columns:minmax(0,1fr)}
  .entrada,body select,body textarea{height:48px;font-size:16px}
  body textarea{height:auto;min-height:96px}
  .btn{height:48px;font-size:15px}
  .btn-peq{height:44px}
  .btn-icone{width:48px}
  .dados{grid-template-columns:118px minmax(0,1fr)}
  .alternador a,.alternador span{min-height:44px}
  .chip{height:44px}
  .chip button{width:44px;height:44px}
  .passos{flex-wrap:wrap}
  /* Tabela vira cartões: cabeçalho some só visualmente (continua para leitor de tela). */
  .tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabela,.tabela tbody,.tabela tr,.tabela td{display:block;width:100%}
  .tabela tr{padding:14px 16px;border-bottom:1px solid var(--linha-suave)}
  .tabela tr:last-child{border-bottom:0}
  .tabela td{padding:4px 0;border-bottom:0}
  .tabela td[data-rotulo]::before{content:attr(data-rotulo);display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--pedra)}
  /* Início: busca sem botão (Enter envia), ações em duas colunas. */
  .busca-geral{margin-bottom:24px}
  .busca-botao{display:none}
  .cabeca .acoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cabeca .acoes:has(> :only-child){grid-template-columns:minmax(0,1fr)}
  .cabeca .acoes-tarefa{grid-template-columns:minmax(0,1fr)}   /* rótulos longos (Concluir delegação, Devolver para refazer): um por linha, nada cortado */
  .cabeca .acoes-tarefa .btn{width:100%}
  .contador{padding:12px 14px;gap:6px}
  .contador .n{font-size:30px}
  .secao-espaco{margin-bottom:24px}
  /* Lista de casos e recentes: cada linha da tabela vira um cartão. */
  .cartao-lista{border:0;background:transparent;overflow:visible}
  .cartao-lista>.cartao-cab{padding:0 0 12px;border-bottom:0}
  .tabela-cartoes tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:6px;margin-bottom:12px;padding:14px 16px;background:var(--papel);border:1px solid var(--linha);border-radius:3px}
  .tabela-cartoes tr:last-child{border-bottom:1px solid var(--linha)}
  .tabela-cartoes td{width:auto;min-width:0;padding:0}
  .tabela-cartoes .c-caso{grid-column:1;grid-row:1}
  .tabela-cartoes .c-caso .sub{font-size:15px;font-weight:600;color:var(--tinta);margin-top:4px;line-height:1.35}
  .tabela-cartoes .c-estado{grid-column:2;grid-row:1;justify-self:end}
  .tabela-cartoes .c-cliente{grid-column:1;grid-row:2;font-size:13px;color:var(--pedra)}
  .tabela-cartoes .c-quando{grid-column:2;grid-row:2;font-size:13px;color:var(--pedra);text-align:right}
  /* Lista de casos: cartão de 3 colunas (caso + estado / cliente / origem, responsável, prescrição). */
  .filtros-cab{padding:2px 16px;min-height:48px}
  .filtros-corpo{padding:8px 16px 16px}
  .col-2{grid-column:auto}
  .acoes-filtros{flex-direction:column;align-items:stretch}
  .busca-casos .busca-botao{display:none}
  .tabela-casos tr{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px}
  .tabela-casos .c-caso{grid-column:1 / 3}
  .tabela-casos .c-estado{grid-column:3}
  .tabela-casos .c-cliente{grid-column:1 / -1;font-size:13px;color:var(--tinta)}
  .tabela-casos .c-cliente .sub{display:inline;font-size:13px}
  .tabela-casos .c-cliente .sub::before{content:" · "}
  .tabela-casos .c-area{display:none}
  .tabela-casos td.c-caso[data-rotulo]::before,.tabela-casos td.c-cliente[data-rotulo]::before,.tabela-casos td.c-estado[data-rotulo]::before{display:none}
  .tabela-casos .c-origem,.tabela-casos .c-resp,.tabela-casos .c-presc{grid-row:3;margin-top:4px;padding-top:10px;border-top:1px solid var(--linha-suave);font-size:13px}
  .tabela-casos .c-origem{grid-column:1}
  .tabela-casos td.nw{white-space:normal}
  .tabela-casos .c-resp{grid-column:2}
  .tabela-casos .c-presc{grid-column:3}
  .tabela-casos td.c-origem[data-rotulo]::before,.tabela-casos td.c-resp[data-rotulo]::before,.tabela-casos td.c-presc[data-rotulo]::before{font-size:10.5px;letter-spacing:.04em;margin-bottom:2px}
  .tabela-casos .sem-itens{display:block}
  .tabela .sem-itens td{padding:20px 0}
  .mais-resultados{width:100%;min-width:0}
  .cabeca-compacta{flex-direction:row;align-items:center;gap:12px}
  .cabeca-compacta .sobretitulo{display:none}
  .rodape-lista{align-items:stretch;text-align:center}
  /* Ficha do caso */
  .titulo-caso{font-size:28px}
  .cabeca .acoes-caso [data-editar-caso]{display:none}   /* `Nova petição` (`:29`) fica à vista no celular; só "Editar dados" se esconde */
  .cabeca .acoes-caso{grid-template-columns:minmax(0,1fr)}
  .fases-corpo{flex-direction:column;align-items:stretch;gap:0;padding:14px 16px 4px}
  .lateral-fases{width:auto;padding:10px 0 14px;border-left:0;border-top:1px dashed var(--linha);margin-top:6px}
  .resumo-fases{text-align:left;font-size:12.5px}
  .cartao>.cartao-cab:has(.resumo-fases){flex-wrap:wrap}
  .cartao-cab{padding:14px 16px}
  .cartao-corpo{padding:16px}
  .rotulo-lado{padding-left:16px;padding-right:16px}
  .lista-lado{padding-left:16px;padding-right:16px}
  .cartao-partes .dica.linha-dica{padding:12px 16px}
  .acoes-recolhiveis{padding:0 16px}
  .acoes-recolhiveis .recolhe>summary{min-height:52px}
  .tabela-partes tr{grid-template-columns:minmax(0,1fr) auto}
  .tabela-partes .c-nome{grid-column:1;grid-row:1}
  .tabela-partes .c-papel{grid-column:2;grid-row:1;justify-self:end}
  .tabela-partes .c-doc{grid-column:1 / -1;grid-row:2;font-size:13px;color:var(--pedra)}
  .tabela-partes .c-acoes{grid-column:1 / -1;grid-row:3;width:auto;text-align:left}
  .tabela-partes .c-acoes:empty{display:none}
  .tabela-partes tr{border:0;margin:0;border-radius:0;border-bottom:1px solid var(--linha-suave);background:transparent}
  .tabela-partes tr:last-child{border-bottom:0}
  .painel-parte{position:static;width:auto;box-shadow:none;border:0;padding:8px 0 0;background:transparent}
  .acao-parte{display:block}
  .nova-parte{margin:8px 16px 16px}
  .processo-item{padding:14px 16px;flex-wrap:wrap;gap:8px}
  .aviso-vinculo{margin:12px 16px 16px}
  .historico{margin:16px 16px 12px}
  /* Fases: o mesmo <ol class="fases"> vira a lista vertical do celular. */
  .fases{display:flex;flex-direction:column;align-items:stretch}
  .fase{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;padding:7px 0}
  .fase::after{left:12px;right:auto;top:30px;bottom:-9px;width:2px;height:auto}
  .fase .marca-fase{width:24px;height:24px;position:relative;z-index:1}
  .fase .nome{font-size:14.5px;margin-top:0}
  .fase .quando{font-size:12.5px}
  .saida-lateral{flex-wrap:wrap}
  /* Entrar: painel da marca reduzido, formulário embaixo. */
  .entrar{grid-template-columns:minmax(0,1fr);min-height:100vh}
  .entrar-marca{padding:28px 24px;gap:20px}
  .entrar-marca::before{inset:12px}
  .entrar-marca::after{inset:16px}
  .entrar-form{flex-direction:column;justify-content:flex-start;align-items:center;gap:28px;padding:28px 16px 32px}
  .entrar-logo{width:230px;margin-left:-6px}
  .entrar-nome{font-size:30px}
  .entrar-descricao,.entrar-rodape-marca span:last-child{display:none}
  .entrar-apresenta{gap:8px}
  .titulo-entrar{font-size:34px}
  .entrada-entrar{height:48px;font-size:16px}
  .entrar-ajuda{position:static;text-align:left;width:400px;max-width:100%}
  .codigo{height:64px;font-size:26px}
  /* Novo caso */
  .duas-colunas-novo{grid-template-columns:minmax(0,1fr)}
  .form-corpo{gap:22px;padding:18px 16px 20px}
  .pe-form{padding:14px 16px;flex-direction:column-reverse;align-items:stretch}
  .pe-form .btn{width:100%}
  .dados-ao-criar{grid-template-columns:110px minmax(0,1fr)}
  /* Clientes: cada linha vira um cartão (nome, documento, ação). */
  .tabela-clientes tr{grid-template-columns:minmax(0,1fr)}
  .tabela-clientes .c-nome,.tabela-clientes .c-doc,.tabela-clientes .c-acoes{grid-column:1}
  .tabela-clientes .c-nome{width:auto}
  .tabela-clientes .c-doc{font-size:13px;color:var(--pedra)}
  .tabela-clientes td[data-rotulo]::before{display:none}
  .tabela-clientes .c-acoes{width:auto;text-align:left;padding-top:8px}
  .tabela-clientes .c-acoes:empty{display:none}
  .tabela-clientes .c-acoes .btn{width:100%}
  /* Ficha do cliente: as tabelas viram cartões (caso + estado / área / responsável). */
  .duas-colunas-cliente{grid-template-columns:minmax(0,1fr)}
  .tabela-casos-cliente tr{grid-template-columns:minmax(0,1fr) auto}
  .tabela-casos-cliente .c-caso{grid-column:1;grid-row:1}
  .tabela-casos-cliente .c-caso .sub{font-size:15px;font-weight:600;color:var(--tinta);margin-top:4px}
  .tabela-casos-cliente .c-estado{grid-column:2;grid-row:1;justify-self:end;text-align:right}
  .tabela-casos-cliente .c-area,.tabela-casos-cliente .c-resp{grid-column:1 / -1;font-size:13px}
  .tabela-casos-cliente td[data-rotulo]::before,.tabela-processos-cliente td[data-rotulo]::before{display:none}
  .tabela-processos-cliente tr{grid-template-columns:minmax(0,1fr) auto}
  .tabela-processos-cliente .c-proc{grid-column:1;grid-row:1}
  .tabela-processos-cliente .c-caso-lf{grid-column:2;grid-row:1;justify-self:end}
  .tabela-processos-cliente .c-trib,.tabela-processos-cliente .c-polo{grid-column:1 / -1;font-size:13px}
  .tabela-processos-cliente .c-polo{color:var(--pedra)}
  /* Ficha do processo */
  .titulo-cnj{font-size:24px}
  .caso-ligado{padding:14px 16px}
  .corrigir>summary{padding:0 16px}
  .corpo-corrigir{padding:4px 16px 16px}
  .cabeca .acoes-cliente{grid-template-columns:minmax(0,1fr)}
  body .marcar-vista{flex-direction:column;align-items:stretch}
  .marcar-vista>form,.marcar-vista .btn{width:100%}
}

/* ---------- A2a — publicações, caixa, passo 2, andamentos, CEP (protótipo de 30/09) ---------- */
/* Publicação (lf.css do protótipo de 30/09) */
.pub{display:grid;grid-template-columns:78px minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--linha-suave)}
.pub:last-child{border-bottom:0}
.pub-data{text-align:center;padding:8px 0 10px;border:1px solid var(--ouro);outline:1px solid var(--linha);outline-offset:3px;background:var(--papel);height:max-content}
.pub-data .d{font-family:var(--f-titulo);font-size:32px;font-weight:600;line-height:1;color:var(--petroleo);font-variant-numeric:lining-nums}
.pub-data .m{font-family:var(--f-marca);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--pedra);margin-top:4px}
.trecho{font-size:14.5px;line-height:1.6;color:var(--tinta)}
.teor{margin-top:12px;border-top:1px solid var(--linha-suave)}
.teor>summary{font-weight:600;color:var(--petroleo);font-size:14px}
/* Pedidos dos sócios: o "Ler inteiro teor" de quem faz a triagem é um botão de formulário (POST que marca como vista) com a
   cara do <summary> do teor */
.ler-teor{margin-top:12px;border-top:1px solid var(--linha-suave)}
.ler-teor-botao{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;cursor:pointer;font-weight:600;color:var(--petroleo);font-size:14px}
.ler-teor-botao::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--petroleo);border-bottom:1.6px solid var(--petroleo);transform:rotate(45deg);margin:-4px 4px 0 auto}
/* Publicações novas (`:21`, protótipo docs/design/telas-2026-10-08-publicacoes): os grupos da lista Novas, o caso e o responsável no
   cartão, e o quadro "Marcar como vista" de quem lê a publicação de um caso alheio. O quadro só aparece com o teor aberto — CSS puro,
   funciona sem JavaScript. */
.grupo{display:flex;flex-direction:column;gap:10px}
.grupo-cab{display:flex;flex-direction:column;gap:2px}
.grupo-cab .titulo-2{margin:0}
.pub-caso{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14px;margin:0}
.pub-caso .caso-titulo{color:var(--tinta)}
.pub-resp{font-size:13px;color:var(--pedra);margin:0}
.pub-resp strong{color:var(--tinta);font-weight:600}
.marcar-vista{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;margin-top:4px;background:var(--aviso-faixa);border:1px solid var(--aviso-borda);border-radius:3px}
.marcar-vista p{margin:0;font-size:13.5px;color:var(--tinta);max-width:62ch}
.marcar-vista strong{display:block;margin-bottom:2px}
.marcar-vista>form{flex:none}
.teor:not([open])~.marcar-vista{display:none}
.ler-teor-botao:focus-visible{outline:2px solid var(--petroleo);outline-offset:2px}
.teor-texto{padding:16px 20px;background:var(--realce);border:1px solid var(--linha-suave);border-radius:2px;font-size:14px;line-height:1.65;color:var(--tinta);display:flex;flex-direction:column;gap:10px}
.pub{position:relative}
.pub:not(:last-child)::before{content:"";position:absolute;left:39px;top:106px;bottom:-18px;width:1px;background:var(--ouro-claro)}

/* a2a.css do protótipo (sem `.app` e `.mail-*`; cores soltas viraram tokens do :root) */
.nav a .cont{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--azul-fundo);color:var(--azul);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums lining-nums;line-height:1}
.abas.cinco{grid-template-columns:repeat(5,minmax(0,1fr))}
.abas .ic-aba{position:relative;display:block;width:22px;height:22px}
.abas .cont-aba{position:absolute;top:-6px;right:-12px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--azul);color:var(--marfim);font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1}
.abas.cinco a{font-size:11px}
.col-2{grid-column:span 2}
.col-3{grid-column:span 3}
.sep-topo{padding-top:16px;border-top:1px solid var(--linha-suave)}
.faixa-prazo{display:flex;align-items:flex-start;gap:14px;padding:14px 20px;margin-bottom:24px;background:var(--aviso-faixa);border:1px solid var(--aviso-borda);border-radius:3px;color:var(--aviso)}
.faixa-prazo .ic{width:22px;height:22px;margin-top:1px}
.faixa-prazo p{color:var(--tinta);font-size:14px;line-height:1.5}
.faixa-prazo strong{color:var(--aviso)}
.pub-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pub-cab .esq{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.pub-meta{font-size:13px;color:var(--pedra)}
.pub-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.pub-vista{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sucesso);font-weight:600}
.pub-vista .ic{width:16px;height:16px}
.pub-vista span{color:var(--pedra);font-weight:500}
.pub-nova{box-shadow:inset 3px 0 0 var(--ouro)}
.teor-texto.puro{display:block;white-space:pre-wrap;font-family:var(--f-texto)}
/* Texto de TERCEIRO (teor, nomes, andamentos, motivos do tribunal): uma URL longa ou uma linha de "______" não pode
   passar da borda do cartão nem dar rolagem horizontal. `anywhere` (e não `break-word`) também baixa a largura
   mínima do item de flex/grid. */
.teor-texto.puro,.trecho,.pub-meta,[data-link-recusado],.motivo-cancel span,.motivo-arq span,.parte-nome,.parte-linha,.contraparte,.and-nome,.and-compl,.inicio-pub-trecho,.inicio-pub-caso{overflow-wrap:anywhere}
/* Pedidos dos sócios (033): a observação do processo — quebras de linha do texto, sem HTML (autoescape) */
.observacao{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
.observacao-quando{display:block;margin-top:4px}
.pub.cancelada .trecho{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--pedra)}
.pub.cancelada .pub-data{opacity:.65}
.etiqueta-cancelada{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro)}
.motivo-cancel{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;background:var(--erro-fundo);border:1px solid var(--erro-borda);border-radius:2px;font-size:13.5px;color:var(--tinta)}
.motivo-cancel .ic{width:16px;height:16px;color:var(--erro);margin-top:2px}
.ver-tribunal{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600}
.etiqueta-tribunal{background:var(--papel);border-color:var(--pedra-borda);color:var(--pedra)}
.caixa-lista .pub{padding:22px 24px}
.caixa-lista .pub:not(:last-child)::before{display:none}
.caixa-lista .pub.nova{box-shadow:inset 3px 0 0 var(--ouro)}
.arquivar-form{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--realce);border:1px solid var(--linha);border-radius:2px;margin-top:6px}
.segmentos{display:inline-flex;border:1px solid var(--pedra-borda);border-radius:2px;overflow:hidden;font-size:13.5px;font-weight:600}
.segmentos a{padding:9px 16px;text-decoration:none;color:var(--petroleo);display:flex;align-items:center;gap:8px;min-height:44px}
.segmentos a[aria-current="true"]{background:var(--petroleo);color:var(--marfim)}
.segmentos .n{font-variant-numeric:tabular-nums lining-nums;opacity:.9}
.vazio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:64px 40px}
.vazio .selo-vazio{width:72px;height:72px;display:grid;place-items:center;border:1px solid var(--ouro);outline:1px solid var(--linha);outline-offset:4px;background:var(--papel);color:var(--petroleo)}
.vazio .selo-vazio .ic{width:32px;height:32px;stroke-width:1.4}
.passos-simples{display:flex;flex-direction:column;gap:14px;counter-reset:ps}
.passos-simples li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:14px}
.passos-simples li::before{counter-increment:ps;content:counter(ps);width:26px;height:26px;display:grid;place-items:center;border:1.5px solid var(--ouro);font-weight:700;font-size:12.5px;color:var(--petroleo)}
.fonte-linha{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--linha-suave)}
.fonte-linha:first-child{border-top:0;padding-top:0}
.fonte-linha .ic{width:20px;height:20px;margin-top:1px}
.fonte-ok .ic{color:var(--sucesso)}
.fonte-falha .ic{color:var(--aviso)}
.polo-grupo{display:flex;flex-direction:column;gap:8px}
.parte-escolha{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--linha);border-radius:2px;background:var(--papel);cursor:pointer}
.parte-escolha input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--petroleo);flex:none}
.parte-escolha.marcada{border-color:var(--petroleo);box-shadow:inset 0 0 0 1px var(--petroleo);background:var(--petroleo-50)}
.contraparte{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--realce);border:1px solid var(--linha-suave);border-radius:2px;font-size:14px}
.contraparte input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--petroleo);flex:none}
.bloco-resultado{display:flex;flex-direction:column;gap:20px;padding:32px 36px}
.fonte-datajud{display:flex;align-items:flex-start;gap:10px;padding:12px 20px;background:var(--realce);border-bottom:1px solid var(--linha-suave);font-size:13.5px;color:var(--tinta)}
.fonte-datajud .ic{width:17px;height:17px;margin-top:2px;color:var(--pedra)}
.and-data{font-size:12.5px;font-weight:700;color:var(--pedra);font-variant-numeric:tabular-nums lining-nums;letter-spacing:.02em}
.and-nome{font-size:14.5px;font-weight:600;color:var(--tinta)}
.and-compl{font-size:13.5px;color:var(--pedra)}
.sem-cobertura{display:flex;flex-direction:column;gap:12px;padding:24px 24px 28px}
.sem-cobertura .selo-vazio{width:44px;height:44px;display:grid;place-items:center;border:1px dashed var(--pedra-borda);color:var(--pedra)}
.parte-linha{display:flex;flex-direction:column;gap:2px}
.polo-rotulo{display:flex;align-items:center;justify-content:space-between}
.cep-msg{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border:1px solid;border-radius:2px;font-size:13.5px;line-height:1.45}
.cep-msg .ic{width:18px;height:18px;margin-top:1px}
.cep-msg p{color:var(--tinta)}
.cep-msg.buscando{background:var(--petroleo-50);border-color:var(--petroleo-borda);color:var(--petroleo)}
.cep-msg.ok{background:var(--sucesso-fundo);border-color:var(--sucesso-borda);color:var(--sucesso)}
.cep-msg.nao-achou{background:var(--aviso-faixa);border-color:var(--aviso-borda);color:var(--aviso)}
.entrada.auto{background:var(--realce);border-color:var(--ouro)}
.grupo-cep{display:flex;gap:8px;align-items:center}
.grupo-cep .entrada{width:140px;flex:none}
.grupo-cep .btn{flex:none}
.cep-msg.invalido{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro)}
/* Região viva sem estado: continua na árvore de acessibilidade (o leitor de tela só anuncia mudança numa
   região que já existia), mas fora do fluxo — sem caixa vazia nem espaço a mais entre os campos. */
.cep-msg:empty{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
.sel select.auto{background-color:var(--realce);border-color:var(--ouro)}
.estado-cep{display:flex;flex-direction:column;gap:12px}

/* Ícone que gira (CEP buscando): só quando a pessoa não pediu menos movimento (WCAG 2.3.3) */
@media (prefers-reduced-motion: no-preference){
  .giro{animation:giro 1s linear infinite;transform-origin:50% 50%}
  @keyframes giro{to{transform:rotate(360deg)}}
}

/* O `.m` do protótipo é o celular: aqui, a mesma marcação reposicionada pelo ponto de quebra do arquivo */
@media (max-width: 899px){
  .pub{grid-template-columns:minmax(0,1fr);gap:10px;padding:18px 0}
  .pub::before{display:none}
  .pub:not(:last-child)::before{display:none}
  .pub-data{display:flex;align-items:baseline;gap:8px;width:max-content;padding:4px 10px;outline:0;border-color:var(--ouro)}
  .pub-data .d{font-size:20px}
  .pub-data .m{margin-top:0;font-size:10.5px}
  .caixa-lista .pub{padding:18px 16px}
  .btn-bloco-m{width:100%}
  .pub-acoes{flex-direction:column;align-items:stretch}
  .pub-acoes .btn{width:100%}
  .fonte-datajud{padding:12px 16px}
  .faixa-prazo{padding:14px 16px}
  .grupo-cep{flex-direction:column;align-items:stretch}
  .grupo-cep .entrada{width:auto}
  .bloco-resultado{padding:20px 16px}
  .vazio{padding:40px 16px}
}

/* ---------- A2a — caixa "Publicações sem processo" (Tarefa 24) ----------
   Variações que o protótipo faz com `style=` (proibido pela CSP) viram classe aqui. */
.duas-colunas-caixa{grid-template-columns:minmax(0,1fr) 360px}
.apoio-titulo{font-size:15px}
.coleta-info{text-align:right}
.pub-cnj{font-size:17px;font-weight:700;color:var(--petroleo)}
.pub.cancelada .pub-cnj{color:var(--tinta)}
.resumo-caixa strong{color:var(--tinta)}
.vazio-titulo{font-size:28px}
.vazio-texto{max-width:520px;font-size:15px}
.motivo-arq{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;background:var(--realce);border:1px solid var(--linha-suave);border-radius:2px;font-size:13.5px}
.motivo-arq .ic{width:16px;height:16px;margin-top:2px;color:var(--pedra)}
.pub-acoes form{margin:0}
/* "Arquivar" é um <details> (abre sem JS): fechado é só o botão na linha das ações; aberto vira a
   caixa do protótipo, em linha própria, com o botão no topo. */
details.arquivar-form{display:block}   /* nunca flex: o <details> não distribui bem summary + conteúdo */
details.arquivar-form:not([open]){padding:0;background:none;border:0;margin-top:0}
details.arquivar-form>summary{list-style:none;cursor:pointer}
details.arquivar-form>summary::-webkit-details-marker{display:none}
details.arquivar-form[open]{flex-basis:100%}
details.arquivar-form[open]>summary{display:inline-flex;margin-bottom:10px;background:var(--petroleo-50)}
.arquivar-corpo{display:flex;flex-direction:column;gap:10px}
.arquivar-form textarea.entrada{height:auto;min-height:88px;padding:10px 12px;line-height:1.45;resize:vertical}
@media (max-width: 899px){
  .duas-colunas-caixa{grid-template-columns:minmax(0,1fr)}
  /* O número do processo desce para a linha de baixo das etiquetas e o "Achada pela…" para a
     linha de baixo da data (a mesma marcação do computador). */
  .pub-cab .esq .pub-cnj{flex:0 0 100%}
  .pub-oab{display:block}
  .pub-oab .pub-sep{display:none}
  .pub-acoes{flex-wrap:nowrap}
  details.arquivar-form[open]{flex-basis:auto}
  .pub-acoes form,.pub-acoes .btn,details.arquivar-form,details.arquivar-form>summary{width:100%}
  .linha-segmentos{flex-direction:column;align-items:stretch;gap:10px}
  .segmentos{display:flex}
  .segmentos a{flex:1;justify-content:center}
  .coleta-info{text-align:left}
}

/* ---------- A2a — passo 2 do vínculo "Quais são os nossos clientes?" (Tarefas 26a/26b) ----------
   Variações que o protótipo faz com `style=` (proibido pela CSP) viram classe aqui. */
.duas-colunas-vinculo{grid-template-columns:minmax(0,1fr) 380px}
.corpo-vinculo{padding:24px 28px}
.bloco-partes{border:0;margin:0;padding:24px 28px;border-top:1px solid var(--linha-suave);min-width:0}
.bloco-partes>legend+*{margin-top:0}
.titulo-vinculo{font-size:28px}
.texto-15{font-size:15px}
.texto-16{font-size:16px}
.alerta-grande{padding:18px 20px}
.parte-nome{font-size:15px}
.parte-corpo{flex-grow:1;min-width:0}
.linha-parte{gap:6px 12px;flex-wrap:wrap}
.parte-escolha.nenhuma{border-style:dashed}
.pe-partes{padding:18px 28px;justify-content:flex-end;gap:12px;background:var(--realce)}
.bloco-aviso-polo{padding:0 28px 24px}
legend.legenda-contrapartes{padding:0;float:left;width:100%;font-size:16px}
.legenda-contrapartes+p{clear:both}
.linha-dica{display:flex;gap:8px;align-items:flex-start}
.linha-dica .ic{margin-top:2px;flex:none}
.topo-item{align-items:flex-start}
.ic-ok{color:var(--sucesso);margin-top:1px;flex:none}
.ic-motivo{color:var(--petroleo);margin-top:2px;flex:none}
.ic-passo{width:13px;height:13px;stroke-width:2.4}
.sem-margem .aviso-vinculo{margin:0}
@media (max-width: 899px){
  .duas-colunas-vinculo{grid-template-columns:minmax(0,1fr)}
  .corpo-vinculo,.bloco-partes{padding:16px}
  .titulo-vinculo{font-size:24px}
  .pe-partes{padding:14px 16px;flex-direction:column-reverse;align-items:stretch}
  .pe-partes .btn{width:100%}
  .bloco-aviso-polo{padding:0 16px 16px}
  /* a etiqueta "já é cliente deste caso" desce para a linha de baixo do nome, como no M-Vinculo */
  .linha-parte{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---------- Vários clientes, F3 — passo 2 com caixas (protótipo docs/design/telas-2026-10-04-f3, f3.css) ---------- */
.parte-escolha:has(input:checked){border-color:var(--petroleo);box-shadow:inset 0 0 0 1px var(--petroleo);background:var(--petroleo-50)}
.etiqueta.quebra-et{white-space:normal;height:auto;min-height:22px;padding:3px 8px;line-height:1.3;text-align:left}
.contrapartes-djen{border:0;margin:0;padding:0;min-width:0}
.passo-2b .bloco-aviso-polo{padding:0}
.resumo-marcou{padding:14px 16px;background:var(--realce);border:1px solid var(--linha);border-radius:3px;font-size:14.5px;line-height:1.5}
.resumo-marcou strong{overflow-wrap:anywhere}
.fica-como-esta{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:var(--realce);border:1px solid var(--linha);border-radius:3px}
.pe-partes [data-atualizar]{order:1}
.pe-partes button[value=confirmar]{order:2}
.bloco-cliente{margin:0;min-width:0;padding:18px 20px 20px;background:var(--realce);border:1px solid var(--linha);border-radius:3px;display:flex;flex-direction:column;gap:10px}
.bloco-cliente>legend{padding:0;float:left;width:100%;margin-bottom:10px;font-size:15px;font-weight:600;color:var(--tinta);overflow-wrap:anywhere}
.bloco-cliente>legend+*{clear:both}
.opcao-cartao .corpo-opcao{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 0}
.opcao-cartao .linha-opcao{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.opcao-cartao .linha-opcao strong{overflow-wrap:anywhere}
.opcao-criar .criar-campos{display:none;flex-direction:column;gap:14px;padding:16px;border:1px solid var(--petroleo);border-top:0;border-radius:0 0 2px 2px;background:var(--papel)}
.opcao-criar:has(> .opcao-cartao input:checked) > .opcao-cartao{border-radius:2px 2px 0 0}
.opcao-criar:has(> .opcao-cartao input:checked) > .criar-campos{display:flex}
.criar-campos fieldset{border:0;margin:0;padding:0;min-width:0}
.aviso-linha{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;background:var(--petroleo-50);border:1px solid var(--petroleo-borda);border-radius:3px;color:var(--petroleo);font-size:14px}
.aviso-linha .ic{width:20px;height:20px;margin-top:1px;flex:none}
.aviso-linha p{color:var(--tinta)}
@media (max-width: 899px){
  .bloco-cliente{padding:16px 14px}
  .opcao-criar .criar-campos{padding:14px}
  .parte-escolha,.bloco-cliente .opcao-cartao,.criar-campos .opcao-cartao{padding:14px}
  .criar-campos .grade-campos.c2{grid-template-columns:minmax(0,1fr)}
}

/* ---------- A2a — ficha do processo (Tarefas 29 e 30) ----------
   Colunas da prancha `Ficha`: principal (publicações, andamentos) e lateral (dados, partes, casos). No
   celular as duas colunas se achatam (`display: contents`) e cada cartão tem a posição do `M-Ficha`:
   publicações, partes, andamentos, dados, casos vinculados, correção. */
/* "Corrigir dados" é o ÚLTIMO filho de `.ficha-processo` (o foco do celular passa por Partes e Casos antes
   dele); no desktop volta para sob os andamentos (coluna 1, linha 2) e a lateral cobre as duas linhas. */
.ficha-processo{row-gap:24px}
.ficha-processo>[data-secao="corrigir"]{grid-column:1;grid-row:2}
.ficha-processo.com-corrigir{grid-template-rows:auto 1fr}
.ficha-processo.com-corrigir>.lateral{grid-row:1 / span 2}
.pubs-ficha{padding:0 24px}
.alerta-fonte{margin:16px 24px 0}
.vazio-ficha{display:flex;flex-direction:column;gap:6px;padding:28px 24px}
.pub-cab form{margin:0}
.pub.cancelada .titulo-3{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--pedra)}
.cartao-pe .dica+.dica{text-align:right}
@media (max-width: 899px){
  .ficha-processo{row-gap:20px}
  .ficha-processo.com-corrigir{grid-template-rows:none}
  .ficha-processo>[data-secao="corrigir"]{grid-column:auto;grid-row:auto}
  .ficha-processo>.principal,.ficha-processo>.lateral{display:contents}
  .ficha-processo [data-secao="tarefas"]{order:0}
  .ficha-processo [data-secao="publicacoes"]{order:1}
  .ficha-processo [data-secao="partes"]{order:2}
  .ficha-processo [data-secao="andamentos-email"]{order:3}
  .ficha-processo [data-secao="andamentos"]{order:4}
  .ficha-processo [data-secao="dados"]{order:5}
  .ficha-processo [data-secao="casos"]{order:6}
  .ficha-processo [data-secao="corrigir"]{order:7}
  .pubs-ficha{padding:0 16px}
  .alerta-fonte{margin:12px 16px 0}
  .vazio-ficha{padding:24px 16px}
  .pub-disp{flex:0 0 100%}
  .pub-disp .pub-sep{display:none}
}
.alerta .acoes-fonte{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.alerta .acoes-fonte form{margin:0;max-width:100%}
.alerta-fonte>div{min-width:0}
.acoes-fonte .btn{max-width:100%;height:auto;min-height:36px;white-space:normal;text-align:left}
.parte-linha .linha{flex-wrap:wrap}
.titulo-sem-cobertura{font-size:24px}
.texto-sem-cobertura{max-width:640px;line-height:1.55}
details.mais-andamentos>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:12px 20px;border-top:1px solid var(--linha-suave)}
details.mais-andamentos>summary::-webkit-details-marker{display:none}
details.mais-andamentos .abre{font-size:13px;font-weight:600;color:var(--petroleo);text-decoration:underline}
details.mais-andamentos[open]>summary{border-bottom:1px solid var(--linha-suave)}
@media (max-width: 899px){
  details.mais-andamentos>summary{padding:12px 16px}
  .acoes-fonte,.acoes-fonte form,.acoes-fonte .btn{width:100%}
  .acoes-fonte .btn{min-height:44px}
}
/* A2a, Tarefa 31: o Início com os cartões de publicações (pranchas Main / M-Inicio). No computador os
   contadores ocupam a largura toda; abaixo, os casos recentes à esquerda e, à direita (460px), o cartão
   da caixa e o das novas nos casos. No celular a ordem é a do HTML: caixa, contadores, novas, recentes. */
.inicio-grade{display:grid;grid-template-columns:minmax(0,1fr) 460px;grid-template-rows:auto auto auto 1fr;grid-template-areas:"cont cont" "rec sem" "rec pubs" "rec .";column-gap:28px;row-gap:24px;align-items:start}
.inicio-grade>.inicio-contadores{grid-area:cont;margin-bottom:12px}
.inicio-grade>.inicio-recentes{grid-area:rec}
.inicio-grade>.inicio-caixa{grid-area:sem}
.inicio-grade>.inicio-novas{grid-area:pubs}
.inicio-caixa-acao{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.inicio-pubs{list-style:none;margin:0;padding:0}
.inicio-pub{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:6px;padding:16px 20px;border-bottom:1px solid var(--linha-suave)}
.inicio-pub:last-child{border-bottom:0}
.inicio-pub>*{grid-column:1 / -1;margin:0}
.inicio-pub>.inicio-pub-cab{grid-column:1;grid-row:1}
.inicio-pub>.inicio-pub-data{grid-column:2;grid-row:1;align-self:center}
.inicio-pub-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.inicio-pub-numero{font-weight:600}
.inicio-pub-trecho{font-size:13.5px;line-height:1.55}
.inicio-pub.cancelada .inicio-pub-cab strong,.inicio-pub.cancelada .inicio-pub-trecho{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--pedra)}
.inicio-pub.cancelada .inicio-pub-data{opacity:.65}
@media (max-width: 899px){
  .inicio-grade{display:flex;flex-direction:column;gap:24px}
  .inicio-grade>.inicio-contadores{margin-bottom:0}
  .inicio-caixa-acao{flex-direction:column;align-items:stretch;gap:8px}
  .inicio-caixa-acao .btn{width:100%}
  .inicio-pub{display:flex;flex-direction:column;align-items:flex-start;padding:16px}
  .inicio-pub>.inicio-pub-cab,.inicio-pub>.inicio-pub-data{align-self:flex-start}
  .inicio-pub-trecho{font-size:14px}
  .inicio-pub-orgao{display:none}      /* o M-Inicio só traz caso e cliente */
}

/* R3 (rodada curta): confirmação sem JavaScript. O botão é o <summary> de um <details>; aberto, mostra o quadro
   "Tem certeza?" com Confirmar (btn-perigo) e Cancelar. O botão que age só existe dentro do quadro. */
details.confirma{display:block}
details.confirma>summary{list-style:none;cursor:pointer;display:inline-flex}
details.confirma>summary::-webkit-details-marker{display:none}
details.confirma[open]>summary{margin-bottom:10px}
.confirma-quadro{display:flex;flex-direction:column;gap:10px;max-width:420px;padding:14px 16px;background:var(--realce);border:1px solid var(--erro);border-radius:2px}
.confirma-quadro p{margin:0}
.confirma-quadro form{display:flex;flex-direction:column;gap:10px}
.painel-parte details.confirma{padding-top:12px;border-top:1px solid var(--linha-suave)}
.processo-item details.confirma[open]{flex-basis:100%}
/* No desktop o item agora quebra linha (para o quadro aberto ir para a sua própria linha); o texto do processo
   parte de base 0, assim só quebra se nem o menor trecho couber — fechado, o layout é o de antes. */
@media (min-width:900px){.processo-item>.cresce{flex-basis:0}}


/* ===== Manual de uso (/ajuda) ===== */
.manual-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.manual-lista-guias{list-style:none;margin:0;display:flex;flex-direction:column;gap:12px}
.manual-lista-guias a{color:var(--petroleo);font-weight:600;text-decoration:none;border-bottom:1px solid var(--ouro-claro)}
.manual-lista-guias a:hover{border-bottom-color:var(--ouro)}
.manual-cartao-nao-existe{border-color:var(--ouro)}
.manual-guia{max-width:880px;display:flex;flex-direction:column;gap:28px}
.manual-cabeca{display:flex;flex-direction:column;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--ouro)}
.manual-para-que{margin:0;font-size:16px;line-height:1.6;color:var(--tinta)}
.manual-quem-pode{display:flex;flex-direction:column;gap:6px}
.manual-quem-pode p{margin:0}
.manual-quem-pode-papeis{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.manual-pode{background:var(--petroleo-50);color:var(--petroleo);border-color:var(--petroleo-borda)}
.manual-nao-pode{background:var(--papel);color:var(--pedra);border-style:dashed;text-decoration:line-through}
.manual-secao{display:flex;flex-direction:column;gap:14px;scroll-margin-top:16px}
.manual-guia p{margin:0;line-height:1.65}
.manual-guia a{color:var(--petroleo)}
.manual-passos{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:14px;line-height:1.65}
.manual-passos>li::marker{font-family:var(--f-titulo);font-weight:600;color:var(--petroleo)}
.manual-lista{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;line-height:1.6}
.manual-botao{display:inline-block;padding:0 8px;border:1px solid var(--petroleo-borda);border-radius:4px;background:var(--petroleo-50);color:var(--petroleo);font-weight:600;white-space:nowrap}
.manual-guia code{font-size:13px;padding:0 4px;background:var(--realce);border:1px solid var(--linha-suave);border-radius:3px;overflow-wrap:anywhere}
.manual-captura{margin:10px 0 0;display:flex;flex-direction:column;gap:10px}
.manual-captura img{display:block;width:100%;height:auto;border:1px solid var(--linha);border-radius:6px;background:var(--papel)}
.manual-legenda{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--tinta)}
.manual-legenda li::marker{font-weight:700;color:var(--petroleo)}
.manual-bloco{display:flex;flex-direction:column;gap:8px}
.manual-bloco-titulo{font-family:var(--f-titulo);font-size:20px;color:var(--petroleo)}
.manual-tabela-rolagem{overflow-x:auto}
.manual-proximo{padding-top:16px;border-top:1px solid var(--linha)}
.manual-rodape{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--ouro);color:var(--pedra)}
.topo-ajuda{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--ouro);border-radius:50%;color:var(--marfim)}
body .topo-usuario a.topo-ajuda{display:inline-flex;min-height:0;height:32px;justify-content:center;text-decoration:none}
.topo-m .btn-icone~.btn-icone{margin-left:0}
.entrar-ajuda a{color:inherit;text-decoration:underline}
/* Busca no manual (rodada B, protótipo docs/design/telas-2026-10-06-busca/): caixa, "Deu problema?" e resultados. */
.manual-busca{display:flex;flex-direction:column;gap:10px}
.manual-busca label{display:block}
.manual-busca-botao{height:52px;padding:0 28px}
.manual-problemas-cab{background:var(--realce)}
.manual-problemas-cab h2{display:flex;align-items:center;gap:8px}
.manual-problemas-cab h2 .ic{color:var(--aviso)}
.manual-problemas-lista{list-style:none;margin:0;padding:0;columns:3;column-gap:40px}
.manual-problemas-lista li{break-inside:avoid;border-bottom:1px solid var(--linha-suave)}
.manual-problemas-lista a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;color:var(--petroleo);font-weight:600;text-decoration:none}
.manual-problemas-lista a .ic{width:15px;height:15px;color:var(--ouro)}
/* .pagina não é flex (o protótipo é, com gap 28/24): o espaço entre os blocos do índice é margem de cada bloco. */
.manual-problemas,.manual-resultados,.manual-nada{margin-top:28px}
.manual-rotulo-assuntos{margin:28px 0 16px}
.manual-resultados{display:flex;flex-direction:column;gap:14px}
.manual-res-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap}
.manual-res-lista{list-style:none;margin:0;padding:0}
.manual-res-lista>li+li{border-top:1px solid var(--linha-suave)}
.manual-res{display:flex;flex-direction:column;gap:6px;padding:16px 20px;text-decoration:none;color:var(--tinta)}
.manual-res:hover{background:var(--realce)}
.manual-res-topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.manual-res-titulo{font-size:16px;font-weight:600;color:var(--petroleo);text-decoration:underline;text-decoration-color:var(--ouro-claro);text-decoration-thickness:1px;text-underline-offset:4px;min-width:0;overflow-wrap:anywhere}
.manual-res-topo .rotulo{flex:none}
.manual-res-destino{display:flex;align-items:flex-start;gap:8px;color:var(--tinta)}
.manual-res-destino .ic{width:15px;height:15px;margin-top:3px;color:var(--ouro)}
.selo-problema{display:inline-block;margin-right:10px;padding:2px 8px;border:1px solid var(--aviso-borda);border-radius:2px;background:var(--aviso-faixa);color:var(--aviso);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;vertical-align:1px}
@media (max-width: 899px){
  .manual-grade{grid-template-columns:1fr}
  .manual-guia{gap:22px}
  .manual-problemas,.manual-resultados,.manual-nada{margin-top:24px}
  .manual-rotulo-assuntos{margin:24px 0 12px}
  .manual-botao{white-space:normal}
  .manual-busca-botao{height:48px;padding:0 20px;font-size:15px}
  .manual-problemas-lista{columns:1}
  .manual-problemas-lista a{min-height:44px;padding:10px 0}
  .manual-problemas-cab{flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px}
  .manual-problemas .cartao-corpo{padding:4px 16px 12px}
  .manual-res{padding:14px 16px}
  .manual-res-topo{flex-direction:column-reverse;align-items:flex-start;gap:4px}
  .manual-res-titulo{font-size:15.5px}
}

/* Vários clientes no caso (F1): o cartão Clientes da ficha do caso. */
.lista-clientes{list-style:none;margin:0;padding:0}
.cliente-do-caso{display:flex;flex-direction:column;gap:4px;padding:14px 20px;border-bottom:1px solid var(--linha-suave);overflow-wrap:anywhere}
.cliente-do-caso:last-child{border-bottom:0}
.cliente-do-caso .dica{padding:0}
/* Vários clientes, F2: o Retirar (confirmação sem JavaScript) dentro da linha do cliente. */
.cliente-do-caso details.confirma{margin-top:6px}
@media (max-width: 899px){
  .cliente-do-caso{padding:12px 16px}
}
/* Vários clientes, F3: a faixa "partes do DJEN não conferidas" dentro do item do processo na ficha (Ficha-Aviso). */
.aviso-partes{flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding:12px 16px;background:var(--aviso-faixa);border:1px solid var(--aviso-borda);border-radius:3px;color:var(--aviso)}
.aviso-partes .texto{display:flex;align-items:flex-start;gap:12px;flex:1 1 280px;min-width:0}
.aviso-partes .ic{width:20px;height:20px;margin-top:1px;flex:none}
.aviso-partes strong{color:var(--aviso);font-size:14px;line-height:1.4}
@media (max-width: 899px){
  .aviso-partes .btn{width:100%}
}

/* Drive, rodada 1: o cartão Documentos e a lista de documentos (protótipo docs/design/telas-2026-10-08-drive, sem o prefixo .tela) */
.link-pasta{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.arquivo-previsto{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--petroleo-borda);background:var(--petroleo-50);color:var(--petroleo);font-size:13.5px}
.arquivo-previsto .ic{margin-top:2px}

/* cartão Documentos */
.doc-pasta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:14px 20px;background:var(--realce);border-bottom:1px solid var(--linha-suave)}
.doc-aviso{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:18px 20px;border-bottom:1px solid var(--linha-suave)}
.doc-aviso .alerta{width:100%}
.doc-antiga{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:14px 20px;background:var(--realce);border-bottom:1px solid var(--linha-suave)}
.doc-antiga .link-antigo{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.doc-grupo-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 20px;background:var(--papel);border-bottom:1px solid var(--linha-suave);border-top:1px solid var(--linha-suave)}
.doc-grupo-cab .ic{color:var(--ouro);flex:none}
.doc-grupo-nome{min-width:0;overflow-wrap:anywhere}
.doc-grupo-info{display:flex;flex-wrap:wrap;min-width:0}
.doc-grupo-info>span+span::before{content:"·";margin-inline:6px}
.doc-grupo-abrir{margin-left:auto;flex:none}
.doc-grupo-abrir .ic{color:inherit}
.doc-pasta+.doc-grupo .doc-grupo-cab{border-top:0}
/* "Ver arquivos": <details> fechado, sem JS (a lista só abre para quem quer) */
.doc-ver>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--petroleo)}
.doc-ver>summary::-webkit-details-marker{display:none}
.doc-ver>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--petroleo);border-bottom:1.6px solid var(--petroleo);transform:rotate(45deg);margin:-4px 4px 0 0}
.doc-ver[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
.doc-ver[open]>summary{border-bottom:1px solid var(--linha-suave)}
/* A linha do arquivo NUNCA deixa texto longo (nome, e-mail de autor) invadir a coluna do ícone: toda célula pode encolher e quebra */
.doc-arq{display:grid;grid-template-columns:38px minmax(0,1fr) minmax(0,max-content);gap:4px 12px;align-items:center;padding:9px 20px}
.doc-arq>*{min-width:0}
.doc-arq+.doc-arq{border-top:1px solid var(--linha-suave)}
.doc-titulo{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.doc-nome{font-weight:600;overflow-wrap:anywhere}
.doc-meta{display:flex;flex-direction:column;align-items:flex-end;max-width:240px;font-size:12.5px;color:var(--pedra);text-align:right;overflow-wrap:anywhere}
.doc-meta .quem{max-width:100%}
.doc-vazio{padding:12px 20px;font-size:13.5px}

/* lista de documentos */
.ld{display:flex;flex-direction:column;gap:8px;padding:20px 20px 14px;border-top:1px solid var(--linha)}
.ld-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.ld-cab .titulo-3{font-size:17px}
.ld-resumo{font-size:13.5px;color:var(--tinta)}
.ld-barra{height:8px}
.ld-sub{margin:0;padding:10px 20px;background:var(--realce);border-block:1px solid var(--linha-suave);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--pedra)}
.ld-lista>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:center;padding:10px 20px}
.ld-lista>li+li{border-top:1px solid var(--linha-suave)}
.ld-nome{display:flex;flex-direction:column;gap:2px;min-width:0}
.ld-titulo{font-weight:600;font-size:14.5px;line-height:1.3}
.ld-n .ld-titulo{color:var(--pedra)}
.ld-feito{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--sucesso)}
.ld-feito .ic{width:14px;height:14px;stroke-width:2.4}
.ld-na{font-size:12.5px;color:var(--pedra)}
.ld-marcas{display:flex;gap:8px}
.ld-chk{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--linha);border-radius:2px;background:var(--papel);font-size:13px;font-weight:600;color:var(--tinta);white-space:nowrap;cursor:pointer}
.ld-chk input{width:18px;height:18px;margin:0;accent-color:var(--petroleo);flex:none}
.ld-chk.on{border-color:var(--petroleo);background:var(--petroleo-50);box-shadow:inset 0 0 0 1px var(--petroleo)}
.ld-chk.on.na{border-color:var(--pedra-borda);background:var(--realce);box-shadow:inset 0 0 0 1px var(--pedra-borda)}
.doc-lista{list-style:none;margin:0;padding:0}
.doc-pasta-form{margin:0}
.btn-apagado{opacity:.55;cursor:not-allowed}
@media (max-width: 899px){
  .doc-pasta,.doc-aviso,.doc-antiga{padding-inline:16px}
  .doc-aviso .btn{align-self:stretch}
  .doc-pasta .btn{margin-left:0}
  .doc-grupo-cab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;padding-inline:16px}   /* 1ª linha: ícone, nome e "Abrir no Drive"; 2ª: contagem e data, em toda a largura */
  .doc-grupo-nome{grid-column:2;grid-row:1}
  .doc-grupo-abrir{grid-column:3;grid-row:1;margin-left:0}
  .doc-grupo-info{grid-column:2 / -1;grid-row:2}
  .doc-ver>summary{padding-inline:16px}
  .doc-arq{grid-template-columns:38px minmax(0,1fr);padding:10px 16px}
  .doc-meta{grid-column:2;max-width:none;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:0 8px;text-align:left}
  .doc-meta .quem::before{content:"· "}
  .doc-vazio{padding-inline:16px}
  .ld{padding:16px}
  .ld-sub{padding-inline:16px}
  .ld-lista>li{grid-template-columns:minmax(0,1fr);padding:12px 16px;gap:10px}
  .ld-marcas{width:100%}
  .ld-chk{flex:1 1 0;justify-content:center;min-height:44px;padding:0 8px}
}
.ld-chk{font:inherit}
.ld-caixa{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.5px solid var(--linha);border-radius:2px;background:var(--papel);flex:none}
.ld-chk.on .ld-caixa{border-color:var(--petroleo);background:var(--petroleo);color:var(--papel)}
.ld-chk.on.na .ld-caixa{border-color:var(--pedra-borda);background:var(--pedra-borda)}

/* ---------- Tarefas (plano 2026-10-08-tarefas-nucleo; protótipo docs/design/telas-2026-10-08-tarefas) ---------- */
/* Atrasada = vermelho discreto (título do grupo, prazo e fundo bem claro); urgente = marca dourada com bandeira. Nunca a
   mesma cor (decisão do Designer aprovada). */
.nav a .cont-atraso{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:10px;background:var(--erro-fundo);color:var(--erro);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums lining-nums;line-height:1}
.abas .cont-aba.cont-atraso{background:var(--erro);color:var(--marfim)}
/* Tarefas, parte 2: o número de revisão (ouro; número em petróleo escuro, 5,21:1 — spec §2). No celular, à esquerda do ícone. */
.nav a .cont-revisar{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:10px;background:var(--ouro);color:var(--petroleo-escuro);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums lining-nums;line-height:1}
.abas .cont-aba.cont-revisar{right:auto;left:-14px;background:var(--ouro);color:var(--petroleo-escuro)}
.nav a .cont-atraso + .cont-revisar{margin-left:4px}
.grupo-revisar{border-color:var(--ouro);box-shadow:inset 3px 0 0 var(--ouro)}
.grupo-revisar .titulo-2{color:var(--petroleo)}
.urgente{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border:1px solid var(--aviso-borda);border-radius:2px;background:var(--aviso-faixa);color:var(--aviso);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.urgente .ic{width:13px;height:13px}
.selo.t-aberta{background:var(--petroleo-50);color:var(--petroleo)}
.selo.t-atrasada{background:var(--erro-fundo);color:var(--erro)}
.selo.t-concluida{background:var(--sucesso-fundo);color:var(--sucesso)}
.selo.t-cancelada{background:var(--realce);color:var(--pedra);border-color:var(--linha)}
.selo.t-revisao{background:var(--ouro);color:var(--petroleo-escuro)}
.faixa-motivo{margin-top:6px}
.hist-motivo{display:block;margin-top:4px;font-size:13px;color:var(--tinta)}
.hist-motivo b{font-weight:600;margin-right:6px}
.prazo-atrasado{color:var(--erro)}
.titulo-tarefa{overflow-wrap:anywhere}
.abas-tarefas{display:flex;flex-wrap:wrap;gap:4px 24px;border-bottom:1px solid var(--linha);margin-bottom:24px}
.abas-tarefas a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;color:var(--pedra);font-weight:600;text-decoration:none;border-bottom:3px solid transparent}
.abas-tarefas a.ativa{color:var(--petroleo);border-bottom-color:var(--ouro)}
.contagem{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:11px;background:var(--petroleo-100);color:var(--petroleo);font-size:12px;font-weight:700}
.grupos{display:flex;flex-direction:column;gap:28px}
.grupo{display:flex;flex-direction:column;gap:10px}
.grupo-cab{display:flex;align-items:center;gap:10px}
.grupo-cab h2{font-family:var(--f-titulo);font-weight:600;font-size:23px;line-height:1.2;color:var(--petroleo)}
.grupo-atrasadas .grupo-cab h2{color:var(--erro)}
.grupo-atrasadas .contagem{background:var(--erro-fundo);color:var(--erro)}
.tf-lista{list-style:none;margin:0;padding:0;overflow:hidden}
.tf-lista>li+li{border-top:1px solid var(--linha-suave)}
.tf{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start;gap:0 8px;padding:12px 18px 12px 8px}
.tf.atrasada,.tabela-delegadas tr.atrasada{background:var(--erro-leve)}
.tf-form{margin:0}
.tf-ck{width:44px;height:44px;margin:0;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:var(--marfim)}
.tf-ck::before{content:"";grid-area:1/1;width:24px;height:24px;border:2px solid var(--pedra-borda);border-radius:50%;background:var(--papel)}
.tf-ck .ic{grid-area:1/1;width:15px;height:15px;stroke-width:2.4}
button.tf-ck:hover::before{border-color:var(--petroleo)}
.tf-ck.feita::before{background:var(--petroleo);border-color:var(--petroleo)}
.tf-corpo{display:flex;flex-direction:column;min-width:0;padding-top:9px}
.tf-titulo{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:15.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.tf.concluida .tf-titulo a{color:var(--pedra);text-decoration:line-through}
.tf-meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:6px;font-size:13px;color:var(--pedra)}
.tf-meta span{display:inline-flex;align-items:center;gap:5px}
.tf-meta .ic{width:14px;height:14px}
.m-prazo.atraso,.m-prazo.atraso .ic{color:var(--erro)}
.rodape-lista{margin-top:16px}
.cartao-tarefas{margin-bottom:36px}
.ficha .cartao-tarefas{margin-bottom:0}
.mais-tarefas>summary{cursor:pointer;font-weight:600;color:var(--petroleo)}
.pessoas-tarefas{list-style:none;margin:16px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.pessoa-tarefas{display:flex;flex-direction:column;gap:4px;padding:14px 16px;text-decoration:none;color:var(--tinta)}
.pessoa-tarefas.marcada{border-color:var(--petroleo);box-shadow:inset 0 0 0 1px var(--petroleo)}
.filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 20px;padding:16px 20px;margin-bottom:24px}
.filtros .campo{width:220px}
.tarefa-descricao,.coment-texto,.tf-passo-texto,.motivo-cancelamento span{white-space:pre-wrap;overflow-wrap:anywhere}
.lista-notas{display:flex;flex-direction:column;gap:6px;margin:0;padding-left:18px;font-size:13.5px;color:var(--pedra)}
.prog{padding:16px 20px 4px}
.prog-barra{display:block;width:100%;height:6px;appearance:none;border:0;background:var(--linha-suave);color:var(--petroleo)}
.prog-barra::-webkit-progress-bar{background:var(--linha-suave)}
.prog-barra::-webkit-progress-value{background:var(--petroleo)}
.prog-barra::-moz-progress-bar{background:var(--petroleo)}
.tf-passos{list-style:none;margin:0;padding:0 20px 8px}
.tf-passo{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 0;font-size:14.5px}
.tf-passo+.tf-passo{border-top:1px solid var(--linha-suave)}
.tf-passo form{margin:0}
.tf-passo-ck{width:24px;height:24px;flex:none;display:grid;place-items:center;border:2px solid var(--pedra-borda);border-radius:3px;background:var(--papel);color:var(--marfim);padding:0;cursor:pointer}
.tf-passo-ck.feito{background:var(--petroleo);border-color:var(--petroleo)}
.tf-passo-ck .ic{width:14px;height:14px;stroke-width:2.4}
.tf-passo-texto{flex:1;min-width:0}
.tf-passo.feito .tf-passo-texto{color:var(--pedra);text-decoration:line-through}
.novo-passo,.escrever,.anexar{flex-direction:column;align-items:stretch;gap:10px}
.coment{display:flex;gap:12px;padding:16px 20px}
.coment+.coment{border-top:1px solid var(--linha-suave)}
.coment-corpo{display:flex;flex-direction:column;gap:4px;min-width:0}
.coment-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.avatar-claro{color:var(--petroleo);background:var(--petroleo-50);flex:none}
.anexo{display:flex;align-items:center;gap:12px;padding:12px 20px}
.anexo+.anexo{border-top:1px solid var(--linha-suave)}
.anexo-ic{width:38px;height:38px;display:grid;place-items:center;flex:none;background:var(--petroleo-50);border:1px solid var(--petroleo-borda);color:var(--petroleo)}
.anexo-t{display:flex;flex-direction:column;min-width:0}
.anexo-t a{font-weight:600;overflow-wrap:anywhere}
.anexo-t span{font-size:12.5px;color:var(--pedra)}
.hist{list-style:none;margin:0;padding:16px 20px 8px}
.hist li{position:relative;display:flex;flex-direction:column;gap:2px;padding:0 0 16px 22px;border-left:1px solid var(--linha);margin-left:3px}
.hist li::before{content:"";position:absolute;left:-4px;top:5px;width:7px;height:7px;background:var(--ouro)}
.hist li:last-child{border-left-color:transparent;padding-bottom:8px}
.hist li.atual::before{background:var(--petroleo)}
.hist .quando{font-size:12.5px;color:var(--pedra)}
.envio-padrao{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}
.form-tarefa fieldset,[data-form-cancelar] fieldset{border:0;margin:0;padding:0;min-width:0}
.form-tarefa legend,[data-form-cancelar] legend{padding:0;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--tinta)}
/* Sem JavaScript: os campos que dependem de uma escolha aparecem por :has() (como o formulário de cliente). */
.form-tarefa .aviso-delegar,.form-tarefa .repete-semana,.form-tarefa .repete-mes,.form-tarefa .vinculo-busca{display:none}
.form-tarefa .campo-responsavel:has(option[data-outra-pessoa]:checked) .aviso-delegar{display:block}
.form-tarefa .repeticao:has([data-repete="semanal"]:checked) .repete-semana{display:flex}
.form-tarefa .repeticao:has([data-repete="mensal"]:checked) .repete-mes{display:flex}
.form-tarefa .vinculo:has([data-vinculo-caso]:checked) .vinculo-busca,
.form-tarefa .vinculo:has([data-vinculo-processo]:checked) .vinculo-busca{display:block}
@media (max-width: 899px){
  .tf{padding:8px 14px 10px 4px;gap:0 4px}
  .filtros{flex-direction:column;align-items:stretch;padding:16px}
  .filtros .campo{width:auto}
  .prog,.tf-passos,.coment,.anexo,.hist{padding-inline:16px}
}

/* Locais das diligências (plano 2026-10-10-tarefas-revisao-locais, Tarefa 8) */
.local-botoes{display:flex;flex-wrap:wrap;gap:8px}
.local-botoes .btn{white-space:normal;height:auto;min-height:44px}
.procedencia{display:block;margin-top:2px}
.procedencia.sem-fonte{color:var(--aviso);font-weight:600}
.tabela-locais td{vertical-align:top}
.novo-local{margin-top:8px}
.novo-local-quadro{margin-top:12px;padding:16px;border:1px solid var(--linha);background:var(--realce)}
.cartao-local strong{font-weight:600}

/* ---------- Nova petição (`:29`): o botão de destaque, a tela "Que peça é?" e a lista "Petições" da ficha ---------- */
.btn-peticao .emoji{font-size:16px;line-height:1}
.menu-peticao{position:relative}
.menu-peticao>summary{list-style:none}
.menu-peticao>summary::-webkit-details-marker{display:none}
.menu-peticao-lista{position:absolute;right:0;top:calc(100% + 6px);z-index:5;min-width:280px;max-width:min(420px,90vw);margin:0;padding:6px;list-style:none;background:var(--papel);border:1px solid var(--petroleo);box-shadow:0 6px 18px rgba(27,42,41,.16)}
.menu-peticao-lista a{display:block;padding:10px 12px;font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.menu-peticao-lista a:hover{background:var(--petroleo-50)}
.menu-peticao-lista .dica{display:block;font-weight:400}
.pet-opcoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:10px}
.pet-opcao{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid var(--linha);border-radius:2px;background:var(--papel);font-size:14px;font-weight:600;cursor:pointer}
.pet-opcao input{width:18px;height:18px;margin:0;accent-color:var(--petroleo);flex:none}
.pet-opcao:hover{border-color:var(--petroleo-borda);background:var(--petroleo-50)}
.pet-opcao:has(input:checked){border-color:var(--petroleo);background:var(--petroleo-50);box-shadow:inset 0 0 0 1px var(--petroleo)}
.pet-opcao:has(input:focus-visible){box-shadow:0 0 0 2px var(--papel),0 0 0 4px var(--petroleo)}
.pet-previa strong{font-weight:600;overflow-wrap:anywhere}
.pet-escolha{border:0;padding:0;margin:0;min-width:0}
.pet-timbrado{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pet-miniatura{flex:none;width:170px;height:auto;border:1px solid var(--linha);background:var(--papel)}
.pet-lista{list-style:none;margin:0;padding:0}
.pet-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 20px}
.pet-linha+.pet-linha{border-top:1px solid var(--linha-suave)}
.pet-titulo{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 260px}
.pet-titulo .ic{color:var(--ouro);flex:none}
.pet-data{flex:none;color:var(--pedra);font-size:13px}
.pet-nome{min-width:0;font-weight:600;overflow-wrap:anywhere}
.pet-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pet-vazio{padding:16px 20px}
@media (max-width: 899px){
  .pet-linha{padding:12px 16px}
  .pet-acoes{width:100%}
  .pet-acoes .btn{flex:1 1 auto}
  .pet-vazio{padding-inline:16px}
  .menu-peticao-lista{left:0;right:auto}
  .btn-peticao,.menu-peticao>summary{width:100%}
}
.pet-acoes [hidden]{display:none}
/* :28 — faixa "Vista no Recorte Digital e ainda não chegou pelo DJEN" (topo da lista Novas das Publicações) */
.faixa-recorte{align-items:flex-start}
.faixa-recorte>.pilha{flex:1;min-width:0}
.lista-recorte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lista-recorte li{align-items:center;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--linha-suave)}
.lista-recorte li:first-child{border-top:0;padding-top:0}
/* ---------- Envio de documentos pelo cliente (30b): o cartão da ficha ---------- */
.env-novo{display:flex;flex-direction:column;gap:12px}
/* o link (e a mensagem que o repete) é uma palavra só, comprida: sem isto estoura a largura no celular */
.env-novo p{overflow-wrap:anywhere}
.env-link{padding:10px 12px;background:var(--papel);border:1px solid var(--ouro);border-radius:3px;overflow-wrap:anywhere}
.env-link code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--petroleo)}
.env-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.env-form{display:flex;flex-direction:column;gap:12px}
.env-validade{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 16px}
.env-validade legend{padding:0;margin-bottom:6px;font-weight:600}
.env-opcao{display:inline-flex;align-items:center;gap:6px;min-height:36px}
.env-numeros{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--pedra);margin-bottom:12px}
.env-lista{display:flex;flex-direction:column;margin:8px 0}
.env-arq{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--linha-suave)}
.env-nome{flex:1;min-width:0;overflow-wrap:anywhere}
.env-meta{color:var(--pedra);font-size:12px;white-space:nowrap}
.doc-grupo[data-novos] .doc-grupo-info{color:var(--petroleo);font-weight:600}
@media (max-width: 899px){.env-arq{flex-wrap:wrap}.env-meta{white-space:normal;width:100%}}
/* ---------- Envio de documentos pelo cliente (30b): a página pública, pensada para o celular ---------- */
.env-corpo{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--marfim);color:var(--tinta)}
.env-topo{background:var(--petroleo);padding:14px 20px}
.env-logo{display:block;width:180px;height:auto}
.env-pagina{flex:1;width:100%;max-width:560px;margin:0 auto;padding:24px 20px 32px;display:flex;flex-direction:column;gap:16px}
.env-texto{font-size:16px;line-height:1.5}
.env-texto-lista{display:flex;flex-direction:column;gap:6px;padding-left:18px;list-style:disc;font-size:15px}
.env-app[hidden]{display:none}
.env-botoes{display:flex;flex-direction:column;gap:12px}
.env-entrada{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
.env-botao{width:100%;min-height:56px;height:auto;justify-content:center;font-size:17px;text-align:center;cursor:pointer}
.env-botao[hidden]{display:none}
.env-entrada:focus-visible + .env-botao{outline:2px solid var(--petroleo);outline-offset:2px;box-shadow:0 0 0 4px rgba(179,148,96,.45)}
.env-fila{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.env-item{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px;background:var(--papel);border:1px solid var(--linha);border-radius:3px}
.env-item-nome{overflow-wrap:anywhere;font-weight:600}
.env-item-estado{font-size:14px;color:var(--pedra);text-align:right}
.env-item-barra{grid-column:1 / -1;width:100%;height:8px}
.env-item[data-estado="enviado"]{border-color:var(--sucesso-borda);background:var(--sucesso-fundo)}
.env-item[data-estado="enviado"] .env-item-estado{color:var(--sucesso)}
.env-item[data-estado="erro"]{border-color:var(--erro-borda);background:var(--erro-leve)}
.env-item[data-estado="erro"] .env-item-estado{grid-column:1 / -1;text-align:left;color:var(--erro)}
.env-resumo{margin-top:12px;font-size:16px;font-weight:600}
.env-resumo:empty{display:none}
.env-dicas{padding:16px;background:var(--papel);border:1px solid var(--linha-suave);border-radius:3px;display:flex;flex-direction:column;gap:8px}
.env-rodape{padding:16px 20px;border-top:1px solid var(--linha);font-size:13px;color:var(--pedra);text-align:center;display:flex;flex-direction:column;gap:6px}

/* :35 — Agenda de prazos (somente leitura). Cores só de tokens já aprovados; a situação (Atrasado, Hoje, Esta semana) vai também em TEXTO. */
.ag-apoio{max-width:760px;margin-bottom:20px}
.ag-pessoa{display:flex;align-items:flex-end;gap:12px;margin:-8px 0 20px}
.ag-pessoa .campo{width:240px}
.ag-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.ag-navegacao{display:flex;gap:8px}
.ag-periodo{margin:0;font-size:22px;color:var(--petroleo)}
.ag-visoes{display:flex;gap:4px}
.ag-visoes a{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1px solid var(--linha);border-radius:2px;background:var(--papel);color:var(--petroleo);font-weight:600;text-decoration:none}
.ag-visoes a.ativa{background:var(--petroleo);border-color:var(--petroleo);color:var(--marfim)}
.ag-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:start}
.ag-mes{display:flex;flex-direction:column;gap:8px}
.ag-dia{min-width:0;min-height:96px;padding:10px;background:var(--papel);border:1px solid var(--linha);border-radius:3px;display:flex;flex-direction:column;gap:8px}
.ag-dia.ag-fora{background:var(--realce);border-color:var(--linha-suave)}
.ag-dia.ag-hoje{border-color:var(--petroleo);box-shadow:inset 0 3px 0 var(--petroleo)}
.ag-dia-cab{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:700;color:var(--petroleo)}
.ag-dia.ag-fora .ag-dia-cab{color:var(--pedra)}
.ag-selo-hoje{display:inline-block;padding:1px 7px;border-radius:2px;background:var(--petroleo);color:var(--marfim);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ag-feriado{margin:0;padding:4px 8px;border:1px solid var(--aviso-borda);border-radius:2px;background:var(--aviso-faixa);color:var(--aviso);font-size:12.5px;font-weight:600;overflow-wrap:anywhere}
.ag-itens{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.ag-item{display:flex;flex-direction:column;gap:3px;min-width:0;padding:8px 10px;border:1px solid var(--linha);border-left-width:4px;border-radius:2px;background:var(--papel);overflow-wrap:anywhere}
.ag-item.ag-interno{border-left-color:var(--petroleo-borda)}
.ag-item.ag-fatal{border-color:var(--petroleo);border-left-color:var(--petroleo);border-left-width:6px;background:var(--petroleo-50)}
.ag-item.ag-s-semana{background:var(--aviso-faixa)}
.ag-item.ag-s-hoje{border-color:var(--aviso-borda);background:var(--aviso-faixa)}
/* O fatal em "Hoje" ou "Esta semana" leva o fundo da situação, mas NÃO perde a moldura e a barra grossa de petróleo (o interno na mesma situação não as tem). Atrasado segue mais forte (vermelho). */
.ag-item.ag-fatal.ag-s-semana{border-color:var(--petroleo);border-left-color:var(--petroleo)}
.ag-item.ag-fatal.ag-s-hoje{border-color:var(--petroleo);border-left-color:var(--petroleo)}
.ag-item.ag-s-atrasado{border-color:var(--erro-borda);border-left-color:var(--erro);background:var(--erro-leve)}
.ag-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px}
.ag-rotulo{display:inline-block;padding:1px 7px;border-radius:2px;background:var(--petroleo-100);color:var(--petroleo);font-weight:700;letter-spacing:.03em}
.ag-item.ag-fatal .ag-rotulo{background:var(--petroleo);color:var(--marfim)}
.ag-situacao{font-weight:700;color:var(--aviso)}
.ag-item.ag-s-atrasado .ag-situacao{color:var(--erro)}
.ag-titulo{font-weight:600;line-height:1.3}
.ag-sem-nada{display:none;margin-top:12px}
.ag-legenda{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
@media (max-width: 899px){
  .ag-pessoa{margin-top:0}
  .ag-pessoa .campo{flex:1;width:auto}
  .ag-barra{flex-direction:column;align-items:stretch}
  .ag-navegacao .btn{flex:1;justify-content:center}
  .ag-grade{grid-template-columns:1fr}
  .ag-dia.ag-vazio{display:none}
  .ag-dia{min-height:0}
  .ag-sem-nada{display:block}
}

/* ---------- Central de IA (IA-1): painel "Agentes de IA" e ficha. Só tokens do :root; px (a raiz é 10px); prefixo `.ia-` (e `[data-ia-ficha]` para o que só vale na ficha). ---------- */
.ia-colunas{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;align-items:start}
.ia-coluna-titulo{font-family:var(--f-marca);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--pedra);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--ouro)}
.ia-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ia-cartao{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--papel);border:1px solid var(--linha);border-radius:3px}
.ia-cartao:hover{border-color:var(--petroleo)}
.ia-cartao-topo{display:flex;gap:14px;align-items:center}
.ia-identidade{display:flex;flex-direction:column;gap:2px;min-width:0}
.ia-nome{font-family:var(--f-titulo);font-size:22px;font-weight:600;margin:0}
.ia-cartao-link{color:var(--petroleo);text-decoration:none}
.ia-cartao-link::after{content:"";position:absolute;inset:0}
.ia-cartao-link:focus-visible{outline:none}
.ia-cartao-link:focus-visible::after{outline:2px solid var(--petroleo);outline-offset:2px}
.ia-cargo{font-size:13px;color:var(--pedra)}
.ia-avatar-caixa{flex:none;display:inline-flex;border:1px solid var(--ouro);background:var(--marfim)}
.ia-avatar{display:block;image-rendering:pixelated}
.ia-selos{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ia-etiquetas{display:inline-flex;flex-wrap:wrap;gap:6px}
.ia-selo{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid;border-radius:2px;font-size:12.5px;font-weight:600;white-space:nowrap}
.ia-selo-desligada{color:var(--pedra);background:var(--realce);border-color:var(--pedra-borda)}
.ia-selo-sem-chave{color:var(--pedra);background:var(--marfim);border-color:var(--pedra-borda)}
.ia-selo-no-teto{color:var(--erro);background:var(--erro-fundo);border-color:var(--erro-borda)}
.ia-selo-reserva{color:var(--aviso);background:var(--aviso-faixa);border-color:var(--aviso-borda)}
.ia-selo-trabalhando{color:var(--azul);background:var(--azul-fundo);border-color:var(--azul)}
.ia-selo-em-teste{color:var(--aviso);background:var(--aviso-fundo);border-color:var(--aviso-borda)}
.ia-selo-livre{color:var(--sucesso);background:var(--sucesso-fundo);border-color:var(--sucesso-borda)}
.ia-etiqueta{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--linha);border-radius:2px;font-size:12px;color:var(--tinta);background:var(--papel)}
.ia-dados{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0;font-size:13px}
.ia-dados dt{color:var(--pedra);font-size:12px}
.ia-dados dd{margin:0;overflow-wrap:anywhere}
.ia-dados>div:last-child{grid-column:1 / -1}
.ia-dados-ficha{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ia-dados-ficha>div:last-child{grid-column:auto}
.ia-ref{position:relative;z-index:1;color:var(--petroleo)}
.ia-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:0}
.ia-resumo dt{color:var(--pedra);font-size:12px}
.ia-resumo dd{margin:0;font-size:16px}
.ia-progresso{display:block;width:100%;height:12px;margin-top:6px;accent-color:var(--petroleo)}
.ia-progresso.ia-no-aviso{accent-color:var(--aviso)}
.ia-ficha-cab{align-items:center}
.ia-ficha-quem{display:flex;gap:18px;align-items:center}
.ia-grafico{display:block;width:100%;max-width:640px;height:auto}
.ia-barra{fill:var(--petroleo)}
.ia-eixo{stroke:var(--linha);stroke-width:1}
[data-ia-ficha] .tabela-rolagem{overflow-x:auto;position:relative}
.ia-instrucao-texto{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:12px 14px;background:var(--marfim);border:1px solid var(--linha);border-radius:3px;font-size:14px;color:var(--tinta)}
.ia-fixa{border:1px dashed var(--pedra-borda);border-radius:3px;padding:8px 12px}
.ia-fixa>summary,.ia-editar>summary{cursor:pointer}
.ia-antes-depois{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px}
[data-ia-ficha] .alerta>div{min-width:0}
[data-ia-ficha] .alerta p strong{display:inline;margin:0}
[data-ia-ficha] .alerta .btn{max-width:100%;height:auto;min-height:34px;padding-top:6px;padding-bottom:6px;white-space:normal;line-height:1.25;text-align:center}
.ia-versao-ativa{font-weight:600;color:var(--sucesso)}
[data-ia-ficha] textarea{width:100%;min-height:200px;font:inherit}
.ia-avatar-vazio{display:flex;align-items:center;justify-content:center;font-family:var(--f-titulo);font-weight:600;color:var(--petroleo);background:var(--marfim)}
.ia-avatar-vazio-peq{width:72px;height:72px;font-size:32px}
.ia-avatar-vazio-grande{width:144px;height:144px;font-size:64px}
.tabela-rolagem{overflow-x:auto;position:relative}
details.ia-tabela-dias>summary{list-style:none;cursor:pointer;display:inline-flex}
details.ia-tabela-dias>summary::-webkit-details-marker{display:none}
details.ia-tabela-dias[open]>summary{margin-bottom:10px}
@media (max-width: 899px){
  .ia-colunas{grid-template-columns:minmax(0,1fr)}
  .ia-ficha-quem{flex-direction:column;align-items:flex-start}
  [data-ia-ficha] .alerta .btn{min-height:44px}
  .ia-cab-resumo{flex-wrap:wrap}
  .ia-filtro{flex:1 1 100%}
  .ia-filtro .sel{flex:1;min-width:0}
}

/* Central de IA (etapa i): custo da reserva, faixas de preço, bloco Provedores, histórico por evento, selos de custo incerto e o teto por chamada. Mesmos tokens e px; as classes vêm do protótipo aprovado. */
.ia-faixa-aviso{display:flex;flex-direction:column;gap:3px;padding:12px 16px;border:1px solid;border-radius:3px;font-size:14px}
.ia-faixa-aviso a{color:inherit;font-weight:700}
.ia-faixa-amarela{color:var(--aviso);background:var(--aviso-faixa);border-color:var(--aviso-borda)}
.ia-faixa-vermelha{color:var(--erro);background:var(--erro-fundo);border-color:var(--erro-borda)}
.ia-resumo .ia-reserva{grid-column:1 / -1;font-size:15px;padding:10px 14px;background:var(--aviso-faixa);border:1px solid var(--aviso-borda);border-radius:3px;color:var(--aviso)}
.ia-resumo .ia-reserva dt{color:inherit}
.ia-resumo .ia-reserva dd{font-size:15px;font-weight:600}
.ia-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.ia-provedor{border:1px solid var(--linha);border-radius:3px;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--papel);min-width:0}
.ia-provedor-nome{font-family:var(--f-titulo);font-size:22px;font-weight:600;color:var(--petroleo);margin:0}
.ia-selo-ok{color:var(--sucesso);background:var(--sucesso-fundo);border-color:var(--sucesso-borda)}
.ia-selo-sem{color:var(--pedra);background:var(--marfim);border-color:var(--pedra-borda)}
.ia-selo-ruim{color:var(--erro);background:var(--erro-fundo);border-color:var(--erro-borda)}
.ia-meta{display:flex;flex-direction:column;gap:3px;font-size:13px;margin:0}
.ia-acoes{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.ia-no-mes{padding:10px 14px;background:var(--marfim);border:1px solid var(--linha);border-radius:3px;font-weight:600;margin:0}
.ia-teto{border:1px solid var(--linha);border-radius:3px;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--papel)}
.ia-teto p{margin:0}
.ia-eventos{list-style:none;margin:0;display:flex;flex-direction:column;gap:12px}
.ia-evento{border:1px solid var(--linha);border-radius:3px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;background:var(--papel)}
.ia-evento-quando{font-size:12.5px;color:var(--pedra)}
.ia-evento-titulo{font-weight:700;margin:0}
.ia-evento ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:13.5px}
.ia-selo-custo{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-left:6px;border:1px solid;border-radius:2px;font-size:11.5px;font-weight:700;vertical-align:middle}
.ia-estimado{color:var(--erro);background:var(--erro-fundo);border-color:var(--erro-borda)}
.ia-aproximado{color:var(--aviso);background:var(--aviso-faixa);border-color:var(--aviso-borda)}
.ia-legenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--pedra)}
.ia-razoes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;color:var(--erro);font-weight:600}
@media (max-width: 1100px){
  .ia-grade{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 700px){
  .ia-acoes .btn{width:100%}
}

/* ---------- CRM (CRM-1): funis, ficha do lead e parecer ---------- */
.crm-quadro{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,320px);gap:12px;overflow-x:auto;padding-bottom:8px}
.crm-coluna{background:var(--petroleo-50);border:1px solid var(--linha);border-radius:8px;padding:10px;min-width:0}
.crm-coluna-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-weight:600;color:var(--petroleo)}
.crm-coluna-marco{font-size:11px;font-weight:500;color:var(--pedra)}
.crm-cartao{background:var(--papel);border:1px solid var(--linha);border-radius:6px;padding:10px;margin-bottom:8px}
.crm-cartao-nome{font-weight:600;color:var(--tinta);display:block}
.crm-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--pedra);margin-top:4px}
.crm-chip{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;background:var(--petroleo-100);color:var(--petroleo)}
.crm-chip-teste{background:var(--aviso-fundo);color:var(--aviso)}
.crm-chip-verde{background:var(--sucesso-fundo);color:var(--sucesso)}
.crm-chip-amarelo{background:var(--aviso-fundo);color:var(--aviso)}
.crm-chip-vermelho{background:var(--erro-fundo);color:var(--erro)}
.crm-faixa{border:1px solid var(--aviso-borda);background:var(--aviso-faixa);color:var(--aviso);border-radius:6px;padding:10px 12px;margin:0 0 12px}
.crm-faixa-trava{border-color:var(--erro-borda);background:var(--erro-fundo);color:var(--erro)}
.crm-abas{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.crm-regua{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.crm-regua li{padding:3px 10px;border:1px solid var(--linha);border-radius:12px;font-size:12px;color:var(--pedra)}
.crm-regua .crm-marco-feito{background:var(--petroleo-100);border-color:var(--petroleo-borda);color:var(--petroleo)}
.crm-regua .crm-marco-atual{background:var(--petroleo);border-color:var(--petroleo);color:var(--marfim);font-weight:600}
.crm-ficha{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px}
.crm-bloco{background:var(--papel);border:1px solid var(--linha);border-radius:8px;padding:14px;margin-bottom:12px}
.crm-bloco h2{font-size:15px;margin:0 0 8px;color:var(--petroleo)}
.crm-checklist li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--linha-suave)}
.crm-linha-do-tempo li{border-left:2px solid var(--linha);padding:0 0 10px 12px;font-size:13px}
.crm-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.crm-cartao-teste{border-style:dashed;border-color:var(--aviso-borda)}
.crm-cartao-acoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.crm-cartao-acoes .btn{max-width:100%;white-space:normal;height:auto;min-height:34px;line-height:1.25;padding-top:6px;padding-bottom:6px}
.crm-coluna-cab h2{font-size:14px}
.crm-vazio{font-size:12px;color:var(--pedra);padding:4px 2px}
.crm-barra{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.crm-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crm-adiado{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px dashed var(--pedra-borda);border-radius:2px;font-size:13px;color:var(--pedra)}
.crm-contagem{font-size:13px;color:var(--pedra);margin:0 0 12px}
.crm-cab-ficha{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.crm-nome-ficha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crm-pergunta{padding:6px 0;border-bottom:1px solid var(--linha-suave);font-size:13px}
.crm-pergunta dt{color:var(--pedra);font-size:12px}
.crm-pergunta dd{margin:0}
.crm-sem-resposta{color:var(--pedra);font-style:italic}
.crm-linha-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.crm-linha-form .campo{flex:1 1 200px}
.crm-parecer-ok{border-color:var(--sucesso-borda);background:var(--sucesso-fundo)}
.crm-parecer-sem{border-color:var(--erro-borda);background:var(--erro-fundo)}
.crm-historico li{padding:6px 0;border-bottom:1px solid var(--linha-suave);font-size:13px}
.crm-nota-apoio{font-size:12px;color:var(--pedra);margin-top:6px}
.crm-par{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.crm-par .campo{flex:1 1 160px}
.crm-linha-form.crm-cep-so{margin-top:8px}
.crm-linha-form.crm-cep-so .campo{flex:0 1 200px}
.crm-checklist .crm-acoes{margin-top:0;flex-wrap:nowrap}
.crm-funis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px}
.crm-funil{background:var(--papel);border:1px solid var(--linha);border-radius:8px;padding:16px}
.crm-funil h2{font-size:18px;margin:0 0 4px;color:var(--petroleo)}
.crm-funil-versao{font-size:12px;color:var(--pedra);margin:0 0 10px}
.crm-funil-numeros{display:flex;gap:20px;flex-wrap:wrap;margin:10px 0}
.crm-funil-numero{display:flex;flex-direction:column;font-size:12px;color:var(--pedra)}
.crm-funil-numero b{font-size:26px;line-height:1.1;color:var(--tinta)}
.crm-busca{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.crm-busca .campo{flex:1 1 220px}
.crm-contagem-coluna{flex-basis:100%;font-size:11px;font-weight:500;color:var(--pedra)}
.crm-vencido{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;background:var(--erro-fundo);color:var(--erro)}
.crm-sem-meta{font-size:11px;color:var(--pedra)}
.crm-tempo{font-size:13px;color:var(--pedra);margin:4px 0}
.crm-bloqueio{font-size:12px;font-weight:600;color:var(--erro);margin:6px 0 0}
.crm-ocultas{font-size:12px;color:var(--pedra);margin:0 0 8px}
.crm-dica-rolagem{font-size:12px;font-weight:600;color:var(--petroleo);margin:0 0 8px}
.crm-conversa-reservada{border-style:dashed;border-color:var(--pedra-borda);color:var(--pedra);font-size:13px}
.crm-abas-ficha{display:none;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.crm-etiqueta{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;border:1px solid var(--petroleo-borda);background:var(--petroleo-100);color:var(--petroleo)}
.crm-etiqueta-ouro{border-color:var(--ouro);background:var(--papel)}
.crm-etiqueta-verde{border-color:var(--sucesso-borda);background:var(--sucesso-fundo);color:var(--sucesso)}
.crm-etiqueta-ambar{border-color:var(--aviso-borda);background:var(--aviso-fundo);color:var(--aviso)}
.crm-etiqueta-vermelho{border-color:var(--erro-borda);background:var(--erro-fundo);color:var(--erro)}
.crm-etiqueta-cinza{border-color:var(--linha);background:var(--realce);color:var(--pedra)}
.crm-etiquetas{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.crm-fluxo{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0;padding:0;list-style:none}
.crm-fluxo li{padding:3px 10px;border:1px solid var(--petroleo-borda);border-radius:12px;font-size:12px;background:var(--petroleo-50)}
.crm-fluxo .crm-seta::before{content:"→ ";color:var(--pedra)}
.crm-fluxo .crm-saida{border-style:dashed;background:var(--papel)}
.crm-tabela{width:100%;border-collapse:collapse;font-size:13px}
.crm-tabela th,.crm-tabela td{border-bottom:1px solid var(--linha-suave);padding:6px 8px;text-align:left;vertical-align:top}
.crm-tabela th{color:var(--pedra);font-weight:600;font-size:12px}
.crm-botao-desabilitado[disabled]{cursor:not-allowed}
.crm-bloco>:is(p,.crm-etiquetas)+.campo{margin-top:12px}
.crm-papel-form{flex-wrap:wrap;justify-content:flex-end}
.crm-papel-form .sel{min-width:188px}
.crm-pessoa{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--linha-suave);font-size:13px}
@media (max-width:899px){
  .crm-quadro{grid-auto-flow:row;grid-auto-columns:1fr;overflow:visible}
  .crm-ficha{grid-template-columns:minmax(0,1fr)}
  .crm-abas-ficha{display:flex}
  .crm-dica-rolagem{display:none}
  .crm-abas-ficha .btn{min-height:44px}
  .crm-cartao .btn,.crm-bloco .btn{min-height:44px}
  .crm-bloco .btn{white-space:normal;max-width:100%;height:auto;line-height:1.25;padding-top:10px;padding-bottom:10px}
  .crm-abas .btn,.crm-filtros .btn,.crm-barra .btn{min-height:44px}
  .crm-adiado{min-height:44px}
  .crm-busca .btn,.crm-funil .btn{min-height:44px}
  .crm-checklist li{flex-wrap:wrap}
  .crm-checklist .crm-acoes{flex-wrap:wrap}
  .crm-tabela{display:block;overflow-x:auto}
  .crm-tabela th{white-space:nowrap}
}
/* ---------- fim do CRM (CRM-1) ---------- */

/* Central de IA (etapa i, T21): "Antes e depois da troca". Classes do protótipo aprovado; `.ia-fraco` = menos de 30 chamadas num lado (números em cinza, nunca escondidos). */
.ia-ad{border:1px solid var(--linha);border-radius:3px;background:var(--papel)}
.ia-ad>summary{cursor:pointer;padding:12px 14px;display:flex;flex-direction:column;gap:3px;font-weight:600;color:var(--petroleo)}
.ia-ad>summary .ia-ad-sub{font-weight:400;font-size:13px;color:var(--pedra)}
.ia-ad-corpo{padding:0 14px 14px;display:flex;flex-direction:column;gap:12px}
.ia-ad-estado{margin:0;padding:9px 12px;border-radius:3px;font-size:13.5px;font-weight:600}
.ia-ad-falta{background:var(--aviso-faixa);border:1px solid var(--aviso-borda);color:var(--aviso)}
.ia-ad-ok{background:var(--sucesso-fundo);border:1px solid var(--sucesso-borda);color:var(--sucesso)}
.ia-tabela-ad td:first-child{font-weight:600}
.ia-tabela-ad td.c{white-space:normal}
.ia-tabela-ad .ia-destaque td{background:var(--aviso-faixa)}
.ia-fraco td.c{color:var(--pedra);font-weight:400}

/* Central de IA (etapa i, T22): a tela Preços. Classes do protótipo aprovado (cartão de modelo, tabela de preço, formulário em duas faixas e a trava de 5 vezes). Só tokens do :root, px. */
.ia-modelo{border:1px solid var(--linha);border-radius:3px;background:var(--papel);display:flex;flex-direction:column;min-width:0}
.ia-modelo-faixa{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:13px;font-weight:700;border-bottom:1px solid;border-radius:3px 3px 0 0}
.ia-faixa-verde{color:var(--sucesso);background:var(--sucesso-fundo);border-color:var(--sucesso-borda)}
.ia-modelo-corpo{padding:14px;display:flex;flex-direction:column;gap:12px}
.ia-modelo-nome{font-family:var(--f-titulo);font-size:24px;font-weight:600;color:var(--petroleo);line-height:1.1;margin:0}
.ia-modelo-prov{font-size:12.5px;color:var(--pedra);margin:0}
.ia-meta strong{font-weight:600}
.ia-fonte{overflow-wrap:anywhere;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--tinta)}
.ia-sem-aviso{color:var(--aviso);font-weight:700}
.ia-vazio{padding:12px 14px;background:var(--erro-leve);border:1px dashed var(--erro-borda);border-radius:3px;font-size:13.5px;margin:0}
.ia-tabela{width:100%;border-collapse:collapse;font-size:13.5px}
.ia-tabela th{text-align:left;padding:8px 6px;white-space:normal;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pedra);background:var(--realce);border-bottom:1px solid var(--linha);vertical-align:bottom}
.ia-tabela td{padding:9px 6px;border-bottom:1px solid var(--linha-suave);vertical-align:top}
.ia-tabela tr:last-child td{border-bottom:0}
.ia-tabela .d{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.ia-tabela th.d{text-align:right}
.ia-tabela .grande{font-weight:700;color:var(--erro)}
.ia-precos-tab{table-layout:fixed}
.ia-precos-tab th,.ia-precos-tab th.d{letter-spacing:0;font-size:10.5px;white-space:normal;overflow-wrap:normal}
.ia-precos-tab th:first-child{width:21%}
.ia-historico{border:1px dashed var(--pedra-borda);border-radius:3px;padding:8px 12px;font-size:13px}
.ia-historico>summary{cursor:pointer;font-weight:600;color:var(--petroleo)}
.ia-historico ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.ia-so-leitura{padding:12px 14px;background:var(--petroleo-50);border:1px solid var(--petroleo-borda);border-radius:3px;font-weight:600;color:var(--petroleo);margin:0}
.ia-sub{display:flex;flex-direction:column;gap:12px;min-width:0}
.ia-cadastro>summary{list-style:none;cursor:pointer}
.ia-cadastro>summary::-webkit-details-marker{display:none}
.ia-cadastro[open]>summary{margin-bottom:12px}
.ia-form{display:flex;flex-direction:column;gap:16px}
.ia-faixas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ia-modelo .ia-faixas{grid-template-columns:minmax(0,1fr)}
.ia-faixa-form{border:1px solid var(--linha);border-radius:3px;padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--realce);min-width:0;margin:0}
.ia-faixa-form-titulo{font-weight:700;color:var(--petroleo)}
.ia-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ia-confere{display:flex;align-items:flex-start;gap:10px;font-weight:600}
.ia-confere input{width:20px;height:20px;min-height:0;margin:1px 0 0;padding:0;accent-color:var(--erro);flex:none}
.ia-trava{padding:14px 16px;border:2px solid var(--erro);background:var(--erro-fundo);border-radius:3px;display:flex;flex-direction:column;gap:10px;color:var(--erro)}
.ia-trava-titulo{font-weight:700;margin:0}
.ia-trava .ia-confere{color:var(--tinta)}
@media (max-width: 700px){
  .ia-campos{grid-template-columns:minmax(0,1fr)}
  .ia-empilha thead{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ia-empilha th{display:block;width:1px}
  .ia-empilha,.ia-empilha tbody,.ia-empilha tr,.ia-empilha td{display:block;width:100%}
  .ia-empilha tr{padding:8px 0;border-bottom:1px solid var(--linha)}
  .ia-empilha tr:last-child{border-bottom:0}
  .ia-empilha td{display:flex;justify-content:space-between;gap:12px;padding:3px 4px;border:0;text-align:right}
  .ia-empilha td::before{content:attr(data-r);flex:none;color:var(--pedra);font-size:12px;text-align:left;font-weight:600}
  .ia-empilha td.d{text-align:right;white-space:normal}
  .ia-acoes .btn{width:100%}
}

/* CRM-2: a conversa do WhatsApp, só leitura (a ficha do lead, o cartão do quadro e o cartão "Conversa do cliente" nas fichas do cliente e do caso) */
.crm-conversa-meta,.crm-conversa-aviso{font-size:13px;color:var(--pedra)}
.crm-conversa-vazia{font-size:14px;color:var(--pedra)}
.crm-conversa-lista,.conversa-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:560px;overflow-y:auto}
.crm-bolha{max-width:85%;padding:8px 12px;border:1px solid var(--linha);border-radius:12px;background:var(--papel);display:flex;flex-direction:column;gap:2px}
.crm-bolha-entrada{align-self:flex-start;border-top-left-radius:4px}
.crm-bolha-saida{align-self:flex-end;border-top-right-radius:4px;background:var(--azul-fundo)}
.crm-bolha-autor{font-size:12px;font-weight:600;color:var(--tinta)}
.crm-bolha-texto{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.crm-bolha-hora{font-size:11px;color:var(--pedra)}
.crm-cartao-selo{margin:4px 0 0}
.crm-cartao-previa{font-size:12px;color:var(--pedra);margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conversa-lista{max-height:none}
.conversa-item{padding:8px 0;border-bottom:1px solid var(--linha-suave);display:flex;flex-direction:column;gap:2px}
.conversa-autor{font-weight:600;font-size:14px}
.conversa-texto{font-size:14px;overflow-wrap:anywhere}
.conversa-canal{color:var(--pedra)}
.conversa-envio,.conversa-assumir{display:flex;flex-direction:column;gap:8px;margin:12px 0 0}
.conversa-envio label{font-size:13px;color:var(--pedra)}
.conversa-envio textarea{width:100%;font-size:14px}
.conversa-envio .btn,.conversa-assumir .btn{min-height:44px}
.conversa-selo{display:inline-block;padding:2px 10px;border-radius:2px;font-size:12px;font-weight:600;background:var(--aviso-fundo);color:var(--aviso)}
/* CRM-2 (ajuste de 03/11): no celular a mensagem MAIS RECENTE aparece primeiro, só com CSS. O HTML continua em ordem de tempo (leitor de tela e teclado leem do mais antigo ao mais novo; as bolhas não têm
   nada focável dentro). `column-reverse` num contêiner que rola abriria no fim (as mais antigas), por isso no celular a lista não rola por dentro: a página rola e a mais nova está no topo. */
@media (max-width: 899px){
  .crm-conversa-lista,.conversa-lista{flex-direction:column-reverse;max-height:none;overflow-y:visible}
}

/* CRM-3 (T18): a tela da conversa — estado da bolha, mídia, faixa do número, nota interna. Raiz de 10 px: tudo em px; só tokens do :root. */
.crm-faixa-vermelha{border-color:var(--erro-borda);background:var(--erro-fundo);color:var(--erro)}
.crm-faixa-amarela{border-color:var(--aviso-borda);background:var(--aviso-faixa);color:var(--aviso)}
.crm-selo{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;background:var(--petroleo-100);color:var(--petroleo)}
.crm-selo-aguardando{background:var(--aviso-fundo);color:var(--aviso)}
.crm-conversa-links{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
/* CRM-3 (T21): a caixa de conversas — uma linha por conversa, o link inteiro é o alvo (44 px) */
.crm-alvo{height:auto;min-height:44px;display:inline-flex;align-items:center}
.crm-caixa{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.crm-caixa-linha a{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-height:44px;padding:8px 12px;border:1px solid var(--linha);border-radius:6px;background:var(--papel);color:var(--tinta);text-decoration:none}
.crm-caixa-linha a:hover,.crm-caixa-linha a:focus-visible{border-color:var(--petroleo)}
.crm-caixa-nome{font-weight:600;font-size:15px}
.crm-caixa-meta{font-size:13px;color:var(--pedra)}
.crm-conversa-conduz,.crm-conversa-janela{font-size:14px;margin:0 0 8px}
.crm-conversa-conduz{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.crm-conversa-ato{display:flex;flex-direction:column;gap:8px;margin:0}
.crm-conversa-ato .btn,.crm-respostas .btn,.crm-nota-form .btn{min-height:44px}
.crm-confirmo{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;font-weight:600;color:var(--tinta)}
.crm-confirmo input{width:24px;height:24px;flex:none}
.crm-nota-form{display:flex;flex-direction:column;gap:8px;margin:12px 0 0;max-width:640px}
.crm-nota-form label{font-size:13px;font-weight:600;color:var(--tinta)}
.crm-nota-form textarea{min-height:72px;padding:10px 12px;border:1px solid var(--pedra-borda);border-radius:2px;background:var(--papel);font-family:var(--f-texto);font-size:14px;color:var(--tinta)}
.crm-conversa-optout{font-size:14px;color:var(--erro);background:var(--erro-fundo);border:1px solid var(--erro-borda);border-radius:6px;padding:8px 12px;margin:0 0 8px}
.crm-conversa-optout p{margin:0 0 8px}
.crm-bolha-imagem{max-width:240px;border-radius:8px}
.crm-bolha-audio{width:240px}
.crm-bolha-recusada{font-size:12px;color:var(--pedra)}
.crm-bolha-rodape{font-size:11px;color:var(--pedra)}
.crm-bolha-estado{font-weight:600}
.crm-envio{margin:12px 0}
.crm-envio .btn{min-height:44px}
.crm-envio form{display:flex;flex-direction:column;gap:8px;margin:0 0 16px;max-width:640px}
.crm-envio label{font-size:13px;font-weight:600;color:var(--tinta)}
.crm-envio input[type=text],.crm-envio input:not([type]),.crm-envio input[type=file],.crm-envio select{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--pedra-borda);border-radius:2px;background:var(--papel);font-family:var(--f-texto);font-size:14px;color:var(--tinta)}
.crm-envio textarea{min-height:96px;height:auto;padding:10px 12px}
.crm-previa{background:var(--realce);border:1px solid var(--linha-suave);border-radius:8px;padding:12px;margin:0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.crm-notas{background:var(--realce);padding:12px;border-radius:8px;margin-top:12px}
.crm-notas-aviso{color:var(--pedra);margin:0 0 8px}
.crm-notas-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.crm-nota{font-size:14px;overflow-wrap:anywhere;white-space:pre-wrap}
.crm-nota-autor{font-weight:600}

/* CRM-3 (T23): as telas do sócio — modelos, respostas rápidas e números. Raiz de 10 px: tudo em px; só tokens do :root. */
.crm-lista-gestao{list-style:none;margin:0 0 12px;padding:0}
.crm-modelo-texto{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0}
.crm-numero-faixa{display:inline-block;margin:0 0 0 8px;padding:2px 10px;font-size:12px;font-weight:600;vertical-align:middle}
.crm-tabela th[scope=row]{width:200px;white-space:nowrap}
/* CRM-3 (T25): documentos a classificar. Raiz de 10 px: tudo em px; só tokens do :root. */
.crm-documentos{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.crm-documento{background:var(--papel);border:1px solid var(--linha);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;overflow-wrap:anywhere}
.crm-documento-titulo{font-size:14px;margin:0}
.crm-documento-erro{font-size:14px;margin:0;color:var(--erro)}
.crm-documento-espera{font-size:13px;color:var(--pedra);margin:0}
.crm-documento-form{display:flex;flex-direction:column;gap:8px;max-width:640px}
.crm-documento-form label{font-size:13px;font-weight:600;color:var(--tinta)}
.crm-documento-form select{min-height:44px;padding:8px 12px;border:1px solid var(--pedra-borda);border-radius:2px;background:var(--papel);font-family:var(--f-texto);font-size:14px;color:var(--tinta)}
.crm-documento .btn{min-height:44px}
.crm-documentos-na-conversa{margin-top:12px}