/* ============================================================================
   PickPlay — shared.css (única fuente de verdad)

   Paleta editorial light + tipografía Oswald/Inter/IBM Plex Mono.
   Adopta el sistema de diseño construido con Lovable.

   Los tokens viejos (--bg-primary, --accent, --text-primary, etc.) se
   conservan como ALIAS de los nuevos para que el CSS inline existente en
   cada página siga funcionando sin tocar 50 archivos. Cuando se reescriba
   una página, debe usar los nombres nuevos (--bg, --paper, --ink, etc.)
   y los alias se podrán retirar.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Color tokens (OKLCH) — fuente de verdad ────────────────────────── */
  --bg:           oklch(0.985 0.006 85);     /* newsprint warm off-white */
  --paper:        oklch(0.999 0.002 85);     /* card surface */
  --surface:      oklch(0.955 0.008 85);     /* hover / elevated soft */
  --ink:          oklch(0.205 0.012 70);     /* near-black */
  --ink-soft:     oklch(0.42 0.012 70);      /* texto secundario */
  --muted:        oklch(0.6 0.012 75);       /* placeholders, hints */
  --rule:         oklch(0.89 0.008 80);      /* bordes, separadores */

  --accent:       oklch(0.42 0.11 250);      /* azul tinta editorial — CTA */
  --accent-soft:  oklch(0.93 0.035 250);     /* tint del accent */
  --accent-ink:   oklch(0.99 0.002 85);      /* texto sobre accent */

  --signal:       oklch(0.55 0.2 27);        /* vermellón — LIVE/error */
  --signal-soft:  oklch(0.94 0.05 30);

  --money:        oklch(0.5 0.11 150);       /* verde tinta — positivo */
  --money-soft:   oklch(0.93 0.05 150);

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  --font-display: 'Oswald', 'Inter', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   18px;
  --r-pill: 9999px;

  /* ── Shadows tintadas con ink (nunca black puro) ────────────────────── */
  --shadow-card:    0 1px 2px oklch(0.205 0.012 70 / 0.07), 0 2px 8px oklch(0.205 0.012 70 / 0.05);
  --shadow-raised:  0 4px 14px oklch(0.205 0.012 70 / 0.10), 0 2px 4px oklch(0.205 0.012 70 / 0.06);
  --shadow-overlay: 0 16px 48px oklch(0.205 0.012 70 / 0.18);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --motion-fast:   120ms;
  --motion-medium: 220ms;
  --motion-slow:   380ms;
  --ease-out:      cubic-bezier(.23, 1, .32, 1);
  --ease-in-out:   cubic-bezier(.77, 0, .175, 1);

  /* ────────────────────────────────────────────────────────────────────── */
  /* ALIAS de tokens legacy — apuntan a los nuevos                         */
  /* Estos existen para que el CSS inline de cada página siga funcionando  */
  /* sin necesidad de migrar todas las referencias var(--accent) etc.      */
  /* ────────────────────────────────────────────────────────────────────── */
  --bg-primary:      var(--bg);
  --bg-secondary:    var(--paper);
  --accent-blue:     var(--accent);
  --text-primary:    var(--ink);
  --text-secondary:  var(--ink-soft);
  --error:           var(--signal);
  --success:         var(--money);
  --radius-sm:       var(--r-md);
  --radius-md:       var(--r-lg);
}

/* ── Body base ──────────────────────────────────────────────────────────── */
html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings */
h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  line-height: 1.0;
}

/* Eliminar 300ms tap delay y highlight azul iOS */
a, button, [role="button"], input, select, label, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
  height: 56px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
}

.navbar-logo { text-decoration: none; display: flex; align-items: center; gap: .45rem; }
/* SVG legacy del logo oculto — el wordmark texto es suficiente */
.navbar-logo svg { display: none; }

.navbar-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.navbar-wordmark em { font-style: normal; color: var(--accent); }

.navbar-right { display: flex; align-items: center; gap: .5rem; }

/* ── Subheader contextual ────────────────────────────────────────────── */
.subheader {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 40px;
}

