@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;450;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
/* ══════════════════════════════════════════════════════════════════════════
   TINO CRM · DESIGN SYSTEM 2026 — azul profundo + azul tecnológico + dourado
   Enterprise premium. Tokens → componentes. Contrato de classes preservado.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* navy (estrutura, rail, títulos) */
  --navy-950:#06152F; --navy-900:#0A1B3D; --navy-800:#0F294F; --navy-700:#163A6B; --navy-600:#1E4E8C;
  /* azul tecnológico (ação primária, marca) */
  --blue-700:#1850A3; --blue-600:#2368CC; --blue-500:#3B82E6; --blue-100:#DCEAFF; --blue-50:#EEF5FF;
  /* dourado premium (destaque restrito) */
  --gold-700:#8A5E12; --gold-600:#B78319; --gold-500:#D1A23C; --gold-400:#E1BD68; --gold-100:#F7EEDA;
  /* neutros sofisticados (levemente frios) */
  --n-0:#FFFFFF; --n-25:#FBFCFE; --n-50:#F6F8FC; --n-100:#EDF1F7; --n-150:#E3E9F2; --n-200:#D6DEEC;
  --n-300:#BCC7DB; --n-400:#93A1BC; --n-500:#697894; --n-600:#4C5A76; --n-700:#33405A; --n-800:#1E2A44; --n-900:#111C33;
  /* semânticos (reservados) */
  --ok:#1F8E4B; --ok-bg:#E9F8EF; --warn:#B26B00; --warn-bg:#FFF4E0; --danger:#C0392B; --danger-bg:#FDECEA; --info:#2368CC; --info-bg:#EAF2FF; --violet:#6941C6; --violet-bg:#F1ECFB;
  /* papéis */
  --bg:var(--n-50); --card:var(--n-0); --card-2:var(--n-25); --sunken:var(--n-100);
  --line:var(--n-150); --line-2:var(--n-200);
  --ink:#0E1B33; --ink-2:#33405A; --muted:#697894; --faint:#93A1BC;
  --brand:var(--blue-600); --brand-strong:var(--blue-700); --brand-tint:var(--blue-50);
  --accent:var(--gold-500); --accent-strong:var(--gold-600); --accent-tint:var(--gold-100);
  --rail-1:#0A1B3D; --rail-2:#06152F; --rail-ink:#C3D2EC; --rail-ink-2:#7C8EB4; --rail-hair:rgba(255,255,255,.07);
  /* tipografia */
  --disp:"Sora",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  /* espaçamento base 4 · raio · elevação */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;
  --e1:0 1px 2px rgba(10,27,61,.06), 0 1px 3px rgba(10,27,61,.05);
  --e2:0 2px 6px rgba(10,27,61,.06), 0 12px 24px -14px rgba(10,27,61,.22);
  --e3:0 8px 24px rgba(10,27,61,.12), 0 30px 60px -24px rgba(10,27,61,.34);
  --ring:0 0 0 3px rgba(35,104,204,.30);
  --t-fast:120ms; --t:180ms; --t-slow:260ms; --ease:cubic-bezier(.2,.6,.2,1); --z-drawer:40; --z-sticky:20;
  color-scheme:light;
  /* ── ALIASES LEGADO (telas antigas usam estes nomes — mantidos) ── */
  --navy:var(--navy-800); --navy-2:var(--navy-900); --navy-3:var(--navy-700);
  --green:var(--ok); --green-2:#1F9E4E; --green-tint:var(--ok-bg);
  --blue:var(--brand); --blue-2:var(--brand-strong); --blue-tint:var(--brand-tint);
  --gold:var(--accent); --gold-2:var(--accent-strong); --gold-tint:var(--accent-tint);
  --red:var(--danger); --red-tint:var(--danger-bg); --amber:var(--warn); --amber-tint:var(--warn-bg); --violet-tint:var(--violet-bg);
  --rail-bg:var(--rail-1);
  --sh-1:var(--e1); --sh-2:var(--e2); --r:var(--r-md); --r-lg:var(--r-lg);
  --panel:var(--card); --panel-2:var(--card-2); --panel-3:var(--sunken); --inp:var(--card);
}
:root[data-theme="dark"]{
  --n-0:#0E1A31; --n-25:#0B1526; --n-50:#070E1E; --n-100:#0A1424;
  --bg:#070E1E; --card:#0E1A31; --card-2:#0B1526; --sunken:#0A1424;
  --line:rgba(150,170,210,.13); --line-2:rgba(150,170,210,.22);
  --ink:#EDF2FB; --ink-2:#C0CCE4; --muted:#8A9AB8; --faint:#5E6D8C;
  --brand:#3B82E6; --brand-strong:#2368CC; --brand-tint:rgba(59,130,230,.16);
  --accent:#E1BD68; --accent-strong:#D1A23C; --accent-tint:rgba(209,162,60,.15);
  --ok:#3FBE74; --ok-bg:rgba(31,142,75,.16); --warn:#E0A23C; --warn-bg:rgba(178,107,0,.18); --danger:#EF6E62; --danger-bg:rgba(192,57,43,.20); --info:#3B82E6; --info-bg:rgba(35,104,204,.18); --violet:#9E86E6; --violet-bg:rgba(105,65,198,.22);
  --rail-1:#0A1730; --rail-2:#05101F; --rail-ink:#BCCAE6; --rail-ink-2:#6C7EA4; --rail-hair:rgba(255,255,255,.06);
  --e1:0 1px 2px rgba(0,0,0,.5); --e2:0 2px 8px rgba(0,0,0,.5), 0 16px 30px -18px rgba(0,0,0,.7); --e3:0 12px 34px rgba(0,0,0,.55);
  --ring:0 0 0 3px rgba(59,130,230,.38);
  --green-tint:var(--ok-bg); --blue-tint:var(--brand-tint); --gold-tint:var(--accent-tint); --red-tint:var(--danger-bg); --amber-tint:var(--warn-bg); --violet-tint:var(--violet-bg);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0} html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;letter-spacing:-.006em}
a{color:inherit;text-decoration:none} button{font-family:inherit} b{font-weight:600} img{max-width:100%}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:3px solid transparent;background-clip:content-box}::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}

