/* =====================================================================
   Painel de Gestão — Porto Central / Ifes
   Paleta e disposição herdadas do Cockpit do TPDPlay, de propósito:
   quem usa os dois reconhece a casa.

   O arquivo tem DOIS QUADRADOS, e eles não se misturam:
     · o do PC      — lateral fixa, centro fluido, gaveta que sobrepõe
     · o do CELULAR — tudo dentro do @media do fim; navegação em 3 níveis
   Nenhuma decisão do celular atravessa para o PC.
   ===================================================================== */
:root{
  /* 🔴 copiados do CP escuro (/opt/suporte-tpdplay/templates/painel.html,
     :root[data-tema="escuro"]) — não estimados de olho no print. */
  --bg:#0f1520; --painel:#161d2b; --borda:#263041; --borda2:#232d3f;
  --txt:#e6ecf4; --fraco:#94a3b8; --apagado:#64748b;
  --azul:#5b8dff; --azul2:#5b8dff; --azul-fraco:#1d2942;
  --hover:#1c2536; --chip:#232d3f;
  --lane:#141b28; --lane-hover:#1f2c47; --lane-chip:#232d3f;
  --card:#1b2331; --divisor:#232d3f;
  --sombra:0 1px 3px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.25);
  --verde:#6ee7a0; --amarelo:#f0c674; --vermelho:#ff8f8f;
  --roxo:#b7a5ff; --laranja:#f0a868;
  --gaveta-w:min(680px,46vw);
  color-scheme: dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.5}
a{color:var(--azul2);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:20px;margin:0 0 4px}
h2{font-size:15px;margin:28px 0 10px;color:var(--fraco);font-weight:600;
  text-transform:uppercase;letter-spacing:.6px}
.sub{color:var(--fraco);margin:0 0 18px;font-size:13px}

/* =====================================================================
   MOLDURA — molde do Cockpit do TPDPlay:
     barra no topo com as seções · lateral só com as listas ·
     centro com as colunas ALTAS · gaveta que sobrepõe.
   A página NÃO rola: quem rola é a coluna, por dentro. É o que faz o
   board caber na tela em vez de virar uma tira comprida.
   ===================================================================== */
html,body{height:100%}
body{display:flex;flex-direction:column;overflow:hidden}

.topo{flex:none;display:flex;align-items:center;gap:14px;height:52px;padding:0 16px;
  background:var(--painel);border-bottom:1px solid var(--borda)}
.topo .marca{font-weight:800;letter-spacing:-.3px;font-size:17px;color:var(--txt);white-space:nowrap}
.topo .marca b{color:var(--azul2)}
.topo .marca:hover{text-decoration:none}
.topo .marca-sub{font-size:15px;font-weight:600;color:var(--fraco);white-space:nowrap}
/* a vigência do projeto (v11): selo pequeno que não some no PC estreito, ao
   contrário do marca-sub. Vira link só quando há para onde trocar. */
.topo .vig{font-size:12px;font-weight:600;color:var(--fraco);white-space:nowrap;
  border:1px solid var(--borda);border-radius:999px;padding:2px 8px}
