/* ══════════════════════════════════════════════════════════════════
   CONSTREN · LISTA VIP · Design System
   Identidade da Constren: clean, elegante, "alto padrão".
   Azul-marinho + branco + Montserrat. Claro (padrão) e escuro.
   ══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --navy:#0d2d52;      /* azul-marinho principal (logo, menu, botões) */
  --blue:#1a4d8f;      /* azul de destaque (títulos) */
  --primary:#0d2d52;
  --accent:#1a4d8f;
  --btn-ink:#ffffff;
  --radius:16px;
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Montserrat',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ── TOKENS DE MODO ───────────────────────────────────────────────── */
:root,
[data-mode="light"]{
  --bg:#ffffff; --bg-2:#f4f7fb;
  --ink:#1a1a1a; --ink-dim:#555555; --ink-faint:#8a94a6;
  --primary:#0d2d52; --accent:#1a4d8f;
  --glass:#ffffff;
  --glass-strong:#ffffff;
  --hair:#e4e9f2;
  --hair-bright:#cfd8e8;
  --inp-bg:#f7f9fc;
  --surface-card:#ffffff;
  --surface-card-2:#f4f7fb;
  --track:#e9edf5;
  --tab-hover:#f0f3f9;
  --card-shadow:0 18px 44px -22px rgba(13,45,82,.28), 0 2px 8px -4px rgba(13,45,82,.12);
  --aurora-op:.10; --grain-op:.02; --hi-op:0;
  --btn-ink:#ffffff;
}
[data-mode="dark"]{
  --bg:#081827; --bg-2:#0b2036;
  --ink:#eaf1fb; --ink-dim:#aab8ce; --ink-faint:#6a7a95;
  --primary:#3d7ec4; --accent:#5b9bd8;
  --glass:rgba(255,255,255,.045);
  --glass-strong:rgba(255,255,255,.08);
  --hair:rgba(255,255,255,.11);
  --hair-bright:rgba(255,255,255,.2);
  --inp-bg:rgba(255,255,255,.045);
  --surface-card:rgba(255,255,255,.05);
  --surface-card-2:rgba(255,255,255,.08);
  --track:rgba(255,255,255,.08);
  --tab-hover:rgba(255,255,255,.05);
  --card-shadow:0 24px 60px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  --aurora-op:.35; --grain-op:.04; --hi-op:.5;
  --btn-ink:#ffffff;
}
/* Antes do JS rodar, respeita a preferência do SO (mas padrão é claro) */
@media (prefers-color-scheme: dark){
  :root:not([data-mode]){
    --bg:#081827; --bg-2:#0b2036;
    --ink:#eaf1fb; --ink-dim:#aab8ce; --ink-faint:#6a7a95;
    --primary:#3d7ec4; --accent:#5b9bd8;
    --glass:rgba(255,255,255,.045); --glass-strong:rgba(255,255,255,.08);
    --hair:rgba(255,255,255,.11); --hair-bright:rgba(255,255,255,.2);
    --inp-bg:rgba(255,255,255,.045); --surface-card:rgba(255,255,255,.05); --surface-card-2:rgba(255,255,255,.08);
    --track:rgba(255,255,255,.08); --tab-hover:rgba(255,255,255,.05);
    --card-shadow:0 24px 60px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
    --aurora-op:.35; --grain-op:.04; --hi-op:.5; --btn-ink:#ffffff;
  }
}

/* ── BASE ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  font-family:var(--font-body);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;min-height:100vh;
  transition:background .4s,color .4s;
}

/* ── AURORA + GRÃO (bem sutil no claro) ───────────────────────────── */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora::before,.aurora::after,.aurora .blob{content:"";position:absolute;border-radius:50%;filter:blur(100px);opacity:var(--aurora-op)}
.aurora::before{width:55vw;height:55vw;top:-22vw;left:-12vw;background:radial-gradient(circle,var(--blue),transparent 65%)}
.aurora::after{width:50vw;height:50vw;bottom:-25vw;right:-12vw;background:radial-gradient(circle,var(--navy),transparent 65%)}
.aurora .blob{width:34vw;height:34vw;top:32%;left:48%;opacity:calc(var(--aurora-op) * .5);background:radial-gradient(circle,var(--blue),transparent 60%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.app{position:relative;z-index:2}

/* ── FOCO ─────────────────────────────────────────────────────────── */
:focus{outline:none}
:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px;border-radius:6px}

/* ── CARTÃO (antes "vidro") ───────────────────────────────────────── */
.glass{
  background:var(--surface-card);
  border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--card-shadow);position:relative;
}
[data-mode="dark"] .glass{backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(255,255,255,.5),transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:var(--hi-op)}

