/* Themis · estilo comum das telas ----------------------------------
   Identidade: tinta-azul profunda + dourado institucional (a marca),
   verde/âmbar/vermelho reservados à SEMÂNTICA (ok/atenção/problema).
   Serifa nos títulos (gravitas jurídica), Inter no corpo, Plex Mono
   nos números. Sidebar escura, conteúdo claro. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap');
:root{
  --bg:#F6F7F9; --panel:#FFFFFF; --panel-2:#F0F2F5; --line:#E4E7EC;
  --ink:#151D2A; --ink-2:#4A5568; --ink-3:#8B94A3;
  --verde:#1E8A5C; --verde-dim:#9CD3B7; --ambar:#A87B14; --vermelho:#BC3F39;
  --azul:#33628F;
  --dourado:#A9863F; --dourado-2:#C9A961;
  /* ação primária (GUIA v1.2, Victor 06/08): verde-floresta sóbrio — o
     semântico --verde fica só para ESTADO */
  --acao:#2E5B49;
  /* shell verde-grafite (GUIA v1.2): o azul saiu */
  --sb-bg:#141F19; --sb-ink:#C8D3CC; --sb-dim:#7E8B83; --sb-line:rgba(255,255,255,.08);
  --mono:'IBM Plex Mono',ui-monospace,monospace; --sans:'Inter',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --r:10px;
  --sombra:0 1px 2px rgba(16,24,40,.05);
  --sombra-2:0 12px 32px rgba(16,24,40,.14);
  /* escala TIPOGRÁFICA (GUIA §3) — nenhum tamanho fora dela em tela nova */
  --t-hero:52px; --t-caso:31px; --t-pagina:26px; --t-secao:15px;
  --t-detalhe:19px;   /* número de destaque em card/banner (Victor 07/08) */
  --t-corpo:13.5px; --t-tabela:12.5px; --t-label:11.5px; --t-micro:10.5px;
  /* escala de ESPAÇAMENTO (GUIA §4) — múltiplos de 4 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.5; letter-spacing:-.01em; min-height:100vh}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(1100px 520px at 82% -12%, rgba(169,134,63,.045), transparent 60%)}
a{color:var(--azul); text-decoration:none}
.wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 24px 80px}
.mono{font-family:var(--mono)}
.hidden{display:none!important}

/* topo */
header{display:flex; align-items:center; gap:16px; padding:20px 0 18px;
  border-bottom:1px solid var(--line); margin-bottom:28px}
.mark{width:34px; height:34px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(150deg,#2B3B32,var(--sb-bg));
  display:grid; place-items:center; font-family:var(--serif); font-weight:700;
  font-size:19px; color:var(--dourado-2); box-shadow:inset 0 0 0 1px rgba(201,169,97,.35)}
/* a LOGO oficial no lugar do "T" (Victor 06/08): branca no shell escuro,
   verde nas páginas claras */
.mark-logo{width:34px; height:34px; object-fit:contain; flex:0 0 auto; display:block}
.brand{font-family:var(--serif); font-weight:600; font-size:17px; letter-spacing:0}
.brand span{color:var(--ink-3); font-weight:500; font-family:var(--sans); font-size:13px}
.who{margin-left:auto; display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.who b{color:var(--ink-2); font-weight:500}
.papel-tag{font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  padding:3px 10px; border-radius:20px; border:1px solid transparent;
  background:var(--panel-2); color:var(--ink-2)}
.papel-tag.gestor{background:rgba(169,134,63,.14); color:#8A6D30}
.papel-tag.comercial, .papel-tag.advogado, .papel-tag.ri,
.papel-tag.cessoes, .papel-tag.pos{background:rgba(51,98,143,.11); color:var(--azul)}
.papel-tag.broker{background:rgba(30,138,92,.11); color:var(--verde)}
.link-sair{cursor:pointer; color:var(--ink-3)}
.link-sair:hover{color:var(--ink-2)}

/* navegação por abas (fallback sem sidebar) */
.tabs{display:flex; gap:4px; margin-bottom:24px; flex-wrap:wrap}
/* aba ÚNICA (Onda 2): .mod-tab (módulos do interno) é a MESMA aba */
.tab, .mod-tab{padding:8px 16px; border-radius:8px; font-size:13.5px; color:var(--ink-2);
  cursor:pointer; border:1px solid transparent; background:transparent}
.tab:hover, .mod-tab:hover{background:var(--panel)}
.tab.on, .mod-tab.on{background:var(--panel); border-color:var(--line); color:var(--ink);
  font-weight:500; box-shadow:var(--sombra)}

/* cartões e grid */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sombra)}
.card-h{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); padding:16px 20px 0}
.grid2{display:grid; grid-template-columns:380px 1fr; gap:24px; align-items:start}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* formulário */
.form{padding:14px 20px 20px}
.field{margin-top:14px}
.field label{display:block; font-size:12px; font-weight:500; color:var(--ink-2); margin-bottom:6px}
.field label .q{color:var(--ink-3); font-weight:400}
input,select{width:100%; background:#FFFFFF; border:1px solid var(--line);
  color:var(--ink); border-radius:8px; padding:9px 11px; font-family:var(--mono);
  font-size:13.5px; transition:border-color .15s, box-shadow .15s;
  box-shadow:inset 0 1px 2px rgba(16,24,40,.04)}