.topo a.vig:hover{color:var(--txt);border-color:var(--azul);text-decoration:none}
.topo .busca{flex:0 1 380px;min-width:120px}
.topo .busca input{padding:7px 12px;font-size:13px;border-radius:8px}
.topo .abas{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.topo .abas::-webkit-scrollbar{display:none}
.topo .abas a{padding:6px 11px;border-radius:8px;color:var(--fraco);font-size:13.5px;white-space:nowrap}
.topo .abas a:hover{background:var(--borda2);color:var(--txt);text-decoration:none}
.topo .abas a.on{background:#132a52;color:#79b8ff;font-weight:600}
.topo .eu{font-size:12px;color:var(--fraco);white-space:nowrap}

/* tela estreita de PC: a barra de busca cede espaco para as secoes caberem */
@media(max-width:1520px){
  .topo{gap:10px}
  .topo .marca-sub{display:none}
  .topo .busca{flex:0 1 250px}
  .topo .abas a{padding:6px 8px;font-size:13px}
}

main{flex:1;display:flex;min-height:0}

/* ---------------- lateral: as listas ---------------- */
.lateral{width:330px;flex:none;background:var(--painel);border-right:1px solid var(--borda);
  overflow-y:auto;padding:6px 0 22px}
.lbloco{padding-bottom:8px}
.lbloco + .lbloco{margin-top:14px;border-top:1px solid var(--borda);padding-top:4px}
.lbloco-topo{display:flex;align-items:flex-start;gap:9px;padding:15px 16px 4px}
.lbloco-ic{font-size:14px;line-height:1.3;flex:none;opacity:.85}
.lbloco-nome{font-size:12.5px;font-weight:700;letter-spacing:.2px;color:var(--txt)}
.lbloco-sub{font-size:10.5px;color:var(--apagado);line-height:1.35;margin-top:3px}
/* o bloco de leitura é de propósito mais quieto: não é fila */
.lbloco-mon{background:rgba(127,127,127,.06);border-radius:10px;margin:14px 6px 0}
.lbloco-mon .lbloco-nome{color:var(--fraco)}
.grupo{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--apagado);padding:14px 18px 6px}
/* a marca do item ativo no CP é a BARRA AZUL à esquerda + o fundo azul fraco —
   não só um fundo cinza. E a contagem é pílula, não número solto. */
.origem{display:flex;align-items:center;gap:10px;padding:9px 18px;color:var(--txt);
  font-size:13.5px;border-left:3px solid transparent}
.origem:hover{background:var(--hover);text-decoration:none}
.origem.on{background:var(--azul-fraco);border-left-color:var(--azul)}
.origem .pt{width:9px;height:9px;border-radius:50%;flex:none}
.origem .nome{flex:1;min-width:0;font-size:13.5px}
.origem .n{font-size:11.5px;font-weight:600;color:var(--fraco);background:var(--chip);
  border-radius:11px;padding:1px 8px;font-variant-numeric:tabular-nums}
.origem.on .n{background:var(--painel);color:var(--azul)}
.lateral-fundo{display:none}
.abrir-lat{display:none}

/* ---------------- centro ---------------- */
.centro{flex:1;min-width:0;overflow-y:auto;padding:20px 22px 40px}
/* páginas de board não rolam: a rolagem é de cada coluna */
.centro.fixa{overflow:hidden;display:flex;flex-direction:column;padding-bottom:0}
.md,.sub,.aviso{max-width:100ch}
.rodape{margin-top:34px;padding-top:14px;border-top:1px solid var(--borda2);
  color:var(--apagado);font-size:11px}

/* ---------------- gaveta ---------------- */
.gaveta{position:fixed;top:0;right:0;width:var(--gaveta-w);height:100%;background:var(--painel);
  border-left:1px solid var(--borda);box-shadow:-14px 0 40px rgba(0,0,0,.5);
  transform:translateX(101%);transition:transform .18s ease,visibility .18s;z-index:60;
  display:flex;flex-direction:column;visibility:hidden}
body.com-gaveta .gaveta{transform:none;visibility:visible}
.gaveta-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:none;
  padding:16px 18px;border-bottom:1px solid var(--borda)}
.gaveta-topo b{font-size:16px}
.gaveta-topo .fechar{background:none;border:0;color:var(--fraco);font-size:16px;
  cursor:pointer;padding:2px 8px;border-radius:6px}
.gaveta-topo .fechar:hover{background:var(--borda2);color:var(--txt)}
.gaveta-corpo{padding:16px 18px 34px;overflow-y:auto;flex:1}
.gaveta-fundo{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:55;display:none}
body.com-gaveta .gaveta-fundo{display:block}

