/* =====================================================================
   Clube Investvida — Design System (app.css)
   Estático, sem build e sem CDN. Marca: Opção A. Hospedagem Business.
   ===================================================================== */
:root{
  --amber:#F8A600; --orange:#E94D11; --blue:#005092;
  --navy:#062A4A; --navy-2:#0E4C93; --ink:#15263C; --surface:#E7ECF3;
  --card:#FFFFFF; --line:#E5EAF1; --muted:#586A7E; --faint:#8792A3;
  --ok:#1E7A3D; --ok-bg:#E3F2E8; --warn:#9A6700; --warn-bg:#FBF3DD;
  --danger:#B3261E; --danger-bg:#FBE3E1; --info-bg:#E7F0FA;
  --heading:#062A4A; --sidebar:#062A4A; --topbar:#FFFFFF; --table-head:#F7F9FB; --hover:#F5F8FB;
  --r-sm:6px; --r:8px; --r-lg:14px; --pill:999px;
  --shadow:0 8px 24px rgba(6,42,74,.06);
  --focus:0 0 0 3px rgba(0,80,146,.25);
}
/* ---------- Design System v2 (aditivo — nada acima foi removido) ----------
   Escalas consistentes de tipografia, espaço, elevação e movimento. Novos
   componentes usam estas variáveis; os componentes antigos seguem intactos. */