input:focus,select:focus{outline:none; border-color:var(--dourado-2);
  box-shadow:0 0 0 3px rgba(169,134,63,.14)}
select{cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23646B78' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:30px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
/* rótulo de 2 linhas não desalinha o par: os inputs ancoram por baixo */
.row2 .field{display:flex; flex-direction:column; justify-content:flex-end}

/* controles clicáveis são <button> reais (Onda 2, a11y): o reset de elemento
   fica ABAIXO de qualquer classe na especificidade — .btn, .tab etc. vencem */
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
.btn{width:100%; margin-top:20px; padding:12px; border:none; border-radius:8px;
  background:var(--acao); color:#FFFFFF; font-family:var(--sans); font-weight:600;
  font-size:14px; cursor:pointer; transition:filter .15s, transform .05s;
  box-shadow:0 1px 2px rgba(16,24,40,.12), inset 0 -1px 0 rgba(0,0,0,.12)}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5; cursor:progress}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink-2);
  font-weight:500; box-shadow:none}
.btn.ghost:hover{border-color:var(--ink-3); filter:none; background:var(--panel-2)}
.btn.sm{width:auto; margin:0; padding:7px 13px; font-size:12.5px; border-radius:7px}

/* tabela */
table{width:100%; border-collapse:collapse; font-size:13.5px;
  font-variant-numeric:tabular-nums}
th{text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-3); font-weight:600; padding:10px 14px;
  border-bottom:1px solid var(--line); background:var(--panel)}
td{padding:11px 14px; border-bottom:1px solid var(--panel-2); color:var(--ink-2)}
tr:last-child td{border-bottom:none}
tr.click{cursor:pointer}
tr.click:hover td{background:#FAFBFC}
td b{color:var(--ink); font-weight:600}
td .mono, td.mono{font-family:var(--mono); color:var(--ink); font-size:12.5px}

/* pill de estado — preenchida, sem contorno (lê-se de relance) */
.pill{font-family:var(--sans); font-weight:600; font-size:11px; padding:2px 9px;
  border-radius:20px; border:1px solid transparent;
  background:var(--panel-2); color:var(--ink-2); white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pill.ok{background:rgba(30,138,92,.11); color:var(--verde)}
.pill.warn{background:rgba(168,123,20,.11); color:var(--ambar)}
.pill.wait{background:var(--panel-2); color:var(--ink-3)}
.pill.stop{background:rgba(188,63,57,.10); color:var(--vermelho)}

/* TAGS DE DADO (não de estado): LOA e tipo de crédito. Neutras de
   propósito — verde é semântica e dourado é marca (GUIA_DE_DESIGN). */
.tags{display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.pill.loa{color:var(--ink-2); font-family:var(--mono)}
.pill.loa i{font-style:normal; font-family:var(--sans); font-size:10px;
  color:inherit; opacity:.62; letter-spacing:.04em; margin-right:4px}

/* KPI faixa */
.kpis{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra)}
.kpi{background:var(--panel); padding:16px 18px}
.kpi .lab{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3);
  font-weight:600}
.kpi .val{font-family:var(--mono); font-size:22px; font-weight:600; margin-top:7px;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink)}
.kpi .sub{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:3px}
.kpi.hero .val{color:var(--verde)}

/* flags */
.flag{display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:12px 14px;
  border-radius:8px; font-size:12.5px; line-height:1.45}
.flag.warn{background:rgba(168,123,20,.08); border:1px solid rgba(168,123,20,.22); color:var(--ambar)}
.flag.stop{background:rgba(188,63,57,.07); border:1px solid rgba(188,63,57,.22); color:var(--vermelho)}
.flag.ok{background:rgba(30,138,92,.07); border:1px solid rgba(30,138,92,.22); color:var(--verde)}
.flag .ic{flex:0 0 auto; font-family:var(--mono); font-weight:700}

