/* ===========================================================================
   Ignite Quotation — design system (paleta + fontes preservadas do visual antigo)
   Layout novo: dashboard com sidebar (padrão de painel de gestão SaaS).
   =========================================================================== */
:root{
  --bg-0:#05080F; --bg-1:#070B18; --bg-2:#0A1120;
  --border-1:rgba(255,255,255,.06); --border-2:rgba(255,255,255,.10); --border-3:rgba(255,255,255,.16);
  --text-0:#F1F5F9; --text-1:#E2E8F0; --text-2:#CBD5E1; --text-3:#94A3B8; --text-4:#64748B;
  --brand-300:#7DD3EA; --brand-400:#22D3EE; --brand-500:#06B6D4; --brand-600:#0891B2; --brand-700:#0E7490;
  --wa-500:#10B981; --wa-600:#059669;
  --amber:#FBBF24; --amber-600:#F59E0B; --red:#EF4444; --red-300:#FCA5A5; --green:#34D399;
  --radius-sm:8px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.22),0 1px 2px -1px rgba(0,0,0,.15);
  --shadow-md:0 8px 24px -12px rgba(0,0,0,.5),0 2px 8px -4px rgba(0,0,0,.3);
  --shadow-lg:0 16px 36px -16px rgba(0,0,0,.55),0 4px 12px -6px rgba(0,0,0,.25);
  --ring-soft:0 0 0 1px rgba(6,182,212,.45),0 0 0 3px rgba(6,182,212,.16);
  --sidebar-w:250px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; font-family:'Inter',system-ui,sans-serif; }
body{ color:var(--text-1); background:var(--bg-0); -webkit-font-smoothing:antialiased; min-height:100vh; }
body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(148,163,184,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.018) 1px,transparent 1px);
  background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse 115% 95% at 60% 18%, rgba(0,0,0,.62), transparent 90%); mask-image:radial-gradient(ellipse 115% 95% at 60% 18%, rgba(0,0,0,.62), transparent 90%); }
