/* ============================================================
   Dal Cero Hub — design system (redesign 2026-06)
   Dark-first glass theme · Aventa (display) + Loos (body)
   Tokens + shell + login (lamp) + components (our class vocab)
   ============================================================ */

/* ---------- Webfonts ---------- */
@font-face{ font-family:"Aventa"; src:url("/assets/fonts/Aventa-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Aventa"; src:url("/assets/fonts/Aventa-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Loos"; src:url("/assets/fonts/Loos-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Loos"; src:url("/assets/fonts/Loos-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
/* Aptos (modelo C aprovado 2026-07-06): fonte do sistema inteiro. O arquivo FINO cobre
   até o peso 600 (nomes, chips, semi-destaques ficam leves) e o Bold real só entra em
   700+ (títulos de página, KPIs) — nunca deixar o navegador sintetizar negrito. */
@font-face{ font-family:"Aptos"; src:url("/assets/fonts/Aptos.ttf") format("truetype"); font-weight:100 600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Aptos"; src:url("/assets/fonts/Aptos-Bold.ttf") format("truetype"); font-weight:700 900; font-style:normal; font-display:swap; }

/* ---------- Brand + scale tokens ---------- */
:root{
  --dc-blue-vibrant:#0043d8; --dc-blue:#177fe5; --dc-blue-light:#4399ff; --dc-blue-deep:#003b91; --dc-navy:#041f47;
  --dc-gold:#e8b461;
  --dc-white:#fff; --dc-gray-50:#f6f7f9; --dc-gray-100:#eaeaea; --dc-gray-200:#d8dade; --dc-gray-300:#bcc0c7;
  --dc-gray-400:#9aa0aa; --dc-gray-500:#6f7681; --dc-gray-600:#4d535d; --dc-gray-700:#343a44; --dc-gray-800:#1f242d; --dc-gray-900:#11151b;
  --dc-blue-50:#eef5fe; --dc-blue-100:#d6e8fd; --dc-blue-200:#aed0fb;
  --dc-success:#1e8e63; --dc-warning:#e8b461; --dc-danger:#d0463b; --dc-info:#177fe5;

  --surface-page:var(--dc-gray-50); --surface-card:var(--dc-white); --surface-sunken:var(--dc-gray-100);
  --surface-inverse:var(--dc-navy); --surface-brand:var(--dc-blue); --surface-brand-strong:var(--dc-blue-vibrant);
  --text-strong:var(--dc-navy); --text-body:var(--dc-gray-700); --text-muted:var(--dc-gray-500); --text-subtle:var(--dc-gray-400);
  --text-on-brand:var(--dc-white); --text-on-dark:var(--dc-gray-100); --text-link:var(--dc-blue);
  --border-subtle:var(--dc-gray-200); --border-default:var(--dc-gray-300); --border-strong:var(--dc-gray-400); --border-brand:var(--dc-blue);
  --action-bg:var(--dc-blue); --action-bg-hover:var(--dc-blue-deep); --action-bg-active:var(--dc-navy); --action-fg:var(--dc-white); --focus-ring:var(--dc-blue-light);

  --font-display:"Aptos",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Aptos",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-bold:700;
  --fs-h1:3.052rem; --fs-h2:2.441rem; --fs-h3:1.953rem; --fs-h4:1.563rem; --fs-h5:1.25rem;
  --fs-body-lg:1.125rem; --fs-body:1rem; --fs-body-sm:.875rem; --fs-caption:.75rem; --fs-overline:.6875rem;
  --lh-tight:1.05; --lh-snug:1.2; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tight:-.02em; --ls-overline:.16em;
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:28px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(4,31,71,.08),0 1px 2px rgba(4,31,71,.05);
  --shadow-md:0 4px 12px rgba(4,31,71,.08),0 2px 4px rgba(4,31,71,.05);
  --shadow-lg:0 12px 28px rgba(4,31,71,.12),0 4px 8px rgba(4,31,71,.06);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{ font-family:var(--font-body); background:#050f24; color:var(--text-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-synthesis:none; }
#app{ height:100%; }
button{ font-family:inherit; }
::selection{ background:rgba(67,153,255,.32); }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--text-strong); margin:0; letter-spacing:var(--ls-tight); line-height:var(--lh-snug); }
a{ color:var(--text-link); text-decoration:none; }

/* ============================================================
   THEME SURFACES (light default · dark variant)
   ============================================================ */
.app-root{
  --app-bg:var(--dc-gray-50);
  --app-grad:radial-gradient(900px 500px at 12% -8%, #eaf1fd 0%, transparent 60%),radial-gradient(900px 600px at 100% 0%, #eef2f7 0%, transparent 55%);
  --glass-bg:#ffffff; --glass-border:var(--dc-gray-200); --glass-shadow:var(--shadow-lg); --glass-blur:0px;
  --hair:var(--dc-gray-200); --hair-soft:var(--dc-gray-100);
  --chip-bg:var(--dc-gray-100); --chip-fg:var(--dc-gray-700);
  --side-bg:#ffffff; --side-hair:var(--dc-gray-200); --side-active:var(--dc-blue-50); --side-active-fg:var(--dc-blue-deep);
  --topbar-bg:rgba(255,255,255,.78); --tbl-head-bg:#eef2f7;
  --accent:var(--dc-blue); --accent-2:#15b8d4; --pos:var(--dc-success); --neg:var(--dc-danger); --track:rgba(4,31,71,.10);
  --panel-radius:18px;
  /* legacy token bridge (módulos antigos) */
  --azul:var(--accent); --azul-escuro:var(--dc-blue-deep); --marinho:var(--dc-navy); --marinho-2:#0a2c5e;
  --cinza:var(--surface-page); --cinza-2:var(--surface-sunken); --branco:var(--surface-card);
  --tinta:var(--text-strong); --tinta-2:var(--text-muted); --ambar:var(--dc-gold);
  --verde:var(--pos); --vermelho:var(--neg); --laranja:#c98a3a; --borda:var(--hair); --sombra:var(--glass-shadow);
  --radio:var(--radius-lg); --radio-sm:var(--radius-sm);
  color:var(--text-body);
}
.app-root[data-theme="dark"]{
  --surface-page:#06122b; --surface-card:rgba(255,255,255,.055); --surface-sunken:rgba(255,255,255,.03); --surface-inverse:#020a1c;
  --text-strong:#eef4fd; --text-body:#c4d2e6; --text-muted:#8b9bb5; --text-subtle:#6c7e99; --text-on-dark:#eef4fd;
  --border-subtle:rgba(255,255,255,.08); --border-default:rgba(255,255,255,.15);
  --action-bg-hover:#3a8bf2; --action-bg-active:#2a78e0;
  --app-bg:#050f24;
  --app-grad:radial-gradient(1100px 620px at 16% -10%, rgba(23,127,229,.20) 0%, transparent 60%),radial-gradient(1000px 700px at 102% 4%, rgba(34,211,238,.10) 0%, transparent 55%),radial-gradient(900px 600px at 50% 120%, rgba(0,67,216,.16) 0%, transparent 60%);
  --glass-bg:rgba(255,255,255,.05); --glass-border:rgba(255,255,255,.10); --glass-shadow:0 20px 44px rgba(0,0,0,.40); --glass-blur:18px;
  --hair:rgba(255,255,255,.09); --hair-soft:rgba(255,255,255,.05);
  --chip-bg:rgba(255,255,255,.08); --chip-fg:#d4e0f1;
  --side-bg:rgba(255,255,255,.035); --side-hair:rgba(255,255,255,.07); --side-active:rgba(67,153,255,.17); --side-active-fg:#bcd8ff;
  --topbar-bg:rgba(7,18,40,.55); --tbl-head-bg:#0c1830; --accent:#4399ff; --accent-2:#34dafe; --track:rgba(255,255,255,.10);
}

.app-root *::-webkit-scrollbar{ width:10px; height:10px; }
.app-root *::-webkit-scrollbar-thumb{ background:var(--hair); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
.app-root *::-webkit-scrollbar-thumb:hover{ background:var(--border-default); background-clip:content-box; }
.app-root *::-webkit-scrollbar-track{ background:transparent; }

/* ============================================================
   LOGIN — modelo 1d "Editorial tipográfico" (handoff design_handoff_login_1d, 2026-09-30)
   Página branca, headline em Aventa à esquerda, formulário à direita sem cartão, linha fina
   entre os dois. Cores e medidas do README do handoff; breakpoint único em 960px.
   ============================================================ */
.lg-page{ position:fixed; inset:0; overflow:auto; background:#fff; color:#20262e; font-family:"Loos",system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; color-scheme:light;
  --lg-navy:#041f47; --lg-blue:#003b91; --lg-clear:#177fe5; --lg-ink:#20262e; --lg-g600:#4d535d; --lg-g500:#6f7681; --lg-g400:#9aa0aa; --lg-g300:#bcc0c7; --lg-g200:#d8dade; --lg-g100:#eaeaea; --lg-borda:#8c929c; --lg-danger:#d0463b;
  --lg-focus:0 0 0 3px rgba(67,153,255,.45); --lg-ease:cubic-bezier(.2,0,0,1); }
.lg-inner{ min-height:100%; display:flex; flex-direction:column; }
.lg-page a{ color:var(--lg-blue); text-decoration:none; font-weight:500; }
.lg-page a:hover{ color:var(--lg-navy); }
.lg-page a:focus-visible{ outline:none; box-shadow:var(--lg-focus); border-radius:4px; }
.lg-header{ display:flex; justify-content:space-between; align-items:center; padding:36px 64px 0; }
.lg-header img{ height:28px; width:auto; display:block; }
.lg-header nav{ display:flex; align-items:center; gap:28px; }
.lg-brand{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--lg-blue); font-weight:500; }
.lg-header nav a{ font-size:14px; }
.lg-main{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) 1px 400px; column-gap:72px; align-items:center; padding:0 64px; }
.lg-intro{ display:flex; flex-direction:column; gap:28px; max-width:620px; }
.lg-academy{ height:96px; width:auto; display:block; align-self:flex-start; }
.lg-rule{ width:56px; height:3px; background:var(--lg-clear); border-radius:2px; }
.lg-headline{ margin:0; font-family:"Aventa",system-ui,sans-serif; font-weight:400; font-size:54px; line-height:1.06; letter-spacing:-.02em; color:var(--lg-blue); text-wrap:pretty; }
.lg-headline strong{ font-weight:700; color:var(--lg-navy); }
.lg-lead{ margin:0; font-size:18px; line-height:1.65; color:var(--lg-g600); max-width:480px; }
.lg-divider{ height:440px; background:var(--lg-g200); }
.lg-form{ display:flex; flex-direction:column; gap:28px; }
.lg-title h2{ margin:0; font-family:"Aventa",system-ui,sans-serif; font-weight:700; font-size:26px; line-height:1.2; letter-spacing:-.02em; color:var(--lg-navy); }
.lg-sub{ margin:6px 0 0; font-size:15px; line-height:1.5; color:var(--lg-g500); }
.lg-fields{ display:flex; flex-direction:column; gap:18px; }
.lg-field{ display:flex; flex-direction:column; gap:6px; }
.lg-field label{ font-size:14px; font-weight:500; color:var(--lg-blue); }
.lg-input{ font-family:inherit; font-size:16px; color:var(--lg-blue); background:#fff; border:1px solid var(--lg-borda); border-radius:12px; padding:10px 12px; width:100%; line-height:1.4; transition:border-color 120ms var(--lg-ease),box-shadow 120ms var(--lg-ease); }
.lg-input::placeholder{ color:var(--lg-g500); }
.lg-input:hover{ border-color:var(--lg-g500); }
.lg-input:focus{ outline:none; border-color:var(--lg-blue); box-shadow:var(--lg-focus); }
.lg-input[aria-invalid="true"]{ border-color:var(--lg-danger); }
.lg-input:disabled{ background:var(--lg-g100); color:var(--lg-g400); }
.lg-error{ margin:-8px 0 0; font-size:12px; line-height:1.4; color:var(--lg-danger); }
.lg-error:empty{ display:none; }
.lg-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lg-check{ position:relative; display:inline-flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:16px; line-height:1.35; color:var(--lg-ink); }
.lg-check input{ position:absolute; opacity:0; width:0; height:0; }
.lg-box{ flex:none; width:20px; height:20px; border-radius:4px; border:1.5px solid var(--lg-borda); background:#fff; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; transition:background 120ms var(--lg-ease),border-color 120ms var(--lg-ease),box-shadow 120ms var(--lg-ease); }
.lg-box svg{ width:13px; height:13px; opacity:0; transform:scale(.6); transition:opacity 120ms,transform 120ms; }
.lg-check input:checked + .lg-box{ background:var(--lg-blue); border-color:var(--lg-blue); }
.lg-check input:checked + .lg-box svg{ opacity:1; transform:scale(1); }
.lg-check input:focus-visible + .lg-box{ box-shadow:var(--lg-focus); }
.lg-row a, .lg-linkbtn{ margin-left:auto; font-size:14px; white-space:nowrap; }
.lg-linkbtn{ background:none; border:0; padding:0; font:inherit; font-weight:500; color:var(--lg-blue); cursor:pointer; }
.lg-linkbtn:hover{ color:var(--lg-navy); }
.lg-linkbtn:focus-visible{ outline:none; box-shadow:var(--lg-focus); border-radius:4px; }
.lg-note{ margin:-4px 0 0; font-size:13px; line-height:1.5; color:var(--lg-g500); }
.lg-note[hidden]{ display:none; }
.lg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; padding:12px 24px; font-family:inherit; font-weight:500; font-size:18px; color:#fff; background:var(--lg-blue); border:1px solid transparent; border-radius:12px; cursor:pointer; transition:background 120ms var(--lg-ease),transform 120ms var(--lg-ease); }
.lg-btn:hover{ background:var(--lg-navy); }
.lg-btn:active{ background:#02132f; transform:translateY(.5px); }
.lg-btn:focus-visible{ outline:none; box-shadow:var(--lg-focus); }
.lg-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.lg-help{ margin:0; font-size:14px; color:var(--lg-g500); }
.lg-tail{ display:flex; flex-direction:column; gap:14px; }
.lg-footer-m{ display:none; font-size:11px; color:var(--lg-g500); }
.lg-footer{ display:flex; justify-content:space-between; gap:16px; padding:0 64px 28px; font-size:12px; color:var(--lg-g500); }
@media (max-width:960px){
  .lg-header{ padding:calc(28px + env(safe-area-inset-top,0px)) 24px 0; }
  .lg-header img{ height:22px; }
  .lg-brand{ display:none; }
  .lg-header nav a{ font-size:13px; }
  .lg-main{ display:flex; flex-direction:column; align-items:stretch; padding:0; gap:0; }
  .lg-intro{ padding:36px 24px 0; gap:16px; max-width:none; }
  .lg-academy{ height:64px; }
  .lg-rule{ width:40px; }
  .lg-headline{ font-size:32px; line-height:1.08; }
  .lg-lead{ display:none; }
  .lg-divider{ display:none; }
  .lg-form{ padding:32px 24px calc(24px + env(safe-area-inset-bottom,0px)); gap:18px; flex:1; }
  .lg-title{ display:none; }
  .lg-title--fixo{ display:block; } /* primeiro acesso e erro do boot: sem a headline não há contexto */
  /* alvo de toque de 44px nos links sem mudar o ritmo visual */
  .lg-header nav a, .lg-row .lg-linkbtn, .lg-help a{ display:inline-flex; align-items:center; min-height:44px; margin:-12px 0; }
  .lg-check{ min-height:44px; align-items:center; }
  .lg-box{ margin-top:0; }
  .lg-tail{ margin-top:auto; text-align:center; }
  .lg-help{ font-size:13px; }
  .lg-footer{ display:none; }
  .lg-footer-m{ display:block; }
}
@media (prefers-reduced-motion:reduce){ .lg-input,.lg-box,.lg-box svg,.lg-btn{ transition:none; } }

/* ============================================================
   APP SHELL
   ============================================================ */
.app-root{ display:flex; height:100%; width:100%; overflow:hidden; background-color:var(--app-bg); background-image:var(--app-grad); background-attachment:fixed; }
.sidebar{ flex:0 0 248px; height:100%; display:flex; flex-direction:column; position:relative; z-index:2; background:var(--side-bg); border-right:1px solid var(--side-hair); backdrop-filter:blur(14px); }
.sb-brand{ display:flex; align-items:center; gap:11px; padding:20px 20px 16px; }
.sb-brand img{ height:30px; }
.sb-nav{ flex:1; overflow-y:auto; padding:6px 12px 12px; display:flex; flex-direction:column; gap:2px; }
.sb-section{ font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); padding:14px 12px 6px; }
.nav-item{ display:flex; align-items:center; gap:11px; width:100%; padding:9px 12px; border:none; background:none; cursor:pointer; border-radius:11px; color:var(--text-muted); font-size:14px; font-weight:500; text-align:left; transition:background .14s,color .14s; }
.nav-item .ni-ico{ display:flex; flex:0 0 20px; color:currentColor; opacity:.9; }
.nav-item:hover{ background:var(--hair-soft); color:var(--text-body); }
.nav-item.active{ background:var(--side-active); color:var(--side-active-fg); font-weight:600; }
.nav-item.active .ni-ico{ color:var(--accent); opacity:1; }
.nav-badge,.msg-badge{ margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--dc-danger); color:#fff; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.sb-foot{ border-top:1px solid var(--side-hair); padding:12px; display:flex; align-items:center; gap:10px; }
.sb-foot .sf-meta{ line-height:1.25; min-width:0; flex:1; }
.sb-foot .sf-name{ font-size:13px; font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-foot .sf-role{ font-size:11px; color:var(--text-muted); }
.sb-foot .sf-out{ background:none; border:none; cursor:pointer; color:var(--text-muted); padding:7px; border-radius:9px; display:flex; }
.sb-foot .sf-out:hover{ background:var(--hair-soft); color:var(--neg); }

.main{ flex:1; height:100%; overflow-y:auto; position:relative; z-index:1; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:8; display:flex; align-items:center; gap:16px; padding:16px 30px; background:var(--topbar-bg); backdrop-filter:blur(16px) saturate(150%); border-bottom:1px solid var(--hair); }
.tb-title h1{ font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.02em; color:var(--text-strong); margin:0; line-height:1.1; }
.tb-title p{ margin:2px 0 0; font-size:12.5px; color:var(--text-muted); }
.tb-spacer{ flex:1; }
.tb-search{ position:relative; display:flex; align-items:center; gap:9px; height:40px; padding:0 14px; min-width:240px; background:var(--glass-bg); border:1px solid var(--hair); border-radius:11px; color:var(--text-muted); }
.tb-search input{ border:none; background:none; outline:none; font-size:13.5px; color:var(--text-body); width:100%; font-family:var(--font-body); }
.tb-search input::placeholder{ color:var(--text-subtle); }
.tb-search-drop{ position:absolute; top:46px; left:0; right:0; max-height:60vh; overflow-y:auto; background:var(--surface-card); border:1px solid var(--hair); border-radius:12px; box-shadow:var(--glass-shadow); z-index:60; padding:6px; }
.app-root[data-theme="dark"] .tb-search-drop{ background:#0c1830; }
.tb-s-group{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-subtle); padding:8px 10px 4px; }
.tb-s-item{ padding:7px 10px; border-radius:8px; cursor:pointer; }
.tb-s-item:hover{ background:var(--side-active); }
.tb-s-label{ font-size:13.5px; color:var(--text-strong); }
.tb-s-sub{ font-size:11.5px; color:var(--text-muted); }
.tb-s-empty{ padding:14px; text-align:center; color:var(--text-muted); font-size:13px; }
.tb-icon{ position:relative; width:40px; height:40px; border-radius:11px; border:1px solid var(--hair); background:var(--glass-bg); display:flex; align-items:center; justify-content:center; color:var(--text-muted); cursor:pointer; transition:background .14s,color .14s; }
.tb-icon:hover{ color:var(--text-body); border-color:var(--border-default); }
.tb-icon .dot{ position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%; background:var(--dc-danger); border:1.5px solid var(--app-bg); }
.tb-bell .dot{ width:auto; height:15px; min-width:15px; top:4px; right:4px; padding:0 4px; border-radius:8px; color:#fff; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.notif-panel{ position:fixed; top:64px; right:22px; width:340px; max-width:92vw; max-height:72vh; overflow:auto; z-index:60; background:var(--surface-card); border:1px solid var(--glass-border); border-radius:14px; box-shadow:0 24px 56px rgba(0,0,0,.5); }
.app-root[data-theme="dark"] .notif-panel{ background:#0c1a36; }
.np-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:13px 16px; border-bottom:1px solid var(--hair); position:sticky; top:0; background:inherit; }
.np-head strong{ font-size:14px; color:var(--text-strong); }
.np-item{ padding:11px 16px; border-bottom:1px solid var(--hair-soft); cursor:pointer; transition:background .12s; }
.np-item:last-child{ border-bottom:none; }
.np-item:hover{ background:var(--hair-soft); }
.np-item.unread{ background:color-mix(in srgb,var(--accent) 9%,transparent); }
.np-item.unread .np-t::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:7px; vertical-align:middle; }
.np-t{ font-size:13.5px; font-weight:600; color:var(--text-strong); }
.np-x{ font-size:12.5px; color:var(--text-body); margin-top:2px; }
.np-when{ font-size:11px; color:var(--text-muted); margin-top:3px; }
.np-empty{ padding:34px; text-align:center; color:var(--text-muted); font-size:13px; }

.view{ flex:1; padding:26px 30px 60px; max-width:1320px; width:100%; }
.view.wide{ max-width:none; }

/* avatars */
.av{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; background:var(--accent); flex:none; border:1.5px solid var(--glass-bg); }

/* ============================================================
   PAGE HEAD + buttons + links
   ============================================================ */
.page-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:16px; flex-wrap:wrap; }
.page-head h1{ font-family:var(--font-display); font-size:24px; letter-spacing:-.02em; margin:0; color:var(--text-strong); }
.page-head .sub{ color:var(--text-muted); font-size:13.5px; margin-top:3px; }
/* a topbar já exibe o título/subtítulo do módulo — não repetir no conteúdo */
.view>.page-head>div:first-child:has(>h1){ display:none; }
.view>.page-head{ justify-content:flex-end; }
.view>.page-head:not(:has(button)):not(:has(.crm-actions)){ margin-bottom:6px; }

.btn{ display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px; border-radius:11px; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:13.5px; border:1px solid transparent; background:var(--action-bg); color:#fff; transition:all .14s; box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 32%, transparent); }
.btn:hover{ background:var(--action-bg-hover); }
.btn.ghost,.btn.subtle{ background:var(--glass-bg); color:var(--text-body); border-color:var(--hair); box-shadow:none; }
.btn.ghost:hover,.btn.subtle:hover{ border-color:var(--border-default); color:var(--text-strong); }
.btn.sm{ height:32px; padding:0 11px; font-size:12.5px; }
.btn.danger{ background:var(--dc-danger); box-shadow:none; }
.lnk{ background:none; border:none; color:var(--accent); font-size:12.5px; cursor:pointer; padding:2px 4px; }
.lnk:hover{ text-decoration:underline; }
.lnk.danger{ color:var(--neg); }
.lnk.add{ align-self:flex-start; margin-top:4px; font-weight:600; }

/* ============================================================
   GLASS CARD + KPIs
   ============================================================ */
.card,.glass{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--panel-radius); box-shadow:var(--glass-shadow); backdrop-filter:blur(var(--glass-blur)) saturate(140%); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%); }
.app-root[data-theme="dark"] .card,.app-root[data-theme="dark"] .glass{ box-shadow:var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.05); }
.card.pad,.pad{ padding:20px 22px; }
.card-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.card-head h3{ font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--text-strong); margin:0; }

.grid{ display:grid; gap:18px; } .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; } .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 16px; }
.cols-2{ grid-template-columns:repeat(2,1fr); } .cols-3{ grid-template-columns:repeat(3,1fr); } .cols-4{ grid-template-columns:repeat(4,1fr); }

/* KPI strip (financeiro .kpis/.kpi + crm .kpi-row/.kpi) */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.kpi-row.kpi-6{ grid-template-columns:repeat(6,1fr); } .kpi-row.kpi-3{ grid-template-columns:repeat(3,1fr); }
.kpi{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-lg); box-shadow:var(--glass-shadow); padding:16px 18px; }
.kpi .label,.kpi .k-label,.kpi-l{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.kpi .val,.kpi .k-val,.kpi-v{ font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-.02em; color:var(--text-strong); margin-top:10px; line-height:1; font-variant-numeric:tabular-nums; }
.kpi .val.pos{ color:var(--pos); } .kpi .val.neg{ color:var(--neg); }
.kpi-l{ margin-top:2px; }
.kpi.kpi-azul{ border-left:3px solid var(--accent); } .kpi.kpi-verde{ border-left:3px solid var(--pos); }
.kpi.kpi-vermelho{ border-left:3px solid var(--neg); } .kpi.kpi-ambar{ border-left:3px solid var(--dc-gold); }

/* ============================================================
   MARKETING — dashboard denso (inspiração iClips, tema-aware)
   ============================================================ */
.mkt-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:13px; }
.mkt-stat{ background:var(--surface-card); border:1px solid var(--hair); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:14px 15px 12px; position:relative; overflow:hidden; }
.mkt-stat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--stat,var(--accent)); }
.mkt-stat .r1{ display:flex; align-items:center; gap:11px; }
.mkt-stat .r1 .mkt-delta{ margin-left:auto; }
.mkt-stat .ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:color-mix(in srgb,var(--stat,var(--accent)) 14%,transparent); color:var(--stat,var(--accent)); }
.mkt-stat .ic svg{ width:18px; height:18px; }
.mkt-delta{ font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.mkt-delta.up{ color:var(--dc-success); background:color-mix(in srgb,var(--dc-success) 15%,transparent); }
.mkt-delta.flat{ color:var(--text-muted); background:var(--chip-bg); }
.mkt-stat .big{ font-family:var(--font-display); font-weight:800; color:var(--text-strong); font-size:30px; line-height:1; margin:0; font-variant-numeric:tabular-nums; }
.mkt-stat.compact .big{ font-size:23px; }  /* board: valores como R$ podem ser longos */
.mkt-stat .lbl{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); font-weight:700; margin-top:9px; }

