/* ============================================================================
   banco BV / FENAUTO 2026 - design tokens v2 (copy of brand/tokens.css + v2 tokens)
   Shared by every app: <link rel="stylesheet" href="../shared/css/tokens.css">.
   Fonts live in ../assets/fonts/ (relative to this css). Votorantim Sans: weights 400 and 900 ONLY.
   BV Leve Titulos (official title font of the designer package, D-75): 300, 400 and 700; the tema Azul uses it everywhere.
   BRAND RULES (client, non-negotiable): four blues + white on brand surfaces,
   no gradients, no red on brand surfaces (status colors only in staff lists and
   field errors), logo only via <use href="#bv-logo"> of the inline symbol.
   ============================================================================ */

@font-face {
  font-family: "Votorantim Sans";
  src: url("../assets/fonts/VotorantimSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Votorantim Sans";
  src: url("../assets/fonts/VotorantimSans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BV Leve Titulos";
  src: url("../assets/fonts/BVLeveTitulos-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BV Leve Titulos";
  src: url("../assets/fonts/BVLeveTitulos-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BV Leve Titulos";
  src: url("../assets/fonts/BVLeveTitulos-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- BV blues (designer mockups + bv.com.br, see docs/research/04) ---- */
  --bv-blue-deep:   #002BAB;  /* attract screen, dark blocks, <meta theme-color>, Electron backgroundColor */
  --bv-blue:        #223AD2;  /* primary: buttons, headings on white, logo monogram on white */
  --bv-blue-hover:  #192A9A;  /* hover / pressed state of --bv-blue */
  --bv-blue-bright: #2280EC;  /* action screens on the kiosk (capture / result) */
  --bv-blue-light:  #8CAEE2;  /* chips, secondary bars, disabled buttons on blue */
  --bv-tint:        #EDEFFC;  /* page background of cadastro / promotor / admin / foto landing */
  --bv-tint-2:      #CAD0F6;  /* borders, table stripes, badges on tint */
  --bv-cyan:        #31C7ED;  /* accent, highlights, the "V", focus ring, timers */
  --bv-cyan-glow:   #15E6FF;  /* kiosk-only glow (text-shadow: 0 0 24px var(--bv-cyan-glow)) */
  --bv-ink:         #15191E;  /* body text on light surfaces */
  --bv-ink-muted:   #546373;  /* secondary text on light surfaces */
  --bv-white:       #FFFFFF;
  --bv-white-70:    rgba(255, 255, 255, 0.70);  /* small caps labels on blue */
  --bv-white-15:    rgba(255, 255, 255, 0.15);  /* dividers / ghost cards on blue */

  /* ---- status (admin / promotor tables and field errors ONLY). D-75: NO yellow or amber anywhere;
     "warn" is a BV blue (attention without alarm), red stays only for real errors ---- */
  --ok:   #22C55E;
  --warn: #2280EC;
  --err:  #DC1832;
  --ok-bg:   #E8F8EE;
  --warn-bg: #DCE9FB;
  --err-bg:  #FDEDEF;

  /* ---- semantic aliases (use these in app CSS, not the raw colors) ---- */
  --bg:            var(--bv-tint);
  --surface:       var(--bv-white);
  --text:          var(--bv-ink);
  --text-muted:    var(--bv-ink-muted);
  --primary:       var(--bv-blue);
  --primary-hover: var(--bv-blue-hover);
  --accent:        var(--bv-cyan);
  --border:        var(--bv-tint-2);
  --focus-ring:    0 0 0 3px rgba(49, 199, 237, 0.45);

  /* ---- typography ---- */
  --font: "Votorantim Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-titulo: "BV Leve Titulos", "Votorantim Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400;
  --fw-black:   900;
  --lh-tight:   1.1;
  --lh-body:    1.35;
  --track-caps: 0.16em;   /* uppercase section labels */
  --track-tiny: 0.28em;   /* small caps labels (22-28px on kiosk) */

  /* ---- radii ---- */
  --radius-chip:  20px;
  --radius-card:  16px;
  --radius-btn:   16px;
  --radius-input: 8px;
  --radius-pill:  999px;

  /* ---- spacing scale (px) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);   /* "Unity-like" ease used everywhere */
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;


  /* ---- shadows (cards on tint only; never on blue surfaces) ---- */
  --shadow-card: 0 2px 12px rgba(0, 43, 171, 0.08);
  --shadow-pop:  0 12px 40px rgba(0, 43, 171, 0.18);

  /* ---- v2 tokens (CONTRATO-FRONT 1.2) ---- */
  --col-max: 430px;                 /* mobile column */
  --topo-h: 64px;
  --tabbar-h: 64px;
  --st-agendado: var(--bv-blue);       --st-agendado-bg: var(--bv-tint);
  --st-retirado: #15803D;              --st-retirado-bg: var(--ok-bg);
  --st-cancelado: var(--bv-ink-muted); --st-cancelado-bg: #EEF0F3;
  --st-falta: #00208A;                 --st-falta-bg: var(--warn-bg);
}

/* Base reset shared by every app */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, .black { font-weight: var(--fw-black); line-height: var(--lh-tight); }
.caps { text-transform: uppercase; letter-spacing: var(--track-caps); font-weight: var(--fw-black); }
.muted { color: var(--text-muted); }

/* Blue surface helpers */
.surface-deep   { background: var(--bv-blue-deep);   color: var(--bv-white); }
.surface-bright { background: var(--bv-blue-bright); color: var(--bv-white); }
.surface-blue   { background: var(--bv-blue);        color: var(--bv-white); }

/* Buttons - one primary look everywhere */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 52px; padding: 0 var(--sp-5);
  border: 0; border-radius: var(--radius-btn);
  background: var(--primary); color: var(--bv-white);
  font-family: var(--font); font-weight: var(--fw-black); font-size: 18px;
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast);
}
.btn:hover  { background: var(--primary-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn[disabled], .btn.travado { opacity: 0.55; pointer-events: none; }
.btn-secondary { background: var(--bv-white); color: var(--primary); border: 2px solid var(--primary); }
.btn-secondary:hover { background: var(--bv-tint); }
.btn-ghost { background: transparent; color: var(--primary); }
.btn-on-blue { background: var(--bv-white); color: var(--bv-blue); }
.btn-on-blue:hover { background: var(--bv-tint); }

/* Inputs */
.input, input.input, select.input {
  width: 100%; min-height: 52px; padding: 0 var(--sp-4);
  border: 2px solid var(--border); border-radius: var(--radius-input);
  background: var(--bv-white); color: var(--text);
  font-family: var(--font); font-size: 18px; font-weight: var(--fw-regular);
  outline: none; box-sizing: border-box;
}
.input:focus { border-color: var(--bv-cyan); box-shadow: var(--focus-ring); }
.input.invalido { border-color: var(--err); }

/* Field error: ALWAYS reserves space (no layout shift when it appears) */
.erro-campo {
  display: block; visibility: hidden; opacity: 0;
  min-height: 1.3em; margin-top: var(--sp-1);
  font-size: 14px; color: var(--err);
  transition: opacity var(--dur-base) var(--ease);
}
.erro-campo.erro-visivel { visibility: visible; opacity: 1; }

/* Chips (slot picker, day filter, tabs) */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 var(--sp-4);
  border-radius: var(--radius-chip); border: 2px solid var(--bv-tint-2);
  background: var(--bv-white); color: var(--primary);
  font-family: var(--font); font-weight: var(--fw-black); font-size: 16px; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.chip.ativo { background: var(--primary); border-color: var(--primary); color: var(--bv-white); }
.chip.lotado, .chip[disabled] { background: var(--bv-tint); color: var(--text-muted); border-color: var(--bv-tint); cursor: not-allowed; }

/* Cards (admin / promotor / cadastro steps) */
.card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--sp-5); }

/* Status badges (admin tables only) */
.badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: var(--fw-black); }
.badge-ok   { background: var(--ok-bg);   color: #15803D; }
.badge-warn { background: var(--warn-bg); color: #00208A; }
.badge-err  { background: var(--err-bg);  color: var(--err); }
.badge-blue { background: var(--bv-tint); color: var(--primary); }

/* Reduced motion: keep transitions instant */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}