/* ── TIPOGRAFIA ───────────────────────────────────────────────────── */
.wordmark{font-family:var(--font-display);font-weight:700;letter-spacing:-.3px;color:var(--navy)}
[data-mode="dark"] .wordmark{color:var(--ink)}
.grad-text{background:linear-gradient(120deg,var(--navy),var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[data-mode="dark"] .grad-text{background:linear-gradient(120deg,#5b9bd8,#9cc7f0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eyebrow{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--accent)}
.mono{font-family:var(--font-mono)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15;color:var(--ink)}
.hero{font-family:var(--font-display);font-weight:700;letter-spacing:-.5px;line-height:1.1;color:var(--blue)}
.lead{color:var(--ink-dim);line-height:1.75}

/* ── MARK / LOGO ──────────────────────────────────────────────────── */
.mark{width:40px;height:40px;border-radius:11px;position:relative;flex-shrink:0;
  background:linear-gradient(135deg,var(--navy),var(--blue));box-shadow:0 8px 20px -8px rgba(13,45,82,.6);
  display:flex;align-items:center;justify-content:center}
.mark svg{position:relative;z-index:1}

/* ── FORM ─────────────────────────────────────────────────────────── */
.field{margin-bottom:16px}
.field>label{display:block;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
.inp{display:flex;align-items:center;gap:10px;background:var(--inp-bg);border:1px solid var(--hair);border-radius:11px;padding:13px 14px;transition:.18s}
.inp:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.inp>svg{flex-shrink:0;opacity:.5}
.inp>input,.inp>select{flex:1;background:none;border:none;outline:none;color:var(--ink);font-family:inherit;font-size:15px;min-width:0}
.inp>input::placeholder{color:var(--ink-faint)}
select{color-scheme:light}
[data-mode="dark"] select{color-scheme:dark}
/* Opções do dropdown nativo legíveis nos dois modos (evita texto apagado) */
select option{background:var(--bg-2);color:var(--ink)}
.input{width:100%;background:var(--inp-bg);border:1px solid var(--hair);border-radius:11px;padding:13px 14px;color:var(--ink);font-family:inherit;font-size:15px;outline:none;transition:.18s}
/* No celular, inputs com fonte >=16px evitam o zoom automatico do iOS ao focar */
@media(max-width:600px){ .input,.inp>input,.inp>select{font-size:16px} }
/* Select com seta e visual proprios (nao usa o design nativo do navegador) */
select.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2351607a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px}
select.input::-ms-expand{display:none}
[data-mode="dark"] select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa7bd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
select.input option{color:#16233a;background:#fff}
/* Dropdown proprio (lista aberta com o design do sistema) */
.selbox{position:relative;width:100%}
.selbox-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;margin:0;padding:0;background:none}
.selbox-trig{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;background-image:none}
.selbox-trig>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.selbox-trig::after{content:"";width:16px;height:16px;flex-shrink:0;transition:transform .15s;
  background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2351607a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
[data-mode="dark"] .selbox-trig::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa7bd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.selbox.open .selbox-trig{border-color:var(--accent)}
.selbox.open .selbox-trig::after{transform:rotate(180deg)}
.selbox-panel{position:fixed;z-index:200;display:none;padding:6px;max-height:300px;overflow-y:auto;
  background:var(--bg);border:1px solid var(--hair);border-radius:12px;box-shadow:0 18px 44px -16px rgba(13,45,82,.42)}
.selbox-panel.open{display:block}
.selbox-opt{padding:10px 12px;border-radius:8px;font-size:14px;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.selbox-opt:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.selbox-opt.sel{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-weight:600}
@media(max-width:600px){ .selbox-trig{font-size:16px} .selbox-opt{font-size:15px;padding:12px} }
/* Paginacao das tabelas (10 por pagina, com 10/20/50/100) */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.pager:empty{display:none}
.pager-info{font-size:12.5px;color:var(--ink-dim)}
.pg-size{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-dim);flex-wrap:wrap}
.pg-nav{display:flex;align-items:center;gap:10px}
.pg-chip{border:1px solid var(--hair);background:transparent;color:var(--ink-dim);cursor:pointer;border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:600;font-family:inherit;min-width:34px;transition:.12s}
.pg-chip:hover{border-color:var(--accent)}
.pg-chip.act{background:#0D2D52;border-color:#0D2D52;color:#fff}
[data-mode="dark"] .pg-chip.act{background:var(--accent);border-color:var(--accent);color:#0D2D52}
.pg-nav button{border:1px solid var(--hair);background:var(--surface-card);color:var(--ink);cursor:pointer;border-radius:9px;padding:8px 14px;font-size:12.5px;font-weight:600;font-family:inherit}
.pg-nav button[disabled]{opacity:.4;cursor:default}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.input::placeholder{color:var(--ink-faint)}

/* ── BOTÕES (sólido navy, estilo Constren) ────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;cursor:pointer;border-radius:11px;padding:15px;
  font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--btn-ink);
  background:var(--primary);box-shadow:0 10px 24px -12px rgba(13,45,82,.6);transition:.18s;letter-spacing:.2px}
.btn:hover{background:var(--blue);transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--hair);background:var(--surface-card);color:var(--ink);cursor:pointer;border-radius:11px;padding:14px 18px;font-family:var(--font-display);font-weight:600;font-size:15px;transition:.18s}
.btn-ghost:hover{border-color:var(--hair-bright);background:var(--tab-hover)}
.btn-sm{padding:9px 14px;font-size:13px;width:auto}

a{color:inherit;text-decoration:none}
.link{color:var(--accent);font-weight:600;cursor:pointer}
.link:hover{text-decoration:underline}
.muted-link{color:var(--ink-dim)}
.muted-link b{color:var(--accent)}

/* ── PILLS / BARRAS ───────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 11px;border-radius:20px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;box-shadow:0 0 8px currentColor}
.bar{height:5px;border-radius:3px;background:var(--track);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--navy),var(--blue))}

/* ── TABS ─────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:6px;padding:7px}
.tab{font-size:12px;font-weight:600;padding:9px 14px;border-radius:10px;color:var(--ink-dim);cursor:pointer;display:flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap;border:none;background:none;font-family:inherit}
.tab:hover{color:var(--ink);background:var(--tab-hover)}
.tab.act{color:#fff;background:var(--primary)}

/* ── MODE TOGGLE ──────────────────────────────────────────────────── */
.mode-toggle{display:inline-flex;align-items:center;gap:6px;background:var(--surface-card);border:1px solid var(--hair);border-radius:30px;padding:5px}
.mode-btn{border:none;background:none;cursor:pointer;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-dim);transition:.18s}
.mode-btn.act{background:var(--primary);color:#fff}

/* ── ÍCONES ───────────────────────────────────────────────────────── */
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── LOGO CONSTREN ────────────────────────────────────────────────
   Usa SEMPRE a mesma logo (mesmo desenho e proporcao). No modo escuro
   ela apenas muda de cor para branco, via filtro, em vez de trocar por
   outro arquivo (que tinha proporcoes diferentes e parecia "outra logo").
   O translateY compensa a sobra vazia desigual dentro do PNG, para a
   logo ficar na mesma linha do texto ao lado. */
.brand-logo{height:30px;width:auto;display:block;transform:translateY(6.8%)}
.brand-logo.white{display:none}
[data-mode="dark"] .brand-logo.navy{filter:brightness(0) invert(1)}
.brand-div{width:1px;height:24px;background:var(--hair);flex-shrink:0}
.brand-sub{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--accent);letter-spacing:.3px}

/* ── UTIL ─────────────────────────────────────────────────────────── */
.container{max-width:1080px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}