/* ── LAYOUT ── */
.shell{display:grid;grid-template-columns:230px 1fr;height:100vh;height:100dvh;overflow:hidden}
.main{grid-column:2;min-width:0;overflow-y:auto;background:var(--bg)}

/* ── RAIL / SIDEBAR ── */
.rail{grid-column:1;background:linear-gradient(178deg,var(--rail-1),var(--rail-2));display:flex;flex-direction:column;padding:var(--s4) var(--s3) var(--s3);gap:2px;overflow-y:auto;border-right:1px solid rgba(255,255,255,.04)}
.rail .brand{display:flex;align-items:center;justify-content:center;gap:11px;padding:var(--s2) var(--s2) var(--s4)}
.rail .logo{height:30px;width:auto;display:grid;place-items:center;flex:none;background:transparent}
.rail .logo img{height:30px;width:auto;object-fit:contain;display:block}
.rail .brand b{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.02em;color:#fff;display:block;line-height:1.05}
.rail .brand span{display:block;font-size:10.5px;color:var(--rail-ink-2);margin-top:2px}
.rhead{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--rail-ink-2);font-weight:700;padding:var(--s4) var(--s3) var(--s2)}
.rbtn{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-md);color:var(--rail-ink);font-weight:500;font-size:13.5px;cursor:pointer;position:relative;transition:background var(--t) var(--ease),color var(--t);border:1px solid transparent;text-decoration:none}
.rbtn:hover{background:rgba(255,255,255,.06);color:#fff}
.rbtn.on{background:rgba(59,130,230,.16);color:#fff;font-weight:600;border-color:rgba(122,170,255,.14)}
.rbtn.on::before{content:"";position:absolute;left:-11px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(var(--gold-400),var(--gold-600));box-shadow:0 0 10px rgba(209,162,60,.5)}
.rbtn.soon{opacity:.6}
.rbtn .ic{width:20px;text-align:center;font-size:15px;flex:none;display:grid;place-items:center}
.rbtn .ic svg{width:19px;height:19px;display:block}
.rbtn .badge{margin-left:auto;font-size:10px;font-family:var(--mono);background:var(--blue-600);color:#fff;border-radius:var(--r-pill);padding:1px 7px;font-weight:600}
.rbtn .badge.ex{background:linear-gradient(var(--gold-400),var(--gold-600));color:#3a2a00;font-family:var(--body);font-size:9px;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.rbtn .badge.mut{background:rgba(255,255,255,.12);color:var(--rail-ink)}
.rsp{flex:1;min-height:6px} .rdiv{height:1px;background:var(--rail-hair);margin:5px 6px}
.rfoot{border-top:1px solid var(--rail-hair);margin-top:var(--s2);padding-top:var(--s2)}
.thm{display:flex;gap:2px;background:rgba(255,255,255,.05);border-radius:var(--r-sm);padding:3px;margin:0 4px 6px}
.thm button{flex:1;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--rail-ink-2);background:none;border:0;border-radius:var(--r-xs);padding:6px 0;cursor:pointer;transition:var(--t)}
.thm button.on{background:var(--blue-600);color:#fff}
.rwho{font-size:10.5px;color:var(--rail-ink-2);font-family:var(--mono);padding:2px 10px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* BLINDAGEM: classes genéricas das páginas não vazam pro rail */
#tino-rail .ic{width:20px!important;height:auto!important;min-width:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;font-size:15px!important;display:grid!important;place-items:center!important;padding:0!important;flex:none!important;color:inherit!important}
#tino-rail .ic svg{width:19px!important;height:19px!important;display:block!important;stroke:currentColor}
#tino-rail .logo{height:30px!important;width:auto!important;border-radius:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible}
#tino-rail .logo img{height:30px!important;width:auto!important;object-fit:contain;display:block}
#tino-rail .badge{margin-left:auto}

/* ── PAGE HEADER ── */
.phead{display:flex;align-items:center;gap:12px;padding:var(--s5) var(--s8) var(--s3);flex-wrap:wrap}
.phead h1{font-family:var(--disp);font-weight:700;font-size:25px;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.phead .sub{font-size:13px;color:var(--muted);margin-top:3px}
.phead .r{margin-left:auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.pbody,.pad{padding:var(--s2) var(--s8) var(--s10)} .pad{padding:var(--s5) var(--s8) var(--s10)}

/* ── BUTTONS ── */
.btn{font-size:13px;font-weight:600;border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);border-radius:var(--r-md);padding:9px 15px;cursor:pointer;transition:var(--t) var(--ease);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1}
.btn:hover{border-color:var(--n-300);color:var(--ink);background:var(--card-2)}
.btn:active{transform:translateY(.5px)} .btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.pri{background:var(--brand);color:#fff;border-color:var(--brand)} .btn.pri:hover{background:var(--brand-strong);color:#fff}
.btn.grn{background:var(--brand);color:#fff;border-color:var(--brand)} .btn.grn:hover{background:var(--brand-strong);color:#fff}
.btn.gold{background:linear-gradient(150deg,var(--gold-400),var(--gold-600));color:#2a1e00;border-color:transparent} .btn.gold:hover{filter:brightness(1.04);color:#2a1e00}
.btn.ghost{background:transparent;border-color:transparent;color:var(--brand)} .btn.ghost:hover{background:var(--brand-tint);color:var(--brand-strong)}
.btn.danger{background:var(--danger);color:#fff;border-color:transparent} .btn.danger:hover{filter:brightness(1.06);color:#fff}
.btn.sm{font-size:11.5px;padding:6px 11px;border-radius:var(--r-sm)}
.btn.lg{font-size:14px;padding:12px 20px}
.btn.icon{padding:9px;width:38px;justify-content:center}
.btn .spin{width:13px;height:13px;border-width:2px;border-color:rgba(255,255,255,.45);border-top-color:currentColor}
.chip{font-size:12.5px;border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 13px;color:var(--muted);font-weight:500;background:var(--card);white-space:nowrap;cursor:pointer;transition:var(--t)}
.chip:hover{border-color:var(--line-2);color:var(--ink-2)}
.chip.on{background:var(--brand-tint);border-color:transparent;color:var(--brand)}

/* ── STATUS ── */
.st,.pill{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;background:var(--sunken);color:var(--muted);border:1px solid var(--line)}
.st::before,.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st.ok,.pill.grn{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.st.warn,.pill.amb{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.st.bad,.pill.red{background:var(--danger-bg);color:var(--danger);border-color:transparent}
.st.info,.pill.blu{background:var(--info-bg);color:var(--info);border-color:transparent}
.st.vio,.pill.vio{background:var(--violet-bg);color:var(--violet);border-color:transparent}
.st.pend{background:var(--accent-tint);color:var(--accent-strong);border-color:transparent}

/* ── KPIs ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s4);margin-bottom:var(--s5)}
.kpis.k6{grid-template-columns:repeat(6,1fr)} .kpis.k3{grid-template-columns:repeat(3,1fr)} .kpis.k4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1180px){.kpis.k6{grid-template-columns:repeat(3,1fr)}} @media(max-width:1000px){.kpis.k6,.kpis.k4,.kpis.k3{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--e1);transition:var(--t);position:relative}
.kpi:hover{box-shadow:var(--e2);transform:translateY(-1px)}
.kpi.hero{background:linear-gradient(160deg,var(--navy-800),var(--navy-950));border-color:transparent}
.kpi.hero .l,.kpi.hero .lb{color:#A9BCDD} .kpi.hero .n,.kpi.hero .v{color:#fff}
.kpi.hero::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;border-radius:0 var(--r-lg) var(--r-lg) 0;background:linear-gradient(var(--gold-400),var(--gold-600))}
.kpi .l,.kpi .lb{font-size:12px;color:var(--muted);font-weight:500}
.kpi .n,.kpi .v{font-family:var(--disp);font-weight:700;font-size:26px;margin:9px 0 5px;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;display:block}
.kpi .n small{font-size:14px;color:var(--muted);font-weight:500}
.kpi .n.g,.kpi .v.grn{color:var(--ok)} .kpi .n.a,.kpi .v.amb{color:var(--warn)} .kpi .n.r{color:var(--danger)} .kpi .v.blu{color:var(--brand)}
.kpi .d{font-size:12px;font-family:var(--mono);color:var(--muted);display:inline-flex;align-items:center;gap:4px} .kpi .d.up{color:var(--ok)} .kpi .d.dn{color:var(--danger)} .kpi .d.mu{color:var(--muted)}

/* ── CARDS / GRIDS ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5) var(--s6);box-shadow:var(--e1)}
.card.sel{border-color:var(--brand);box-shadow:var(--ring)} .card.crit{border-top:3px solid var(--danger)} .card.pos{border-top:3px solid var(--ok)}
.card h3{font-family:var(--disp);font-size:15.5px;font-weight:600;margin-bottom:5px;letter-spacing:-.01em;color:var(--ink)}
.card .sub{font-size:12.5px;color:var(--muted);margin-bottom:var(--s4);line-height:1.5}
.grid{display:grid;gap:var(--s4)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)} .g21{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s4)}
@media(max-width:1100px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:900px){.g2,.g3,.g4,.g21{grid-template-columns:1fr}}
.mb{margin-bottom:var(--s4)}

/* ── TABLES ── */
.tblw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--e1)}
table.tbl,.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:11px var(--s4);background:var(--card-2);border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:1}
.tbl td{padding:12px var(--s4);border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none} .tbl td:first-child{color:var(--ink);font-weight:600}
.tbl tbody tr{transition:background var(--t)} .tbl tr:hover td{background:var(--card-2)} .tbl tr.sel td{background:var(--brand-tint)}
.tbl .mono{font-family:var(--mono);font-size:12px} .tbl .money{font-family:var(--disp);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pager{display:flex;align-items:center;gap:4px;padding:var(--s3) var(--s4);border-top:1px solid var(--line)}
.pager .pg{min-width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-size:13px;cursor:pointer;display:grid;place-items:center} .pager .pg.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ── TABS ── */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:var(--s5);flex-wrap:wrap}
.tab{padding:11px var(--s4);font-weight:600;font-size:13.5px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--t);white-space:nowrap;background:none;border-top:0;border-left:0;border-right:0}
.tab:hover{color:var(--ink-2)} .tab.on{color:var(--ink);border-bottom-color:var(--accent)}
.tpane{display:none} .tpane.on{display:block}

/* ── LISTS / AVATAR ── */
.row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.row:last-child{border-bottom:none} .row .ic{width:36px;height:36px;border-radius:var(--r-md);display:grid;place-items:center;font-size:16px;flex:none;background:var(--sunken);border:1px solid var(--line)}
.row .t{font-weight:600;color:var(--ink)} .row .s{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45} .row .r{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.av{width:30px;height:30px;border-radius:50%;background:linear-gradient(150deg,var(--blue-500),var(--navy-700));display:grid;place-items:center;font-size:11px;color:#fff;font-weight:600;flex:none}
.bar{height:8px;border-radius:var(--r-pill);background:var(--sunken);overflow:hidden} .bar i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--brand-strong),var(--brand))}
.bar i.b{background:linear-gradient(90deg,var(--brand-strong),var(--blue-500))} .bar i.a{background:var(--accent)}

/* ── CHARTS ── */
.bars{display:flex;align-items:flex-end;gap:12px;height:124px;padding:0 4px;border-bottom:1px solid var(--line)}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end;position:relative}
.bars .b i{width:100%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--blue-500),var(--brand));transition:var(--t)} .bars .b i.m{background:linear-gradient(180deg,var(--gold-400),var(--gold-600))}
.bars .b small{font-size:10.5px;color:var(--muted);font-family:var(--mono)}
.donut{width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--brand) 0 56%,var(--gold-500) 56% 82%,var(--n-200) 82% 100%);display:grid;place-items:center;flex:none}
.donut::after{content:"";width:74px;height:74px;border-radius:50%;background:var(--card)}
.leg{font-size:13px;color:var(--ink-2);display:flex;flex-direction:column;gap:8px} .leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:middle}
.fstage{display:grid;grid-template-columns:120px 1fr 96px;gap:12px;align-items:center;margin-bottom:10px}
.fstage .fl{font-size:12.5px;color:var(--ink-2);font-weight:500}
.ftrack{background:var(--sunken);border-radius:var(--r-md);height:30px;display:flex;align-items:center;overflow:hidden;border:1px solid var(--line)}
.fbar{height:100%;border-radius:var(--r-md);display:flex;align-items:center;justify-content:flex-end;padding-right:10px;font-family:var(--mono);font-size:11px;color:#fff;font-weight:600;min-width:44px;background:linear-gradient(90deg,var(--brand-strong),var(--brand))}
.fstage .fr{text-align:right;font-family:var(--mono);font-size:12px;color:var(--muted)} .fstage .fr b{color:var(--ok)}
.banner{display:flex;align-items:center;gap:16px;background:linear-gradient(150deg,var(--navy-800),var(--navy-950));border-radius:var(--r-lg);padding:18px 22px;color:#EAF0FF;margin-bottom:var(--s5);position:relative;overflow:hidden;box-shadow:var(--e2)}
.banner::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--gold-400),var(--gold-600))}
.banner .e{font-size:28px} .banner h3{font-family:var(--disp);font-size:16px;color:#fff} .banner p{font-size:13px;color:#C4D0EA;margin-top:3px} .banner .r{margin-left:auto}

/* ── FORMS ── */
label{display:block;font-size:12px;color:var(--ink-2);font-weight:500;margin:14px 0 6px}
input,select,textarea{width:100%;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-md);color:var(--ink);font-family:var(--body);font-size:14px;padding:10px 13px;transition:var(--t)}
input:hover,select:hover,textarea:hover{border-color:var(--n-300)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
input:disabled,select:disabled,textarea:disabled{background:var(--sunken);color:var(--faint);cursor:not-allowed}
input.err,select.err,textarea.err{border-color:var(--danger)} input.ok{border-color:var(--ok)}
.help{font-size:11.5px;color:var(--muted);margin-top:5px} .help.err{color:var(--danger)} .help.ok{color:var(--ok)}
.switch{width:42px;height:24px;border-radius:var(--r-pill);background:var(--n-200);position:relative;cursor:pointer;transition:var(--t);flex:none;display:inline-block;vertical-align:middle}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--e1);transition:var(--t) var(--ease)} .switch.on{background:var(--brand)} .switch.on::after{left:20px}
.radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);display:inline-grid;place-items:center;cursor:pointer;vertical-align:middle} .radio.on{border-color:var(--brand)} .radio.on::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--brand)}

