/* ===========================================================================
   HUB D.I — TEMA VISUAL ÚNICO  (padrão "Painel de Comando")
   Carregado DEPOIS do <style> de cada página: redefine as variáveis de cor
   usadas em todas as telas e padroniza cartões, KPIs, botões e tabelas.
   Para voltar ao visual antigo basta remover o <link> de tema das páginas.
   =========================================================================== */
:root{
  /* --- paleta base do design --- */
  --hub-navy:#0a1a4f;        /* topo e rodapé */
  --hub-azul:#0d2a9e;        /* azul principal (ações, títulos) */
  --hub-azul2:#2b4bd8;       /* azul médio */
  --hub-azul3:#3b6bff;       /* azul vivo (destaques) */
  --hub-ciano:#2f9be0;       /* apoio */
  --hub-page:#e9edf6;        /* fundo da página */
  --hub-card:#ffffff;        /* cartão */
  --hub-painel:#f6f8fd;      /* painel interno */
  --hub-linha:#e6eaf5;       /* bordas */
  --hub-linha2:#eef1f8;      /* divisórias suaves */
  --hub-ink:#14307f;         /* texto principal (azul escuro) */
  --hub-ink2:#3d59a8;        /* texto secundário (azul) */
  --hub-muted:#8792c0;       /* apoio/rótulos */
  --hub-muted2:#98a3ce;
  --hub-chip:#f1f4fb;        /* fundo de chips */
  --hub-verde:#1f9d55;
  --hub-amarelo:#e0a100;
  --hub-vermelho:#e5484d;
  --hub-sombra:0 2px 0 #f1f4fb;
  --hub-sombra-hover:0 16px 34px -20px rgba(13,42,158,.45);
  --hub-r-lg:20px; --hub-r-md:14px; --hub-r-sm:10px;

  /* --- mapeamento para as variáveis já usadas nas telas --- */
  --azul:var(--hub-azul); --navy:var(--hub-azul); --navy2:var(--hub-navy); --mid:var(--hub-azul2);
  --btn:var(--hub-azul); --s-blue:var(--hub-azul); --c-l26:var(--hub-azul); --cef:var(--hub-azul2);
  --page:var(--hub-page); --surface:var(--hub-card); --surface-1:var(--hub-card);
  --ink:var(--hub-ink); --ink-1:var(--hub-ink); --ink2:var(--hub-ink2); --ink-2:var(--hub-ink2);
  --muted:var(--hub-muted); --border:var(--hub-linha); --ring:var(--hub-linha);
  --grid:var(--hub-linha2); --axis:var(--hub-linha);
  --good:var(--hub-verde); --verde:var(--hub-verde); --s-green:var(--hub-verde);
  --critical:var(--hub-vermelho); --vermelho:var(--hub-vermelho); --s-red:var(--hub-vermelho);
  --amarelo:var(--hub-amarelo); --amber:var(--hub-amarelo); --s-yellow:#ffc000; --dourado:var(--hub-amarelo);
  --s-aqua:var(--hub-ciano); --s-violet:#4d75f0; --s-magenta:#4d75f0; --s-orange:var(--hub-azul3);
  --jur:#4d75f0; --topo-acc:#aebfe8;
}
html[data-tema="escuro"]{
  --hub-page:#0b1024; --hub-card:#151c38; --hub-painel:#111938; --hub-linha:#2c365c; --hub-linha2:#232c4e;
  --hub-ink:#eef1f8; --hub-ink2:#aab4d4; --hub-muted:#7883a8; --hub-chip:#1b2444;
  --hub-sombra:none; --hub-sombra-hover:0 16px 34px -20px rgba(0,0,0,.6);
}

/* ---------- base ---------- */
body{background:var(--hub-page)!important;color:var(--hub-ink)!important;
  font-family:'Montserrat',system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--hub-ink2)}
a:hover{color:var(--hub-azul2)}

/* ===== CABEÇALHO PADRÃO DO HUB (igual ao dos relatórios) — não alterar as cores =====
   faixa clara #022c98 com a marca · faixa do título em degradê #021d67→#022b96 · risco #0200ff */
