/* 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)}

/* 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. */
.shell{display:grid; grid-template-columns:236px 1fr; min-height:100vh; position:relative; z-index:1}
.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%;
  overflow-x:hidden}
/* ── 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)}
.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 .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}}