h1,h2,h3,h4,.font-display{ font-family:'Space Grotesk','Inter',sans-serif; color:var(--text-0); margin:0; }
h1{ font-weight:700; letter-spacing:-.025em; }
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }
::selection{ background:rgba(6,182,212,.35); color:#fff; }
a{ color:inherit; text-decoration:none; }
[x-cloak]{ display:none !important; }
.muted{ color:var(--text-3); } .muted-2{ color:var(--text-4); }

/* ---------- app shell ---------- */
.app{ position:relative; z-index:1; min-height:100vh; display:grid; grid-template-columns:var(--sidebar-w) 1fr; }
.sidebar{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#080D17,#06090F); border-right:1px solid var(--border-1); backdrop-filter:blur(12px); }
.sidebar__brand{ display:flex; align-items:center; gap:11px; padding:20px 18px 16px; }
.sidebar__logo{ width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 4px 12px rgba(6,182,212,.35)); }
.brand-name{ font-family:'Space Grotesk'; font-weight:700; font-size:14px; letter-spacing:.02em; color:var(--text-0); line-height:1.1; }
.brand-sub{ font-family:'JetBrains Mono'; font-size:9.5px; color:var(--brand-400); letter-spacing:.12em; margin-top:2px; }
.sidebar__nav{ flex:1; padding:8px 12px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.nav-label{ font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-4); font-weight:600; padding:14px 10px 6px; }
.nav-item{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--radius-md); font-size:13.5px; font-weight:500; color:var(--text-3); cursor:pointer; border:1px solid transparent; transition:all .13s ease; position:relative; }
.nav-item svg{ width:17px; height:17px; flex:none; stroke-width:1.9; }
.nav-item:hover{ color:var(--text-1); background:rgba(255,255,255,.03); }
.nav-item.active{ color:var(--brand-300); background:linear-gradient(90deg,rgba(6,182,212,.14),rgba(6,182,212,.04)); border-color:rgba(6,182,212,.22); }
.nav-item.active::before{ content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3px; height:18px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--brand-400),var(--brand-600)); }
.sidebar__foot{ padding:12px; border-top:1px solid var(--border-1); }
.userchip{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--radius-md); }
.avatar{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-family:'Space Grotesk'; font-weight:700; font-size:14px; color:#031018; background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); flex:none; }
.userchip__meta{ min-width:0; } .userchip__name{ font-size:12.5px; font-weight:600; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.userchip__mail{ font-size:10.5px; color:var(--text-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:'JetBrains Mono'; }

.main{ min-width:0; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 24px; background:rgba(6,9,15,.7); backdrop-filter:blur(14px); border-bottom:1px solid var(--border-1); }
.topbar__title h1{ font-size:18px; } .topbar__title p{ margin:2px 0 0; font-size:12.5px; color:var(--text-3); }
.content{ padding:20px 26px 30px; max-width:1480px; width:100%; }
.hamburger{ display:none; }
.ov-split{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:14px; align-items:start; }
@media (max-width:900px){ .ov-split{ grid-template-columns:1fr; } }

/* ---------- cards / kpis ---------- */
.card{ background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)); border:1px solid var(--border-1); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.card-hover{ transition:all .2s cubic-bezier(.4,0,.2,1); }
.card-hover:hover{ border-color:rgba(6,182,212,.35); background:linear-gradient(180deg,rgba(6,182,212,.06),rgba(34,211,238,.015)); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.grid{ display:grid; gap:13px; }
.kpi{ padding:16px 16px 14px; border-radius:var(--radius-lg); border:1px solid var(--border-1); background:linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.01)); position:relative; overflow:hidden; }
.kpi__ico{ position:absolute; right:14px; top:14px; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--brand-300); background:rgba(6,182,212,.10); border:1px solid rgba(6,182,212,.22); }
.kpi__ico svg{ width:16px; height:16px; stroke-width:1.9; }
.kpi__label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-4); font-weight:600; }
.kpi__value{ font-family:'Space Grotesk'; font-weight:700; font-size:24px; color:var(--text-0); margin-top:4px; letter-spacing:-.02em; }
.kpi__value .u{ font-size:14px; color:var(--text-4); font-weight:500; }
.kpi__sub{ font-size:12px; color:var(--text-3); margin-top:3px; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:20px 0 11px; }
.section-head h2{ font-size:16px; } .section-head p{ margin:3px 0 0; font-size:12.5px; color:var(--text-3); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 16px; border-radius:var(--radius-md); font-weight:500; font-size:13px; border:1px solid transparent; cursor:pointer; transition:all .15s ease; white-space:nowrap; }
.btn svg{ width:15px; height:15px; stroke-width:2; }
.btn:disabled{ opacity:.5; cursor:not-allowed; } .btn:active:not(:disabled){ transform:scale(.98); }
.btn-primary{ background:linear-gradient(135deg,var(--brand-400) 0%,var(--brand-500) 55%,var(--brand-600) 100%); color:#031018; font-weight:600; box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 4px 14px -4px rgba(6,182,212,.45); }
.btn-ghost{ background:rgba(255,255,255,.04); color:var(--text-1); border-color:var(--border-1); }
.btn-ghost:hover{ border-color:var(--border-2); background:rgba(255,255,255,.06); }
.btn-danger{ background:rgba(239,68,68,.10); color:var(--red-300); border-color:rgba(239,68,68,.22); }
.btn-danger:hover{ border-color:rgba(239,68,68,.45); }
.btn-wa{ background:linear-gradient(135deg,var(--wa-500),var(--wa-600)); color:#022; font-weight:600; }
.btn-sm{ padding:7px 12px; font-size:12px; border-radius:var(--radius-sm); } .btn-lg{ padding:13px 22px; font-size:14px; }

/* ---------- forms ---------- */
.input,.select{ width:100%; background:rgba(5,8,15,.6); border:1px solid var(--border-1); color:var(--text-0); border-radius:var(--radius-md); padding:11px 14px; font-size:13.5px; outline:none; font-family:inherit; transition:all .15s ease; }
.input:focus,.select:focus{ border-color:var(--brand-500); box-shadow:var(--ring-soft); background:rgba(5,8,15,.92); }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }
.label{ display:block; font-size:11px; font-weight:600; color:var(--text-3); margin-bottom:7px; text-transform:uppercase; letter-spacing:.07em; }

/* ---------- pills / badges ---------- */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:500; border:1px solid transparent; }
.pill-green{ background:rgba(16,185,129,.12); color:var(--green); border-color:rgba(16,185,129,.30); }
.pill-red{ background:rgba(239,68,68,.12); color:var(--red-300); border-color:rgba(239,68,68,.30); }
.pill-yellow{ background:rgba(245,158,11,.12); color:var(--amber); border-color:rgba(245,158,11,.30); }
.pill-slate{ background:rgba(148,163,184,.12); color:var(--text-2); border-color:rgba(148,163,184,.30); }
.pill-cyan{ background:rgba(6,182,212,.12); color:var(--brand-300); border-color:rgba(6,182,212,.28); }

