/* ============================================================================
   CoretaxJus — sistema visual
   Três vozes tipográficas com significado: a INTERFACE em sans do sistema,
   A LEI em serifada (usada só onde o texto É a fonte: teor do ato, decisão,
   cláusula) e O NÚMERO em mono (CNJ, datas, contagens).
   O latão (--selo) aparece só em "olhe com atenção"; o vermelho (--fatal),
   só em data fatal. Cor que significa uma coisa vale mais que cinco
   decorativas.
   ============================================================================ */
/* ══════════════════════════════════════════════════════════════════════════
   TOKENS
   Três vozes: interface (sans), lei (serifada, só onde o texto É a fonte),
   número (mono, para CNJ/datas/contagem).
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --tinta:#16181D;
  --tinta-2:#5C6069;
  --tinta-3:#8E939C;
  --papel:#F4F5F7;
  --superficie:#FFFFFF;
  --linha:#E4E6EA;
  --linha-forte:#D2D5DB;

  --processo:#2C4A7C;        /* único acento de ação */
  --processo-fraco:#EAEFF7;
  --selo:#8A6A2F;            /* latão — SÓ no selo de urgência */
  --selo-fraco:#F6F0E3;
  --fatal:#B3261E;           /* SÓ em data fatal */
  --fatal-fraco:#FBECEB;
  --cumprido:#1F7A5C;
  --cumprido-fraco:#E7F4EF;

  --r-sm:7px; --r:11px; --r-lg:16px;
  --sombra:0 1px 2px rgba(16,18,25,.05), 0 6px 24px -12px rgba(16,18,25,.18);
  --sombra-alta:0 2px 6px rgba(16,18,25,.06), 0 24px 60px -24px rgba(16,18,25,.28);

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
  --serif:"Iowan Old Style","Source Serif 4",Charter,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"JetBrains Mono",monospace;

  --topo:56px; --rail:236px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); font-size:14.5px; line-height:1.5;
  color:var(--tinta); background:var(--papel);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--processo);outline-offset:2px;border-radius:4px}

/* ═══════════════════════ SHELL ═══════════════════════ */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  grid-template-rows:var(--topo) 1fr;grid-template-areas:"topo topo" "rail conteudo";min-height:100vh}

.topo{grid-area:topo;display:flex;align-items:center;gap:16px;padding:0 20px;
  background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:30}
/* Sem `gap` no container: em flex, o texto solto depois do <b> vira um item anônimo, e o gap
   abriria "Coretax Jus" — duas palavras onde o nome é uma só. O respiro fica só antes do
   qualificador ("protótipo", "portal"), que é onde ele deve estar. */
.marca{display:flex;align-items:center;font-weight:600;letter-spacing:-.015em;color:var(--tinta)}
/* O SVG herda a cor por `currentColor`: a mesma marca serve no topo claro e em fundo escuro,
   sem um segundo arquivo para sair de sincronia. A altura manda; a largura acompanha o
   viewBox (800×300), que já vem com a folga do desenho. */
.logo-revio{height:19px;width:auto;display:block}
.marca b{color:var(--processo);font-weight:600}
.marca span{color:var(--tinta-3);font-weight:400;font-size:12px;letter-spacing:.02em;margin-left:7px}

.escritorio{display:flex;align-items:center;gap:7px;margin-left:8px;padding:4px 10px;
  border:1px solid var(--linha);border-radius:999px;font-size:12.5px;color:var(--tinta-2);background:#fff}
.escritorio::after{content:"";width:5px;height:5px;border-right:1.4px solid var(--tinta-3);
  border-bottom:1.4px solid var(--tinta-3);transform:rotate(45deg) translateY(-1px)}

.busca{margin-left:auto;display:flex;align-items:center;gap:9px;width:min(340px,32vw);
  padding:6px 12px;background:var(--papel);border:1px solid var(--linha);border-radius:999px;
  color:var(--tinta-3);font-size:13px}
.busca kbd{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--tinta-3);
  border:1px solid var(--linha-forte);border-radius:4px;padding:1px 5px;background:#fff}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--processo);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:600;letter-spacing:.02em}

/* ═══════════════════════ RAIL ═══════════════════════ */
.rail{grid-area:rail;background:var(--superficie);border-right:1px solid var(--linha);
  padding:14px 10px 28px;overflow-y:auto}
.grupo{margin-bottom:18px}
.grupo-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.075em;color:var(--tinta-3);
  padding:0 12px 7px;font-weight:600}
