/* ============================================================
   BocaStats — Design System entry point
   ============================================================ */

@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/radius.css");
@import url("tokens/effects.css");

/* ── Aliases compatibles con el UI Kit (design-upload token names) ── */
:root {
  /* Superficies */
  --bg-canvas:        var(--bg);
  --bg-surface:       var(--surface);
  --bg-surface-raised: var(--surface-2);
  --bg-surface-inset: var(--surface-3);

  /* Texto */
  --text-primary:   var(--txt);
  --text-secondary: var(--txt-2);
  --text-tertiary:  var(--txt-mut);
  --text-on-accent: var(--txt-on-accent);
  --white: #FFFFFF;

  /* Acento */
  --accent-primary:  var(--accent);
  --accent-live:     var(--live);
  --accent-positive: var(--positive);

  /* Bordes */
  --border-subtle:  var(--border);
  --border-default: var(--border-strong);
  --border-strong:  rgba(255,255,255,.30);

  /* Sombra */
  --shadow-color: rgba(2, 6, 14, .55);

  /* Escala tipográfica del UI kit */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:15px;
  --text-md:  17px;
  --text-lg:  20px;
  --text-xl:  26px;
  --text-2xl: 34px;
  --text-3xl: 44px;
  --text-4xl: 60px;
  --text-5xl: 84px;

  /* Tracking */
  --tracking-tight:  -.02em;
  --tracking-normal: 0;
  --tracking-wide:   .04em;
  --tracking-wider:  .12em;

  /* Radius del UI kit */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* Spacing del UI kit */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Motion */
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* Navy primitives (usados en gradientes del UI kit) */
  --navy-950: var(--bs-navy-950);
  --navy-900: var(--bs-navy-900);
  --navy-800: var(--bs-navy-800);
  --navy-700: var(--bs-navy-700);

  /* ── Compat: vocabulario viejo → tokens DS (FASE 4, causa madre #2) ──
     Rellena tokens que quedaron indefinidos en CSS inline de generadores
     parcialmente migrados. Una página que define el token localmente
     (:root inline o style="") SOBREESCRIBE este alias — por eso es seguro.
     `--ink` se excluye (ambiguo: bg oscuro vs color según página → se fija por generador). */
  --f:      var(--font-ui);
  --f-ui:   var(--font-ui);
  --f-head: var(--font-display);
  --gold:     var(--accent);
  --gold-dim: var(--accent-soft);
  --txt-on-gold: var(--txt-on-accent);
  --ice:   var(--txt);
  --slate:  var(--txt-2);
  --slate2: var(--txt-mut);
  --muted:  var(--txt-mut);
  --dim:    var(--txt-mut);
  --txt2:   var(--txt-2);
  --card:   var(--surface);
  --card2:  var(--surface-2);
  --card3:  var(--surface-3);
  --bg2:    var(--surface-2);
  --bg3:    var(--surface-3);
  --edge:   var(--border);
  --edge2:  var(--border-strong);
  --b1:     var(--border);
  --accent-secondary: var(--txt-2);
  --accent-down: var(--rd);
}

/* ── Skip link (a11y — WCAG 2.4.1) ──────────────────────────────
   Emitido por boca_base.nav_html() como .bs-skip-link en TODAS las páginas.
   Oculto hasta focus por teclado. */
