/*
 * ═══════════════════════════════════════════════════════════════
 *  LIQUID GLASS UI  ·  liquid-glass.css
 *  Versión 2.0  ·  Compatibilidad: Chrome, Edge, Safari, Firefox
 * ═══════════════════════════════════════════════════════════════
 *
 *  ÍNDICE DE CONTENIDO
 *  ───────────────────
 *  1.  Variables CSS (tokens de diseño + niveles de calidad)
 *  2.  Reset y base
 *  3.  Fondo animado (blobs)
 *  4.  Clases glass (base del efecto cristal)
 *  5.  Layout: page, grid
 *  6.  Navegación / Navbar
 *  7.  Hero section
 *  8.  Encabezados de sección
 *  9.  Tarjetas (cards)
 * 10.  Tarjetas de estadísticas (stat cards)
 * 11.  Botones (buttons)
 * 12.  Badges y etiquetas
 * 13.  Formularios: inputs, select, textarea
 * 14.  Toggle switches
 * 15.  Sliders / Range inputs
 * 16.  Barras de progreso
 * 17.  Alertas / Notificaciones
 * 18.  Tarjeta de perfil (profile card)
 * 19.  Reproductor de media (media card)
 * 20.  Widget de tiempo (weather card)
 * 21.  Tooltip
 * 22.  Snippet de código (code block)
 * 23.  Footer
 * 24.  Animaciones de entrada
 * 25.  Utilidades
 * 26.  Responsive
 * 27.  Optimización de rendimiento por nivel de calidad
 * 28.  prefers-reduced-motion (accesibilidad)
 *
 * ═══════════════════════════════════════════════════════════════
 *
 *  NIVELES DE CALIDAD GRÁFICA
 *  ──────────────────────────
 *  Liquid Glass UI adapta automáticamente el coste gráfico según
 *  el dispositivo usando media queries y variables CSS.
 *
 *  NIVEL ALTO   [.quality-high]  → PC con GPU dedicada
 *    backdrop-filter blur 18px + saturate, 5 blobs animados,
 *    SVG displacement, sombras complejas, todos los efectos.
 *
 *  NIVEL MEDIO  [.quality-mid]   → Laptop / tablet potente
 *    backdrop-filter blur 10px, 3 blobs animados (sin rotate),
 *    sin SVG displacement, sombras simplificadas.
 *
 *  NIVEL BAJO   [.quality-low]   → Móvil / tablet básica
 *    backdrop-filter blur 6px (sin saturate), fondo estático,
 *    sin blobs animados, sin SVG filter, sombras mínimas.
 *
 *  DETECCIÓN AUTOMÁTICA:
 *    CSS:  media queries (ancho de pantalla + hover + pointer)
 *    JS:   window.__setQuality('high'|'mid'|'low')  (ver sección 27)
 *          Incluye detector automático con deviceMemory y
 *          hardwareConcurrency del API Navigator.
 *
 * ═══════════════════════════════════════════════════════════════
 */


/* ─────────────────────────────────────────────────────────────
   1. VARIABLES CSS (tokens de diseño + niveles de calidad)
   ─────────────────────────────────────────────────────────────
   Edita aquí para cambiar todo el sistema de diseño de golpe.

   Las variables marcadas con ★ cambian automáticamente según
   el nivel de calidad detectado (sección 27).
   ───────────────────────────────────────────────────────────── */

:root {

  /* ★ Efecto cristal — NIVEL ALTO (PC) por defecto —————————————
     Reducidos automáticamente en laptop y móvil.
     --blur-sat: la parte 'saturate()' del backdrop-filter,
     vacía en mobile para eliminar esa operación extra.        */
  --blur:              18px;
  --blur-strong:       28px;
  --saturation:        180%;
  --blur-sat:          saturate(var(--saturation));  /* ★ vacío en low  */

  /* ★ Fondos del cristal ————————————————————————————————————————
     En niveles bajos se sube el alfa para compensar el menor
     blur (más opacidad = legibilidad sin tanto desenfoque).  */
  --bg-glass:          rgba(255, 255, 255, 0.10);   /* ★ */
  --bg-glass-hover:    rgba(255, 255, 255, 0.18);
  --bg-glass-deep:     rgba(255, 255, 255, 0.07);

  /* — Bordes del cristal ——————————————————————————————————————*/
  --border-glass:      rgba(255, 255, 255, 0.28);
  --border-glass-top:  rgba(255, 255, 255, 0.55);
  --border-glass-bot:  rgba(0,   0,   0,   0.10);

  /* ★ Sombras — simplifican en niveles bajos ————————————————————
     Cada capa de box-shadow tiene coste. En mobile usamos
     solo 1-2 capas en lugar de 4-6.                          */
  --shadow-glass:
    0 8px 40px rgba(0, 0, 0, 0.18),
    0 2px  8px rgba(0, 0, 0, 0.10),
    inset 0  1px 0 var(--border-glass-top),
    inset 0 -1px 0 var(--border-glass-bot);          /* ★ */

  --shadow-glass-deep:
    0 20px 60px rgba(0, 0, 0, 0.25),
    0  4px 16px rgba(0, 0, 0, 0.12),
    inset 0  1.5px 0 rgba(255, 255, 255, 0.60),
    inset 0 -1px  0 rgba(0,   0,   0,   0.15),
    inset  1px 0  0 rgba(255, 255, 255, 0.12),
    inset -1px 0  0 rgba(255, 255, 255, 0.08);       /* ★ */

  --shadow-glass-hover:
    0 28px 60px rgba(0, 0, 0, 0.30),
    0  8px 20px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.60);         /* ★ */

  /* — Colores de texto ———————————————————————————————————————— */
  --text-primary:    rgba(255, 255, 255, 0.95);
  --text-secondary:  rgba(255, 255, 255, 0.68);
  --text-muted:      rgba(255, 255, 255, 0.40);

  /* — Colores de acento ——————————————————————————————————————— */
  --accent-purple:   #a78bfa;
  --accent-purple-d: #7c3aed;
  --accent-blue:     #38bdf8;
  --accent-blue-d:   #0ea5e9;
  --accent-green:    #34d399;
  --accent-green-d:  #059669;
  --accent-amber:    #fbbf24;
  --accent-amber-d:  #d97706;
  --accent-pink:     #f472b6;
  --accent-pink-d:   #db2777;
  --accent-red:      #f87171;
  --accent-red-d:    #dc2626;

  /* — Tipografía —————————————————————————————————————————————— */
  --font-display: 'Outfit',        sans-serif;
  --font-body:    'Space Grotesk', sans-serif;

  /* — Radios de borde ————————————————————————————————————————— */
  --radius-sm:   12px;
  --radius-md:   18px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 9999px;

  /* — Transiciones ————————————————————————————————————————————
     En mobile se desactivan las transiciones "spring" caras
     y se reemplazan por ease simples (sección 27).           */
  --transition-spring: 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);  /* ★ */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;

  /* ★ Blobs — control por nivel de calidad ————————————————————
     --blob-anim: 'running' (animados) o 'paused' (estáticos)
     --blob-blur: radio del filtro blur de los blobs          */
  --blob-anim: running;   /* ★ 'paused' en low               */
  --blob-blur: 85px;      /* ★ reducido en mid/low           */
}


/* ─────────────────────────────────────────────────────────────
   2. RESET Y BASE
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:     var(--font-body);
  color:           var(--text-primary);
  background:      #060614;
  min-height:      100vh;
  overflow-x:      hidden;
  line-height:     1.6;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar personalizada */