.nav{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:var(--r-sm);
  color:var(--tinta-2);font-size:13.5px;position:relative;transition:background .12s ease}
.nav:hover{background:var(--papel);color:var(--tinta)}
.nav.on{background:var(--processo-fraco);color:var(--processo);font-weight:550}
.nav.on::before{content:"";position:absolute;left:3px;top:9px;bottom:9px;width:2.5px;
  border-radius:2px;background:var(--processo)}
.nav .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tinta-3)}
.nav.on .n{color:var(--processo)}
.nav .n.alerta{background:var(--fatal);color:#fff;padding:1px 6px;border-radius:9px;font-size:10.5px}
/* Contador zero não desenha nada. O endpoint devolve string vazia quando não há publicação
   nova, mas o <em> continua ocupando espaço e pintando de vermelho — um alerta permanente que
   não alerta de coisa nenhuma é o jeito mais rápido de ensinar a equipe a ignorar o vermelho,
   que é exatamente a cor reservada para data fatal. */
.nav .n.alerta:empty{display:none}

/* ═══════════════════════ CONTEÚDO ═══════════════════════ */
.conteudo{grid-area:conteudo;padding:26px 30px 60px;min-width:0}
.tela{display:none;max-width:1180px}
.tela.on{display:block;animation:sobe .22s cubic-bezier(.2,.7,.3,1) both}
@keyframes sobe{from{opacity:0;transform:translateY(5px)}}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.tela.on{animation:none}}

.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.cab h1{margin:0;font-size:25px;font-weight:640;letter-spacing:-.028em}
.cab .sub{margin:3px 0 0;color:var(--tinta-2);font-size:13.5px}
.data-hoje{font-family:var(--mono);font-size:12px;color:var(--tinta-3);letter-spacing:.02em}

/* ── cartões ── */
.grade{display:grid;gap:14px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);
  box-shadow:var(--sombra);padding:16px 18px}
.cartao h3{margin:0 0 12px;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;color:var(--tinta-3)}
.cartao.aperta{padding:0}
.cartao.aperta h3{padding:16px 18px 10px;margin:0;border-bottom:1px solid var(--linha)}

.metrica{display:flex;align-items:baseline;gap:9px}
.metrica b{font-family:var(--mono);font-size:32px;font-weight:600;letter-spacing:-.03em;line-height:1}
.metrica span{font-size:13px;color:var(--tinta-2)}
.metrica.risco b{color:var(--fatal)}

/* ── lista de prazos ── */
.linha-prazo{display:flex;align-items:center;gap:13px;padding:12px 18px;
  border-bottom:1px solid var(--linha);cursor:pointer;transition:background .12s}
.linha-prazo:last-child{border-bottom:0}
.linha-prazo:hover{background:var(--papel)}
.linha-prazo.sel{background:var(--processo-fraco)}
.dcount{font-family:var(--mono);font-size:12.5px;font-weight:600;min-width:42px;text-align:center;
  padding:4px 0;border-radius:6px;background:var(--papel);color:var(--tinta-2);border:1px solid var(--linha)}
