/* VxOS V2 - tela de DETALHE do fundo (transferin: renderDetail) na linguagem da Triagem.
   Carrega DEPOIS de vxgp.css (estatico) e de v2-preview.css: as .det-*/.ficha/.pub-*/.tema-*/.doc-*/.ir-*
   sao sobrescritas com a MESMA especificidade (regra posterior vence), sem !important e sem prefixo.
   Pegada: barra fina no lugar do anel grande, farol em evidencia, grade densa, chips, Space Grotesk.
   Tokens de tokens.css / v2-preview.css. Contraste AA preservado. Sem travessao (em dash). */

/* ---------- cabecalho ---------- */
.det-head{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"back title compl" "back actions compl";align-items:start;gap:6px 16px;padding:2px 0 14px;border-bottom:1px solid var(--gray-200);margin-bottom:14px}
#det-back{grid-area:back;align-self:center}
.det-title{grid-area:title;min-width:0}
.det-title h3{font:700 20px 'Space Grotesk',sans-serif;color:var(--navy);letter-spacing:-.01em;margin:0}
.det-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font:500 12.5px 'Space Grotesk',sans-serif;color:var(--gray-600)}
.det-farol{margin:0}
.det-actions{grid-area:actions;display:flex;gap:7px;align-items:center;margin-top:8px;flex-wrap:wrap}
/* metrica "Dados publicos" compacta: barra fina no lugar do anel de 64px */
.det-compl{grid-area:compl;display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:154px}
.det-compl-l{font:600 10px 'Space Grotesk',sans-serif;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em}
.det-compl-bar{width:154px;height:7px;background:var(--gray-100);border-radius:999px;overflow:hidden}
.det-compl-bar i{display:block;height:100%;border-radius:999px}
.det-compl b{font:700 17px 'Space Grotesk',sans-serif;color:var(--navy);line-height:1}

/* ---------- ficha chave/valor: cartoes empilhados (mesma pegada do dossie): rotulo pequeno
   em cima, valor navy embaixo a esquerda; gap TRANSPARENTE (sem fundo cinza nem celula vazia
   sobrando na ultima linha, que a grade com gap:1px sobre gray-200 deixava) ---------- */
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;background:none;border:0;padding:0;margin-bottom:14px}
.fc{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:#fff;border:1px solid var(--gray-200);border-radius:10px;padding:9px 13px}
.fc-k{font:600 9.5px 'Space Grotesk',sans-serif;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;margin:0}
.fc-v{font:600 13px 'Space Grotesk',sans-serif;color:var(--navy);text-align:left;margin:0}

/* ---------- abas: sublinhado na ativa (como as abas do projeto) ---------- */
.det-tabs{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--gray-200);margin:8px 0 12px;flex-wrap:wrap}
.det-tabs-fund{display:none} /* o nome do fundo ja esta no cabecalho */
.det-tab{border:0;background:transparent;font:600 12.5px 'Space Grotesk',sans-serif;color:var(--gray-600);padding:9px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.det-tab:hover{color:var(--navy)}
.det-tab.on{color:var(--navy);border-bottom-color:var(--teal-btn)}
.det-tab:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;border-radius:4px}
.cp-tab-alert{background:var(--neg-bg);color:var(--neg-text);border-radius:999px;padding:0 6px;margin-left:5px;font:700 10px 'Space Grotesk',sans-serif}

