/* Oswald (solo subconjunto latino, ~12KB) autoalojada para titulares y
   marcadores — nada de CDN externo, coherente con que la PWA deba poder
   cachearse entera y funcionar sin depender de terceros en cada carga. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/oswald-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}
:root {
  --verde: #0d5c3f;
  --verde-claro: #16824f;
  --rojo: #c0392b;
  --gris-100: #f1f2f4;
  --gris-200: #e3e6ea;
  --gris-400: #a7aeb6;
  --gris-700: #444a52;
  --texto: #14171a;
  --superficie: #ffffff;
  --superficie-alta: #eceef1;
  --borde-tarjeta: none;
  --burbuja-propia: #e3f2ec;
  --radio: 16px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgba(20, 23, 26, .04), 0 6px 16px rgba(20, 23, 26, .08);
  --sombra-alta: 0 16px 40px rgba(20, 23, 26, .16);
  --acento-2: #6d5bff;
  --cristal-fondo: rgba(255, 255, 255, .55);
  --cristal-borde: rgba(20, 23, 26, .08);
  --cristal-brillo: rgba(255, 255, 255, .6);
  --fuente-display: 'Oswald', 'Arial Narrow', sans-serif;
  --patron-cesped: repeating-linear-gradient(
    118deg,
    rgba(255, 255, 255, .05) 0px, rgba(255, 255, 255, .05) 26px,
    transparent 26px, transparent 52px
  );
  color-scheme: light;
  /* Iconos de menú inferior propios por tema (ver sección 2 de
     DISENO_ESTADO.local.md): "none" por defecto, así ningún tema sin
     icono propio muestra nada — solo un tema que redefina estas
     variables activa su set de iconos (ver .icono-tematico en
     layout.css). */
  --icono-tema-jornada: none;
  --icono-tema-clasificacion: none;
  --icono-tema-muro: none;
  --icono-tema-liga: none;
  --icono-tema-ajustes: none;
}
/* Dark-first: es el aspecto por defecto de la app (ver fijarValorPorDefectoTema
   en app.js), inspirado en apps de resultados tipo FotMob — fondo casi negro,
   tarjetas claramente más claras para que la elevación se note de verdad, y
   un verde mucho más vivo como acento en vez de ambientar toda la pantalla. */
:root[data-tema="oscuro"] {
  --verde: #22e07f;
  --verde-claro: #3df09a;
  --rojo: #ff6b6b;
  --gris-100: #0a0c0f;
  --gris-200: #23272d;
  --gris-400: #3c434b;
  --gris-700: #99a2ac;
  --texto: #f4f6f7;
  --superficie: #16191d;
  --superficie-alta: #1f242a;
  --borde-tarjeta: 1px solid #23272d;
  --burbuja-propia: #123322;
  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .4);
  --sombra-alta: 0 20px 50px rgba(0, 0, 0, .6);
  --acento-2: #8f7bff;
  --cristal-fondo: rgba(255, 255, 255, .055);
  --cristal-borde: rgba(255, 255, 255, .1);
  --cristal-brillo: rgba(255, 255, 255, .09);
  color-scheme: dark;
}
* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@keyframes fade-in-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pop-in { 0% { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px) scale(.95); } }
@keyframes flash-resaltado { 0% { background: #fff3b0; } 100% { background: transparent; } }
@keyframes bounce-nav { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--gris-100);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}
/* nada de selección de texto tipo "página web" en los controles de la interfaz */
button, a, .tri, nav.bottomnav, header.topbar, .tabs {
  user-select: none;
  -webkit-user-select: none;
}
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.centro { text-align: center; }
.muted { color: var(--gris-700); font-size: .8rem; }
.espacio-top { margin-top: 1rem; }