/* easytrip — design tokens. Tema CLARO (azul sobre branco), conforme o mockup
   aprovado em 2026-08-13: cartao branco com canto generoso e sombra suave sobre
   um fundo azul-claro com brilho difuso; azul vibrante em gradiente no botao
   principal; icones em quadradinhos azul-claro.

   Regra de ouro deste arquivo: NENHUMA cor literal fora daqui. As telas usam
   var(--...). Trocar a paleta inteira (inclusive voltar ao escuro) tem de ser
   possivel mexendo so neste arquivo — e foi assim que este tema entrou.

   REALCE: use --realce/--realce-forte em vez de rgba(255,255,255,x) ou
   rgba(0,0,0,x) chumbado. No claro eles escurecem; num tema escuro clareiam.
   Foi o que quebrou na primeira troca de tema: hover feito com branco
   translucido some sobre fundo branco. */
:root{
  /* ---------- marca ---------- */
  --cor-primaria:   #2563EB;   /* azul do botao/CTA e do item ativo */
  --cor-primaria-2: #1D4ED8;
  --cor-primaria-3: #1E5FD0;   /* links sobre fundo CLARO (precisa ser escuro o bastante) */
  --cor-primaria-100:#EAF1FE;  /* tint: fundo de icone, pill, item de menu ativo */
  --cor-acento:     #2563EB;   /* numero em destaque; no tema claro e o proprio azul */
  --cor-acento-2:   #1D4ED8;

  --cor-secundaria: #0E9F6E;   /* sucesso/aprovado (verde legivel sobre branco) */
  --cor-secundaria-2:#047857;
  --cor-atencao:    #B45309;   /* ambar escuro: sobre branco, amarelo puro nao le */
  --cor-erro:       #DC2626;
  --cor-info:       #2563EB;

  /* ---------- superficie ----------
     fundo: branco levemente azulado. superficie: branco SOLIDO (nao translucido:
     e o que fez o dropdown ficar ilegivel na versao escura). */
  --cor-fundo:       #F6F8FD;
  --cor-fundo-2:     #EEF3FC;
  --cor-superficie:  #FFFFFF;
  --cor-superficie-2:#F4F7FC;
  --cor-superficie-solida: #FFFFFF;   /* dropdown, menu, modal, tooltip */
  --vidro-blur:      blur(10px);

  --txt-principal:  #0F172A;
  --txt-secundario: #5A6b85;
  --txt-suave:      #8A97AC;
  --txt-sobre-cor:  #FFFFFF;          /* texto sobre botao azul/colorido */

  --borda:          #E3E9F3;
  --borda-forte:    #CBD5E6;

  /* realce sobre superficie (hover, zebra, faixa) — ver nota no topo */
  --realce:         rgba(15,23,42,.04);
  --realce-forte:   rgba(15,23,42,.07);

  /* ---------- gradientes ---------- */
  --grad-brand: linear-gradient(135deg, #3B82F6 0%, #2563EB 55%, #1D4ED8 100%);
  --grad-fundo: radial-gradient(1100px 620px at 82% -8%, rgba(59,130,246,.13), transparent 62%),
                radial-gradient(880px 560px at 6% 10%, rgba(37,99,235,.09), transparent 60%),
                linear-gradient(168deg, #FBFCFF 0%, #F4F8FF 55%, #EEF3FC 100%);
  --grad-acento: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);

  /* ---------- raios (generosos, como no mockup) ---------- */
  --raio:    14px;
  --raio-lg: 20px;
  --raio-sm: 10px;
  --raio-pill: 999px;

  /* ---------- espaco / toque (escala 4px) ---------- */
  --toque-min: 48px;
  --espaco: 16px;
  --bottomnav-h: 64px;
  --topbar-h: 56px;

  /* ---------- sombras ----------
     No claro quem separa e a sombra suave + a borda de 1px (o inverso do escuro,
     onde era o brilho da borda). Tom azulado para nao sujar o fundo. */
  --sombra-card: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -18px rgba(30,64,175,.28);
  --sombra-sm:   0 1px 2px rgba(16,24,40,.05);
  --sombra-md:   0 2px 8px -2px rgba(16,24,40,.10), 0 12px 28px -20px rgba(30,64,175,.30);
  --sombra-lg:   0 18px 44px -20px rgba(30,64,175,.30), 0 2px 6px rgba(16,24,40,.05);
  --sombra-hero: 0 24px 60px -26px rgba(30,64,175,.35);
  --anel: 0 0 0 3px rgba(37,99,235,.20);

  /* Inter se instalada (CSP bloqueia CDN); fallback = stack do sistema */
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--fonte);
  color: var(--txt-principal);
  background: var(--cor-fundo);
  background-image: var(--grad-fundo);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.45;
}
button, input, select, textarea{ font-family: inherit; font-size: .95rem; color: inherit; }
a{ color: var(--cor-primaria-3); text-decoration: none; }
h1,h2,h3{ margin: 0 0 .4rem; font-weight: 800; letter-spacing: -.02em; }
::selection{ background: rgba(37,99,235,.16); }

:focus-visible{ outline: none; box-shadow: var(--anel); border-radius: 10px; }

/* ---------- cartao ----------
   Herdou o nome .vidro do tema escuro para nao quebrar as telas que ja usam a
   classe. No claro e um cartao branco solido: nada de blur pesado, que aqui so
   custaria GPU sem aparecer. */
.vidro{
  background: var(--cor-superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-card);
}

/* Numero grande em destaque (saldo, total do mes). */
.num-destaque{
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--txt-principal);
}

/* Scrollbar discreta (Chrome/Edge). */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: var(--borda-forte); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover{ background: var(--txt-suave); background-clip: content-box; }

/* ---------- impressao ----------
   Redefinir os TOKENS e o que resolve: cor declarada em filho ganha da heranca,
   entao forcar so body{color:#000} deixaria KPI, titulo de cartao e rotulo de
   grafico invisiveis no papel. Trocando na raiz, todo var() acompanha. */
@media print{
  :root{
    --txt-principal:#000; --txt-secundario:#333; --txt-suave:#555; --txt-sobre-cor:#fff;
    --cor-acento:#000; --cor-acento-2:#000;
    --cor-fundo:#fff; --cor-fundo-2:#fff;
    --cor-superficie:#fff; --cor-superficie-2:#fff; --cor-superficie-solida:#fff;
    --borda:#bbb; --borda-forte:#888;
    --realce:transparent; --realce-forte:transparent;
    --grad-fundo:none; --grad-brand:none; --grad-acento:none;
    --sombra-card:none; --sombra-sm:none; --sombra-md:none; --sombra-lg:none; --sombra-hero:none;
    --vidro-blur:none;
  }
  body{ background:#fff !important; background-image:none !important; color:#000 !important; }
  .vidro, .card, .kpi, .desk-list, .desk-side, .desk-top{
    background:#fff !important; border-color:#bbb !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .card svg text{ fill:#000 !important; }
  .status{ background:transparent !important; color:#000 !important; border:1px solid #666 !important; }
  .status .dot{ background:#000 !important; }
  .desk-table thead th{ color:#000 !important; background:transparent !important;
                        border-bottom:1px solid #999 !important; }
  .desk-side, .bottomnav, .tour-ov, .modal-ov, .desk-top .desk-search{ display:none !important; }
}