/* ---- Temas "consola" ----
   Reutilizan las mismas variables que ya mueve todo el CSS (--verde hace de
   acento principal en botones/activos/badges en toda la app, --radio marca
   el redondeo de esquinas de cualquier tarjeta/botón) — así cada tema solo
   redefine tokens + un par de detalles de silueta propios, en vez de
   reescribir cada componente. Cada uno respeta claro/oscuro por separado,
   igual que ya hacía Cristal. */
/* PS5: blanco/azul o negro-azulado, brillo azul, esquina recortada en
   diagonal en las tarjetas (la silueta de panel de la consola). */
:root[data-estilo="ps5"] {
  --acento-2: #00c2ff;
  --radio: 20px;
  --radio-chico: 13px;
}
:root[data-estilo="ps5"][data-tema="claro"] {
  --verde: #0070cc;
  --verde-claro: #2f9bff;
  --gris-100: #eef2f7;
  --gris-200: #dde6f2;
  --superficie: #ffffff;
  --superficie-alta: #e4ecf7;
  --texto: #0b1420;
  --borde-tarjeta: 1px solid #d7e3f2;
  --sombra: 0 2px 8px rgba(11, 20, 40, .06), 0 12px 30px rgba(0, 112, 204, .14);
  --sombra-alta: 0 20px 50px rgba(0, 112, 204, .22);
}
:root[data-estilo="ps5"][data-tema="oscuro"] {
  --verde: #1fb2ff;
  --verde-claro: #6fd2ff;
  --gris-100: #05070d;
  --gris-200: #141b28;
  --superficie: #10151f;
  --superficie-alta: #171f2e;
  --texto: #eef4ff;
  --borde-tarjeta: 1px solid #1c2436;
  --sombra: 0 2px 10px rgba(0, 0, 0, .5), 0 0 30px rgba(31, 178, 255, .18);
  --sombra-alta: 0 20px 60px rgba(31, 178, 255, .28);
}
:root[data-estilo="ps5"] .card,
:root[data-estilo="ps5"] .tarjeta-partido,
:root[data-estilo="ps5"] .tarjeta-rivales {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
:root[data-estilo="ps5"] header.topbar {
  background-image: none;
  background: linear-gradient(135deg, var(--superficie) 0%, var(--superficie-alta) 100%);
  color: var(--texto);
  border-bottom: 2px solid var(--verde);
  box-shadow: 0 2px 24px color-mix(in srgb, var(--verde) 30%, transparent);
}
:root[data-estilo="ps5"] header.topbar select { background: var(--superficie-alta); color: var(--texto); border-color: var(--gris-200); }
:root[data-estilo="ps5"] .boton-gestion { background: var(--superficie-alta); color: var(--texto); border-color: var(--gris-200); }
:root[data-estilo="ps5"] nav.bottomnav { border-top: 2px solid var(--verde); box-shadow: 0 -2px 24px color-mix(in srgb, var(--verde) 25%, transparent); }

/* Iconos de menú propios: la misma insignia con esquina recortada en
   diagonal que ya usan las tarjetas de este tema, con un detalle
   distinto perforado en cada una (balón, copa, líneas, barras). El de
   Ajustes es un mando estilizado con los 4 botones y la cruceta. */
:root[data-estilo="ps5"] nav.bottomnav a .icono svg,
:root[data-estilo="ps5"] nav.bottomnav a .icono-dbz { display: none; }
:root[data-estilo="ps5"] nav.bottomnav a .icono-tematico { display: block; }
:root[data-estilo="ps5"] {
  --icono-tema-jornada: url("../../icons/temas/ps5/jornada.svg");
  --icono-tema-clasificacion: url("../../icons/temas/ps5/clasificacion.svg");
  --icono-tema-muro: url("../../icons/temas/ps5/muro.svg");
  --icono-tema-liga: url("../../icons/temas/ps5/liga.svg");
  --icono-tema-ajustes: url("../../icons/temas/ps5/ajustes.svg");
}