/* macOS/iOS: los "semáforos" de ventana (rojo/ámbar/verde) en la topbar,
   esquinas muy redondeadas tipo squircle, vibrancy real y un "Dynamic
   Island" — la píldora negra flotante del indicador activo en la barra
   inferior — como señas de identidad, no solo azul + minimalismo. */
:root[data-estilo="apple"] {
  --acento-2: #5e5ce6;
  --radio: 20px;
  --radio-chico: 14px;
}
:root[data-estilo="apple"][data-tema="claro"] {
  --verde: #007aff;
  --verde-claro: #409cff;
  --gris-100: #f5f5f7;
  --gris-200: #e8e8ed;
  --superficie: #ffffff;
  --superficie-alta: #f0f0f4;
  --texto: #1d1d1f;
  --borde-tarjeta: 1px solid #e5e5ea;
  --sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .06);
  --sombra-alta: 0 12px 32px rgba(0, 0, 0, .12);
}
:root[data-estilo="apple"][data-tema="oscuro"] {
  --verde: #0a84ff;
  --verde-claro: #409cff;
  --gris-100: #000000;
  --gris-200: #1c1c1e;
  --superficie: #1c1c1e;
  --superficie-alta: #2c2c2e;
  --texto: #f5f5f7;
  --borde-tarjeta: 1px solid #2c2c2e;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
  --sombra-alta: 0 16px 40px rgba(0, 0, 0, .5);
}
:root[data-estilo="apple"] header.topbar {
  background-image: none;
  background: color-mix(in srgb, var(--superficie) 70%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  color: var(--texto);
  box-shadow: none;
  border-bottom: var(--borde-tarjeta);
}
/* Los "semáforos" son un elemento flex más (::before es el primer hijo de
   por sí), no un overlay absoluto con padding-left en todo el header — así
   solo ocupan su propio hueco fijo y el h1 sigue encogiendo con su elipsis
   normal en vez de perder espacio y cortarse antes de tiempo. */
:root[data-estilo="apple"] header.topbar::before {
  content: '';
  flex: 0 0 28px;
  width: 28px;
  height: 9px;
  margin-right: .4rem;
  /* Un ligero relieve (sombra interior sutil + un punto de brillo) en
     cada semáforo, para que no se queden planos como tres círculos de
     color — el mismo tipo de detalle sutil que ya reciben los demás
     temas en sus propios acentos. */
  background:
    radial-gradient(circle at 35% 32%, rgba(255, 255, 255, .55) 0%, transparent 40%) 0 50% / 9px 9px no-repeat,
    radial-gradient(circle, #ff5f57 46%, transparent 49%) 0 50% / 9px 9px no-repeat,
    radial-gradient(circle at 35% 32%, rgba(255, 255, 255, .55) 0%, transparent 40%) 9.5px 50% / 9px 9px no-repeat,
    radial-gradient(circle, #febc2e 46%, transparent 49%) 9.5px 50% / 9px 9px no-repeat,
    radial-gradient(circle at 35% 32%, rgba(255, 255, 255, .55) 0%, transparent 40%) 19px 50% / 9px 9px no-repeat,
    radial-gradient(circle, #28c840 46%, transparent 49%) 19px 50% / 9px 9px no-repeat;
  filter: drop-shadow(0 .5px 1px rgba(0, 0, 0, .25));
}
:root[data-estilo="apple"] header.topbar h1 {
  font-size: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
/* Oswald condensada en mayúsculas lee "cartel deportivo", no macOS —
   aquí los títulos de vista pasan a la misma pila de sistema que ya usa
   el resto del tema (San Francisco en un Mac/iPhone real). */
:root[data-estilo="apple"] h2.titulo-vista {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
:root[data-estilo="apple"] header.topbar select,
:root[data-estilo="apple"] .boton-gestion { background: var(--superficie-alta); color: var(--texto); border-color: var(--gris-200); }
:root[data-estilo="apple"] nav.bottomnav {
  background: color-mix(in srgb, var(--superficie) 70%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
:root[data-estilo="apple"] .nav-pill {
  background: #000;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
:root[data-tema="oscuro"][data-estilo="apple"] .nav-pill { background: #050505; }
:root[data-estilo="apple"] nav.bottomnav a.activo { color: #fff; }

/* Iconos de menú propios: insignia muy redondeada (squircle, coherente
   con --radio de este tema) con un detalle mínimo perforado en cada
   una. Nada de la manzana de Apple bajo ningún concepto (marca muy
   protegida) — el de Ajustes retoma en su lugar los tres puntos de los
   semáforos de la topbar, como firma visual propia del tema. */
:root[data-estilo="apple"] nav.bottomnav a .icono svg,
:root[data-estilo="apple"] nav.bottomnav a .icono-dbz { display: none; }
:root[data-estilo="apple"] nav.bottomnav a .icono-tematico { display: block; }
:root[data-estilo="apple"] {
  --icono-tema-jornada: url("../../icons/temas/apple/jornada.svg");
  --icono-tema-clasificacion: url("../../icons/temas/apple/clasificacion.svg");
  --icono-tema-muro: url("../../icons/temas/apple/muro.svg");
  --icono-tema-liga: url("../../icons/temas/apple/liga.svg");
  --icono-tema-ajustes: url("../../icons/temas/apple/ajustes.svg");
}