/* Diseno de cabecera extraido del index actual. */

        :root {
            --bg-main: #0c0d11;
            --bg-card: #15171e;
            --border-subtle: #242834;
            --color-primary: #ff0033;
            --color-primary-glow: rgba(255, 0, 51, 0.45);
        }
        body {
            background-color: var(--bg-main);
            color: #e2e8f0;
            font-family: 'Space Grotesk', -apple-system, sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        .header-fixed {
            background: rgba(12, 13, 17, 0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-subtle);
        }
        .btn-neon {
            background: linear-gradient(135deg, #b65b6a 0%, #9f4b59 100%);
            box-shadow: 0 3px 10px rgba(159, 75, 89, 0.18);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-neon:hover {
            box-shadow: 0 4px 14px rgba(159, 75, 89, 0.25);
            transform: translateY(-1px);
        }
        .btn-neon:active {
            transform: scale(0.98);
        }

        /* 1. Menu de Categorias con Colores Vivos y Compatibilidad */
        .nav-categories, #categoryNav {
            /* Ocupa el espacio disponible entre el logo y las acciones del header. */
            flex: 1 1 auto;
            min-width: 0;
            max-width: none;
            display: flex;
            align-items: center;
            gap: 6px;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
        }
        .nav-categories::-webkit-scrollbar, #categoryNav::-webkit-scrollbar { display: none; }
        #categoryNav > :first-child { margin-left: auto; }
        #categoryNav > :last-child { margin-right: auto; }
        
        .cat-pill, .cat-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 5px 7px;
            border-radius: 9999px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.1px;
            text-transform: uppercase;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all 0.15s ease-in-out;
            user-select: none;
            outline: none;
        }
        .cat-pill .material-symbols-outlined, .cat-btn .material-symbols-outlined { 
            font-size: 15px; 
            display: inline-block;
        }
        
        /* Paleta tematica por Canal */
        .cat-all { background: #a85263; color: #ffffff; border-color: #a85263; box-shadow: none; }
        .cat-all:hover { opacity: 0.9; }
        .cat-music { background: rgba(236, 72, 153, 0.12); color: #f472b6; border-color: rgba(236, 72, 153, 0.28); }
        .cat-music:hover, .cat-music.active { background: rgba(236, 72, 153, 0.25); border-color: #f472b6; color: #fff; }
        .cat-sports { background: rgba(16, 185, 129, 0.12); color: #34d399; border-color: rgba(16, 185, 129, 0.28); }
        .cat-sports:hover, .cat-sports.active { background: rgba(16, 185, 129, 0.25); border-color: #34d399; color: #fff; }
        .cat-gaming { background: rgba(168, 85, 247, 0.12); color: #c084fc; border-color: rgba(168, 85, 247, 0.28); }
        .cat-gaming:hover, .cat-gaming.active { background: rgba(168, 85, 247, 0.25); border-color: #c084fc; color: #fff; }
        .cat-funny { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border-color: rgba(245, 158, 11, 0.28); }
        .cat-funny:hover, .cat-funny.active { background: rgba(245, 158, 11, 0.25); border-color: #fbbf24; color: #fff; }
        .cat-trailers { background: rgba(59, 130, 246, 0.12); color: #60a5fa; border-color: rgba(59, 130, 246, 0.28); }
        .cat-trailers:hover, .cat-trailers.active { background: rgba(59, 130, 246, 0.25); border-color: #60a5fa; color: #fff; }
        .cat-tiktok { background: rgba(6, 182, 212, 0.12); color: #22d3ee; border-color: rgba(6, 182, 212, 0.28); }
        .cat-tiktok:hover, .cat-tiktok.active { background: rgba(6, 182, 212, 0.25); border-color: #22d3ee; color: #fff; }
        .cat-zero { background: rgba(239, 68, 68, 0.12); color: #f87171; border-color: rgba(239, 68, 68, 0.28); }
        .cat-zero:hover, .cat-zero.active { background: rgba(239, 68, 68, 0.25); border-color: #f87171; color: #fff; }
        .cat-random { background: rgba(147, 51, 234, 0.12); color: #c084fc; border-color: rgba(147, 51, 234, 0.28); }
        .cat-random:hover, .cat-random.active { background: rgba(147, 51, 234, 0.25); border-color: #c084fc; color: #fff; }
        .cat-pill.active { font-weight: 700; box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); }
        
        .custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
        .custom-scroll::-webkit-scrollbar-thumb { background: #2d3342; border-radius: 4px; }
        
        /* Distribucion fluida: elimina el tope de 1280 px que dejaba margenes grandes. */
        .page-shell {
            width: 100%;
            max-width: none;
        }
        /* El contenido completo es mas contenido; el header sigue a todo el ancho. */
        main.page-shell {
            width: 92%;
            max-width: 1440px;
            padding-left: 16px;
            padding-right: 16px;
        }
        @media (max-width: 767px) {
            main.page-shell {
                width: 100%;
                padding-left: 12px;
                padding-right: 12px;
            }
        }

        /* Movil: una columna. Escritorio: video flexible y panel de 320/360 px. */
        .roulette-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 20px;
            align-items: start;
        }
        .roulette-main,
        .roulette-sidebar {
            min-width: 0;
        }
        @media (min-width: 1024px) {
            .roulette-layout {
                grid-template-columns: minmax(0, 1fr) 320px;
            }
        }
        @media (min-width: 1600px) {
            .roulette-layout {
                grid-template-columns: minmax(0, 1fr) 360px;
            }
        }

        /* El visor llena su columna; su tamano depende del ancho del contenido completo. */
        .video-container {
            aspect-ratio: 16 / 9;
            width: 100%;
        }
        .video-container iframe,
        .video-container #youtube-player {
            width: 100%;
            height: 100%;
        }
        .banner-ad {
            width: 300px;
            height: 250px;
            border: 1px dashed #334155;
            background: #111319;
        }

        /* 2. Giro UNICAMENTE sobre el icono interior (nunca el boton completo) */
        .icon-spin-target {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            transform-origin: center center;
            transition: transform 0.2s ease;
        }

        @keyframes iconRouletteRoll {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .spinning {
            animation: iconRouletteRoll 0.6s linear infinite !important;
        }

        /* Pantallas estrechas: categorias principales y Ver mas en su propia fila. */
        .category-picker { display: none; }
        .category-more { flex: 0 1 220px; min-width: 100px; }
        .category-picker select {
            width: 100%;
            padding: 7px 25px 7px 10px;
            border: 1px solid #2d3342;
            border-radius: 9999px;
            background: #1a1c24;
            color: #ffffff;
            font-family: inherit;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
        }
        .category-picker select:focus-visible { outline: 2px solid #ff0033; outline-offset: 2px; }
        @media (max-width: 1699px) {
            #categoryNav { display: none; }
            .site-header-row { flex-wrap: wrap; }
            .site-logo { order: 1; }
            .header-actions { order: 2; margin-left: auto; }
            .category-picker {
                display: flex;
                order: 3;
                flex-basis: 100%;
                width: 100%;
                align-items: center;
                justify-content: center;
                gap: 8px;
            }
        }
        @media (max-width: 480px) {
            /* Solo los moviles muy estrechos necesitan compactar la primera fila. */
            .site-header-row { gap: 8px; }
            .site-logo { gap: 8px; }
            .site-logo-symbol { width: 30px; height: 30px; }
            .site-logo-title { font-size: 14px; letter-spacing: 0.5px; }
            .site-logo-subtitle { display: none; }
            .header-actions { gap: 6px; }
            .header-coffee { width: 32px; height: 32px; padding: 0; justify-content: center; }
            .header-coffee-text { display: none; }
            .category-picker { gap: 6px; }
            .category-picker .cat-pill { font-size: 10px; padding: 6px 8px; }
            .category-picker .material-symbols-outlined { display: none; }
            .category-more { min-width: 92px; }
            .category-picker select { font-size: 11px; }
        }

        /* Apariencia compartida: colores suaves, avisos y etiquetas por categoria. */
        .theme-toggle {
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            min-height: 32px; padding: 6px 10px; border: 1px solid #465067;
            border-radius: 9999px; color: #e2e8f0; background: #252b39;
            font-size: 11px; font-weight: 600; cursor: pointer;
        }
        .theme-toggle .material-symbols-outlined { font-size: 18px; }
        .theme-toggle:focus-visible { outline: 2px solid #c48290; outline-offset: 3px; }
        .category-badge { --badge-rgb: 148,163,184; --badge-color: #cbd5e1;
            background: rgba(var(--badge-rgb), .12); color: var(--badge-color);
            border-color: rgba(var(--badge-rgb), .28); }
        .category-badge[data-category="all"], .category-badge[data-category="allyoutube"] { --badge-rgb:168,82,99; --badge-color:#d499a6; }
        .category-badge[data-category="music"] { --badge-rgb:236,72,153; --badge-color:#f472b6; }
        .category-badge[data-category="sports"] { --badge-rgb:16,185,129; --badge-color:#34d399; }
        .category-badge[data-category="gaming"] { --badge-rgb:168,85,247; --badge-color:#c084fc; }
        .category-badge[data-category="funny"] { --badge-rgb:245,158,11; --badge-color:#fbbf24; }
        .category-badge[data-category="trailers"] { --badge-rgb:59,130,246; --badge-color:#60a5fa; }
        .category-badge[data-category="tiktok"] { --badge-rgb:6,182,212; --badge-color:#22d3ee; }
        .category-badge[data-category="zero"] { --badge-rgb:239,68,68; --badge-color:#f87171; }
        .modal-surface { background: #293345 !important; border-color: #526079 !important;
            box-shadow: 0 20px 70px rgba(0,0,0,.45); }
        #video-language-modal, #report-modal { background: rgba(5,10,20,.58); }
        .toast-notice { z-index: 100; max-width: min(360px, calc(100vw - 24px));
            background: #43526b; color: #fff; border: 1px solid #7e91af;
            box-shadow: 0 8px 24px rgba(0,0,0,.22); pointer-events: none; }
        #toast-icon { color: #bddfd3; }
        @media (max-width: 1023px) { .sidebar-push-card { display: none; } }
        @media (max-width: 1199px) { .theme-toggle-label { display: none; } .theme-toggle { width: 32px; padding: 5px; } }
        @media (max-width: 360px) { .site-logo-title { font-size: 12px; } .site-logo { gap: 6px; } .site-logo-symbol { width: 26px; height: 26px; } }

        /* Modo claro: lienzo blanco, tarjetas gris suave y texto legible. */
        html[data-theme="light"] { color-scheme: light; --bg-main: #ffffff; --bg-card: #f6f7f9; --border-subtle: #d9dee6; }
        html[data-theme="light"] body { color: #263244; }
        html[data-theme="light"] .header-fixed { background: rgba(255,255,255,.96); }
        html[data-theme="light"] .theme-toggle { background: #f0f2f5; color: #334155; border-color: #cfd6df; }
        html[data-theme="light"] .text-white { color: #243044; }
        html[data-theme="light"] .text-slate-200,
        html[data-theme="light"] .text-slate-300 { color: #425166; }
        html[data-theme="light"] .text-slate-400,
        html[data-theme="light"] .text-slate-500 { color: #5e6c7d; }
        html[data-theme="light"] .text-slate-600 { color: #697789; }
        html[data-theme="light"] .text-rose-300 { color: #a94b5b; }
        html[data-theme="light"] .text-amber-400 { color: #93651a; }
        html[data-theme="light"] [class~="bg-slate-800"] { background: #e9edf2; }
        html[data-theme="light"] [class~="bg-[#14161e]"],
        html[data-theme="light"] [class~="bg-[#12141a]"],
        html[data-theme="light"] [class~="bg-[#161821]"],
        html[data-theme="light"] [class~="bg-[#101217]"] { background: #f6f7f9; }
        html[data-theme="light"] [class~="bg-[#1a1c24]"],
        html[data-theme="light"] [class~="bg-[#1e222d]"],
        html[data-theme="light"] [class~="bg-[#202431]"],
        html[data-theme="light"] [class~="bg-[#212532]"],
        html[data-theme="light"] [class~="bg-[#0f1117]"] { background: #edf0f4; }
        html[data-theme="light"] [class*="border-[#"] { border-color: #d8dee7; }
        html[data-theme="light"] .sidebar-push-card { background-image: none; background-color: #f6f7f9; }
        html[data-theme="light"] .banner-ad { background: #f6f7f9; border-color: #c9d1dd; }
        html[data-theme="light"] .category-picker select { background: #edf0f4; color: #334155; border-color: #d8dee7; }
        html[data-theme="light"] .modal-surface { background: #f8fafc !important; border-color: #c1ccd9 !important; }
        html[data-theme="light"] .toast-notice { background: #e7eef9; color: #243c61; border-color: #b5c7e2; }
        html[data-theme="light"] #toast-icon { color: #27765d; }
        html[data-theme="light"] .btn-neon,
        html[data-theme="light"] .btn-neon .text-white,
        html[data-theme="light"] .cat-all,
        html[data-theme="light"] #roulette-loader .text-white { color: #ffffff; }
        html[data-theme="light"] .btn-neon:hover { color: #ffffff; }
        html[data-theme="light"] .custom-scroll::-webkit-scrollbar-thumb { background: #b8c2cf; }
        html[data-theme="light"] .cat-music, html[data-theme="light"] .category-badge[data-category="music"] { color: #a72d71; --badge-color: #a72d71; }
        html[data-theme="light"] .cat-sports, html[data-theme="light"] .category-badge[data-category="sports"] { color: #087553; --badge-color: #087553; }
        html[data-theme="light"] .cat-gaming, html[data-theme="light"] .category-badge[data-category="gaming"] { color: #7736b7; --badge-color: #7736b7; }
        html[data-theme="light"] .cat-funny, html[data-theme="light"] .category-badge[data-category="funny"] { color: #925a04; --badge-color: #925a04; }
        html[data-theme="light"] .cat-trailers, html[data-theme="light"] .category-badge[data-category="trailers"] { color: #245ca8; --badge-color: #245ca8; }
        html[data-theme="light"] .cat-tiktok, html[data-theme="light"] .category-badge[data-category="tiktok"] { color: #08768b; --badge-color: #08768b; }
        html[data-theme="light"] .cat-zero, html[data-theme="light"] .category-badge[data-category="zero"] { color: #af4047; --badge-color: #af4047; }
        html[data-theme="light"] .category-badge[data-category="all"], html[data-theme="light"] .category-badge[data-category="allyoutube"] { --badge-color: #9c4659; }
        /* Categorias compactas; las cuentas de usuario se anadiran a header-actions. */
        #categoryNav { gap: 4px; }
        #categoryNav .cat-pill { flex-shrink: 0; }
        #categoryNav .material-symbols-outlined { font-size: 16px; }
        .cat-whatsapp { background: rgba(34,197,94,0.12); color: #4ade80; border-color: rgba(34,197,94,0.28); }
        .cat-whatsapp:hover, .cat-whatsapp.active { background: rgba(34,197,94,0.25); border-color: #4ade80; color: #fff; }
        .category-badge[data-category="whatsapp"] { --badge-rgb:34,197,94; --badge-color:#4ade80; }
        html[data-theme="light"] .cat-whatsapp, html[data-theme="light"] .category-badge[data-category="whatsapp"] { color: #16753b; --badge-color: #16753b; }
        .cat-instagram { background: rgba(217,70,239,0.12); color: #e879f9; border-color: rgba(217,70,239,0.28); }
        .cat-instagram:hover, .cat-instagram.active { background: rgba(217,70,239,0.25); border-color: #e879f9; color: #fff; }
        .category-badge[data-category="instagram"] { --badge-rgb:217,70,239; --badge-color:#e879f9; }
        html[data-theme="light"] .cat-instagram, html[data-theme="light"] .category-badge[data-category="instagram"] { color: #9831a8; --badge-color: #9831a8; }
        .cat-facebook { background: rgba(59,130,246,0.12); color: #60a5fa; border-color: rgba(59,130,246,0.28); }
        .cat-facebook:hover, .cat-facebook.active { background: rgba(59,130,246,0.25); border-color: #60a5fa; color: #fff; }
        .category-badge[data-category="facebook"] { --badge-rgb:59,130,246; --badge-color:#60a5fa; }
        html[data-theme="light"] .cat-facebook, html[data-theme="light"] .category-badge[data-category="facebook"] { color: #245db5; --badge-color: #245db5; }
        /* Acceso de usuario compacto para no desplazar las categorias. */
        .account-actions { display:flex; align-items:center; gap:5px; }
        .account-link { display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:6px 8px; border:1px solid #465067; border-radius:9999px; color:#dbe2ee; background:#232a38; font-size:11px; font-weight:600; white-space:nowrap; }
        .account-link:hover { background:#303a4c; }
        .account-link:focus-visible { outline:2px solid #c47285; outline-offset:3px; }
        .account-link .material-symbols-outlined { font-size:17px; }
        html[data-theme="light"] .account-link { background:#eef1f6; color:#39465b; border-color:#cbd3df; }
        html[data-theme="light"] .account-link:hover { background:#e1e7f0; }
        @media (max-width:1799px) { .account-link-label { display:none; } .account-link { width:30px; height:30px; padding:4px; } }
        @media (max-width:479px) { .header-actions { gap:4px; } .account-actions { gap:3px; } }
        #account-save-modal { background:rgba(5,10,20,.65); align-items:center; justify-content:center; padding:18px; }
        #account-save-modal:not(.hidden) { display:flex; }
        .save-modal-card { position:relative; width:100%; max-width:420px; max-height:90vh; overflow:auto; padding:28px; border-radius:16px; background:#252d3d; color:#eef1f7; border:1px solid #48546a; box-shadow:0 20px 60px #0006; }
        .save-modal-card h2 { font-size:20px; font-weight:700; margin:0 22px 18px 0; }
        .save-modal-card label { display:block; font-size:13px; margin:12px 0 5px; }
        .save-modal-card input { width:100%; padding:10px; border:1px solid #536078; border-radius:8px; background:#171e2b; color:#fff; }
        .save-modal-card a { display:block; margin-top:14px; color:#e7a3b5; font-size:13px; }
        #saveLoginSubmit { width:100%; background:#a85269; color:white; padding:11px; border-radius:8px; margin-top:10px; }
        #saveLoginError { color:#ffbac6; font-size:13px; margin-top:12px; }
        .save-modal-close { position:absolute; right:14px; top:8px; font-size:28px; }
        html[data-theme="light"] .save-modal-card { background:#f3f5fa; color:#243044; border-color:#c4cddb; }
        html[data-theme="light"] .save-modal-card input { background:#fff; color:#243044; border-color:#bdc8d8; }
        html[data-theme="light"] .save-modal-card a, html[data-theme="light"] #saveLoginError { color:#953e58; }
        #saveVideoBtn:disabled { opacity:.6; cursor:wait; }
        @media(max-width:640px) { #saveVideoBtn { padding:8px; } }
        /* Movil: esconder solo el texto de las cuatro acciones, no sus iconos. */
        @media(max-width:640px) {
            #videoActions { gap:7px; flex-wrap:nowrap; justify-content:flex-end; max-width:100%; }
            #videoActions > button { flex:0 0 38px; width:38px; height:38px; padding:8px; justify-content:center; }
            #videoActions > button > span:not(.material-symbols-outlined):not(.icon-spin-target) { display:none; }
            #videoActions #pushVideoBtn { margin-left:3px; }
        }
        #list-save-modal { background:rgba(5,10,20,.65); padding:18px; align-items:center; justify-content:center; }
        #list-save-modal:not(.hidden) { display:flex; }
        #list-save-modal select { width:100%; padding:10px; border-radius:8px; border:1px solid #536078; background:#171e2b; color:#fff; margin:12px 0; }
        #list-save-modal .list-modal-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
        #list-save-modal .list-modal-actions button { background:#a85269; color:white; border-radius:8px; padding:9px 12px; }
        #list-save-modal .list-modal-note { font-size:13px; margin-top:10px; }
        html[data-theme="light"] #list-save-modal select { background:#fff; color:#243044; border-color:#bdc8d8; }
    
/* Consentimiento: aceptar y rechazar tienen exactamente el mismo estilo. */
#cookie-panel[hidden], #cookie-details[hidden], #youtube-consent-placeholder[hidden] {display:none!important;}
#cookie-panel {position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:16px;}
.cookie-card {width:min(640px,100%);max-height:90vh;overflow:auto;background:#202431;color:#e5e7eb;border:1px solid #485065;border-radius:18px;padding:24px;box-shadow:0 20px 80px #0006;}
.cookie-card h2 {font-size:22px;font-weight:700;margin-bottom:12px;}
.cookie-card p {font-size:14px;line-height:1.65;}
.cookie-actions {display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.cookie-actions button,.cookie-open {padding:11px 15px;border:1px solid #64748b;border-radius:9px;font-size:14px;font-weight:600;background:#30394a;color:#fff;cursor:pointer;}
.cookie-actions button:hover,.cookie-open:hover {background:#435169;}
.cookie-choice {display:block;padding:13px 0;border-top:1px solid #485065;font-size:14px;}
.cookie-choice input {width:18px;height:18px;margin-right:8px;accent-color:#ad6170;}
.cookie-choice small {display:block;margin-top:5px;line-height:1.5;}
.cookie-links {display:flex;flex-wrap:wrap;gap:12px;font-size:13px;margin-top:16px;}
.cookie-links a {text-decoration:underline;}
#youtube-consent-placeholder {position:absolute;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;background:#161b27;color:#e5e7eb;}
#youtube-consent-placeholder p {max-width:440px;margin-bottom:14px;font-size:14px;}
html[data-theme=light] .cookie-card {background:#f7f8fc;color:#263244;border-color:#cbd5e1;}
html[data-theme=light] .cookie-actions button,html[data-theme=light] .cookie-open {background:#e7ebf2;color:#263244;border-color:#94a3b8;}
html[data-theme=light] #youtube-consent-placeholder {background:#edf0f5;color:#263244;}

/* Fliis: colores de estilos, compartidos con las etiquetas del historial. */
.cat-pop {background:rgba(236,72,153,.12);color:#f472b6;border-color:rgba(236,72,153,.3);}
.cat-pop:hover,.cat-pop.active {background:rgba(236,72,153,.25);border-color:#f472b6;}
.category-badge[data-category="pop"] {--badge-rgb:236,72,153;--badge-color:#f472b6;}
html[data-theme="light"] .cat-pop,html[data-theme="light"] .category-badge[data-category="pop"] {color:#a72d71;--badge-color:#a72d71;}
.cat-spanish-pop {background:rgba(245,158,11,.12);color:#fbbf24;border-color:rgba(245,158,11,.3);}
.cat-spanish-pop:hover,.cat-spanish-pop.active {background:rgba(245,158,11,.25);border-color:#fbbf24;}
.category-badge[data-category="spanish-pop"] {--badge-rgb:245,158,11;--badge-color:#fbbf24;}
html[data-theme="light"] .cat-spanish-pop,html[data-theme="light"] .category-badge[data-category="spanish-pop"] {color:#925a04;--badge-color:#925a04;}
.cat-rock {background:rgba(139,92,246,.12);color:#a78bfa;border-color:rgba(139,92,246,.3);}
.cat-rock:hover,.cat-rock.active {background:rgba(139,92,246,.25);border-color:#a78bfa;}
.category-badge[data-category="rock"] {--badge-rgb:139,92,246;--badge-color:#a78bfa;}
html[data-theme="light"] .cat-rock,html[data-theme="light"] .category-badge[data-category="rock"] {color:#7736b7;--badge-color:#7736b7;}
.cat-yoga {background:rgba(16,185,129,.12);color:#34d399;border-color:rgba(16,185,129,.3);}
.cat-yoga:hover,.cat-yoga.active {background:rgba(16,185,129,.25);border-color:#34d399;}
.category-badge[data-category="yoga"] {--badge-rgb:16,185,129;--badge-color:#34d399;}
html[data-theme="light"] .cat-yoga,html[data-theme="light"] .category-badge[data-category="yoga"] {color:#087553;--badge-color:#087553;}
.cat-classical {background:rgba(59,130,246,.12);color:#60a5fa;border-color:rgba(59,130,246,.3);}
.cat-classical:hover,.cat-classical.active {background:rgba(59,130,246,.25);border-color:#60a5fa;}
.category-badge[data-category="classical"] {--badge-rgb:59,130,246;--badge-color:#60a5fa;}
html[data-theme="light"] .cat-classical,html[data-theme="light"] .category-badge[data-category="classical"] {color:#245ca8;--badge-color:#245ca8;}
.cat-indie {background:rgba(6,182,212,.12);color:#22d3ee;border-color:rgba(6,182,212,.3);}
.cat-indie:hover,.cat-indie.active {background:rgba(6,182,212,.25);border-color:#22d3ee;}
.category-badge[data-category="indie"] {--badge-rgb:6,182,212;--badge-color:#22d3ee;}
html[data-theme="light"] .cat-indie,html[data-theme="light"] .category-badge[data-category="indie"] {color:#08768b;--badge-color:#08768b;}
.cat-hip-hop {background:rgba(236,72,153,.12);color:#f472b6;border-color:rgba(236,72,153,.3);}
.cat-hip-hop:hover,.cat-hip-hop.active {background:rgba(236,72,153,.25);border-color:#f472b6;}
.category-badge[data-category="hip-hop"] {--badge-rgb:236,72,153;--badge-color:#f472b6;}
html[data-theme="light"] .cat-hip-hop,html[data-theme="light"] .category-badge[data-category="hip-hop"] {color:#a72d71;--badge-color:#a72d71;}
.cat-reggae {background:rgba(245,158,11,.12);color:#fbbf24;border-color:rgba(245,158,11,.3);}
.cat-reggae:hover,.cat-reggae.active {background:rgba(245,158,11,.25);border-color:#fbbf24;}
.category-badge[data-category="reggae"] {--badge-rgb:245,158,11;--badge-color:#fbbf24;}
html[data-theme="light"] .cat-reggae,html[data-theme="light"] .category-badge[data-category="reggae"] {color:#925a04;--badge-color:#925a04;}
.cat-punk {background:rgba(139,92,246,.12);color:#a78bfa;border-color:rgba(139,92,246,.3);}
.cat-punk:hover,.cat-punk.active {background:rgba(139,92,246,.25);border-color:#a78bfa;}
.category-badge[data-category="punk"] {--badge-rgb:139,92,246;--badge-color:#a78bfa;}
html[data-theme="light"] .cat-punk,html[data-theme="light"] .category-badge[data-category="punk"] {color:#7736b7;--badge-color:#7736b7;}
.cat-dance {background:rgba(16,185,129,.12);color:#34d399;border-color:rgba(16,185,129,.3);}
.cat-dance:hover,.cat-dance.active {background:rgba(16,185,129,.25);border-color:#34d399;}
.category-badge[data-category="dance"] {--badge-rgb:16,185,129;--badge-color:#34d399;}
html[data-theme="light"] .cat-dance,html[data-theme="light"] .category-badge[data-category="dance"] {color:#087553;--badge-color:#087553;}
.cat-heavy-metal {background:rgba(59,130,246,.12);color:#60a5fa;border-color:rgba(59,130,246,.3);}
.cat-heavy-metal:hover,.cat-heavy-metal.active {background:rgba(59,130,246,.25);border-color:#60a5fa;}
.category-badge[data-category="heavy-metal"] {--badge-rgb:59,130,246;--badge-color:#60a5fa;}
html[data-theme="light"] .cat-heavy-metal,html[data-theme="light"] .category-badge[data-category="heavy-metal"] {color:#245ca8;--badge-color:#245ca8;}
.cat-country {background:rgba(6,182,212,.12);color:#22d3ee;border-color:rgba(6,182,212,.3);}
.cat-country:hover,.cat-country.active {background:rgba(6,182,212,.25);border-color:#22d3ee;}
.category-badge[data-category="country"] {--badge-rgb:6,182,212;--badge-color:#22d3ee;}
html[data-theme="light"] .cat-country,html[data-theme="light"] .category-badge[data-category="country"] {color:#08768b;--badge-color:#08768b;}
.cat-soundtrack {background:rgba(236,72,153,.12);color:#f472b6;border-color:rgba(236,72,153,.3);}
.cat-soundtrack:hover,.cat-soundtrack.active {background:rgba(236,72,153,.25);border-color:#f472b6;}
.category-badge[data-category="soundtrack"] {--badge-rgb:236,72,153;--badge-color:#f472b6;}
html[data-theme="light"] .cat-soundtrack,html[data-theme="light"] .category-badge[data-category="soundtrack"] {color:#a72d71;--badge-color:#a72d71;}
.cat-30s {background:rgba(245,158,11,.12);color:#fbbf24;border-color:rgba(245,158,11,.3);}
.cat-30s:hover,.cat-30s.active {background:rgba(245,158,11,.25);border-color:#fbbf24;}
.category-badge[data-category="30s"] {--badge-rgb:245,158,11;--badge-color:#fbbf24;}
html[data-theme="light"] .cat-30s,html[data-theme="light"] .category-badge[data-category="30s"] {color:#925a04;--badge-color:#925a04;}
.cat-40s {background:rgba(139,92,246,.12);color:#a78bfa;border-color:rgba(139,92,246,.3);}
.cat-40s:hover,.cat-40s.active {background:rgba(139,92,246,.25);border-color:#a78bfa;}
.category-badge[data-category="40s"] {--badge-rgb:139,92,246;--badge-color:#a78bfa;}
html[data-theme="light"] .cat-40s,html[data-theme="light"] .category-badge[data-category="40s"] {color:#7736b7;--badge-color:#7736b7;}
.cat-50s {background:rgba(16,185,129,.12);color:#34d399;border-color:rgba(16,185,129,.3);}
.cat-50s:hover,.cat-50s.active {background:rgba(16,185,129,.25);border-color:#34d399;}
.category-badge[data-category="50s"] {--badge-rgb:16,185,129;--badge-color:#34d399;}
html[data-theme="light"] .cat-50s,html[data-theme="light"] .category-badge[data-category="50s"] {color:#087553;--badge-color:#087553;}
.cat-60s {background:rgba(59,130,246,.12);color:#60a5fa;border-color:rgba(59,130,246,.3);}
.cat-60s:hover,.cat-60s.active {background:rgba(59,130,246,.25);border-color:#60a5fa;}
.category-badge[data-category="60s"] {--badge-rgb:59,130,246;--badge-color:#60a5fa;}
html[data-theme="light"] .cat-60s,html[data-theme="light"] .category-badge[data-category="60s"] {color:#245ca8;--badge-color:#245ca8;}
.cat-70s {background:rgba(6,182,212,.12);color:#22d3ee;border-color:rgba(6,182,212,.3);}
.cat-70s:hover,.cat-70s.active {background:rgba(6,182,212,.25);border-color:#22d3ee;}
.category-badge[data-category="70s"] {--badge-rgb:6,182,212;--badge-color:#22d3ee;}
html[data-theme="light"] .cat-70s,html[data-theme="light"] .category-badge[data-category="70s"] {color:#08768b;--badge-color:#08768b;}
.cat-80s {background:rgba(236,72,153,.12);color:#f472b6;border-color:rgba(236,72,153,.3);}
.cat-80s:hover,.cat-80s.active {background:rgba(236,72,153,.25);border-color:#f472b6;}
.category-badge[data-category="80s"] {--badge-rgb:236,72,153;--badge-color:#f472b6;}
html[data-theme="light"] .cat-80s,html[data-theme="light"] .category-badge[data-category="80s"] {color:#a72d71;--badge-color:#a72d71;}
.cat-90s {background:rgba(245,158,11,.12);color:#fbbf24;border-color:rgba(245,158,11,.3);}
.cat-90s:hover,.cat-90s.active {background:rgba(245,158,11,.25);border-color:#fbbf24;}
.category-badge[data-category="90s"] {--badge-rgb:245,158,11;--badge-color:#fbbf24;}
html[data-theme="light"] .cat-90s,html[data-theme="light"] .category-badge[data-category="90s"] {color:#925a04;--badge-color:#925a04;}
.cat-00s {background:rgba(139,92,246,.12);color:#a78bfa;border-color:rgba(139,92,246,.3);}
.cat-00s:hover,.cat-00s.active {background:rgba(139,92,246,.25);border-color:#a78bfa;}
.category-badge[data-category="00s"] {--badge-rgb:139,92,246;--badge-color:#a78bfa;}
html[data-theme="light"] .cat-00s,html[data-theme="light"] .category-badge[data-category="00s"] {color:#7736b7;--badge-color:#7736b7;}
.cat-modern-jukebox {background:rgba(16,185,129,.12);color:#34d399;border-color:rgba(16,185,129,.3);}
.cat-modern-jukebox:hover,.cat-modern-jukebox.active {background:rgba(16,185,129,.25);border-color:#34d399;}
.category-badge[data-category="modern-jukebox"] {--badge-rgb:16,185,129;--badge-color:#34d399;}
html[data-theme="light"] .cat-modern-jukebox,html[data-theme="light"] .category-badge[data-category="modern-jukebox"] {color:#087553;--badge-color:#087553;}

/* 22 estilos necesitan el menu de segunda fila tambien en escritorio. */
.site-header-row .nav-categories {display:none!important;}
.category-picker {display:flex!important;}

/* Fliis: 8 selecciones desde 1100px; en pantallas menores 3 + Ver mas. */
.category-picker .genre-extra {display:none;}
@media (min-width:1100px) {
    .category-picker .genre-extra {display:inline-flex;}
    .category-picker {gap:8px;}
    .category-picker .cat-pill {font-size:11px;padding:7px 10px;}
}
/* Botones musicales: turquesa suave, texto blanco con buen contraste. */
[data-next-song-button] {background:linear-gradient(135deg,#197b78,#176a70)!important;box-shadow:0 3px 12px rgba(25,123,120,.18)!important;}
[data-next-song-button]:hover {background:linear-gradient(135deg,#218985,#1a777d)!important;}
[data-next-song-button]:focus-visible {outline:3px solid #7dd3cf;outline-offset:3px;}
[data-next-song-text] {line-height:1.3;}
.fliis-next-icon {display:block;object-fit:contain;flex-shrink:0;}
@media (max-width:640px) {.fliis-next-icon {width:25px;height:25px;}}
@media (prefers-reduced-motion:reduce) {
    .fliis-next-icon {content:url('/assets/fliis-favicon.svg');}
}