@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Syne:wght@600;700;800&display=swap');

:root {
    --bg:             #0a0415;
    --surface:        #160f2b;
    --surface2:       #1f1640;
    --surface3:       #2a1d50;
    --border:         #2e2356;
    --primary:        #7c3aed;
    --primary-hover:  #8b5cf6;
    --accent:         #ec4899;
    --success:        #34d399;
    --danger:         #f87171;
    --gold:           #f59e0b;
    --plata:          #94a3b8;
    --bronce:         #cd7c3e;
    --racha:          #f97316;
    --text:           #f5f3ff;
    --text-muted:     #a78bca;
    --font-cuerpo:    'Manrope', system-ui, sans-serif;
    --font-titulo:    'Syne', system-ui, sans-serif;
    --radius:         12px;
}

/* ── Temas alternativos — aplicados en body para certeza de cascada ── */
body.tema-azul {
    --bg:            #020b18;
    --surface:       #071e36;
    --surface2:      #0d2d4d;
    --surface3:      #123a60;
    --border:        #1b4d7a;
    --primary:       #0ea5e9;
    --primary-hover: #38bdf8;
    --accent:        #22d3ee;
    --text:          #e0f7ff;
    --text-muted:    #7ab8d4;
    background: #020b18;
    color: #e0f7ff;
}
body.tema-verde {
    --bg:            #011208;
    --surface:       #061d10;
    --surface2:      #0c2d18;
    --surface3:      #113d22;
    --border:        #175230;
    --primary:       #10b981;
    --primary-hover: #34d399;
    --accent:        #6ee7b7;
    --text:          #d1fae5;
    --text-muted:    #5a9b78;
    background: #011208;
    color: #d1fae5;
}
body.tema-rojo {
    --bg:            #100202;
    --surface:       #1e0404;
    --surface2:      #2c0606;
    --surface3:      #3c0a0a;
    --border:        #5c1616;
    --primary:       #dc2626;
    --primary-hover: #ef4444;
    --accent:        #f97316;
    --text:          #fff1f0;
    --text-muted:    #c97a7a;
    background: #100202;
    color: #fff1f0;
}
body.tema-dorado {
    --bg:            #0e0800;
    --surface:       #1a1100;
    --surface2:      #251900;
    --surface3:      #322200;
    --border:        #4d3800;
    --primary:       #d97706;
    --primary-hover: #f59e0b;
    --accent:        #fbbf24;
    --text:          #fffbeb;
    --text-muted:    #c8a040;
    background: #0e0800;
    color: #fffbeb;
}
body.tema-claro {
    --bg:            #f5f3ff;
    --surface:       #ffffff;
    --surface2:      #ede9fe;
    --surface3:      #ddd6fe;
    --border:        #c4b5fd;
    --primary:       #7c3aed;
    --primary-hover: #6d28d9;
    --accent:        #db2777;
    /* --success/--danger del :root (#34d399/#f87171) se pensaron para
       contrastar contra el fondo casi negro por defecto — sobre fondo
       blanco quedan casi ilegibles (~1.8:1 y ~2.6:1, muy por debajo del
       4.5:1 de WCAG AA). Estas versiones más saturadas sí cumplen. */
    --success:       #047857;
    --danger:        #dc2626;
    /* #f59e0b/#fbbf24 (usados en todo el sitio para VIP/insignias/estrellas)
       dan ~2.1:1 y ~1.7:1 sobre blanco — muy por debajo de WCAG AA. Este
       tono más oscuro da 5.02:1, sigue leyéndose "dorado". */
    --gold:          #b45309;
    /* Mismo criterio que --gold arriba: plata/bronce/racha son tonos claros
       pensados para el fondo casi negro por defecto — sobre blanco (plata/
       bronce en rankings de 2°/3° lugar, racha en logros.php) quedan entre
       ~2.6:1 y ~3.2:1. Estas versiones más oscuras cumplen WCAG AA. */
    --plata:         #475569;
    --bronce:        #92400e;
    --racha:         #c2410c;
    --text:          #1e0a38;
    --text-muted:    #6b5ea8;
    background: #f5f3ff;
    color: #1e0a38;
}
body.tema-claro ::-webkit-scrollbar-thumb { background: #c4b5fd; }
body.tema-claro input, body.tema-claro textarea, body.tema-claro select {
    background: #fff; border-color: var(--border); color: var(--text);
}

/* ── 6 Temas adicionales ────────────────────────────────────────── */
body.tema-midnight {
    --bg: #000000; --surface: #080808; --surface2: #111; --surface3: #1a1a1a;
    --border: rgba(0,229,217,.18); --primary: #00e5d9; --primary-hover: #00fff5;
    --accent: #ff00cc; --text: #f0fffe; --text-muted: #6cbfbc;
    background: #000; color: #f0fffe;
}
body.tema-rosa {
    --bg: #0d0010; --surface: #180016; --surface2: #220020; --surface3: #2e0028;
    --border: #5a0054; --primary: #f500b0; --primary-hover: #ff3cc0;
    --accent: #ff80d5; --text: #fff0fc; --text-muted: #cc77bb;
    background: #0d0010; color: #fff0fc;
}
body.tema-naranja {
    --bg: #0e0500; --surface: #1c0a00; --surface2: #281200; --surface3: #341b00;
    --border: #5a3000; --primary: #ea580c; --primary-hover: #f97316;
    --accent: #fbbf24; --text: #fff7ed; --text-muted: #c87940;
    background: #0e0500; color: #fff7ed;
}
body.tema-indigo {
    --bg: #05061a; --surface: #0c0e2e; --surface2: #111440; --surface3: #161a52;
    --border: #22287a; --primary: #818cf8; --primary-hover: #a5b4fc;
    --accent: #c4b5fd; --text: #eef2ff; --text-muted: #818cf8;
    background: #05061a; color: #eef2ff;
}
body.tema-galaxia {
    --bg: #030012; --surface: #0c0028; --surface2: #130040; --surface3: #190052;
    --border: #320078; --primary: #9333ea; --primary-hover: #a855f7;
    --accent: #f0abfc; --text: #fdf4ff; --text-muted: #d8b4fe;
    background: radial-gradient(ellipse at 15% 40%,rgba(147,51,234,.22) 0%,transparent 55%),
                radial-gradient(ellipse at 82% 15%,rgba(240,171,252,.12) 0%,transparent 45%),
                radial-gradient(ellipse at 50% 85%,rgba(88,28,135,.18) 0%,transparent 50%),
                #030012;
    background-attachment: fixed;
    color: #fdf4ff;
}
body.tema-ocean {
    --bg: #001014; --surface: #001820; --surface2: #00232d; --surface3: #002e3a;
    --border: #005263; --primary: #0891b2; --primary-hover: #06b6d4;
    --accent: #22d3ee; --text: #ecfeff; --text-muted: #67b9c6;
    background: #001014; color: #ecfeff;
}
body.tema-militar {
    --bg: #0c0f07; --surface: #161b0d; --surface2: #212912; --surface3: #2d3818;
    --border: #4a5726; --primary: #5c7a29; --primary-hover: #71933a;
    --accent: #c2703d; --text: #f0f0e0; --text-muted: #9ba572;
    background: #0c0f07; color: #f0f0e0;
}

/* ── Skins de interfaz ──────────────────────────────────────────── */

/* GLASS — frosted glass */
body.skin-glass {
    background-image: radial-gradient(ellipse at 20% 30%,
        color-mix(in srgb, var(--primary) 28%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 70%,
        color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 50%) !important;
    background-attachment: fixed;
}
body.skin-glass .barra-nav {
    background: color-mix(in srgb, var(--surface) 50%, transparent) !important;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
body.skin-glass .post-card,
body.skin-glass .stat-card,
body.skin-glass .top-cancion,
body.skin-glass .actividad-item,
body.skin-glass .card-premio,
body.skin-glass .tarjeta-auth,
body.skin-glass .tarjeta-form {
    background: color-mix(in srgb, var(--surface) 40%, transparent) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255,255,255,.1) !important;
}
body.skin-glass input, body.skin-glass textarea, body.skin-glass select {
    background: color-mix(in srgb, var(--surface2) 50%, transparent) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-color: rgba(255,255,255,.12) !important;
}

/* NEON — glow effects */
body.skin-neon .barra-nav {
    border-bottom: 1px solid var(--primary) !important;
    box-shadow: 0 1px 0 var(--primary), 0 2px 30px color-mix(in srgb, var(--primary) 35%, transparent);
}
body.skin-neon .logo-nav span {
    filter: drop-shadow(0 0 8px var(--accent));
}
body.skin-neon .boton,
body.skin-neon button.boton {
    box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 60%, transparent) !important;
}
body.skin-neon .boton:hover {
    box-shadow: 0 0 30px color-mix(in srgb, var(--primary) 80%, transparent),
                0 0 60px color-mix(in srgb, var(--primary) 30%, transparent) !important;
}
body.skin-neon .post-card,
body.skin-neon .stat-card,
body.skin-neon .tarjeta-form {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important;
}
body.skin-neon .post-card:hover,
body.skin-neon .stat-card:hover,
body.skin-neon .top-cancion:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 0 20px color-mix(in srgb, var(--primary) 25%, transparent) !important;
}
body.skin-neon input:focus, body.skin-neon textarea:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 50%, transparent),
                0 0 16px color-mix(in srgb, var(--primary) 30%, transparent) !important;
}
body.skin-neon .badge-vip {
    box-shadow: 0 0 12px var(--accent);
}
body.skin-neon .btn-like-post.gustado {
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* MINIMAL — flat & clean */
body.skin-minimal .barra-nav {
    border-bottom: 2px solid var(--text) !important;
    box-shadow: none !important;
    background: var(--bg) !important;
}
body.skin-minimal .post-card,
body.skin-minimal .stat-card,
body.skin-minimal .top-cancion,
body.skin-minimal .actividad-item,
body.skin-minimal .card-premio,
body.skin-minimal .tarjeta-auth,
body.skin-minimal .tarjeta-form {
    background: transparent !important;
    border: 1px solid var(--text-muted) !important;
    box-shadow: none !important;
}
body.skin-minimal .post-card:hover {
    border-color: var(--text) !important;
    box-shadow: none !important;
}
body.skin-minimal .boton, body.skin-minimal button.boton {
    background: transparent !important;
    border: 2px solid var(--primary) !important;
    color: var(--primary-hover) !important;
    box-shadow: none !important;
}
body.skin-minimal .boton:hover {
    background: var(--primary) !important;
    color: var(--bg) !important;
    box-shadow: none !important;
    transform: none !important;
}
body.skin-minimal button:not(.boton):not(.btn-like-post):not(.btn-comentar-post):not(.btn-share-post):not(.tema-card):not(.skin-card):not(.radio-card) {
    box-shadow: none !important;
}

/* ── Estilos de borde ───────────────────────────────────────────── */
body.radio-pill { --radius: 999px; }
body.radio-pill .barra-nav, body.radio-pill .post-card,
body.radio-pill .stat-card, body.radio-pill .tarjeta-auth,
body.radio-pill .tarjeta-form { border-radius: 24px !important; }
body.radio-pill input, body.radio-pill textarea, body.radio-pill select { border-radius: 14px !important; }
body.radio-pill .btn-like-post, body.radio-pill .btn-share-post,
body.radio-pill .btn-comentar-post { border-radius: 999px; }

body.radio-sharp { --radius: 0; }
body.radio-sharp .barra-nav, body.radio-sharp .post-card,
body.radio-sharp .stat-card, body.radio-sharp input,
body.radio-sharp textarea, body.radio-sharp select,
body.radio-sharp .tarjeta-auth, body.radio-sharp .tarjeta-form,
body.radio-sharp .badge-vip, body.radio-sharp .badge-nivel,
body.radio-sharp .boton,
body.radio-sharp button:not(.tema-card):not(.skin-card):not(.radio-card) { border-radius: 0 !important; }
/* Las tarjetas del panel de apariencia mantienen siempre 10px independientemente del radio activo */
body.radio-sharp .tema-card, body.radio-pill .tema-card,
body.radio-sharp .skin-card, body.radio-pill .skin-card,
body.radio-sharp .radio-card, body.radio-pill .radio-card { border-radius: 10px !important; }

/* ── Panel de apariencia (perfil.php) ───────────────────────────── */

/* Las tarjetas del panel de apariencia NUNCA heredan --radius para no volverse pills */
.tema-card, .skin-card, .radio-card { border-radius: 10px !important; }

.ap-panel  { display: flex; flex-direction: column; gap: 28px; }
.ap-sec-lbl {
    font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
    color: var(--text-muted); margin: 0 0 14px;
    display: flex; align-items: center; gap: 10px;
}
.ap-sec-lbl::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── Temas de color ── */
.temas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 7px;
}
.tema-card {
    display: flex; flex-direction: column; width: 100%;
    border: 2px solid transparent; cursor: pointer; overflow: hidden;
    background: var(--surface2); padding: 0; text-align: left;
    transition: transform .16s, border-color .16s, box-shadow .16s;
    position: relative;
}
.tema-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.4); }
.tema-card.activo {
    border-color: rgba(255,255,255,.85) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 8px 24px rgba(0,0,0,.4) !important;
}
.tc-grad {
    display: block; height: 54px; width: 100%; flex-shrink: 0; position: relative;
}
/* checkmark al centro del gradiente cuando activo */
.tema-card.activo .tc-grad::after {
    content: '✓';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 900; color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.tc-lbl {
    display: flex; align-items: center; gap: 4px;
    padding: 7px 8px 8px; font-size: 11px; font-weight: 700;
    color: var(--text); line-height: 1;
}
.tc-ico { font-size: 11px; flex-shrink: 0; }

/* Temas gateados por reputación — mismo criterio visual que insignias/
   álbumes bloqueados: gris + candado, sin ocultar que existen. */
.tema-card.bloqueado { opacity: .5; filter: grayscale(.6); }
.tema-card.bloqueado:hover { transform: none; box-shadow: none; }
.tc-umbral {
    display: block; padding: 0 8px 7px; margin-top: -4px;
    font-size: 10px; font-weight: 700; color: var(--gold);
}

/* ── Skins de interfaz ── */
.skins-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 560px) { .skins-grid { grid-template-columns: repeat(2,1fr); } }