/* colunas do kanban do Marketing: acento e contador coloridos por etapa (azul/âmbar/verde) */
.kan-col h3{ border-left-color:var(--col-accent,var(--accent)); }
.mkt-board .kan-col h3 .count{ background:color-mix(in srgb,var(--col-accent,var(--accent)) 16%,transparent); color:var(--col-accent,var(--accent)); }

.mkt-region{ display:grid; grid-template-columns:1.8fr 1fr; gap:13px; margin-bottom:13px; }
@media (max-width:900px){ .mkt-region{ grid-template-columns:1fr; } .mkt-stats{ grid-template-columns:repeat(2,1fr); } }
.mkt-panel{ background:var(--surface-card); border:1px solid var(--hair); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:16px 18px; }
.mkt-panel .ph{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.mkt-panel .ph h4{ font-family:var(--font-display); color:var(--text-strong); font-size:15px; font-weight:800; margin:0; letter-spacing:-.01em; }
.mkt-panel .ph .tot{ font-size:12px; color:var(--text-muted); }
.mkt-panel .ph .tot b{ color:var(--text-strong); font-variant-numeric:tabular-nums; }

.mkt-hb{ display:flex; flex-direction:column; gap:12px; }
.mkt-hbrow{ display:grid; grid-template-columns:118px 1fr 28px; align-items:center; gap:12px; }
.mkt-hbrow .k{ font-size:12.5px; color:var(--text-body); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mkt-hbtrack{ height:13px; border-radius:7px; background:var(--track,rgba(120,140,175,.14)); overflow:hidden; }
.mkt-hbfill{ height:100%; border-radius:7px; background:linear-gradient(90deg,var(--dc-blue-vibrant),var(--dc-blue-light)); position:relative; min-width:2px; }
.mkt-hbfill.cap::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:9px; background:var(--dc-gold); border-radius:0 7px 7px 0; }
.mkt-hbrow .v{ font-size:12.5px; font-weight:800; color:var(--text-strong); text-align:right; font-variant-numeric:tabular-nums; }

.mkt-donut{ display:flex; align-items:center; gap:16px; }
.mkt-legend{ display:flex; flex-direction:column; gap:9px; flex:1; }
.mkt-lg{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-body); }
.mkt-lg .sw{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.mkt-lg .lgv{ margin-left:auto; font-weight:800; color:var(--text-strong); font-variant-numeric:tabular-nums; }

.mkt-day{ display:flex; align-items:flex-end; gap:8px; height:96px; }
.mkt-dcol{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; justify-content:flex-end; height:100%; }
.mkt-dn{ font-size:11px; font-weight:800; color:var(--text-strong); font-variant-numeric:tabular-nums; }
.mkt-dbar{ width:100%; max-width:34px; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,var(--dc-blue-light),var(--dc-blue-vibrant)); }
.mkt-dbar.dim{ background:var(--track,rgba(120,140,175,.14)); }
.mkt-dbar.peak{ background:linear-gradient(180deg,var(--dc-gold),#cf9b45); }
.mkt-dl{ font-size:10px; color:var(--text-muted); font-weight:600; }

.mkt-av{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:11.5px; font-weight:800; color:#fff; flex-shrink:0; }
.mkt-who{ display:flex; align-items:center; gap:11px; }
.mkt-who .rank{ font-size:11px; font-weight:800; color:var(--text-subtle); width:16px; }
.mkt-who .nm{ color:var(--text-strong); font-weight:600; }
.mkt-who .rl{ color:var(--text-muted); font-size:11.5px; }
.mkt-track{ display:inline-block; width:64px; height:6px; border-radius:6px; background:var(--track,rgba(120,140,175,.14)); overflow:hidden; vertical-align:middle; }
.mkt-track > span{ display:block; height:100%; border-radius:6px; }
.mkt-badge{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; }
.mkt-badge.ok{ color:var(--dc-success); background:color-mix(in srgb,var(--dc-success) 14%,transparent); }
.mkt-badge.off{ color:var(--text-muted); background:var(--chip-bg); }
.mkt-totb{ font-family:var(--font-display); font-weight:800; color:var(--text-strong); font-size:15px; font-variant-numeric:tabular-nums; }
/* tabela dentro de card com overflow:hidden — cabeçalho NÃO gruda (senão corta a 1ª linha) */
table.tbl.mkt-flat th{ position:static; top:auto; z-index:auto; }

/* aba LISTA — abas de status, toolbar e células */
.mkt-stabs{ display:flex; gap:2px; border-bottom:1px solid var(--hair); margin-bottom:14px; overflow-x:auto; }
.mkt-stab{ display:flex; align-items:center; gap:2px; padding:10px 14px; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; background:transparent; border:0; border-bottom:2px solid transparent; white-space:nowrap; }
.mkt-stab .c{ font-size:11px; font-weight:800; background:var(--chip-bg); color:var(--text-body); border-radius:20px; padding:1px 8px; font-variant-numeric:tabular-nums; }
.mkt-stab:hover{ color:var(--text-strong); }
.mkt-stab.on{ color:var(--text-strong); border-bottom-color:var(--dc-gold); }
.mkt-stab.on .c{ background:var(--accent); color:#fff; }
.mkt-lista-tools{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.mkt-seg{ display:flex; background:var(--surface-card); border:1px solid var(--hair); border-radius:9px; overflow:hidden; }
.mkt-seg button{ background:transparent; border:0; padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--text-muted); cursor:pointer; }
.mkt-seg button.on{ background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); }
.mkt-reg{ font-size:12px; color:var(--text-muted); font-weight:700; }
.mkt-reg b{ color:var(--text-strong); font-variant-numeric:tabular-nums; }
.mkt-search{ margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--surface-card); border:1px solid var(--hair); border-radius:9px; padding:7px 12px; min-width:220px; }
.mkt-search .input{ font-size:13px; color:var(--text-strong); }
.mkt-lno{ font-family:var(--font-display); font-weight:400; color:var(--accent); font-size:13px; font-variant-numeric:tabular-nums; }
.mkt-ldata{ font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.mkt-ldata.ok{ color:var(--dc-success); font-weight:500; }

/* Inscritos por evento (formato B): chips de filtro discretos */
.fin-chips{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:10px 0 12px; }
.fin-chip{ font-size:12px; border:1px solid var(--hair); background:transparent; color:var(--text-muted); border-radius:999px; padding:4px 12px; font-family:inherit; cursor:pointer; }
.fin-chip.on{ background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); border-color:transparent; font-weight:600; }
.fin-chip.mais{ border-style:dashed; }

/* ===== Painel "Aa" — aparência por pessoa (localStorage do navegador dela) ===== */
.tb-aa{ font-size:13px; font-weight:700; letter-spacing:-.02em; }
.uip-panel{ position:absolute; top:calc(100% + 10px); right:0; width:294px; background:var(--surface-card); border:1px solid var(--hair); border-radius:14px; box-shadow:var(--shadow-lg); padding:14px 16px; z-index:300; }
.app-root[data-theme="dark"] .uip-panel{ background:#0c1a36; }
.uip-title{ font-weight:700; font-size:13.5px; color:var(--text-strong); }
.uip-hint{ font-size:11.5px; color:var(--text-muted); margin:2px 0 10px; }
.uip-row{ margin-bottom:10px; }
.uip-lab{ font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:5px; }
.uip-opts{ display:flex; gap:5px; flex-wrap:wrap; }
.uip-opts button{ border:1px solid var(--hair); background:transparent; color:var(--text-body); border-radius:8px; padding:5px 11px; font-size:12.5px; font-family:inherit; cursor:pointer; }
.uip-opts button.on{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.uip-swatches{ display:grid; grid-template-columns:repeat(8,1fr); gap:8px; justify-items:center; }
.uip-sw{ width:26px; height:26px; border-radius:50%; border:none; padding:0; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); transition:transform .12s; }
.uip-sw:hover{ transform:scale(1.16); }
.uip-sw.on{ outline:2px solid var(--text-strong); outline-offset:2px; }
.uip-reset{ width:100%; margin-top:2px; border:1px dashed var(--hair); background:transparent; color:var(--text-muted); border-radius:8px; padding:6px; font-size:12px; font-family:inherit; cursor:pointer; }
/* fonte escolhida */
.app-root[data-fonte="loos"]{ --font-body:"Loos",system-ui,-apple-system,"Segoe UI",sans-serif; --font-display:"Aventa","Arial Narrow",system-ui,sans-serif; }
.app-root[data-fonte="sistema"]{ --font-body:system-ui,-apple-system,"Segoe UI",sans-serif; --font-display:system-ui,-apple-system,"Segoe UI",sans-serif; }
/* destaques em negrito (deixa o navegador engrossar os pesos intermediários de novo) */
.app-root[data-peso="negrito"]{ font-synthesis-weight:auto; }
/* cor de destaque (tem versão pro claro e pro escuro) */
.app-root[data-acento="verde"]{ --accent:#1e8e63; }
.app-root[data-theme="dark"][data-acento="verde"]{ --accent:#2fbe8a; }
.app-root[data-acento="dourado"]{ --accent:#c98a3a; }
.app-root[data-theme="dark"][data-acento="dourado"]{ --accent:#e8b461; }
.app-root[data-acento="roxo"]{ --accent:#6d4fd8; }
.app-root[data-theme="dark"][data-acento="roxo"]{ --accent:#9b82ff; }
.mkt-pj .nm{ color:var(--text-strong); font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:7px; }
.mkt-pj .sb{ color:var(--text-muted); font-size:11.5px; margin-top:1px; }
.mkt-tag-alt{ font-size:9.5px; font-weight:800; color:var(--dc-gold); background:color-mix(in srgb,var(--dc-gold) 16%,transparent); border-radius:4px; padding:1px 6px; letter-spacing:.04em; }
.mkt-prog{ display:flex; align-items:center; gap:9px; }
.mkt-ptrack{ width:96px; height:6px; border-radius:6px; background:var(--track,rgba(120,140,175,.14)); overflow:hidden; }
.mkt-ptrack > span{ display:block; height:100%; border-radius:6px; }
.mkt-pv{ font-size:11.5px; font-weight:700; color:var(--text-body); font-variant-numeric:tabular-nums; width:34px; }
.mkt-lbadge{ font-size:11px; font-weight:800; letter-spacing:.03em; padding:4px 10px; border-radius:6px; white-space:nowrap; }
.mkt-lbadge.blue{ color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); }
.mkt-lbadge.amber{ color:var(--dc-gold); background:color-mix(in srgb,var(--dc-gold) 16%,transparent); }
.mkt-lbadge.ok{ color:var(--dc-success); background:color-mix(in srgb,var(--dc-success) 14%,transparent); }

/* cards do kanban (estilo iClips) — barra de status, categoria, chips, rodapé */
.kan-card.mkt-kc{ position:relative; overflow:hidden; padding:12px 13px 11px; }
.kan-card.mkt-kc::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--st,var(--accent)); }
.mkt-ribbon{ display:inline-flex; align-items:center; gap:5px; background:color-mix(in srgb,var(--dc-gold) 20%,transparent); color:var(--dc-gold); font-weight:800; font-size:10px; letter-spacing:.05em; padding:3px 8px; border-radius:6px; margin-bottom:8px; }
.mkt-cat{ display:flex; align-items:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); margin-bottom:5px; }
.mkt-cat .no{ margin-left:auto; color:var(--text-subtle); font-variant-numeric:tabular-nums; letter-spacing:0; }
.kan-card.mkt-kc .mkt-kt{ font-size:14px; font-weight:700; color:var(--text-strong); line-height:1.3; margin-bottom:9px; }
.mkt-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.mkt-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--text-body); background:var(--chip-bg); border:1px solid var(--hair-soft); border-radius:6px; padding:2px 7px; }
.mkt-chip.brief{ color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border-color:transparent; }
.mkt-chip.prod{ color:var(--dc-blue,#0043D8); background:color-mix(in srgb,var(--dc-blue,#0043D8) 12%,transparent); border-color:transparent; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mkt-chip.prazo.late{ color:var(--dc-danger); background:color-mix(in srgb,var(--dc-danger) 14%,transparent); border-color:transparent; font-weight:700; }
.mkt-foot{ display:flex; align-items:center; gap:8px; padding-top:9px; border-top:1px solid var(--hair-soft); }
.mkt-foot .mkt-av{ width:26px; height:26px; border-radius:8px; font-size:10.5px; }
.mkt-foot .mkt-badge{ margin-left:auto; }
.mkt-badge.mult{ color:var(--dc-gold); background:color-mix(in srgb,var(--dc-gold) 16%,transparent); }
.mkt-metrics-card{ display:flex; gap:14px; padding-top:9px; margin-top:9px; border-top:1px solid var(--hair-soft); }
.mkt-metrics-card .mv{ font-family:var(--font-display); font-weight:800; color:var(--text-strong); font-size:15px; font-variant-numeric:tabular-nums; }
.mkt-metrics-card .ml{ font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }

/* ============================================================
   TABLES
   ============================================================ */
table.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; background:transparent; }
table.tbl th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); padding:11px 16px; border-bottom:1px solid var(--hair);
  position:sticky; top:calc(var(--topbar-h,74px) - 1px); z-index:5; background:var(--tbl-head-bg); }
/* dentro de modal/diálogo o cabeçalho gruda no topo do próprio modal (não na topbar do app) */
.modal table.tbl th{ top:0; }
table.tbl td{ padding:13px 16px; border-bottom:1px solid var(--hair-soft); color:var(--text-body); vertical-align:middle; }
table.tbl tbody tr:last-child td{ border-bottom:none; }
table.tbl tbody tr{ transition:background .12s; }
table.tbl tbody tr:hover td{ background:var(--hair-soft); }
table.tbl td .strong,table.tbl td strong{ color:var(--text-strong); font-weight:600; }
table.tbl tr.click{ cursor:pointer; }
table.tbl tr.u-inativo td{ opacity:.5; }
table.tbl tr.u-inativo td:last-child{ opacity:1; }
table.tbl tr.u-inativo strong{ text-decoration:line-through; }
/* Tabela DENSA (muitas colunas num card estreito, ex.: painel de gestão): o padding padrão de
   16px por lado gasta 32px POR CÉLULA — com 9 colunas são 288px só de respiro, e a tabela estoura
   o card. A compacta corta isso pela metade e deixa o cabeçalho quebrar linha. */
table.tbl.compacta th{ padding:8px 9px; letter-spacing:.04em; font-size:10.5px; line-height:1.25; white-space:normal;
  position:static; }  /* cabeçalho NÃO gruda: a tabela é curta e dentro de um card — grudado, ele flutua por cima das próprias linhas */
table.tbl.compacta td{ padding:9px 9px; font-size:12.5px; }
.tbl-cap{ padding:11px 16px; font-size:12.5px; color:var(--text-muted); border-bottom:1px solid var(--hair); }
.pagbar{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--hair); font-size:13px; flex-wrap:wrap; }
.pag-ind{ font-size:12.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.btn:disabled,.btn[disabled]{ opacity:.4; cursor:not-allowed; pointer-events:none; }

/* ============================================================
   CHIPS / BADGES / STATUS
   ============================================================ */
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; padding:4px 10px; border-radius:99px; background:var(--chip-bg); color:var(--chip-fg); white-space:nowrap; }
.tag{ font-size:11px; background:var(--chip-bg); color:var(--chip-fg); padding:2px 8px; border-radius:6px; }
.badge{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; }
.badge.b-nao{ background:var(--chip-bg); color:var(--text-muted); }
.badge.b-agu{ background:color-mix(in srgb,var(--dc-gold) 22%,transparent); color:#d8a14a; }
.badge.b-apr{ background:color-mix(in srgb,var(--pos) 18%,transparent); color:var(--pos); }
.badge.b-env{ background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); }
.badge.b-nap{ background:color-mix(in srgb,var(--neg) 16%,transparent); color:var(--neg); }
.st{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:99px; }
.st .d{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.st.ok{ color:var(--pos); background:color-mix(in srgb,var(--pos) 14%,transparent); }
.st.warn{ color:#d8a14a; background:color-mix(in srgb,var(--dc-gold) 22%,transparent); }
.st.danger{ color:var(--neg); background:color-mix(in srgb,var(--neg) 15%,transparent); }
.st.info{ color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,transparent); }

/* ============================================================
   FORMS
   ============================================================ */
.input,select.input,textarea.input{ width:100%; height:42px; padding:0 13px; font-size:14px; font-family:var(--font-body); color:var(--text-strong);
  background:var(--glass-bg); border:1px solid var(--hair); border-radius:11px; outline:none; transition:border-color .15s,box-shadow .15s; }
.app-root[data-theme="dark"] .input,.app-root[data-theme="dark"] select.input,.app-root[data-theme="dark"] textarea.input{ background:rgba(255,255,255,.06); color:#eaf2ff; }
textarea.input{ height:auto; padding:11px 13px; resize:vertical; }
.input:focus,select.input:focus,textarea.input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent); }
.input::placeholder,textarea.input::placeholder{ color:var(--text-subtle); }
/* variante compacta pra toolbars (mesma altura do .btn.sm) — Marketing/Regulatório iguais ao CRM */
.input.sm,select.input.sm{ height:32px; padding:0 10px; font-size:12.5px; border-radius:9px; }
select.input option{ color:#11151b; }
.fld{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.fld>span{ font-size:12.5px; color:var(--text-muted); font-weight:600; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-bg{ position:fixed; inset:0; background:rgba(2,8,22,.62); display:grid; place-items:center; padding:20px; z-index:50; backdrop-filter:blur(3px); }
.modal{ background:var(--surface-card); border:1px solid var(--glass-border); border-radius:18px; width:100%; max-width:560px; max-height:90vh; overflow:auto; box-shadow:0 40px 90px rgba(0,0,0,.5); }
.app-root[data-theme="dark"] .modal{ background:#0c1a36; }
.modal .mhead{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--hair); position:sticky; top:0; background:inherit; }
.modal .mhead h3{ margin:0; font-size:18px; font-family:var(--font-display); color:var(--text-strong); }
.modal .mbody{ padding:18px 20px; }
.modal .mfoot{ padding:14px 20px; border-top:1px solid var(--hair); display:flex; gap:10px; justify-content:flex-end; position:sticky; bottom:0; background:inherit; }
.x{ background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-muted); line-height:1; }

/* faixa "recuperar rascunho" no topo do modal (core.js salva o que se digita) */
.draft-faixa{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#FFF7E8; border:1px solid #E8B461; border-radius:9px;
  padding:8px 12px; margin-bottom:14px; font-size:12.5px; color:#7a5a1c; }
.draft-faixa span{ flex:1; min-width:160px; }

/* editor de e-mail: modal LARGO em 2 colunas — escreve à esquerda, prévia ao vivo inteira à direita */
.modal:has(.email-editor-grid){ max-width:1280px; }
.email-editor-grid{ display:grid; grid-template-columns:minmax(340px,430px) 1fr; gap:24px; align-items:start; }
@media (max-width:980px){ .email-editor-grid{ grid-template-columns:1fr; } }
.email-prev-frame{ width:100%; border:1px solid var(--line); border-radius:12px; background:#f4f5f7; height:430px; }
.email-editor-grid .email-prev-frame{ height:calc(90vh - 230px); min-height:480px; }
.email-editor-grid .email-prev-col{ position:sticky; top:0; }
.x:hover{ color:var(--text-strong); }

/* ============================================================
   SEGMENTED TABS (CRM .crm-tabs etc.)
   ============================================================ */
.crm-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--hair); margin-bottom:18px; }
.crm-tab{ position:relative; background:none; border:none; padding:10px 16px; font-size:14px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1px; }
.crm-tab:hover{ color:var(--text-strong); }
.crm-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
.tab-badge{ display:inline-block; min-width:17px; height:17px; line-height:17px; text-align:center; background:var(--dc-danger); color:#fff; border-radius:9px; font-size:11px; font-weight:700; padding:0 5px; margin-left:6px; vertical-align:middle; }
.crm-actions, .fin-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.crm-pipe-sel{ max-width:200px; font-weight:700; } .crm-owner-sel{ max-width:185px; } .crm-met-sel{ max-width:200px; } .crm-serv-sel{ max-width:200px; }
/* barra do funil compacta: UMA linha sempre — selects na altura dos botões .sm e
   encolhendo antes de qualquer quebra; em tela muito estreita a barra rola de lado */
select.crm-pipe-sel,select.crm-owner-sel,select.crm-serv-sel{ height:32px; font-size:12.5px; padding-top:0; padding-bottom:0; flex:0 1 auto; min-width:110px; }
.crm-actions{ flex-wrap:nowrap; overflow-x:auto; }
.crm-actions .btn{ flex:none; white-space:nowrap; }
.tag.tag-serv{ background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); font-weight:600; }

/* ============================================================
   KANBAN (our markup)
   ============================================================ */
/* board rola livre (um scroll só, vertical+horizontal); a faixa de estágios fica fixa no topo
   (sticky) enquanto os cards passam por baixo. align-items:stretch → colunas com a mesma altura,
   área de soltar até o fim. Altura do board definida via JS (preenche o resto da tela). */
.kanban{ display:flex; gap:16px; overflow:auto; padding-bottom:10px; align-items:stretch; }
/* coluna estica até a mais alta → dá pra soltar o card em qualquer altura da coluna vizinha */
.kan-col > .kan-card:last-child{ margin-bottom:2px; }
/* barra de rolagem horizontal no TOPO do kanban (sincronizada com o quadro) */
.kan-scroll-topo{ overflow-x:auto; overflow-y:hidden; height:14px; margin:0 0 8px; border-radius:99px; }
.kan-scroll-topo::-webkit-scrollbar{ height:12px; }
.kan-scroll-topo::-webkit-scrollbar-track{ background:var(--chip-bg); border-radius:99px; }
.kan-scroll-topo::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:99px; }
.kan-scroll-topo > div{ height:1px; }
.kan-col{ flex:0 0 280px; display:flex; flex-direction:column; gap:10px; min-height:100%; }
/* card nunca é ESPREMIDO pra caber na altura da coluna — transborda e a coluna/board rolam */
.kan-col > *{ flex-shrink:0; }
.kan-col-head{ position:sticky; top:0; z-index:3; background:var(--app-bg); padding-bottom:6px; margin-bottom:-2px; }
.kan-col h3{ display:flex; align-items:flex-start; gap:8px; margin:0 0 4px; padding:9px 12px; font-size:12.5px; font-weight:700; color:var(--text-strong); letter-spacing:-.01em; line-height:1.3;
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:10px; border-left:3px solid var(--accent); }
.app-root[data-theme="dark"] .kan-col h3{ box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.kan-col h3 > span:first-child{ flex:1; min-width:0; }
.kan-col h3 .count{ margin-left:8px; flex:none; font-size:11px; font-weight:700; color:var(--text-muted); background:var(--chip-bg); border-radius:99px; padding:2px 8px; }
.kan-col.drag-over{ outline:2px dashed var(--accent); outline-offset:4px; border-radius:12px; }
/* fase final ("Pronto") do Regulatório: só a zona de soltar — os cards vivem na aba Prontos */
.kan-col.kan-final{ flex:0 0 200px; }
.kan-col.kan-final h3{ border-left-color:var(--dc-success); }
.kan-col.kan-final h3 .count{ background:color-mix(in srgb,var(--dc-success) 18%,transparent); color:var(--dc-success); }
.kan-final-hint{ font-size:12px; line-height:1.5; color:var(--text-muted); padding:12px; border:1.5px dashed var(--hair); border-radius:10px; text-align:center; }
.kan-col-sub{ font-size:12px; font-weight:700; color:var(--accent); margin:-4px 2px 8px; }
.kan-col.col-ganho h3 .count{ background:color-mix(in srgb,var(--pos) 20%,transparent); color:var(--pos); }
.kan-col.col-perdido h3 .count{ background:color-mix(in srgb,var(--neg) 18%,transparent); color:var(--neg); }
.kan-card{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:14px; box-shadow:var(--glass-shadow); padding:13px 14px; cursor:grab; transition:transform .1s,border-color .14s; }
.app-root[data-theme="dark"] .kan-card{ box-shadow:var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.05); }
.kan-card:hover{ border-color:var(--border-default); transform:translateY(-1px); }
.kan-card .t{ display:flex; align-items:center; gap:5px; font-size:14px; font-weight:600; color:var(--text-strong); line-height:1.3; }
.kan-card .m{ font-size:12.5px; color:var(--text-muted); margin-top:4px; }
.kan-card .val{ font-weight:700; color:var(--text-strong); font-size:13px; margin-top:6px; }
.kan-card .tags{ margin-top:8px; display:flex; gap:5px; flex-wrap:wrap; }
.kan-card-foot{ font-size:11px; color:var(--text-muted); margin-top:9px; padding-top:7px; border-top:1px dashed var(--hair); }
.temp-dot{ font-size:9px; line-height:1; }
.kan-card.temp-frio{ border-left:3px solid var(--accent); } .kan-card.temp-morno{ border-left:3px solid var(--dc-gold); } .kan-card.temp-quente{ border-left:3px solid var(--neg); }
.kan-card.temp-frio:hover{ background:color-mix(in srgb,var(--accent) 10%,var(--glass-bg)); }
.kan-card.temp-morno:hover{ background:color-mix(in srgb,var(--dc-gold) 10%,var(--glass-bg)); }
.kan-card.temp-quente:hover{ background:color-mix(in srgb,var(--neg) 10%,var(--glass-bg)); }

/* ============================================================
   MISC + CRM-specific blocks
   ============================================================ */
.muted{ color:var(--text-muted); } .flex,.flex-line{ display:flex; align-items:center; gap:10px; } .between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.spacer{ flex:1; } .row-actions{ display:flex; gap:6px; }
.empty{ text-align:center; color:var(--text-muted); padding:50px 20px; font-size:14px; }
.toast{ position:fixed; bottom:22px; right:22px; background:var(--dc-navy); color:#fff; padding:12px 18px; border-radius:12px; box-shadow:var(--shadow-lg); z-index:80; font-size:14px; border:1px solid rgba(255,255,255,.12); }
.bar-track{ height:8px; border-radius:99px; background:var(--track); overflow:hidden; } .bar-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.banner{ display:flex; gap:12px; padding:14px 16px; border-radius:14px; align-items:flex-start; }
.banner.warn{ background:color-mix(in srgb,var(--dc-gold) 16%,transparent); border:1px solid color-mix(in srgb,var(--dc-gold) 40%,transparent); }

.crm-kv{ display:flex; gap:12px; padding:6px 0; font-size:13px; border-bottom:1px solid var(--hair-soft); }
.crm-kv .k{ color:var(--text-muted); min-width:150px; font-size:12.5px; } .crm-kv .v{ font-weight:600; color:var(--text-strong); }
/* ===== Detalhe do negócio: seções com separador sutil, tipografia e botões UNIFORMES
   (pedido 2026-07-22: letras e botões de tamanhos misturados deixavam o card bagunçado) */
.crm-sub{ margin-top:16px; padding-top:14px; border-top:1px solid var(--hair-soft); }
.crm-sub:empty{ display:none; } /* seção async vazia (ex.: Reuniões sem itens) não deixa risco órfão */
.crm-sub h4{ margin:0 0 4px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); }
.crm-sub .muted{ font-size:12px; line-height:1.45; }
.crm-sub .btn{ height:32px; padding:0 13px; font-size:12.5px; border-radius:9px; box-shadow:none; } /* TODOS os botões de seção do mesmo tamanho, sem brilho */
.crm-sub .tag{ font-size:12px; }
.crm-line{ font-size:13px; padding:4px 0; border-bottom:1px solid var(--hair-soft); }
.ativ-form{ background:var(--surface-sunken); border:1px solid var(--hair); border-radius:var(--radius-sm); padding:12px; margin-bottom:12px; }
/* compositor de notas COMPACTO: 1 linha fechada; o formulário só abre ao clicar */
.ativ-abrir{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:var(--surface-sunken); border:1px dashed var(--hair); border-radius:9px; padding:9px 12px; font-size:12.5px; color:var(--text-muted); cursor:pointer; font-family:inherit; margin-bottom:12px; }
.ativ-abrir:hover{ border-color:var(--accent); color:var(--accent); }
.crm-sub .timeline{ max-height:280px; overflow-y:auto; padding-right:4px; }
/* "Área do cliente": seção fechada que agrupa ficha, documentos e contatos */
.crm-expand{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--surface-sunken); border:1px solid var(--hair); border-radius:10px; padding:11px 14px; font-size:13px; font-weight:600; color:var(--text-strong); cursor:pointer; font-family:inherit; flex-wrap:wrap; }
.crm-expand:hover{ border-color:var(--accent); }
.crm-expand .muted{ font-size:11.5px; }
.crm-expand .chev{ margin-left:auto; color:var(--text-muted); transition:transform .15s; }
.crm-expand.aberto .chev{ transform:rotate(180deg); }
.crm-expand + div > .crm-sub:first-child{ border-top:none; padding-top:6px; } /* 1º bloco interno sem risco duplicado */
/* modal Editar negócio: mesmo padrão do detalhe (títulos discretos, botões uniformes) */
.form-sec{ margin:18px 0 8px; padding-top:14px; border-top:1px solid var(--hair-soft); font-size:10.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.09em; }
.crm-form .btn{ height:32px; padding:0 13px; font-size:12.5px; border-radius:9px; box-shadow:none; }
.timeline{ display:flex; flex-direction:column; gap:12px; }
/* To Do — cards menores, lado a lado */
.todo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(400px,1fr)); gap:14px; align-items:start; }
@media (max-width:840px){ .todo-grid{ grid-template-columns:1fr; } }
.todo-card{ padding:15px 16px; font-size:13px; }
.todo-card .fld{ margin-bottom:8px; }
/* To Do do Regulatório — linhas finas de largura inteira com nº de prioridade */
.reg-todo-lista{ display:flex; flex-direction:column; gap:8px; max-width:1060px; }
.reg-todo-row{ display:flex; align-items:center; gap:14px; background:var(--surface-card); border:1px solid var(--hair); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-sm); cursor:pointer; transition:border-color .15s; }
.reg-todo-row:hover{ border-color:var(--accent); }
.reg-todo-pri{ flex-shrink:0; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:15px; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); font-variant-numeric:tabular-nums; }
.reg-todo-row.top .reg-todo-pri{ background:var(--accent); color:#fff; }
.reg-todo-pri.done{ background:color-mix(in srgb,var(--pos,#1e8e63) 14%,transparent); color:var(--pos,#1e8e63); font-size:14px; }
.reg-todo-main{ flex:1; min-width:0; }
.reg-todo-main .t{ font-weight:700; font-size:14px; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reg-todo-main .ctx{ font-size:12px; color:var(--text-muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reg-todo-meta{ display:flex; align-items:center; gap:6px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.reg-todo-row[draggable="true"]{ cursor:grab; }
.reg-todo-row.arrastando{ opacity:.35; }
.reg-todo-row.alvo{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
@media (max-width:640px){
  .reg-todo-row{ flex-wrap:wrap; row-gap:6px; }
  .reg-todo-main{ flex:1 1 calc(100% - 96px); }
  .reg-todo-meta{ width:100%; justify-content:flex-start; padding-left:48px; }
}

/* ---- Carteira do Regulatório: mestre-detalhe (lista + painel na tela cheia) ---- */
.cart-split{ display:grid; grid-template-columns:330px 1fr; gap:0; height:calc(100vh - 320px); min-height:460px;
  border:1px solid var(--hair); border-radius:14px; overflow:hidden; background:var(--surface-card); box-shadow:var(--shadow-sm); }
.cart-list{ border-right:1px solid var(--hair); overflow-y:auto; background:var(--surface-sunken); }
.cart-cli{ padding:11px 14px; border-bottom:1px solid var(--hair-soft); cursor:pointer; transition:background .12s; }
.cart-cli:hover{ background:var(--hair-soft); }
.cart-cli.sel{ background:var(--side-active); box-shadow:inset 3px 0 0 var(--accent); }
.cart-cli .cc-nome{ font-weight:600; font-size:13.5px; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-cli .cc-meta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:5px; }
.cart-cli .cc-sub{ font-size:11.5px; color:var(--text-muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-list-empty{ padding:22px 16px; color:var(--text-muted); font-size:13px; }
.cart-detail{ overflow-y:auto; padding:20px 24px; min-width:0; }
.cart-detail-empty{ height:100%; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--text-muted); font-size:14px; padding:30px; }
.cart-ficha-cols{ display:grid; grid-template-columns:1.35fr 1fr; gap:22px; align-items:start; }
.cart-sec-h{ font-size:13px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--text-muted); margin:2px 0 10px; display:flex; align-items:center; gap:8px; }
@media (max-width:1000px){
  .cart-split{ grid-template-columns:1fr; height:auto; min-height:0; }
  .cart-list{ border-right:0; border-bottom:1px solid var(--hair); max-height:280px; }
  .cart-ficha-cols{ grid-template-columns:1fr; }
}
.todo-card .timeline{ max-height:190px; overflow-y:auto; gap:9px; padding-right:4px; }
.todo-card .timeline .tl-top strong{ font-size:12.5px; }
.tl-item{ display:flex; gap:11px; } .tl-ico{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--chip-bg); display:grid; place-items:center; font-size:14px; }
.tl-body{ flex:1; min-width:0; } .tl-top{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; } .tl-top strong{ font-size:13.5px; color:var(--text-strong); }
.tl-text{ font-size:13px; color:var(--text-body); margin:2px 0 3px; white-space:pre-wrap; word-break:break-word; } .tl-vence{ font-size:12px; color:var(--accent); margin:2px 0; }
.agenda{ max-width:760px; } .ag-group{ margin-bottom:18px; }
.ag-head{ display:flex; align-items:center; gap:8px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; font-weight:800; color:var(--text-muted); margin-bottom:8px; }
.ag-head.ag-atras{ color:var(--neg); } .ag-head.ag-hoje{ color:var(--accent); }
.ag-count{ background:var(--chip-bg); color:var(--text-muted); border-radius:20px; padding:1px 8px; font-size:11px; }
.tarefa-row{ display:flex; align-items:flex-start; gap:10px; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:7px; box-shadow:var(--glass-shadow); }
.tarefa-row.feita{ opacity:.55; } .tarefa-row.feita .tarefa-top strong{ text-decoration:line-through; }
.tarefa-ico{ font-size:15px; } .tarefa-main{ flex:1; min-width:0; } .tarefa-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .tarefa-top strong{ color:var(--text-strong); }
.tarefa-alvo{ font-size:11.5px; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); padding:1px 8px; border-radius:20px; }
.tarefa-meta{ font-size:12.5px; color:var(--text-muted); margin-top:2px; } .tarefa-meta.venc{ color:var(--neg); font-weight:600; }
.funis-list{ display:flex; flex-direction:column; gap:12px; } .funil-card{ border:1px solid var(--hair); border-radius:var(--radius-sm); padding:12px 14px; }
.funil-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; } .funil-head strong{ font-size:15px; color:var(--text-strong); }
.est-box{ display:flex; flex-direction:column; gap:4px; } .est-row{ display:flex; align-items:center; gap:8px; font-size:13px; padding:3px 0; }
.est-dot{ width:9px; height:9px; border-radius:50%; background:var(--border-default); flex:none; } .est-dot.est-ganho{ background:var(--pos); } .est-dot.est-perdido{ background:var(--neg); } .est-dot.est-aberto{ background:var(--accent); }
.ac{ position:relative; } .ac-drop{ position:absolute; left:0; right:0; top:100%; z-index:5; background:var(--surface-card); border:1px solid var(--hair); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); max-height:220px; overflow:auto; margin-top:2px; }
.app-root[data-theme="dark"] .ac-drop{ background:#0c1a36; }
.ac-opt{ padding:8px 11px; font-size:13.5px; cursor:pointer; color:var(--text-body); } .ac-opt:hover{ background:var(--hair-soft); color:var(--accent); }
.aviso-nutrir{ background:color-mix(in srgb,var(--dc-gold) 14%,transparent); border:1px solid color-mix(in srgb,var(--dc-gold) 34%,transparent); color:#d8a14a; border-radius:var(--radius-sm); padding:9px 11px; font-size:13px; margin-top:10px; }
.perdido-box{ background:var(--surface-sunken); border:1px solid var(--hair); border-radius:var(--radius-sm); padding:11px; }
.nutrir-row{ padding:9px 0; border-bottom:1px solid var(--hair-soft); }
.aud-item{ padding:11px 12px; border:1px solid var(--hair); border-radius:var(--radius-sm); background:var(--glass-bg); margin-bottom:8px; }
.aud-item strong{ color:var(--text-strong); font-size:13.5px; }
.aud-item a.btn{ text-decoration:none; }
.nutrir-row.click{ cursor:pointer; padding:9px 11px; border-radius:8px; margin:0 -5px; transition:background .12s; }
.nutrir-row.click:hover{ background:var(--hair-soft); }
.nutrir-go{ font-size:11.5px; color:var(--accent); font-weight:600; white-space:nowrap; }

.corredor-bar{ display:flex; align-items:center; gap:12px; height:46px; padding:0 18px; background:var(--glass-bg); border-bottom:1px solid var(--hair); }
.corredor-bar strong{ font-size:14px; color:var(--text-strong); }
.placeholder-page{ display:grid; place-items:center; min-height:60vh; text-align:center; color:var(--text-muted); }
.placeholder-page .big{ font-size:46px; margin-bottom:8px; }

/* ============================================================
   MÓDULO: CRM (container das abas)
   ============================================================ */
.crm-body{ display:block; } .tl-empty{ color:var(--text-muted); font-size:13px; }

/* ============================================================
   MÓDULO: Pedidos (cards)
   ============================================================ */
.prio-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.prio-dot.prio-alta{ background:var(--neg); } .prio-dot.prio-media{ background:var(--dc-gold); } .prio-dot.prio-baixa{ background:var(--accent); }
.tag.ped-setor{ background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); font-weight:600; }
.ped-card .m{ margin-top:7px; }

/* ============================================================
   MÓDULO: Regulatório (cards ricos, etiquetas, comentários, anexos)
   ============================================================ */
.kanban.resizable-cols{ align-items:stretch; }
.kanban.resizable-cols .kan-col{ position:relative; }
/* kanban do Regulatório preenche a área e rola: de lado (quadro) + por dentro (colunas) */
.main:has(.kanban.resizable-cols){ overflow:hidden; }
.view:has(.kanban.resizable-cols){ display:flex; flex-direction:column; height:100%; min-height:0; }
.view:has(.kanban.resizable-cols) .reg-body{ flex:1; min-height:0; display:flex; flex-direction:column; }
.kanban.resizable-cols{ flex:1; min-height:0; overflow-x:auto; overflow-y:hidden; padding-bottom:4px; }
.kanban.resizable-cols .kan-col{ height:100%; }
.kanban.resizable-cols .kan-cards{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:2px 2px 6px; }
.kanban.resizable-cols .kan-col h3{ position:sticky; top:0; z-index:2; }
/* modo HORIZONTAL (opcional): cada fase vira uma faixa de largura total, empilhadas de cima pra
   baixo; os cards fluem pro lado dentro da faixa. A PÁGINA rola normalmente (altura natural, sem
   forçar o quadro a preencher a tela — senão sobra um vazião). Fase vazia = só o cabeçalho. */
.main:has(.kanban.resizable-cols.kanban-horizontal){ overflow-y:auto; }
.view:has(.kanban.resizable-cols.kanban-horizontal){ height:auto; min-height:100%; }
.view:has(.kanban.resizable-cols.kanban-horizontal) .reg-body{ flex:0 1 auto; }
.kanban.resizable-cols.kanban-horizontal{ flex:0 0 auto; overflow:visible; flex-direction:column; gap:10px; align-items:stretch; padding-bottom:20px; }
.kanban.resizable-cols.kanban-horizontal .kan-col{ width:auto !important; height:auto; min-height:0 !important; flex:0 0 auto; border:1px solid var(--hair); border-radius:12px; background:var(--surface-sunken); padding:4px 10px 6px; }
.kanban.resizable-cols.kanban-horizontal .kan-col h3{ position:static; }
.kanban.resizable-cols.kanban-horizontal .kan-cards{ flex:0 0 auto; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; align-items:flex-start; gap:10px; padding:2px 0 4px; min-height:0; }
.kanban.resizable-cols.kanban-horizontal .kan-cards:empty{ display:none; }
.kanban.resizable-cols.kanban-horizontal .kan-cards > *{ flex:0 0 258px; max-width:258px; }
.kanban.resizable-cols.kanban-horizontal .kan-col .col-resize{ display:none; }
.kanban.resizable-cols.kanban-horizontal .kan-final{ min-height:0; }
.kanban.resizable-cols.kanban-horizontal .kan-final-hint{ margin-top:4px; font-size:12px; }
/* handle de redimensionar fica na BORDA direita da coluna (não ocupa espaço vertical) */
.col-resize{ position:absolute; top:46px; right:-9px; bottom:0; width:12px; margin:0; align-self:auto; z-index:3; cursor:col-resize; background:transparent; border:0; display:flex; align-items:center; justify-content:center; }
.col-resize::before{ content:""; width:3px; height:44px; border-radius:2px; background:var(--accent); opacity:0; transition:opacity .14s; }
.kan-col:hover .col-resize::before{ opacity:.4; }
.col-resize:hover::before{ opacity:1; }
.lab-row{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px; }
.lab-chip{ display:inline-flex; align-items:center; height:20px; padding:0 9px; border-radius:6px; font-size:11px; font-weight:600; }
.tag-interno{ font-size:10.5px; font-weight:700; padding:1px 8px; border-radius:20px; background:color-mix(in srgb,#8a6bd6 26%,transparent); color:#c2adf0; }
.card-fields{ margin-top:9px; padding-top:9px; border-top:1px dashed var(--hair); display:flex; flex-direction:column; gap:5px; }
.card-field{ font-size:11.5px; color:var(--text-muted); line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-field b{ color:var(--text-body); font-weight:700; }
.card-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.card-meta .resp{ font-size:11.5px; color:var(--text-muted); font-weight:600; }
.prazo-chip{ font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; background:var(--chip-bg); color:var(--chip-fg); }
.prazo-chip.ok{ background:color-mix(in srgb,var(--pos) 16%,transparent); color:var(--pos); }
.prazo-chip.breve{ background:color-mix(in srgb,var(--dc-gold) 22%,transparent); color:#d8a14a; }
.prazo-chip.vencido{ background:color-mix(in srgb,var(--neg) 16%,transparent); color:var(--neg); }
.coment-badge{ font-size:11px; color:var(--text-muted); }
.lab-palette{ display:flex; gap:6px; flex-wrap:wrap; }
.lab-palette .lab-chip{ cursor:pointer; opacity:.65; transition:opacity .12s,transform .1s; }
.lab-palette .lab-chip:hover{ opacity:1; transform:translateY(-1px); }
.coment{ padding:11px 0; border-bottom:1px solid var(--hair-soft); }
.coment-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.coment-head strong{ font-size:13px; color:var(--text-strong); }
.coment-when{ font-size:11.5px; color:var(--text-muted); }
.coment-text{ font-size:13.5px; color:var(--text-body); line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.vis-chip{ font-size:10.5px; font-weight:600; padding:1px 8px; border-radius:20px; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); }
.vis-chip.cli{ background:color-mix(in srgb,var(--pos) 18%,transparent); color:var(--pos); }
.anexos{ display:flex; flex-direction:column; gap:7px; }
.anexo{ display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--hair); border-radius:var(--radius-sm); background:var(--glass-bg); }
.anexo-nome{ font-size:13px; color:var(--text-strong); font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.anexo-meta{ font-size:11.5px; color:var(--text-muted); }
.anexo-share{ background:none; border:1px solid var(--hair); border-radius:7px; color:var(--text-muted); font-size:11px; cursor:pointer; padding:3px 8px; }
.anexo-share.on{ border-color:var(--pos); color:var(--pos); background:color-mix(in srgb,var(--pos) 12%,transparent); }
.anexo-dl{ color:var(--accent); text-decoration:none; font-size:15px; padding:2px 6px; }
.an-empty{ padding:10px 0; }

/* seletor de emoji/ícone do evento do calendário */
.emoji-pick{ font-size:18px; line-height:1; padding:4px 7px; border:1px solid var(--hair); border-radius:8px; background:var(--surface-card); cursor:pointer; }
.emoji-pick:hover{ border-color:var(--accent); }
.emoji-pick.on{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); }

/* ============================================================
   MÓDULO: Mensagens (chat interno)
   ============================================================ */
.msg-layout{ display:grid; grid-template-columns:300px 1fr; height:calc(100vh - 210px); min-height:440px; overflow:hidden; border:1px solid var(--glass-border); border-radius:var(--panel-radius); background:var(--glass-bg); box-shadow:var(--glass-shadow); }
.msg-list{ border-right:1px solid var(--hair); overflow-y:auto; }
.msg-conv{ padding:14px 18px; border-bottom:1px solid var(--hair-soft); cursor:pointer; transition:background .12s; }
.msg-conv:hover{ background:var(--hair-soft); }
.msg-conv.sel{ background:var(--side-active); }
.mc-top{ display:flex; align-items:center; gap:7px; }
.mc-top strong{ font-weight:600; color:var(--text-strong); font-size:14px; }
.mc-dot{ width:7px; height:7px; border-radius:50%; background:var(--dc-danger); margin-left:auto; }
.mc-proj{ font-size:12px; color:var(--accent); margin-top:2px; }
.mc-last{ font-size:12.5px; color:var(--text-muted); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-chat{ display:flex; flex-direction:column; min-width:0; }
.msg-thread{ display:flex; flex-direction:column; height:100%; }
.msg-head{ padding:16px 22px; border-bottom:1px solid var(--hair); display:flex; align-items:center; gap:12px; }
.msg-head strong{ color:var(--text-strong); }
.msg-body{ flex:1; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:14px; }
.msg-bubble{ max-width:74%; padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.5; align-self:flex-start; background:var(--chip-bg); color:var(--text-body); border-bottom-left-radius:5px; }
.msg-bubble.meu{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-left-radius:14px; border-bottom-right-radius:5px; }
.mb-meta{ display:flex; align-items:center; gap:8px; font-size:10.5px; opacity:.75; margin-bottom:4px; }
.mb-del{ background:none; border:none; color:inherit; cursor:pointer; font-size:14px; line-height:1; padding:0 2px; opacity:.6; }
.mb-del:hover{ opacity:1; }
.mb-text{ white-space:pre-wrap; word-break:break-word; }
.msg-reply{ padding:14px 18px; border-top:1px solid var(--hair); display:flex; gap:10px; }
.msg-reply textarea{ flex:1; resize:none; height:44px; padding:11px 14px; border-radius:11px; border:1px solid var(--hair); background:var(--glass-bg); color:var(--text-body); font-family:var(--font-body); font-size:13.5px; outline:none; }
.msg-empty{ padding:40px; text-align:center; color:var(--text-muted); font-size:14px; }
.msg-del-conv{ margin-left:auto; }

/* ============================================================
   PORTAL DO CLIENTE / ÁREA DO ALUNO (tela externa, autônoma)
   ============================================================ */
/* ===== Área do Aluno Fábrica Blindada (2026-09-30): navy profundo da marca + ouro nos detalhes,
   Sora nos títulos e Loos no corpo (mesmos tokens do painel /mfb/). Serve também o portal do
   cliente regulatório (Projetos), que monta dentro da mesma casca. ===== */
@font-face{ font-family:"Sora"; src:url("/mfb/assets/fonts/Sora.ttf") format("truetype"); font-weight:100 800; font-style:normal; font-display:swap; }
.portal{ --pbg:#050D1F; --pcard:#0A1730; --pnavy:#041F47; --pborder:rgba(201,162,75,.22); --pstrong:#F4F6FB; --pbody:#D2D9E6; --pmuted:#8FA0BF;
  --acc:#0043D8; --acc-claro:#3D74FF; --acc-texto:#6F9BFF; --ouro:#C9A24B; --ouro-claro:#E3C88A; --acc-ink:#FFFFFF; --pradius:14px;
  --font-titulo:"Sora","Loos",system-ui,sans-serif;
  min-height:100vh; color:var(--pbody); font-family:"Loos",var(--font-body),system-ui,sans-serif; color-scheme:dark;
  background:var(--pbg); font-synthesis:none; -webkit-font-smoothing:antialiased;
  position:relative; display:flex; align-items:stretch; }
/* grão sutil por cima do fundo (profundidade sem "aura"), igual ao painel /mfb/ */
.portal::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); }
/* filete dourado no topo da tela */
.portal::after{ content:""; position:fixed; top:0; left:0; right:0; height:3px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, var(--ouro) 0%, var(--ouro) 38%, rgba(201,162,75,.18) 100%); }
/* ===== navegação lateral ===== */
.pn-lateral{ position:sticky; top:0; z-index:2; flex:0 0 240px; height:100vh; display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(10,23,48,.94) 0%, rgba(5,13,31,.98) 100%); border-right:1px solid var(--pborder); padding:26px 14px 16px; }
.pn-logo{ width:128px; height:auto; margin:2px 10px 28px; display:block; }
.pn-nav{ display:flex; flex-direction:column; gap:4px; }
.pn-item{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:0; font:inherit;
  font-size:13.5px; font-weight:400; color:var(--pbody); padding:10px 12px; border-radius:10px; cursor:pointer; text-decoration:none; transition:background .13s,color .13s; }
.pn-item:hover{ background:rgba(255,255,255,.06); color:var(--pstrong); }
.pn-item.ativo{ background:var(--acc); color:var(--acc-ink); font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
.pn-item.pn-oculto{ display:none !important; }
.pn-ic{ display:inline-flex; flex:0 0 auto; line-height:0; }
.pn-fundo{ margin-top:auto; border-top:1px solid var(--pborder); padding-top:12px; }
.pn-user{ display:flex; align-items:center; gap:10px; padding:6px 8px 10px; }
.pn-avatar{ flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:var(--pnavy); color:var(--ouro-claro); border:1px solid rgba(201,162,75,.4);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-titulo); font-size:12px; font-weight:600; object-fit:cover; }
img.pn-avatar{ display:block; }
.pn-user-txt{ min-width:0; display:flex; flex-direction:column; }
.pn-user-txt strong{ color:var(--pstrong); font-size:12.5px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pn-user-txt span{ color:var(--pmuted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pn-sair{ display:flex; align-items:center; gap:9px; width:100%; background:none; border:0; font:inherit; font-size:12.5px;
  color:var(--pmuted); padding:8px 10px; border-radius:9px; cursor:pointer; }
.pn-sair:hover{ background:rgba(255,255,255,.06); color:var(--pstrong); }
.pn-corpo{ position:relative; z-index:1; flex:1; min-width:0; }
.pn-previa{ background:rgba(201,162,75,.16); color:var(--ouro-claro); border-bottom:1px solid var(--pborder); font-size:12px; font-weight:600; letter-spacing:.04em; padding:7px 16px; text-align:center; }
.portal-top{ display:none; } /* substituído pela navegação lateral .pn-lateral */
.portal-top img{ height:26px; }
.portal-user{ margin-left:auto; font-size:13px; color:var(--pmuted); text-align:right; }
.portal-user strong{ color:var(--pstrong); display:block; }
.portal-back{ background:var(--pcard); border:1px solid var(--pborder); color:var(--pbody); border-radius:9px; padding:7px 12px; cursor:pointer; font:inherit; font-size:13px; }
.portal-back:hover{ border-color:var(--ouro); color:var(--pstrong); }
.portal-main{ --gutter:34px; max-width:none; margin:0; padding:24px var(--gutter) 60px; }
.portal-sec{ margin-bottom:28px; }
.portal h1,.portal h2,.portal h3{ color:var(--pstrong); }
.portal-h1{ font-family:var(--font-titulo); font-size:22px; font-weight:600; letter-spacing:-.01em; }
.portal-sec h2{ font-family:var(--font-titulo); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ouro); font-weight:600; margin:0 0 10px; }
.portal .muted{ color:var(--pmuted); }
.portal-aud{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--pborder); border-left:3px solid var(--ouro); border-radius:0 14px 14px 0; background:var(--pcard); cursor:pointer; transition:border-color .14s,transform .1s; margin-bottom:10px; box-shadow:0 6px 16px rgba(2,8,20,.35); }
.portal-aud:hover{ border-color:rgba(201,162,75,.5); transform:translateY(-1px); }
.portal-aud .pa-tt{ font-weight:700; color:var(--pstrong); font-size:15px; }
.portal-aud .pa-sub{ font-size:12.5px; color:var(--pmuted); margin-top:2px; }
.portal-aud .pa-bar{ height:6px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; margin-top:8px; max-width:260px; }
.portal-aud .pa-bar .pa-fill{ height:100%; background:#2FBE8A; }
.portal-aud .pa-side{ text-align:center; flex:none; }
.portal-aud .pa-side .pa-pct{ font-size:18px; font-weight:700; color:var(--pstrong); }
.portal-aud .pa-side .pa-dias{ font-size:11px; color:var(--pmuted); }
.portal-aud .pa-side .pa-dias.urg{ color:#FF7A7A; }
.portal-sub{ color:var(--pmuted); font-size:14px; margin:2px 0 0; }
.portal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:14px; }
.portal-card{ background:var(--pcard); border:1px solid rgba(143,160,191,.16); border-radius:var(--pradius); padding:18px; cursor:pointer; transition:border-color .14s,transform .1s,box-shadow .14s; box-shadow:0 6px 16px rgba(2,8,20,.35); }
.portal-card:hover{ border-color:rgba(201,162,75,.5); transform:translateY(-2px); box-shadow:0 12px 26px rgba(2,8,20,.45); }
.portal a.portal-card{ text-decoration:none; color:inherit; display:block; }
.portal-proj-head,.pc-row{ display:flex; align-items:center; gap:10px; }
.pc-title{ font-family:var(--font-titulo); font-weight:600; font-size:16px; color:var(--pstrong); }
.pc-desc{ font-size:13px; color:var(--pmuted); margin:6px 0 4px; line-height:1.45; }
.pc-fase,.portal-prazo{ font-size:12px; color:var(--pmuted); }
.pc-fase{ display:inline-flex; padding:3px 10px; border-radius:99px; background:rgba(0,67,216,.22); color:var(--acc-texto); font-weight:600; }
.pc-docs{ font-size:12px; color:var(--pmuted); }
.pc-open{ margin-top:10px; color:var(--acc-texto); font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.portal-doc{ display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid var(--pborder); border-radius:12px; background:var(--pcard); margin-bottom:8px; color:var(--pbody); text-decoration:none; }
.portal-doc:hover{ border-color:rgba(201,162,75,.5); }
.portal-doc .anexo-nome{ color:var(--acc-texto); }
.portal .anexo-meta{ color:var(--pmuted); }
.portal .anexo-dl{ color:var(--acc-texto); }
.portal-empty,.portal-load{ text-align:center; color:var(--pmuted); padding:50px 20px; }
.portal-back-row{ margin-bottom:18px; }
/* linha do tempo do projeto (rastreio) */
.portal-tl{ display:flex; gap:0; overflow-x:auto; padding:6px 2px 10px; }
.portal-tl .tl-passo{ flex:1; min-width:96px; text-align:center; position:relative; }
.portal-tl .tl-passo::before{ content:""; position:absolute; top:11px; left:-50%; width:100%; height:2px; background:rgba(255,255,255,.12); }
.portal-tl .tl-passo:first-child::before{ display:none; }
.portal-tl .tl-passo.feita::before, .portal-tl .tl-passo.atual::before{ background:var(--acc-claro); }
.portal-tl .tl-dot{ width:22px; height:22px; border-radius:50%; margin:0 auto; background:var(--pcard); border:2px solid rgba(255,255,255,.18); color:#fff; font-size:12px; line-height:18px; position:relative; z-index:1; }
.portal-tl .tl-passo.feita .tl-dot{ background:var(--acc); border-color:var(--acc); }
.portal-tl .tl-passo.atual .tl-dot{ border-color:var(--ouro); box-shadow:0 0 0 4px rgba(201,162,75,.22); }
.portal-tl .tl-nome{ font-size:11px; color:var(--pmuted); margin-top:6px; line-height:1.3; padding:0 4px; }
.portal-tl .tl-passo.atual .tl-nome{ color:var(--pstrong); font-weight:700; }
.portal-tl .tl-passo.feita .tl-nome{ color:var(--pbody); }
/* blindagem dos campos e botões do hub dentro do portal: ele monta FORA do .app-root (os tokens
   do hub não existem lá) e, na prévia "ver como", DENTRO de um hub claro ou escuro */
.portal .input, .portal select.input, .portal textarea.input,
.app-root[data-theme="dark"] .portal .input, .app-root[data-theme="dark"] .portal select.input, .app-root[data-theme="dark"] .portal textarea.input{
  background:rgba(4,13,30,.7); border:1px solid rgba(143,160,191,.25); color:var(--pstrong,#F4F6FB); border-radius:9px; padding:8px 11px; font:inherit;
}
.portal .input::placeholder, .portal textarea.input::placeholder{ color:rgba(143,160,191,.6); }
.portal .input:focus, .portal select.input:focus, .portal textarea.input:focus{ outline:none; border-color:var(--acc-claro); box-shadow:0 0 0 3px rgba(0,67,216,.25); }
.portal select.input option{ background:var(--pcard); color:var(--pstrong); }
.portal .btn, .app-root[data-theme="dark"] .portal .btn{ background:var(--acc); color:#fff; border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(2,8,20,.5); }
.portal .btn:hover{ background:var(--acc-claro); }
.portal .btn.subtle, .portal .btn.subtle.sm,
.app-root[data-theme="dark"] .portal .btn.subtle, .app-root[data-theme="dark"] .portal .btn.subtle.sm{
  background:rgba(255,255,255,.06); border:1px solid var(--pborder,rgba(201,162,75,.22)); color:var(--pbody,#D2D9E6); box-shadow:none;
}
.portal .btn.subtle:hover{ border-color:rgba(201,162,75,.5); color:var(--pstrong); }
/* acompanhamento de auditoria (CSS-base injetado pelo portal.js em tema claro): leitura no navy */
.portal .acomp-bar{ background:rgba(255,255,255,.12); }
.portal .acomp-bar > div{ background:#2FBE8A; }
.portal .acomp-cards .mc{ background:var(--pcard); border:1px solid var(--pborder); }
.portal .acomp-cards .mc .k{ color:var(--pmuted); }
.portal .nc-card{ background:var(--pcard); border:1px solid var(--pborder); box-shadow:0 6px 16px rgba(2,8,20,.35); }
.portal .nc-area, .portal .nc-plan .h, .portal .nc-plan label{ color:var(--pmuted); }
.portal .nc-sug{ background:rgba(0,67,216,.18); }
.portal .nc-sug .h{ color:var(--acc-texto); }
.portal .nc-plan{ border-color:var(--pborder); }
.portal .nc-extra{ border-top-color:rgba(255,255,255,.08); }
.portal .nc-evid a{ background:rgba(255,255,255,.08); color:var(--acc-texto); }
.portal .nc-duv-msg.cli{ background:rgba(255,255,255,.07); }
.portal .nc-duv-msg.dc{ background:rgba(0,67,216,.18); }
.portal .nc-saved{ color:#2FBE8A; }

/* ===== Mentoria: curso em módulos (área de membros no navy e ouro) ===== */
.curso-mod{ margin:26px 0 8px; }
.curso-band{ position:relative; display:flex; align-items:center; min-height:64px; border-radius:var(--pradius); overflow:hidden;
  background:linear-gradient(105deg,#041F47 0%,#0A1730 55%,#050D1F 100%); padding:14px 22px; margin-bottom:14px; box-shadow:0 8px 20px rgba(2,8,20,.4); }
/* filete dourado inferior da faixa */
.curso-band::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:linear-gradient(90deg, var(--ouro) 0%, var(--ouro) 45%, rgba(201,162,75,.12) 100%); }
.curso-band.mini{ min-height:44px; padding:8px 18px; }
.curso-band.compl{ background:linear-gradient(105deg,#0A1730 0%,#041F47 100%); }
.curso-band .cb-nome{ position:relative; z-index:1; font-family:var(--font-titulo); color:var(--pstrong); font-weight:600; font-size:18px; letter-spacing:.01em; text-shadow:0 1px 6px rgba(2,8,20,.6); }
.curso-band.mini .cb-nome{ font-size:14px; }
/* com imagem, a faixa é uma BARRA larga: pega a largura toda da página,
   proporção fixa ~4.8:1, imagem cortada para caber (crie o banner já com o nome do módulo na arte) */
.curso-band.com-banner{ display:block; padding:0; min-height:0; margin-inline:calc(-1 * var(--gutter, 34px));
  border-radius:0; aspect-ratio:48/5; max-height:190px; }
.curso-band.com-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.curso-band.com-banner::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,13,31,.72),rgba(5,13,31,.08) 60%); }
.curso-band.com-banner .cb-nome{ position:absolute; left:26px; top:50%; transform:translateY(-50%); z-index:2; font-size:22px; letter-spacing:.01em; }
.curso-row{ position:relative; }
.curso-scroll{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 2px 10px; scrollbar-width:none; }
.curso-scroll::-webkit-scrollbar{ display:none; }
.curso-card-wrap{ position:relative; flex:0 0 auto; width:252px; scroll-snap-align:start; }
.curso-card{ position:relative; width:100%; aspect-ratio:3/4; border-radius:var(--pradius); overflow:hidden; cursor:pointer; background:linear-gradient(160deg,#0A1730,#050D1F);
  border:1px solid rgba(143,160,191,.14); box-shadow:0 4px 14px rgba(2,8,20,.45); transition:transform .16s ease, box-shadow .16s ease, border-color .16s; }
.curso-card:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(2,8,20,.55); border-color:rgba(201,162,75,.45); }
.curso-card:active{ transform:translateY(-1px) scale(.985); }
.curso-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.curso-card .cc-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; text-align:center; }
.curso-card .cc-ph span{ font-family:var(--font-titulo); color:var(--pbody); font-weight:600; font-size:14.5px; line-height:1.35; }
.curso-card .cc-num{ position:absolute; top:10px; right:10px; background:rgba(5,13,31,.88); color:var(--ouro-claro); font-family:var(--font-titulo); font-weight:600; font-size:12.5px; letter-spacing:.04em; border-radius:9px; padding:3px 9px; font-variant-numeric:tabular-nums; border:1px solid rgba(201,162,75,.3); }
.curso-card .cc-breve{ position:absolute; left:10px; bottom:10px; background:rgba(244,246,251,.94); color:#041F47; font-size:10px; font-weight:800; letter-spacing:.08em; border-radius:99px; padding:3px 9px; }
.curso-card .cc-ok{ position:absolute; top:10px; left:10px; background:var(--ouro); color:#041F47; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.curso-card .cc-prog{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(0,0,0,.5); }
.curso-card .cc-prog-f{ display:block; height:100%; background:var(--ouro); }
.cc-cap{ position:relative; z-index:1; margin-top:8px; font-size:14.5px; line-height:1.35; color:var(--pbody); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.curso-seta{ position:absolute; top:calc(50% - 30px); z-index:2; width:36px; height:52px; border:1px solid var(--pborder); border-radius:10px; background:rgba(5,13,31,.78); color:var(--pstrong); font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; }
.curso-seta.esq{ left:-8px; } .curso-seta.dir{ right:-8px; }
.curso-row:hover .curso-seta{ opacity:1; }
.curso-aula-head{ margin:14px 0 12px; }
.curso-aula-head .ca-mod{ display:inline-block; font-family:var(--font-titulo); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ouro); margin-bottom:4px; }
/* player do YouTube sem cromo: iframe + escudo (nenhum clique chega ao YouTube) + barra nossa */
.curso-yt{ position:relative; width:100%; background:#000; border-radius:var(--pradius); overflow:hidden; box-shadow:0 18px 44px rgba(2,8,20,.5); display:flex; flex-direction:column; }
.curso-yt .yt-tela{ position:relative; width:100%; aspect-ratio:16/9; max-height:78vh; overflow:hidden; background:#000; }
/* 64px a mais em cima e embaixo: some a faixa do título e a marca d'água (o vídeo 16:9 fica inteiro, centrado) */
.curso-yt .yt-frame{ position:absolute; left:0; top:-64px; width:100%; height:calc(100% + 128px); border:0; display:block; pointer-events:none; background:#000; }
.curso-yt .yt-escudo{ position:absolute; inset:0; cursor:pointer; display:flex; align-items:center; justify-content:center; user-select:none; -webkit-user-select:none; }
.curso-yt .yt-fundo{ position:absolute; inset:0; background:linear-gradient(135deg,#041F47 0%,#0A1730 55%,#050D1F 100%); transition:opacity .25s; }
.curso-yt .yt-capa{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.curso-yt:not(.pausado) .yt-fundo{ opacity:0; pointer-events:none; }
.curso-yt .yt-play-grande{ position:relative; z-index:1; width:78px; height:78px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(0,67,216,.85); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s, background .15s; }
.curso-yt .yt-play-grande svg{ width:30px; height:30px; margin-left:4px; }
.curso-yt .yt-play-grande:hover{ background:var(--acc-claro); transform:scale(1.05); }
.curso-yt .yt-play-grande[hidden]{ display:none; }
.curso-yt .yt-aviso{ position:relative; z-index:1; margin:0; padding:0 24px; text-align:center; color:var(--pstrong); font-size:14px; line-height:1.6; max-width:460px; }
.curso-yt .yt-aviso a{ color:var(--ouro-claro); }
.curso-yt:focus-visible{ outline:2px solid var(--ouro); outline-offset:3px; }
.curso-yt .yt-barra{ display:flex; align-items:center; gap:10px; padding:8px 12px; background:#0A1730; border-top:1px solid rgba(201,162,75,.22); }
.curso-yt .yt-btn{ background:none; border:0; color:var(--pstrong); width:36px; height:36px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.curso-yt .yt-btn:hover{ background:rgba(255,255,255,.08); }
.curso-yt .yt-btn:focus-visible, .curso-yt .yt-seek:focus-visible, .curso-yt .yt-play-grande:focus-visible{ outline:2px solid var(--ouro); outline-offset:2px; }
.curso-yt .yt-seek{ flex:1; accent-color:var(--ouro); height:4px; cursor:pointer; min-width:80px; }
.curso-yt .yt-tempo{ font-size:12.5px; color:var(--pmuted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.curso-yt:fullscreen{ border-radius:0; justify-content:center; }
.curso-yt:fullscreen .yt-tela{ max-height:none; aspect-ratio:auto; flex:1; min-height:0; }
.curso-player{ width:100%; aspect-ratio:16/9; max-height:78vh; object-fit:contain; background:#000; border-radius:var(--pradius); display:block; box-shadow:0 14px 38px rgba(2,8,20,.6); }
.curso-desc{ margin:14px 2px 6px; font-size:14.5px; line-height:1.6; color:var(--pbody); white-space:pre-wrap; }
.curso-comp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.curso-comp{ position:relative; border:1px solid rgba(143,160,191,.16); border-radius:var(--pradius); overflow:hidden; background:var(--pcard); cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s; box-shadow:0 6px 16px rgba(2,8,20,.35); }
.curso-comp:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(2,8,20,.5); border-color:rgba(201,162,75,.45); }
.curso-comp .comp-capa{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.curso-comp .comp-ph{ width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#041F47,#0A1730); color:var(--ouro-claro); font-family:var(--font-titulo); font-weight:600; letter-spacing:.08em; }
.curso-comp .comp-body{ padding:11px 13px 13px; }
.curso-comp .comp-tit{ font-family:var(--font-titulo); font-weight:600; font-size:14px; line-height:1.35; color:var(--pstrong); }
.curso-comp .comp-desc{ font-size:12.5px; color:var(--pmuted); margin-top:3px; line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.curso-comp .comp-chip{ display:inline-block; margin-top:8px; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; background:rgba(201,162,75,.12); color:var(--ouro-claro); border:1px solid var(--pborder); border-radius:99px; padding:2px 9px; }
/* gestor (admin, portal-admin.js) */
.cm-card{ border:1px solid var(--glass-border,#e4e7ec); border-radius:14px; padding:14px; margin:10px 0 14px; background:var(--glass-bg,#fff); }
.ca-linha{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--hair-soft,#eef1ef); }
.ca-thumb{ width:64px; aspect-ratio:3/4; object-fit:cover; border-radius:9px; flex:none; }
/* vídeo da aula: duas opções explícitas (arquivo na plataforma x link do YouTube) */
.ca-video{ margin-top:8px; border:1px solid var(--hair-soft,#eef1ef); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; gap:6px; }
.ca-video-head{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline; }
.ca-video-tit{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted,#7a847e); }
.ca-video-op{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:4px 6px; border-radius:8px; }
.ca-video-op.ativa{ background:rgba(0,67,216,.08); }
.ca-op-rot{ font-size:12px; font-weight:600; min-width:150px; }
.ca-thumb.vazia{ display:flex; align-items:center; justify-content:center; background:var(--hair-soft,#eef1ef); color:var(--text-muted,#7a847e); font-size:10.5px; }
.sec-head{ margin:8px 0 4px; }
@media (max-width:640px){ .curso-card-wrap{ width:176px; } }
/* ===== hero, progresso, aula em duas colunas ===== */
.curso-hero{ position:relative; margin:2px 0 8px; border-radius:16px; overflow:hidden;
  background:var(--pcard) center/cover no-repeat; border:1px solid var(--pborder); border-top:3px solid var(--ouro); box-shadow:0 18px 44px rgba(2,8,20,.5); }
.curso-hero .ch-veu{ position:relative; z-index:1; padding:34px 38px 32px; min-height:264px; display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(90deg, rgba(5,13,31,.94) 0%, rgba(5,13,31,.62) 55%, rgba(5,13,31,.14) 100%); }
.curso-hero:not(.com-img) .ch-veu{ background:linear-gradient(120deg, rgba(4,31,71,.78) 0%, rgba(10,23,48,.35) 60%, rgba(5,13,31,.1) 100%); }
.curso-hero .ch-simbolo{ position:absolute; right:-40px; top:50%; transform:translateY(-50%);
  width:min(38%, 360px); aspect-ratio:1; opacity:.07; pointer-events:none; z-index:0; }
.curso-hero .ch-chapeu{ display:block; font-family:var(--font-titulo); font-size:11.5px; letter-spacing:.2em; font-weight:600; color:var(--ouro); text-transform:uppercase; margin-bottom:8px; }
.curso-hero .ch-tit{ margin:0 0 8px; font-family:var(--font-titulo); font-size:42px; font-weight:600; letter-spacing:-.02em; color:var(--pstrong); line-height:1.06; }
.curso-hero .ch-tit em{ font-style:normal; font-weight:600; color:var(--ouro); }
.curso-hero .ch-sub{ margin:0 0 18px; font-size:15px; font-weight:400; color:var(--pbody); max-width:560px; line-height:1.55; }
.curso-hero .ch-acao{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.curso-hero .ch-cta, .pf-salvar{ background:linear-gradient(180deg,#1655e6,var(--acc)); color:#fff; border:0; font-family:var(--font-titulo); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:12px 22px; border-radius:10px; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(2,8,20,.55); transition:transform .16s, background .16s, box-shadow .16s; }
.curso-hero .ch-cta:hover, .pf-salvar:hover{ background:linear-gradient(180deg,var(--acc-claro),#0a4ae0); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px rgba(2,8,20,.6); }
.curso-hero .ch-cta:active, .pf-salvar:active{ transform:translateY(0) scale(.985); }
.curso-hero .ch-prog{ flex:1; min-width:170px; max-width:230px; }
.curso-hero .ch-trilho{ display:block; height:5px; background:rgba(255,255,255,.14); border-radius:3px; overflow:hidden; }
.curso-hero .ch-fill{ display:block; height:100%; background:linear-gradient(90deg,var(--ouro),var(--ouro-claro)); }
.curso-hero .ch-rot{ display:block; font-size:11.5px; color:var(--pmuted); margin-top:6px; }
.curso-sec-tit{ margin:26px 0 0; font-family:var(--font-titulo); font-size:19px; font-weight:600; color:var(--pstrong); }
.curso-aula-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:22px; align-items:start; }
.curso-side{ position:sticky; top:16px; background:var(--pcard); border:1px solid var(--pborder); border-radius:var(--pradius); padding:16px 14px; max-height:calc(100vh - 110px); overflow:auto; }
.curso-side .cs-tit{ font-family:var(--font-titulo); font-size:10.5px; letter-spacing:.16em; font-weight:600; color:var(--ouro); text-transform:uppercase; margin:0 0 10px; }
.curso-side .cs-mod{ font-family:var(--font-titulo); font-size:12.5px; font-weight:600; color:var(--pstrong); margin:12px 0 6px; }
.curso-side .cs-aula{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:0; font:inherit; font-size:12.5px; font-weight:400; color:var(--pbody); padding:6px 8px; border-radius:8px; cursor:pointer; }
.curso-side .cs-aula:hover{ background:rgba(255,255,255,.06); color:var(--pstrong); }
.curso-side .cs-aula.ativa{ background:rgba(0,67,216,.24); color:var(--pstrong); font-weight:600; }
.curso-side .cs-ic{ display:inline-flex; color:var(--ouro); flex:0 0 auto; line-height:0; }
.curso-nav-aulas{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.curso-nav-aulas button{ font:inherit; font-size:13px; padding:9px 14px; border-radius:9px; cursor:pointer; transition:background .14s, border-color .14s; }
.curso-nav-aulas .btn-ant{ background:var(--pcard); color:var(--pbody); border:1px solid var(--pborder); }
.curso-nav-aulas .btn-ant:hover{ border-color:rgba(201,162,75,.5); color:var(--pstrong); }
.curso-nav-aulas .btn-prox{ background:var(--acc); color:#fff; border:0; font-weight:600; }
.curso-nav-aulas .btn-prox:hover{ background:var(--acc-claro); }
@media (max-width:900px){
  .curso-aula-wrap{ grid-template-columns:1fr; }
  .curso-side{ position:static; max-height:none; }
  .curso-hero .ch-tit{ font-size:30px; }
  .curso-hero .ch-simbolo{ right:-30px; width:180px; opacity:.06; }
  .portal-main{ --gutter:16px; }
  .curso-band.com-banner{ aspect-ratio:5/1; }
  .portal{ flex-direction:column; }
  .pn-lateral{ position:sticky; top:0; height:auto; flex:none; flex-direction:row; align-items:center; gap:6px;
    padding:10px 12px; border-right:0; border-bottom:1px solid var(--pborder); overflow-x:auto; scrollbar-width:none; }
  .pn-lateral::-webkit-scrollbar{ display:none; }
  .pn-logo{ width:96px; margin:0 8px 0 0; }
  .pn-nav{ flex-direction:row; gap:2px; }
  .pn-item{ padding:8px 10px; font-size:12.5px; white-space:nowrap; }
  .pn-fundo{ margin:0 0 0 auto; border:0; padding:0; display:flex; align-items:center; }
  .pn-user{ display:none; }
  .pn-sair span:last-child{ display:none; }
  /* alvos de toque >= 40px na barra e nas listas */
  .pn-item, .pn-sair, .cs-aula, .portal-back{ min-height:40px; }
  .pn-sair{ min-width:40px; justify-content:center; }
}

/* ===== Meu perfil ===== */
.pf-sub{ color:var(--pmuted); font-size:13px; margin:4px 0 14px; }
.pf-capa{ position:relative; height:150px; border-radius:16px; background:linear-gradient(120deg,#041F47,#0A1730 60%,#050D1F) center/cover no-repeat; border:1px solid var(--pborder); border-bottom:2px solid var(--ouro); margin-bottom:44px; }
.pf-capa.com-img{ background-size:cover; }
.pf-avatar{ position:absolute; left:26px; bottom:-30px; width:76px; height:76px; border-radius:50%; border:3px solid var(--pbg);
  background:var(--pnavy); color:var(--ouro-claro); display:flex; align-items:center; justify-content:center; font-family:var(--font-titulo); font-size:22px; font-weight:600; object-fit:cover; }
img.pf-avatar{ display:block; }
.pf-sec{ background:var(--pcard); border:1px solid var(--pborder); border-radius:16px; padding:20px 22px; margin-bottom:16px; box-shadow:0 6px 16px rgba(2,8,20,.35); }
.pf-tit{ font-family:var(--font-titulo); font-size:16px; font-weight:600; color:var(--pstrong); margin:0 0 2px; }
.pf-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.pf-campo{ display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.pf-rot{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--pmuted); }
.pf-rot.pf-bloco{ margin:10px 0 2px; letter-spacing:.14em; color:var(--ouro); }
.pf-acao{ display:flex; justify-content:flex-end; margin-top:6px; }
.pf-salvar{ font-size:12.5px; padding:10px 18px; }
@media (max-width:700px){ .pf-grid2{ grid-template-columns:1fr; } }

/* ===== spotlight dourado nos cards (segue o ponteiro; desligado sem hover/touch) ===== */
@media (hover:hover){
  .curso-card::after, .curso-comp::after{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .22s;
    pointer-events:none; z-index:3; border-radius:inherit;
    background:radial-gradient(190px 190px at var(--mx,50%) var(--my,50%), rgba(227,200,138,.18), transparent 72%);
    mix-blend-mode:screen; }
  .curso-card:hover::after, .curso-comp:hover::after{ opacity:1; }
}
/* toque: sem hover não há seta (o arrasto do trilho resolve) */
@media (hover:none){ .curso-seta{ display:none; } }
/* teclado: foco visível nos cards e setas; aula sem vídeo não convida ao clique */
.curso-card:focus-visible, .curso-comp:focus-visible, .curso-scroll:focus-visible{ outline:2px solid var(--ouro); outline-offset:3px; }
.curso-seta:focus-visible, .curso-row:focus-within .curso-seta{ opacity:1; }
.curso-card.breve{ cursor:default; }
.curso-card.breve:hover{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .curso-card, .curso-comp, .portal-card, .ch-cta, .pf-salvar, .pn-item{ transition:none; }
  .curso-card:hover, .curso-comp:hover, .portal-card:hover{ transform:none; }
  .curso-card::after, .curso-comp::after{ display:none; }
  .yt-fundo, .yt-play-grande{ transition:none; }
  .yt-play-grande:hover{ transform:none; }
}

/* impressão: no papel o portal volta ao claro e a casca sai */
@media print{
  .portal{ background:#fff; --pbg:#ffffff; --pcard:#ffffff; --pborder:#d5dae3; --pstrong:#041F47; --pbody:#343a44; --pmuted:#6f7681; display:block; }
  .portal::before, .portal::after{ display:none; }
  .pn-lateral, .pn-previa, .portal-top, .curso-side, .curso-nav-aulas, .portal-back, .curso-seta, .curso-hero, .curso-player, .curso-yt{ display:none !important; }
  .curso-aula-wrap{ display:block; }
}

@media (max-width:760px){ .msg-layout{ grid-template-columns:1fr; height:auto; } }
@media (max-width:1100px){ .kpi-row.kpi-6{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1080px){ .cols-3,.cols-4,.kpis{ grid-template-columns:repeat(2,1fr); } }
/* botão hambúrguer: escondido no desktop, aparece no celular */
.tb-burger{ display:none; background:transparent; border:0; color:var(--text); font-size:22px; line-height:1; cursor:pointer; padding:4px 8px; border-radius:8px; }
.tb-burger:hover{ background:var(--hover,rgba(0,0,0,.06)); }
.sb-overlay{ display:none; }

@media (max-width:820px){
  /* menu lateral vira gaveta deslizante (off-canvas) */
  .sidebar{ position:fixed; top:0; left:0; bottom:0; height:100%; width:262px; max-width:84%;
            flex:none; flex-direction:column; z-index:60; overflow-y:auto;
            transform:translateX(-100%); transition:transform .25s ease; box-shadow:0 0 40px rgba(0,0,0,.35); }
  .app-root.nav-open .sidebar{ transform:translateX(0); }
  .sb-overlay{ position:fixed; inset:0; background:rgba(2,8,22,.5); z-index:55; }
  .app-root:not(.nav-open) .sb-overlay{ display:none; }
  .app-root.nav-open .sb-overlay{ display:block; }
  .main{ width:100%; }
  .tb-burger{ display:inline-flex; align-items:center; }
  .topbar{ padding:12px 14px; gap:10px; }
  .tb-title h1{ font-size:17px; } .tb-title p{ display:none; }
  .tb-spacer, .tb-search{ display:none; }      /* topo enxuto no celular (busca volta pelo menu) */
  .view{ padding:16px 14px 72px; }
  .page-head{ flex-wrap:wrap; gap:10px; }
  .grid2,.grid3{ grid-template-columns:1fr; }
  /* tabelas largas rolam na horizontal em vez de estourar */
  table.tbl{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  /* modais/fichas em tela cheia */
  .modal-bg{ padding:0; }
  .modal{ max-width:100%; width:100%; height:100%; max-height:100%; border-radius:0; }
  /* colunas do kanban num tamanho bom pro dedo */
  .kanban .kan-col{ width:80vw!important; max-width:300px; }
  /* calendário: a grade do mês/semana ganha largura mínima e ARRASTA pro lado
     (7 colunas espremidas em 375px eram ilegíveis e sem rolagem) */
  .cal-scroll{ margin:0 -14px; padding:0 14px; } /* rolagem encosta na borda da tela */
  .cal-scroll .cal-grid{ min-width:660px; }
  .cal-scroll .cal-wk{ min-width:660px; }
  .cal-cell{ min-height:84px; }
  /* abas (CRM/Regulatório/Marketing…) rolam de lado em vez de quebrar torto */
  .crm-tabs{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .crm-tabs::-webkit-scrollbar{ display:none; }
  .crm-tab{ white-space:nowrap; flex:none; }
  /* toolbars: controles ocupam a largura e empilham direito */
  .page-head .row-actions{ flex-wrap:wrap; }
  .page-head select.input, .page-head .input{ max-width:100%!important; }
}
@media (max-width:820px){ .entregas-grid{ grid-template-columns:1fr; } }
@media (max-width:700px){ .kpi-row,.kpi-row.kpi-6,.kpi-row.kpi-3,.cols-2,.kpis{ grid-template-columns:repeat(2,1fr); } }

/* ===== Orçamento nativo embutido (.orc-root) — encaixe no shell do hub ===== */
.view.view-orc{ padding:0!important; max-width:none!important; display:flex; flex-direction:column; flex:1; min-height:0; }
.orc-root{ display:flex; flex-direction:column; flex:1; min-height:0; position:relative; }
/* overlays do gerador (kanban, cadastros, duplicar, loading) ficam na área de
   conteúdo, não atrás da sidebar do hub */
.orc-root .kanban-modal, .orc-root #cadastro-overlay, .orc-root #vend-cadastro-overlay,
.orc-root #dup-overlay, .orc-root #overlay{ position:absolute!important; }
/* kanban interno: colunas com largura mínima e ROLAGEM HORIZONTAL */
.orc-root .kanban-board{ grid-template-columns:none!important; grid-auto-flow:column!important;
  grid-auto-columns:minmax(280px,1fr)!important; overflow-x:auto!important; overflow-y:hidden!important; }
.orc-root .kanban-board > *{ min-height:0; overflow-y:auto; }
.orc-root .topbar{ position:relative!important; flex:0 0 auto; }
.orc-root .layout{ height:auto!important; flex:1; min-height:0; }
.orc-root #login-view, .orc-root #btn-logout, .orc-root .topbar .brand{ display:none!important; }
.orc-root .topbar{ background:transparent; border-bottom:1px solid var(--hair); height:auto; padding:10px 18px; }

/* impressão (PDF do orçamento): esconde o chrome do hub, deixa só o documento */
@media print{
  .topbar, .sidebar, .no-print{ display:none!important; }
  #app, .app-root, .main, .view-orc, .orc-root{ display:block!important; height:auto!important; overflow:visible!important; }
  /* Relatório Geral: vira documento limpo no papel (sem tema escuro/vidro) */
  /* compacto pra sair em menos folhas */
  #rel-body{ color:#1b2430; font-size:11px; }
  #rel-body h2{ color:#041f47!important; font-size:16px; margin:0 0 2px!important; }
  #rel-body h3, #rel-body h4{ color:#041f47!important; font-size:12px!important; margin:8px 0 4px!important; }
  #rel-body .muted{ color:#5a6677!important; }
  #rel-body .card{ background:#fff!important; box-shadow:none!important; border:1px solid #d6dae1!important; backdrop-filter:none!important; break-inside:avoid; padding:8px 10px!important; margin-bottom:8px!important; }
  #rel-body .kpi{ background:#fff!important; box-shadow:none!important; border:1px solid #d6dae1!important; backdrop-filter:none!important; break-inside:avoid; padding:6px 8px!important; }
  #rel-body .kpi-row{ gap:6px!important; }
  #rel-body .kpi-v{ color:#041f47!important; font-size:14px!important; }
  #rel-body .kpi-l{ color:#5a6677!important; font-size:10px!important; }
  #rel-body table.tbl{ font-size:10px; }
  #rel-body table.tbl th{ color:#3a4658!important; padding:3px 6px!important; }
  #rel-body table.tbl td{ color:#1b2430!important; padding:3px 6px!important; }
  #rel-body table.tbl tr{ break-inside:avoid; }

  /* O Plano Semanal imprime num documento auto-contido (#print-plano-doc, montado no
     relatorios.js) — idêntico no CRM Comercial e no Relatório Geral, sem herdar a moldura. */
}

/* ===== Relatório de Entregas (Regulatório) ===== */
.entregas-grid{ display:grid; grid-template-columns:340px 1fr; gap:22px; align-items:start; }
@media (max-width:980px){ .entregas-grid{ grid-template-columns:1fr; } }
.entregas-controls .fld{ display:block; margin:0 0 12px; }
.ent-cl-h, .ent-cat-h{ font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted,#6b7686); }
.ent-cat-h{ margin:12px 0 4px; opacity:.85; }
.ent-checklist{ max-height:60vh; overflow:auto; padding-right:6px; }
.ent-check{ display:flex; gap:9px; align-items:flex-start; padding:5px 4px; border-radius:7px; cursor:pointer; font-size:13.5px; }
.ent-check:hover{ background:rgba(0,67,216,.06); }
.ent-check input{ margin-top:2px; flex-shrink:0; }
.ent-doc-paper{ background:#fff url("/assets/img/timbrado.jpg") center/100% 100% no-repeat; aspect-ratio:210/297; padding:11.5% 9.5% 11%; border-radius:6px; box-shadow:0 1px 6px rgba(16,24,40,.18); border:1px solid #e4e7ec; box-sizing:border-box; overflow:visible; }
/* várias folhas A4 lado a lado (quando o texto passa de uma página) */
#ent-doc-wrap{ min-width:0; }
.ent-pages{ display:flex; gap:22px; align-items:flex-start; overflow-x:auto; padding:2px 2px 10px; }
.ent-page{ flex:0 0 auto; }
.ent-page-num{ text-align:center; margin-top:6px; color:var(--muted,#8a93a6); }
.entregas-doc ul.ed-itens li > [contenteditable]{ display:block; }
/* subitens (nível 2): mais recuados, com traço em vez do triângulo */
.entregas-doc ul.ed-subs{ list-style:none; margin:6px 0 2px; padding:0; }
.entregas-doc ul.ed-subs li{ position:relative; padding:0 0 6px 22px; text-align:justify; font-size:.96em; }
.entregas-doc ul.ed-subs li::before{ content:"\2013"; position:absolute; left:6px; top:0; color:#5b6675; font-weight:700; }
/* barrinha flutuante de formatação (Negrito / Sublinhado) */
.ent-fmt-bar{ position:absolute; z-index:60; display:none; gap:4px; background:#0b1830; border:1px solid #1e2f52; border-radius:8px; padding:4px; box-shadow:0 6px 20px rgba(0,0,0,.28); }
.ent-fmt-bar button{ width:30px; height:28px; border:0; border-radius:6px; background:transparent; color:#fff; font-size:14px; cursor:pointer; line-height:1; }
.ent-fmt-bar button:hover{ background:#1b2c4d; }
.muted.sm, .sm{ font-size:12.5px; }

/* ===== Calendário ===== */
.cal-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.cal-title{ font-size:18px; font-weight:700; min-width:190px; text-transform:capitalize; color:var(--text-strong); }
/* minmax(0,1fr): um evento longo (nowrap) NÃO estica a coluna — trunca com reticências;
   sem isso a coluna do evento engolia as outras (sex/sáb sumiam no celular) */
.cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.cal-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cal-dow{ background:var(--card); padding:8px 6px; text-align:center; font-size:11.5px; font-weight:700; color:var(--text-muted); letter-spacing:.03em; }
.cal-cell{ background:var(--card); min-height:104px; padding:6px 6px 8px; display:flex; flex-direction:column; gap:3px; cursor:pointer; transition:background .12s; }
.cal-cell:hover{ background:var(--hover-bg,rgba(0,67,216,.05)); }
.cal-cell.fora{ opacity:.38; }
.cal-daynum{ font-size:12.5px; font-weight:600; align-self:flex-start; color:var(--text); line-height:22px; }
.cal-cell.hoje .cal-daynum{ background:var(--accent,#0043d8); color:#fff; border-radius:50%; width:22px; text-align:center; }
.cal-ev{ font-size:11px; color:#fff; border-radius:5px; padding:2px 6px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.cal-ev.mais{ background:transparent !important; color:var(--text-muted); font-weight:600; padding:0 6px; }
.cal-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.cal-daycol{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px; min-height:160px; display:flex; flex-direction:column; gap:6px; }
.cal-daycol.hoje{ border-color:var(--accent,#0043d8); box-shadow:0 0 0 1px var(--accent,#0043d8); }
.cal-daycol h4{ margin:0 0 4px; font-size:12px; font-weight:700; text-align:center; }
.cal-daycol h4 .dnum{ display:block; font-size:18px; }
.cal-evrow{ color:#fff; border-radius:6px; padding:4px 7px; cursor:pointer; font-size:11.5px; }
.cal-evrow .h{ font-weight:700; opacity:.9; font-size:10.5px; }
.cal-legend{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; font-size:12px; }
.cal-leg{ display:inline-flex; align-items:center; gap:5px; }
.cal-leg .dot{ width:11px; height:11px; border-radius:3px; }

/* ===== Calendário — semana com grade de horários ===== */
.cal-wk{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.cal-wk-head{ display:grid; grid-template-columns:52px repeat(7,1fr); background:var(--card); border-bottom:1px solid var(--line); }
.cal-wk-head > div{ padding:6px 4px; text-align:center; font-size:12px; font-weight:700; border-left:1px solid var(--line); }
.cal-wk-head > div:first-child{ border-left:0; }
.cal-wk-head .hoje{ color:var(--accent,#0043d8); }
.cal-wk-allday{ display:grid; grid-template-columns:52px repeat(7,1fr); background:var(--card); border-bottom:1px solid var(--line); min-height:24px; }
.cal-wk-allday > div{ padding:2px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.cal-wk-allday > div:first-child{ border-left:0; font-size:10px; color:var(--text-muted); align-items:center; justify-content:center; }
.cal-wk-body{ display:grid; grid-template-columns:52px repeat(7,1fr); position:relative; max-height:62vh; overflow-y:auto; background:var(--card); }
.cal-wk-gutter{ display:flex; flex-direction:column; }
.cal-wk-hr{ height:44px; font-size:10.5px; color:var(--text-muted); text-align:right; padding-right:6px; box-sizing:border-box; border-top:1px solid var(--line); }
.cal-wk-day{ position:relative; border-left:1px solid var(--line); }
.cal-wk-day .slot{ height:44px; border-top:1px solid var(--line); cursor:pointer; }
.cal-wk-day .slot:hover{ background:var(--hover-bg,rgba(0,67,216,.05)); }
.cal-wk-ev{ position:absolute; left:2px; right:2px; color:#fff; border-radius:6px; padding:2px 5px; font-size:10.5px; overflow:hidden; cursor:pointer; z-index:2; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.cal-wk-ev .h{ font-weight:700; font-size:9.5px; opacity:.92; }
.cal-allday-ev{ color:#fff; border-radius:5px; padding:1px 5px; font-size:10px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===== CRM — Mapa de Calor (concentração por funil × etapa) ===== */
.heat-term-bar{ display:flex; height:14px; border-radius:8px; overflow:hidden; background:var(--track); }
.heat-term-bar span{ display:block; height:100%; }
.heat-legenda{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--tinta-2); margin-top:10px; }
.heat-pipe{ margin-top:14px; }
.heat-pipe-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.heat-cells{ display:flex; gap:10px; overflow-x:auto; padding:12px 2px 4px; }
.heat-cell{ flex:1; min-width:150px; border:1px solid var(--glass-border); border-radius:12px; padding:10px 12px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.heat-cell:hover{ transform:translateY(-2px); box-shadow:var(--glass-shadow); }
.heat-cell .hc-est{ font-size:11.5px; letter-spacing:.02em; text-transform:uppercase; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.heat-cell .hc-n{ font-size:26px; font-weight:800; line-height:1.2; font-variant-numeric:tabular-nums; }
.heat-cell .hc-sub{ font-size:12px; opacity:.82; }
.heat-cell .hc-temp{ font-size:12.5px; margin-top:6px; letter-spacing:.04em; }
.heat-cell .hc-conv{ font-size:11.5px; margin-top:4px; opacity:.9; }
.heat-perdidos{ border-left:3px solid var(--neg); }
/* a tabela vive num wrapper overflow-x — cabeçalho sticky viraria sanduíche (corta a 1ª linha) */
.heat-perdidos table.tbl th{ position:static; top:auto; }
.heat-modal-item{ display:flex; justify-content:space-between; gap:12px; align-items:center; padding:9px 10px; border:1px solid var(--glass-border); border-radius:10px; margin-bottom:8px; cursor:pointer; }
.heat-modal-item:hover{ background:color-mix(in srgb, var(--accent) 7%, var(--glass-bg)); }
.heat-modal-item.hm-perdido{ border-left:3px solid var(--neg); }
/* cartograma do Brasil — um tile por UF, calor pela concentração */
.geo-mapa{ display:grid; grid-template-columns:repeat(7, minmax(44px, 62px)); grid-auto-rows:minmax(44px, 62px); gap:7px; justify-content:center; padding:14px 0 6px; }
.geo-uf{ position:relative; border:1px solid var(--glass-border); border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.geo-uf:hover{ transform:translateY(-2px); box-shadow:var(--glass-shadow); z-index:2; }
.geo-uf .g-sigla{ font-size:11.5px; font-weight:700; letter-spacing:.05em; opacity:.8; }
.geo-uf .g-n{ font-size:16px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.geo-uf.g-vazio{ opacity:.34; cursor:default; }
.geo-uf.g-vazio:hover{ transform:none; box-shadow:none; }
.geo-uf .g-perd{ position:absolute; top:-6px; right:-6px; background:var(--neg); color:#fff; font-size:10px; font-weight:800; border-radius:999px; min-width:17px; height:17px; display:flex; align-items:center; justify-content:center; padding:0 4px; box-shadow:0 1px 4px rgba(0,0,0,.35); }
@media (max-width:640px){ .geo-mapa{ grid-template-columns:repeat(7, minmax(38px, 1fr)); grid-auto-rows:minmax(38px, 1fr); gap:5px; } .geo-uf .g-n{ font-size:13px; } }
/* aba Perdidos — gráfico dos motivos ao lado do resumo */
.perd-grid{ display:grid; grid-template-columns:280px 1fr; gap:22px; align-items:center; }
@media (max-width:760px){ .perd-grid{ grid-template-columns:1fr; } }
@media (max-width:720px){ .heat-cell{ min-width:134px; } }

/* ===== Origem do lead: canal digital (site/redes) = card destacado até o fim do funil =====
   Tema claro: leve lavada de azul sobre o card branco.
   Tema ESCURO: o azul lavado sumia no fundo escuro — então o card vira CLARO (destaca
   de longe no quadro escuro). Como o cartão claro inverte o contraste, as variáveis de
   cor são redefinidas DENTRO dele: texto, chips e as etiquetas coloridas (e-mail
   enviado, follow, faltam dados) leem var(--…) e se ajustam sozinhas. */
.kan-card.origem-azul{ background:color-mix(in srgb,#3B82F6 10%,var(--glass-bg)); }
.kan-card.origem-azul:hover{ background:color-mix(in srgb,#3B82F6 17%,var(--glass-bg)); }
.origem-mini{ font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); margin:-2px 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.origem-mini.azul{ color:#0B4FD1; }
.app-root[data-theme="dark"] .kan-card.origem-azul{
  --text-strong:#041F47; --text-body:#1B2733; --text-muted:#54627a; --text-subtle:#6b788e;
  --chip-bg:rgba(4,31,71,.08); --chip-fg:#1B2733;
  --hair:rgba(4,31,71,.16); --hair-soft:rgba(4,31,71,.10); --glass-border:#9DBEF5;
  --accent:#0B4FD1; --dc-success:#0E7C66; --pos:#0E7C66; --neg:#A11B2E; --dc-gold:#8a6d1a;
  background:#DCE9FF; border-color:#9DBEF5; box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.app-root[data-theme="dark"] .kan-card.origem-azul:hover{ background:#CBDFFF; border-color:#7FA9EF; }