/* avisos/mensagens (quadrados, largura total) — substituem os "balões" .pill em alertas */
.note{ width:100%; padding:10px 13px; border-radius:var(--radius-md); font-size:12.5px; font-weight:500; border:1px solid transparent; line-height:1.45; }
.note-green{ background:rgba(16,185,129,.10); color:var(--green); border-color:rgba(16,185,129,.30); }
.note-red{ background:rgba(239,68,68,.10); color:var(--red-300); border-color:rgba(239,68,68,.30); }
.note-amber{ background:rgba(245,158,11,.10); color:var(--amber); border-color:rgba(245,158,11,.30); }
.note-slate{ background:rgba(148,163,184,.10); color:var(--text-2); border-color:rgba(148,163,184,.28); }
.note-cyan{ background:rgba(6,182,212,.10); color:var(--brand-300); border-color:rgba(6,182,212,.28); }
.dot{ width:6px; height:6px; border-radius:999px; background:currentColor; }

/* ---------- bars ---------- */
.bar{ height:8px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.bar>span{ display:block; height:100%; border-radius:999px; transition:width .35s ease; }
.bar-lg{ height:12px; }
.bar-cyan>span{ background:linear-gradient(90deg,var(--brand-400),var(--brand-500)); }
.bar-yellow>span{ background:linear-gradient(90deg,var(--amber),var(--amber-600)); }
.bar-red>span{ background:linear-gradient(90deg,#F87171,var(--red)); }

/* ---------- tables ---------- */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-4); font-weight:600; padding:11px 14px; border-bottom:1px solid var(--border-1); }
.tbl td{ padding:13px 14px; border-bottom:1px solid var(--border-1); font-size:13.5px; color:var(--text-2); }
.tbl tbody tr:last-child td{ border-bottom:none; }
.tbl tbody tr{ transition:background .12s; } .tbl tbody tr:hover td{ background:rgba(6,182,212,.045); }
.tbl .strong{ color:var(--text-0); font-weight:600; }

/* ---------- segmented tabs ---------- */
.seg{ display:inline-flex; padding:3px; gap:3px; background:rgba(255,255,255,.04); border:1px solid var(--border-1); border-radius:var(--radius-md); }
.seg__item{ padding:7px 15px; border-radius:7px; font-size:12.5px; font-weight:500; color:var(--text-3); cursor:pointer; transition:all .13s; }
.seg__item.active{ background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); color:#031018; font-weight:600; }

/* ---------- empty state ---------- */
.empty{ text-align:center; padding:52px 20px; color:var(--text-3); }
.empty svg{ width:38px; height:38px; margin:0 auto 12px; color:var(--text-4); stroke-width:1.5; opacity:.7; }

/* ---------- modal ---------- */
.overlay{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); }
.modal{ width:100%; max-width:460px; padding:24px; border-radius:var(--radius-xl); background:linear-gradient(180deg,rgba(10,15,30,.98),rgba(7,11,24,.98)); border:1px solid var(--border-2); box-shadow:var(--shadow-lg); }
.modal h3{ font-size:17px; }