.skin-card {
    border: 2px solid var(--border); cursor: pointer; background: var(--surface2);
    overflow: hidden; padding: 0;
    display: flex; flex-direction: column;
    transition: border-color .16s, transform .16s, box-shadow .16s;
}
.skin-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.skin-card.activo {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 1px var(--primary) !important;
}

/* mini preview visual para cada skin */
.sk-preview {
    height: 46px; width: 100%; position: relative;
    display: flex; align-items: center; padding: 0 10px; gap: 7px;
    background: var(--surface3); overflow: hidden; flex-shrink: 0;
}
.sk-bar { height: 7px; border-radius: 4px; background: var(--primary); flex: 1; opacity: .7; }
.sk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* glass: fondo traslúcido */
.skin-card[data-skin="glass"] .sk-preview {
    background: color-mix(in srgb, var(--primary) 18%, var(--surface3));
}
.skin-card[data-skin="glass"] .sk-preview::before {
    content: ''; position: absolute; inset: 0;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px); background: rgba(255,255,255,.06);
}
.skin-card[data-skin="glass"] .sk-bar { background: rgba(255,255,255,.45); border-radius: 4px; }

/* neon: glow fuerte */
.skin-card[data-skin="neon"] .sk-preview { background: #000; }
.skin-card[data-skin="neon"] .sk-bar {
    background: var(--primary); opacity: 1;
    box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
}
.skin-card[data-skin="neon"] .sk-dot {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent);
}

/* minimal: bordes sin relleno */
.skin-card[data-skin="minimal"] .sk-preview { background: var(--bg); }
.skin-card[data-skin="minimal"] .sk-bar { background: transparent; border: 1.5px solid var(--primary); opacity: 1; }
.skin-card[data-skin="minimal"] .sk-dot { background: transparent; border: 1.5px solid var(--accent); }

.sk-info { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 3px; }
.sk-nombre { font-size: 13px; font-weight: 800; color: var(--text); }
.sk-desc   { font-size: 11px; color: var(--text-muted); line-height: 1.35; }

/* ── Bordes ── */
.radio-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-card {
    flex: 1; min-width: 150px;
    border: 2px solid var(--border); cursor: pointer; background: var(--surface2);
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px; font-size: 13px; font-weight: 600; color: var(--text);
    transition: border-color .14s, background .14s;
}
.radio-card:hover  { border-color: var(--primary); background: var(--surface3); }
.radio-card.activo {
    border-color: var(--primary) !important; color: var(--primary-hover);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface3)) !important;
    box-shadow: 0 0 0 1px var(--primary);
}
/* cuadrito visual mostrando el tipo de borde */
.r-box { width: 26px; height: 26px; flex-shrink: 0; border: 2px solid var(--primary); }
.radio-card[data-radio="redondeado"] .r-box { border-radius: 8px; }
.radio-card[data-radio="pill"]       .r-box { border-radius: 999px; }
.radio-card[data-radio="sharp"]      .r-box { border-radius: 0; }
.r-info { display: flex; flex-direction: column; gap: 2px; }
.r-nombre { font-size: 13px; font-weight: 700; }
.r-desc   { font-size: 11px; color: var(--text-muted); font-weight: 400; }

/* ── Reputación ─────────────────────────────────────────────────── */
.badge-nivel {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
    font-family: var(--font-titulo);
}
.nivel-oyente  { background: rgba(167,139,202,.15); color: #a78bca; }
.nivel-fan     { background: rgba(236,72,153,.15);  color: #ec4899; }
.nivel-superfan{ background: rgba(124,58,237,.18);  color: #8b5cf6; }
.nivel-leyenda { background: rgba(245,158,11,.2);   color: var(--gold); }

.rep-barra-wrap { background: var(--surface2); border-radius: 999px; height: 6px; overflow: hidden; }
.rep-barra-fill { height: 100%; border-radius: 999px;
                  background: linear-gradient(90deg, var(--primary), var(--accent));
                  transition: width .5s ease; }

/* ── Avatar de perfil ───────────────────────────────────────────── */
.avatar-perfil {
    width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover;
    border: 3px solid var(--primary);
}
.avatar-perfil-inicial {
    width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-titulo); font-size: 32px; font-weight: 800; color: #fff;
    border: 3px solid var(--primary);
}
.btn-cambiar-foto {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    cursor: pointer; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--border); background: transparent;
    transition: all .14s; font-family: var(--font-cuerpo);
    letter-spacing: .04em; text-transform: uppercase;
}
.btn-cambiar-foto:hover { border-color: var(--primary); color: var(--primary-hover);
                          background: transparent; transform: none; box-shadow: none; }

/* ── Notificación de premio ─────────────────────────────────────── */
.card-premio {
    display: flex; gap: 14px; align-items: flex-start;
    background: linear-gradient(135deg, rgba(245,158,11,.1) 0%, rgba(236,72,153,.06) 100%);
    border: 1px solid rgba(245,158,11,.35);
    border-radius: 14px; padding: 18px 20px;
    position: relative;
}
.card-premio-icono { font-size: 32px; line-height: 1; flex-shrink: 0; }
.card-premio-titulo { font-family: var(--font-titulo); font-size: 15px; font-weight: 800;
                      color: var(--gold); margin: 0 0 4px; }
.card-premio-msg { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.6; }
.btn-cerrar-premio {
    position: absolute; top: 12px; right: 12px;
    background: transparent; border: none; color: var(--text-muted);
    font-size: 18px; cursor: pointer; padding: 0; line-height: 1;
    transition: color .14s;
}
.btn-cerrar-premio:hover { color: var(--text); transform: none; box-shadow: none; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-cuerpo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Red de seguridad: ningún elemento individual debería forzar scroll
       horizontal, pero si algo se escapa (imagen sin max-width, texto largo
       sin wrap, etc.) esto evita que arrastre toda la página de lado.
       (Nota: NO usar max-width:100vw aquí — en algunos navegadores 100vw
       incluye el ancho del scrollbar y puede causar el desborde que se
       quiere evitar; overflow-x:hidden solo ya resuelve el caso real.) */
    overflow-x: hidden;
}
img, video, canvas, svg { max-width: 100%; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

.oculto { display: none !important; }

h1, h2, h3, h4 { font-family: var(--font-titulo); }

a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--primary-hover); text-decoration: none; }

/* ─── Buttons ───────────────────────────────────────────────────── */
button, .boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--primary);
    color: var(--text);
    border: none;
    border-radius: 999px;
    padding: 11px 24px;
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .03em;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s, transform .12s, box-shadow .18s;
}
button:hover, .boton:hover {
    background: var(--primary-hover);
    color: var(--text);
    transform: scale(1.04);
    box-shadow: 0 4px 22px rgba(124,58,237,.45);
    text-decoration: none;
}
button:active { transform: scale(.97); }
button:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ─── Inputs ────────────────────────────────────────────────────── */
input, textarea, select {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 11px 14px;
    color: var(--text);
    font-family: var(--font-cuerpo);
    font-size: 15px;
    transition: border-color .18s, box-shadow .18s;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124,58,237,.2);
}
textarea { resize: vertical; min-height: 80px; }

label {
    display: block;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
label input, label textarea, label select { margin-top: 6px; }

/* ─── Auth pages ─────────────────────────────────────────────────── */
.pagina-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(ellipse at 65% 25%, rgba(124,58,237,.2)  0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(236,72,153,.12) 0%, transparent 55%);
}
.tarjeta-auth {
    background: rgba(22,15,43,.92);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 44px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(124,58,237,.1);
}
.tarjeta-auth h1 {
    margin: 0 0 6px;
    font-size: 28px;
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.subtitulo { color: var(--text-muted); margin: 0 0 28px; font-size: 14px; }
.tarjeta-auth form button { width: 100%; margin-top: 8px; }

.mensaje-error {
    background: rgba(248,113,113,.08);
    border: 1px solid rgba(248,113,113,.35);
    color: var(--danger);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 20px;
}
.enlace-secundario { text-align: center; font-size: 14px; color: var(--text-muted); margin-top: 24px; }

/* ─── Badge VIP ──────────────────────────────────────────────────── */
.badge-vip {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-family: var(--font-titulo);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
}

/* ─── Layout ─────────────────────────────────────────────────────── */
.contenedor {
    max-width: 1140px;
    margin: 0 auto;
    padding: 36px 28px 140px;
}
.titulo-pagina { font-size: 30px; font-weight: 800; margin: 0 0 32px; letter-spacing: -.02em; }
.estado-vacio { color: var(--text-muted); text-align: center; padding: 80px 0; font-size: 15px; }

/* ─── Nav ────────────────────────────────────────────────────────── */
.barra-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    height: 64px;
    border-bottom: 1px solid rgba(46,35,86,.5);
    position: sticky;
    top: 0;
    background: rgba(10,4,21,.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 50;
}
.logo-nav {
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 19px;
    color: var(--text);
    letter-spacing: -.02em;
    text-decoration: none;
}
.logo-nav:hover { color: var(--text); }
.logo-nav span { color: var(--accent); }
.acciones-nav { display: flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 600; }
.acciones-nav a { color: var(--text-muted); }
.acciones-nav a:hover { color: var(--text); }
.acciones-nav a.boton { color: var(--text); padding: 8px 18px; font-size: 13px; }
.saludo-nav { color: var(--text); display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }

/* ─── Hero — Home ────────────────────────────────────────────────── */
.hero-home {
    padding: 72px 0 60px;
    position: relative;
}
.hero-home::before {
    content: '';
    position: absolute;
    top: -36px; left: -28px; right: -28px; bottom: 0;
    background:
        radial-gradient(ellipse at 22% 65%, rgba(124,58,237,.24) 0%, transparent 60%),
        radial-gradient(ellipse at 78% 28%, rgba(236,72,153,.14) 0%, transparent 52%);
    pointer-events: none;
}
.hero-home h1 {
    position: relative;
    font-size: clamp(42px, 7vw, 76px);
    font-weight: 800;
    line-height: 1.04;
    margin: 0 0 16px;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, #ffffff 20%, #c4b5fd 55%, var(--accent) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-home p {
    position: relative;
    font-size: 17px;
    color: var(--text-muted);
    margin: 0;
    max-width: 400px;
    font-weight: 500;
    line-height: 1.5;
}
.seccion-albumes { margin-top: 56px; }
.seccion-titulo {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 20px;
    letter-spacing: -.01em;
    color: var(--text);
}

/* ─── Album grid ─────────────────────────────────────────────────── */
.grid-albumes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
    gap: 20px;
}
.tarjeta-album {
    color: var(--text);
    display: block;
    cursor: pointer;
    transition: transform .22s ease;
    text-decoration: none;
}
.tarjeta-album:hover { transform: translateY(-5px); color: var(--text); }
.tarjeta-album h3 {
    margin: 13px 2px 3px;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -.01em;
}
.tarjeta-album .meta-album { font-size: 12px; color: var(--text-muted); margin: 0 2px; }

