/* ============================================================================
   glass.css — VARIANTE "glass / translúcida" del front principal (dev · 2026-08-01)
   Capa de PREVIEW para evaluación visual sobre el sitio real. Reversible:
   quitar el <link glass.css> + <script glass.js> de templates/base.html.

   QUÉ HACE
   - Convierte el home entero en un sistema de vidrio esmerilado (frosted glass):
     fondo AURORA de marca fijo detrás de todo → los paneles translúcidos refractan
     ese fondo (navbar, filtros, cards, sidebar, footer).
   - Palette-aware: usa los tokens --po-color-* → funciona con las 3 paletas del switcher.
   - Títulos con jerarquía editorial: eyebrow (kicker mono) + display headline.

   ACTIVACIÓN: scoped a html[data-skin="glass"]. glass.js lo pone por default y
   agrega un selector SKIN (Glass / Flat) para comparar. Sin el atributo → cero cambio.

   DOCTRINA (research 2026-08-01): glass refuerza jerarquía, no la reemplaza. Nunca
   texto de cuerpo sobre glass crudo; nunca inputs confusos; fallback @supports; HATCH
   reduced-motion. Paneles con contenido claro = glass CLARO; paneles con texto blanco
   (sidebar header, footer) = glass OSCURO de marca (contraste preservado).
   ============================================================================ */

html[data-skin="glass"]{
  /* --- recetas de vidrio (tokens locales) --- */
  --gl-blur: 13px;   /* bajado de 18 (perf: N backdrop-filter simultáneos) */
  --gl-sat: 1.3;
  --gl-light-bg: rgba(255,255,255,.52);
  --gl-light-bd: rgba(255,255,255,.65);
  --gl-light-hi: inset 0 1px 0 rgba(255,255,255,.6);
  --gl-shadow: 0 2px 6px -2px rgba(20,45,75,.10), 0 22px 46px -22px rgba(18,44,74,.42);
  --gl-shadow-hover: 0 10px 22px -8px rgba(18,44,74,.20), 0 34px 60px -24px rgba(18,44,74,.50);
  --gl-radius: 16px;

  /* --- AURORA de marca fija detrás de TODO (html pinta, body transparente) --- */
  background:
    radial-gradient(46% 52% at 14% 6%,  color-mix(in srgb, var(--po-color-sky) 70%, transparent), transparent 62%),
    radial-gradient(42% 48% at 88% 3%,  color-mix(in srgb, var(--po-color-accent) 46%, transparent), transparent 58%),
    radial-gradient(52% 46% at 50% 46%, color-mix(in srgb, var(--po-color-sky-light) 50%, transparent), transparent 68%),
    radial-gradient(60% 66% at 80% 92%, color-mix(in srgb, var(--po-color-primary) 60%, transparent), transparent 66%),
    radial-gradient(72% 80% at 20% 100%, color-mix(in srgb, var(--po-color-sky) 60%, transparent), transparent 70%),
    var(--po-color-horizon-blue) !important;
  background-attachment: fixed !important;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  html[data-skin="glass"]{ background: linear-gradient(160deg, var(--po-color-horizon-blue), #eef4fb) fixed !important; }
}
/* body y homepage transparentes → dejan ver la aurora del html detrás del glass */
html[data-skin="glass"] body,
html[data-skin="glass"] body.homepage{ background: transparent !important; }

/* --- utilidad de vidrio claro reutilizable --- */
html[data-skin="glass"] .search__box,
html[data-skin="glass"] .search-box-mobile__container-form,
html[data-skin="glass"] .homepage__main__results .card,
html[data-skin="glass"] .card,
html[data-skin="glass"] .advanced-filters-float__content,
html[data-skin="glass"] .cardtooltip{
  background: var(--gl-light-bg) !important;
  -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat));
  backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat));
  border: 1px solid var(--gl-light-bd) !important;
  box-shadow: var(--gl-light-hi), var(--gl-shadow) !important;
  border-radius: var(--gl-radius) !important;
}

/* --- FILTROS: panel de vidrio (desktop + mobile) --- */
html[data-skin="glass"] .search__box{ padding: 22px !important; }
/* inputs y selects: superficie clara semi-sólida (legibilidad de estado — NO glass crudo) */
html[data-skin="glass"] .homepage__main__input,
html[data-skin="glass"] .homepage__main__filters .filter,
html[data-skin="glass"] .search-form,
html[data-skin="glass"] select.filter,
html[data-skin="glass"] .form-control,
html[data-skin="glass"] .custom-select{
  /* fondo semi-sólido (.90), SIN backdrop-filter: legibilidad de estado + evita
     blur anidado dentro del panel glass (bug de render) y ahorra costo (Fable MEDIA). */
  background-color: rgba(255,255,255,.90) !important;
  border: 1px solid color-mix(in srgb, var(--po-color-sky) 45%, rgba(255,255,255,.4)) !important;
  border-radius: 10px !important;
}
html[data-skin="glass"] .homepage__main__input:focus,
html[data-skin="glass"] .form-control:focus,
html[data-skin="glass"] select.filter:focus,
html[data-skin="glass"] .custom-select:focus{
  border-color: var(--po-color-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--po-color-sky) 28%, transparent) !important;
  outline: none;
}