.empty{padding:48px 24px; text-align:center; color:var(--ink-3); font-size:13.5px}
.section-title{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 12px; display:flex; align-items:center; gap:8px}
.section-title::before{content:""; width:3px; height:12px; border-radius:2px;
  background:var(--dourado-2); flex:0 0 auto}

/* toast */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--sb-bg); border:1px solid rgba(255,255,255,.12); color:#E8ECF2;
  padding:11px 18px; border-radius:9px; font-size:13px; opacity:0; transition:.25s;
  z-index:60; box-shadow:var(--sombra-2)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{border-color:rgba(230,120,110,.5); color:#F0A9A4}

/* login */
/* flex + margin:auto centraliza quando cabe e ROLA quando o formulário (cadastro)
   é mais alto que a viewport — sem cortar o topo (o que place-items:center fazia) */
.login-screen{position:fixed; inset:0; z-index:50; display:flex; overflow-y:auto; padding:24px;
  background:
    radial-gradient(900px 480px at 15% -10%, rgba(169,134,63,.06), transparent 55%),
    var(--bg)}
.login-box{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:32px 32px 28px; max-width:380px; width:100%; margin:auto;
  box-shadow:0 4px 24px rgba(16,24,40,.08)}
.login-box h3{font-family:var(--serif); font-size:20px; font-weight:600; margin:16px 0 4px}
.login-box p{font-size:13px; color:var(--ink-3); margin-bottom:20px}
.login-box .field:first-of-type{margin-top:0}
.login-err{color:var(--vermelho); font-size:12px; margin-top:12px; min-height:16px; font-family:var(--mono)}

/* modal CANÔNICO (Onda 2) — overlay + cartão, fonte única via modalBase()
   do app.js; overlays especiais (visor de documento, memória) usam a MESMA
   .modal-ov e só sobrescrevem o que difere (z-index, fundo, alinhamento) */
.modal-ov{position:fixed; inset:0; background:rgba(10,14,12,.55); z-index:120;
  display:flex; align-items:center; justify-content:center; padding:20px}
.modal-card{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:20px 22px; width:100%; max-width:440px; max-height:90vh; overflow:auto;
  box-shadow:var(--sombra-2)}
.modal-tit{font-size:var(--t-secao); font-weight:600; color:var(--ink); margin-bottom:6px}
.modal-sub{font-size:var(--t-tabela); color:var(--ink-2); line-height:1.5; margin-bottom:12px}
.modal-corpo{font-size:var(--t-corpo); color:var(--ink); line-height:1.5}
.modal-erro{color:var(--vermelho); font-size:var(--t-tabela); min-height:16px; margin-top:4px}
.modal-acoes{display:flex; gap:10px; justify-content:flex-end; margin-top:12px}

/* shell com barra lateral — COMPARTILHADO (broker + interno). Padrão único.
   Sidebar ESCURA: estrutura à esquerda, trabalho em claro à direita. */
/* minmax(0,1fr) e nao 1fr: um track `1fr` vale minmax(AUTO,1fr) e se recusa
   a encolher abaixo do min-content do conteudo — bastava uma tabela larga
   para a coluna estourar a janela e a PAGINA INTEIRA ganhar rolagem
   horizontal (medido na pagina do caso: 311px). Com minmax(0,1fr) a coluna
   encolhe e quem rola e o elemento largo, dentro da propria caixa.
   Victor 27/08: a tela base do sistema e um notebook de 15,6" e nao pode
   rolar de lado; telas maiores crescem ate o max-width do .main. */
.shell{display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100vh; position:relative; z-index:1;
  transition:grid-template-columns .22s ease}
/* MENU RECOLHÍVEL (Victor 28/08): nasce aberto; "recolher menu" no rodapé
   fecha, e o botão ☰ flutuante reabre. O estado fica no navegador. */
body.sb-fechada .shell{grid-template-columns:0 minmax(0,1fr)}
body.sb-fechada .sidebar{padding-left:0; padding-right:0; border-right:0; overflow:hidden}
.sb-sec{display:flex; align-items:center; gap:8px}
.sb-toggle{margin-left:auto; width:26px; height:26px; border-radius:7px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  color:#EDF0F5; font-size:13px; line-height:1; cursor:pointer; padding:0;
  display:grid; place-items:center}
.sb-toggle:hover{background:rgba(255,255,255,.13)}
.sb-reabrir{display:none; position:fixed; left:10px; top:10px; z-index:60;
  width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
  background:var(--sb-bg); color:#EDF0F5; font-size:15px; cursor:pointer;
  place-items:center; box-shadow:0 2px 10px rgba(10,14,12,.25)}
body.sb-fechada .sb-reabrir{display:grid}
.sidebar{background:var(--sb-bg); border-right:1px solid var(--sb-bg);
  padding:18px 12px; display:flex; flex-direction:column; gap:3px;
  /* o menu acompanha o scroll (Victor 06/08): gruda no topo e fica à vista do
     começo ao fim da página; mais alto que a tela, rola por dentro */
  position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto}
.sb-brand{display:flex; align-items:center; gap:10px; padding:4px 8px 16px}
.sb-brand .brand{font-size:16px; color:#EDF0F5}
.sb-brand .brand span{color:var(--sb-dim)}
.sb-sec{font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--sb-dim);
  padding:14px 10px 6px}
.sb-item{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:8px;
  color:var(--sb-ink); cursor:pointer; font-size:13.5px}
.sb-item:hover{background:rgba(255,255,255,.06); color:#FFFFFF}
.sb-item.on{background:rgba(201,169,97,.13); color:var(--dourado-2); font-weight:500;
  box-shadow:inset 2px 0 0 var(--dourado-2)}
.sb-item .ic{width:17px; height:17px; flex:0 0 auto; display:grid; place-items:center; opacity:.85}
.sb-item .ic svg{width:17px; height:17px}
/* a conta fica JUNTO do menu de páginas (Victor 30/07) — o traço separa,
   sem empurrar para o rodapé */
.sb-foot{margin-top:14px; border-top:1px solid var(--sb-line); padding-top:10px}
.sb-user{display:flex; align-items:center; gap:9px; padding:8px 10px 10px}
.sb-user .av{width:30px; height:30px; border-radius:8px; flex:0 0 auto;
  background:rgba(201,169,97,.12); border:1px solid rgba(201,169,97,.3);
  display:grid; place-items:center; font-family:var(--serif); font-weight:600;
  color:var(--dourado-2); font-size:13px}
.sb-user .nm{font-size:13px; color:#E4E8EF} .sb-user .rl{font-size:11px; color:var(--sb-dim)}
.sidebar .link-sair{color:var(--sb-dim)} .sidebar .link-sair:hover{color:var(--sb-ink)}
.sidebar .papel-tag{background:rgba(255,255,255,.07); color:var(--sb-ink)}
/* margens generosas na área de trabalho (Victor 07/08) — escala --s* */
.main{padding:var(--s7) 48px 80px; max-width:1500px; margin:0 auto; width:100%;
  /* `hidden` cria um contexto de rolagem e mata o position:sticky dos
     filhos (o índice do manual não grudava). `clip` corta igual, sem
     criar o contexto — a linha de cima fica de reserva para navegador
     antigo, que ignora a de baixo. */
  overflow-x:hidden; overflow-x:clip}
/* ── cabeçalho padrão do CASO (Victor 06/08) — broker E interno ─────── */
.ct-topo{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:var(--s5);position:relative;padding-right:140px}
.ct-topo h1{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:-.01em;line-height:1.15;margin:0}
/* o Cód. mora no CANTO SUPERIOR direito, mesmo quando o cabeçalho quebra
   em card estreito (Victor 07/08) */
.ct-ref{position:absolute;top:0;right:0;text-align:right;padding:0}
.ct-ref .lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:6px}
.ct-ref .num{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--dourado);border:1px solid rgba(169,134,63,.35);border-radius:9px;padding:7px 14px;background:rgba(201,169,97,.06);white-space:nowrap;display:inline-block}
.ct-tags{display:flex;gap:8px;margin-top:var(--s4);flex-wrap:wrap}
.ct-tag{font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--ink-2)}
/* linha do tempo das etapas: percorridas/atual verdes, futuras cinzas */
.etapas{display:flex;align-items:center;flex-wrap:wrap;gap:6px 0;margin-top:var(--s4)}
.et{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);white-space:nowrap}
.et .pt{width:9px;height:9px;border-radius:50%;background:var(--line);flex:0 0 auto}
.et.ok{color:var(--verde)} .et.ok .pt{background:var(--verde)}