/* ---------- misc ---------- */
.divider{ height:1px; background:var(--border-1); margin:18px 0; }
.chip-key{ font-family:'JetBrains Mono'; font-size:11px; background:rgba(255,255,255,.05); border:1px solid var(--border-1); border-radius:6px; padding:2px 7px; color:var(--text-3); }
.loading-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; color:var(--text-4); font-size:13px; }
.spin{ animation:spin 1s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- status icon (tick verde / atenção amarelo / x vermelho) ---------- */
.sic{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; white-space:nowrap; }
.sic .ic{ width:20px; height:20px; border-radius:999px; display:grid; place-items:center; flex:none; }
.sic .ic svg{ width:12px; height:12px; stroke-width:2.6; }
.sic .lbl{ color:var(--text-2); }
.sic--ok .ic{ background:rgba(16,185,129,.14); border:1px solid rgba(16,185,129,.4); color:#10B981; }
.sic--warn .ic{ background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.42); color:#F59E0B; }
.sic--bad .ic{ background:rgba(239,68,68,.13); border:1px solid rgba(239,68,68,.4); color:#EF4444; }
.sic--muted .ic{ background:rgba(148,163,184,.12); border:1px solid var(--border-2); color:var(--text-4); }

/* ---------- seguradoras: card + toggle + logo ---------- */
.prov-card{ padding:0; overflow:hidden; transition:border-color .18s; }
.prov-card.is-on{ border-color:rgba(6,182,212,.35); }
.prov-head{ display:flex; align-items:center; gap:14px; padding:18px 18px; }
.prov-body{ padding:4px 18px 18px; border-top:1px solid var(--border-1); }
.prov-off{ padding:16px 18px 20px; border-top:1px solid var(--border-1); color:var(--text-3); font-size:13px; line-height:1.5; }
.prov-logo{ width:56px; height:56px; border-radius:14px; overflow:hidden; flex:none; display:grid; place-items:center; background:#fff; border:1px solid var(--border-2); box-shadow:0 8px 20px -10px rgba(0,0,0,.6); }
.prov-logo img{ width:100%; height:100%; object-fit:contain; padding:5px; display:block; }
.prov-logo .fallback{ display:none; width:100%; height:100%; place-items:center; font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:24px; letter-spacing:-1px; color:#fff; background:linear-gradient(135deg,#0EA5A0,#10B981); }
.prov-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; line-height:1.15; }
.prov-status{ font-size:12px; margin-top:3px; color:var(--text-3); display:flex; align-items:center; gap:6px; }
.prov-status.on{ color:#34D399; }
.prov-status .dot{ width:7px; height:7px; border-radius:999px; background:currentColor; flex:none; box-shadow:0 0 0 3px rgba(52,211,153,.14); }

.switch{ position:relative; display:inline-flex; width:46px; height:26px; flex:none; cursor:pointer; }
.switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:2; }
.switch .track{ position:absolute; inset:0; border-radius:999px; background:rgba(148,163,184,.22); border:1px solid var(--border-2); transition:.18s; }
.switch .knob{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:.18s; }
.switch input:checked ~ .track{ background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); border-color:transparent; }
.switch input:checked ~ .knob{ transform:translateX(20px); }
.switch input:focus-visible ~ .track{ box-shadow:var(--ring-soft); }

/* ---------- como funciona (tutorial) ---------- */
.howto-hero{ background:linear-gradient(135deg,rgba(6,182,212,.10),rgba(16,185,129,.05) 60%,transparent); border:1px solid rgba(6,182,212,.22); }
.howto-hero-ico{ width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center; color:#031018; background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); box-shadow:0 8px 20px -8px rgba(6,182,212,.55); }
.howto-hero-ico svg{ width:24px; height:24px; stroke-width:2.2; }
.howto-step{ display:flex; gap:16px; align-items:flex-start; }
.howto-num{ width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:15px; color:#031018; background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); box-shadow:0 6px 16px -6px rgba(6,182,212,.5); }
.howto-tag{ font-size:11px; font-weight:600; letter-spacing:.02em; padding:2px 9px; border-radius:999px; background:rgba(148,163,184,.14); border:1px solid var(--border-2); color:var(--text-3); white-space:nowrap; }
.howto-list{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:9px; }
.howto-list li{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text-2); line-height:1.5; }
.howto-list li svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--brand-400); stroke-width:2.4; }

.botnum{ margin-top:14px; border-radius:var(--radius-lg); border:1px solid rgba(16,185,129,.34); background:linear-gradient(135deg,rgba(16,185,129,.10),rgba(6,182,212,.05)); padding:16px 18px; }
.botnum__label{ font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:#34D399; font-weight:600; display:flex; align-items:center; gap:7px; }
.botnum__label svg{ width:15px; height:15px; stroke-width:2.2; }
.botnum__value{ font-size:24px; font-weight:700; letter-spacing:.01em; color:var(--text-1); margin:6px 0 12px; }
.botnum__actions{ display:flex; flex-wrap:wrap; gap:8px; }
.botnum__actions .btn svg{ width:15px; height:15px; }

/* ---------- banner de cobrança (assinante) ---------- */
.bill-banner{ display:flex; align-items:flex-start; gap:12px; padding:13px 16px; border-radius:var(--radius-lg); font-size:13.5px; line-height:1.5; }
.bill-banner svg{ width:20px; height:20px; flex:none; margin-top:1px; stroke-width:2.2; }
.bill-banner--bad{ background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.34); color:#FCA5A5; }
.bill-banner--bad b{ color:#F87171; }
.bill-banner--warn{ background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.34); color:#FCD34D; }
.bill-banner--warn b{ color:#F59E0B; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; z-index:70; width:var(--sidebar-w); transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:translateX(0); }
  .scrim{ position:fixed; inset:0; z-index:65; background:rgba(0,0,0,.6); backdrop-filter:blur(2px); }
  .hamburger{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:var(--radius-md); border:1px solid var(--border-1); background:rgba(255,255,255,.04); color:var(--text-1); cursor:pointer; }
  .topbar{ padding:14px 18px; } .content{ padding:18px; }
}