/* Switch: blanco/gris oscuro con rojo+azul Joy-Con, esquinas muy
   redondeadas y una cabecera partida en dos colores — juguetón. */
:root[data-estilo="switch"] {
  --acento-2: #0ab9e6;
  --radio: 26px;
  --radio-chico: 18px;
}
:root[data-estilo="switch"][data-tema="claro"] {
  --verde: #e60012;
  --verde-claro: #ff4d5e;
  --gris-100: #f5f5f7;
  --gris-200: #e9e9ee;
  --superficie: #ffffff;
  --superficie-alta: #eef1f5;
  --texto: #16181d;
  --borde-tarjeta: none;
  --sombra: 0 4px 14px rgba(230, 0, 18, .1), 0 10px 30px rgba(10, 185, 230, .1);
  --sombra-alta: 0 20px 50px rgba(230, 0, 18, .16);
}
:root[data-estilo="switch"][data-tema="oscuro"] {
  --verde: #ff4d5e;
  --verde-claro: #ff7a86;
  --gris-100: #121218;
  --gris-200: #21232c;
  --superficie: #1c1d24;
  --superficie-alta: #262832;
  --texto: #f5f6fa;
  --borde-tarjeta: none;
  --sombra: 0 4px 14px rgba(0, 0, 0, .4), 0 0 24px rgba(10, 185, 230, .14);
  --sombra-alta: 0 20px 50px rgba(0, 0, 0, .5);
}
:root[data-estilo="switch"] header.topbar {
  background-image: none;
  background: linear-gradient(90deg, var(--verde) 0%, var(--verde) 50%, var(--acento-2) 50%, var(--acento-2) 100%);
  color: #fff;
  border-bottom: none;
  box-shadow: none;
}
:root[data-estilo="switch"] header.topbar select { background: rgba(255, 255, 255, .2); color: #fff; border-color: rgba(255, 255, 255, .35); }
:root[data-estilo="switch"] .boton-gestion { background: rgba(255, 255, 255, .2); color: #fff; border-color: rgba(255, 255, 255, .35); }
:root[data-estilo="switch"] .card,
:root[data-estilo="switch"] .tarjeta-partido,
:root[data-estilo="switch"] .tarjeta-rivales { border-top: 4px solid var(--acento-2); }
:root[data-estilo="switch"] nav.bottomnav a.activo { color: var(--verde); }