/* ══════════ ESTEIRA (Victor 01/09) — a linha de produção ══════════
   O CSS saiu do <script> do interno.html: estilo mora aqui, fonte única.
   Degraus do CARD aprovados na spec do Victor (mockup-card-fila-due):
   título 18 · valor 24 · fechado 15 · pendência 14 · rodapé 12,5 ·
   rótulos 11,5 — entram na escala e valem para KPIs e cards futuros. */
:root{
  --t-card-titulo:18px; --t-card-valor:24px; --t-card-fechado:15px;
  --t-card-pend:14px; --t-card-rod:12.5px; --t-card-rotulo:11.5px;
}
/* ── A FAIXA DE FASES (spec do Victor, mockup-faixa-esteira, 01/09) ──
   Cada célula responde três perguntas, nesta ordem: quantos casos tenho
   aqui? · quanto dinheiro (VL e Proposta, os dois, ROTULADOS — o número
   solto não dizia o que era)? · a fase está saudável? A média histórica
   saiu da faixa: é análise, não triagem, e vai para o cockpit do gestor. */
.est-topo{display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:12px;
  align-items:stretch; margin-bottom:18px}
@media(max-width:1100px){.est-topo{grid-template-columns:1fr}}
.est-fases{display:grid; grid-template-columns:repeat(5,1fr); background:var(--panel);
  border:1px solid var(--line); border-radius:14px; overflow:hidden}