/* --- CARDS de medios: vidrio con vida al hover --- */
html[data-skin="glass"] .homepage__main__results .card{
  transition: box-shadow .3s cubic-bezier(.2,.7,.2,1), transform .3s cubic-bezier(.2,.7,.2,1) !important;
}
html[data-skin="glass"] .homepage__main__results .card:hover{
  transform: translateY(-6px) !important;
  box-shadow: var(--gl-light-hi), var(--gl-shadow-hover) !important;
  border-color: color-mix(in srgb, var(--po-color-primary) 40%, rgba(255,255,255,.6)) !important;
}
/* imagen de card: si está rota/vacía, relleno de marca translúcido (no caja gris) */
html[data-skin="glass"] .card__image{
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--po-color-sky) 22%, #fff),
    color-mix(in srgb, var(--po-color-primary) 16%, #fff)) !important;
}

/* --- SIDEBAR de estadísticas: contenedor = vidrio CLARO (.55) para que el texto
   oscuro/celeste de las stats conserve el contraste del baseline (Fable MEDIA);
   los HEADERS internos = vidrio oscuro de marca (texto blanco). --- */
html[data-skin="glass"] .homepage__main__sidebar{
  background: rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--gl-light-bd) !important;
  border-radius: 18px !important;
  box-shadow: var(--gl-shadow) !important;
}
html[data-skin="glass"] .sidebar__header{
  background: color-mix(in srgb, var(--po-color-blue) 68%, transparent) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.25); backdrop-filter: blur(12px) saturate(1.25);
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 28px -14px rgba(0,25,45,.5) !important;
}

/* --- NAVBAR: vidrio más presente sobre el mapa (refuerza el default de immersive) --- */
html[data-skin="glass"] .site-navbar{
  background: color-mix(in srgb, var(--po-color-blue) 62%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
}

/* --- FOOTER: vidrio oscuro de marca sobre la aurora (texto blanco preservado) --- */
html[data-skin="glass"] .site-footer{
  background: color-mix(in srgb, var(--po-color-primary) 80%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-top: 1px solid rgba(255,255,255,.16);
}
@supports not (backdrop-filter: blur(1px)){
  html[data-skin="glass"] .site-footer{ background: var(--po-color-primary) !important; }
  html[data-skin="glass"] .sidebar__header{ background: var(--po-color-blue) !important; }
  html[data-skin="glass"] .search__box,
  html[data-skin="glass"] .card{ background: rgba(255,255,255,.92) !important; }
}

/* ============================================================================
   TÍTULOS — jerarquía editorial (eyebrow + display). glass.js inyecta .gl-eyebrow.
   Patrón verificado (research 2026-08-01): kicker mono uppercase + headline display.
   ============================================================================ */
.gl-eyebrow{ display: none; }  /* oculto en Flat (evita texto suelto) */
/* Visible en cualquier skin activo != flat; cada skin le da su cosmética. */
html[data-skin]:not([data-skin="flat"]) .gl-eyebrow{ display: flex; align-items: center; gap: 10px; }
html[data-skin="glass"] .gl-eyebrow{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--po-font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--po-color-primary) 85%, #33506b);
  margin: 0 0 6px 0;
}
html[data-skin="glass"] .gl-eyebrow::before{
  content:""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--po-color-primary), transparent);
}
/* Display headline en el título de página .h3-title ("Media profiles"). Verificado
   (2026-08-01): es el ÚNICO .h3-title del home; los títulos de módulos de sidebar son
   `h3` SIN esa clase → esta regla no los toca (Fable ALTA#1 fue misdiagnóstico del
   mecanismo; el símbolo cosmético del wrap era otro). */
html[data-skin="glass"] .h3-title{
  font-family: 'Chivo', var(--po-font-headline, sans-serif);
  font-weight: 800 !important;
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.25rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
  color: var(--po-color-blue) !important;
}
/* Hero title (map cover) más presente si aparece el header nativo */
html[data-skin="glass"] .homepage__cover__header h1{
  font-weight: 800 !important; letter-spacing: -.01em !important;
  text-shadow: 0 1px 2px rgba(255,255,255,.5);
}

/* --- HATCH motion: autosuficiente (no depende de immersive.css) --- */
@media (prefers-reduced-motion: reduce){
  html[data-skin="glass"] .homepage__main__results .card{ transition: none !important; }
  html[data-skin="glass"] .homepage__main__results .card:hover{ transform: none !important; }
}

/* --- HATCH transparencia: si el usuario pide reducir transparencia, todo opaco
   y sin blur (a11y — Fable MEDIA; baja visión / sensibilidad visual). --- */
@media (prefers-reduced-transparency: reduce){
  html[data-skin="glass"] .search__box,
  html[data-skin="glass"] .search-box-mobile__container-form,
  html[data-skin="glass"] .homepage__main__results .card,
  html[data-skin="glass"] .card,
  html[data-skin="glass"] .advanced-filters-float__content,
  html[data-skin="glass"] .cardtooltip,
  html[data-skin="glass"] .homepage__main__sidebar{
    background: #fff !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html[data-skin="glass"] .site-navbar,
  html[data-skin="glass"] .sidebar__header{ background: var(--po-color-blue) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html[data-skin="glass"] .site-footer{ background: var(--po-color-primary) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html[data-skin="glass"]{ background: var(--po-color-horizon-blue) !important; }
}