/* ========================================================================== */
/* GOLEO - LIQUID GLASS iOS 27 — Full-app glass treatment                     */
/* Para revertir: eliminar <link> de este archivo en app.html                  */
/* Tokens del material (--lg-*) en css/variables.css                           */
/* ========================================================================== */

/* ── 1. FONDO ─────────────────────────────────────────────────────────────── */
/* Solo el azul de la app, minimalista: es lo que el cristal difumina. */
body { background-color: #050B1A !important; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.055) 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(ellipse 80% 45% at 50% -5%,  rgba(10,132,255,0.30) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(10,132,255,0.14) 0%, transparent 65%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.55) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 0;
}

/* El contenido de la app siempre por encima del fondo */
#app,
#splash-screen {
  position: relative;
  z-index: 1;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

  /* ── 2. TARJETAS ────────────────────────────────────────────────────────── */
  /* El borde no se toca: conserva los acentos (ámbar, rosa, azul...) de cada tarjeta. */
  :is(.bg-slate-900, .bg-slate-900\/95, .bg-slate-900\/90, .bg-slate-900\/80,
      [class~="bg-[#1C1C1E]"], [class~="bg-[#1C1C1E]/95"], [class~="bg-[#1C1C1E]/90"],
      [class~="bg-[#1C1C1E]/80"], [class~="bg-[#1C1C1E]/60"], [class~="bg-[#1C1C1E]/98"], [class~="bg-[#2C2C2E]"]):not(.sticky, .absolute, select, input, textarea, td, th) {
    background-color: var(--lg-fill) !important;
    background-image: var(--lg-sheen);
    -webkit-backdrop-filter: blur(22px) saturate(175%) !important;
    backdrop-filter:          var(--lg-filter) !important;
    box-shadow: var(--lg-rim), var(--lg-shadow) !important;
  }

  /* Cristal sobre cristal: sin blur anidado, que no se ve y penaliza el scroll en iPhone */
  :is(.bg-slate-900, .bg-slate-900\/95, .bg-slate-900\/90, .bg-slate-900\/80,
      [class~="bg-[#1C1C1E]"], [class~="bg-[#1C1C1E]/95"], [class~="bg-[#1C1C1E]/90"],
      [class~="bg-[#1C1C1E]/80"], [class~="bg-[#1C1C1E]/60"], [class~="bg-[#1C1C1E]/98"], [class~="bg-[#2C2C2E]"]):not(.sticky, .absolute, select, input, textarea, td, th)
  :is(.bg-slate-900, .bg-slate-900\/95, .bg-slate-900\/90, .bg-slate-900\/80,
      [class~="bg-[#1C1C1E]"], [class~="bg-[#1C1C1E]/95"], [class~="bg-[#1C1C1E]/90"],
      [class~="bg-[#1C1C1E]/80"], [class~="bg-[#1C1C1E]/60"], [class~="bg-[#1C1C1E]/98"], [class~="bg-[#2C2C2E]"]):not(.sticky, .absolute, select, input, textarea, td, th) {
    background-color: var(--lg-fill-inset) !important;
    background-image: none;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.10) !important;
  }

  /* Cabeceras y columnas fijas: tapan el contenido que pasa por debajo */
  :is(.sticky, td, th):is([class~="bg-[#1C1C1E]"], [class~="bg-[#1C1C1E]/95"], [class~="bg-[#1C1C1E]/90"]) {
    background-color: var(--lg-solid) !important;
  }

  /* Desplegables: flotan sobre su tarjeta, necesitan más cuerpo para leerse */
  .absolute:is([class~="bg-[#1C1C1E]"], [class~="bg-[#1C1C1E]/95"], [class~="bg-[#1C1C1E]/90"], [class~="bg-[#1C1C1E]/80"]) {
    background-color: var(--lg-solid) !important;
    box-shadow: var(--lg-rim), var(--lg-shadow-float) !important;
  }

  /* ── 3. SUPERFICIES SECUNDARIAS ─────────────────────────────────────────── */
  .bg-slate-950,
  .bg-slate-950\/95,
  .bg-slate-950\/90,
  .bg-slate-950\/80,
  .bg-slate-950\/70,
  .bg-slate-950\/60,
  .bg-slate-800,
  .bg-slate-800\/90,
  .bg-slate-800\/80,
  .bg-slate-800\/70,
  .bg-slate-800\/60,
  .bg-slate-800\/50 {
    background-color: var(--lg-fill-inset) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter:          blur(14px) saturate(160%);
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* ── 4. HEADER ──────────────────────────────────────────────────────────── */
  /*
   * El cristal va en ::before: un backdrop-filter en el propio header impediría
   * que sus desplegables difuminasen la página que tienen debajo.
   */
  header {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--lg-fill-chrome);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    backdrop-filter:          var(--lg-filter-chrome);
    box-shadow:
      inset 0 -0.5px 0 rgba(255,255,255,0.14),
      0 6px 24px rgba(0,0,0,0.22);
  }

  /* Menú de usuario: cristal flotante real sobre la página */
  header .absolute[role="menu"] {
    background-color: var(--lg-fill-chrome) !important;
    background-image: var(--lg-sheen);
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
    backdrop-filter:          var(--lg-filter-chrome) !important;
    box-shadow: var(--lg-rim), var(--lg-shadow-float) !important;
  }

  /* Con refracción real (js/utils/liquidRefraction.js) el cristal puede ser más claro */
  html.lg-refraction #mobile-bottom-nav,
  html.lg-refraction header .absolute[role="menu"] {
    background-color: var(--lg-fill-refract) !important;
  }

  /* ── 5. MODALES — panel flotante ────────────────────────────────────────── */
  .fixed.inset-0 .bg-slate-900,
  .fixed.inset-0 [class~="bg-[#1C1C1E]"][class*="shadow-2xl"],
  .fixed.inset-0 [class~="bg-[#1C1C1E]/95"][class*="shadow-2xl"],
  .fixed.inset-0 [class~="bg-[#1C1C1E]/98"],
  .modal-dialog {
    background-color: var(--lg-fill-thick) !important;
    background-image: var(--lg-sheen);
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
    backdrop-filter:          var(--lg-filter-chrome) !important;
    box-shadow: var(--lg-rim), var(--lg-shadow-float) !important;
  }

  /* ── 6. PANEL DE NOTIFICACIONES ─────────────────────────────────────────── */
  .notif-panel {
    background-color: var(--lg-fill-thick) !important;
    background-image: var(--lg-sheen);
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
    backdrop-filter:          var(--lg-filter-chrome) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: var(--lg-rim), var(--lg-shadow-float) !important;
  }

  .notif-header,
  .notif-footer {
    background-color: var(--lg-fill-inset) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* ── 7. TOAST / POPUP DINÁMICO ──────────────────────────────────────────── */
  .popup-toast-box {
    background-color: var(--lg-fill-thick) !important;
    background-image: var(--lg-sheen);
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
    backdrop-filter:          var(--lg-filter-chrome) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: var(--lg-rim), var(--lg-shadow-float) !important;
  }

  /* ── 8. LISTA iOS (Clasificación / Jugadores) ────────────────────────────── */
  .ios-inset-list {
    background-color: var(--lg-fill) !important;
    background-image: var(--lg-sheen);
    -webkit-backdrop-filter: blur(22px) saturate(175%) !important;
    backdrop-filter:          var(--lg-filter) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: var(--lg-rim), var(--lg-shadow) !important;
  }

  .ios-user-row {
    background-color: transparent !important;
  }

  .ios-user-row:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }

  /* ── 9. CUADRO DE HONOR (badges coloreados + glass) ─────────────────────── */
  .honor-badge {
    -webkit-backdrop-filter: blur(16px) saturate(190%) !important;
    backdrop-filter:          blur(16px) saturate(190%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 0 0 0.5px rgba(0,0,0,0.40),
      0 4px 16px rgba(0,0,0,0.20) !important;
  }

  /* ── 10. SEGMENTED CONTROL / ACTIVE PILL ────────────────────────────────── */
  .active-pill {
    background-color: rgba(255, 255, 255, 0.16) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.30),
      0 0 0 0.5px rgba(0,0,0,0.35),
      0 2px 8px rgba(0,0,0,0.25) !important;
  }

  /* ── 11. INPUTS Y SELECTS ───────────────────────────────────────────────── */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    background-color: var(--lg-fill-inset) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter:          blur(14px) saturate(160%);
    border: 0.5px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.22) !important;
  }

  /* Dentro de otro cristal ya no hay nada que difuminar */
  :is([class*="bg-[#1C1C1E]"], .bg-slate-900, .modal-dialog, .notif-panel, .ios-inset-list, .match-glass-card)
  :is(.bg-slate-950, .bg-slate-950\/95, .bg-slate-950\/90, .bg-slate-950\/80, .bg-slate-950\/70, .bg-slate-950\/60,
      .bg-slate-800, .bg-slate-800\/90, .bg-slate-800\/80, .bg-slate-800\/70, .bg-slate-800\/60, .bg-slate-800\/50,
      input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  input:not([type="checkbox"]):not([type="radio"]):focus,
  select:focus,
  textarea:focus {
    background-color: rgba(255, 255, 255, 0.09) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.22) !important;
  }

  /* El desplegable nativo no hereda el cristal: sus opciones necesitan fondo sólido */
  select option {
    background-color: var(--lg-solid);
  }

  /* ── 12. CARDS DE PARTIDO — cristal con tinte por resultado ─────────────── */
  .match-glass-card {
    -webkit-backdrop-filter: blur(22px) saturate(175%) !important;
    backdrop-filter:          var(--lg-filter) !important;
    box-shadow: var(--lg-rim), var(--lg-shadow) !important;
    transition: scale 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .match-glass-card:active {
    scale: 0.985;
  }
}

/* ── 13. BACKDROP DEL MODAL ──────────────────────────────────────────────── */
.fixed.inset-0.bg-black\/60,
.fixed.inset-0.bg-black\/70,
.fixed.inset-0.bg-black\/80,
.fixed.inset-0.bg-black\/85 {
  background-color: rgba(3, 6, 14, 0.50) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  backdrop-filter:          blur(18px) saturate(140%) !important;
}

/* ── 14. ACCESIBILIDAD — "Reducir transparencia" del sistema ─────────────── */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --lg-fill: var(--lg-solid);
    --lg-fill-thick: var(--lg-solid);
    --lg-fill-chrome: var(--lg-solid);
    --tabbar-bg: var(--lg-solid);
    --lg-filter: none;
    --lg-filter-chrome: none;
  }
}