::-webkit-scrollbar            { width: 6px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      { background: rgba(255,255,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.28); }

code {
  font-family: 'Courier New', monospace;
  font-size: 0.85em;
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.12);
}


/* ─────────────────────────────────────────────────────────────
   3. FONDO ANIMADO (BLOBS DE COLOR)
   ─────────────────────────────────────────────────────────────
   Los blobs son el fondo vivo sobre el que el cristal actúa.
   Son la operación más cara: blur grande + animación continua.

   OPTIMIZACIONES APLICADAS:
   · will-change: transform (solo translate/scale, no rotate)
   · animation-play-state: var(--blob-anim) → se para en low
   · Los blobs 4 y 5 se ocultan en mid/low (sección 27)
   · El keyframe NO rota (rotate + blur = recálculo de caché)
   · translate3d fuerza composición GPU sin layout thrashing

   USO EN HTML:
   ────────────
   <div class="bg-canvas">
     <div class="blob blob-1"></div>
     <div class="blob blob-2"></div>
     <div class="blob blob-3"></div>
     <div class="blob blob-4"></div>  ← oculto en mid/low
     <div class="blob blob-5"></div>  ← oculto en mid/low
   </div>
   ───────────────────────────────────────────────────────────── */

.bg-canvas {
  position: fixed;
  inset:    0;
  z-index:  0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 50%, #1a0533 0%, transparent 60%),
    radial-gradient(ellipse at 85% 15%, #001a2e 0%, transparent 60%),
    radial-gradient(ellipse at 55% 85%, #0d1f14 0%, transparent 60%),
    #060614;
}

/* ── Clase base del blob ──────────────────────────────────────
   will-change: transform se aplica solo a los que se mueven.
   filter: blur usa var(--blob-blur) para reducirlo en mid/low. */
.blob {
  position:       absolute;
  border-radius:  50%;
  filter:         blur(var(--blob-blur));
  opacity:        0.55;
  animation:      blobFloat linear infinite;
  animation-play-state: var(--blob-anim);  /* parado en low */
  will-change:    transform;               /* GPU layer      */
}

.blob-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, #7c3aed 0%, #4f46e5 60%, transparent 100%);
  top: -15%; left: -10%;
  animation-duration: 25s;
}
.blob-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #0ea5e9 0%, #06b6d4 60%, transparent 100%);
  top: 10%; right: -5%;
  animation-duration: 30s;
  animation-delay: -8s;
}
.blob-3 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #10b981 0%, #059669 60%, transparent 100%);
  bottom: 0; left: 20%;
  animation-duration: 22s;
  animation-delay: -14s;
}
/* Blobs 4 y 5 — ocultos en mid/low via display:none (sección 27) */
.blob-4 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #f59e0b 0%, #d97706 60%, transparent 100%);
  bottom: 20%; right: 15%;
  animation-duration: 28s;
  animation-delay: -5s;
}
.blob-5 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, #ec4899 0%, #db2777 60%, transparent 100%);
  top: 50%; left: 40%;
  animation-duration: 35s;
  animation-delay: -20s;
}

/* ── Keyframe SIN rotate ──────────────────────────────────────
   RAZÓN: rotate() + filter:blur() fuerza al navegador a
   recalcular el blur en cada frame. Solo translate3d + scale
   permite que el blur se cachee en la capa GPU.              */
@keyframes blobFloat {
  0%   { transform: translate3d(  0px,   0px, 0) scale(1.00); }
  25%  { transform: translate3d( 60px, -40px, 0) scale(1.05); }
  50%  { transform: translate3d(-30px,  60px, 0) scale(0.95); }
  75%  { transform: translate3d(-60px, -30px, 0) scale(1.08); }
  100% { transform: translate3d(  0px,   0px, 0) scale(1.00); }
}


/* ─────────────────────────────────────────────────────────────
   4. CLASES GLASS — EL CORAZÓN DEL EFECTO
   ─────────────────────────────────────────────────────────────

   .glass          →  cristal estándar (la más usada)
   .glass-deep     →  cristal con sombra más pronunciada
   .glass-liquid   →  cristal con distorsión SVG (requiere SVG
                       #liquid-distort en el HTML)
   .glass-subtle   →  cristal muy fino, casi invisible

   OPTIMIZACIONES APLICADAS:
   · contain: layout style paint  → limita el repaint al elemento
   · isolation: isolate           → crea stacking context propio,
     evita que backdrop-filter de un hijo afecte al padre
   · --blur-sat (var) → vacío en nivel LOW para quitar saturate()
     (saturate añade ~15-20% de coste al backdrop-filter)
   · .glass-liquid desactivado en mid/low (sección 27)

   ───────────────────────────────────────────────────────────── */

/* — Cristal estándar ——————————————————————————————————————— */
.glass {
  background:         var(--bg-glass);
  backdrop-filter:    blur(var(--blur)) var(--blur-sat);
  -webkit-backdrop-filter: blur(var(--blur)) var(--blur-sat);
  border:             1px solid var(--border-glass);
  box-shadow:         var(--shadow-glass);
  /* contain limita el repaint: el navegador sabe que nada
     fuera de este elemento cambia cuando cambia su interior */
  contain:            layout style paint;
  isolation:          isolate;
}

/* — Cristal profundo (para modales, sidebars) —————————————— */
.glass-deep {
  background:         rgba(255, 255, 255, 0.07);
  backdrop-filter:    blur(var(--blur-strong)) var(--blur-sat);
  -webkit-backdrop-filter: blur(var(--blur-strong)) var(--blur-sat);
  border:             1px solid var(--border-glass);
  box-shadow:         var(--shadow-glass-deep);
  contain:            layout style paint;
  isolation:          isolate;
}

/* — Cristal líquido (Apple Liquid Glass con SVG distortion) — */
/*   REQUIERE: SVG oculto con id="liquid-distort" en el HTML   */
/*   Se convierte en .glass estándar en mid/low (sección 27)   */
.glass-liquid {
  background:         var(--bg-glass);
  backdrop-filter:    blur(var(--blur)) var(--blur-sat);
  -webkit-backdrop-filter: blur(var(--blur)) var(--blur-sat);
  border:             1px solid var(--border-glass);
  box-shadow:         var(--shadow-glass-deep);
  filter:             url(#liquid-distort);
  contain:            layout style paint;
  isolation:          isolate;
}

/* — Cristal sutil (para filas, listas, separadores) ————————— */
.glass-subtle {
  background:      rgba(255, 255, 255, 0.05);
  border:          1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* No añadir contain aquí: es para elementos inline/en fila */
}

/* Pseudo-elemento compartido: línea de reflejo superior       */
/* Se desactiva en nivel LOW (sección 27) por ser decorativo.  */
.glass::before,
.glass-deep::before,
.glass-liquid::before {
  content:  '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.65) 50%,
    transparent 100%
  );
  border-radius: inherit;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────
   5. LAYOUT
   ───────────────────────────────────────────────────────────── */

/* Contenedor principal — centra el contenido con márgenes */
.page {
  position:   relative;
  z-index:    1;          /* por encima del bg-canvas */
  max-width:  1800px;
  margin:     0 auto;
  padding:    0 32px 80px;
}

/* Secciones con espaciado estándar */
.section {
  margin-bottom: 80px;
}

/* Grid system con auto-fit responsive */
.grid   { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, 400px); justify-content: center; align-items: start; }