/* ========================= avisos e números ========================= */
.aviso{border:1px solid var(--borda);border-left:3px solid var(--amarelo);
  background:#1c1a12;border-radius:8px;padding:11px 14px;margin:0 0 18px;font-size:13px;color:#e3c08b}
.aviso.info{border-left-color:var(--azul);background:#10192b;color:#a5c8ff}
.aviso b{color:#fff}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin-bottom:8px}
.num{background:var(--painel);border:1px solid var(--borda);border-radius:10px;padding:13px 15px}
.num .v{font-size:24px;font-weight:700;line-height:1.1}
.num .r{font-size:11px;color:var(--fraco);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.num.alerta .v{color:var(--vermelho)}
.num.ok .v{color:var(--verde)}
.num.atencao .v{color:var(--amarelo)}
.barra{height:7px;border-radius:4px;background:var(--borda2);overflow:hidden;margin-top:8px}
.barra i{display:block;height:100%;background:var(--azul);border-radius:4px}

/* ============================= tabelas ============================= */
table{width:100%;border-collapse:collapse;font-size:13px}
.rolar{overflow-x:auto;border:1px solid var(--borda);border-radius:10px;background:var(--painel)}
th{text-align:left;font-weight:600;color:var(--fraco);font-size:11px;text-transform:uppercase;
  letter-spacing:.5px;padding:10px 12px;border-bottom:1px solid var(--borda);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--borda2);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#1a2029}
td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.c{text-align:center}

/* =================== blocos, formulário, selos =================== */
.bloco{background:var(--painel);border:1px solid var(--borda);border-radius:10px;
  padding:18px 20px;margin-bottom:14px}
.bloco h3{margin:0 0 10px;font-size:14px}
.duas{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start;max-width:1420px}
.chave{color:var(--fraco);font-size:12px;margin-top:12px}
.valor{margin-top:2px;overflow-wrap:break-word}
.md h1,.md h2,.md h3{text-transform:none;letter-spacing:0;color:var(--txt)}
.md h2{font-size:16px;margin:20px 0 8px}
.md blockquote{margin:12px 0;padding:9px 14px;border-left:3px solid var(--amarelo);
  background:#1c1a12;border-radius:0 8px 8px 0;color:#e3c08b}
.md code{background:var(--borda2);padding:1px 5px;border-radius:4px;font-size:12px}
.md table{margin:12px 0}
.md th,.md td{border:1px solid var(--borda)}

.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.card-area{display:block;background:var(--painel);border:1px solid var(--borda);
  border-radius:10px;padding:15px 16px;border-top:3px solid var(--azul);color:var(--txt)}
.card-area:hover{border-color:var(--apagado);text-decoration:none}
.card-area .t{font-weight:600;font-size:14px}
.card-area .d{color:var(--fraco);font-size:12px;margin-top:2px}
.card-area .m{display:flex;gap:14px;margin-top:11px;font-size:12px;color:var(--fraco)}
.card-area .m b{color:var(--txt);font-variant-numeric:tabular-nums}

/* fase criada pelo gestor não tem classe .s-<chave>: sem este padrão o selo
   sai invisível (fundo e borda transparentes). Ele é o piso; as classes
   abaixo só sobrescrevem as cinco fases de fábrica. */
/* a grade de liberacoes: coluna estreita por setor, marca de "ve de qualquer
   forma" colada no checkbox */
table.grade th.c{font-size:10.5px;line-height:1.3;font-weight:600;color:var(--fraco);
  padding:8px 4px;vertical-align:bottom;white-space:nowrap}
table.grade th.c .pt{display:inline-block;width:9px;height:9px;border-radius:50%;margin-bottom:3px}
table.grade td.c{padding:7px 4px;white-space:nowrap}
table.grade input[type=checkbox]{width:auto;cursor:pointer;vertical-align:middle}
table.grade .pin{color:var(--azul);font-size:15px;line-height:1;margin-left:2px;cursor:help}
table.grade tr:hover td{background:var(--hover)}

a.voltar{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  color:var(--fraco);background:var(--chip);border:1px solid var(--borda);
  border-radius:20px;padding:3px 11px;white-space:nowrap}
a.voltar:hover{color:var(--txt);border-color:var(--apagado);text-decoration:none}

a.bt{display:inline-block;flex:none;background:var(--azul);color:#fff;font-size:13px;
  font-weight:600;padding:9px 16px;border-radius:9px;white-space:nowrap}
a.bt:hover{text-decoration:none;filter:brightness(1.1)}

.foruns{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.forum-card{background:var(--card);border:1px solid var(--borda);border-radius:10px;
  padding:13px 15px;color:var(--txt);box-shadow:var(--sombra)}
.forum-card:hover{border-color:var(--azul);text-decoration:none}
.forum-card .t{font-size:15px;font-weight:700;color:var(--azul)}
.forum-card .d{font-size:12px;color:var(--fraco);line-height:1.4;margin-top:3px}
.forum-card .m{display:flex;gap:12px;margin-top:9px;font-size:11px;color:var(--apagado)}

.selo{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;
  font-weight:600;white-space:nowrap;background:var(--borda2);color:var(--fraco);
  border:1px solid var(--borda)}
.s-a_fazer{background:#21262d;color:var(--fraco);border-color:var(--borda)}
.s-em_curso{background:#10192b;color:#79b8ff;border-color:#1f4b8f}
.s-entregue{background:#1c1a12;color:#e3c08b;border-color:#6b5220}
.s-aprovado{background:#12261e;color:#7ee787;border-color:#238636}
.s-dispensado{background:#1a1a1a;color:var(--apagado);border-color:var(--borda)}
.atrasado{background:#3d1418;color:#ff9d9d;border-color:#6e2329}
.tag{display:inline-block;padding:1px 7px;border-radius:5px;background:var(--borda2);
  color:var(--fraco);font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.senha-campo{position:relative}
.senha-campo input{padding-right:78px}
.senha-campo .olho{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:auto;background:none;border:0;color:var(--fraco);font-size:11.5px;
  font-weight:600;cursor:pointer;padding:5px 9px;border-radius:6px}
.senha-campo .olho:hover{background:var(--hover);color:var(--txt)}

label{display:block;font-size:12px;color:var(--fraco);margin:14px 0 5px}
input,select,textarea{width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--borda);
  background:var(--bg);color:var(--txt);font-size:14px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul)}
textarea{min-height:90px;resize:vertical}
button,.botao{display:inline-block;padding:9px 16px;border:0;border-radius:8px;cursor:pointer;
  background:var(--azul);color:#fff;font-size:14px;font-weight:600;font-family:inherit}
button:hover,.botao:hover{background:var(--azul2);text-decoration:none}
button.fraco{background:var(--borda2);color:var(--txt)}
button.fraco:hover{background:var(--borda)}

/* termo do glossário: sublinhado pontilhado, tooltip nativo no hover */
a.termo{color:inherit;text-decoration:none;border-bottom:1px dotted var(--apagado);cursor:help}
a.termo:hover{color:var(--azul2);border-bottom-color:var(--azul2);text-decoration:none}

/* ============================== BOARD ==============================
   Colunas ALTAS, lado a lado, enchendo a tela — como no Cockpit. Cada
   coluna rola por dentro; a página, não. Os meses são um acordeão: um
   aberto por vez, senão as colunas não teriam altura para ocupar.
   =================================================================== */
.cabeca{flex:none;margin-bottom:12px}
.cabeca h1{margin:0}
.cabeca .sub{margin:2px 0 0}
.barra-topo{flex:none;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}
.barra-topo .rot{font-size:10.5px;font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;color:var(--apagado)}
.chip{display:inline-flex;gap:7px;align-items:center;cursor:pointer;font-size:12.5px;
  padding:6px 12px;border:1px solid var(--borda);border-radius:20px;
  background:var(--bg);color:var(--txt)}
.chip:hover{border-color:var(--apagado);text-decoration:none}
.chip.on{background:#132a52;border-color:#1f4b8f;color:#79b8ff;font-weight:600}
.chip .n{font-size:10.5px;color:var(--fraco);background:var(--painel);border-radius:9px;padding:0 6px}
.chip.feito{border-color:#238636}
.chip.feito .n{color:var(--verde)}

.lanes{flex:1;display:flex;gap:12px;overflow-x:auto;min-height:0;padding-bottom:14px}
/* a coluna do CP tem FUNDO PRÓPRIO (--lane, mais escuro que o painel) e nenhuma
   borda: é o contraste de fundo que separa as colunas, não um contorno. */
.lane{flex:1 1 290px;min-width:234px;max-width:340px;background:var(--lane);
  border-radius:12px;display:flex;flex-direction:column;max-height:100%}
.lane.alvo{background:var(--lane-hover);outline:2px dashed var(--azul);outline-offset:-3px}
.lane-topo{flex:none;padding:11px 13px 8px;display:flex;align-items:center;gap:8px}
.lane-topo .pt{width:9px;height:9px;border-radius:50%;flex:none}
.lane-topo b{font-size:12.5px;font-weight:650}
.lane-topo .n{margin-left:auto;font-size:11px;font-weight:600;color:var(--fraco);
  background:var(--lane-chip);border-radius:10px;padding:1px 7px}
.lane-cards{flex:1;overflow-y:auto;padding:0 9px 10px;display:flex;flex-direction:column;gap:8px}
.lane-cards .vazio{color:var(--apagado);font-size:12.5px;text-align:center;padding:14px}

/* o card do CP: uma FAIXA colorida no topo (a cor da lista) com o código e as
   marcas, o corpo com o nome, e o rodapé separado por traço. A cor não é uma
   borda à esquerda — é a faixa. */
.kcard{background:var(--card);border-radius:10px;padding:0;box-shadow:var(--sombra);
  overflow:hidden;flex:none;cursor:pointer}
.kcard.sel{outline:2px solid var(--azul);outline-offset:-2px}
.kcard.pegando{opacity:.4}
.kcard .kfaixa{display:flex;align-items:center;gap:6px;padding:5px 9px;min-height:26px;
  border-top:3px solid transparent;background:#00000018;cursor:default}
.kcard .kfaixa .kcod{font-size:11px;font-weight:600;color:var(--fraco);
  padding:1px 5px;border-radius:5px;background:#00000022;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.kcard .kfaixa .kdata{margin-left:auto;font-size:11px;color:var(--fraco)}
.kcard.vencido .kfaixa .kdata{color:var(--vermelho);font-weight:600}
.kcard .kcorpo{padding:9px 12px 11px;cursor:grab}
.kcard:active .kcorpo{cursor:grabbing}
.kcard .ktit{font-weight:600;font-size:13.5px;line-height:1.35}
.kcard .kmeta{color:var(--fraco);font-size:11.5px;display:flex;gap:6px;
  flex-wrap:wrap;align-items:center;margin-top:5px}
.kcard .krod{margin:9px -12px -11px;padding:7px 12px;font-size:11px;color:var(--apagado);
  line-height:1.35;border-top:1px solid var(--borda);background:#00000018;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;
  align-items:flex-start;justify-content:center;padding:60px 16px;overflow-y:auto}
.modal.on{display:flex}
.modal-cx{width:min(96vw,880px);background:var(--painel);border:1px solid var(--borda);border-radius:12px}

/* =========================== cronograma =========================== */
.crono td,.crono th{padding:5px 7px;font-size:12px}
.crono .x{width:34px;text-align:center}
.crono .x a{display:block;width:100%;height:20px;border-radius:4px;background:var(--borda2)}
.crono .x a.on{background:var(--azul)}
.crono .x a.late{background:var(--vermelho)}
.crono .x a.done{background:var(--verde)}
.crono .x a.sent{background:var(--amarelo)}
.crono .lbl{position:sticky;left:0;background:var(--painel);min-width:300px;max-width:380px}

/* ======================= GUIA DE ENTREGAS (v9) =======================
   A tela do protótipo aprovado em 31/10/2026: a lista de documentos à
   esquerda, o documento aberto e as referências dele à direita. Cada
   metade rola por dentro, como as colunas do board. Prefixo g- em tudo:
   .aviso, .chip, .grupo e .bloco do painel têm outro desenho.
   ===================================================================== */
.g-so{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;color:var(--amarelo);
  border:1px solid #4a3d1c;background:#231d0e;border-radius:20px;padding:0 8px}
.guia{flex:1;min-height:0;display:grid;grid-template-columns:minmax(270px,350px) 1fr;
  border:1px solid var(--borda);border-radius:12px 12px 0 0;border-bottom:0;overflow:hidden}
.g-lista{background:var(--painel);border-right:1px solid var(--borda);display:flex;
  flex-direction:column;min-height:0}
.g-filtros{flex:none;padding:12px 14px;border-bottom:1px solid var(--borda);display:grid;gap:10px}
.g-filtros input{padding:8px 12px;font-size:13px}
.g-chips{display:flex;gap:6px;flex-wrap:wrap}
.g-chip{border:1px solid var(--borda);background:transparent;color:var(--fraco);border-radius:20px;
  padding:3px 10px;font-size:12px;font-weight:500;cursor:pointer}
.g-chip:hover{background:var(--hover);color:var(--txt)}
.g-chip[aria-pressed="true"]{background:var(--azul-fraco);border-color:var(--azul);color:var(--txt)}
.g-resumo{font-size:11.5px;color:var(--apagado)}
.g-rol{flex:1;overflow-y:auto;padding:6px 8px 24px;min-height:0}
.g-grupo{font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--apagado);
  font-weight:700;padding:14px 8px 6px;display:flex;align-items:center;gap:8px}
.g-grupo i,.g-pt{width:8px;height:8px;border-radius:2px;display:inline-block;flex:none}
.g-item{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:start;
  padding:8px 10px;border-radius:8px;cursor:pointer;border:1px solid transparent;width:100%;
  text-align:left;background:transparent;color:inherit;font-weight:400;font-size:13.5px}
.g-item:hover{background:var(--hover)}
.g-item[aria-current="true"]{background:var(--azul-fraco);border-color:#2b4a8a}
.g-cod,.g-mono,.g-rid{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.g-cod{font-size:11.5px;color:var(--fraco);padding-top:2px;min-width:38px}
.g-tit{font-size:13.5px;line-height:1.35;min-width:0}
.g-meta{grid-column:2/4;font-size:11.5px;color:var(--apagado);display:flex;gap:8px;flex-wrap:wrap}
.g-crono{color:var(--azul)}
.g-falta{color:var(--vermelho)}
.g-qtd{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--fraco);
  background:var(--chip);border-radius:11px;padding:1px 8px;white-space:nowrap}
.g-qtd.zero{color:var(--vermelho);background:#2a1719}
.g-apagado{color:var(--apagado)}
.g-vazio{color:var(--fraco);padding:40px 0;text-align:center}

.g-det{overflow-y:auto;min-height:0;padding:20px 24px 48px}
.g-det-in{max-width:980px;display:grid;gap:20px}
.g-cab .g-sobre{font-size:12px;color:var(--fraco);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.g-cab h2{font-size:20px;margin:6px 0;color:var(--txt);text-transform:none;letter-spacing:0;
  font-weight:700;line-height:1.25;text-wrap:balance}
.g-cab p{margin:0;color:#c9d3e0;max-width:75ch}
.g-crono-l{margin-top:8px;font-size:12.5px;color:var(--fraco)}
.g-fatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--borda);border:1px solid var(--borda);border-radius:10px;overflow:hidden}
.g-fato{background:var(--card);padding:10px 12px;min-width:0}
.g-fato b{display:block;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--apagado);font-weight:700;margin-bottom:3px}
.g-fato span{font-size:13px;overflow-wrap:anywhere}
.g-selo{font-size:10.5px;border-radius:5px;padding:1px 6px;margin-left:4px;font-weight:600}
.g-selo.esc{background:#12301f;color:var(--verde)}
.g-selo.inf{background:#2e2711;color:var(--amarelo)}
.g-dois{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g-bloco h3,.g-refs-t{font-size:11.5px;letter-spacing:.7px;text-transform:uppercase;
  color:var(--fraco);margin:0 0 8px}
.g-bloco ul{margin:0;padding-left:18px;color:#c9d3e0;font-size:13px}
.g-bloco li{margin:3px 0}
.g-txt{margin:0;font-size:13px;color:#c9d3e0}
.g-fonte li a{font-weight:600}
.g-sec{color:var(--fraco)}
.g-aviso{border:1px solid #4a3d1c;background:#1f1a0c;border-radius:10px;padding:10px 14px;
  font-size:13px;color:#e9d9a8}
.g-aviso ul{margin:4px 0 0;padding-left:18px}
.g-aviso.ruim{border-color:#5a2a2e;background:#221316;color:#f3c4c4}
.g-aviso b{color:var(--amarelo)}
.g-aviso.ruim b{color:var(--vermelho)}

.g-refs-t{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--txt);
  text-transform:none;letter-spacing:0}
.g-faixa{font-size:11px;letter-spacing:.7px;text-transform:uppercase;font-weight:700;
  color:var(--fraco);margin:16px 0 8px;display:flex;gap:8px;align-items:center}
.g-faixa::after{content:"";flex:1;height:1px;background:var(--borda)}
.g-ref{display:grid;grid-template-columns:108px 1fr;gap:14px;background:var(--card);
  border:1px solid var(--borda2);border-radius:10px;padding:12px;margin-bottom:10px}
.g-ref.p1{border-color:#2b4a8a}
.g-mini{width:108px;aspect-ratio:3/4;max-width:100%;border-radius:6px;background:#0b1018;
  border:1px solid var(--borda);object-fit:cover;object-position:top;display:block}
.g-mini.vazia{display:grid;place-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:var(--apagado);text-align:center;padding:6px}
.g-ref-c{min-width:0;display:grid;gap:6px}
.g-ref-t{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.g-ref-t strong{font-size:14px;line-height:1.3}
.g-rid{font-size:11px;color:var(--apagado)}
.g-papel{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  border-radius:5px;padding:2px 7px;white-space:nowrap}
.g-papel.gabarito{background:#132a52;color:#8fb4ff}
.g-papel.conteudo{background:#1f2a1a;color:var(--verde)}
.g-papel.norma{background:#2a2140;color:var(--roxo)}
.g-papel.dado{background:#2c2114;color:var(--laranja)}
.g-papel.exemplo{background:#262b33;color:var(--fraco)}
.g-orig{font-size:12px;color:var(--apagado)}
.g-outro{font-size:10.5px;font-weight:600;color:var(--laranja);border:1px solid #4a3218;
  border-radius:5px;padding:0 6px}
.g-estrelas{font-size:11px;color:var(--amarelo);letter-spacing:1px}
.g-uso{font-size:13px;color:#d6dee9}
.g-uso b,.g-onde b{color:var(--fraco);font-weight:600}
.g-onde{font-size:12.5px;color:#b9c5d6}
.g-cuid{font-size:12px;color:var(--amarelo)}
.g-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.g-bt{border:1px solid var(--borda);background:var(--chip);color:var(--txt);border-radius:7px;
  padding:5px 11px;font-size:12.5px;font-weight:500;cursor:pointer;display:inline-flex;
  align-items:center;gap:6px}
.g-bt:hover{background:var(--hover);text-decoration:none}
.g-bt.pri{background:var(--azul);border-color:var(--azul);color:#fff}
.g-ficha{grid-column:1/-1;border-top:1px dashed var(--borda);padding-top:10px;font-size:13px;
  color:#c9d3e0;display:grid;gap:8px}
/* sem isto o display:grid acima vence o [hidden] do navegador e a ficha nasce aberta */
.g-ficha[hidden]{display:none}
.g-ficha h4{margin:0;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--fraco)}
.g-ficha ul{margin:2px 0 0;padding-left:18px}
.g-ficha p{margin:0}

/* a caixa do Guia dentro do card */
.g-cref{padding:8px 0;border-bottom:1px solid var(--borda2)}
.g-cref:last-of-type{border-bottom:0}
.g-cref .g-papel{margin-right:6px}
.g-cuso{font-size:12px;color:var(--fraco);margin-top:3px}
.g-cdocs{margin:4px 0 12px;padding-left:18px;font-size:12.5px}

/* =====================================================================
   O QUADRADO DO CELULAR — três níveis, como no Cockpit:
     1. a lista de equipes (a lateral, por cima)  2. os cards  3. o detalhe
   Tudo daqui vive DENTRO desta media query.
   ===================================================================== */
@media(max-width:900px){
  .topo{gap:8px;padding:0 10px}
  .topo .busca,.topo .marca-sub,.topo .vig{display:none}
  .topo .abas{order:2}
  .topo .eu{order:3}   /* Nexo/sair no fim, nao no meio das secoes */
  .duas{grid-template-columns:1fr}
  .centro{padding:14px 12px 84px}

  .lateral{position:fixed;top:0;left:0;bottom:0;z-index:66;width:min(88vw,330px);height:100%;
    transform:translateX(-101%);transition:transform .18s ease}
  body.lat-on .lateral{transform:none}
  .lateral-fundo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:65;display:none}
  body.lat-on .lateral-fundo{display:block}

  .abrir-lat{display:block;position:fixed;left:14px;bottom:14px;z-index:64;
    height:44px;padding:0 18px;border-radius:22px;border:1px solid var(--borda);
    background:var(--azul);color:#fff;font-size:14px;font-weight:600;cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,.5)}
  body.lat-on .abrir-lat,body.com-gaveta .abrir-lat{display:none}

  .gaveta{width:100%}
  .gaveta-fundo{display:none !important}

  .lane{width:min(86vw,290px)}
  .bloco{padding:14px}
  .valor,.md,.sub,td{overflow-wrap:break-word}

  /* Guia: a página volta a rolar inteira; a lista em cima, com teto, e o
     documento aberto embaixo (o clique desce até ele). */
  .centro.g-centro{overflow-y:auto;display:block}
  .guia{display:block;border:0;border-radius:0;overflow:visible}
  .g-lista{border:1px solid var(--borda);border-radius:10px}
  .g-rol{max-height:46vh}
  .g-det{overflow:visible;padding:18px 0 0}
  .g-dois{grid-template-columns:1fr}
  .g-ref{grid-template-columns:72px 1fr}
  .g-mini{width:72px}
}