.est-fase{padding:14px 14px 12px; min-width:0; border-right:1px solid var(--panel-2);
  cursor:pointer; display:flex; flex-direction:column; position:relative}
.est-fase:last-child{border-right:none}
.est-fase:hover{background:#FAFBFC}
.est-fase.on{background:linear-gradient(180deg,rgba(201,169,97,.07),rgba(201,169,97,.02))}
.est-fase.on::after{content:''; position:absolute; left:0; right:0; bottom:0;
  height:3px; background:var(--dourado)}
.f-nome{display:flex; align-items:baseline; gap:8px; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; font-weight:700;
  color:var(--ink-3); margin-bottom:8px; white-space:nowrap}
.f-nome .nm{min-width:0; overflow:hidden; text-overflow:ellipsis}
/* o ALVO é propriedade da fase: mora no cabeçalho, à direita do nome —
   e o rodapé fica só com a saúde, que cabe sempre numa linha */
.f-nome .alvo{margin-left:auto; font-weight:500; letter-spacing:.02em;
  text-transform:none; font-size:10.5px; color:var(--ink-3); flex:none}
.est-fase.on .f-nome .nm{color:var(--dourado)}
.f-n{font-family:var(--mono); font-size:32px; font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums; margin-bottom:10px}
.f-n small{font-family:var(--sans); font-size:12.5px; font-weight:500;
  color:var(--ink-3); margin-left:3px}
.f-din{display:flex; flex-direction:column; gap:5px; margin-bottom:10px}
.f-lin{display:flex; align-items:baseline; gap:5px; font-family:var(--mono);
  font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap}
.f-lin .r{font-family:var(--sans); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600; color:var(--ink-3); width:32px; flex:none}
.f-lin b{font-weight:500; color:var(--ink)}
.f-lin .pc{color:var(--ink-3); font-weight:400; font-size:10.5px}
/* SAÚDE no lugar de estatística: o alvo, quantos passaram dele, a idade do
   PIOR (o que a média tentava dizer) e quantos ninguém assumiu ainda */
.f-status{margin-top:auto; padding-top:10px; border-top:1px solid var(--panel-2);
  font-size:12px; color:var(--ink-3); line-height:1.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.f-status b{font-weight:600}
.f-status .ok{color:var(--ink-2)}
.f-status .warn{color:var(--ambar)} .f-status .stop{color:var(--vermelho)}
.f-vazia{color:var(--ink-3); font-size:13px; font-family:var(--sans)}
/* DESTINOS, não fases: ficam fora da régua de alvos, em caixas à parte.
   Quem MANDA na altura da linha é a FAIXA (as fases ficam no tamanho
   natural); as três laterais se COMPRIMEM para caber nela — o height:0 +
   min-height:100% tira a coluna da conta da altura e depois a estica até
   a altura que a faixa definiu (Victor 01/09: "diminua os 3"). */
.est-laterais{height:0; min-height:100%; display:flex; flex-direction:column;
  gap:8px}
.est-lat{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column;
  justify-content:center; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:6px 12px; cursor:pointer; transition:border-color .12s}
.est-lat:hover{border-color:var(--dourado-2)}
.est-lat.on{border-color:var(--dourado); background:rgba(169,134,63,.05)}
.est-lat .f-nome{margin-bottom:2px}
.est-lat.on .f-nome{color:var(--dourado)}
.est-lat .lin{display:flex; align-items:baseline; gap:8px; min-width:0}
.est-lat .n{font-family:var(--mono); font-size:18px; font-weight:600;
  font-variant-numeric:tabular-nums; flex:none}
.est-lat .txt{font-size:11.5px; color:var(--ink-2); min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
/* a GRADE da spec (COMANDO 01/09): auto-fill com piso de 320px e 1fr de
   teto — em 15,6" dá TRÊS colunas de ~390px (a largura do desenho do
   Victor); a 4ª só nasce quando cabe, e a folga se distribui entre as
   colunas em vez de amontoar num vão à direita. (Lição da rodada: com um
   máximo FIXO na track o auto-fill conta as colunas pelo máximo.) */
.est-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px; align-items:start}
/* ── O CARD (spec do Victor): sem botões — o card inteiro abre o caso ── */
.est-card{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px; box-shadow:0 1px 2px rgba(21,29,42,.04); cursor:pointer;
  position:relative; transition:border-color .15s, box-shadow .15s;
  display:flex; flex-direction:column}
.est-card:hover{border-color:var(--dourado-2); box-shadow:0 4px 14px rgba(21,29,42,.08)}
.est-card.parado{box-shadow:inset 3px 0 0 var(--vermelho), 0 1px 2px rgba(21,29,42,.04)}
/* O TOPO é um BLOCO DE TEXTO, não uma grade (desenho do Victor, 01/09):
   o código flutua à direita e o nome corre como texto, com as etiquetas
   logo atrás dele. Assim o layout se resolve sozinho nos dois casos —
   nome curto empurra as etiquetas para a linha de baixo; nome longo
   quebra e elas encostam ao lado da segunda linha, preenchendo o vão.
   Teto de DUAS linhas: o que passar disso não é mostrado. */
/* teto de DUAS linhas — medido: a do nome (1,25em ≈ 23px) mais uma que pode
   carregar as etiquetas (pill de 22,5px) = 47px, com 1px de folga */
.ec-topo{max-height:48px; overflow:hidden}
.ec-topo::after{content:''; display:block; clear:both}
.ec-nome{font-family:var(--serif); font-size:var(--t-card-titulo);
  font-weight:600; line-height:1.25; color:var(--ink)}
.ec-nome .star{color:var(--dourado); font-size:.8em; margin-right:4px; vertical-align:1px}
.ec-cod{float:right; margin-left:10px; font-family:var(--mono);
  font-size:var(--t-card-rotulo); color:var(--ink-3); line-height:1.9}
/* as etiquetas correm no MESMO fluxo do nome (inline), por isso acompanham
   a última linha dele em vez de exigir uma faixa só para elas */
.ec-tags{display:inline; margin-left:10px; white-space:nowrap}
.etq{display:inline-block; vertical-align:middle; font-size:var(--t-card-rod);
  font-weight:600; line-height:1; padding:5px 8px; border-radius:6px;
  background:var(--panel-2); color:var(--ink-2); white-space:nowrap}
.etq.tipo{background:var(--ink); color:#fff}
.etq.loa{background:rgba(169,134,63,.13); color:var(--dourado)}
.ec-sep{display:inline-block; vertical-align:middle; color:var(--ink-3);
  font-size:12px; line-height:1; padding:0 2px}
.ec-valores{display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin-top:11px; padding-top:10px; border-top:1px solid var(--panel-2)}
.ec-k{font-size:var(--t-card-rotulo); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-bottom:3px}
.ec-vl .v{font-family:var(--mono); font-size:var(--t-card-valor); font-weight:600;
  line-height:1.05; letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  white-space:nowrap}
.ec-fech{text-align:right}
.ec-fech .v{font-family:var(--mono); font-size:var(--t-card-fechado); font-weight:500;
  line-height:1.3; font-variant-numeric:tabular-nums; white-space:nowrap}
.ec-fech .v span{color:var(--ink-3); font-weight:400}
/* a área da pendência reserva SEMPRE duas linhas: é o que iguala a altura
   de todos os cards da fila (spec do Victor) */
.ec-meio{flex:1; display:flex; align-items:center; padding-top:12px;
  min-height:calc(12px + 2.8*var(--t-card-pend))}
.ec-pend{display:flex; gap:8px; align-items:flex-start; font-size:var(--t-card-pend);
  font-weight:500; line-height:1.4; color:var(--ink)}
.ec-pend>span:last-child{display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden}
.ec-dot{width:8px; height:8px; border-radius:99px; flex:none; margin-top:5px;
  background:var(--ambar)}
.ec-dot.stop{background:var(--vermelho)} .ec-dot.ok{background:var(--verde)}
.ec-pend .mais{color:var(--ink-3); font-weight:400; white-space:nowrap}
.ec-pend.ok{color:var(--ink-2); font-weight:400}
.ec-rod{display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:9px;
  border-top:1px solid var(--panel-2); font-size:var(--t-card-rod); color:var(--ink-2)}
.ec-resp{display:flex; align-items:center; gap:6px; min-width:0}
.ec-resp span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ec-av{width:20px; height:20px; border-radius:99px; background:var(--panel-2);
  display:flex; flex:none; align-items:center; justify-content:center; font-size:9px;
  font-weight:700; color:var(--ink-2)}
.ec-resp.livre{color:var(--vermelho); font-weight:600}
.ec-resp.livre .ec-av{background:transparent; border:1.5px dashed var(--vermelho);
  color:var(--vermelho)}
.ec-prazos{margin-left:auto; font-variant-numeric:tabular-nums; white-space:nowrap;
  color:var(--ink-3)}
.ec-prazos b{font-weight:600; color:var(--ink-2)}
.ec-prazos b.warn{color:var(--ambar)} .ec-prazos b.stop{color:var(--vermelho)}
/* A BARRA: busca livre à esquerda, filtros à direita — coisas diferentes,
   aparências diferentes (Victor 01/09). A busca é um CAMPO onde se digita
   (fundo branco, lupa, largura de sobra); os filtros são SELETORES de lista
   fechada (fundo cinza, sem moldura forte). Um fio separa os dois grupos.
   Tudo numa linha só; em tela estreita a barra quebra por último. */
.est-barra{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.est-busca{display:flex; align-items:center; gap:8px; flex:1 1 190px; max-width:340px;
  background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:0 12px; box-shadow:var(--sombra)}
.est-busca:focus-within{border-color:var(--dourado-2);
  box-shadow:0 0 0 3px rgba(169,134,63,.12)}
.est-busca svg{width:16px; height:16px; flex:none; color:var(--ink-3)}
.est-busca input{flex:1; min-width:0; border:0; outline:none; background:transparent;
  padding:9px 0; font-size:13.5px; color:var(--ink); font-family:var(--sans);
  box-shadow:none}
.est-sep{width:1px; height:22px; background:var(--line); flex:none; margin:0 4px}
.est-rot{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); flex:none}
.est-barra select{background:var(--panel-2); border:1px solid transparent;
  border-radius:8px; padding:8px 30px 8px 11px; font-size:12.5px; color:var(--ink-2);
  font-family:var(--sans); max-width:148px; box-shadow:none; min-width:0}
.est-barra select:hover{border-color:var(--line)}
.est-barra select:focus{outline:none; border-color:var(--dourado-2); background:var(--panel)}
.est-limpar{background:none; border:none; color:var(--ink-3); font-size:12px;
  text-decoration:underline; text-underline-offset:3px; padding:4px; cursor:pointer}
.est-limpar:hover{color:var(--ink-2)}
.est-visao{margin-left:auto; display:flex; gap:2px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:9px; padding:2px}
.est-visao button{border:1px solid transparent; background:transparent;
  border-radius:7px; padding:4px 13px; font-size:12px; color:var(--ink-3);
  cursor:pointer; font-family:inherit}
.est-visao button.on{background:var(--panel); border-color:var(--line);
  color:var(--ink); font-weight:500; box-shadow:var(--sombra)}
/* ── A LISTA (mockup esteira-lista, 01/09): uma linha de 46px por caso, a
   linha inteira clicável, sem botões. Grade de colunas fixas + duas
   flexíveis (credor e pendência); quando aperta, quem cede é a pendência —
   rolagem horizontal NUNCA nasce (o guia proíbe). ─────────────────────── */
.est-lista{background:var(--panel); border:1px solid var(--line);
  border-radius:14px; overflow:hidden}
.est-row,.est-head{display:grid; align-items:center; gap:14px; padding:0 18px;
  grid-template-columns:minmax(240px,1.4fr) 140px 100px 132px 84px minmax(140px,1fr) 124px}
/* a variante da ALOCAÇÃO (só gestor/R.I.): a pendência sai, entram as duas
   colunas de projeção — Prev. receb. e Recebível est. */
.est-row.aloc,.est-head.aloc{grid-template-columns:minmax(230px,1.3fr) 130px 100px 128px 90px 112px 84px 118px}
.est-head{height:38px; border-bottom:1px solid var(--line); background:#FAFBFC}
.est-head>div{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; white-space:nowrap}
.est-head>div[onclick]{cursor:pointer; user-select:none}
.est-head>div[onclick]:hover{color:var(--ink-2)}
.est-head .n{text-align:right}
/* a seta dourada marca a coluna que ordena; sem seta = a ordem da fila */
.est-head .ord::after{content:' ↓'; color:var(--dourado)}
.est-head .ord.asc::after{content:' ↑'}
.est-row{height:46px; border-bottom:1px solid var(--panel-2); cursor:pointer}
.est-row:last-child{border-bottom:none}
.est-row:hover{background:#FAFBFC}
/* credor numa linha só: ★ + nome + etiqueta do tipo (só não-precatório) + código */
.lr-credor{display:flex; align-items:baseline; gap:8px; min-width:0}
.lr-credor .star{color:var(--dourado); font-size:11px; flex:none}
.lr-credor b{font-size:14px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.lr-credor .tipo{font-size:10px; font-weight:700; letter-spacing:.03em;
  background:var(--ink); color:#fff; border-radius:5px; padding:3px 6px;
  flex:none; line-height:1}
.lr-credor .cod{font-family:var(--mono); font-size:11px; color:var(--ink-3); flex:none}
.lr-ente{font-size:12.5px; font-weight:500; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.lr-ente b{font-weight:600; color:var(--c,var(--ink-2))}
.lr-ente span{color:var(--dourado)}
.lr-n{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums;
  text-align:right; white-space:nowrap}
.lr-n .pc{color:var(--ink-3); font-size:10.5px}
.lr-prev{font-family:var(--mono); font-size:12.5px; text-align:right;
  white-space:nowrap; color:var(--ink-2)}
.lr-prev b{font-weight:600; color:var(--ink)}
/* fase · esteira numa coluna só: o 1º número colorido pela régua do card */
.lr-dias{font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums;
  text-align:right; white-space:nowrap; color:var(--ink-3)}
.lr-dias b{font-weight:600; color:var(--ink-2)}
.lr-dias b.warn{color:var(--ambar)} .lr-dias b.stop{color:var(--vermelho)}
.lr-pend{display:flex; align-items:center; gap:7px; min-width:0; font-size:12.5px}
.lr-pend .ec-dot{margin-top:0; width:7px; height:7px}
.lr-pend>span:last-child{white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; color:var(--ink-2)}
.lr-pend .mais{color:var(--ink-3)}
/* o responsável reaproveita o componente do card, só mais compacto */
.est-row .ec-resp{font-size:12px; color:var(--ink-2)}
.est-row .ec-av{width:19px; height:19px; font-size:8.5px}
/* em conteúdo estreito (15,6" com sidebar) as colunas fixas encolhem juntas
   — a soma continua cabendo e o scroll lateral segue proibido (o corte em
   1460 cobre o 1440, onde a variante da alocação estourava por 2px) */
@media (max-width:1460px){
  .est-row,.est-head{gap:10px; padding:0 14px;
    grid-template-columns:minmax(200px,1.4fr) 110px 92px 118px 78px minmax(110px,1fr) 108px}
  .est-row.aloc,.est-head.aloc{grid-template-columns:minmax(190px,1.3fr) 104px 92px 112px 80px 100px 76px 100px}
}
.et.on{color:var(--verde);font-weight:700} .et.on .pt{background:var(--verde);box-shadow:0 0 0 3px rgba(30,138,92,.18)}
.et.on.dev{color:var(--ambar)} .et.on.dev .pt{background:var(--ambar);box-shadow:0 0 0 3px rgba(168,123,20,.18)}
.et-lig{width:22px;height:2px;background:var(--line);margin:0 8px;flex:0 0 auto}
.et-lig.ok{background:var(--verde)}
.main-h{margin-bottom:24px}
.main-h h2{font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:0}
.main-h h2.xl{font-size:30px}  /* +25% — o título da esteira (Victor 01/09) */
.main-h .sub{font-size:13px; color:var(--ink-3); margin-top:4px}
.back-link{color:var(--ink-3); cursor:pointer; font-size:13px; margin-bottom:16px}
.back-link:hover{color:var(--ink-2)}
@media(max-width:820px){.shell{grid-template-columns:1fr}
  .sidebar{flex-direction:row; flex-wrap:wrap; align-items:center; border-right:none;
    border-bottom:1px solid var(--sb-line);
    position:static; height:auto; overflow:visible}
  .sb-sec,.sb-brand{width:100%} .sb-foot{margin:0; border:none; padding:0}
  .sb-user{display:none} .main{padding:18px}}