/* ── EMPTY / LOADING / ERROR ── */
.empty{display:grid;place-items:center;text-align:center;padding:var(--s12) var(--s5);color:var(--muted);gap:4px}
.empty .e{width:56px;height:56px;border-radius:var(--r-lg);background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;font-size:26px;margin-bottom:8px}
.empty b{color:var(--ink);font-family:var(--disp);font-size:18px} .empty p{color:var(--muted);font-size:13.5px;max-width:360px;margin-bottom:8px} .empty a{color:var(--brand);text-decoration:none;font-weight:600}
.empty.err-state .e,.err-state .e{background:var(--danger-bg);color:var(--danger)}
.soon-wrap{display:grid;place-items:center;text-align:center;padding:var(--s12) var(--s5)}
.soon-wrap .e{font-size:50px;margin-bottom:16px} .soon-wrap b{font-family:var(--disp);font-size:23px;color:var(--ink);display:block;margin-bottom:8px} .soon-wrap p{color:var(--muted);font-size:14px;max-width:440px;line-height:1.6}
.sk{background:linear-gradient(90deg,var(--sunken) 25%,var(--line) 37%,var(--sunken) 63%);background-size:400% 100%;animation:shim 1.3s ease infinite;border-radius:var(--r-sm)}
@keyframes shim{0%{background-position:100% 0}100%{background-position:-100% 0}}
.bn{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:80;background:var(--navy-900);color:#fff;border-radius:var(--r-md);padding:12px 18px;font-size:13px;box-shadow:var(--e3);display:none;max-width:90%} .bn.show{display:block}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line-2);border-top-color:var(--brand);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}@keyframes sp{to{transform:rotate(360deg)}}

/* ── MOBILE ── */
.hamb{display:none}
@media(max-width:920px){
  .shell{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;bottom:0;width:280px;transform:translateX(-100%);transition:transform var(--t-slow) var(--ease);z-index:var(--z-drawer);box-shadow:var(--e3)}
  .rail.open{transform:none}
  .rail-scrim{position:fixed;inset:0;background:rgba(6,21,47,.5);z-index:39;opacity:0;pointer-events:none;transition:var(--t)} .rail-scrim.on{opacity:1;pointer-events:auto}
  .main{grid-column:1}
  .hamb{display:grid;place-items:center;position:fixed;left:14px;top:12px;z-index:30;width:40px;height:40px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card);box-shadow:var(--e1);cursor:pointer;font-size:18px;color:var(--ink)}
  .phead{padding:var(--s4) var(--s4) var(--s3);padding-left:64px} .pbody,.pad{padding:var(--s2) var(--s4) var(--s10)}
}