.subheader-titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subheader-meta {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ── Badges de estado ────────────────────────────────────────────────── */
/* Sigue el sistema de Lovable: variantes con bg-soft + color sólido,
   border transparent para look pill flat.

   Mapeo de estados de PickPlay → variantes Lovable:
   - abierta   → variant money    (verde tinta)
   - cerrada   → variant muted    (surface gris)
   - borrador  → variant accent   (azul tinta)
   - congelada → variant signal   (vermellón)
   - en vivo   → variant signal con live-dot
*/
.badge-estado {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .625rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.badge-abierta  { background: var(--money-soft);  color: var(--money); }
.badge-cerrada  { background: var(--surface);     color: var(--ink-soft); }
.badge-borrador { background: var(--accent-soft); color: var(--accent); }
.badge-congelada { background: var(--signal-soft); color: var(--signal); }

/* ── Botones comunes ─────────────────────────────────────────────────── */
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.btn-primary:hover:not(:disabled) { background: oklch(0.36 0.11 250); }
.btn-primary:active:not(:disabled) { transform: scale(.97); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }

.btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface); border-color: var(--ink-soft); }
.btn-secondary:active:not(:disabled) { transform: scale(.97); }

/* ── Alertas ─────────────────────────────────────────────────────────── */
.alert { padding: .875rem 1rem; border-radius: var(--r-md); font-size: .875rem; margin-bottom: 1rem; display: none; }
.alert.visible { display: block; }
.alert-error   { background: var(--signal-soft); border: 1px solid var(--signal); color: var(--signal); }
.alert-success { background: var(--money-soft); border: 1px solid var(--money); color: var(--money); }

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  color: var(--bg);
  font-family: var(--font-sans);
  padding: .625rem 1.25rem;
  font-size: .875rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--motion-medium) var(--ease-out);
  pointer-events: none;
  z-index: 500;
  box-shadow: var(--shadow-overlay);
}
.toast.show { opacity: 1; }

/* Desktop: toast arriba en lugar de abajo */
@media (min-width: 768px) {
  .toast { top: 1.5rem; bottom: auto; }
}

/* ── Skeleton loader ─────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--rule) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1s linear infinite;
  border-radius: var(--r-md);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Spinner ─────────────────────────────────────────────────────────── */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid oklch(0.205 0.012 70 / 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .45s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Tabular numbers ─────────────────────────────────────────────────── */
.tnum,
.ranking-pos,
.ranking-puntos,
.standings-pos,
.marcador,
.marcador-real,
.pm-score-num,
.pm-pts,
.mq-puntos {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Focus visible ───────────────────────────────────────────────────── */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Reduce motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   ds-* — utilidades del design system editorial, para páginas que las usen
   directamente sin clases legacy (.btn-primary, .navbar, etc.).

   Usadas hoy en index.html. Disponibles para nuevas páginas.
   ============================================================================ */

.ds-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.ds-wordmark em { font-style: normal; color: var(--accent); }

/* Botones ds-* */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition:
    background var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}
.ds-btn:active:not(:disabled) { transform: scale(0.97); }
.ds-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ds-btn-lg { padding: 1rem 1.5rem; font-size: .9375rem; }

.ds-btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.ds-btn-primary:hover:not(:disabled) { background: oklch(0.36 0.11 250); }

.ds-btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.ds-btn-secondary:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--ink-soft);
}

.ds-btn-ghost {
  background: transparent;
  color: var(--ink-soft);
}
.ds-btn-ghost:hover:not(:disabled) { background: var(--surface); color: var(--ink); }

/* Para CTA invertido sobre fondo ink */
.ds-btn-inverse {
  background: var(--bg);
  color: var(--ink);
}
.ds-btn-inverse:hover:not(:disabled) { background: oklch(0.93 0.005 85); }

/* Link inline editorial */
.ds-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: .8125rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-fast) var(--ease-out);
}
.ds-link:hover { border-bottom-color: var(--accent); }