.portada-album {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface2);
    box-shadow: 0 8px 26px rgba(0,0,0,.45);
    transition: box-shadow .22s ease;
}
.tarjeta-album:hover .portada-album { box-shadow: 0 18px 44px rgba(0,0,0,.68); }
.portada-album img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .32s ease;
}
.tarjeta-album:hover .portada-album img { transform: scale(1.06); }
.portada-album::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.3);
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
}
.tarjeta-album:hover .portada-album::after { opacity: 1; }

.portada-vacia {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--surface2) 0%, var(--surface3) 55%, rgba(124,58,237,.25) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(167,139,202,.35);
    font-size: 46px;
}

/* Hover play button on cards */
.btn-play-card {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 46px;
    height: 46px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    padding-left: 3px; /* optical center */
    z-index: 3;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease;
    box-shadow: 0 8px 26px rgba(236,72,153,.6);
    pointer-events: none;
}
.tarjeta-album:hover .btn-play-card { opacity: 1; transform: translateY(0); }

.badge-flotante { position: absolute; top: 8px; right: 8px; z-index: 3; }

/* ─── Tarjeta de álbum bloqueada por puntos (grid principal) ───────── */
.portada-bloqueada-pts img,
img.portada-bloqueada-pts { filter: grayscale(.55) blur(2px) brightness(.45); }
.overlay-candado-grid {
    position: absolute; inset: 0; z-index: 4;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    background: linear-gradient(180deg, rgba(10,4,21,.15), rgba(10,4,21,.55));
}
.overlay-candado-texto {
    font-family: var(--font-titulo);
    font-size: 11px; font-weight: 800;
    color: #fff;
    background: rgba(0,0,0,.5);
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .02em;
}