.bs-skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--accent-primary);
  color: var(--bg-canvas);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.bs-skip-link:focus {
  left: 16px;
  outline: 2px solid var(--bg-canvas);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   NAV / FOOTER / BOTTOM-NAV compartidos — movidos aquí (linked) para que
   TODAS las páginas los tengan, incluidas las que no emiten _BASE_CSS inline
   (home, proximo-partido). Espejo de boca_base._BASE_CSS. UN solo nav/footer.
   ══════════════════════════════════════════════════════════════════ */
.bs-nav{position:sticky;top:0;z-index:100;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);height:60px;display:flex;align-items:center}
.bs-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;max-width:1120px;margin:0 auto;padding:0 24px}
.bs-nav-logo{font-family:var(--font-display);font-size:20px;font-weight:900;color:var(--text-primary);letter-spacing:-.01em}
.bs-nav-logo em{color:var(--accent-primary);font-style:normal}
.bs-nav-links{display:flex;gap:2px;list-style:none}
.bs-nav-links a{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);padding:6px 12px;border-radius:var(--radius-pill);transition:color var(--dur-fast),background var(--dur-fast)}
.bs-nav-links a:hover{color:var(--text-primary);background:var(--bg-surface-raised)}
.bs-nav-links a.active{color:var(--accent-primary);background:var(--bg-surface-raised)}
.bs-nav-pill{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);border:1px solid var(--border-default);border-radius:var(--radius-pill);padding:5px 12px;flex-shrink:0}
.bs-nav-pill-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-primary);animation:live-pulse 1.4s ease-in-out infinite}
.bs-nav-hamburger{display:none;flex-direction:column;gap:5px;padding:8px;border-radius:var(--radius-md);color:var(--text-primary)}
.bs-nav-hamburger span{width:22px;height:2px;background:currentColor;transition:transform var(--dur-base),opacity var(--dur-fast);display:block;border-radius:2px}
@media(max-width:860px){.bs-nav-links,.bs-nav-pill{display:none}.bs-nav-hamburger{display:flex}}
.bs-nav-overlay{position:fixed;inset:0;z-index:200;background:var(--bg-surface);display:flex;flex-direction:column;padding:64px 32px 32px;gap:4px;opacity:0;pointer-events:none;transform:translateX(100%);transition:opacity var(--dur-base),transform var(--dur-base) var(--ease-standard)}
.bs-nav-overlay.open{opacity:1;pointer-events:auto;transform:none}
.bs-nav-overlay a{font-family:var(--font-display);font-size:26px;font-weight:900;color:var(--text-primary);padding:14px 0;border-bottom:1px solid var(--border-subtle);letter-spacing:-.01em}
.bs-nav-overlay a.active{color:var(--accent-primary)}
.bs-nav-overlay-close{position:absolute;top:16px;right:16px;font-size:18px;color:var(--text-secondary);padding:8px;border-radius:var(--radius-md)}
/* ── Nav dropdowns (G-4) ── */
.bs-nav-dd{position:relative}
.bs-nav-dd-btn{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);padding:6px 12px;border-radius:var(--radius-pill);cursor:pointer;background:none;border:0;transition:color var(--dur-fast),background var(--dur-fast)}
.bs-nav-dd-btn:hover,.bs-nav-dd-btn[aria-expanded="true"]{color:var(--text-primary);background:var(--bg-surface-raised)}
.bs-nav-dd.active > .bs-nav-dd-btn{color:var(--accent-primary)}
.bs-nav-dd-caret{width:10px;height:10px;flex-shrink:0;transition:transform var(--dur-fast)}
.bs-nav-dd-btn[aria-expanded="true"] .bs-nav-dd-caret{transform:rotate(180deg)}
.bs-nav-dd-panel{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-float);padding:6px;z-index:150}
.bs-nav-dd-panel[hidden]{display:none}
.bs-nav-dd-panel a{display:block;font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text-secondary);padding:9px 12px;border-radius:var(--radius-md);transition:color var(--dur-fast),background var(--dur-fast)}
.bs-nav-dd-panel a:hover{color:var(--text-primary);background:var(--bg-surface-raised)}
.bs-nav-dd-panel a.active{color:var(--accent-primary);background:var(--bg-surface-raised)}
.bs-nav-dd-grouptitle{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);padding:10px 12px 4px}
/* Overlay mobile: el dropdown es acordeón en flujo, no panel flotante */
.bs-nav-ov-dd .bs-nav-dd-btn{width:100%;justify-content:space-between;font-family:var(--font-display);font-size:26px;font-weight:900;text-transform:none;letter-spacing:-.01em;color:var(--text-primary);padding:14px 0;border-bottom:1px solid var(--border-subtle);border-radius:0}
.bs-nav-ov-dd .bs-nav-dd-panel{position:static;min-width:0;box-shadow:none;border:0;background:none;padding:4px 0 8px 16px}
.bs-nav-ov-dd .bs-nav-dd-panel a{font-family:inherit;font-size:16px;font-weight:600;color:var(--text-secondary);border-bottom:0}
@media(prefers-reduced-motion:reduce){.bs-nav-dd-caret{transition:none}}
.bs-footer{background:var(--bg-surface);border-top:1px solid var(--border-subtle);padding:48px 0 32px;margin-top:80px}
.bs-footer-inner{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;gap:16px}
.bs-footer-logo{font-family:var(--font-display);font-size:24px;font-weight:900;color:var(--text-primary)}
.bs-footer-logo em{color:var(--accent-primary);font-style:normal}
.bs-footer-tagline{font-size:14px;color:var(--text-secondary)}
.bs-footer-trust{display:flex;gap:20px;flex-wrap:wrap}
.bs-trust-item{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary)}
.bs-footer-divider{height:1px;background:var(--border-subtle)}
.bs-footer-nav,.bs-footer-nav-secondary{display:flex;gap:16px;flex-wrap:wrap}
.bs-footer-nav a,.bs-footer-nav-secondary a{font-size:13px;color:var(--text-secondary);transition:color var(--dur-fast)}
.bs-footer-nav a:hover,.bs-footer-nav-secondary a:hover{color:var(--text-primary)}
.bs-footer-nav-secondary a{font-size:12px;color:var(--text-tertiary)}
.bs-footer-stars-row{display:flex;gap:6px}
.bs-star{color:var(--accent-primary)}
.bs-footer-meta{font-size:12px;color:var(--text-tertiary);line-height:1.6}
.bs-bottom-nav{display:none}
@media(max-width:768px){.bs-bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--bg-surface);border-top:1px solid var(--border-subtle);padding:8px 0 max(8px,env(safe-area-inset-bottom))}}
.bs-bn-item{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-tertiary);padding:4px 0;transition:color var(--dur-fast)}
.bs-bn-item.active,.bs-bn-item:hover{color:var(--accent-primary)}
.bs-bn-item svg{flex-shrink:0}
@keyframes live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}

/* ── Footer centrado (G-2) — UN solo footer para todo el sitio. Centrado. ── */
.bs-footer .bs-footer-inner { align-items: center; text-align: center; }
.bs-footer .bs-footer-logo { align-self: center; }
.bs-footer .bs-footer-trust,
.bs-footer .bs-footer-nav,
.bs-footer .bs-footer-nav-secondary { justify-content: center; }