/* ── TOPBAR (premium) ── */
.topbar{height:60px;flex:none;display:flex;align-items:center;gap:var(--s4);padding:0 var(--s8);background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:var(--z-sticky)}
.topbar .crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)} .topbar .crumbs b{color:var(--ink);font-weight:600} .topbar .crumbs .sep{color:var(--faint)}
.topbar .search{margin-left:var(--s4);flex:1;max-width:420px;position:relative}
.topbar .search input{height:38px;border-radius:var(--r-md);background:var(--sunken);border:1px solid transparent;padding:0 14px 0 38px;font-size:13.5px;width:100%}
.topbar .search input:focus{background:var(--card);border-color:var(--brand);box-shadow:var(--ring)}
.topbar .search .mag{position:absolute;left:12px;top:9px;color:var(--faint);font-size:15px}
.topbar .tb-r{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.iconbtn{width:38px;height:38px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;position:relative;transition:var(--t);font-size:16px}
.iconbtn:hover{border-color:var(--line-2);color:var(--ink);background:var(--card-2)}
.iconbtn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:2px solid var(--card)}
.theo-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:var(--r-md);border:1px solid var(--accent);color:var(--accent-strong);background:var(--accent-tint);font-weight:600;font-size:13px;cursor:pointer;transition:var(--t);text-decoration:none;white-space:nowrap}
.theo-btn:hover{background:var(--accent);color:#2a1e00}
@media(max-width:920px){ .topbar{padding:0 var(--s4) 0 60px;gap:var(--s2)} .topbar .search{display:none} .topbar .theo-btn span{display:none} .topbar .theo-btn{padding:0 11px} }
/* ── CONFIG DROPDOWN (⚙️ na topbar) ── */
.cfgwrap{position:relative}
.cfgmenu{position:absolute;right:0;top:46px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e3);padding:10px;min-width:230px;z-index:60}
.cfgsec{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:9px 8px 5px}
.cfgmenu>a{display:block;padding:9px 10px;border-radius:var(--r-sm);color:var(--ink-2);font-size:13.5px;font-weight:500;text-decoration:none}
.cfgmenu>a:hover{background:var(--card-2);color:var(--ink)}
.cfgmenu .thm{background:var(--sunken);margin:0 0 2px}
.cfgmenu .thm button{color:var(--muted)}
.cfgmenu .thm button.on{background:var(--brand);color:#fff}


/* ══ Perguntar ao Théo · drawer de conversa (copiloto só-leitura) ══ */
button.theo-btn{font:inherit;cursor:pointer}
.theo-scrim{position:fixed;inset:0;background:rgba(6,21,47,.34);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease);z-index:var(--z-drawer)}
.theo-scrim.on{opacity:1;visibility:visible}
.theo-drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,94vw);background:var(--card);border-left:1px solid var(--line);box-shadow:var(--e3);display:flex;flex-direction:column;transform:translateX(102%);transition:transform var(--t-slow) var(--ease);z-index:calc(var(--z-drawer) + 1)}
.theo-drawer.on{transform:none}
.theo-hd{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--navy-900),var(--navy-800));color:#fff}
.theo-ti{display:flex;flex-direction:column;line-height:1.25}
.theo-ti b{font-family:var(--disp);font-size:15px}
.theo-ti span{font-size:11px;color:var(--gold-400);letter-spacing:.02em}
.theo-x{margin-left:auto;background:rgba(255,255,255,.12);color:#fff;border:0;width:30px;height:30px;border-radius:8px;font-size:18px;line-height:1;cursor:pointer}
.theo-x:hover{background:rgba(255,255,255,.22)}
.theo-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.theo-msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere}
.theo-msg.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);color:var(--ink);border-top-left-radius:4px}
.theo-msg.me{align-self:flex-end;background:linear-gradient(150deg,var(--blue-600),var(--blue-700));color:#fff;border-top-right-radius:4px}
.theo-msg.err{background:var(--danger-bg);border-color:rgba(192,57,43,.3);color:var(--danger)}
.theo-msg i{opacity:.82}
.theo-msg a{color:var(--blue)}
.theo-foot{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--card)}
.theo-foot textarea{flex:1;resize:none;height:44px;max-height:120px;background:var(--card-2);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-family:var(--body);font-size:14px;padding:11px 12px;line-height:1.4}
.theo-foot textarea:focus{outline:none;border-color:var(--blue);background:var(--card)}
.theo-send{flex:0 0 44px;border:0;border-radius:10px;background:linear-gradient(150deg,var(--blue-600),var(--blue-700));color:#fff;font-size:16px;cursor:pointer}
.theo-send:hover{filter:brightness(1.06)}
.theo-dots{display:inline-flex;gap:4px;padding:2px 0}
.theo-dots i{width:6px;height:6px;border-radius:50%;background:var(--faint);display:inline-block;animation:theoB 1s infinite ease-in-out}
.theo-dots i:nth-child(2){animation-delay:.15s}
.theo-dots i:nth-child(3){animation-delay:.3s}
@keyframes theoB{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (max-width:560px){.theo-drawer{width:100vw;border-left:0}}

/* ══════════════════════════════════════════════════════════════════════════
   TINO CRM · CAMADA "PRECISION" (2026-09-16)
   Mesma família visual do Tino Financeiro: Space Grotesk nos títulos e
   números, Inter no texto. Anexada ao fim do shell (vence por ordem).
   Rollback: apagar deste comentário até o fim do arquivo.
   ══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("assets/fonts/space-grotesk-var-latin.woff2?v=1") format("woff2")}
@font-face{font-family:"Inter Local";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("assets/fonts/inter-var-latin.woff2?v=1") format("woff2")}
:root{
  --disp:"Space Grotesk","Inter","Inter Local",system-ui,sans-serif;
  --body:"Inter","Inter Local",system-ui,sans-serif;
  --tpm-ease:cubic-bezier(.16,1,.3,1);
  --tpm-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ── tipografia: rótulos pequenos em texto, não em fonte de código ─────── */
.kpi .d,.rwho,.bars .b small,.fstage .fr{font-family:var(--body)}
.kpi .n,.kpi .v{font-size:clamp(20px,1.7vw,26px);white-space:nowrap;letter-spacing:-.025em}
.kpis.k6 .kpi .n{font-size:clamp(19px,1.45vw,24px)}
.phead h1{letter-spacing:-.025em}
/* selo interno de produto não é informação para quem usa a tela */
.main .wl{display:none!important}
/* subtítulos das telas em texto normal (eram código em caixa-alta) */
.main .chead .sub,.main .wrap>.top .sub{font-family:var(--body);font-size:13.5px;letter-spacing:0;text-transform:none}
/* títulos de cartões de integração/canal: quebram linha em vez de cortar com "…" */
.main .card2 .ht b,.main .cx-ht b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
.main .card2 .ch,.main .cx-cc{flex-wrap:wrap;row-gap:8px}
.main .card2 .ch .ht,.main .cx-cc .cx-ht{flex:1 1 130px;min-width:130px}
/* telas com contêiner próprio: no celular, mesma margem das demais */
/* celular: o botão do Théo vira só o ícone (antes ficava uma cápsula vazia) */
@media(max-width:920px){ .topbar .theo-btn::before{content:"\2726";font-size:15px;line-height:1} .topbar .theo-btn{min-width:40px;justify-content:center} }
/* celular: o ☰ mora na barra do topo, então o título não precisa do recuo de 64px */
@media(max-width:920px){ .main>.wrap{padding-left:var(--s4);padding-right:var(--s4)} .main .phead{padding-left:var(--s4)} }

/* ── topo: busca, sino e engrenagem ───────────────────────────────────── */
.topbar .search{margin-bottom:0}
.topbar .search .mag{display:inline-flex;align-items:center}
.topbar .search .mag svg{width:16px;height:16px}
.topbar .search input[type=search]::-webkit-search-cancel-button{cursor:pointer}
.topbar .iconbtn{position:relative;display:inline-grid;place-items:center;color:var(--ink-2)}
.topbar .iconbtn svg{width:19px;height:19px}
.topbar .iconbtn:hover{color:var(--brand)}
#tino-bell .dot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--danger);color:#fff;font:700 10.5px/18px var(--body);text-align:center;box-shadow:0 0 0 2px var(--card);border:0;width:auto}
#tino-bell .dot[hidden]{display:none}
#tino-trial .trial-ic{display:inline-grid;place-items:center;color:var(--ok)}
.hamb{font:inherit;padding:0}

/* ── foco e toque ─────────────────────────────────────────────────────── */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
@media (hover:hover){
  .ico-card,.kpi,.card{transition:transform .28s var(--tpm-ease),box-shadow .28s var(--tpm-ease),border-color .2s ease}
  .ico-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -22px rgba(10,27,61,.45)}
  .ico-card .lg{transition:transform .35s var(--tpm-spring)}
  .ico-card:hover .lg{transform:scale(1.06) rotate(-3deg)}
  .kpi:hover{transform:translateY(-2px)}
  .rbtn{transition:background-color .18s ease,color .18s ease,padding-left .22s var(--tpm-ease)}
  .rbtn:not(.on):hover{padding-left:16px}
}
.btn,.theo-btn{transition:transform .16s var(--tpm-ease),box-shadow .16s ease,background-color .16s ease}
.btn:active,.theo-btn:active{transform:translateY(1px) scale(.99)}
.ico-card .lg svg{width:22px;height:22px;color:#fff}
.empty .e svg,.cempty .e svg{width:30px;height:30px;color:var(--brand)}

/* ── entradas (ligadas pelo shell.js na carga da tela) ─────────────────── */
@keyframes tpmIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tpm-in{animation:tpmIn .55s var(--tpm-ease) var(--tpm-d,0ms) both}
@keyframes tpmPane{from{opacity:0}to{opacity:1}}
.tpane.on{animation:tpmPane .3s ease both}
/* menu lateral e gaveta do Théo deslizam */
.cfgmenu:not([hidden]){animation:tpmIn .22s var(--tpm-ease) both}
.bn.show{animation:tpmIn .3s var(--tpm-spring) both}

@media (prefers-reduced-motion:reduce){
  .tpm-in,.tpane.on,.cfgmenu:not([hidden]),.bn.show{animation:none!important}
  .ico-card,.kpi,.card,.rbtn,.btn,.theo-btn,.ico-card .lg{transition:none!important}
}

/* ══ TINO CRM · PRODUTO MODERNO 2026.09 ══════════════════════════════════
   Acabamento operacional: menos ornamento, mais densidade útil e leitura.
   Mantém o contrato de classes e os fluxos do shell.js.                     */
:root{
  --brand:#245cc4;
  --brand-strong:#19499f;
  --brand-tint:rgba(36,92,196,.10);
  --card:#fff;
  --card-2:#f8faff;
  --line:#e1e8f2;
  --line-2:#d4deec;
  --e1:0 1px 2px rgba(13,34,68,.04),0 12px 28px -24px rgba(13,34,68,.36);
  --e2:0 18px 42px -32px rgba(13,34,68,.42);
}

.shell{grid-template-columns:248px minmax(0,1fr);background:#f5f7fb}
.rail{padding:18px 12px 12px;background:linear-gradient(180deg,#0b1c38 0%,#07152b 100%);box-shadow:12px 0 32px -28px rgba(4,16,38,.7)}
.rail .brand{justify-content:flex-start;padding:8px 10px 18px}
.rail .logo,.rail .logo img{height:34px}
.rhead{padding-top:20px;letter-spacing:.13em}
.rbtn{min-height:42px;border-radius:12px;padding:9px 11px}
.rbtn.on{background:rgba(84,139,242,.16);border-color:rgba(155,188,255,.16)}
.rbtn.on::before{left:-12px;top:10px;bottom:10px;width:3px;background:#89a9ff;box-shadow:none}

.main{background:linear-gradient(180deg,#f8faff 0%,#f4f7fb 220px)}
.topbar{min-height:68px;padding-inline:32px;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);border-bottom-color:var(--line);box-shadow:0 12px 28px -30px rgba(13,34,68,.45)}
.topbar .search{max-width:470px}
.topbar .search:focus-within{box-shadow:0 0 0 3px rgba(36,92,196,.13)}
.theo-btn{background:#fff;color:var(--brand-strong);border-color:#cfdcf0;box-shadow:none}
.theo-btn:hover{background:#f3f7ff;border-color:#aac3ec;box-shadow:none}
.phead{padding:30px 32px 14px}
.phead h1{font-size:clamp(24px,2vw,30px);letter-spacing:-.035em}
.pbody,.pad{padding-inline:32px;padding-bottom:48px}

.card,.kpi,.tblw{border-color:var(--line);box-shadow:var(--e1)}
.card{border-radius:16px}
.kpi{border-radius:16px;padding:18px}
.kpi.hero{background:linear-gradient(145deg,#112b57,#0a1a35)}
.kpi.hero::after{display:none}
.kpi .n,.kpi .v{margin-block:7px 4px}
.tblw{border-radius:16px}
.tbl th{background:#f8faff}
.btn{border-radius:10px;min-height:38px}
.btn.pri,.btn.grn{background:var(--brand);border-color:var(--brand)}
.btn.pri:hover,.btn.grn:hover{background:var(--brand-strong);border-color:var(--brand-strong)}
.chip.on{color:var(--brand-strong);background:rgba(36,92,196,.10)}

@media(max-width:920px){
  .shell{grid-template-columns:1fr}
  .topbar{min-height:62px;padding-inline:14px}
  .phead{padding:20px 16px 10px}
  .pbody,.pad{padding-inline:16px;padding-bottom:32px}
  .topbar .search{max-width:none}
}

/* Sistema de temas: os acabamentos do produto também respeitam o modo escuro. */
:root[data-theme="dark"] .shell{background:var(--bg)}
:root[data-theme="dark"] .main{background:linear-gradient(180deg,#0b1526 0%,#070e1e 220px)}
:root[data-theme="dark"] .topbar{background:rgba(14,26,49,.9);border-bottom-color:var(--line);box-shadow:0 12px 28px -30px rgba(0,0,0,.8)}
:root[data-theme="dark"] .theo-btn{background:var(--card);color:var(--ink);border-color:var(--line-2)}
:root[data-theme="dark"] .theo-btn:hover{background:var(--card-2);border-color:var(--brand)}
:root[data-theme="dark"] .kpi.hero{background:linear-gradient(145deg,#112b57,#07152b)}
:root[data-theme="dark"] .tbl th{background:var(--card-2)}

/* ══════════════════════════════════════════════════════════════════════════
   TINO CRM · RÉPLICA DA INTERFACE DO TINO FINANCEIRO (20/09/2026)
   Medidas tiradas da interface que está no ar (pacote canônico 20/09):
   menu claro 276px, cabeçalho 96px, item com ícone em quadrado azul,
   ativo com barra à esquerda, cartões brancos raio 20 e título Space Grotesk.
   Só aparência: rotas, rótulos, permissões e dados não mudam.
   Rollback: apagar deste comentário até o fim do arquivo.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --tino-blue-600:#2D68CF; --tino-blue-700:#2459B8; --tino-blue-ink:#1F5FBE; --tino-chip:#2F72D6;
  --tino-canvas:#F6F8FC; --tino-ink:#10213D; --tino-ink-2:#63738A; --tino-line:#DFE6EF;
  --tino-r-sm:8px; --tino-r-md:12px; --tino-r-lg:20px; --tino-r-pill:999px;
  --tino-font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --tino-font-text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tino-title-weight:650;
  --r-md:var(--tino-r-md); --r-lg:var(--tino-r-lg); --r-xl:var(--tino-r-lg);
}
:root:not([data-theme="dark"]){
  --brand:var(--tino-blue-600); --brand-strong:var(--tino-blue-700); --brand-tint:rgba(45,104,207,.10);
  --bg:var(--tino-canvas); --ink:var(--tino-ink); --ink-2:var(--tino-ink-2); --line:var(--tino-line);
}
body{font-family:var(--tino-font-text);color:var(--tino-ink)}
:root:not([data-theme="dark"]) body{background:var(--tino-canvas)}

/* ── MENU LATERAL CLARO (o "fundo claro") ─────────────────────────────── */
:root:not([data-theme="dark"]) .rail{
  width:276px;padding:0;gap:0;
  background:linear-gradient(180deg,#FBFCFF 0%,#F5F8FD 100%);
  border-right:1px solid #DBE5F2;
  box-shadow:10px 0 28px -26px rgba(18,47,91,.55)}
:root:not([data-theme="dark"]) .shell{grid-template-columns:276px 1fr}
:root:not([data-theme="dark"]) .brand{
  height:96px;min-height:96px;padding:18px 22px;justify-content:flex-start;
  background:rgba(255,255,255,.86);border-bottom:1px solid #E2E9F3;margin-bottom:6px}
:root:not([data-theme="dark"]) .rhead{
  font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#7B8AA1;padding:14px 12px 6px;margin:0 8px}
:root:not([data-theme="dark"]) .rbtn{
  min-height:44px;margin:2px 10px;padding:8px 12px;border-radius:13px;gap:11px;
  font-size:13px;font-weight:650;color:var(--tino-blue-ink);border:0}
/* o CRM tinha #tino-rail .ic com !important (ícone solto de 20px): seletor por ID
   vence classes, então a regra abaixo também usa o ID: aqui ele vira o
   quadrado azul do Financeiro, com a mesma força para vencer aquela regra */
:root:not([data-theme="dark"]) #tino-rail .rbtn .ic{
  width:36px!important;height:32px!important;min-width:36px!important;border-radius:var(--tino-r-sm)!important;
  background:var(--tino-chip)!important;border:0!important;color:#fff!important;display:grid!important;place-items:center!important;
  box-shadow:none!important;font-size:0!important}
:root:not([data-theme="dark"]) #tino-rail .rbtn .ic svg{width:18px!important;height:18px!important}
:root:not([data-theme="dark"]) #tino-rail .rfoot .rbtn .ic{width:28px!important;height:26px!important;min-width:28px!important;background:#5A78A6!important}
:root:not([data-theme="dark"]) .rbtn:hover{background:rgba(47,114,214,.07)}
:root:not([data-theme="dark"]) .rbtn.on{
  background:linear-gradient(100deg,#E9F1FF 0%,#F4F8FF 100%);color:var(--tino-blue-ink);font-weight:650;
  box-shadow:inset 3px 0 0 0 var(--tino-chip),0 7px 16px -14px rgba(31,95,190,.75)}
:root:not([data-theme="dark"]) .rbtn.soon{opacity:.55}
:root:not([data-theme="dark"]) .rbtn.soon .ic{background:#9FB4D4}
:root:not([data-theme="dark"]) .rfoot{
  margin:0 12px 12px;padding:12px 13px;border:1px solid #DCE6F3;border-radius:15px;
  background:rgba(255,255,255,.78)}
:root:not([data-theme="dark"]) .rwho{color:var(--tino-ink-2);font-size:12px}
:root:not([data-theme="dark"]) .rfoot .rbtn{margin:6px 0 0;min-height:38px}
:root:not([data-theme="dark"]) .badge.ex{background:var(--tino-chip);color:#fff}

/* ── TOPO, TÍTULOS E SUPERFÍCIES ──────────────────────────────────────── */
:root:not([data-theme="dark"]) .topbar{
  min-height:78px;background:transparent;backdrop-filter:none;
  border-bottom:1px solid var(--tino-line);padding:10px 26px;box-shadow:none}
.phead h1,.main .chead h1,.main .wrap>.top h1,h2,h3,.kpi .n,.kpi .v{font-family:var(--tino-font-display)}
.phead h1,.main .chead h1,.main .wrap>.top h1{font-size:24px;font-weight:var(--tino-title-weight);letter-spacing:-.02em;color:var(--tino-ink)}
:root:not([data-theme="dark"]) .card,:root:not([data-theme="dark"]) .kpi,:root:not([data-theme="dark"]) .tblw{
  background:#fff;border:1px solid var(--tino-line);border-radius:var(--tino-r-lg);
  box-shadow:0 -1px 0 0 inset rgba(11,21,38,.06),-1px 1px 2px -1px rgba(11,21,38,.16),-6px 8px 16px -12px rgba(11,21,38,.28)}
:root:not([data-theme="dark"]) .kpi{padding:16px}
.kpi .l{font-size:10.5px;font-weight:850;letter-spacing:.055em;text-transform:uppercase;color:var(--tino-ink-2)}
.kpi .n,.kpi .v{font-size:22px;font-weight:600;letter-spacing:-.022em;color:var(--tino-ink);font-variant-numeric:tabular-nums}
.btn{border-radius:var(--tino-r-md)}
.btn.pri,.btn.grn{background:var(--tino-blue-600);color:#fff;font-weight:800;min-height:43px}
.btn.pri:hover,.btn.grn:hover{background:var(--tino-blue-700)}
/* sem vidro fosco e sem quique (padrão do Financeiro) */
@media (hover:hover){
  .ico-card .lg{transition:transform .2s var(--tpm-ease)}
  .ico-card:hover .lg{transform:scale(1.05)}
}
@media (max-width:920px){
  :root:not([data-theme="dark"]) .rail{width:280px}
  :root:not([data-theme="dark"]) .shell{grid-template-columns:1fr}
}

/* a logo embutida no shell.js é a versão branca (feita para menu escuro):
   no menu claro ela sumia. Troca só visual, sem tocar no JavaScript. */
:root:not([data-theme="dark"]) #tino-rail .brand .logo img{content:url("/assets/fluxogo-20260930/logo.svg");height:30px!important;width:auto!important}


/* ── LEGIBILIDADE NO TEMA CLARO (auditoria 20/09) ──────────────────────────
   Os cinzas de apoio vinham do tema escuro: sobre as superfícies claras eles
   ficavam abaixo do mínimo de acessibilidade (4,5:1 para texto normal).
   Medidos em 14 telas: 81 textos reprovavam. A hierarquia continua a mesma,
   só os dois tons de apoio escurecem. */
:root:not([data-theme="dark"]){
  --muted:#5A6B82;   /* 5,4:1 no branco · 5,1:1 no fundo claro (era #697894) */
  --faint:#63738A;   /* 4,8:1 no branco · 4,5:1 no fundo claro (era #93A1BC) */
}
/* coluna vazia do funil */
:root:not([data-theme="dark"]) .kbempty{color:#5A6B82}
/* link "Ver planos" na faixa de teste grátis */
/* faixa de teste grátis: o link "Ver planos" era verde-claro demais */
:root:not([data-theme="dark"]) #tino-trial .btn,:root:not([data-theme="dark"]) #tino-trial a{color:#13623A}
/* números dos indicadores: 20px com peso 600 não conta como "texto grande" */
:root:not([data-theme="dark"]) .kpi .n,:root:not([data-theme="dark"]) .kpi .v{color:var(--ink)}
/* avatar do topo e ícone do rodapé do menu */
:root:not([data-theme="dark"]) .av{background:linear-gradient(150deg,#2D68CF,#0F294F)}
:root:not([data-theme="dark"]) #tino-rail .rfoot .rbtn .ic{background:#55739F!important}
/* selos de status: as cores vinham do tema escuro e não passavam sobre o tinte claro */
:root:not([data-theme="dark"]){
  --ok:#137A3E; --warn:#8A5300; --danger:#A62F22; --info:#1B57B0;
  --green:var(--ok); --amber:var(--warn); --red:var(--danger);
}

/* Canais: o glifo é branco sobre a cor de cada canal; nas cores claras (telefonia,
   e-mail) ficava quase invisível. Um véu escuro por dentro do quadrado resolve
   sem trocar a cor da marca de cada canal. */
:root:not([data-theme="dark"]) .cx-ic{box-shadow:inset 0 0 0 999px rgba(11,21,38,.22)}

/* ── MODO NOTURNO (24/09) ──────────────────────────────────────────────────
   O bloco "Réplica do Tino Financeiro" (20/09) acima fixou --tino-ink (azul-marinho
   escuro) direto em body, títulos de página e números dos KPIs, sem olhar o tema:
   no escuro dava texto escuro sobre superfície escura (título e valores sumiam).
   :where() zera a especificidade do seletor de tema — empata com as regras de cima,
   ganha por vir depois e NÃO atropela as variantes semânticas (.kpi .v.grn/.amb,
   .kpi.hero .v etc.). Tema claro: nenhuma linha muda. */
:where(:root[data-theme="dark"]) body{color:var(--ink)}
:where(:root[data-theme="dark"]) .phead h1,
:where(:root[data-theme="dark"]) .main .chead h1,
:where(:root[data-theme="dark"]) .main .wrap>.top h1{color:var(--ink)}
:where(:root[data-theme="dark"]) .kpi .n,
:where(:root[data-theme="dark"]) .kpi .v{color:var(--ink)}
:where(:root[data-theme="dark"]) .kpi .l{color:var(--muted)}