.dcount.perto{background:var(--fatal-fraco);color:var(--fatal);border-color:#F0CFCD}
.dcount.medio{background:var(--selo-fraco);color:var(--selo);border-color:#E8DCC2}
.prazo-txt{min-width:0;flex:1}
.prazo-txt b{display:block;font-weight:550;font-size:14px;letter-spacing:-.01em}
.prazo-txt span{display:block;color:var(--tinta-2);font-size:12.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.prazo-data{font-family:var(--mono);font-size:12px;color:var(--tinta-2);text-align:right}
.prazo-data b{display:block;color:var(--fatal);font-weight:600}

/* ═══════ ASSINATURA: TIRA DE CONTAGEM ═══════
   O cálculo do prazo desenhado. Dias contados numerados; pulados riscados com o motivo. */
.tira-wrap{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden}
.tira-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 18px;border-bottom:1px solid var(--linha);flex-wrap:wrap}
.tira-cab h3{margin:0;font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.tira-cab .meta{font-family:var(--mono);font-size:11.5px;color:var(--tinta-3)}
.tira{display:flex;gap:3px;padding:20px 18px 14px;overflow-x:auto;scrollbar-width:thin}
.dia{flex:0 0 auto;width:38px;text-align:center;position:relative;padding-top:16px}
.dia .num{font-family:var(--mono);font-size:9.5px;color:var(--tinta-3);position:absolute;top:0;left:0;right:0}
.dia .cx{height:38px;border-radius:8px;border:1px solid var(--linha);background:var(--papel);
  display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;color:var(--tinta-2);
  transition:transform .14s cubic-bezier(.2,.7,.3,1)}
.dia .dow{font-family:var(--mono);font-size:9.5px;color:var(--tinta-3);margin-top:4px;text-transform:lowercase}
.dia:hover .cx{transform:translateY(-2px)}
.dia.conta .cx{background:#fff;border-color:var(--linha-forte);color:var(--tinta);font-weight:600}
.dia.pula .cx{background:repeating-linear-gradient(-45deg,#fff,#fff 3px,#F0F1F4 3px,#F0F1F4 6px);
  color:var(--tinta-3);border-style:dashed}
.dia.hoje .cx{border-color:var(--processo);box-shadow:0 0 0 2px var(--processo-fraco)}
.dia.interna .cx{border-color:var(--selo);background:var(--selo-fraco);color:var(--selo)}
.dia.fatal .cx{border-color:var(--fatal);background:var(--fatal);color:#fff;font-weight:700}
.dia .tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(3px);
  background:var(--tinta);color:#fff;font-size:11px;padding:5px 9px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:.14s;z-index:5;box-shadow:var(--sombra-alta)}
.dia:hover .tip{opacity:1;transform:translateX(-50%) translateY(0)}
.tira-pe{display:flex;gap:18px;padding:0 18px 16px;flex-wrap:wrap;font-size:11.5px;color:var(--tinta-2)}
.legenda{display:flex;align-items:center;gap:6px}
.amostra{width:13px;height:13px;border-radius:4px;border:1px solid var(--linha-forte);background:#fff}
.amostra.p{background:repeating-linear-gradient(-45deg,#fff,#fff 3px,#F0F1F4 3px,#F0F1F4 6px);border-style:dashed}
.amostra.i{background:var(--selo-fraco);border-color:var(--selo)}
.amostra.f{background:var(--fatal);border-color:var(--fatal)}

/* ── número CNJ segmentado: a estrutura fica legível ── */
.cnj{font-family:var(--mono);font-size:13px;letter-spacing:-.01em;white-space:nowrap}
.cnj i{font-style:normal;color:var(--tinta-3)}
.cnj u{text-decoration:none;color:var(--processo)}

/* ── o texto da lei: serifada, medida curta, como no Diário ── */
.ato{font-family:var(--serif);font-size:15px;line-height:1.62;color:#23262C;
  max-width:62ch;hyphens:auto;text-align:justify}
.ato .destaque{background:linear-gradient(transparent 62%,#FBEBC9 62%);padding-bottom:1px}

/* ── selo de urgência: o único uso do latão ── */
.selo{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;
  border:1px solid #E3D5B4;background:var(--selo-fraco);color:var(--selo);
  font-size:11px;font-weight:600;letter-spacing:.02em}
.selo::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--selo)}
.selo.marca::before{display:none}
.selo.marca{padding:2px 7px;font-weight:700}

.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:11.5px;border:1px solid var(--linha);background:var(--papel);color:var(--tinta-2)}
.pill.ok{background:var(--cumprido-fraco);border-color:#C9E6DB;color:var(--cumprido)}
.pill.az{background:var(--processo-fraco);border-color:#CFDCEF;color:var(--processo)}

.conf{font-family:var(--mono);font-size:11.5px;color:var(--tinta-3);white-space:nowrap}
.conf.baixa{color:var(--selo);font-weight:600}

.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--r-sm);
  border:1px solid var(--linha-forte);background:#fff;font-size:13px;font-weight:500;
  transition:.12s;box-shadow:0 1px 1px rgba(16,18,25,.04)}
.btn:hover{background:var(--papel)}
.btn.primario{background:var(--processo);border-color:var(--processo);color:#fff}
.btn.primario:hover{background:#25406B}
.btn.discreto{border-color:transparent;box-shadow:none;color:var(--tinta-2)}
.btn.discreto:hover{background:var(--papel)}

.filtros{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:5px 13px;border-radius:999px;border:1px solid var(--linha);background:#fff;
  font-size:12.5px;color:var(--tinta-2);transition:.12s}
.chip:hover{border-color:var(--linha-forte)}
.chip.on{background:var(--tinta);border-color:var(--tinta);color:#fff}

/* ── split de triagem ── */
.split{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:16px;align-items:start}
.painel{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);
  box-shadow:var(--sombra);position:sticky;top:calc(var(--topo) + 22px);overflow:hidden}
.painel-cab{padding:15px 18px;border-bottom:1px solid var(--linha)}
.painel-corpo{padding:16px 18px;max-height:calc(100vh - 260px);overflow-y:auto}
.painel-pe{padding:13px 18px;border-top:1px solid var(--linha);display:flex;gap:8px;background:var(--papel)}
.campo{display:block;margin-bottom:12px}
.campo span{display:block;font-size:11.5px;color:var(--tinta-3);margin-bottom:4px;
  text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.campo b{font-weight:550;font-size:14px}

/* ── caso ── */
.caso-cab{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);
  box-shadow:var(--sombra);padding:20px 22px;margin-bottom:16px}
.abas{display:flex;gap:2px;border-bottom:1px solid var(--linha);margin:18px 0 18px}
.aba{padding:9px 14px;font-size:13.5px;color:var(--tinta-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.aba.on{color:var(--processo);border-bottom-color:var(--processo);font-weight:550}
.linha-tempo{position:relative;padding-left:22px}
.linha-tempo::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--linha)}
.evento{position:relative;padding:0 0 18px}
.evento::before{content:"";position:absolute;left:-21px;top:5px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--linha-forte)}
.evento.marco::before{border-color:var(--processo);background:var(--processo)}
.evento time{font-family:var(--mono);font-size:11.5px;color:var(--tinta-3)}
.evento p{margin:2px 0 0;font-size:13.5px}

.vazio{padding:52px 20px;text-align:center;color:var(--tinta-2)}
.vazio b{display:block;font-size:15px;margin-bottom:5px;color:var(--tinta)}

/* ── DevExtreme: alinhado aos tokens ── */
.dx-datagrid{font-family:var(--sans);color:var(--tinta);background:transparent}
.dx-datagrid-headers{border-bottom:1px solid var(--linha)!important;color:var(--tinta-3);
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.dx-datagrid-headers .dx-datagrid-table td{padding:11px 14px!important}
.dx-datagrid-rowsview .dx-row>td{padding:12px 14px!important;border-bottom:1px solid var(--linha)!important;
  vertical-align:middle}
.dx-datagrid-rowsview .dx-row-alt>td{background:transparent!important}
.dx-datagrid .dx-row-focused>td{background:var(--processo-fraco)!important;color:var(--tinta)!important}
.dx-datagrid-rowsview .dx-selection>td{background:var(--processo-fraco)!important}
.dx-scheduler-header{background:transparent;border:0}
.dx-scheduler-work-space{border-radius:0 0 var(--r) var(--r)}

.tabela{width:100%;border-collapse:collapse;font-size:13.5px}
.tabela th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tinta-3);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--linha);white-space:nowrap}
.tabela td{padding:12px 14px;border-bottom:1px solid var(--linha)}
.tabela tr:last-child td{border-bottom:0}
.tabela tbody tr{cursor:pointer}
.tabela tbody tr:hover td{background:var(--papel)}
.tabela tbody tr.sel td{background:var(--processo-fraco)}


/* ═══════ BARRA DE SLA (demandas) ═══════
   Dividida em dois trechos: o tempo que a bola esteve com o escritório e o que ficou
   com o cliente. Sem essa distinção o SLA acusa atraso por espera que não é nossa. */
.sla{height:6px;border-radius:3px;background:var(--linha);overflow:hidden;display:flex;margin-top:7px}
.sla i{display:block;height:100%}
.sla .nosso{background:var(--processo)}
.sla .deles{background:repeating-linear-gradient(-45deg,#C9CDD5,#C9CDD5 3px,#E4E6EA 3px,#E4E6EA 6px)}
.sla.estourou .nosso{background:var(--fatal)}

/* ═══════ FAIXA DE VIGÊNCIA (contratos) ═══════
   Mesma linguagem da tira de contagem, em escala de meses: a janela de aviso prévio
   é o trecho que importa, não a data final. */
.vig{position:relative;height:38px;border-radius:8px;background:var(--papel);
  border:1px solid var(--linha);overflow:hidden;margin:10px 0 6px}
.vig .decorrido{position:absolute;left:0;top:0;bottom:0;background:var(--processo-fraco)}
.vig .janela{position:absolute;top:0;bottom:0;background:var(--selo-fraco);
  border-left:1px dashed var(--selo);border-right:1px dashed var(--selo)}
.vig .agora{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--processo);border-radius:2px}
.vig .fim{position:absolute;top:0;bottom:0;right:0;width:3px;background:var(--fatal)}
.vig-eixo{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10.5px;color:var(--tinta-3)}

/* ═══════ RELÓGIOS DE PI ═══════
   Dois prazos que não conversam: a vigência (anos) e a retribuição (meses). Quem
   olha só a vigência perde a anuidade e a patente é extinta por falta de pagamento. */
.relogios{display:flex;gap:22px;align-items:center}
.relogio{text-align:center}
.relogio svg{display:block;margin:0 auto 4px}
.relogio b{font-family:var(--mono);font-size:12.5px;display:block}
.relogio span{font-size:10.5px;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.05em}

/* ═══════ KANBAN (oportunidades) ═══════ */
.kanban{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}
.coluna{background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);padding:11px}
.coluna h4{margin:0 0 3px;font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tinta-2)}
.coluna .soma{font-family:var(--mono);font-size:11px;color:var(--tinta-3);margin-bottom:10px;display:block}
.lead{background:#fff;border:1px solid var(--linha);border-radius:var(--r-sm);padding:10px 11px;
  margin-bottom:8px;box-shadow:0 1px 1px rgba(16,18,25,.04);cursor:grab}
.lead:last-child{margin-bottom:0}
.lead b{display:block;font-size:13px;font-weight:550;letter-spacing:-.01em}
.lead span{display:block;font-size:11.5px;color:var(--tinta-2);margin-top:2px}
.lead .val{font-family:var(--mono);font-size:11.5px;color:var(--tinta-2);margin-top:6px;display:block}

/* ═══════ SAÚDE DA CAPTURA ═══════ */
.pulso{display:flex;gap:2px;align-items:flex-end;height:26px}
.pulso i{width:5px;border-radius:1.5px;background:var(--cumprido)}
.pulso i.falhou{background:var(--fatal)}
.pulso i.vazio{background:var(--linha)}

/* ═══════ SEMANA DE HORAS ═══════ */
.semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.dia-h{background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-sm);
  padding:9px;min-height:104px}
.dia-h.hoje{border-color:var(--processo);background:var(--processo-fraco)}
.dia-h .t{font-family:var(--mono);font-size:10.5px;color:var(--tinta-3);text-transform:lowercase}
.dia-h .h{font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:-.02em;margin:3px 0 6px}
.dia-h .h.zero{color:var(--tinta-3);font-weight:400}
.lanc{font-size:11px;color:var(--tinta-2);padding:3px 0;border-top:1px solid var(--linha);line-height:1.35}

/* ═══════ BARRAS (rateio) ═══════ */
.barra{height:8px;border-radius:4px;background:var(--linha);overflow:hidden;margin-top:6px}
.barra i{display:block;height:100%;background:var(--processo)}
.barra i.exito{background:var(--selo)}

.conflito{border:1px solid var(--linha);border-radius:var(--r-sm);padding:12px 14px;background:var(--papel)}
.conflito .achado{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--linha);font-size:13px}
.conflito .achado:last-child{border-bottom:0}
/* O contexto do achado é frase, não dado tabular: precisa quebrar. O `.conf` é mono e
   `white-space:nowrap` por padrão (bom para CNJ e data, péssimo para "cliente · Projeto Ipê ·
   societário · ativo"), e sem isto o painel ganha barra de rolagem horizontal e esconde
   justamente o motivo do impedimento. */
.conflito .achado > div{min-width:0}
.conflito .achado .conf{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.conflito .achado .tag{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 7px;border-radius:999px}
.tag.contra{background:var(--fatal-fraco);color:var(--fatal)}
.tag.nosso{background:var(--cumprido-fraco);color:var(--cumprido)}

@media (max-width:1080px){
  .split{grid-template-columns:1fr}.painel{position:static}
  .g3{grid-template-columns:1fr 1fr}.g2{grid-template-columns:1fr}
}
@media (max-width:820px){
  .shell{grid-template-columns:1fr;grid-template-areas:"topo" "conteudo"}
  .rail{display:none}.conteudo{padding:20px 16px 48px}.g3{grid-template-columns:1fr}
}

/* ═══════════════════════ ENTRAR ═══════════════════════
   Telas de autenticação. Duas colunas: a arte à esquerda mostra a tira de
   contagem — o elemento-assinatura — porque é o que diz o que o produto faz
   antes de o usuário ter qualquer dado dentro dele. */
.entrar{min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr;background:var(--superficie)}
.entrar-arte{background:var(--tinta);color:#fff;padding:56px 52px;display:flex;flex-direction:column;
  justify-content:space-between;position:relative;overflow:hidden}
.entrar-arte h2{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.18;margin:0;max-width:15ch}
.entrar-arte p{color:#A9AEB8;font-size:15px;max-width:38ch;margin:14px 0 0;line-height:1.55}
.entrar-tira{display:flex;gap:3px;opacity:.5}
.entrar-tira i{width:22px;height:22px;border-radius:5px;border:1px solid #3A3E47;display:block}
.entrar-tira i.c{background:#2A2E36;border-color:#494E58}
.entrar-tira i.p{background:repeating-linear-gradient(-45deg,transparent,transparent 3px,#2A2E36 3px,#2A2E36 6px);
  border-style:dashed}
.entrar-tira i.f{background:var(--fatal);border-color:var(--fatal)}
.entrar-form{padding:56px 52px;display:flex;flex-direction:column;justify-content:center;
  max-width:440px;width:100%}

.entrada{display:block;width:100%;padding:11px 13px;border:1px solid var(--linha-forte);
  border-radius:var(--r-sm);font-size:14.5px;font-family:var(--sans);background:#fff;margin-bottom:11px}
.entrada:focus{outline:none;border-color:var(--processo);box-shadow:0 0 0 3px var(--processo-fraco)}

.ou{display:flex;align-items:center;gap:12px;color:var(--tinta-3);font-size:12px;margin:18px 0}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--linha)}

/* Rótulo só para leitor de tela: o placeholder some ao digitar e deixaria o
   campo sem nome acessível — e formulário de login sem rótulo é o caso mais
   comum de tela inutilizável para quem usa leitor. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* No celular a arte sai: 34px de manchete acima do formulário empurraria os
   campos para fora da dobra, e login é para ser resolvido, não lido. */
@media (max-width:860px){
  .entrar{grid-template-columns:1fr}
  .entrar-arte{display:none}
  .entrar-form{padding:40px 24px;max-width:none;margin:0 auto;min-height:100vh}
}

/* ═══════════════════════ AVISO ═══════════════════════
   Latão = "olhe com atenção"; vermelho = erro que impede a ação. Nunca o inverso:
   o vermelho é a cor da data fatal e perde força se aparecer em aviso comum. */
.aviso{border-left:2.5px solid var(--selo);background:var(--selo-fraco);padding:13px 16px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13px;line-height:1.55;color:#5C4A22}
.aviso b{font-weight:600}
.aviso.grave{border-left-color:var(--fatal);background:var(--fatal-fraco);color:#7A2320}

/* ═══════════════════════ COMPLEMENTOS DE TABELA E PÁGINA ═══════════════════════ */
/* Rolagem própria da tabela: a lista é longa e a página não deve rolar junto,
   senão o cabeçalho com os filtros sai da tela e o usuário perde o contexto. */
.tabela-rolagem{overflow-x:auto;max-width:100%}
/* Informação secundária na mesma linha (dias sugeridos, unidade, complemento). */
.sutil{color:var(--tinta-3);font-size:12.5px}
/* Linha que a IA marcou como urgente: um fio de latão à esquerda, não fundo colorido —
   a lista inteira pintada deixa de destacar o que importa. */
.tabela tbody tr.urgente td:first-child{box-shadow:inset 2.5px 0 0 var(--selo)}

.pagina-cabecalho{margin-bottom:18px}
.pagina-cabecalho h1{font-size:25px;font-weight:640;letter-spacing:-.028em;margin:0}
.cartoes{display:flex;flex-direction:column;gap:12px}