/* ─────────────────────────────────────────────────────────────
   6. NAVEGACIÓN / NAVBAR
   ─────────────────────────────────────────────────────────────
   USO: <nav class="nav glass"> ... </nav>
   ───────────────────────────────────────────────────────────── */

.nav {
  position:       sticky;
  top:            16px;
  z-index:        100;
  margin:         16px 0 60px;
  border-radius:  var(--radius-pill);
  padding:        14px 28px;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            24px;
  transition:     box-shadow var(--transition-base);
  overflow:       hidden;  /* necesario para el ::before */
}

.nav-logo {
  font-family:  var(--font-display);
  font-size:    1.2rem;
  font-weight:  700;
  letter-spacing: -0.02em;
  white-space:  nowrap;
  /* Texto con degradado de color */
  background:   linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-links {
  display:     flex;
  gap:         4px;
  list-style:  none;
}

.nav-links a {
  color:           var(--text-secondary);
  text-decoration: none;
  font-size:       0.875rem;
  font-weight:     500;
  padding:         6px 16px;
  border-radius:   var(--radius-pill);
  transition:      color var(--transition-fast), background var(--transition-fast);
}

.nav-links a:hover,
.nav-links a.active {
  color:       var(--text-primary);
  background:  rgba(255,255,255,0.12);
}

/* Botón CTA de la navbar */
.nav-cta {
  display:         inline-flex;
  align-items:     center;
  font-size:       0.875rem;
  font-weight:     600;
  padding:         8px 22px;
  border-radius:   var(--radius-pill);
  background:      linear-gradient(135deg,
    rgba(167,139,250,0.35),
    rgba(56,189,248,0.35)
  );
  border:          1px solid rgba(167,139,250,0.50);
  color:           var(--text-primary);
  cursor:          pointer;
  text-decoration: none;
  transition:      all var(--transition-spring);
  white-space:     nowrap;
}

.nav-cta:hover {
  background: linear-gradient(135deg,
    rgba(167,139,250,0.55),
    rgba(56,189,248,0.55)
  );
  transform:  translateY(-1px);
  box-shadow: 0 8px 24px rgba(167,139,250,0.30);
}


/* ─────────────────────────────────────────────────────────────
   7. HERO SECTION
   ───────────────────────────────────────────────────────────── */

.hero {
  text-align: center;
  padding:    40px 20px 80px;
}

/* Badge de anuncio con punto pulsante */
.hero-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       6px 18px;
  border-radius: var(--radius-pill);
  font-size:     0.78rem;
  font-weight:   600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:         var(--accent-blue);
  border:        1px solid rgba(56,189,248,0.35);
  background:    rgba(56,189,248,0.08);
  margin-bottom: 28px;
}

/* Punto animado dentro del badge */
.hero-badge::before {
  content:       '';
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--accent-blue);
  animation:     pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

.hero h1 {
  font-family:     var(--font-display);
  font-size:       clamp(2.8rem, 7vw, 5.5rem);
  font-weight:     700;
  letter-spacing:  -0.04em;
  line-height:     1.05;
  margin-bottom:   24px;
  color:           var(--text-primary);
}

/* Clase para texto con degradado dentro de h1 */
.hero h1 .gradient-text {
  background:   linear-gradient(135deg, #c4b5fd 0%, #818cf8 50%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  font-size:     1.1rem;
  color:         var(--text-secondary);
  max-width:     600px;
  margin:        0 auto 40px;
  line-height:   1.75;
  font-weight:   300;
}

/* Fila de botones del hero (centrada) */
.hero-actions {
  display:         flex;
  flex-wrap:       wrap;
  gap:             12px;
  justify-content: center;
}


/* ─────────────────────────────────────────────────────────────
   8. ENCABEZADOS DE SECCIÓN
   ───────────────────────────────────────────────────────────── */

/* Etiqueta pequeña en mayúsculas antes del título */
.section-label {
  font-size:      0.70rem;
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--accent-purple);
  margin-bottom:  10px;
  display:        block;
}

/* Título principal de sección */
.section-title {
  font-family:    var(--font-display);
  font-size:      clamp(1.8rem, 4vw, 2.8rem);
  font-weight:    700;
  letter-spacing: -0.03em;
  line-height:    1.15;
  color:          var(--text-primary);
  margin-bottom:  40px;
}

