/* Futurama: gris metal (Bender) + brillo rojo-naranja (sus ojos/antena) +
   campo de estrellas de fondo en oscuro — el viaje espacial de la
   cabecera de la serie, no solo "neón sobre azul" genérico. */
:root[data-estilo="futurama"] {
  --acento-2: #b0bec5;
  --radio: 12px;
  --radio-chico: 8px;
}
:root[data-estilo="futurama"][data-tema="claro"] {
  --verde: #ff6b35;
  --verde-claro: #ff9466;
  --gris-100: #eceff1;
  --gris-200: #cfd8dc;
  --superficie: #f5f6f7;
  --superficie-alta: #e3e7e9;
  --texto: #202325;
  --borde-tarjeta: 1px solid #b0bec5;
  --sombra: 0 2px 6px rgba(0, 0, 0, .12), 0 8px 20px rgba(0, 0, 0, .08);
  --sombra-alta: 0 16px 40px rgba(0, 0, 0, .18);
}
:root[data-estilo="futurama"][data-tema="oscuro"] {
  --verde: #ff6b35;
  --verde-claro: #ff9466;
  --gris-100: #0a0c10;
  --gris-200: #2b2f33;
  --superficie: #2b2f33;
  --superficie-alta: #383d42;
  --texto: #eceff1;
  --borde-tarjeta: 1px solid #454b51;
  --sombra: 0 2px 8px rgba(0, 0, 0, .5), 0 0 20px rgba(255, 107, 53, .2);
  --sombra-alta: 0 20px 50px rgba(0, 0, 0, .6);
}
:root[data-estilo="futurama"] #app { background-color: var(--gris-100); }
:root[data-tema="oscuro"][data-estilo="futurama"] #app {
  background-image:
    radial-gradient(1.6px 1.6px at 15% 25%, rgba(255, 255, 255, .9), transparent),
    radial-gradient(1.2px 1.2px at 68% 60%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.2px 1.2px at 38% 82%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.6px 1.6px at 88% 18%, rgba(255, 255, 255, .85), transparent),
    radial-gradient(1.2px 1.2px at 8% 92%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.2px 1.2px at 55% 42%, rgba(255, 255, 255, .6), transparent);
  background-repeat: repeat;
  background-size: 200px 200px;
}
:root[data-estilo="futurama"] .card,
:root[data-estilo="futurama"] .tarjeta-partido,
:root[data-estilo="futurama"] .tarjeta-rivales { border: 1px solid var(--gris-200); }
:root[data-estilo="futurama"] header.topbar {
  background-image: none;
  background: linear-gradient(135deg, var(--superficie) 0%, color-mix(in srgb, var(--superficie) 65%, black) 100%);
  color: var(--verde);
  text-shadow: 0 0 8px color-mix(in srgb, var(--verde) 60%, transparent);
  border-bottom: 2px solid var(--acento-2);
  box-shadow: none;
}
:root[data-estilo="futurama"] header.topbar select,
:root[data-estilo="futurama"] .boton-gestion { background: var(--superficie-alta); color: var(--texto); border-color: var(--acento-2); }
:root[data-estilo="futurama"] nav.bottomnav { border-top: 2px solid var(--acento-2); }
:root[data-estilo="futurama"] nav.bottomnav a.activo { color: var(--verde); text-shadow: 0 0 6px color-mix(in srgb, var(--verde) 60%, transparent); }

/* Iconos de menú propios: insignia redondeada con un detalle distinto
   perforado en cada una. El de Ajustes es un cohete retro genérico
   (morro, cuerpo, aletas y una ventanilla) — homenaje al viaje espacial
   de la serie sin dibujar ninguna nave con copyright. */
:root[data-estilo="futurama"] nav.bottomnav a .icono svg,
:root[data-estilo="futurama"] nav.bottomnav a .icono-dbz { display: none; }
:root[data-estilo="futurama"] nav.bottomnav a .icono-tematico { display: block; }
:root[data-estilo="futurama"] {
  --icono-tema-jornada: url("../../icons/temas/futurama/jornada.svg");
  --icono-tema-clasificacion: url("../../icons/temas/futurama/clasificacion.svg");
  --icono-tema-muro: url("../../icons/temas/futurama/muro.svg");
  --icono-tema-liga: url("../../icons/temas/futurama/liga.svg");
  --icono-tema-ajustes: url("../../icons/temas/futurama/ajustes.svg");
}