.hubcab1{background:#022c98;color:#fff;padding:11px 24px;display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;font-family:'Montserrat',system-ui,sans-serif;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.hubcab1 .marca{font-size:19px;font-weight:800;letter-spacing:-.3px;color:#fff;text-decoration:none}
.hubcab1 .risca{width:1px;height:30px;background:rgba(255,255,255,.4);flex:none}
.hubcab1 .un{display:flex;flex-direction:column;line-height:1.25}
.hubcab1 .un b{font-size:14px;font-weight:700;color:#fff}
.hubcab1 .un i{font-style:normal;font-size:10px;color:#9bb8e8;text-transform:uppercase;
  letter-spacing:.16em;font-weight:700}
.hubcab1 .esp{flex:1}
.hubcab1 .lk{color:#9bb8e8;font-size:12px;text-decoration:none;font-weight:600}
.hubcab1 .lk:hover{color:#fff}

/* ---------- barras superiores (todas as telas usam uma destas classes) ---------- */
.barra1,.topbar,.evtopo,.barra2{
  background:linear-gradient(90deg,#021d67 0%,#022b96 100%)!important;color:#eaf0ff!important;
  border:none;border-bottom:3px solid #0200ff!important}
.faixa,.evfaixa,.rodape,.rodape2{
  background:var(--hub-navy)!important;color:#eaf0ff!important;border:none}
.barra1 a,.topbar a,.evtopo a,.faixa a{color:#aebfe8}
.barra1 a:hover,.topbar a:hover,.evtopo a:hover{color:#fff}
.barra1 .marca,.topbar .logo2,.evtopo .evlogo,.evtopo .evtit{color:#fff;font-weight:800;letter-spacing:-.4px}
.barra1 .titulo,.topbar .titulo2,.barra1 .titulo2{color:#fff;font-weight:700}
.barra1 .quem,.topbar .quem2,.barra1 .quem b{color:#aebfe8}
.barra1 .quem b,.topbar .quem2 b{color:#fff}


/* o mapa usa .topbar para um painel flutuante branco — não é barra de topo */
.mapwrap .topbar{background:rgba(255,255,255,.96)!important;color:#063a74!important;
  border:1px solid rgba(200,215,230,.9)!important;border-bottom:1px solid rgba(200,215,230,.9)!important}
/* a ata (RDA) traz suas próprias barras dentro da folha — mantém o desenho original */
.folha .barra1,.folha .barra2{border-bottom:none!important}

/* ---------- cartões, painéis e caixas ---------- */
.cartao,.chartbox,.tile,.painel,.kpi,.card,.box,.relit,.colk,.lt2-scroll,.tblwrap,
.pl-doc,.pl-lista,.hrbox,.bloco,dialog{
  border-color:var(--hub-linha)!important;border-radius:var(--hub-r-md);
  background:var(--hub-card)}
.chartbox,.painel,.cartao{box-shadow:var(--hub-sombra)}
.cartao:hover{box-shadow:var(--hub-sombra-hover);transform:translateY(-3px)}

/* KPIs / tiles no padrão do painel de comando */
body .tile,body .kpi{background:var(--hub-card);border:1px solid var(--hub-linha);
  border-top:3px solid var(--hub-azul)!important;border-radius:16px;padding:16px 18px}
.tile .k,.kpi .n{color:var(--hub-azul);font-weight:800;letter-spacing:-.5px}
.tile .t,.kpi .t{color:var(--hub-muted);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.5px;margin-top:9px}
.tile.clic{cursor:pointer;transition:.15s}
.tile.clic:hover{background:#f9fbff;transform:translateY(-3px);box-shadow:var(--hub-sombra-hover);border-color:var(--hub-linha)}
.tile .ir{color:var(--hub-azul3);font-weight:700}

/* ---------- botões ---------- */
button,.btn{font-family:inherit;border-radius:var(--hub-r-sm)}
button.ghost,.tb button,.cab button,.acoes button{
  background:var(--hub-card);border:1px solid var(--hub-linha);color:var(--hub-ink2);font-weight:600}
button.ghost:hover,.tb button:hover,.cab button:hover,.acoes button:hover{
  border-color:var(--hub-azul);color:var(--hub-azul);background:#f9fbff}
button.prim,.prim,.abrir{background:var(--hub-azul)!important;border-color:var(--hub-azul)!important;
  color:#fff!important;font-weight:700}
button.prim:hover,.prim:hover,.abrir:hover{background:var(--hub-azul2)!important;border-color:var(--hub-azul2)!important}

/* ---------- tabelas ---------- */
th{background:var(--hub-azul)!important;color:#fff!important;font-weight:700;letter-spacing:.03em}
table{border-color:var(--hub-linha)}
td{border-color:var(--hub-linha2)}
tr:hover td{background:#f9fbff}

/* ---------- campos ---------- */
input,select,textarea{font-family:inherit;border-radius:var(--hub-r-sm);
  border-color:var(--hub-linha);color:var(--hub-ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--hub-azul);
  box-shadow:0 0 0 3px rgba(13,42,158,.10)}

/* ---------- menu lateral (Planejamento D.I.) ---------- */
.menu,.side,.lateral{background:var(--hub-card)}
.menu button.on,.side button.on{background:rgba(13,42,158,.10);color:var(--hub-azul);font-weight:700}

/* ---------- chips e selos ---------- */
.chip,.tag,.badge,.cnt{border-radius:20px}
.chip{background:var(--hub-chip);color:var(--hub-ink2)}

/* ---------- títulos de seção dos dashboards ---------- */
h2.dsec{color:var(--hub-navy);border-left-color:var(--hub-azul)}
h1,h2,h3{letter-spacing:-.3px}

/* ---------- gráficos SVG ---------- */
svg text{fill:var(--hub-ink2)}
svg .dl{fill:var(--hub-ink)}

/* ---------- ajustes do modo escuro (evita realces claros) ---------- */
html[data-tema="escuro"] tr:hover td,
html[data-tema="escuro"] .tile.clic:hover,
html[data-tema="escuro"] button.ghost:hover,
html[data-tema="escuro"] .tb button:hover,
html[data-tema="escuro"] .cab button:hover,
html[data-tema="escuro"] .acoes button:hover{background:rgba(255,255,255,.05)}
html[data-tema="escuro"] th{background:var(--hub-azul)!important}

/* ===========================================================================
   PLANEJAMENTO — layout "Acompanhamento" (menu, filtros, KPIs e listas)
   =========================================================================== */

/* menu lateral */
.lateral{width:230px;padding:20px 16px 16px}
.lateral .sub{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--hub-muted2);margin:0 4px 2px}
#btColapsa{width:26px;height:26px;padding:0;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:13px;line-height:1}
.tabs{gap:4px}
.tabs button{border-radius:11px;padding:10px 12px;font-size:13.5px;font-weight:600;
  color:var(--hub-ink2);gap:11px}
.tabs button i{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--hub-muted2);transition:.15s}
.tabs button i svg{display:block}
.tabs button:hover{background:#f4f7fd}
.tabs button.on{background:#eef2fd!important;color:var(--hub-azul)!important;font-weight:700;
  box-shadow:inset 3px 0 0 var(--hub-azul)}
.tabs button.on i{background:var(--hub-card);
  box-shadow:0 0 0 1px var(--hub-linha),0 3px 8px -3px rgba(13,42,158,.35)}
/* o ícone só ganha cor no item aberto; nos demais fica azul, como o texto do menu */
.tabs button i svg,.tabs a.navlink i svg{filter:grayscale(1) brightness(.72) sepia(1) hue-rotate(190deg) saturate(3.2);transition:.15s}
.tabs button:hover i svg,.tabs a.navlink:hover i svg{filter:grayscale(1) brightness(.6) sepia(1) hue-rotate(190deg) saturate(4)}
.tabs button.on i svg{filter:none}
html[data-tema="escuro"] .tabs button:hover{background:rgba(255,255,255,.05)}
html[data-tema="escuro"] .tabs button.on{background:rgba(59,107,255,.16)!important;color:#9cc4fb!important;
  box-shadow:inset 3px 0 0 #3b6bff}
html[data-tema="escuro"] .tabs button.on i{background:rgba(255,255,255,.94);box-shadow:none}
.lateral .acoes button{border-radius:11px;padding:10px 12px;font-weight:700}

/* filtros: pílulas soltas sobre o fundo, sem o cartão em volta */
.filtros{background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;gap:10px;margin-bottom:16px}
.filtros input,.filtros select,.filtros .ghost,.filtros a.ghost{
  background:var(--hub-card);border:1px solid #e0e5f0;border-radius:11px;padding:10px 14px;
  font-size:13px;font-weight:600;color:var(--hub-ink2)}
.filtros input:focus,.filtros select:focus{border-color:var(--hub-azul)}
.filtros a[href*="export"]{background:#e6f2fb!important;border-color:#b9dcf3!important;
  color:#1c74d1!important;font-weight:700}
html[data-tema="escuro"] .filtros input,html[data-tema="escuro"] .filtros select,
html[data-tema="escuro"] .filtros .ghost{border-color:var(--hub-linha)}

/* barra do relatório + controle segmentado */
.relbar{gap:10px;font-size:13px;color:var(--hub-ink2);flex-wrap:wrap;margin-bottom:16px}
.relbar select{background:var(--hub-card);border:1px solid #e0e5f0;border-radius:10px;
  padding:8px 13px;font-weight:600;color:var(--hub-ink2)}
.segrel{display:inline-flex;gap:2px;background:var(--hub-card);border:1px solid #e0e5f0;
  border-radius:11px;padding:3px}
.segrel .ghost{border:0!important;background:transparent!important;border-radius:9px;
  padding:8px 14px;font-size:12.5px;font-weight:700;color:#6b7799}
.segrel .ghost:hover{background:#eef2fd!important;color:var(--hub-azul)!important}
html[data-tema="escuro"] .segrel,html[data-tema="escuro"] .relbar select{border-color:var(--hub-linha)}
html[data-tema="escuro"] .segrel .ghost:hover{background:rgba(59,107,255,.16)!important}

/* KPIs da esteira */
.tiles{gap:14px;margin-bottom:16px}
body .tile{border-radius:16px;padding:18px 20px}
.tile .ir{margin-top:8px;font-size:11px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;color:var(--hub-azul)}
/* nos Vencimentos os rótulos são frase (como no layout); nos dashboards seguem em caixa alta */
#v-venc .tile .k{font-size:34px;line-height:1}
#v-venc .tile .t{font-size:12px;color:#5b6b9a;margin-top:10px;line-height:1.35;
  text-transform:none;letter-spacing:0;font-weight:500}
html[data-tema="escuro"] #v-venc .tile .t{color:var(--hub-ink2)}

/* títulos das seções da lista */
.vhead h3{font-size:15px;font-weight:800;color:var(--hub-ink)}

/* linhas de marco */
.vrow{border-radius:12px;border-left-width:5px;padding:13px 16px;gap:16px;margin-bottom:8px}
.vrow:hover{box-shadow:0 12px 26px -16px rgba(13,42,158,.4);border-color:#dbe2f2}
.vrow .d{width:72px;font-size:16px;font-weight:800;color:var(--hub-ink)}
.vrow .d small{font-size:11px;color:var(--hub-muted2);margin-top:2px}
.vrow .lb{font-weight:700;font-size:14px;color:var(--hub-ink)}
.vrow .atr{font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  border-radius:20px;padding:5px 11px;width:auto;min-width:76px;text-align:center}
.vrow .vdep,.vrow .vemp{font-size:12.5px;color:#5b6b9a}
.vrow .chip{background:#f4f6fc;border:1px solid #e0e5f0;border-radius:20px;padding:5px 12px;
  font-size:12px;font-weight:700;color:var(--hub-ink2)}
.vazio2{border-radius:14px;border:1px dashed #cdd6ea;padding:20px;text-align:center;
  font-size:13.5px;color:var(--hub-muted)}
html[data-tema="escuro"] .vrow .chip{background:rgba(255,255,255,.06);border-color:var(--hub-linha)}
html[data-tema="escuro"] .vazio2{border-color:var(--hub-linha);background:transparent}

/* KPIs de Vencimentos: cada cartão com sua cor de topo (como no layout) */
#v-venc .tiles .tile:nth-child(1){border-top-color:#e0426b!important}
#v-venc .tiles .tile:nth-child(2){border-top-color:#f6b23c!important}
#v-venc .tiles .tile:nth-child(3){border-top-color:var(--hub-azul)!important}
#v-venc .tiles .tile:nth-child(4){border-top-color:#2f9be0!important}
#btLimpar{color:var(--hub-ink2)!important;border-color:#e0e5f0!important}
#btLimpar:hover{color:var(--hub-azul)!important;border-color:var(--hub-azul)!important}

/* modo escuro: números e rótulos legíveis nos KPIs e no segmentado */
html[data-tema="escuro"] .tile .k,html[data-tema="escuro"] .kpi .n{color:#9cc4fb}
html[data-tema="escuro"] .tile .ir,html[data-tema="escuro"] .segrel .ghost{color:#9fb0d8}
html[data-tema="escuro"] .filtros a[href*="export"]{background:rgba(47,155,224,.18)!important;
  border-color:rgba(47,155,224,.4)!important;color:#8fd0f5!important}

/* etapa: última coluna da linha, todas do mesmo tamanho, encostadas à direita */
.vrow .chipwrap{width:152px;flex:none;display:flex;justify-content:flex-end;margin-left:2px}
.vrow .chipwrap .chip{width:100%;min-width:0;flex:none;justify-content:flex-start;padding:5px 10px 5px 13px;gap:8px;white-space:nowrap;overflow:hidden}

/* atalho da Conferência de amarrações dentro do menu (só admin) */
.tabs a.navlink{display:flex;align-items:center;gap:11px;text-decoration:none;border-radius:11px;
  padding:10px 12px;font-size:13.5px;font-weight:600;color:var(--hub-ink2)}
.tabs a.navlink i{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--hub-muted2);transition:.15s}
.tabs a.navlink:hover{background:#f4f7fd;color:var(--hub-azul)}
.tabs a.navlink:hover i{color:var(--hub-azul)}
html[data-tema="escuro"] .tabs a.navlink:hover{background:rgba(255,255,255,.05);color:#9cc4fb}
.lateral.min .tabs a.navlink span{display:none}
.lateral.min .tabs a.navlink{justify-content:center;gap:0}

/* ===========================================================================
   PLANEJAMENTO — Painel Geral (matriz de marcos)
   =========================================================================== */
.pgtit{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.pgtit b{font-weight:800;font-size:20px;color:var(--hub-azul);letter-spacing:-.3px}
.pgtit span{font-size:13px;color:var(--hub-muted)}

.pgkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.pgkpi{background:var(--hub-card);border:1px solid var(--hub-linha);border-left:4px solid var(--acc);
  border-radius:14px;padding:14px 16px}
.pgkpi .v{font-size:26px;font-weight:800;line-height:1;color:var(--acc);letter-spacing:-.5px}
.pgkpi .l{font-size:11.5px;font-weight:600;color:#5b6b9a;margin-top:6px}
html[data-tema="escuro"] .pgkpi .l{color:var(--hub-ink2)}

.pgbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px}
.pgbar .legdatas{margin:0;flex:1}
.pgpend{background:var(--hub-card)!important;border:1px solid #e0e5f0!important;border-radius:11px;
  padding:9px 14px;font-size:12.5px;font-weight:700;color:#6b7799!important;cursor:pointer}
.pgpend.on{background:#fde3e3!important;border-color:#f4b8b8!important;color:#d13a3a!important}
html[data-tema="escuro"] .pgpend{border-color:var(--hub-linha)!important}
html[data-tema="escuro"] .pgpend.on{background:rgba(209,58,58,.18)!important;border-color:rgba(209,58,58,.5)!important;color:#ff9b9b!important}

/* a matriz vira um cartão branco com rolagem própria */
#v-painel .tblwrap{background:var(--hub-card);border:1px solid var(--hub-linha);border-radius:14px;overflow:auto}
/* as quatro primeiras colunas ficam presas ao rolar na horizontal (larguras fixas) */
.pg th:first-child,.pg td:first-child{width:72px;min-width:72px;max-width:72px}
.pg th:nth-child(2),.pg td:nth-child(2){left:72px;width:260px;min-width:260px;max-width:260px;
  overflow:hidden;text-overflow:ellipsis}
.pg th:nth-child(3),.pg td:nth-child(3){position:sticky;left:332px;z-index:3;background:var(--hub-card)}
.pg th:nth-child(4),.pg td:nth-child(4){position:sticky;left:462px;z-index:3;background:var(--hub-card);
  box-shadow:6px 0 8px -6px rgba(13,42,158,.18)}
.pg th:nth-child(3),.pg th:nth-child(4){z-index:5;background:var(--hub-navy)!important;
  box-shadow:6px 0 8px -6px rgba(0,0,0,.25)}
.pg th:first-child,.pg th:nth-child(2){background:var(--hub-navy)!important}
.pg td:first-child,.pg td:nth-child(2){background:var(--hub-card)}
.pg td:first-child{color:var(--hub-azul);font-weight:800;font-size:13px}
.pg td:nth-child(2){color:var(--hub-azul);font-weight:700;font-size:13px}
.pg tbody tr:hover td{background:#f5f8ff}
html[data-tema="escuro"] .pg tbody tr:hover td{background:rgba(255,255,255,.05)}

/* cada data vira uma etiqueta com a cor do seu estado */
.pgb{display:inline-flex;align-items:center;gap:5px;border-radius:8px;padding:5px 10px;
  font-size:12px;font-weight:700;line-height:1.1;white-space:nowrap}
.pgb.done{background:#e6f5ec;border:1px solid #bfe3cc;color:#1c7d43}
.pgb.over{background:#fde3e3;border:1px solid #f4b8b8;color:#d13a3a}
.pgb.soon{background:#fdf0d6;border:1px solid #f0d79a;color:#b47500}
.pgb.fut {background:#eef2fd;border:1px solid #d5def7;color:#2b56e0}
.pgb.none{background:transparent;border:1px solid transparent;color:#c5cddd;font-weight:600}
.pgb .xmk{font-size:10px;opacity:.9}
html[data-tema="escuro"] .pgb.done{background:rgba(28,125,67,.20);border-color:rgba(28,125,67,.45);color:#7fe0a6}
html[data-tema="escuro"] .pgb.over{background:rgba(209,58,58,.20);border-color:rgba(209,58,58,.45);color:#ff9b9b}
html[data-tema="escuro"] .pgb.soon{background:rgba(180,117,0,.22);border-color:rgba(180,117,0,.5);color:#f3c765}
html[data-tema="escuro"] .pgb.fut {background:rgba(43,86,224,.20);border-color:rgba(43,86,224,.45);color:#9cc4fb}
html[data-tema="escuro"] .pgb.none{color:#5a6486}
@media (max-width:1100px){.pgkpis{grid-template-columns:repeat(2,1fr)}}

/* cabeçalho da matriz todo em navy + marcas dentro da etiqueta */
.pg th{background:var(--hub-navy)!important}
.pg th:nth-child(3),.pg td:nth-child(3){width:130px;min-width:130px;max-width:130px}
.pg th:nth-child(4),.pg td:nth-child(4){width:150px;min-width:150px;max-width:150px}
.pgb .xmk{background:none!important;border:0!important;color:currentColor!important;
  width:auto!important;height:auto!important;padding:0!important;box-shadow:none!important;
  font-size:11px;line-height:1;opacity:.85}
.legpg i.pgb{width:14px;height:14px;padding:0;border-radius:4px;display:inline-block}
.pg .pgsub{display:block;font-size:10.5px;color:var(--hub-muted2);margin-top:4px;white-space:nowrap}

/* ===========================================================================
   PLANEJAMENTO — Kanban do Acompanhamento
   =========================================================================== */
.board{gap:14px}
.colk{flex:1 1 0;min-width:270px;background:#f4f6fc;border:1px solid var(--hub-linha);
  border-top:4px solid var(--cor,var(--hub-azul));border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column}
.colk h3{margin:0;padding:14px 16px 0;font-size:14px;display:flex;align-items:center;gap:9px;
  border-bottom:0;background:var(--hub-card)}
.colk h3 .dot{width:11px;height:11px;border-radius:50%;background:var(--cor,var(--hub-azul));flex:none}
.colk h3 .tt{font-weight:800;color:var(--hub-azul);letter-spacing:.2px;flex:1}
.colk h3 .n{margin-left:0;font-size:12px;font-weight:800;color:#fff;background:var(--cor,var(--hub-azul));
  border-radius:20px;min-width:24px;height:22px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 7px;line-height:1;text-align:center}
.colk .ksub{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 16px 12px;background:var(--hub-card);border-bottom:1px solid var(--hub-linha)}
.colk .ksub span{font-size:11.5px;color:var(--hub-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.colk .ksub b{font-size:12px;font-weight:800;color:#16307e;white-space:nowrap}
.cards{padding:12px;gap:10px;background:transparent}
.colk .card{background:var(--hub-card);border:1px solid var(--hub-linha);border-radius:12px;
  padding:13px 14px;gap:0;box-shadow:none}
.colk .card:hover{box-shadow:0 12px 26px -16px rgba(13,42,158,.4);border-color:#d5def7;transform:translateY(-2px)}
.colk .card .cab{display:flex;align-items:flex-start;gap:8px;margin-bottom:11px}
.colk .card .cod{flex:none;font-size:11px;font-weight:800;color:#fff;background:var(--cor,var(--hub-azul));
  border-radius:7px;padding:3px 8px;line-height:1.35}
.colk .card .nm{font-weight:700;font-size:13px;color:var(--hub-azul);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.colk .card .prog{display:flex;align-items:center;gap:9px}
.colk .card .prog .pbar{flex:1;height:8px;border-radius:5px;background:#eef0f5;display:block}
.colk .card .prog .pbar i{background:var(--cor,var(--hub-azul));border-radius:5px}
.colk .card .prog b{font-size:12.5px;font-weight:800;color:var(--hub-azul);width:36px;text-align:right}
.colk .card .nx{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11px;color:var(--hub-muted)}
.colk .card .nx .ar{color:var(--cor,var(--hub-azul));font-weight:800}
.colk .card .nx .lb{font-weight:600;color:#5b6b9a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.colk .card .nx .dt{margin-left:auto;color:var(--hub-muted2);white-space:nowrap;font-weight:700}
.colk .card .nx.sem .lb{color:var(--hub-muted2);font-weight:500;font-style:normal}
.colk .card .sel-et{margin-top:10px}
html[data-tema="escuro"] .colk{background:rgba(255,255,255,.03)}
html[data-tema="escuro"] .colk h3,html[data-tema="escuro"] .colk .ksub{background:var(--hub-card)}
html[data-tema="escuro"] .colk h3 .tt,html[data-tema="escuro"] .colk .card .nm,
html[data-tema="escuro"] .colk .card .prog b{color:#9cc4fb}
html[data-tema="escuro"] .colk .ksub b{color:#cfe0ff}
html[data-tema="escuro"] .colk .card .prog .pbar{background:rgba(255,255,255,.10)}

/* ===========================================================================
   PLANEJAMENTO — Linha do tempo
   =========================================================================== */
.lt2-scroll,.tl-wrap{background:var(--hub-card);border:1px solid var(--hub-linha);border-radius:14px}
.lt2-row{border-bottom:1px solid var(--hub-linha2)}
.lt2-row:last-child{border-bottom:0}
.lt2-row:hover .lt2-nome{background:#f5f8ff}
.lt2-nome{font-size:13px;color:var(--hub-ink);font-weight:700}
.lt2-line{opacity:.28;height:3px;top:13px}
/* ponto do marco: bolinha cheia com anel branco */
.lt2-dot{width:13px;height:13px;top:7px;border:0;background:var(--c,var(--hub-azul));
  box-shadow:0 0 0 3px var(--hub-card),0 0 0 4px var(--c,var(--hub-azul));z-index:3}
.lt2-dot:hover{transform:translateX(-50%) scale(1.25)}
.lt2-dot.mod{background:var(--hub-card);box-shadow:0 0 0 3px var(--c,var(--hub-azul))}
.lt2-lbl{font-size:11px;line-height:1.4}
.lt2-lbl b{font-size:11px;font-weight:700}
.lt2-lbl .dt{font-weight:800;font-size:11.5px}
.mtag{font-size:10px;font-weight:800;color:var(--hub-muted2);letter-spacing:.02em}
html[data-tema="escuro"] .mtag{color:#8b97bf}
html[data-tema="escuro"] .lt2-row:hover .lt2-nome{background:rgba(255,255,255,.05)}
.lt2-grid{border-left-color:var(--hub-linha)}
.lt2-mes{font-weight:700}
.legenda .lgfase{color:var(--hub-muted);font-size:11.5px;font-style:italic}

/* ---- Linha do tempo no padrão do layout (cabeçalho fixo, faixas zebradas) ---- */
.lt2-scroll{padding:0;border-radius:14px;max-height:72vh;overflow:auto}
.lt2-inner{min-width:100%}
.lt2-anos,.lt2-cab{display:flex;margin-left:0;margin-bottom:0;position:sticky;z-index:12}
.lt2-anos{top:0}
.lt2-cab{top:37px}
.lt2-hcanto{position:sticky;left:0;flex:none;width:250px;background:var(--hub-navy);z-index:13;
  border-right:1px solid rgba(255,255,255,.12)}
.lt2-hin{flex:none;display:flex}
.lt2-ano{flex:none;background:var(--hub-navy);color:#fff;border:0;border-radius:0;margin-right:0;
  padding:9px 0;font-size:14px;font-weight:800;border-left:1px solid rgba(255,255,255,.12)}
.lt2-mes{flex:none;width:88px;background:var(--hub-azul);color:#dbe6ff;font-size:12px;font-weight:700;
  padding:8px 0;border-right:0;border-left:1px solid rgba(255,255,255,.14);border-radius:0!important}
.lt2-corpo{margin-top:0}
/* faixas */
.lt2-row{min-height:96px;align-items:stretch;border-bottom:1px solid var(--hub-linha2)}
.lt2-row:nth-child(even){background:#f7f9fe}
.lt2-nome{width:250px;margin:0;padding:0 16px;align-items:center;font-size:13px;
  border-right:1px solid var(--hub-linha);background:inherit;
  /* acima das datas e das bolinhas: ao arrastar a régua para o lado, os marcos
     passam POR BAIXO da coluna de nomes em vez de escorrerem por cima dela */
  z-index:9}
/* a coluna fixa precisa de fundo sólido — senão o que passa por baixo aparece */
.lt2-row .lt2-nome{background:var(--hub-card)}
.lt2-row:nth-child(even) .lt2-nome{background:#f7f9fe}
html[data-tema="escuro"] .lt2-row .lt2-nome{background:var(--hub-card)}
html[data-tema="escuro"] .lt2-row:nth-child(even) .lt2-nome{background:rgba(255,255,255,.03)}
.lt2-row:nth-child(even) .lt2-nome{background:#f7f9fe}
.lt2-row:nth-child(odd) .lt2-nome{background:var(--hub-card)}
.lt2-nome .pt{margin-top:0}
.lt2-area{margin-left:0}
.lt2-line{top:calc(50% - 1.5px);height:3px;opacity:.4}
.lt2-dot{top:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:var(--hub-card);
  border:3px solid var(--c,var(--hub-azul));box-shadow:0 0 0 3px var(--hub-card)}
.lt2-dot:hover{transform:translate(-50%,-50%) scale(1.2)}
.lt2-dot.mod{background:var(--hub-card);box-shadow:0 0 0 3px var(--hub-card)}
.lt2-lbl b{font-size:11px;font-weight:800}
.lt2-lbl .dt{font-size:10.5px;font-weight:700}
.lt2-hoje{z-index:5;border-left-width:2px;opacity:1;border-color:#e0426b}
/* marco que passou para trás da coluna de nomes: some por inteiro, sem meia palavra */
.lt2-lbl,.lt2-dot{transition:opacity .12s linear}
.lt2-lbl.foralt,.lt2-dot.foralt{opacity:0;pointer-events:none}
/* legenda */
.ltleg .bol{width:13px;height:13px;border-radius:50%;border:3px solid;background:var(--hub-card);box-sizing:border-box}
.ltleg .tracejado{width:16px;height:0;border-top:2px dashed #e0426b;border-radius:0}
html[data-tema="escuro"] .lt2-row:nth-child(even),
html[data-tema="escuro"] .lt2-row:nth-child(even) .lt2-nome{background:rgba(255,255,255,.03)}
html[data-tema="escuro"] .lt2-row:nth-child(odd) .lt2-nome{background:var(--hub-card)}

/* ===========================================================================
   PLANEJAMENTO — ficha do empreendimento
   =========================================================================== */
.modal{width:min(1340px,97vw);background:var(--hub-page)}
.modal>header{padding:20px 26px;gap:14px;border-bottom:1px solid var(--hub-linha2);align-items:center}
.modal>header .etdot{width:12px;height:12px;border-radius:50%;flex:none}
.modal>header .mtit{flex:1;min-width:0}
.modal>header h2{font-size:20px;font-weight:800;color:var(--hub-azul);letter-spacing:-.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal>header .msub{font-size:12.5px;color:var(--hub-muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal>header #mEdNome,.modal>header .x{width:38px;height:38px;border:1px solid #e0e5f0;border-radius:10px;
  display:flex;align-items:center;justify-content:center;background:var(--hub-card);color:var(--hub-azul);cursor:pointer}
.modal>header .x{color:var(--hub-muted2);font-size:18px}
.modal>header #mEdNome:hover,.modal>header .x:hover{border-color:var(--hub-azul);color:var(--hub-azul)}
.modal>header #etSel{background:var(--hub-azul);color:#fff;font-weight:700;font-size:13px;border-radius:10px;
  padding:9px 14px;border:0}
.mbody{padding:18px 26px 26px}

/* barra da esteira */
.mprog{display:flex;align-items:center;gap:14px;background:var(--hub-card);border:1px solid var(--hub-linha);
  border-radius:14px;padding:16px 20px;margin:0 0 14px!important}
.mprog .pb{flex:1;height:12px;border-radius:8px;background:#eef0f5;overflow:hidden;display:block}
.mprog .pb i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#0d2a9e,#2f9be0)}
.mprog b{font-size:22px;font-weight:800;color:var(--hub-azul)}
.mprog .tx{font-size:12.5px;color:var(--hub-muted);font-weight:600}
html[data-tema="escuro"] .mprog .pb{background:rgba(255,255,255,.10)}

/* dados do empreendimento */
.igrid{grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.igrid>div{background:var(--hub-painel);border:1px solid var(--hub-linha);border-radius:12px;padding:11px 13px}
.igrid .l{font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--hub-muted2)}
.igrid input,.igrid .ro{font-size:14px;font-weight:700;color:var(--hub-azul);margin-top:4px}
@media (max-width:1150px){.igrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.igrid{grid-template-columns:repeat(2,1fr)}}

/* seções */
.mbody details{border:1px solid var(--hub-linha);border-radius:14px;margin-bottom:12px;overflow:hidden;
  background:var(--hub-card)}
.mbody summary{padding:14px 18px;font-weight:800;font-size:16px;color:var(--hub-azul);list-style:none;
  display:flex;align-items:center;gap:10px}
.mbody summary::-webkit-details-marker{display:none}
.mbody summary::before{content:'▸';color:var(--hub-azul);font-size:12px;transition:.15s;display:inline-block}
.mbody details[open]>summary::before{transform:rotate(90deg)}
.mbody summary:hover{background:#f9fbff}
.mbody summary .cnt{color:var(--hub-muted);font-weight:600;font-size:12.5px;margin-left:auto}
html[data-tema="escuro"] .mbody summary:hover{background:rgba(255,255,255,.04)}

/* linhas dos marcos */
.mrow{grid-template-columns:150px minmax(0,1fr) 180px 54px 44px 320px;padding:0 18px;
  border-top:1px solid var(--hub-linha2);font-size:13.5px}
.mrow:hover{background:#f5f8ff}
.mrow>*{padding:9px 10px 9px 12px}
.mrow>*:nth-child(n+2){border-left:0}
.mrow .ma{font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--hub-muted)}
.mrow>span:nth-child(2){font-size:13.5px;color:var(--hub-azul)}
.mrow .vinc{font-size:11.5px;color:var(--hub-muted);line-height:1.3}
.mrow .okmark{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:800}
html[data-tema="escuro"] .mrow:hover{background:rgba(255,255,255,.04)}
/* status do marco: quadradinho arredondado de 24px */
.mrow .okmark{width:auto;height:auto}
.mrow .okmark .xmk{width:24px;height:24px;border-radius:7px;font-size:13px;line-height:24px;
  top:0;background:var(--hub-vermelho)}
.mrow .okmark .xmk.ok{background:#22a06b}
.mrow .okmark.tgl .xmk{cursor:pointer}
.mrow .amcol .amchip,.mrow .amcol{font-size:15px}
.modal>header #etSel{max-width:230px}

/* filtro de etapa com várias opções */
.filtros #fEtapa{max-width:none;position:relative;flex:none}
.filtros .fdrop>summary{list-style:none;cursor:pointer;background:var(--hub-card);border:1px solid #e0e5f0;
  border-radius:11px;padding:10px 14px;font-size:13px;font-weight:600;color:var(--hub-ink2);white-space:nowrap}
.filtros .fdrop>summary::-webkit-details-marker{display:none}
.filtros .fdrop>summary::after{content:' ▾';color:var(--hub-muted2)}
.filtros .fdrop[open]>summary,.filtros .fdrop.on>summary{border-color:var(--hub-azul);color:var(--hub-azul)}
.filtros .fdrop .opts{position:absolute;left:0;top:calc(100% + 6px);background:var(--hub-card);
  border:1px solid var(--hub-linha);border-radius:12px;padding:10px 12px;z-index:80;min-width:210px;
  display:flex;flex-direction:column;gap:6px;box-shadow:0 18px 40px -22px rgba(13,42,158,.5)}
.filtros .fdrop .opts label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--hub-ink2);
  cursor:pointer;white-space:nowrap}
.filtros .fdrop .opts label input{width:auto;flex:none;margin:0;padding:0;border-radius:4px}
.filtros .fdrop .opts .lmp{border-top:1px solid var(--hub-linha2);padding-top:8px;margin-top:2px}
.filtros .fdrop .opts .lmp a{font-size:11.5px;color:var(--hub-muted);font-weight:600}
.filtros .fdrop .opts .lmp a:hover{color:var(--hub-azul)}

/* o rótulo fica sempre centralizado na bolinha e por cima da coluna de nomes */
.lt2-lbl{z-index:8}
/* a linha de cada empreendimento é sempre azul */
.lt2-line{background:#2b56e0!important;opacity:.35}
/* faixas mais compactas */
.lt2-row{min-height:64px}
.lt2-nome{padding:0 16px;font-size:12.5px}
.lt2-lbl{line-height:1.3}
.lt2-lbl b{font-size:10.5px}
.lt2-lbl .dt{font-size:11px}
.lt2-dot{width:14px;height:14px;border-width:3px}
/* a lista aberta do seletor de etapa fica clara (só o botão fechado é azul) */
.modal>header #etSel option{background:var(--hub-card);color:var(--hub-ink);font-weight:600}
html[data-tema="escuro"] .modal>header #etSel option{background:#151c38;color:#eef1f8}

/* resumo da esteira projetada ao criar um empreendimento */
#dlgProj h3{font-size:17px;font-weight:800;color:var(--hub-azul)}
#dlgProj .dsub{font-size:12.5px;color:var(--hub-muted);line-height:1.5;margin:0 0 14px}
#dlgProj .dsub b{color:var(--hub-azul);font-size:14px}
.projlista{max-height:52vh;overflow:auto;border:1px solid var(--hub-linha);border-radius:12px;padding:6px}
.projlista .pgrupo{padding:8px 10px}
.projlista .pgrupo+.pgrupo{border-top:1px solid var(--hub-linha2)}
.projlista .pgrupo>b{display:block;font-size:11px;font-weight:800;letter-spacing:.3px;
  text-transform:uppercase;color:var(--hub-muted2);margin-bottom:6px}
.projlista .plin{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:3px 0}
.projlista .plin span{flex:1;color:var(--hub-ink2)}
.projlista .plin i{font-style:normal;font-weight:800;color:var(--hub-azul);white-space:nowrap}
#dlgProj .dacoes{display:flex;justify-content:flex-end;margin-top:14px}
#dlgProj .dacoes button{padding:9px 18px;border-radius:10px;cursor:pointer}

/* ===========================================================================
   Sino de notificações (comentários)
   =========================================================================== */
.sino{position:relative;background:none;border:0;font-size:16px;cursor:pointer;padding:4px 6px;line-height:1}
.sino i{position:absolute;top:-3px;right:-4px;background:#e0426b;color:#fff;font-style:normal;
  font-size:9px;font-weight:800;border-radius:20px;min-width:15px;height:15px;line-height:15px;
  text-align:center;padding:0 3px}
.hrov.notif{display:flex}
.hrov.notif .hrbox{width:min(560px,94vw)}
.hrov.notif .hrlista{padding:14px;overflow-y:auto}
.nitem{border:1px solid var(--hub-linha);border-left:4px solid var(--hub-azul3);border-radius:12px;
  padding:10px 12px;margin-bottom:8px;cursor:pointer;background:var(--hub-card)}
.nitem:hover{box-shadow:0 10px 22px -14px rgba(13,42,158,.4);border-color:#d5def7}
.nitem.lida{opacity:.55;border-left-color:var(--hub-linha)}
.nitem .ncab{display:flex;align-items:center;gap:8px}
.nitem .ncab b{font-size:13px;color:var(--hub-ink)}
.nitem .ncab span{margin-left:auto;font-size:11px;color:var(--hub-muted2)}
.nitem .nemp{font-size:11.5px;font-weight:700;color:var(--hub-azul);margin-top:2px}
.nitem .ntxt{font-size:12.5px;color:var(--hub-ink2);margin-top:4px;white-space:pre-wrap}
.nitem .nlida{margin-top:8px;background:none;border:1px solid var(--hub-linha);border-radius:8px;
  padding:4px 10px;font-size:11px;font-weight:700;color:var(--hub-ink2);cursor:pointer}
.nitem .nlida:hover{border-color:var(--hub-azul);color:var(--hub-azul)}
html[data-tema="escuro"] .nitem.lida{opacity:.45}
/* grupo de tarefas (seção) na lista de vencimentos */
/* tarefa e grupo dividem o espaço central sem espremer o nome da tarefa */
.vrow .lb{flex:1.1;min-width:210px}
.vrow .vsec{flex:1;min-width:0;max-width:280px;font-size:11.5px;color:var(--hub-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* marcos da régua abrem a ficha na tarefa correspondente */
.lt2-lbl{cursor:pointer}
.lt2-lbl:hover b{text-decoration:underline}

/* ---- marcos na cor da fase ---- */
.lt2-lbl.chip-l{border-radius:7px;padding:3px 8px;line-height:1.3}
.lt2-lbl.chip-l b,.lt2-lbl.chip-l .dt,.lt2-lbl.chip-l .mtag{color:#fff!important}
.lt2-lbl .dt{font-weight:700}
.lt2-dot.cheio{background:var(--c,var(--hub-azul));border-color:var(--c,var(--hub-azul))}
/* a régua mantém a mesma altura, com ou sem filtro */
.lt2-scroll{height:calc(100vh - 330px);min-height:420px;max-height:none}
.ltleg .bol{border-color:var(--hub-ink2)}
.ltleg .bol.cheia{background:var(--hub-ink2)}
.ltleg b.chip-l{display:inline-block;border-radius:6px;font-size:11px;padding:1px 7px;font-weight:800}

/* ===========================================================================
   Ficha — linha do tempo das datas-chave
   =========================================================================== */
.esteira{display:flex;align-items:flex-start;gap:0;background:var(--hub-card);
  border:1px solid var(--hub-linha);border-radius:14px;padding:18px 16px 14px;margin-bottom:16px;
  overflow-x:auto}
.epasso{flex:1;min-width:104px;position:relative;display:flex;flex-direction:column;
  align-items:center;text-align:center;cursor:pointer;padding:0 4px}
/* trilho ligando as bolinhas */
.epasso::before{content:'';position:absolute;top:19px;left:-50%;width:100%;height:2px;
  background:var(--hub-linha);z-index:0}
.epasso:first-child::before{display:none}
.ebola{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
  color:var(--hub-azul);background:var(--hub-card);border:2px solid var(--hub-azul)}
.epasso .edata{font-size:12px;font-weight:800;color:var(--hub-azul);margin-top:9px;white-space:nowrap}
.epasso .elbl{font-size:11px;color:var(--hub-ink2);margin-top:2px;line-height:1.25}
.epasso:hover .ebola{background:var(--hub-azul);color:#fff}
.epasso:hover .edata{text-decoration:underline}
/* sem data: cinza apagado */
.epasso.off{cursor:pointer}
.epasso.off .ebola{color:var(--hub-muted2);border-color:var(--hub-linha);background:var(--hub-painel)}
.epasso.off .edata{color:var(--hub-muted2)}
.epasso.off .elbl{color:var(--hub-muted2)}
.epasso.off:hover .ebola{background:var(--hub-linha);color:var(--hub-muted)}
html[data-tema="escuro"] .epasso.off .ebola{background:rgba(255,255,255,.05)}
/* fases já concluídas: bolinha com fundo azul claro, número e borda no azul do sistema */
.epasso.ok .ebola{background:#cfe0f7;border-color:var(--hub-azul);color:var(--hub-azul)}
.epasso.ok:hover .ebola{background:#b8d2f3}
/* fase atual (próxima data a acontecer): bolinha azul escura com número branco
   e um quadro tracejado em volta do passo inteiro */
.epasso.agora .ebola{background:var(--hub-azul);border-color:var(--hub-azul);color:#fff}
.epasso.agora .edata{color:var(--hub-azul)}
.epasso.agora .elbl{color:var(--hub-azul);font-weight:700}
.epasso.agora::after{content:'';position:absolute;top:-10px;left:1px;right:1px;bottom:-8px;
  border:2px dashed var(--hub-azul);border-radius:12px;pointer-events:none;z-index:2;
  background:rgba(13,42,158,.045)}
.epasso.agora:hover .ebola{background:var(--hub-navy);border-color:var(--hub-navy)}
.epasso.agora:hover::after{border-color:var(--hub-navy)}
/* o quadro tracejado precisa de um respiro dentro da caixa da esteira */
.esteira{padding-top:22px}