:root{
  /* Tipografia (type scale ~1.25) */
  --fs-xs:11px; --fs-sm:12px; --fs-md:14px; --fs-lg:16px;
  --fs-xl:20px; --fs-2xl:25px; --fs-3xl:31px;
  --lh-tight:1.2; --lh-normal:1.5;
  /* Espaçamento base 4pt (ritmo consistente) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  /* Elevação em níveis (hierarquia por sombra, não só por borda) */
  --e-0:none;
  --e-1:0 1px 2px rgba(6,42,74,.05);
  --e-2:0 2px 8px rgba(6,42,74,.06),0 1px 2px rgba(6,42,74,.04);
  --e-3:0 12px 32px rgba(6,42,74,.10),0 3px 8px rgba(6,42,74,.06);
  /* Movimento */
  --ease:cubic-bezier(.2,.8,.2,1); --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  /* Raio extra-pequeno (já existem r-sm/r/r-lg/pill) */
  --r-xs:4px;
}
html[data-theme="dark"]{
  --e-1:0 1px 2px rgba(0,0,0,.4);
  --e-2:0 4px 12px rgba(0,0,0,.45);
  --e-3:0 12px 32px rgba(0,0,0,.55);
}
/* Respeita quem pede menos animação (acessibilidade) */
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }
/* ---------- Dark mode ---------- */
html[data-theme="dark"]{
  --ink:#E6EDF6; --surface:#0E2C48; --card:#1D456B; --line:#31577E;
  --muted:#9FB0C7; --faint:#6E7E96; --heading:#EAF1FB; --navy-2:#4C9AF5;
  --sidebar:#0A2740; --topbar:#0C2C49; --table-head:#1A4067; --hover:#245080;
  --ok-bg:#123023; --warn-bg:#2E2712; --danger-bg:#331A18; --info-bg:#12283F;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}
/* ===== 5 TEMAS (data-theme-name) — sobrepõem acento (--orange) e superfícies sobre o Clássico.
   Padrão = Clássico (sem data-theme-name). Combinam com o modo claro/escuro (data-theme). ===== */
html[data-theme-name="ambar"]{--orange:#E8890B}
html[data-theme-name="ambar"]:not([data-theme="dark"]){--surface:#EFEDE6;--line:#EAE5D9;--hover:#F5F2EA}
html[data-theme-name="ambar"][data-theme="dark"]{--orange:#F8A600}
html[data-theme-name="confianca"]{--orange:#0E4C93}
html[data-theme-name="confianca"]:not([data-theme="dark"]){--surface:#E6ECF5;--line:#DEE7F2;--hover:#EEF3FA}
html[data-theme-name="confianca"][data-theme="dark"]{--orange:#4C9AF5}
html[data-theme-name="sobrio"]{--orange:#123B63}
html[data-theme-name="sobrio"]:not([data-theme="dark"]){--surface:#EAECEF;--line:#E2E5EA;--hover:#F2F4F6}
html[data-theme-name="sobrio"][data-theme="dark"]{--orange:#7FA8CC}
/* Descanso — conforto visual: cartão azul claríssimo sobre fundo ~8% mais escuro; acento telha */
html[data-theme-name="descanso"]{--orange:#C7410C}
html[data-theme-name="descanso"]:not([data-theme="dark"]){--surface:#DFE8F3;--card:#F4F8FD;--line:#D3DEEC;--hover:#EAF1FA;--table-head:#EDF3FA;--topbar:#F4F8FD}
html[data-theme-name="descanso"][data-theme="dark"]{--orange:#E56A3A;--surface:#0E2136;--card:#183353;--line:#294A69;--hover:#20456A;--table-head:#173251}
/* Seletor de temas na barra lateral */
.appearance{border-top:1px solid rgba(255,255,255,.10)}
.themes{display:flex;gap:9px;padding:12px 14px 6px}
.thdot{width:20px;height:20px;border-radius:50%;background:var(--c);border:2px solid transparent;cursor:pointer;padding:0;transition:transform .15s,box-shadow .15s}
.thdot:hover{transform:scale(1.12)}
.thdot.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.30)}
html[data-theme="dark"] .btn-ghost{background:var(--card)}
html[data-theme="dark"] .input,html[data-theme="dark"] .select{background:#123653;color:var(--ink)}
.theme-toggle{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;color:#9FB4CC;
  padding:9px 12px;border-radius:var(--r);font:500 13px Inter,sans-serif;cursor:pointer}
.theme-toggle:hover{background:rgba(255,255,255,.06);color:#fff}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,Arial,sans-serif;color:var(--ink);background:var(--surface);line-height:1.5}
h1,h2,h3,.font-head{font-family:Manrope,system-ui,Arial,sans-serif}
a{color:var(--blue);text-decoration:none}
img,svg{vertical-align:middle}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:240px;flex-shrink:0;background:var(--sidebar);color:#fff;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px;border-bottom:1px solid rgba(255,255,255,.10)}
.brand .bname{font-family:Manrope;font-weight:800;line-height:1;font-size:15px}
.brand .btag{font-size:11px;color:#9FB4CC;margin-top:3px}
.nav{padding:12px;display:flex;flex-direction:column;gap:2px;flex:1}
.nav a{display:flex;gap:11px;align-items:center;padding:9px 12px;border-radius:var(--r);font-size:14px;color:#CBD5E1;font-weight:500}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a[aria-current="page"],.nav a.on{background:rgba(255,255,255,.10);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--orange)}
.nav .ico{width:18px;text-align:center;opacity:.9}
.nav-group{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#7E96B4;font-weight:600;padding:12px 12px 4px}
.nav-group:first-child{padding-top:2px}
.sidebar .foot{padding:12px;border-top:1px solid rgba(255,255,255,.10);font-size:11px;color:#9FB4CC}
.content{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{background:var(--topbar);border-bottom:1px solid var(--line);padding:11px 20px;display:flex;align-items:center;gap:16px}
.main{padding:20px;max-width:1200px;width:100%}
.avatar{width:32px;height:32px;border-radius:var(--pill);background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}

/* ---------- Tipografia utilitária ---------- */
.h1{font-family:Manrope;font-weight:800;font-size:24px;color:var(--heading);margin:0}
.h2{font-family:Manrope;font-weight:700;font-size:18px;color:var(--heading);margin:0}
.lead{color:var(--muted);font-size:14px;margin:2px 0 0}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:12px}

/* ---------- Card ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--e-2)}
.card+.card{margin-top:16px}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  border-radius:var(--r);padding:10px 18px;font:600 14px Inter,sans-serif;cursor:pointer;transition:.15s;white-space:nowrap}
.btn-primary{background:var(--navy);color:#fff}.btn-primary:hover{background:#04203a}
.btn-action{background:var(--orange);color:#fff}.btn-action:hover{background:#cf3f0c}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}.btn-ghost:hover{background:#f8fafc}
.btn-block{width:100%}

/* ---------- Formulários ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.label{font-size:12px;font-weight:600;color:var(--muted)}
.input,.select{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font:400 14px Inter,sans-serif;background:#fff}
.input:focus,.select:focus{outline:none;border-color:var(--blue);box-shadow:var(--focus)}
.input.is-ok{border-color:var(--ok);box-shadow:0 0 0 3px rgba(30,122,61,.12)}
.input.is-err{border-color:var(--danger);box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.hint{font-size:12px;color:var(--faint)} .hint.ok{color:var(--ok)} .hint.err{color:var(--danger)}

/* ---------- Chips / status ---------- */
.chip{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 9px;border-radius:var(--pill)}
.chip-ok{background:var(--ok-bg);color:var(--ok)} .chip-warn{background:var(--warn-bg);color:var(--warn)}
.chip-danger{background:var(--danger-bg);color:var(--danger)} .chip-info{background:var(--info-bg);color:var(--navy-2)}
.chip-neutral{background:#EEF1F5;color:var(--muted)}

/* ---------- Tabela ---------- */
.table{width:100%;border-collapse:collapse;font-size:14px}
/* Cabeçalho em --muted (5,56:1), não --faint (3,15:1). Era o texto mais difícil de ler do
   sistema — 11px, maiúsculo, com letter-spacing — e está em toda tabela. Tamanho preservado:
   só a cor muda, então a densidade das telas fica igual. (Contraste medido em 16/08/2026.) */
.table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;text-align:left;padding:10px 12px;background:var(--table-head);border-bottom:1px solid var(--line)}
.table td{padding:11px 12px;border-top:1px solid var(--line)}
.table tbody tr:hover{background:var(--hover)}
.table-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}

/* ---------- KPIs / grid ---------- */
.grid{display:grid;gap:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.kpi .v{font-family:Manrope;font-weight:800;font-size:22px;color:var(--heading)}
.kpi .k{font-size:12px;color:var(--muted)}

/* ---------- Estados ---------- */
.skeleton{background:linear-gradient(90deg,#eef1f5 25%,#e4e9f0 37%,#eef1f5 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:var(--r)}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .ico{font-size:32px;opacity:.5}
.empty .t{font-family:Manrope;font-weight:700;color:var(--ink);margin-top:8px}
.alert{border-radius:var(--r);padding:10px 14px;font-size:13px;display:flex;gap:8px;align-items:center}
.alert-error{background:var(--danger-bg);color:var(--danger)}
.alert-ok{background:var(--ok-bg);color:var(--ok)}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Helpers ---------- */
.row{display:flex;gap:12px}.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}.center{align-items:center}.mla{margin-left:auto}.flex1{flex:1}
.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-5{grid-template-columns:repeat(5,1fr)}.cols-6{grid-template-columns:repeat(6,1fr)}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mb16{margin-bottom:16px}.gap8{gap:8px}

/* ---------- Autocomplete ---------- */
.ac{position:relative}
.ac-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);max-height:240px;overflow:auto}
.ac-item{padding:9px 12px;font-size:14px;cursor:pointer}
.ac-item:hover,.ac-item[aria-selected="true"]{background:var(--info-bg)}
.ac-empty{padding:10px 12px;font-size:13px;color:var(--faint)}

/* ---------- Navegação mobile (menu deslizante) ---------- */
.nav-hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-size:20px;line-height:1;cursor:pointer;color:var(--heading)}
.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .25s}
.nav-overlay.show{opacity:1;pointer-events:auto}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);z-index:200;
  background:var(--navy);color:#fff;padding:12px 18px;border-radius:var(--r);font-size:14px;font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.25s;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .ti{margin-right:6px}
.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(6,42,74,.45);z-index:120;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.modal-box{background:var(--card);border-radius:var(--r-lg);width:100%;max-width:520px;max-height:90vh;overflow:auto;box-shadow:var(--shadow)}
.modal-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-hd .h2{font-size:17px}
.modal-bd{padding:20px}
.modal-ft{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line)}
.modal-x{background:none;border:0;font-size:20px;color:var(--muted);cursor:pointer;line-height:1}
/* Bloco dentro de um formulário longo (ex.: o processo do sinistro). Navy, não laranja. */
.modal-secao{font:700 12px Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);padding-bottom:6px;margin:10px 0 14px;border-bottom:1px solid var(--line)}
.modal-bd>.modal-secao:first-child{margin-top:0}

/* ---------- Responsivo ---------- */
@media(max-width:900px){
  .cols-4{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:1fr}.cols-5{grid-template-columns:repeat(3,1fr)}.cols-6{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .nav-hamburger{display:inline-flex}
  .sidebar{position:fixed;left:-260px;top:0;bottom:0;width:250px;z-index:60;transition:left .25s ease;box-shadow:0 0 40px rgba(0,0,0,.35)}
  .sidebar.open{left:0}
  .cols-2,.cols-3,.cols-4,.cols-5,.cols-6{grid-template-columns:1fr}
  .main{padding:14px}
  .topbar{padding:10px 14px;gap:10px}
  .h1{font-size:21px}
  .table-wrap{overflow-x:auto}
}

/* ===== Redesign 17/07 (paleta 2C mantida — só variações tonais da marca) ===== */
/* Contraste dos cards (WCAG AA): borda definida + raio 12 + sombra suave. */
:root{--line-strong:#D3DAE4}
html[data-theme="dark"]{--line-strong:#3B6089}
.kpi{border-color:var(--line-strong);border-radius:12px;box-shadow:0 4px 6px -1px rgba(6,42,74,.05)}
.card{border-color:var(--line-strong)}

/* Menu lateral: 4 macro-categorias colapsáveis (gavetas). */
.nav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;cursor:pointer;text-align:left}
.nav-toggle:hover span:first-child{color:#B9CBE0}
.nav-toggle .chev{font-size:10px;opacity:.7;transition:transform var(--dur-2) var(--ease)}
.nav-sec.closed .chev{transform:rotate(-90deg)}
.nav-sec.closed .nav-items{display:none}
.nav-items{display:flex;flex-direction:column;gap:2px}

/* Pills de ação da esteira (isolamento de ações destrutivas). */
.pill-acao{display:inline-flex;align-items:center;border-radius:20px;padding:7px 14px;
  font-size:12.5px;font-weight:700;cursor:pointer;border:1px solid transparent;line-height:1;white-space:nowrap}
.pill-acao.solida{background:var(--ok);color:#fff}
.pill-acao.solida:hover{filter:brightness(1.07)}
.pill-acao.contorno{background:transparent;border-color:var(--navy-2);color:var(--navy-2)}
.pill-acao.contorno:hover{background:var(--info-bg)}
.pill-acao.perigo{background:transparent;color:var(--faint);border-color:transparent;margin-left:14px}
.pill-acao.perigo:hover{color:var(--danger);border-color:var(--danger)}

/* Segmented control (abas estilo bloco flutuante — Fluent/da casa). */
.segtabs{display:inline-flex;gap:2px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:3px;flex-wrap:wrap}
.segtabs .seg{border:0;background:transparent;color:var(--muted);font-weight:600;font-size:13px;
  padding:7px 13px;border-radius:8px;cursor:pointer;white-space:nowrap}
.segtabs .seg:hover{color:var(--ink)}
.segtabs .seg.on{background:var(--card);color:var(--heading);box-shadow:var(--e-1)}

/* Estado textual no lugar do traço mudo (dados nulos honestos). */
.estado-vazio{display:inline-block;background:var(--surface);color:var(--muted);
  border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:600}
/* Banner de alerta suave (redesign 17/07): faixa translúcida com borda da marca, sem bloco saturado. */
.alert-brand{background:rgba(233,77,17,.07);border:1px solid var(--orange);color:var(--ink);
  border-radius:10px;font-weight:600}
html[data-theme="dark"] .alert-brand{background:rgba(233,77,17,.14);color:#F3E9E4}
.pill-acao.azul{background:var(--navy-2);color:#fff}
.pill-acao.azul:hover{filter:brightness(1.08)}

/* ===== Revestimento 05/08 — acabamento Linear/Stripe DENTRO do Fluent (aditivo) =====
   Regra: só tokens (cor, raio, sombra, tempo); movimento rápido e a serviço da hierarquia. */

/* Topbar presa no topo com profundidade sutil — o contexto não some ao rolar */
.topbar{position:sticky;top:0;z-index:45;box-shadow:var(--e-1)}

/* Botões com resposta física: hover levanta, clique assenta */
.btn{transition:background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),
  transform var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.btn:hover{box-shadow:var(--e-2)}
.btn:active{transform:translateY(1px);box-shadow:var(--e-0)}

/* KPIs e cartões respondem ao passar do mouse (1 clique convida ao clique) */
.kpi{transition:box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),
  border-color var(--dur-2) var(--ease)}
a.kpi:hover,.kpi[onclick]:hover,button.kpi:hover{transform:translateY(-2px);box-shadow:var(--e-3)}

/* Tabelas: linha responde suave; célula alinhada ao centro vertical */
.table tbody tr{transition:background var(--dur-1) var(--ease)}
.table td{vertical-align:middle}

/* Navegação lateral: microtransição */
.nav a{transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}

/* Campos: foco com transição (o anel já vem do --focus) */
.input,.select{transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}

/* Barra de rolagem fina e discreta, na cor do sistema */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--pill);
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* Estado vazio mais compacto (densidade sem sufoco) */
.empty{padding:26px 18px}

/* Conserto do estouro horizontal: filho de grid não pode alargar a página
   (min-width:auto é o padrão do grid e deixava um canvas empurrar 5px pra fora) */
.grid>*{min-width:0}
canvas{max-width:100%}

/* Login: o formulário vira cartão elevado sobre a superfície */
.auth .formcol{background:var(--surface)}
.auth .box{background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:var(--sp-8);box-shadow:var(--e-3)}
@media(max-width:760px){.auth .box{padding:var(--sp-6)}}