/* Eyebrow editorial (mono, uppercase, con regla) */
.ds-eyebrow {
  display: inline-block;
  padding: 0.25rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Live dot (pulse) */
.ds-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  animation: ds-pulse 1.4s var(--ease-in-out) infinite;
}
@keyframes ds-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ============================================================================
   NAVEGACIÓN COMPARTIDA — adoptada de Lovable
   - PageHeader  (src/components/app/PageHeader.tsx)
   - Tabs        (src/components/ui/tabs.tsx — shadcn)
   - BottomNav   (src/components/app/BottomNav.tsx)

   El JS de cada página puede asumir estas clases en cualquier *.html que
   incluya shared.css. Conservar `data-panel` + `.activo` para conmutar
   paneles internos; conservar `data-globalnav` para enrutar entre páginas.
   ============================================================================ */

:root {
  --bottom-nav-h: 60px;
}

/* ── PageHeader ─────────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: color-mix(in oklch, var(--paper) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Back chevron: 36px button, ink-soft + hover surface */
.btn-back {
  width: 36px; height: 36px;
  margin-left: -.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: var(--r-md);
  transition: background-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
  touch-action: manipulation;
}
.btn-back:hover { background: var(--surface); color: var(--ink); }
.btn-back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}

.page-header-info { min-width: 0; flex: 1; }
.page-header-title-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.page-header-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-header-subtitle {
  font-size: .875rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-header-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Logo de liga junto al título (chip pequeño) */
.liga-logo-header {
  width: 24px;
  height: 24px;
  object-fit: contain;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 50%;
  padding: 2px;
  flex-shrink: 0;
}

/* Refresh button compartido */
.btn-refresh {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: var(--r-md);
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.btn-refresh:hover { background: var(--surface); color: var(--ink); }
.btn-refresh.girando svg { animation: spin .6s linear; }

/* ── Hub Tabs / segmented control (shadcn Tabs) ─────────────────────────── */
.hub-tabs-wrap {
  background: var(--bg);
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.hub-tabs {
  display: flex;
  align-items: center;
  gap: .25rem;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: .25rem;
  max-width: 720px;
  margin: 0 auto;
}
.hub-tab {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  padding: .375rem .5rem;
  border-radius: var(--r-md);
  transition: background-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}
.hub-tab svg { flex-shrink: 0; }
.hub-tab:hover:not(.activo) { color: var(--ink-soft); }
.hub-tab.activo {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
/* En viewports apretados ocultamos el icono cuando hay 5+ tabs */
@media (max-width: 480px) {
  .hub-tabs:has(> :nth-child(5)) .hub-tab svg { display: none; }
  .hub-tabs:has(> :nth-child(5)) .hub-tab { font-size: .78rem; gap: 0; }
}
.hub-tab.bloqueado { opacity: .35; pointer-events: none; }
.hub-tab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-card), 0 0 0 2px var(--accent);
}

/* ── Sub-nav de rounds (filtro J1/J2/J3/Octavos/etc) ─────────────────────────
   Aparece dentro de un panel/página cuando la jornada agrupa varios rounds
   (p.ej. Mundial "Fase de Grupos" = Group Stage - 1/2/3). Patrón compacto,
   distinto de hub-tabs para no competir visualmente con la nav principal. */
.sub-nav-wrap {
  padding: .75rem 1rem .25rem;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1rem;
}
.sub-nav {
  display: flex;
  gap: .375rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-width: 720px;
  margin: 0 auto;
}
.sub-nav::-webkit-scrollbar { display: none; }

.sub-nav-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--surface);
  border: 1px solid transparent;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  transition: background-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.sub-nav-tab:hover:not(.activo) { color: var(--ink); }
.sub-nav-tab.activo {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.sub-nav-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--bg);
}

/* ── BottomNav global (5 items: Hub / Quinielas / Ranking / Ligas / Perfil) */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-h);
  background: color-mix(in oklch, var(--paper) 90%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  z-index: 40;
}
.bottom-nav .nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: .72rem;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  padding: .625rem 0;
  transition: color var(--motion-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav .nav-btn svg { flex-shrink: 0; }
.bottom-nav .nav-btn:hover:not(.activo):not(.bloqueado) { color: var(--ink-soft); }
.bottom-nav .nav-btn.activo { color: var(--accent); }
.bottom-nav .nav-btn.activo span { font-weight: 600; }
.bottom-nav .nav-btn.bloqueado { opacity: .35; pointer-events: none; }
.bottom-nav .nav-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}