/* Xbox: negro puro/blanco, verde Xbox como acento, esquinas casi a
   escuadra y un canto grueso a la izquierda de cada tarjeta — bloque,
   plano, sin adornos. */
:root[data-estilo="xbox"] {
  --acento-2: #9bf00d;
  --radio: 4px;
  --radio-chico: 2px;
}
:root[data-estilo="xbox"][data-tema="claro"] {
  --verde: #107c10;
  --verde-claro: #3aad3a;
  --gris-100: #f2f2f2;
  --gris-200: #e0e0e0;
  --superficie: #ffffff;
  --superficie-alta: #ececec;
  --texto: #101010;
  --borde-tarjeta: 1px solid #d4d4d4;
  --sombra: 0 1px 0 rgba(0, 0, 0, .08);
  --sombra-alta: 0 8px 24px rgba(0, 0, 0, .18);
}
:root[data-estilo="xbox"][data-tema="oscuro"] {
  --verde: #16a316;
  --verde-claro: #23c923;
  --gris-100: #000000;
  --gris-200: #1c1c1c;
  --superficie: #101010;
  --superficie-alta: #1a1a1a;
  --texto: #ffffff;
  --borde-tarjeta: 1px solid #2a2a2a;
  --sombra: 0 0 0 1px rgba(22, 163, 22, .25);
  --sombra-alta: 0 12px 30px rgba(0, 0, 0, .5);
}
:root[data-estilo="xbox"] .card,
:root[data-estilo="xbox"] .tarjeta-rivales { border-left: 4px solid var(--verde); }
:root[data-estilo="xbox"] header.topbar {
  background-image: none;
  background: var(--superficie);
  color: var(--texto);
  border-bottom: 3px solid var(--verde);
  box-shadow: none;
}
:root[data-estilo="xbox"] header.topbar select { background: var(--superficie-alta); color: var(--texto); border-color: var(--gris-200); }
:root[data-estilo="xbox"] .boton-gestion { background: var(--superficie-alta); color: var(--texto); border-color: var(--gris-200); border-radius: 4px; }
:root[data-estilo="xbox"] nav.bottomnav a.activo { color: var(--verde); }

/* Iconos de menú propios: insignia de esquinas a escuadra (nada de
   redondeo, coherente con --radio casi plano de este tema) con un
   detalle distinto perforado en cada una. El de Ajustes es un mando
   con cruceta circular (a diferencia de la de PS5, en cruz) y los 4
   botones en diamante. */
:root[data-estilo="xbox"] nav.bottomnav a .icono svg,
:root[data-estilo="xbox"] nav.bottomnav a .icono-dbz { display: none; }
:root[data-estilo="xbox"] nav.bottomnav a .icono-tematico { display: block; }
:root[data-estilo="xbox"] {
  --icono-tema-jornada: url("../../icons/temas/xbox/jornada.svg");
  --icono-tema-clasificacion: url("../../icons/temas/xbox/clasificacion.svg");
  --icono-tema-muro: url("../../icons/temas/xbox/muro.svg");
  --icono-tema-liga: url("../../icons/temas/xbox/liga.svg");
  --icono-tema-ajustes: url("../../icons/temas/xbox/ajustes.svg");
}