/* ============================================================================
   FSC · VIDRIO CENTRAL  ·  css/fsc-glass.css
   ----------------------------------------------------------------------------
   Una sola receta para los contenedores de todas las páginas del ecosistema:

     · fondo oscuro al 50% de opacidad  (rgba(9, 10, 15, 0.50))
     · backdrop-filter con blur: el color del shader de fondo se ve, difuminado
     · borde hairline de 1px, sin radios (--fk-r-card = 0), sin glow

   El fondo animado vive detrás de todo (`#jpsi-canvas`, z-index:-1). Si el
   contenedor es opaco, el shader desaparece; si no tiene blur, el shader se ve
   nítido y compite con el texto. Esta capa resuelve las dos cosas de una vez.

   Se carga DESPUÉS de fondo-ui.css, de fsc-ui.css y de las CSS de cada página:
   gana en el cascade y es el único lugar donde se toca la receta.

   Para una página nueva: `<link rel="stylesheet" href="css/fsc-glass.css">`
   al final del <head> y `class="fsc-glass"` en los contenedores.
   ========================================================================== */

:root {
  /* ── LA RECETA ─────────────────────────────────────────────────────────── */
  --fsc-glass:        rgba(9, 10, 15, 0.50);   /* 50%: el estándar del ecosistema */
  --fsc-glass-soft:   rgba(9, 10, 15, 0.32);   /* chips, headers, barras finas */
  --fsc-glass-solid:  rgba(9, 10, 15, 0.72);   /* cuando hay que tapar del todo (menús) */
  --fsc-blur:         blur(20px) saturate(125%);
  --fsc-blur-soft:    blur(12px) saturate(115%);
  --fsc-line:         rgba(255, 255, 255, 0.09);
  --fsc-line-2:       rgba(255, 255, 255, 0.20);

  /* ── compatibilidad con los tokens viejos ──────────────────────────────────
     Todo lo que hoy usa --bg-surface (82% opaco y sin blur) pasa a la receta.
     --ui-surface es más suave: se usa en hovers y chips, no en contenedores. */
  --bg-surface:   var(--fsc-glass);
  --bg-elevated:  var(--fsc-glass-soft);
}

/* ── 1. LA UTILIDAD PARA PÁGINAS NUEVAS ────────────────────────────────────── */
.fsc-glass {
  background: var(--fsc-glass) !important;
  -webkit-backdrop-filter: var(--fsc-blur) !important;
  backdrop-filter: var(--fsc-blur) !important;
  border: 1px solid var(--fsc-line);
  border-radius: var(--fk-r-card, 0);
}

.fsc-glass--soft {
  background: var(--fsc-glass-soft) !important;
  -webkit-backdrop-filter: var(--fsc-blur-soft) !important;
  backdrop-filter: var(--fsc-blur-soft) !important;
}

/* ── 2. LOS CONTENEDORES QUE YA EXISTEN EN EL SITIO ──────────────────────────
   Están agrupados a propósito: si mañana cambia la receta, cambia acá y en
   todos lados. Los nombres salen de las CSS de cada página (medidos). */
.fsc-glass,
.card-cyber,
.artist-card,
.ui-card,
.section-card,
.stat-card,
.contributor-card,
.timeline-panel,
.words-container,
.slideshow-container,
.highlight-box,
.ui-modal,
.modal-content,
.search-box,
.panel-box {
  background: var(--fsc-glass) !important;
  -webkit-backdrop-filter: var(--fsc-blur) !important;
  backdrop-filter: var(--fsc-blur) !important;
}

/* Los bordes también se centralizan: hairline, nunca neón. */
.fsc-glass,
.card-cyber,
.artist-card,
.ui-card,
.section-card,
.stat-card,
.contributor-card,
.ui-modal,
.modal-content {
  border-color: var(--fsc-line) !important;
}

/* ── 2b. CONTENEDORES PROPIOS DE CADA PÁGINA ────────────────────────────────
   type-card (create), formation-mode-card y glow-card, planilla-panel,
   hud-panel / left-panel / fly-panel (flyer), skeleton-box (carga),
   ui-modal-box, fly-marco. Los paneles del editor de efectos
   (control-panel, color-picker-box) NO van: son herramientas sobre el canvas. */
.type-card,
.formation-mode-card,
.glow-card,
.planilla-panel,
.hud-panel,
.left-panel,
.fly-panel,
.skeleton-box,
.ui-modal-box,
.fly-marco,
.fly-perfil-marco {
  background: var(--fsc-glass) !important;
  -webkit-backdrop-filter: var(--fsc-blur) !important;
  backdrop-filter: var(--fsc-blur) !important;
  border-color: var(--fsc-line) !important;
}

/* ── 3. SUPERFICIES SUAVES (no son contenedores, pero no deben ser opacas) ── */
.ui-header,
.timeline-toolbar,
.panel-header,
.panel-footer,
.panel-tabs-group,
.tab-badge,
.count-badge,
.contributor-badge,
.badge-counter {
  background: var(--fsc-glass-soft) !important;
  -webkit-backdrop-filter: var(--fsc-blur-soft) !important;
  backdrop-filter: var(--fsc-blur-soft) !important;
}

/* ── 4. HOVERS: se aclara el vidrio, no se le pone color ──────────────────── */
.card-cyber:hover,
.artist-card:hover,
.ui-card:hover,
.section-card:hover {
  background: rgba(16, 18, 26, 0.55) !important;
  border-color: var(--fsc-line-2) !important;
}

/* ── 5. EL FONDO TIENE QUE PODER VERSE ──────────────────────────────────────
   Si alguien pinta body o un wrapper de opaco, el shader desaparece. Se deja
   el aviso acá porque es el error más común al armar una página nueva. */
html { background-color: #0d0d12; }
body { background-color: transparent !important; }

/* ── 6. SIN SOMBRAS DE COLOR NI GLOWS (regla del sistema) ─────────────────── */
.card-cyber,
.artist-card,
.ui-card,
.section-card,
.stat-card {
  box-shadow: none;
}

/* ── 7. MÓVIL: el blur es caro en GPUs chicas; se baja el radio, no la
   transparencia (la receta del 50% se mantiene igual en todos lados). ───── */
@media (max-width: 820px) {
  :root {
    --fsc-blur: blur(12px) saturate(118%);
    --fsc-blur-soft: blur(8px) saturate(112%);
  }
}