/* Parte del título con degradado de color */
.section-title span,
.section-title .gradient-text {
  background:   linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ─────────────────────────────────────────────────────────────
   9. TARJETAS (CARDS)
   ─────────────────────────────────────────────────────────────
   USO: <div class="card glass"> ... </div>
   ───────────────────────────────────────────────────────────── */

.card {
  border-radius: var(--radius-lg);
  padding:       28px;
  position:      relative;
  transition:    transform var(--transition-spring),
                 box-shadow var(--transition-base);
  /* contain: paint evita que el hover de esta tarjeta
     invalide el repaint de las tarjetas vecinas         */
  contain:       layout style paint;
}

.card:hover {
  transform:  translateY(-5px);
  box-shadow: var(--shadow-glass-hover);
}

/* Icono decorativo dentro de la tarjeta */
.card-icon {
  width:         48px;
  height:        48px;
  border-radius: var(--radius-sm);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.4rem;
  margin-bottom: 18px;
  background:    rgba(255,255,255,0.08);
  border:        1px solid rgba(255,255,255,0.15);
  flex-shrink:   0;
}

.card h3 {
  font-family:    var(--font-display);
  font-size:      1.1rem;
  font-weight:    600;
  margin-bottom:  8px;
  letter-spacing: -0.01em;
  color:          var(--text-primary);
}

.card p {
  font-size:   0.875rem;
  color:       var(--text-secondary);
  line-height: 1.65;
  font-weight: 300;
}

/* Tarjeta XL para destacar (hero card) */
.card-xl {
  border-radius: var(--radius-xl);
  padding:       36px;
}


/* ─────────────────────────────────────────────────────────────
  10. TARJETAS DE ESTADÍSTICAS
   ─────────────────────────────────────────────────────────────
   USO: <div class="stat-card glass"> ... </div>
   ───────────────────────────────────────────────────────────── */

.stat-card {
  border-radius: var(--radius-lg);
  padding:       24px 28px;
  position:      relative;
  overflow:      hidden;
}

.stat-label {
  font-size:      0.78rem;
  font-weight:    500;
  color:          var(--text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom:  10px;
  display:        block;
}

.stat-value {
  font-family:    var(--font-display);
  font-size:      2.2rem;
  font-weight:    700;
  letter-spacing: -0.04em;
  line-height:    1;
  margin-bottom:  8px;
  display:        block;
}

/* Gradientes de color para stat-value — añade clase al elemento */
.stat-value-purple { background: linear-gradient(135deg, var(--accent-purple), #818cf8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-value-blue   { background: linear-gradient(135deg, var(--accent-blue),   var(--accent-blue-d)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-value-green  { background: linear-gradient(135deg, var(--accent-green),  var(--accent-green-d)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-value-amber  { background: linear-gradient(135deg, var(--accent-amber),  var(--accent-amber-d)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-value-pink   { background: linear-gradient(135deg, var(--accent-pink),   var(--accent-pink-d)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Indicadores de cambio (arriba/abajo) */
.stat-change {
  font-size:   0.80rem;
  font-weight: 500;
  display:     flex;
  align-items: center;
  gap:         4px;
}
.stat-change.up   { color: var(--accent-green); }
.stat-change.down { color: var(--accent-red); }

/* Blob decorativo en esquina inferior derecha */
.stat-accent {
  position:      absolute;
  right:  -20px;
  bottom: -20px;
  width:  100px;
  height: 100px;
  border-radius: 50%;
  opacity:       0.15;
  filter:        blur(20px);
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────
  11. BOTONES
   ─────────────────────────────────────────────────────────────
   USO:  <button class="btn btn-primary">Texto</button>
   Variantes de color: btn-glass · btn-primary · btn-success
                       btn-danger · btn-amber
   Tamaños:            btn-sm  (pequeño)
                       (default = mediano)
                       btn-lg  (grande)
   Formas:             btn-icon (cuadrado/circular)
   ───────────────────────────────────────────────────────────── */

.btn {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            8px;
  padding:        12px 28px;
  border-radius:  var(--radius-pill);
  font-family:    var(--font-body);
  font-size:      0.90rem;
  font-weight:    600;
  cursor:         pointer;
  border:         none;
  outline:        none;
  text-decoration: none;
  position:       relative;
  overflow:       hidden;
  transition:     all var(--transition-spring);
  white-space:    nowrap;
}

/* Efecto de brillo al pasar el cursor */
.btn::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     rgba(255,255,255,0);
  border-radius:  inherit;
  transition:     background var(--transition-fast);
}
.btn:hover::after  { background: rgba(255,255,255,0.08); }
.btn:active        { transform: scale(0.97); }

/* — Variantes ————————————————————————————————————————————————— */

.btn-glass {
  background:  rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:      1px solid rgba(255,255,255,0.25);
  color:       var(--text-primary);
  box-shadow:  0 4px 20px rgba(0,0,0,0.15),
               inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-glass:hover {
  background:  rgba(255,255,255,0.18);
  transform:   translateY(-2px);
  box-shadow:  0 10px 30px rgba(0,0,0,0.20),
               inset 0 1px 0 rgba(255,255,255,0.45);
}

.btn-primary {
  background:  linear-gradient(135deg, rgba(167,139,250,0.60), rgba(99,102,241,0.60));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:      1px solid rgba(167,139,250,0.50);
  color:       #fff;
  box-shadow:  0 4px 20px rgba(124,58,237,0.30),
               inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover {
  background:  linear-gradient(135deg, rgba(167,139,250,0.80), rgba(99,102,241,0.80));
  transform:   translateY(-2px);
  box-shadow:  0 12px 32px rgba(124,58,237,0.45),
               inset 0 1px 0 rgba(255,255,255,0.35);
}

.btn-success {
  background:  linear-gradient(135deg, rgba(52,211,153,0.50), rgba(5,150,105,0.50));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:      1px solid rgba(52,211,153,0.40);
  color:       #fff;
  box-shadow:  0 4px 20px rgba(16,185,129,0.25),
               inset 0 1px 0 rgba(255,255,255,0.20);
}
.btn-success:hover {
  transform:   translateY(-2px);
  box-shadow:  0 12px 32px rgba(16,185,129,0.40),
               inset 0 1px 0 rgba(255,255,255,0.30);
}

.btn-danger {
  background:  linear-gradient(135deg, rgba(248,113,113,0.50), rgba(220,38,38,0.50));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:      1px solid rgba(248,113,113,0.40);
  color:       #fff;
  box-shadow:  0 4px 20px rgba(220,38,38,0.20),
               inset 0 1px 0 rgba(255,255,255,0.20);
}
.btn-danger:hover {
  transform:   translateY(-2px);
  box-shadow:  0 12px 32px rgba(220,38,38,0.38);
}

.btn-amber {
  background:  linear-gradient(135deg, rgba(251,191,36,0.50), rgba(217,119,6,0.50));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:      1px solid rgba(251,191,36,0.40);
  color:       #fff;
  box-shadow:  0 4px 20px rgba(217,119,6,0.25),
               inset 0 1px 0 rgba(255,255,255,0.20);
}
.btn-amber:hover {
  transform:   translateY(-2px);
  box-shadow:  0 12px 32px rgba(217,119,6,0.40);
}

/* — Tamaños —————————————————————————————————————————————————— */
.btn-sm { padding: 8px 18px;   font-size: 0.80rem; }
.btn-lg { padding: 16px 40px;  font-size: 1.00rem; }

/* Botón cuadrado para íconos */
.btn-icon {
  width:  44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
}

/* Fila de botones con espaciado */
.btn-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         12px;
  align-items: center;
}


/* ─────────────────────────────────────────────────────────────
  12. BADGES Y ETIQUETAS
   ─────────────────────────────────────────────────────────────
   USO: <span class="badge badge-purple">Texto</span>
   ───────────────────────────────────────────────────────────── */

.badge {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       4px 12px;
  border-radius: var(--radius-pill);
  font-size:     0.75rem;
  font-weight:   600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Punto de estado dentro del badge */
.badge-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  display:       inline-block;
  flex-shrink:   0;
}

/* Colores de badge */
.badge-purple { background: rgba(167,139,250,0.18); border: 1px solid rgba(167,139,250,0.35); color: #c4b5fd; }
.badge-blue   { background: rgba(56,189,248,0.15);  border: 1px solid rgba(56,189,248,0.30);  color: #7dd3fc; }
.badge-green  { background: rgba(52,211,153,0.15);  border: 1px solid rgba(52,211,153,0.30);  color: #6ee7b7; }
.badge-amber  { background: rgba(251,191,36,0.15);  border: 1px solid rgba(251,191,36,0.28);  color: #fcd34d; }
.badge-red    { background: rgba(248,113,113,0.15); border: 1px solid rgba(248,113,113,0.28); color: #fca5a5; }
.badge-pink   { background: rgba(244,114,182,0.15); border: 1px solid rgba(244,114,182,0.28); color: #f9a8d4; }
.badge-gray   { background: rgba(156,163,175,0.15); border: 1px solid rgba(156,163,175,0.28); color: #94a3b8; }

/* Contenedor de fila de badges */
.badges-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

/* Panel de leyenda con lista de badges y descripciones */
.badge-legend {
  padding:       12px;
  border-radius: var(--radius-lg);
  background:    rgba(255, 255, 255, 0.02);
  margin-bottom: 32px;
}

.badge-legend__title {
  font-size:      12px;
  color:          var(--text-secondary);
  display:        block;
  margin-bottom:  12px;
  font-weight:    500;
  letter-spacing: 0.02em;
}

.badge-legend__list {
  list-style:  none;
  padding:     0;
  margin:      0;
  display:     flex;
  flex-direction: column;
  gap:         8px;
}

.badge-legend__item {
  display:       flex;
  align-items:   center;
  gap:           8px;
}

.badge-legend__description {
  font-size: 12px;
  color:     var(--text-secondary);
  line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────
  13. FORMULARIOS (inputs, select, textarea)
   ─────────────────────────────────────────────────────────────
   USO: <input class="input-glass" type="text">
   ───────────────────────────────────────────────────────────── */

.form-group {
  margin-bottom: 20px;
}

label {
  display:        block;
  font-size:      0.82rem;
  font-weight:    500;
  color:          var(--text-secondary);
  margin-bottom:  8px;
  letter-spacing: 0.02em;
}

/* Input base de cristal */
.input-glass {
  width:       100%;
  padding:     13px 18px;
  background:  rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:      1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  color:       var(--text-primary);
  font-family: var(--font-body);
  font-size:   0.90rem;
  outline:     none;
  transition:  all var(--transition-fast);
  box-shadow:  inset 0 1px 0 rgba(255,255,255,0.10),
               inset 0 -1px 0 rgba(0,0,0,0.08);
}

.input-glass::placeholder { color: var(--text-muted); }

.input-glass:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.25);
}

.input-glass:focus {
  background:  rgba(255,255,255,0.11);
  border-color: rgba(167,139,250,0.60);
  box-shadow:  0 0 0 3px rgba(167,139,250,0.15),
               inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Input con icono a la izquierda */
.input-wrapper {
  position: relative;
  display:  flex;
  align-items: center;
}
.input-wrapper .input-glass { padding-left: 44px; }

.input-icon {
  position:       absolute;
  left:           14px;
  color:          var(--text-muted);
  font-size:      1rem;
  pointer-events: none;
  line-height:    1;
}

/* Select desplegable */
select.input-glass {
  appearance:         none;
  -webkit-appearance: none;
  cursor:             pointer;
  padding-right:      40px;
  /* Flecha personalizada */
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position: right 16px center;
}
select.input-glass option { background: #1a1a2e; color: white; }

/* Textarea */
textarea.input-glass {
  resize:     vertical;
  min-height: 100px;
  line-height: 1.65;
}


/* ─────────────────────────────────────────────────────────────
  14. TOGGLE SWITCHES
   ─────────────────────────────────────────────────────────────
   USO:
   <label class="toggle">
     <input type="checkbox">
     <span class="toggle-track"></span>
   </label>
   ───────────────────────────────────────────────────────────── */

/* Fila completa con texto + toggle */
.toggle-group { display: flex; flex-direction: column; gap: 12px; }

.toggle-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 18px;
  border-radius:   var(--radius-md);
  background:      rgba(255,255,255,0.05);
  border:          1px solid rgba(255,255,255,0.10);
  transition:      background var(--transition-fast);
}
.toggle-row:hover { background: rgba(255,255,255,0.08); }

.toggle-info       { display: flex; flex-direction: column; gap: 3px; }
.toggle-title      { font-size: 0.90rem; font-weight: 500; }
.toggle-desc       { font-size: 0.78rem; color: var(--text-muted); }

/* El switch en sí */
.toggle {
  position:   relative;
  width:      52px;
  height:     28px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }

.toggle-track {
  position:      absolute;
  inset:         0;
  border-radius: var(--radius-pill);
  background:    rgba(255,255,255,0.12);
  border:        1px solid rgba(255,255,255,0.20);
  cursor:        pointer;
  transition:    all 0.30s ease;
  backdrop-filter: blur(8px);
}

/* Bolita del toggle */
.toggle-track::after {
  content:       '';
  position:      absolute;
  top:    3px;
  left:   3px;
  width:  20px;
  height: 20px;
  border-radius: 50%;
  background:    rgba(255,255,255,0.75);
  box-shadow:    0 2px 6px rgba(0,0,0,0.25);
  transition:    all 0.30s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Estado: activado */
.toggle input:checked + .toggle-track {
  background:  linear-gradient(135deg,
    rgba(167,139,250,0.75),
    rgba(99,102,241,0.75)
  );
  border-color: rgba(167,139,250,0.55);
  box-shadow:   0 0 20px rgba(124,58,237,0.30);
}
.toggle input:checked + .toggle-track::after {
  transform:  translateX(24px);
  background: #fff;
}


/* ─────────────────────────────────────────────────────────────
  15. SLIDERS / RANGE INPUTS
   ─────────────────────────────────────────────────────────────
   USO: <input type="range" class="slider">
   Colores: slider-purple · slider-blue · slider-green
   ───────────────────────────────────────────────────────────── */

.slider-container { padding: 8px 0; }

.slider-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   12px;
}

.slider-label { font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); }

.slider-value {
  font-size:     0.82rem;
  font-weight:   700;
  color:         var(--accent-purple);
  background:    rgba(167,139,250,0.12);
  padding:       2px 10px;
  border-radius: var(--radius-pill);
  border:        1px solid rgba(167,139,250,0.28);
  min-width:     50px;
  text-align:    center;
}

/* Base del slider */
input[type="range"].slider,
input[type="range"] {
  -webkit-appearance: none;
  appearance:         none;
  width:              100%;
  height:             6px;
  border-radius:      3px;
  background:         rgba(255,255,255,0.12);
  outline:            none;
  cursor:             pointer;
}

/* Pulgar — color por defecto (purple) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:              22px;
  height:             22px;
  border-radius:      50%;
  background:         linear-gradient(135deg, var(--accent-purple), #818cf8);
  cursor:             pointer;
  box-shadow:         0 2px 10px rgba(124,58,237,0.40),
                      0 0 0 3px rgba(167,139,250,0.22);
  transition:         box-shadow var(--transition-fast);
}
input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 4px 18px rgba(124,58,237,0.65),
              0 0 0 5px rgba(167,139,250,0.25);
}

/* Variantes de color del slider */
input[type="range"].slider-blue::-webkit-slider-thumb {
  background:  linear-gradient(135deg, var(--accent-blue), var(--accent-blue-d));
  box-shadow:  0 2px 10px rgba(14,165,233,0.40), 0 0 0 3px rgba(56,189,248,0.22);
}
input[type="range"].slider-green::-webkit-slider-thumb {
  background:  linear-gradient(135deg, var(--accent-green), var(--accent-green-d));
  box-shadow:  0 2px 10px rgba(16,185,129,0.40), 0 0 0 3px rgba(52,211,153,0.22);
}
input[type="range"].slider-amber::-webkit-slider-thumb {
  background:  linear-gradient(135deg, var(--accent-amber), var(--accent-amber-d));
  box-shadow:  0 2px 10px rgba(217,119,6,0.40), 0 0 0 3px rgba(251,191,36,0.22);
}


/* ─────────────────────────────────────────────────────────────
  16. BARRAS DE PROGRESO
   ─────────────────────────────────────────────────────────────
   USO:
   <div class="progress-track">
     <div class="progress-fill pf-purple" style="width:75%"></div>
   </div>
   ───────────────────────────────────────────────────────────── */

.progress-group { display: flex; flex-direction: column; gap: 20px; }

/* Meta-datos encima de la barra */
.progress-meta {
  display:         flex;
  justify-content: space-between;
  margin-bottom:   8px;
  font-size:       0.82rem;
}
.progress-name { color: var(--text-secondary); font-weight: 500; }
.progress-pct  { color: var(--text-primary);   font-weight: 700; }

/* Contenedor (fondo) */
.progress-track {
  height:        8px;
  background:    rgba(255,255,255,0.08);
  border-radius: var(--radius-pill);
  overflow:      hidden;
}

/* Relleno animado */
.progress-fill {
  height:        100%;
  border-radius: var(--radius-pill);
  position:      relative;
  transition:    width 1.0s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Brillo en la punta del fill */
.progress-fill::after {
  content:       '';
  position:      absolute;
  top:    0;
  right:  0;
  width:  20px;
  height: 100%;
  background:    rgba(255,255,255,0.45);
  border-radius: var(--radius-pill);
  filter:        blur(4px);
}

/* Colores de fill */
.pf-purple { background: linear-gradient(90deg, var(--accent-purple-d), var(--accent-purple)); }
.pf-blue   { background: linear-gradient(90deg, var(--accent-blue-d),   var(--accent-blue));   }
.pf-green  { background: linear-gradient(90deg, var(--accent-green-d),  var(--accent-green));  }
.pf-amber  { background: linear-gradient(90deg, var(--accent-amber-d),  var(--accent-amber));  }
.pf-pink   { background: linear-gradient(90deg, var(--accent-pink-d),   var(--accent-pink));   }


/* ─────────────────────────────────────────────────────────────
  17. ALERTAS / NOTIFICACIONES
   ─────────────────────────────────────────────────────────────
   USO: <div class="alert alert-success"> ... </div>
   ───────────────────────────────────────────────────────────── */

.alert {
  display:      flex;
  align-items:  flex-start;
  gap:          14px;
  padding:      16px 20px;
  border-radius: var(--radius-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 12px;
}

.alert-icon  { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.alert-title { font-size: 0.90rem; font-weight: 600; margin-bottom: 3px; }
.alert-msg   { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }

/* Variantes */
.alert-info    { background: rgba(56,189,248,0.08);  border: 1px solid rgba(56,189,248,0.22); }
.alert-success { background: rgba(52,211,153,0.08);  border: 1px solid rgba(52,211,153,0.22); }
.alert-warning { background: rgba(251,191,36,0.08);  border: 1px solid rgba(251,191,36,0.22); }
.alert-error   { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.22);}


/* ─────────────────────────────────────────────────────────────
  18. TARJETA DE PERFIL / AVATAR
   ─────────────────────────────────────────────────────────────
   USO: <div class="profile-card glass"> ... </div>
   ───────────────────────────────────────────────────────────── */

.profile-card {
  border-radius: var(--radius-xl);
  padding:       32px;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  text-align:    center;
  gap:           16px;
  position:      relative;
  overflow:      hidden;
}

/* Círculo de avatar con iniciales */
.avatar {
  width:         80px;
  height:        80px;
  border-radius: 50%;
  background:    linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.8rem;
  font-weight:   700;
  color:         #fff;
  border:        2px solid rgba(255,255,255,0.30);
  box-shadow:    0 8px 24px rgba(124,58,237,0.30);
  position:      relative;
  flex-shrink:   0;
}

/* Indicador de estado online */
.avatar-online {
  position:      absolute;
  bottom: 2px;
  right:  2px;
  width:  14px;
  height: 14px;
  border-radius: 50%;
  background:    var(--accent-green);
  border:        2px solid rgba(10,10,26,0.80);
  box-shadow:    0 0 8px rgba(52,211,153,0.55);
}

.profile-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.profile-role { font-size: 0.82rem; color: var(--text-muted); }

/* Grid de estadísticas del perfil */
.profile-stats {
  display:       grid;
  grid-template-columns: repeat(3, 1fr);
  gap:           1px;
  width:         100%;
  background:    rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  overflow:      hidden;
  border:        1px solid rgba(255,255,255,0.10);
}

.profile-stat {
  padding:    14px 8px;
  background: rgba(255,255,255,0.04);
  text-align: center;
}

.profile-stat-val {
  font-family:    var(--font-display);
  font-size:      1.2rem;
  font-weight:    700;
  margin-bottom:  2px;
  display:        block;
}

.profile-stat-key {
  font-size:      0.72rem;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ─────────────────────────────────────────────────────────────
  19. REPRODUCTOR DE MEDIA
   ─────────────────────────────────────────────────────────────
   USO: <div class="media-card glass"> ... </div>
   ───────────────────────────────────────────────────────────── */

.media-card {
  border-radius: var(--radius-xl);
  padding:       28px;
  position:      relative;
  overflow:      hidden;
}

/* Portada del álbum */
.media-cover {
  width:         100%;
  aspect-ratio:  1;
  border-radius: var(--radius-lg);
  background:    linear-gradient(135deg, var(--accent-purple-d) 0%, var(--accent-blue-d) 50%, var(--accent-green-d) 100%);
  margin-bottom: 20px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     3rem;
  box-shadow:    0 12px 32px rgba(124,58,237,0.35);
}

.media-title  { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.media-artist { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 16px; }

/* Tiempos de reproducción */
.media-time {
  display:         flex;
  justify-content: space-between;
  font-size:       0.75rem;
  color:           var(--text-muted);
  margin-top:      6px;
}

/* Controles de reproducción */
.media-controls {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             16px;
  margin-top:      16px;
}

.ctrl-btn {
  background:    transparent;
  border:        none;
  color:         var(--text-secondary);
  cursor:        pointer;
  font-size:     1.1rem;
  padding:       8px;
  border-radius: var(--radius-sm);
  transition:    all var(--transition-fast);
}
.ctrl-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.08); }

/* Botón de play (destacado) */
.ctrl-play {
  width:         52px;
  height:        52px;
  border-radius: 50%;
  background:    linear-gradient(135deg, rgba(167,139,250,0.60), rgba(99,102,241,0.60));
  border:        1px solid rgba(167,139,250,0.45);
  color:         #fff;
  font-size:     1.2rem;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all var(--transition-spring);
  box-shadow:    0 4px 20px rgba(124,58,237,0.35);
}
.ctrl-play:hover {
  transform:  scale(1.08);
  box-shadow: 0 8px 30px rgba(124,58,237,0.55);
}


/* ─────────────────────────────────────────────────────────────
  20. WIDGET DE TIEMPO (WEATHER)
   ─────────────────────────────────────────────────────────────
   USO: <div class="weather-card glass"> ... </div>
   ───────────────────────────────────────────────────────────── */

.weather-card {
  border-radius: var(--radius-xl);
  padding:       32px;
  position:      relative;
  overflow:      hidden;
}

.weather-top {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  margin-bottom:   24px;
}

.weather-city { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.weather-date { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }
.weather-icon { font-size: 3rem; line-height: 1; }

/* Temperatura principal con degradado */
.weather-temp {
  font-family:    var(--font-display);
  font-size:      4.5rem;
  font-weight:    700;
  letter-spacing: -0.05em;
  line-height:    1;
  margin-bottom:  8px;
  background:     linear-gradient(135deg, #fff, rgba(255,255,255,0.65));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.weather-desc { font-size: 0.90rem; color: var(--text-muted); margin-bottom: 24px; }

/* Grid de estadísticas (humedad, viento, UV) */
.weather-stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   8px;
  margin-bottom:         20px;
}

.weather-stat {
  background:    rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding:       10px 12px;
  border:        1px solid rgba(255,255,255,0.10);
}
.weather-stat-label { font-size: 0.70rem; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; display: block; }
.weather-stat-val   { font-size: 0.95rem; font-weight: 600; }

/* Previsión semanal (5 columnas) */
.weather-forecast {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   6px;
}

.weather-day {
  background:    rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding:       8px 4px;
  border:        1px solid rgba(255,255,255,0.08);
  text-align:    center;
}

.weather-day.today {
  background:  rgba(255,255,255,0.12);
  border-color: rgba(56,189,248,0.30);
}

.weather-day-name  { font-size: 0.65rem; color: var(--text-muted); margin-bottom: 4px; display: block; }
.weather-day.today .weather-day-name { color: var(--accent-blue); }
.weather-day-icon  { font-size: 1rem; display: block; line-height: 1; }
.weather-day-temp  { font-size: 0.80rem; font-weight: 600; margin-top: 4px; display: block; }


/* ─────────────────────────────────────────────────────────────
  21. TOOLTIP
   ─────────────────────────────────────────────────────────────
   USO:
   <div class="tooltip-wrap">
     <button class="btn btn-glass btn-icon">💡</button>
     <div class="tooltip">Texto del tooltip</div>
   </div>
   ───────────────────────────────────────────────────────────── */

.tooltip-wrap {
  position: relative;
  display:  inline-block;
}

.tooltip {
  position:      absolute;
  bottom:        calc(100% + 8px);
  left:          50%;
  transform:     translateX(-50%) translateY(6px);
  background:    rgba(10,10,26,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:        1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  padding:       7px 14px;
  font-size:     0.78rem;
  white-space:   nowrap;
  color:         var(--text-primary);
  opacity:       0;
  pointer-events: none;
  transition:    opacity var(--transition-fast),
                 transform var(--transition-fast);
  box-shadow:    0 8px 24px rgba(0,0,0,0.28);
  z-index:       50;
}

/* Triángulo apuntando hacia abajo */
.tooltip::after {
  content:      '';
  position:     absolute;
  top:          100%;
  left:         50%;
  transform:    translateX(-50%);
  border:       5px solid transparent;
  border-top-color: rgba(255,255,255,0.15);
}

/* Mostrar al hacer hover */
.tooltip-wrap:hover .tooltip {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}


/* ─────────────────────────────────────────────────────────────
  22. BLOQUE DE CÓDIGO (CODE SNIPPET)
   ───────────────────────────────────────────────────────────── */

.code-block {
  background:    rgba(0,0,0,0.40);
  border:        1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-md);
  padding:       24px;
  overflow-x:    auto;
  font-size:     0.82rem;
  line-height:   1.85;
  color:         rgba(255,255,255,0.82);
  font-family:   'Courier New', monospace;
}

/* Clases de color para syntax highlighting manual */
.tok-comment { color: #6b7280; }
.tok-selector{ color: #38bdf8; }
.tok-property{ color: #a78bfa; }
.tok-value   { color: #34d399; }
.tok-string  { color: #fbbf24; }


/* ─────────────────────────────────────────────────────────────
  23. FOOTER
   ───────────────────────────────────────────────────────────── */

.footer {
  text-align:    center;
  padding:       40px 0 0;
  border-top:    1px solid rgba(255,255,255,0.08);
  margin-top:    40px;
}

.footer p {
  font-size:   0.82rem;
  color:       var(--text-muted);
  font-weight: 300;
  line-height: 2;
}

.footer strong,
.footer .gradient-text {
  background:  linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:text;
  font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────
  24. ANIMACIONES DE ENTRADA
   ─────────────────────────────────────────────────────────────
   Añade .fade-up a cualquier elemento para animarlo al cargar.
   Añade .delay-1 … .delay-5 para escalonar la animación.
   ───────────────────────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up           { animation: fadeUp 0.60s ease both; }
.delay-1           { animation-delay: 0.10s; }
.delay-2           { animation-delay: 0.20s; }
.delay-3           { animation-delay: 0.30s; }
.delay-4           { animation-delay: 0.40s; }
.delay-5           { animation-delay: 0.55s; }


/* ─────────────────────────────────────────────────────────────
  25. UTILIDADES
   ───────────────────────────────────────────────────────────── */

/* Espaciado */
.mt-8  { margin-top:    8px; }
.mt-16 { margin-top:   16px; }
.mt-24 { margin-top:   24px; }
.mt-32 { margin-top:   32px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom:16px; }
.mb-24 { margin-bottom:24px; }

/* Flex helpers */
.flex              { display: flex; }
.flex-center       { display: flex; align-items: center; }
.flex-between      { display: flex; justify-content: space-between; align-items: center; }
.flex-col          { display: flex; flex-direction: column; }
.gap-8             { gap: 8px; }
.gap-12            { gap: 12px; }
.gap-16            { gap: 16px; }

/* Texto */
.text-muted        { color: var(--text-muted); }
.text-secondary    { color: var(--text-secondary); }
.text-sm           { font-size: 0.82rem; }
.text-xs           { font-size: 0.72rem; }
.font-display      { font-family: var(--font-display); }
.font-bold         { font-weight: 700; }
.letter-wide       { letter-spacing: 0.08em; }


/* ─────────────────────────────────────────────────────────────
  26. RESPONSIVE
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .page         { padding: 0 16px 60px; }
  .nav-links    { display: none; }           /* colapsa el menú en móvil */
  .grid-3,
  .grid-4       { grid-template-columns: 1fr; }
  .hero h1      { font-size: 2.4rem; }
  .hero p       { font-size: 0.95rem; }
  .weather-temp { font-size: 3.5rem; }
}

@media (max-width: 480px) {
  .nav-cta      { display: none; }
  .btn-row      { justify-content: center; }
  .profile-card { padding: 24px; }
}


/* ─────────────────────────────────────────────────────────────
  27. OPTIMIZACIÓN DE RENDIMIENTO POR NIVEL DE CALIDAD
   ─────────────────────────────────────────────────────────────

  ESTRATEGIA DE DETECCIÓN (del más específico al más general):
  ─────────────────────────────────────────────────────────────
  A) MANUAL VÍA CLASE EN <html>:
     <html class="quality-high">   → PC gama alta
     <html class="quality-mid">    → Laptop / tablet
     <html class="quality-low">    → Móvil / dispositivo lento
     Asignado por el JS de detección automática (ver snippet).

  B) AUTOMÁTICO VÍA MEDIA QUERIES (fallback sin JS):
     • (hover: none) + (pointer: coarse) → casi seguro móvil táctil
     • (max-width: 900px)                → fallback por ancho de pantalla

  C) JS DE DETECCIÓN (añadir al <head> del HTML):
  ┌──────────────────────────────────────────────────────────────
  │ <script>
  │   (function() {
  │     // API navigator.deviceMemory: GB de RAM del dispositivo
  │     // navigator.hardwareConcurrency: número de núcleos CPU
  │     var mem   = navigator.deviceMemory      || 4;
  │     var cores = navigator.hardwareConcurrency || 4;
  │     var ua    = navigator.userAgent;
  │     var isMobile = /Mobi|Android|iPhone|iPad/i.test(ua);
  │
  │     var quality;
  │     if (isMobile || mem <= 2 || cores <= 2) {
  │       quality = 'low';
  │     } else if (mem <= 4 || cores <= 4) {
  │       quality = 'mid';
  │     } else {
  │       quality = 'high';
  │     }
  │     document.documentElement.className += ' quality-' + quality;
  │
  │     // Exponer función manual para overrides desde consola:
  │     window.__setQuality = function(q) {
  │       var el = document.documentElement;
  │       el.className = el.className.replace(/quality-\w+/g,'') +' quality-'+q;
  │     };
  │   })();
  │ </script>
  └──────────────────────────────────────────────────────────────

  ───────────────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════
   NIVEL ALTO (.quality-high o ausencia de clase de calidad)
   Todos los efectos activos. Para PC con GPU dedicada.
   No requiere overrides, el :root ya define los valores altos.
   ══════════════════════════════════════════════════════════════ */
/* (sin overrides — los valores de :root ya son nivel HIGH) */


/* ══════════════════════════════════════════════════════════════
   NIVEL MEDIO (.quality-mid)
   Laptop / tablet potente. Reduce blur, elimina SVG filter,
   elimina blobs 4 y 5, simplifica sombras.
   ══════════════════════════════════════════════════════════════ */

.quality-mid {
  /* — Blur reducido: 10px en lugar de 18/28px ———————————————
     El coste de backdrop-filter escala cuadráticamente
     con el radio: blur(10px) cuesta ~70% menos que blur(18px) */
  --blur:         10px;
  --blur-strong:  16px;

  /* — Sin saturate() en backdrop-filter ————————————————————
     Añadir saturate() fuerza un pase extra de composición.
     Al vaciarlo se elimina ese coste manteniendo el blur.    */
  --blur-sat:     ;  /* vacío = sin saturate */

  /* — Cristal más opaco para compensar el menor blur ————————*/
  --bg-glass:     rgba(255, 255, 255, 0.14);

  /* — Sombras simplificadas: 2 capas en lugar de 4-6 ————————*/
  --shadow-glass:
    0 6px 24px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 var(--border-glass-top);

  --shadow-glass-deep:
    0 12px 40px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);

  --shadow-glass-hover:
    0 18px 40px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);

  /* — Blobs: blur reducido ——————————————————————————————————*/
  --blob-blur:    55px;

  /* — Transiciones: sin spring (cubic-bezier caro en mobile) -*/
  --transition-spring: 0.22s ease;
}

/* Ocultar blobs 4 y 5 en nivel medio (2 menos = mucha mejora)  */
.quality-mid .blob-4,
.quality-mid .blob-5  { display: none; }

/* Desactivar SVG distortion en mid: se degrada a .glass normal  */
.quality-mid .glass-liquid {
  filter: none;
}

/* Desactivar reflejo superior decorativo (pseudoelemento antes) */
.quality-mid .glass::before,
.quality-mid .glass-deep::before,
.quality-mid .glass-liquid::before { display: none; }

/* Desactivar stat-accent blur (pequeño pero suma) */
.quality-mid .stat-accent { filter: none; opacity: 0.10; }


/* ══════════════════════════════════════════════════════════════
   NIVEL BAJO (.quality-low)
   Móvil / tablet básica. Mínima carga gráfica, máxima
   legibilidad. Fondo estático, blur mínimo, sin animaciones.
   ══════════════════════════════════════════════════════════════ */

.quality-low {
  /* — Blur mínimo —————————————————————————————————————————————
     6px es suficiente para el efecto visual básico.
     Sin saturate en ningún caso.                             */
  --blur:         6px;
  --blur-strong:  8px;
  --blur-sat:     ;  /* vacío: sin saturate */

  /* — Cristal más opaco (compensa el poco blur) ——————————————*/
  --bg-glass:     rgba(255, 255, 255, 0.17);

  /* — Sombra mínima: 1 sola capa ————————————————————————————*/
  --shadow-glass:       0 4px 16px rgba(0, 0, 0, 0.22);
  --shadow-glass-deep:  0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-glass-hover: 0 10px 28px rgba(0, 0, 0, 0.26);

  /* — Blobs: pequeños y parados ——————————————————————————————*/
  --blob-blur:  40px;
  --blob-anim:  paused;  /* detiene la animación completamente */

  /* — Sin transiciones spring ————————————————————————————————*/
  --transition-spring: 0.18s ease;
  --transition-base:   0.15s ease;
}

/* Ocultar blobs 3, 4 y 5: solo 2 blobs estáticos de fondo     */
.quality-low .blob-3,
.quality-low .blob-4,
.quality-low .blob-5  { display: none; }

/* Blobs restantes: más pequeños para reducir área de blur      */
.quality-low .blob-1  { width: 400px; height: 400px; opacity: 0.45; }
.quality-low .blob-2  { width: 300px; height: 300px; opacity: 0.40; }

/* Eliminar todos los filtros SVG costosos                      */
.quality-low .glass-liquid  { filter: none; }

/* Desactivar hover en tarjetas (evita repaint en scroll táctil)*/
.quality-low .card:hover {
  transform:  none;
  box-shadow: var(--shadow-glass);
}

/* Sin reflejo superior decorativo                              */
.quality-low .glass::before,
.quality-low .glass-deep::before,
.quality-low .glass-liquid::before { display: none; }

/* Sin blob decorativo en stat-cards                           */
.quality-low .stat-accent { display: none; }

/* backdrop-filter del tooltip: simplificado                   */
.quality-low .tooltip {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(5, 5, 20, 0.96);
}

/* backdrop-filter de botones: simplificado                    */
.quality-low .btn-glass,
.quality-low .btn-primary,
.quality-low .btn-success,
.quality-low .btn-danger,
.quality-low .btn-amber {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Fade-up: animación más rápida, sin lag visual               */
.quality-low .fade-up {
  animation-duration: 0.35s;
}


/* ── FALLBACK AUTOMÁTICO VÍA MEDIA QUERY (sin JS) ─────────────
   Usa (hover: none) + (pointer: coarse) como señal de móvil táctil.
   Se activa si el JS no asignó ninguna clase quality-*.         */

html:not(.quality-high):not(.quality-mid):not(.quality-low) {

  /* Tablet o pantalla ≤ 1024px sin JS de detección → nivel mid */
  @media (max-width: 1024px) {
    --blur:         10px;
    --blur-strong:  16px;
    --blur-sat:     ;
    --bg-glass:     rgba(255, 255, 255, 0.14);
    --blob-blur:    55px;
    --shadow-glass: 0 6px 24px rgba(0,0,0,0.20), inset 0 1px 0 var(--border-glass-top);
    --shadow-glass-deep: 0 12px 40px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.45);
  }

  /* Dispositivo táctil (móvil/tablet) → nivel low              */
  @media (hover: none) and (pointer: coarse) {
    --blur:         6px;
    --blur-strong:  8px;
    --blur-sat:     ;
    --bg-glass:     rgba(255, 255, 255, 0.17);
    --blob-blur:    40px;
    --blob-anim:    paused;
    --shadow-glass: 0 4px 16px rgba(0,0,0,0.22);
    --shadow-glass-deep: 0 8px 24px rgba(0,0,0,0.25);
  }
}


/* ─────────────────────────────────────────────────────────────
  28. PREFERS-REDUCED-MOTION (ACCESIBILIDAD)
   ─────────────────────────────────────────────────────────────
   Los usuarios que activan "Reducir movimiento" en su SO
   reciben una versión sin animaciones. Doble beneficio:
   accesibilidad + rendimiento en dispositivos lentos que
   suelen activar esta opción.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  /* Parar todos los blobs                                      */
  .blob {
    animation-play-state: paused !important;
  }

  /* Eliminar animaciones de entrada                           */
  .fade-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Eliminar transiciones de hover en tarjetas               */
  .card {
    transition: none !important;
  }
  .card:hover {
    transform: none !important;
  }

  /* Eliminar SVG filter animado                              */
  .glass-liquid {
    filter: none !important;
  }

  /* Desactivar el punto pulsante del hero-badge              */
  .hero-badge::before {
    animation: none !important;
  }

  /* Desactivar transiciones en botones                       */
  .btn {
    transition: none !important;
  }

  /* Desactivar toggle spring                                 */
  .toggle-track,
  .toggle-track::after {
    transition: none !important;
  }
}