/* ─── Album page — Hero ──────────────────────────────────────────── */
.hero-album {
    position: relative;
    padding: 56px 32px 44px;
    margin: -36px -28px 40px;
    overflow: hidden;
}
.hero-album-fondo {
    position: absolute;
    inset: 0;
    /* Respaldo sólido para navegadores sin color-mix() (Safari < 16.4, etc.):
       sin esto la declaración completa se descarta y el fondo queda transparente. */
    background: linear-gradient(135deg, var(--surface2) 0%, var(--album-accent, var(--primary)) 50%, var(--album-accent, var(--accent)) 100%);
    background: linear-gradient(135deg, var(--surface2) 0%, color-mix(in srgb, var(--album-accent, var(--primary)) 55%, transparent) 50%, color-mix(in srgb, var(--album-accent, var(--accent)) 30%, transparent) 100%);
    background-size: cover;
    background-position: center;
    filter: blur(90px) saturate(2);
    opacity: .55;
    transform: scale(1.15);
    transition: background 1s ease;
}
.hero-album-fondo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10,4,21,.35) 0%, var(--bg) 100%);
}
.hero-album-contenido {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.portada-grande {
    width: 218px;
    height: 218px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 68px rgba(0,0,0,.78);
}
.portada-grande img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.portada-grande .portada-vacia { border-radius: 0; }
.info-album { flex: 1; min-width: 200px; }
.tipo-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.info-album h1 {
    margin: 0 0 10px;
    font-size: clamp(28px, 5vw, 54px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.03em;
}
.descripcion-album {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0 0 24px;
    max-width: 480px;
    line-height: 1.6;
}
.acciones-album {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.boton-play-grande {
    width: 54px;
    height: 54px;
    background: var(--album-accent, var(--accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding-left: 3px; /* optical center */
    color: #fff;
    border: none;
    cursor: pointer;
    /* Respaldo sin color-mix() para Safari < 16.4 y equivalentes: sombra fija
       en vez de perder la declaración completa y quedar sin sombra. */
    box-shadow: 0 8px 30px rgba(124,58,237,.4);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--album-accent, var(--accent)) 55%, transparent);
    flex-shrink: 0;
    transition: transform .15s, box-shadow .15s, background 1s ease;
    letter-spacing: 0;
}
.boton-play-grande:hover {
    background: var(--album-accent, var(--accent));
    transform: scale(1.1);
    box-shadow: 0 14px 42px rgba(124,58,237,.55);
    box-shadow: 0 14px 42px color-mix(in srgb, var(--album-accent, var(--accent)) 70%, transparent);
    color: #fff;
}
.boton-secundario {
    background: transparent;
    border: 1px solid rgba(245,243,255,.28);
    color: var(--text);
    padding: 10px 22px;
    font-size: 13px;
    letter-spacing: .03em;
}
.boton-secundario:hover {
    background: rgba(245,243,255,.08);
    border-color: rgba(245,243,255,.55);
    color: var(--text);
    box-shadow: none;
    transform: none;
}

/* ─── Track list ─────────────────────────────────────────────────── */
.cabecera-lista {
    display: grid;
    grid-template-columns: 48px 1fr 80px 80px auto;
    gap: 10px;
    padding: 4px 12px 10px;
    border-bottom: 1px solid rgba(46,35,86,.65);
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.lista-canciones { display: flex; flex-direction: column; gap: 2px; }

.fila-cancion {
    display: grid;
    grid-template-columns: 48px 1fr 80px 80px auto;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .14s ease;
    user-select: none;
}
.fila-cancion:hover { background: rgba(124,58,237,.13); }
.fila-cancion.fila-activa { background: rgba(124,58,237,.22); }
.fila-cancion.fila-activa .titulo-cancion { color: var(--primary-hover); }
.fila-cancion.fila-activa .numero-pista { color: var(--primary-hover); }

.col-num {
    display: flex;
    align-items: center;
    justify-content: center;
}
.numero-pista {
    font-size: 14px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 20px;
    text-align: center;
    line-height: 1;
}
.boton-reproducir {
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none;
    color: var(--text) !important;
    font-size: 14px;
    padding: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 0;
    box-shadow: none !important;
    transform: none !important;
    letter-spacing: 0;
    padding-left: 2px; /* optical center */
}
.fila-cancion:hover .numero-pista,
.fila-cancion.fila-activa .numero-pista { display: none; }
.fila-cancion:hover .boton-reproducir,
.fila-cancion.fila-activa .boton-reproducir { display: flex; }

/* Dispositivos táctiles (sin hover): mostrar botón siempre */
@media (hover: none) {
    .boton-reproducir { display: flex; }
    .numero-pista     { display: none; }
    .fila-cancion     { cursor: pointer; }
}

/* ── Objetivos de toque — dedo, no cursor de mouse ──────────────────
   pointer:coarse cubre táctil real (celular Y tablet), a diferencia de
   los @media de ancho que solo distinguen tamaño de pantalla. Los
   íconos de la lista de canciones median ~20px, muy por debajo del
   mínimo recomendado (~40-44px) para tocar sin fallar. */
@media (pointer: coarse) {
    .boton-reproducir { width: 42px; height: 42px; font-size: 16px; }
    .boton-accion-sm {
        padding: 8px; font-size: 15px;
        min-width: 42px; min-height: 42px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .boton-fav   { padding: 8px; min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
    .boton-like-sm { padding: 8px 12px; min-height: 42px; }
    .btn-mute, .btn-speed, .btn-campana, .btn-ham, .btn-buscar-movil, .btn-cola-toggle {
        min-width: 42px; min-height: 42px;
    }
    /* Reproductor global: visible en TODAS las páginas — el botón grande de
       play/pausa y los controles chicos (anterior/siguiente/shuffle/repetir)
       quedaron afuera del primer pase de esta regla. */
    .reproductor-barra #reproductor-play-pausa { width: 42px; height: 42px; }
    .reproductor-barra button { min-width: 42px; min-height: 42px; }
    .modal-desbloqueo-cerrar { width: 42px; height: 42px; }
    .btn-cerrar-premio { min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-reportar-com-video { min-width: 42px; min-height: 42px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; }
    /* Cualquier <input>/<select>/<textarea> con font-size menor a 16px hace
       que iOS Safari haga zoom automático al enfocarlo — molesto y desalinea
       el layout hasta que el usuario hace zoom-out a mano. Los selectores
       más específicos de abajo lo repiten porque le ganan a este por
       especificidad (una clase siempre le gana a un selector de tag). */
    input, select, textarea { font-size: max(16px, 1em); }
}

.titulo-cancion {
    font-size: 15px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.duracion-cancion {
    color: var(--text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.acciones-cancion {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
}
.enlace-video, .enlace-descarga {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 3px 10px;
    border: 1px solid rgba(46,35,86,.9);
    border-radius: 999px;
    transition: color .14s, border-color .14s;
    white-space: nowrap;
}
.enlace-video:hover, .enlace-descarga:hover {
    color: var(--text);
    border-color: rgba(167,139,202,.5);
}

/* ─── VIP lock ───────────────────────────────────────────────────── */
.zona-vip-bloqueada {
    background: linear-gradient(135deg, rgba(124,58,237,.13) 0%, rgba(236,72,153,.07) 100%);
    border: 1px solid rgba(124,58,237,.3);
    border-radius: 22px;
    padding: 72px 32px;
    text-align: center;
}
.zona-vip-bloqueada .icono-lock { font-size: 52px; margin-bottom: 18px; display: block; }
.zona-vip-bloqueada h2 {
    margin: 0 0 12px;
    font-size: 26px;
    background: linear-gradient(135deg, var(--primary-hover), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.zona-vip-bloqueada p { color: var(--text-muted); margin: 0 0 28px; font-size: 15px; }

/* ─── Candado mágico — desbloqueo de álbumes por puntos ────────────── */
.zona-puntos-bloqueada {
    background: linear-gradient(135deg, rgba(194,65,12,.10) 0%, rgba(124,58,237,.10) 100%);
    border: 1px solid rgba(194,65,12,.28);
    border-radius: 22px;
    padding: 64px 32px;
    text-align: center;
}
.zona-puntos-bloqueada h2 {
    margin: 0 0 12px;
    font-size: 26px;
    background: linear-gradient(135deg, #f59e0b, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.zona-puntos-bloqueada > p { color: var(--text-muted); margin: 0 0 30px; font-size: 15px; max-width: 460px; margin-left: auto; margin-right: auto; }

.candado-magico {
    position: relative;
    width: 140px; height: 140px;
    margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center;
}
.candado-magico--chica { width: 64px; height: 64px; margin-bottom: 4px; }

.candado-glow {
    position: absolute; inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,.5), rgba(124,58,237,.3) 60%, transparent 75%);
    filter: blur(10px);
    animation: candadoGlowPulso 2.6s ease-in-out infinite;
}
.candado-cuerpo {
    position: relative;
    animation: candadoFlote 3.4s ease-in-out infinite;
}
.candado-grillete {
    width: 46px; height: 34px;
    border: 7px solid #cbb26a;
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    margin: 0 auto -6px;
    box-shadow: 0 0 12px rgba(245,158,11,.4);
}
.candado-magico--chica .candado-grillete { width: 20px; height: 15px; border-width: 3px; margin-bottom: -3px; }
.candado-caja {
    font-size: 56px;
    line-height: 1;
    filter: drop-shadow(0 6px 18px rgba(245,158,11,.35));
}
.candado-magico--chica .candado-caja { font-size: 24px; }

.chispa {
    position: absolute;
    font-size: 14px;
    color: var(--gold);
    opacity: 0;
    animation: chispaFloat 2.4s ease-in infinite;
}
.chispa-1 { top: 8%;  left: 12%; animation-delay: 0s; }
.chispa-2 { top: 16%; right: 10%; animation-delay: .6s; font-size: 10px; }
.chispa-3 { bottom: 18%; left: 8%; animation-delay: 1.2s; font-size: 11px; }
.chispa-4 { bottom: 10%; right: 14%; animation-delay: 1.8s; }

@keyframes candadoFlote {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-7px) rotate(2deg); }
}
@keyframes candadoGlowPulso {
    0%, 100% { opacity: .45; transform: scale(1); }
    50%      { opacity: .85; transform: scale(1.18); }
}
@keyframes chispaFloat {
    0%   { transform: translateY(6px) scale(.3); opacity: 0; }
    30%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { transform: translateY(-34px) scale(.4); opacity: 0; }
}

.progreso-puntos-wrap { max-width: 380px; margin: 0 auto 26px; }
.progreso-puntos-barra {
    height: 10px;
    border-radius: 999px;
    background: var(--surface2);
    overflow: hidden;
    border: 1px solid var(--border);
}
.progreso-puntos-relleno {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, var(--accent), var(--primary-hover));
    background-size: 200% 100%;
    animation: progresoShimmer 2.2s linear infinite;
    transition: width .6s cubic-bezier(.4,0,.2,1);
}
@keyframes progresoShimmer {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
.progreso-puntos-texto { margin-top: 10px; font-size: 13.5px; color: var(--text-muted); }
.progreso-puntos-texto strong { color: var(--text); font-size: 15px; }
.progreso-puntos-falta { display: block; margin-top: 2px; font-size: 12px; color: var(--gold); font-weight: 600; }
.progreso-puntos-cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.badge-puntos { background: linear-gradient(135deg, #f59e0b, #ea580c) !important; }

/* ─── Modal "álbum desbloqueado" (toast grande, estilo videojuego) ─── */
.modal-desbloqueo-album {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(5,2,12,0);
    transition: background .4s ease, backdrop-filter .4s ease;
    pointer-events: none;
}
.modal-desbloqueo-album.visible {
    background: rgba(5,2,12,.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
}
.modal-desbloqueo-card {
    position: relative;
    background: linear-gradient(160deg, var(--surface), var(--surface2));
    border: 1px solid rgba(245,158,11,.4);
    border-radius: 24px;
    padding: 44px 36px 36px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(245,158,11,.15), 0 0 60px rgba(245,158,11,.18);
    transform: scale(.82) translateY(24px);
    opacity: 0;
    transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
}
.modal-desbloqueo-album.visible .modal-desbloqueo-card { transform: scale(1) translateY(0); opacity: 1; }
.modal-desbloqueo-cerrar {
    position: absolute; top: 14px; right: 14px;
    width: 28px; height: 28px; border-radius: 50%;
    border: none; background: var(--surface2); color: var(--text-muted);
    cursor: pointer; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.modal-desbloqueo-cerrar:hover { background: var(--surface3); color: var(--text); }
.modal-desbloqueo-eyebrow {
    font-family: var(--font-titulo);
    font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold);
    margin: 14px 0 8px;
}
.modal-desbloqueo-card h3 {
    font-family: var(--font-titulo);
    font-size: 22px; font-weight: 800;
    margin: 0 0 24px;
}
.modal-nivel-card h3 { margin-bottom: 12px; }
.modal-nivel-desc { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; margin: 0; }

/* ── Modal "subiste de nivel" — medalla coloreada por --nivel-color ─── */
.modal-nivel-card {
    border-color: color-mix(in srgb, var(--nivel-color, #8b5cf6) 40%, transparent);
    box-shadow: 0 24px 70px rgba(0,0,0,.6),
                0 0 0 1px color-mix(in srgb, var(--nivel-color, #8b5cf6) 15%, transparent),
                0 0 60px color-mix(in srgb, var(--nivel-color, #8b5cf6) 20%, transparent);
}
.medalla-nivel {
    position: relative;
    width: 110px; height: 110px;
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
}
.medalla-rayos {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        var(--nivel-color, #8b5cf6) 0deg, transparent 20deg,
        transparent 40deg, var(--nivel-color, #8b5cf6) 60deg,
        transparent 80deg, transparent 100deg, var(--nivel-color, #8b5cf6) 120deg,
        transparent 140deg, transparent 160deg, var(--nivel-color, #8b5cf6) 180deg,
        transparent 200deg, transparent 220deg, var(--nivel-color, #8b5cf6) 240deg,
        transparent 260deg, transparent 280deg, var(--nivel-color, #8b5cf6) 300deg,
        transparent 320deg, transparent 340deg, var(--nivel-color, #8b5cf6) 360deg
    );
    opacity: .35;
    filter: blur(2px);
    animation: medallaGiro 8s linear infinite;
}
.medalla-circulo {
    position: relative;
    width: 78px; height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        color-mix(in srgb, var(--nivel-color, #8b5cf6) 55%, white 25%),
        var(--nivel-color, #8b5cf6) 65%);
    display: flex; align-items: center; justify-content: center;
    font-size: 38px;
    box-shadow: 0 0 36px color-mix(in srgb, var(--nivel-color, #8b5cf6) 55%, transparent),
                inset 0 2px 6px rgba(255,255,255,.4),
                inset 0 -6px 10px rgba(0,0,0,.25);
    animation: medallaPop .7s cubic-bezier(.34,1.56,.64,1);
}
@keyframes medallaGiro { to { transform: rotate(360deg); } }
@keyframes medallaPop {
    0%   { transform: scale(0) rotate(-25deg); }
    70%  { transform: scale(1.12) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.candado-rompiendo .candado-cuerpo { animation: candadoRomper 1s ease-out; }
.candado-rompiendo .candado-glow   { animation: candadoGlowPulso 1.4s ease-in-out infinite, candadoBurst .8s ease-out; }
@keyframes candadoRomper {
    0%   { transform: rotate(0deg) scale(.5); }
    40%  { transform: rotate(-18deg) scale(1.25); }
    65%  { transform: rotate(12deg) scale(1.1); }
    100% { transform: rotate(-2deg) scale(1); }
}
@keyframes candadoBurst {
    0%   { opacity: 0; transform: scale(.3); }
    50%  { opacity: 1; transform: scale(1.5); }
    100% { opacity: .45; transform: scale(1); }
}
@media (max-width: 480px) { .modal-desbloqueo-card { padding: 36px 24px 28px; } }

/* ── Aviso toast — reemplaza alert() nativo (window.avisar) ────────── */
.aviso-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 9995;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(420px, calc(100vw - 32px));
    background: rgba(18, 10, 35, 0.97);
    border: 1px solid var(--border);
    border-left: 3px solid var(--danger);
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    cursor: pointer;
    transform: translate(-50%, -16px);
    opacity: 0;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.aviso-toast-info { border-left-color: var(--primary-hover); }
.aviso-toast-show { transform: translate(-50%, 0); opacity: 1; }
.aviso-toast-icono { font-size: 17px; flex-shrink: 0; }
.aviso-toast-texto { line-height: 1.4; }
@media (max-width: 480px) {
    .aviso-toast { top: 10px; padding: 11px 14px; font-size: 12.5px; }
}

/* ── Modal de confirmación — reemplaza confirm() nativo (window.confirmarAccion) ── */
.modal-confirmacion {
    position: fixed; inset: 0; z-index: 9996;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(5,2,12,0);
    transition: background .3s ease, backdrop-filter .3s ease;
    pointer-events: none;
}
.modal-confirmacion.visible {
    background: rgba(5,2,12,.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
}
.modal-confirmacion-card {
    background: linear-gradient(160deg, var(--surface), var(--surface2));
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 26px 22px;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 24px 70px rgba(0,0,0,.6);
    transform: scale(.9) translateY(16px);
    opacity: 0;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}
.modal-confirmacion.visible .modal-confirmacion-card { transform: scale(1) translateY(0); opacity: 1; }
.modal-confirmacion-texto {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    margin: 0 0 22px;
    text-align: center;
    white-space: pre-line;
}
.modal-confirmacion-botones { display: flex; gap: 10px; justify-content: center; }
.modal-confirmacion-botones button {
    flex: 1;
    padding: 11px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-cuerpo);
    cursor: pointer;
    border: 1px solid var(--border);
    transition: all .15s;
    min-height: 44px;
}
.modal-confirmacion .boton-cancelar { background: var(--surface2); color: var(--text); }
.modal-confirmacion .boton-cancelar:hover { background: var(--border); }
.modal-confirmacion .boton-confirmar { background: var(--primary); border-color: var(--primary); color: #fff; }
.modal-confirmacion .boton-confirmar:hover { background: var(--primary-hover); border-color: var(--primary-hover); transform: none; box-shadow: none; }
.modal-confirmacion .boton-confirmar.peligroso { background: var(--danger); border-color: var(--danger); color: #2a0a0a; }
.modal-confirmacion .boton-confirmar.peligroso:hover { background: #fca5a5; border-color: #fca5a5; }
@media (max-width: 480px) { .modal-confirmacion-card { padding: 22px 18px 16px; } }

@media (prefers-reduced-motion: reduce) {
    .aviso-toast { transition: opacity .2s ease !important; }
    .modal-confirmacion-card { transition: opacity .2s ease !important; }
    .candado-cuerpo, .candado-glow, .chispa, .progreso-puntos-relleno { animation: none !important; }
    .candado-rompiendo .candado-cuerpo, .candado-rompiendo .candado-glow { animation: none !important; }
    .medalla-rayos, .medalla-circulo { animation: none !important; }
    .modal-desbloqueo-card { transition: opacity .3s ease !important; }
}

/* ─── Player bar ─────────────────────────────────────────────────── */
.reproductor-barra {
    position: fixed;
    /* Estado de reposo (antes de reproducir cualquier canción — .reproductor-visible
       recién se agrega en reproducirIndice()). -90px alcanzaba para la altura de
       escritorio (80px) pero no para la de mobile (~146px, por el padding extra +
       env(safe-area-inset-bottom) del media query de abajo con height:auto) —
       quedaban ~56px asomando en CUALQUIER página del sitio para cualquier
       visitante en mobile, incluso antes de tocar play. -100vh la saca del todo. */
    bottom: -100vh;
    left: 0; right: 0;
    /* height + padding con env(safe-area-inset-*): en iPhone con barra de
       gestos, el alto crece para reservar ese espacio (los controles quedan
       centrados arriba de ella) y el padding horizontal respeta el notch en
       orientación horizontal. max() evita perder el padding normal en
       dispositivos sin safe-area (donde env() devuelve 0). */
    height: 80px;
    height: calc(80px + env(safe-area-inset-bottom, 0px));
    background: var(--surface2);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 0 28px;
    padding-left: max(28px, env(safe-area-inset-left, 0px));
    padding-right: max(28px, env(safe-area-inset-right, 0px));
    transition: bottom .32s cubic-bezier(.4,0,.2,1);
    z-index: 100;
}
.reproductor-barra.reproductor-visible { bottom: 0; }

/* En /videos.php la barra tapa los botones de like/comentar del feed y
   compite con el audio del video — se fuerza oculta ahí (nav-ajax.js la
   controla en cada navegación). !important porque tiene que ganarle a
   .reproductor-visible aunque ya hubiera una canción sonando de antes.
   -90px alcanzaba para la altura de escritorio (80px) pero NO para la de
   mobile (146px, por el padding extra + safe-area-inset-bottom del media
   query de abajo) — quedaban ~56px de la barra asomando sobre el feed de
   video, tapando like/comentar/guardar. -100vh la saca por completo del
   viewport sin importar cuánto mida en ningún breakpoint presente o futuro. */
.reproductor-barra.oculto-en-videos { bottom: -100vh !important; }

/* ── Adsterra Social Bar offset ─────────────────────────────────── */
/* Cuando la Social Bar de Adsterra está activa (body class ads-social-bar-on),
   el reproductor sube automáticamente para no quedar tapado por la barra. */
body.ads-social-bar-on .reproductor-barra.reproductor-visible { bottom: 52px; }

/* ── Zonas de publicidad Adsterra ────────────────────────────────── */
.ads-zona {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-height: 0;
}
/* Zona Top: entre hero y contenido — margen generoso para que no parezca pegada */
.ads-zona-top {
    margin: 16px 0 24px;
    border-radius: 10px;
    overflow: hidden;
}
/* Zona Feed: dentro del grid de álbumes, ocupa todo el ancho de la fila */
.ads-feed-slot {
    grid-column: 1 / -1;   /* span completo del grid */
    width: 100%;
}
.ads-zona-feed {
    margin: 8px 0;
    border-radius: 10px;
    overflow: hidden;
}
/* Zona Álbum: entre info del álbum y tracklist — separador visual */
.ads-zona-album {
    margin: 20px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
}

/* Glass skin aplica al player también */
body.skin-glass .reproductor-barra {
    background: color-mix(in srgb, var(--surface2) 55%, transparent);
    border-top-color: rgba(255,255,255,.1);
}
/* Neon skin */
body.skin-neon .reproductor-barra {
    border-top: 1px solid var(--primary);
    box-shadow: 0 -2px 0 var(--primary), 0 -8px 40px color-mix(in srgb, var(--primary) 25%, transparent);
}

.reproductor-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.reproductor-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: var(--surface3);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 22px;
}
.reproductor-texto { min-width: 0; }
.reproductor-titulo {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.reproductor-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.reproductor-error {
    font-size: 11px; color: var(--danger, #ef4444); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.reproductor-controles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.reproductor-botones {
    display: flex;
    align-items: center;
    gap: 2px;
}
.reproductor-barra button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    padding: 6px 9px;
    cursor: pointer;
    transition: color .14s;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    letter-spacing: 0;
}
.reproductor-barra button:hover {
    color: var(--text);
    background: transparent;
    transform: none;
    box-shadow: none;
}
.reproductor-barra #reproductor-play-pausa {
    width: 34px;
    height: 34px;
    background: var(--text);
    color: var(--bg);
    border-radius: 50%;
    font-size: 13px;
    padding: 0;
    padding-left: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .14s;
}
.reproductor-barra #reproductor-play-pausa:hover {
    background: var(--text);
    color: var(--bg);
    transform: scale(1.1);
    box-shadow: none;
}

.reproductor-progreso-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 320px;
}
.reproductor-progreso-fila span {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 30px;
}
.reproductor-barra input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--surface3);
    border-radius: 2px;
    border: none;
    padding: 0;
    width: auto;
    cursor: pointer;
    accent-color: var(--primary-hover);
    transition: height .1s;
}
.reproductor-barra input[type="range"]:hover { height: 6px; }
/* Thumb explícito — sin esto, appearance:none + accent-color sin respaldo
   deja el slider de volumen sin manija visible/arrastrable en algunos
   navegadores. Lo pisa la regla más específica de .progreso-waveform-wrap
   para la barra de progreso (que sí quiere un thumb invisible). */
.reproductor-barra input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--primary-hover);
    cursor: pointer;
    margin-top: 0;
}
.reproductor-barra input[type="range"]::-moz-range-thumb {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--primary-hover);
    border: none;
    cursor: pointer;
}
.reproductor-derecha { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }

/* ── Waveform animada (reemplaza visualmente la barra simple) ─────── */
.progreso-waveform-wrap {
    position: relative;
    flex: 1;
    height: 28px;
    display: flex;
    align-items: center;
}
#reproductor-waveform {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* los clics pasan al <input range> de abajo */
}
.progreso-waveform-wrap input[type="range"] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: transparent;
    margin: 0;
}
.progreso-waveform-wrap input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.progreso-waveform-wrap input[type="range"]::-moz-range-track { background: transparent; height: 100%; }
.progreso-waveform-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 2px; height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
}
.progreso-waveform-wrap input[type="range"]::-moz-range-thumb {
    width: 2px; height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
}
.progreso-waveform-wrap input[type="range"]:hover { height: 100%; }

/* ─── Sponsors / AdSense ─────────────────────────────────────────── */
.zona-patrocinadores:empty, .zona-adsense:empty { display: none; }
.zona-patrocinadores { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 28px; }
.patrocinador-slot { display: block; border-radius: 10px; overflow: hidden; transition: opacity .18s; }
.patrocinador-slot:hover { opacity: .88; }
.patrocinador-slot img { display: block; width: 100%; max-height: 160px; object-fit: cover; }
.zona-adsense { margin: 28px 0; }

/* ─── Responsive ─────────────────────────────────────────────────── */

/* ── Tablets (768-1024px): las grillas fluid (auto-fill/auto-fit) ya se
   adaptan solas al ancho disponible; lo único que hace falta es un
   padding intermedio entre el compacto de celular y el de escritorio. ── */
@media (min-width: 769px) and (max-width: 1024px) {
    .contenedor { padding: 28px 24px 140px; }
    .hero-album { padding: 40px 24px 32px; }
}

/* ── Monitores grandes / ultrawide (1440px+): el contenido ya tiene
   max-width:1140px centrado, así que no se estira ilegible — solo se
   asegura más aire a los lados en vez de un salto brusco a los bordes. ── */
@media (min-width: 1440px) {
    .contenedor { max-width: 1240px; }
}

@media (max-width: 768px) {
    .contenedor        { padding: 20px 16px calc(130px + env(safe-area-inset-bottom, 0px)); }
    .barra-nav         { padding: 0 16px; height: 56px; }
    .hero-home         { padding: 44px 0 36px; }

    /* ── Hero álbum ── */
    .hero-album        { padding: 28px 16px 24px; margin: -20px -16px 24px; border-radius: 0 0 20px 20px; }
    .hero-album-contenido { gap: 16px; align-items: flex-start; flex-wrap: wrap; }
    .portada-grande    { width: 104px; height: 104px; flex-shrink: 0; }
    .info-album        { min-width: 0; flex: 1; }
    .info-album h1     { font-size: 20px; margin-bottom: 6px; }
    .descripcion-album { display: none; }
    .acciones-album    { gap: 10px; }
    .boton-play-grande { width: 46px; height: 46px; font-size: 14px; }
    .acciones-album .boton-secundario { padding: 9px 14px; font-size: 12px; }
    .boton-like        { padding: 7px 12px; font-size: 13px; }

    /* ── Track list ── */
    .grid-albumes      { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 14px; }
    .cabecera-lista,
    .fila-cancion      { grid-template-columns: 36px 1fr auto; gap: 6px; }
    .contador-repros   { display: none; }
    .cabecera-lista > span:nth-child(3),
    .cabecera-lista > span:nth-child(5) { display: none; }
    .titulo-cancion    { font-size: 14px; }
    /* Antes esta fila quedaba con display:none — sin ella un fan en el
       celular no podía abrir la letra, dar like, ni comentar ninguna
       canción. Ahora pasa a su propia fila completa, con más espacio
       para tocar cada ícono sin errores. */
    .fila-cancion      { grid-template-rows: auto auto; row-gap: 4px; }
    .acciones-cancion  {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 2px;
        padding-left: 42px;
    }
    .estrellas-row     { gap: 0; }
    .estrella          { font-size: 11px; }
    .avg-texto         { font-size: 10px; }

    /* ── Compartir ── */
    .seccion-compartir { padding: 16px; border-radius: 12px; }
    .botones-compartir { gap: 10px; }
    .btn-redes         { width: 40px; height: 40px; }

    /* ── Widget de tiempo ── */
    .widget-tiempo-libre { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
    .widget-tiempo-badge { font-size: 9px; padding: 3px 8px; }
    .widget-tiempo-info  { width: 100%; }

    /* ── Comentarios ── */
    .seccion-comentarios { margin: 24px 0 32px; }
    .form-comentario   { padding: 12px; }
    .comentario-avatar { width: 32px; height: 32px; font-size: 13px; }
    .comentario-cuerpo { padding: 10px 12px; }
    .form-footer-bar   { flex-direction: column; align-items: flex-start; gap: 6px; }
    .form-acciones     { align-self: flex-end; }
    .emoji-picker-form { position: static; min-width: auto; margin-top: 6px; }
    .lista-replies     { padding-left: 8px; }
    .comentario-acciones { gap: 4px; }

    /* ── Reproductor ── */
    .reproductor-barra {
        height: auto;
        padding: 10px 16px 14px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .reproductor-info       { justify-content: flex-start; }
    .reproductor-controles  { width: 100%; }
    .reproductor-progreso-fila { width: 100%; }
    .reproductor-derecha    { display: none; }
}

/* ── Orientación horizontal en celular: viewport bajo, la barra no debe
   comerse media pantalla ── */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
    .reproductor-barra {
        height: auto;
        grid-template-columns: auto 1fr auto;
        padding: 6px 16px;
        padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
        gap: 12px;
    }
    .reproductor-progreso-fila { width: auto; flex: 1; }
    .contenedor { padding-bottom: 90px; }
}

@media (max-width: 480px) {
    .hero-album-contenido { flex-direction: column; align-items: center; text-align: center; }
    .portada-grande    { width: 140px; height: 140px; }
    .info-album        { width: 100%; }
    .info-album h1     { font-size: 22px; }
    .album-stats       { justify-content: center; }
    .acciones-album    { justify-content: center; flex-wrap: wrap; }
    .descripcion-album { display: none; }
    .tipo-label        { text-align: center; }
    .banner-tiempo     { flex-wrap: wrap; gap: 10px; }
    .banner-tiempo-icono { font-size: 22px; }
}

/* ─── Botón dorado VIP ────────────────────────────────────────────── */
.boton-dorado {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #1c0a00 !important;
    box-shadow: 0 4px 18px rgba(245,158,11,.38);
}
.boton-dorado:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1c0a00 !important;
    box-shadow: 0 8px 28px rgba(245,158,11,.55);
}
.enlace-descarga-vip {
    color: var(--gold) !important;
    border-color: rgba(245,158,11,.5) !important;
}
.enlace-descarga-vip:hover {
    color: var(--gold) !important;
    border-color: #f59e0b !important;
    background: rgba(245,158,11,.08);
}

/* ─── Like buttons ────────────────────────────────────────────────── */
.boton-like {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 15px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.boton-like:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.boton-like.gustado {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(236,72,153,.08);
}
.boton-like-sm {
    padding: 5px 11px 5px 9px;
    font-size: 12px;
    border-radius: 999px;
    gap: 5px;
}
.boton-like-sm:hover { background: rgba(236,72,153,.08); }
.boton-fav {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color .15s, background .15s, transform .12s;
    line-height: 1;
}
.boton-fav:hover  { color: var(--gold); background: rgba(245,158,11,.12); transform: scale(1.1); }
.boton-fav.guardado { color: var(--gold); text-shadow: 0 0 10px rgba(245,158,11,.45); }
.boton-fav.guardado:hover { background: rgba(245,158,11,.18); }
.boton-reproducir-vip {
    font-size: 14px !important;
    cursor: pointer;
    color: var(--text-muted);
    opacity: .7;
}
.boton-reproducir-vip:hover { opacity: 1; }
.badge-pista-vip {
    font-size: 12px;
    opacity: .75;
    vertical-align: middle;
}

/* ─── Banner de cooldown de tiempo ───────────────────────────────── */
.banner-tiempo {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(248,113,113,.1);
    border: 1px solid var(--danger);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.banner-tiempo-icono {
    font-size: 28px;
    flex-shrink: 0;
}
.banner-tiempo p {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--text-muted);
}
.banner-tiempo strong {
    color: var(--danger);
}
@media (max-width: 600px) {
    .banner-tiempo { flex-wrap: wrap; }
}

/* ─── Stats del álbum ─────────────────────────────────────────────── */
.album-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
    flex-wrap: wrap;
}

/* ─── Título + estrellas en la misma celda ────────────────────────── */
.titulo-y-rating {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.titulo-y-rating .titulo-cancion {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Estrellas de calificación ───────────────────────────────────── */
.estrellas-row {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
    cursor: pointer;
}
.estrella {
    font-size: 13px;
    color: rgba(255,255,255,.28);
    transition: color .1s, transform .1s;
    user-select: none;
    display: inline-block;
}
.estrella.llena  { color: #facc15; }
.estrella:hover  { transform: scale(1.3); }
.estrella:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 3px;
    transform: scale(1.3);
}
.avg-texto {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
    white-space: nowrap;
}

/* ─── Widget de tiempo libre (encima de la lista de canciones) ────── */
.widget-tiempo-libre {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 16px;
    margin-bottom: 20px;
}
.widget-tiempo-badge {
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.widget-tiempo-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#widget-tiempo-texto {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.barra-tiempo-externa {
    height: 4px;
    background: var(--surface2);
    border-radius: 2px;
    overflow: hidden;
}
.barra-tiempo-relleno {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 1s linear, background .3s;
}
.widget-tiempo-vip {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    flex-shrink: 0;
}
.widget-tiempo-vip:hover { text-decoration: underline; }

/* ─── Mini widget en la barra del reproductor (lado derecho) ─────── */
.mini-tiempo {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.4;
    padding: 4px 8px;
}
.mini-tiempo.cooldown { color: var(--danger); }
.mini-gratis {
    background: var(--primary);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: .06em;
}
.mini-barra {
    height: 3px;
    background: var(--surface2);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}
.mini-barra-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 30s linear;
}

/* ─── Sección Compartir ───────────────────────────────────────────── */
.seccion-compartir {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 24px;
    margin: 32px 0;
}
.seccion-compartir h2 {
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
}
.botones-compartir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.btn-redes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none !important;
    border: none;
    color: #fff;
    position: relative;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.btn-redes svg { position: relative; z-index: 1; }
.btn-redes:hover { transform: translateY(-3px) scale(1.07); text-decoration: none; }
.btn-redes:active { transform: translateY(-1px) scale(1.02); }
.btn-facebook { background: #1877F2; box-shadow: 0 4px 14px rgba(24,119,242,.32); }
.btn-facebook:hover { box-shadow: 0 8px 22px rgba(24,119,242,.48); color: #fff !important; }
.btn-whatsapp { background: #25D366; box-shadow: 0 4px 14px rgba(37,211,102,.32); }
.btn-whatsapp:hover { box-shadow: 0 8px 22px rgba(37,211,102,.48); color: #fff !important; }
.btn-twitter  { background: #111; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.btn-twitter:hover { box-shadow: 0 8px 22px rgba(0,0,0,.55); color: #fff !important; }
.btn-nativo   { background: linear-gradient(135deg,#7c3aed,#ec4899); box-shadow: 0 4px 14px rgba(124,58,237,.32); }
.btn-nativo:hover { box-shadow: 0 8px 22px rgba(124,58,237,.48); color: #fff !important; }
.btn-copiar   { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); }
.btn-copiar:hover { color: var(--text); border-color: rgba(167,139,202,.5); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.btn-copiar .icon-check { display: none; }
.btn-copiar.copiado {
    background: rgba(52,211,153,.15) !important;
    border-color: #34d399 !important;
    color: #34d399 !important;
    transform: none;
}
.btn-copiar.copiado .icon-link  { display: none; }
.btn-copiar.copiado .icon-check { display: block; }

/* ─── Sección Comentarios ─────────────────────────────────────────── */
.seccion-comentarios {
    margin: 32px 0 56px;
}
.seccion-comentarios h2 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-comentario {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.form-comentario textarea {
    resize: vertical;
    min-height: 80px;
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text);
    font-family: var(--font-cuerpo);
    font-size: 16px;
    line-height: 1.5;
}
.form-comentario textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
#lista-comentarios {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.comentario {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.comentario-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.comentario-cuerpo {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 0;
}
.comentario-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.comentario-meta strong {
    font-size: 14px;
    color: var(--text);
}
.comentario-fecha {
    font-size: 12px;
    color: var(--text-muted);
}
.comentario-texto {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    word-break: break-word;
}
.btn-borrar-comentario {
    background: transparent;
    border: none;
    color: var(--danger);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 6px;
    opacity: .7;
}
.btn-borrar-comentario:hover { opacity: 1; text-decoration: underline; }

/* ── Comentarios interactivos ─────────────────────────────────── */

/* Reset global 'button' para todos los controles de comentarios */
.btn-like-com,
.btn-reaccionar,
.btn-responder,
.btn-emoji-toggle,
.btn-emoji-reaccion,
.btn-emoji-insertar,
.btn-cancelar-respuesta,
.btn-enviar-respuesta {
    background:    transparent !important;
    box-shadow:    none !important;
    transform:     none !important;
    border-radius: 0 !important;
    padding:       0 !important;
    font-family:   var(--font-cuerpo);
    letter-spacing: 0;
}

/* ── Barra inferior del form de comentario ── */
.form-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.form-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Botón emoji picker en el form ── */
.emoji-wrapper { position: relative; }
.btn-emoji-toggle {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 1px solid var(--border) !important;
    font-size: 16px !important;
    padding: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: border-color .15s, background .15s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.btn-emoji-toggle:hover {
    border-color: var(--primary) !important;
    background: rgba(124,58,237,.1) !important;
}

/* ── Emoji pickers (form + reacciones) ── */
.emoji-picker-form {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 220px;
}
.emoji-picker-form.oculto { display: none; }
.emoji-picker-com, .emoji-picker-form {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.emoji-picker-com.oculto { display: none; }
.btn-emoji-reaccion, .btn-emoji-insertar {
    font-size: 20px !important;
    padding: 5px !important;
    border-radius: 8px !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: background .12s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.btn-emoji-reaccion:hover, .btn-emoji-insertar:hover {
    background: rgba(255,255,255,.08) !important;
}

/* ── Barra de acciones del comentario ── */
.comentario-acciones {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* Like button: cápsula minimal */
.btn-like-com {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
    padding: 3px 11px !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s !important;
}
.btn-like-com .like-icon { font-size: 13px; line-height: 1; }
.btn-like-com:hover {
    border-color: #f43f5e !important;
    color: #f43f5e !important;
    background: rgba(244,63,94,.06) !important;
}
.btn-like-com.gustado {
    color: #f43f5e !important;
    border-color: rgba(244,63,94,.5) !important;
    background: rgba(244,63,94,.08) !important;
}

/* Reaccionar / Responder: texto puro, muy discretos */
.btn-reaccionar, .btn-responder {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 500;
    cursor: pointer;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    transition: color .15s, background .15s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.btn-reaccionar:hover, .btn-responder:hover {
    color: var(--text) !important;
    background: rgba(255,255,255,.06) !important;
}

.comentario-likes-count {
    color: var(--text-muted);
    font-size: 12px;
    padding: 3px 6px;
}

/* ── Reacciones emoji (pills bajo el texto) ── */
.comentario-reacciones {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}
.reaccion-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 13px;
    line-height: 1.4;
    cursor: default;
    transition: background .15s;
}
.reaccion-pill:hover { background: rgba(255,255,255,.08); }

/* ── Emoji picker inline en comentario ── */
.emoji-picker-com {
    margin-top: 8px;
}

/* ── Formulario de respuesta inline ── */
.form-respuesta-wrapper { margin-top: 10px; }
.form-respuesta-wrapper.oculto { display: none; }
.form-respuesta {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.respuesta-textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: var(--text);
    font-size: 13px;
    resize: none;
    outline: none;
    padding: 2px 0 8px;
    font-family: var(--font-cuerpo);
    line-height: 1.6;
}
.respuesta-textarea:focus { border-bottom-color: var(--primary); }
.respuesta-botones {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}
.boton-sm {
    padding: 5px 16px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    font-weight: 700;
    letter-spacing: .03em;
}
.btn-enviar-respuesta {
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 5px 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: var(--font-titulo) !important;
    cursor: pointer;
    transition: background .15s !important;
}
.btn-enviar-respuesta:hover { background: var(--primary-hover) !important; }
.btn-cancelar-respuesta {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    cursor: pointer;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    transition: color .15s, background .15s !important;
    display: inline-flex !important;
    align-items: center !important;
}
.btn-cancelar-respuesta:hover {
    color: var(--text) !important;
    background: rgba(255,255,255,.06) !important;
}

/* ── Replies anidadas ── */
.lista-replies {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 16px;
    border-left: 2px solid rgba(255,255,255,.08);
}
.lista-replies:empty { display: none; }
.comentario-reply { gap: 8px; }
.comentario-reply .comentario-cuerpo {
    background: rgba(255,255,255,.02);
    border-color: rgba(255,255,255,.07);
}
.comentario-avatar-sm {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
    flex-shrink: 0;
}

/* ── Stats bar en tarjeta de álbum ──────────────────────────────── */
.album-stats-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 2px 0;
}
.album-stat-item {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ── Zona búsqueda + orden (index.php) ──────────────────────────── */
.zona-busqueda-sort {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.busqueda-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.busqueda-icono {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
}
.inp-busqueda {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px 10px 38px;
    color: var(--text);
    font-family: var(--font-cuerpo);
    font-size: 14px;
    transition: border-color .18s, box-shadow .18s;
}
.inp-busqueda:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124,58,237,.2);
}
.inp-busqueda::-webkit-search-cancel-button { cursor: pointer; }

.sort-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface2)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a78bca' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat right 12px center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 36px 10px 14px;
    color: var(--text);
    font-family: var(--font-cuerpo);
    font-size: 14px;
    cursor: pointer;
    min-width: 158px;
    transition: border-color .18s;
}
.sort-select:focus { outline: none; border-color: var(--primary); }
.sort-select option { background: var(--surface2); }

/* Dropdown de resultados de búsqueda */
.busqueda-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    z-index: 200;
    box-shadow: 0 12px 40px rgba(0,0,0,.6);
    max-height: 340px;
    overflow-y: auto;
    padding: 8px 0;
}
.busq-seccion-lbl {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 6px 14px 4px;
    margin: 0;
}
.busq-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    text-decoration: none;
    color: var(--text);
    transition: background .12s;
    cursor: pointer;
}
.busq-item:hover { background: var(--surface2); color: var(--text); text-decoration: none; }
.busq-pista {
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 6px;
    background: var(--surface3);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--text-muted);
}
.busq-datos { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.busq-nombre {
    font-size: 13px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text);
}
.busq-album {
    font-size: 11px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Stats de comunidad (index.php, sobre el buscador) ──────────── */
.stats-comunidad {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.stats-comunidad strong { color: var(--text); font-weight: 700; }
.stat-sep { opacity: .4; }
.stat-online {
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Punto verde pulsante */
.pulso-online {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(52,211,153,.6);
    animation: pulso-verde 2s ease-in-out infinite;
}
@keyframes pulso-verde {
    0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.6); }
    50%  { box-shadow: 0 0 0 5px rgba(52,211,153,0); }
    100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* ── Feed de actividad pública ────────────────────────────────────── */
.feed-actividad {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 14px;
    margin-bottom: 4px;
    scrollbar-width: thin;
}
.feed-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
a.feed-item:hover { border-color: var(--primary); color: var(--text); }
.feed-item strong { color: var(--text); font-weight: 700; }

/* ── Chat global de fans ─────────────────────────────────────────── */
#chat-widget {
    position: fixed;
    bottom: 88px;
    right: 16px;
    z-index: 200;
}
.chat-abrir-btn {
    width: 50px !important; height: 50px !important;
    border-radius: 50% !important;
    background: var(--primary) !important;
    border: none !important; color: #fff;
    font-size: 22px; cursor: pointer;
    display: flex !important; align-items: center !important; justify-content: center !important;
    position: relative;
    box-shadow: 0 4px 20px rgba(124,58,237,.45) !important;
    transition: transform .15s, box-shadow .15s !important;
    padding: 0 !important;
}
.chat-abrir-btn:hover { transform: scale(1.08) !important; box-shadow: 0 6px 28px rgba(124,58,237,.7) !important; }
.chat-abrir-btn.chat-abierto { background: var(--surface3) !important; }
.chat-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    background: var(--accent);
    border-radius: 999px;
    font-size: 10px; font-weight: 700; color: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--bg);
    pointer-events: none;
}
.chat-panel {
    position: absolute;
    bottom: 62px; right: 0;
    width: 320px; height: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,.55);
    overflow: hidden;
    animation: chat-aparecer .15s ease-out;
}
@keyframes chat-aparecer {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.chat-header {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}
.chat-titulo {
    font-size: 14px; font-weight: 700; color: var(--text);
    font-family: var(--font-titulo); flex: 1;
}
.chat-estado {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--success); flex-shrink: 0;
}
.chat-punto-verde {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--success);
    animation: pulso-verde 2s ease-in-out infinite;
}
.chat-sala-link {
    color: var(--text-muted) !important; text-decoration: none !important;
    font-size: 15px !important; padding: 2px 5px !important;
    border-radius: 4px !important; transition: color .12s, background .12s !important;
    line-height: 1 !important; display: flex !important; align-items: center !important;
}
.chat-sala-link:hover { color: var(--primary) !important; background: rgba(124,58,237,.12) !important; }
.chat-cerrar-btn {
    background: none !important; border: none !important;
    color: var(--text-muted) !important; cursor: pointer !important;
    font-size: 14px !important; padding: 2px 4px !important;
    line-height: 1; border-radius: 4px !important;
    box-shadow: none !important; transform: none !important;
    width: auto !important; height: auto !important;
    transition: color .12s !important;
}
.chat-cerrar-btn:hover { color: var(--text) !important; transform: none !important; }
.chat-mensajes {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.chat-inicio-msg {
    font-size: 11px; color: var(--text-muted);
    text-align: center; padding: 6px 10px;
    background: var(--surface2);
    border-radius: 8px; margin: 0 0 4px;
    line-height: 1.5;
}
.chat-msg {
    display: flex; flex-direction: column; gap: 1px;
    padding: 5px 9px;
    border-radius: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    position: relative;
}
.chat-msg-admin {
    background: rgba(124,58,237,.1);
    border-color: rgba(124,58,237,.3);
}
.chat-msg-vip {
    background: rgba(236,72,153,.07);
    border-color: rgba(236,72,153,.2);
}
.chat-msg-nombre {
    font-size: 11px; font-weight: 700; color: var(--primary-hover);
    display: flex; align-items: center; gap: 4px;
}
.chat-msg-vip .chat-msg-nombre { color: var(--accent); }
.chat-tag-admin {
    font-size: 8px; background: var(--primary); color: #fff;
    padding: 1px 4px; border-radius: 3px; letter-spacing: .04em;
}
.chat-tag-vip {
    font-size: 8px; background: var(--accent); color: #fff;
    padding: 1px 4px; border-radius: 3px; letter-spacing: .04em;
}
.chat-msg-texto {
    font-size: 13px; color: var(--text); line-height: 1.45;
    word-break: break-word;
}
.chat-msg-hora {
    font-size: 10px; color: var(--text-muted);
    align-self: flex-end;
}
.chat-del-btn {
    position: absolute; top: 4px; right: 6px;
    background: none !important; border: none !important;
    color: var(--text-muted) !important; cursor: pointer !important;
    font-size: 11px !important; padding: 0 !important;
    box-shadow: none !important; transform: none !important;
    opacity: .35; transition: opacity .12s !important;
    width: auto !important; height: auto !important;
}
.chat-del-btn:hover { opacity: 1 !important; color: var(--danger) !important; transform: none !important; }
.chat-input-zona {
    display: flex; gap: 6px; align-items: center;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}
.chat-input {
    flex: 1; padding: 8px 12px;
    background: var(--surface3); border: 1px solid var(--border);
    border-radius: 999px; color: var(--text);
    font-size: 16px; font-family: var(--font-cuerpo);
    outline: none; transition: border-color .14s;
}
.chat-input:focus { border-color: var(--primary); }
.chat-input::placeholder { color: var(--text-muted); }
.chat-send-btn {
    width: 34px !important; height: 34px !important;
    border-radius: 50% !important;
    background: var(--primary) !important;
    border: none !important; color: #fff !important;
    font-size: 14px !important; cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0;
    box-shadow: none !important; transform: none !important;
    transition: opacity .14s !important;
    padding: 0 !important;
}
.chat-send-btn:hover   { opacity: .85 !important; transform: none !important; }
.chat-send-btn:disabled { opacity: .4 !important; cursor: default !important; }
.chat-login-msg {
    padding: 12px 14px;
    font-size: 13px; color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0; margin: 0;
}
.chat-login-msg a { color: var(--primary-hover); font-weight: 600; }
@media (max-width: 480px) {
    /* 80px asumía la altura de escritorio del reproductor (80px + 8px de
       margen) — en mobile la barra mide ~146px (más si hay safe-area-inset,
       iPhone con gestos), así que con una canción sonando la burbuja del
       chat quedaba adentro del área del reproductor en vez de flotar arriba. */
    #chat-widget { right: 10px; bottom: calc(146px + 8px + env(safe-area-inset-bottom, 0px)); }
    .chat-panel  { width: calc(100vw - 20px); right: 0; }
}

/* ── Toast de reputación ──────────────────────────────────────────── */
.rep-toast {
    position: fixed;
    right: 20px;
    bottom: 180px; /* encima del chat widget */
    z-index: 9990;
    background: rgba(18, 10, 35, 0.97);
    border: 1px solid rgba(255,255,255,.12);
    border-left: 3px solid #f59e0b;
    border-radius: 12px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(124,58,237,.1);
    transform: translateX(calc(100% + 30px));
    opacity: 0;
    transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .28s ease;
    pointer-events: none;
    max-width: 260px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.rep-toast-show {
    transform: translateX(0);
    opacity: 1;
}
.rep-toast-pts {
    font-size: 20px;
    font-weight: 900;
    color: #f59e0b;
    font-family: var(--font-titulo);
    flex-shrink: 0;
    line-height: 1;
}
.rep-toast-mot {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}
@media (max-width: 480px) {
    .rep-toast { right: 10px; bottom: 170px; max-width: calc(100vw - 20px); }
}

/* ── Skeleton screens (placeholders animados mientras carga) ──────── */
.skeleton-linea, .skeleton-avatar {
    position: relative;
    overflow: hidden;
    background: var(--surface2);
}
.skeleton-linea::after, .skeleton-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 10%, transparent), transparent);
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.skeleton-linea {
    height: 12px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.skeleton-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}
.skeleton-comentario {
    display: flex;
    gap: 10px;
    padding: 9px 0;
}
.skeleton-comentario .skeleton-cuerpo { flex: 1; min-width: 0; }
.skeleton-comentario .skeleton-linea:nth-child(1) { width: 35%; height: 10px; }
.skeleton-comentario .skeleton-linea:nth-child(2) { width: 90%; }
.skeleton-comentario .skeleton-linea:last-child { width: 60%; margin-bottom: 0; }

/* ─── Galería de videos verticales estilo TikTok (videos.php) ────── */
.feed-videos {
    height: 100vh; /* respaldo para navegadores sin soporte de dvh */
    height: calc(100dvh - 64px);
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    background: #000;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* Es un feed inmersivo de swipe, no una página de lectura — el scrollbar
       violeta global (ver más arriba) es el único elemento de "chrome del
       navegador" que se cuela acá. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.feed-videos::-webkit-scrollbar { display: none; }
.video-vacio {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 32px;
    text-align: center;
    color: var(--text-muted);
}
.video-vacio-icono {
    font-size: 46px;
    filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--primary) 45%, transparent));
}
.video-vacio-titulo {
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 17px;
    color: var(--text);
    margin: 0;
}
.video-vacio-sub { font-size: 13px; color: var(--text-muted); max-width: 280px; margin: 0; }
.video-cargando-mas {
    padding: 22px 0 max(22px, env(safe-area-inset-bottom));
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: #000;
}
.video-cargando-mas.oculto { display: none; }
.video-orden-toggle {
    position: fixed;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    gap: 2px;
    /* Fondo bien opaco (no solo un tinte de 8% blanco) para que se lea claro
       encima de CUALQUIER video, incluso uno claro/soleado de fondo. */
    background: rgba(20,10,35,.6);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-radius: 999px;
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.video-orden-toggle a {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.video-orden-toggle a.activo {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
}
@media (hover: hover) {
    .video-orden-toggle a:hover:not(.activo) { background: rgba(255,255,255,.08); color: #fff; }
}
.video-orden-toggle a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.video-album-filtro {
    position: fixed;
    top: 122px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
}
.video-album-filtro select {
    background: rgba(20,10,35,.6);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-radius: 999px;
    padding: 6px 30px 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    max-width: 60vw;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.video-album-filtro select option { color: #000; }
.video-slide {
    height: 100vh; /* respaldo para navegadores sin soporte de dvh */
    height: calc(100dvh - 64px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Solo el primer video, solo al cargar la página — no interferir con el
   scroll-snap ni con las tarjetas que se agregan por paginación. */
.feed-videos .video-slide:first-child {
    animation: video-primera-entrada .5s cubic-bezier(.22,1,.36,1);
}
@keyframes video-primera-entrada {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}
.video-fondo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* Respaldo cuando el video no tiene miniatura: un degradé de marca en vez
       de dejar un vacío plano — el inline style con la miniatura real (si
       existe) pisa background-image por completo, esto solo se ve cuando no
       hay una. OJO: un color sólido NO es válido como capa de
       background-image (solo acepta imágenes/gradientes) — por eso el color
       de base va aparte, en background-color, no mezclado en la lista. */
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 90% 70% at 50% 0%, color-mix(in srgb, var(--primary) 40%, transparent), transparent 70%),
        radial-gradient(ellipse 80% 60% at 50% 100%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%);
    filter: blur(40px) brightness(.5);
    transform: scale(1.2);
}
/* ── Escenario: la "tarjeta" que agrupa video + info + acciones ─────
   En mobile ocupa todo el slide (comportamiento idéntico a como era antes
   de existir este wrapper). En desktop se vuelve una tarjeta angosta y
   centrada estilo TikTok — ver media query más abajo. */
.video-escenario {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sin esto, el doble-tap para dar "me gusta" choca con el zoom nativo de
       doble-tap de Safari en iOS (Chrome/Android no lo necesita, ya lo
       desactiva solo con el viewport actual) — "manipulation" mata
       específicamente el gesto de doble-tap-zoom sin tocar el scroll normal. */
    touch-action: manipulation;
}
/* Scrim inferior para que el título/descripción se lean bien encima de
   cualquier video, sin depender solo del text-shadow. */
.video-escenario::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 42%;
    background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
    pointer-events: none;
    z-index: 1;
}
.video-tiempos {
    position: absolute;
    left: 12px; right: 12px;
    bottom: calc(9px + env(safe-area-inset-bottom));
    z-index: 3;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-titulo);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    color: rgba(255,255,255,.9);
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
    pointer-events: none;
}
.video-progreso {
    position: absolute;
    left: 0; right: 0; bottom: env(safe-area-inset-bottom);
    height: 3px;
    z-index: 3;
    background: rgba(255,255,255,.18);
}
.video-progreso-barra {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width .1s linear;
}
.video-el {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    object-fit: contain;
    background: #000;
}
/* Respaldo manual: aparece solo si el navegador rechazó el autoplay
   (poco común, pero sin esto el video se ve "trabado" sin forma de arrancarlo). */
.btn-video-play {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border: none;
    color: #fff;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    cursor: pointer;
    box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 50%, transparent);
    animation: video-play-pulso 1.6s ease-in-out infinite;
}
.btn-video-play.oculto { display: none; }
@keyframes video-play-pulso {
    0%, 100% { box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 50%, transparent); }
    50% { box-shadow: 0 10px 44px color-mix(in srgb, var(--accent) 75%, transparent); }
}
.video-cabecera {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.video-vistas {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-family: var(--font-titulo);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 7px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    /* El título/descripción de abajo ya se protegen con text-shadow contra
       fondos claros — acá faltaba la misma protección. */
    text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.video-vol-control {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    padding: 3px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.btn-video-sonido {
    width: 40px;
    height: 40px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    background: none;
    border: none;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
    transition: transform .18s, background .15s;
}
.btn-video-sonido:active { transform: scale(.9); }
@media (hover: hover) {
    .btn-video-sonido:hover { background: rgba(255,255,255,.12); transform: scale(1.1); }
}
.btn-video-sonido:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Slider de volumen — se abre a la derecha del botón de mute, mismo criterio
   visual que el del reproductor de audio principal (accent-color + thumb
   explícito para navegadores que lo necesitan). */
.video-vol-slider {
    width: 64px;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    background: rgba(255,255,255,.28);
    border-radius: 2px;
    border: none;
    padding: 0;
    margin: 0 10px 0 0;
    cursor: pointer;
    accent-color: var(--accent);
}
.video-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    cursor: pointer;
    margin-top: 0;
}
.video-vol-slider::-moz-range-thumb {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    border: none;
    cursor: pointer;
}
.video-info {
    position: absolute;
    left: 16px;
    right: 88px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 2;
    color: #fff;
    pointer-events: none;
}
.video-album-badge {
    display: inline-block;
    pointer-events: auto;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(124,58,237,.4);
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 6px;
    text-decoration: none;
    text-shadow: none;
    max-width: fit-content;
    transition: background .15s;
}
.video-album-badge:hover { background: rgba(124,58,237,.65); }
.video-info h2 {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 4px;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.video-info p {
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    opacity: .9;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-acciones {
    position: absolute;
    right: 14px;
    bottom: calc(28px + env(safe-area-inset-bottom));
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.video-acciones button {
    background: none;
    border: none;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
}
@media (hover: hover) {
    .video-acciones button:hover .video-accion-icono {
        background: rgba(255,255,255,.16);
        border-color: rgba(255,255,255,.3);
        transform: scale(1.08);
    }
}
.video-acciones button:focus-visible .video-accion-icono { outline: 2px solid var(--accent); outline-offset: 2px; }
.video-accion-icono {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s, box-shadow .2s;
}
.video-acciones button:active .video-accion-icono { transform: scale(.88); }
.btn-like-video.gustado .video-accion-icono {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: transparent;
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn-guardar-video.guardado .video-accion-icono {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border-color: transparent;
    color: #1a1206;
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(245,158,11,.5);
}
.video-accion-num {
    font-family: var(--font-titulo);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    text-shadow: 0 1px 4px rgba(0,0,0,.7);
}

/* ── Menú de compartir (popover desde el botón 📤) ───────────────── */
.video-compartir-wrap { position: relative; }
.video-compartir-menu {
    position: absolute;
    right: 52px;
    bottom: 0;
    z-index: 4;
    display: flex;
    gap: 8px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    padding: 8px 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    animation: video-menu-in .18s cubic-bezier(.34,1.56,.64,1);
}
@keyframes video-menu-in {
    from { opacity: 0; transform: translateX(6px) scale(.9); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
.video-compartir-menu.oculto { display: none; }
.video-compartir-menu a,
.video-compartir-menu button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: none;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform .12s, background .12s;
}
.video-compartir-menu a:hover,
.video-compartir-menu button:hover { background: rgba(255,255,255,.18); transform: scale(1.08); }
.video-compartir-menu a:focus-visible,
.video-compartir-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Corazones flotantes al doble-tap (estilo TikTok/Instagram) ────
   --rot-ini/--drift-x/--escala los setea JS por instancia (mostrarEmojiEnPunto)
   para que tocar el mismo punto varias veces no apile copias idénticas. */
.video-tap-corazon {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    font-size: 70px;
    color: var(--accent);
    filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--accent) 60%, transparent));
    transform: translate(-50%, -50%) scale(0);
    animation: video-corazon-pop 1s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes video-corazon-pop {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(var(--rot-ini, -8deg)); opacity: 0; }
    18%  { transform: translate(calc(-50% + var(--drift-x, 0px) * .3), -50%) scale(calc(1.15 * var(--escala, 1))) rotate(4deg); opacity: 1; }
    32%  { transform: translate(calc(-50% + var(--drift-x, 0px) * .6), -50%) scale(calc(.95 * var(--escala, 1))) rotate(-2deg); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--drift-x, 0px)), -180%) scale(calc(.85 * var(--escala, 1))) rotate(0); opacity: 0; }
}

/* ── Estado de error / buffering del video ───────────────────────── */
.video-buffering .video-escenario::before {
    content: '';
    position: absolute;
    z-index: 3;
    top: 50%; left: 50%;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: video-spin .8s linear infinite;
}
@keyframes video-spin { to { transform: rotate(360deg); } }
.video-error-overlay {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 0 32px;
    background: rgba(10,4,21,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.video-error-overlay .icono { font-size: 38px; }
.video-error-overlay p { margin: 0; font-size: 14px; color: #fff; }
.video-error-overlay button {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* ── Panel de comentarios de video (drawer inferior) ─────────────── */
.panel-coms-video { position: fixed; inset: 0; z-index: 500; }
.panel-coms-video.oculto { display: none; }
.panel-coms-video-fondo {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.6);
}
.panel-coms-video-hoja {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 70vh;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    padding: 16px;
    box-shadow: 0 -8px 32px rgba(0,0,0,.4);
    animation: coms-video-subir .28s cubic-bezier(.32,.72,0,1);
}
@keyframes coms-video-subir {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
/* Drag-handle visual (pill gris arriba), estilo iOS/TikTok — puramente
   decorativo, no es arrastrable de verdad, pero comunica "esto es un drawer". */
.panel-coms-video-hoja::before {
    content: '';
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,.2);
}
.panel-coms-video-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.panel-coms-video-cabecera button {
    background: none; border: none; color: var(--text-muted);
    font-size: 18px; cursor: pointer;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
}
.panel-coms-video-lista {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 80px;
}
.com-video-item { display: flex; gap: 10px; align-items: flex-start; }
.com-video-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
}
.com-video-cuerpo { flex: 1; min-width: 0; }
.com-video-cuerpo strong { font-size: 12px; color: var(--text); }
.com-video-cuerpo p { font-size: 13px; color: var(--text-muted); margin: 2px 0 0; word-break: break-word; }
.btn-reportar-com-video {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    opacity: .45;
    flex-shrink: 0;
    align-self: flex-start;
    transition: opacity .12s;
}
.btn-reportar-com-video:hover { opacity: 1; }
.btn-like-com-video {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 0 0;
    margin-top: 2px;
}
/* Reusa las mismas clases que el ♡ grande del video (misma lógica de JS en
   toggleLike()), pero acá adentro de un comentario tienen que verse chicas
   e inline, no como el botón circular flotante — se pisa con especificidad
   en vez de duplicar el nombre de la clase. */
.btn-like-com-video .video-accion-icono {
    all: unset;
    font-size: 13px;
    line-height: 1;
}
.btn-like-com-video .video-accion-num {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: normal;
    text-shadow: none;
}
.btn-like-com-video.gustado { color: var(--accent); }
.panel-coms-video-vacio { text-align: center; color: var(--text-muted); font-size: 13px; padding: 20px 0; }
.panel-coms-video-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.panel-coms-video-form textarea {
    flex: 1;
    resize: none;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    padding: 8px 14px;
    font-size: 16px;
    max-height: 80px;
}
.panel-coms-video-form button {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0 18px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}
.panel-coms-video-login { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.panel-coms-video-login a { color: var(--accent); }

/* ── Escritorio: tarjeta centrada estilo TikTok web ──────────────────
   Sin esto el video (sobre todo uno que no sea 9:16 puro, o con el navegador
   muy ancho) quedaba pegado a la izquierda con un vacío feo al costado — acá
   se lo convierte en una tarjeta angosta, redondeada y con sombra, centrada
   en pantalla, con .video-fondo de fondo (ya full-bleed) dando el ambiente. */
@media (min-width: 769px) {
    .video-escenario {
        width: 460px;
        max-width: 90vw;
        height: min(calc(100% - 48px), 820px);
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
    }
}

@media (max-width: 768px) {
    .feed-videos, .video-slide { height: 100vh; height: calc(100dvh - 56px); }
    .video-info { right: 76px; }
    .panel-coms-video-hoja { max-height: 80vh; }
    .video-compartir-menu { right: 48px; }
    .video-orden-toggle { top: 66px; }
    .video-album-filtro { top: 112px; }
    .video-vol-slider { width: 48px; }
}

/* Quien tiene activada "reducir movimiento" en su sistema no quiere el
   pulso constante del botón play, ni el corazón rebotando, ni el menú
   entrando con resorte — se apagan las animaciones, el contenido sigue
   apareciendo/funcionando igual, solo sin el movimiento. */
@media (prefers-reduced-motion: reduce) {
    .btn-video-play { animation: none; }
    .video-compartir-menu { animation: none; }
    .feed-videos .video-slide:first-child { animation: none; }
    .panel-coms-video-hoja { animation: none; }
    .video-buffering .video-escenario::before { animation: none; }
    .video-acciones button:hover .video-accion-icono,
    .btn-video-sonido:hover,
    .video-orden-toggle a:hover:not(.activo) { transition: none; }
    /* El resto de este bloque apaga animaciones, pero el scroll snap del
       feed seguía usando scroll-behavior:smooth (definido en .feed-videos)
       tanto para el swipe nativo como para scrollIntoView() de las flechas
       de teclado — justo el tipo de movimiento que esta preferencia pide
       evitar (mareo/problemas vestibulares). */
    .feed-videos { scroll-behavior: auto; }
    /* La base sin este media query arranca en scale(0) (invisible) y la
       animación normal se encarga de agrandarlo — acá se reemplaza esa
       animación por un simple fade, así que hay que fijar el tamaño final
       a mano o quedaría invisible durante todo el fade. */
    .video-tap-corazon { transform: translate(-50%, -50%) scale(1); animation: video-corazon-fade-reducido .6s ease-out forwards; }
    .video-acciones button:active .video-accion-icono,
    .btn-video-sonido:active { transform: none; }
}
@keyframes video-corazon-fade-reducido {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ── Pago manual con comprobante ─────────────────────────────────────
   Compartido entre membresia.php (VIP) y album.php (compra individual) —
   mismo patrón: instrucciones de banco/Tigo Money + subir un comprobante,
   el admin aprueba manualmente (ver admin/suscripciones.php y
   admin/compras.php). Reemplaza los flujos de PayPal Subscriptions/Orders,
   no confiables para cuentas de Honduras. */
.aviso-pago {
    max-width: 640px;
    margin: 0 auto 24px;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: .9rem;
    font-weight: 500;
    display: none;
}
.aviso-pago.pendiente {
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.25);
    color: var(--gold);
    display: block;
}
.aviso-pago.exito {
    background: rgba(52,211,153,.12);
    border: 1px solid var(--success);
    color: var(--success);
    display: block;
}
.aviso-pago.error {
    background: rgba(236,72,153,.1);
    border: 1px solid var(--accent);
    color: var(--accent);
    display: block;
}
.pago-manual-panel { margin-top: 12px; }
.pago-manual-datos {
    background: var(--surface2);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.pago-manual-linea {
    font-size: .85rem;
    color: var(--text);
    line-height: 1.4;
}
.form-pago-manual {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.label-comprobante {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
}
.input-comprobante {
    font-size: .82rem;
    color: var(--text);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    width: 100%;
}
.comprobante-progreso {
    font-size: .78rem;
    color: var(--primary);
    font-weight: 700;
    min-height: 1em;
}
.comprobante-error {
    font-size: .8rem;
    color: #f87171;
    margin: 0;
}
.comprobante-error.oculto { display: none; }
.btn-enviar-comprobante {
    border-radius: 999px;
    padding: 13px 20px;
    font-size: .9rem;
}