/* ---- Temas "sistema operativo" ---- */
/* Windows 11: nada de cristal/blur (eso ya lo hacen Cristal y PS5) — la
   seña de identidad aquí es el mosaico de 4 tejas en la esquina de cada
   tarjeta (como el logo de 4 paneles, pero abstracto, sin reproducirlo
   tal cual) y un fondo de rejilla fina tipo "snap layout", más sólido y
   plano que ningún otro tema. */
:root[data-estilo="windows"] {
  --acento-2: #ffb900;
  --radio: 6px;
  --radio-chico: 4px;
}
:root[data-estilo="windows"][data-tema="claro"] {
  --verde: #0078d4;
  --verde-claro: #2899f5;
  --gris-100: #f3f6fb;
  --gris-200: #e4e9f2;
  --superficie: #ffffff;
  --superficie-alta: #eef3fa;
  --texto: #14171c;
  --borde-tarjeta: 1px solid #dde4f0;
  --sombra: 0 1px 2px rgba(0, 30, 60, .06), 0 1px 0 rgba(0, 30, 60, .04);
  --sombra-alta: 0 12px 28px rgba(0, 30, 60, .14);
}
:root[data-estilo="windows"][data-tema="oscuro"] {
  --verde: #60cdff;
  --verde-claro: #8fdcff;
  --gris-100: #0d1117;
  --gris-200: #1c212b;
  --superficie: #202020;
  --superficie-alta: #2b2b2b;
  --texto: #f2f6fc;
  --borde-tarjeta: 1px solid #2e2e2e;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-alta: 0 16px 36px rgba(0, 0, 0, .5);
}
:root[data-estilo="windows"] #app {
  background-image: linear-gradient(color-mix(in srgb, var(--texto) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--texto) 5%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  background-color: var(--gris-100);
}
:root[data-estilo="windows"] .card,
:root[data-estilo="windows"] .tarjeta-partido,
:root[data-estilo="windows"] .tarjeta-rivales {
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
:root[data-estilo="windows"] .card::before,
:root[data-estilo="windows"] .tarjeta-partido::before,
:root[data-estilo="windows"] .tarjeta-rivales::before {
  content: '';
  position: absolute;
  top: .65rem;
  right: .65rem;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--verde), var(--verde)) 0 0 / 6px 6px no-repeat,
    linear-gradient(var(--acento-2), var(--acento-2)) 7px 0 / 6px 6px no-repeat,
    linear-gradient(var(--acento-2), var(--acento-2)) 0 7px / 6px 6px no-repeat,
    linear-gradient(var(--verde), var(--verde)) 7px 7px / 6px 6px no-repeat;
  opacity: .55;
  pointer-events: none;
}
:root[data-estilo="windows"] .card:active,
:root[data-estilo="windows"] .tarjeta-partido:active,
:root[data-estilo="windows"] .tarjeta-rivales:active {
  box-shadow: var(--sombra), 0 0 0 1px color-mix(in srgb, var(--verde) 55%, transparent);
}
:root[data-estilo="windows"] header.topbar {
  background-image: none;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: none;
  border-bottom: var(--borde-tarjeta);
}
:root[data-estilo="windows"] header.topbar select,
:root[data-estilo="windows"] .boton-gestion { background: var(--superficie-alta); color: var(--texto); border-color: var(--gris-200); border-radius: 4px; }
:root[data-estilo="windows"] nav.bottomnav { background: var(--superficie); }
:root[data-estilo="windows"] nav.bottomnav a.activo { color: var(--verde); }

/* Oswald condensada en mayúsculas es rótulo deportivo, no Fluent — aquí
   los títulos pasan a la pila de sistema (Segoe UI en Windows de
   verdad) con peso semibold, sin mayúsculas forzadas. */
:root[data-estilo="windows"] header.topbar h1,
:root[data-estilo="windows"] h2.titulo-vista {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}