/* ---------- aba "Dados publicos" ---------- */
.pub-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;font:500 12px 'Space Grotesk',sans-serif;color:var(--gray-600)}
.pub-bar #pub-conf{margin-left:auto}
.pub-div-count{color:var(--neg-text);font-weight:700}
/* cabecalho + linhas partilham o MESMO grid (sem coluna 'auto' final: senao as colunas escorregam) */
.pub-head,.pub-row{display:grid;grid-template-columns:minmax(140px,1.4fr) minmax(180px,2.2fr) 82px 92px 106px 92px;align-items:center;gap:10px;padding:8px 14px}
.pub-head{background:var(--gray-50);border:1px solid var(--gray-200);border-bottom:0;border-radius:6px 6px 0 0;font:700 9.5px 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500)}
.pub-head span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-row{border:1px solid var(--gray-100);border-top:0;font-size:12.5px}
.pub-row:hover{background:#EAF7F7}
.pub-row-div{box-shadow:inset 3px 0 0 var(--warn)}
.pub-k{font:600 12.5px 'Space Grotesk',sans-serif;color:var(--navy);min-width:0;overflow:hidden;text-overflow:ellipsis}
.pub-v{min-width:0;color:var(--gray-800);overflow-wrap:anywhere}
.pub-data,.pub-rec{font:600 11px 'Space Grotesk',sans-serif;color:var(--gray-500);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-src{min-width:0;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-gestora{font-size:11.5px;color:var(--gray-600);margin-top:3px}
.pub-gestora.div{color:var(--warn-text)}
.pub-gestora-obs{margin-top:2px}
.pub-doc-link{border:1px solid var(--gray-300);background:#fff;color:var(--teal-btn);border-radius:6px;font:600 10.5px 'Space Grotesk',sans-serif;padding:1px 7px;cursor:pointer;margin-left:5px;white-space:nowrap}
/* situacao como chip (pst): pre-status/manual */
.pst,.pst-btn{font:700 10px 'Space Grotesk',sans-serif;padding:2px 9px;border-radius:999px;border:1px solid transparent;cursor:pointer;background:var(--gray-100);color:var(--gray-600);white-space:nowrap}
.pst-ok,.pst-btn.pst-ok{background:var(--pos-bg);color:var(--pos-text)}
.pst-late,.pst-btn.pst-late{background:var(--neg-bg);color:var(--neg-text)}
.pst-btn.pst-none{background:var(--gray-100);color:var(--gray-500)}
/* modo Conferencia (gestora): 4 colunas */
.pub-head-conf,.pub-row-conf{grid-template-columns:minmax(140px,1.3fr) minmax(150px,1.6fr) minmax(150px,1.6fr) 108px}
.pub-g-input{width:100%;border:1px solid var(--gray-300);border-radius:6px;padding:4px 8px;font:500 12px 'Space Grotesk',sans-serif}

/* ---------- grupos por tema (colapsaveis) ---------- */
.tema-group{margin-bottom:12px}
.pub-head + .tema-group,.tema-group + .tema-group{margin-top:0}
.tema-h{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r-ctrl);cursor:pointer;font:700 11px 'Space Grotesk',sans-serif;color:var(--navy);text-transform:uppercase;letter-spacing:.04em;margin-top:10px}
.tema-h .chev{transition:transform .15s;color:var(--gray-400)}
.tema-group.collapsed .chev{transform:rotate(-90deg)}
.tema-group.collapsed .tema-body{display:none}
.tema-n{margin-left:auto;color:var(--gray-500);font:600 11px 'Space Grotesk',sans-serif}
.tema-h:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.tema-body{border:1px solid var(--gray-200);border-top:0;border-radius:0 0 var(--r-ctrl) var(--r-ctrl);overflow:hidden}
.tema-body .pub-row:first-child{border-top:0}

/* ---------- documentos / pendencias / Info Request ---------- */
.doc-list{display:flex;flex-direction:column;gap:6px}
.doc-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--gray-200);border-radius:var(--r-ctrl);padding:8px 12px;background:#fff}
.doc-item strong{font:600 12.5px 'Space Grotesk',sans-serif;color:var(--navy)}
.doc-dl,.doc-item .btn-ghost{border:1px solid var(--gray-300);background:#fff;color:var(--teal-btn);border-radius:6px;font:600 11px 'Space Grotesk',sans-serif;padding:3px 9px;cursor:pointer;white-space:nowrap}
.doc-pend-tag{font:700 9.5px 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--warn-text);background:var(--warn-bg);border:1px solid #F3D9A4;border-radius:999px;padding:2px 8px;white-space:nowrap}
.doc-sec{font:700 10px 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);margin:14px 0 7px}
.doc-pend-note{display:block;width:100%;text-align:left;border:1px solid #F3D9A4;background:var(--warn-bg);color:var(--warn-text);border-radius:var(--r-ctrl);padding:8px 12px;font:600 12px 'Space Grotesk',sans-serif;cursor:pointer;margin-top:8px}
.doc-hist-toggle{border:0;background:transparent;color:var(--gray-600);font:600 12px 'Space Grotesk',sans-serif;cursor:pointer;padding:8px 0;display:inline-flex;align-items:center;gap:6px}
.ir-panel{border:1px solid var(--gray-200);border-left:3px solid var(--teal-btn);border-radius:var(--r-card);padding:12px 14px;margin-bottom:12px;background:#fff}
.ir-top{font:700 13px 'Space Grotesk',sans-serif;color:var(--navy);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ir-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ir-pack-note{margin-top:8px}
.pend-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12.5px;color:var(--gray-800)}
.pend-box{width:12px;height:12px;border:1.5px solid var(--gray-300);border-radius:3px;flex:none}

/* ---------- responsivo: em telas estreitas o cabecalho empilha ---------- */
@media (max-width:760px){
  .det-head{grid-template-columns:auto 1fr;grid-template-areas:"back title" "back actions" "compl compl"}
  .det-compl{align-items:flex-start;margin-top:8px}
}

/* ============================================================
   KIT DE PADRONIZACAO (mora aqui, num arquivo com link ja existente no index; !important garante que
   vence o CSS de producao injetado em runtime, sem depender de o navegador pegar um arquivo novo).
   Um so visual para botoes, toggles, chips e cards em TODAS as telas do v2.
   ============================================================ */
/* BOTOES: um primario (teal), um ghost (contorno), variantes semanticas, MESMA forma */
body .btn-primary, body .btn-ghost, body .dlg-criar, body .pa-cobrar, body .dlg-etapa-ok,
body .dlg-etapa-na, body .tf-filter-clear, body .ovw2-refresh, body .doc-dl, body .pub-doc-link{
  font:600 12.5px 'Space Grotesk',sans-serif !important; border-radius:8px !important; padding:6px 13px !important;
  border:1px solid transparent !important; cursor:pointer; display:inline-flex !important; align-items:center; gap:6px;
  line-height:1.1 !important; white-space:nowrap;
}
body .btn-primary, body .dlg-criar{background:var(--teal-btn) !important; color:#fff !important; border-color:var(--teal-btn) !important}
body .btn-ghost, body .ovw2-refresh, body .tf-filter-clear{background:#fff !important; color:var(--gray-700) !important; border-color:var(--gray-300) !important}
body .doc-dl, body .pub-doc-link{background:#fff !important; color:var(--teal-btn) !important; border-color:var(--gray-300) !important}
body .pa-cobrar, body .dlg-etapa-ok{background:#fff !important; color:var(--warn-text) !important; border-color:#F3D9A4 !important}
body .dlg-etapa-na{background:#fff !important; color:var(--gray-600) !important; border-color:var(--gray-300) !important}
body .btn-ghost.danger{color:var(--neg-text) !important; border-color:#F5C2C2 !important}
/* TOGGLES SEGMENTADOS (Triagem/Cards, Dossies/Acomp, Etapa/Area): um so, aba ativa em navy */
body .tf-viewtoggle, body .dlg-modeseg, body .dlg-grpby-seg{
  border:1px solid var(--gray-300) !important; border-radius:8px !important; overflow:hidden !important;
  background:#fff !important; padding:0 !important; gap:0 !important; display:inline-flex !important;
}
body .tf-vbtn, body .dlg-modebtn, body .dlg-grpby-btn{
  border:0 !important; border-radius:0 !important; background:#fff !important; color:var(--gray-600) !important;
  font:600 12px 'Space Grotesk',sans-serif !important; padding:6px 14px !important; box-shadow:none !important; cursor:pointer;
}
body .tf-vbtn + .tf-vbtn, body .dlg-modebtn + .dlg-modebtn, body .dlg-grpby-btn + .dlg-grpby-btn{border-left:1px solid var(--gray-300) !important}
body .tf-vbtn.on, body .dlg-modebtn.on, body .dlg-grpby-btn.on{background:var(--navy) !important; color:#fff !important; box-shadow:none !important}
/* CHIPS: so dois formatos (PILL 999px p/ status/severidade; TAG 6px p/ tipo/area/motivo) */
body .farol-ind, body .status-chip, body .trow-farol, body .pa-chip, body .dlg-grp-macro, body .pst, body .pst-btn, body .u-st{
  border-radius:999px !important; font:700 10px 'Space Grotesk',sans-serif !important; padding:2px 9px !important;
}
body .trow-chip, body .trow-tipo, body .tipo-badge, body .pa-badge, body .dlg-area-chip, body .trow-stex, body .dlg-caso-chip-pend{
  border-radius:6px !important; font:700 10px 'Space Grotesk',sans-serif !important; padding:1px 7px !important;
}
/* CARDS / PAINEIS: moldura fina, mesmo raio, sem sombra pesada */
body .ficha, body .ovw2-card, body .ovw2-hcard, body .trow-wrap, body .dlg-caso-wrap, body .ir-panel, body .farol-panel, body .pa-summary{
  border-radius:12px !important; box-shadow:none !important;
}
body .ovw2-card, body .ovw2-hcard{border:1px solid var(--gray-200) !important}
/* .hidden PRECISA vencer o KIT: os botoes/toggles acima setam display:inline-flex !important, o que
   sem isto reexibe um elemento .hidden (ex.: o botao "Criar conta"/signup-go no modo login). Mesma
   especificidade do KIT (body + 1 classe), vindo depois na cascata -> ganha. */
body .hidden{display:none !important}