:root{
        --bg-1:#000;
        --glass-bg: rgba(28,28,30,0.42);
        --glass-border: rgba(255,255,255,0.07);
        --text-light:#fff;
        --text-dim:#cfcfd1;
        --accent:#4da3ff;
        --ui-radius:14px;
        --safe-top: env(safe-area-inset-top, 12px);
        --safe-bottom: env(safe-area-inset-bottom, 12px);
    }

    /* Reset */
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{
        /* Impide el zoom en iOS al tocar */
    touch-action: pan-y; 
    /* El -webkit-overflow-scrolling: touch permite un desplazamiento inercial mejor en iOS */
    -webkit-overflow-scrolling: touch;
        font-family: -apple-system, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;
        background: linear-gradient(180deg, #000 0%, #050505 100%);
        color:var(--text-light);
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
        overflow:hidden;
    }

    /* Smooth behaviour */
    html { scroll-behavior: smooth; }

    /* CONTAINER PRINCIPAL (scroll tipo TikTok) */
    #tiktok-scroll-container {
        height: 100vh;
        overflow-y: auto;
        /* SCROLL-SNAP MODIFICADO: No es obligatorio, se manejará por JS */
        /* scroll-snap-type: y mandatory; */ 
        -webkit-overflow-scrolling: touch;
    }
    #tiktok-scroll-container::-webkit-scrollbar { width: 0; height: 0; }

    /* Cada "página" es un vídeo */
    .video-page {
        height: 100vh;
        scroll-snap-align: start;
        position:relative;
        display:flex;
        align-items:stretch;
        justify-content:stretch;
        background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35));
    }
    
    /* PARTES DE UN VIDEO: Usaremos estas secciones internas para el scroll de partes */
    .video-page .part-section {
        height: 100vh;
        width: 100%;
        scroll-snap-align: start;
        position: relative;
    }

    /* IFRAME (fijo en pantalla, se controla por JS) */
    #player-frame {
        position:fixed;
        inset:0;
        width:100%;
        height:100%;
        border:0;
        background:#000;
        z-index:1;
        pointer-events:none; /* control por JS/overlay */
        
        /* MEJORA 1: Iframe inicialmente oculto, transición para aparecer */
        opacity: 0; 
        transition: opacity 0.3s ease-in-out;
    }
    #player-frame.active {
        opacity: 1; 
    }

    /* Cada página tiene miniatura visible debajo del iframe para "efecto" */
    .page-inner {
        position:relative;
        width:100%;
        height:100%;
        display:block;
        z-index:0;
        overflow:hidden;
    }
    .page-thumb {
        position:absolute;
        inset:0;
        background-size:cover;
        background-position:center center;
        filter: blur(0.6px) saturate(0.95);
        transform: scale(1.02);
        transition: filter 0.3s ease; /* Transición para el desenfoque */
    }
    
    /* MEJORA 2: La miniatura se desenfoca cuando el video está activo */
    .video-page.active .page-thumb {
        filter: blur(5px) saturate(0.5); 
    }

    /* MEJORA 3: Indicador de carga sobre el thumbnail */
    .video-page.loading .page-thumb::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border: 4px solid var(--text-light);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        z-index: 10;
    }
    @keyframes spin {
        to { transform: translate(-50%, -50%) rotate(360deg); }
    }


    /* overlay info por página */
    .page-overlay {
        position:absolute;
        left:12px;
        right:12px;
        bottom:110px;
        z-index:3;
        display:flex;
        justify-content:space-between;
        gap:12px;
        align-items:flex-end;
    }
    .page-title {
        max-width:70%;
        font-size:18px;
        font-weight:700;
        text-shadow: 0 8px 30px rgba(0,0,0,0.7);
    }
    .page-meta {
        font-size:13px;
        color:var(--text-dim);
        text-shadow: 0 6px 18px rgba(0,0,0,0.6);
    }

    /* APPBAR (top) */
    #appbar{
        position:fixed;
        left:0;
        right:0;
        top:calc(var(--safe-top) + 8px);
        height:56px;
        margin:0 12px;
        display:flex;
        align-items:center;
        gap:12px;
        padding:8px;
        border-radius:12px;
        backdrop-filter: blur(14px) saturate(1.1);
        background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
        border:1px solid var(--glass-border);
        z-index:40;
        transition: top .36s cubic-bezier(.2,.9,.2,1), opacity .3s;
    }
    #title-bar{
        font-weight:600;
        font-size:16px;
        flex:1;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        color:var(--text-light);
    }
    .app-btn{
        min-width:44px;
        height:44px;
        display:inline-grid;
        place-items:center;
        padding:6px;
        border-radius:10px;
        background: rgba(255,255,255,0.02);
        border:1px solid rgba(255,255,255,0.04);
        color:var(--text-light);
        cursor:pointer;
        transition: transform .12s ease, background .12s;
        font-size:18px;
        z-index: 45;
    }
    .app-btn:active{transform:scale(.96)}
    .app-btn--accent{
        background: linear-gradient(180deg, rgba(77,163,255,0.12), rgba(77,163,255,0.06));
        border:1px solid rgba(77,163,255,0.18);
        color:var(--accent);
    }

    /* PARTS DRAWER (right) */
    #parts-menu{
        position:fixed;
        top:0; right:0;
        height:100%;
        width:300px;
        padding-top:96px;
        padding-left:12px;
        padding-right:12px;
        transform:translateX(100%);
        transition: transform .34s cubic-bezier(.2,.9,.2,1);
        background: linear-gradient(180deg, rgba(18,18,20,0.96), rgba(12,12,14,0.98));
        border-left:1px solid rgba(255,255,255,0.03);
        z-index:60;
        overflow:auto;
    }
    #parts-menu.open{transform:translateX(0)}
    .part-item{
        padding:12px 14px;
        margin-bottom:8px;
        border-radius:10px;
        color:var(--text-light);
        font-size:15px;
        background:transparent;
        border:1px solid rgba(255,255,255,0.02);
        cursor:pointer;
    }
    .part-item.active{background:rgba(255,255,255,0.06); font-weight:600}

    /* SOUND PROMPT (central) */
    #sound-btn{
        position:fixed;
        inset:0;
        display:flex;
        align-items:center;
        justify-content:center;
        z-index:50;
        font-size:20px;
        background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.75));
        color:var(--text-light);
        cursor:pointer;
        padding:20px;
    }

    /* Prev/Next circular */
    #prev-video-btn,#next-video-btn{
        position:fixed;
        top:50%;
        transform:translateY(-50%);
        width:52px;height:52px;border-radius:999px;
        display:grid;place-items:center;
        background:var(--glass-bg);border:1px solid var(--glass-border);
        color:var(--text-light);font-size:20px;cursor:pointer;z-index:45;opacity:0;pointer-events:none;transition:opacity .24s;
    }
    #prev-video-btn.visible,#next-video-btn.visible{opacity:1;pointer-events:auto}
    #prev-video-btn{left:10px}#next-video-btn{right:10px}

    /* EXPLORE & SEARCH PANELS (full screen slides up) */
    #explore-panel,#search-panel{
        position:fixed;left:0;right:0;bottom:0;top:0;
        padding:84px 12px 20px;
        background: linear-gradient(180deg, rgba(6,6,8,0.88), rgba(10,10,12,0.96));
        transform:translateY(110%);
        transition:transform .36s cubic-bezier(.2,.9,.2,1);
        z-index:55;overflow:auto;
    }
    #explore-panel.open,#search-panel.open{transform:translateY(0)}

    /* Thumbnails grid — ALWAYS 2 columns on small screens (320px) */
    #thumbnails-container,#search-results{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .thumbnail-wrapper{
        border-radius:12px;overflow:hidden;
        background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
        border:1px solid rgba(255,255,255,0.03);
        box-shadow: 0 6px 30px rgba(0,0,0,0.45);
        transition: transform .12s ease, box-shadow .12s;
        position:relative;
    }
    .thumbnail-wrapper:active{transform:scale(.98)}
    .thumbnail-wrapper img{width:100%;height:auto;display:block}
    .thumbnail-overlay{
        position:absolute;left:0;right:0;bottom:0;padding:8px 10px;
        background: linear-gradient(transparent, rgba(0,0,0,0.84));
        color:var(--text-light);font-size:13px;font-weight:700;
    }

    /* BOTTOM UI (controls) */
    #bottom-ui{
        position:fixed;
        left:12px;
        right:12px;
        bottom:calc(var(--safe-bottom) + 12px);
        padding:12px;
        border-radius:14px;
        display:flex;
        flex-direction:column;
        gap:10px;
        align-items:stretch;
        backdrop-filter: blur(18px);
        background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
        border:1px solid var(--glass-border);
        z-index:45;
        transition: opacity .36s ease;
    }
    .progress-container{width:100%;height:8px;background: rgba(255,255,255,0.04);border-radius:999px;overflow:hidden}
    #progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent), #7ed1ff);transition:width .25s linear}

    .controls-row{display:flex;gap:8px;align-items:center}
    .control-btn{flex:1;display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:10px;border-radius:12px;background: rgba(255,255,255,0.02);color:var(--text-light);border:1px solid rgba(255,255,255,0.03);cursor:pointer;font-weight:600;font-size:14px}
    .control-btn:active{transform:scale(.97)}

    /* Ads small */
    #ad-container{display:flex;flex-direction:row;gap:10px;overflow:auto;padding:6px 0}
    .ad-box{min-width:180px;height:56px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;padding:6px;color:var(--text-dim)}
        /* Agrega este nuevo estilo para centrar el anuncio en los paneles */
/* Mantengo el estilo que agregamos para centrar el anuncio en los paneles */
        .ad-container-panel {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px auto; 
            min-height: 250px; /* Para que reserve espacio */
            max-width: 300px;
        }

        /* --- Regla para solucionar el Scroll en Móviles --- */
.panel {
    -webkit-overflow-scrolling: touch; /* Clave para iOS */
    overflow-y: auto;                  /* Asegura el scroll vertical */
    height: 100%;                      /* Asegura que el panel use toda la altura disponible */
    box-sizing: border-box;            /* Asegura que padding no cause desbordamiento */
}

/* styles.css (Asegúrate que estas propiedades estén en los selectores de los paneles) */

#explore-panel, 
#search-panel, 
#parts-menu {
    /* (Otras propiedades de posicionamiento, color, etc.) */
    
    height: 100%; 
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* 🔑 SOLUCIÓN PARA DISPOSITIVOS MÓVILES */
}

/* Y si tienes un panel de video (ej. #video-panel): */
#video-panel {
    /* ... */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    /* Small screens adjustments */
    @media (max-width:420px){
        #parts-menu{width:260px}
        #appbar{margin:0 10px;padding:6px;height:52px;border-radius:12px}
        #title-bar{font-size:15px}
        .control-btn{font-size:13px;padding:9px;border-radius:10px}
        #bottom-ui{left:10px;right:10px;padding:10px;border-radius:12px}
        #thumbnails-container,#search-results{gap:10px}
    }

    /* Ajustes para pantallas medianas (ej. tabletas en landscape) */
    @media (min-width: 600px) {
        #thumbnails-container, #search-results {
        /* 3 columnas en pantallas medianas */
        grid-template-columns: repeat(3, 1fr);
        }
    }

    /* Ajustes para pantallas grandes (ej. desktop) */
    @media (min-width: 1024px) {
        #explore-panel, #search-panel {
        /* Hacer el panel flotar a la izquierda/derecha para no cubrir toda la vista */
        max-width: 600px;
        left: 50%;
        transform: translate(-50%, 110%);
        top: 0;
        bottom: 0;
        padding-top: 96px;
        border-radius: 16px;
        margin: 12px auto; /* Centrar el panel */
        height: calc(100vh - 24px); /* Ajuste de altura */
        }
        #explore-panel.open, #search-panel.open {
        /* Posición final de apertura en desktop */
        transform: translate(-50%, 0%);
        }
        #thumbnails-container, #search-results {
        /* 4 columnas en desktop */
        grid-template-columns: repeat(4, 1fr);
        }
    }
    
    /* Nueva regla CSS para el contenedor interno de cada video-page */
    .video-page-parts-container {
        width: 100%;
        height: 100vh;
        overflow-y: auto; /* Permite el scroll vertical dentro de esta sección */
        scroll-snap-type: y mandatory; /* Habilita el snap para las partes */
        -webkit-overflow-scrolling: touch; /* 🔑 SOLUCIÓN CLAVE PARA MÓVILES */
    }
    .video-page-parts-container::-webkit-scrollbar { width: 0; height: 0; }

    #ad-container {
    overflow: hidden !important;
}

/* Estilos para el botón de carga paginada */
.load-more-button {
    width: 90%; /* Ocupa casi todo el ancho */
    max-width: 400px; /* Ancho máximo para pantallas grandes */
    margin: 30px auto; /* Centrado y con margen */
    padding: 15px 30px;
    background-color: var(--primary-color, #007bff); /* Color primario o azul */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    display: block; /* Para que margin: auto funcione */
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative; /* Asegura que esté en el flujo de scroll */
}

.load-more-button:hover:not([disabled]) {
    background-color: var(--primary-dark-color, #0056b3);
}

.load-more-button:disabled {
    background-color: var(--background-muted, #6c757d);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Asegúrate de que el contenedor de scroll (si es necesario) permita el scroll: */
#tiktok-scroll-container {
    height: 100vh; /* O la altura que uses */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

/* El estilo de .video-page debe mantenerse para el "scroll-snap" */
.video-page {
    /* ... (otros estilos de página) ... */
    scroll-snap-align: start; 
    height: 100vh;
}

   .load-more-button {
            width: 90%; 
            max-width: 400px; 
            margin: 30px auto; 
            padding: 15px 30px;
            background-color: var(--primary-color, #007bff); 
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.1em;
            font-weight: bold;
            display: block; 
            transition: background-color 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center; /* Asegura que el texto esté centrado */
        }
        .load-more-button:hover:not([disabled]) {
            background-color: var(--primary-dark-color, #0056b3);
        }
        .load-more-button:disabled {
            background-color: var(--background-muted, #6c757d);
            cursor: not-allowed;
            opacity: 0.7;
        }
        /* Asegúrate de que los estilos básicos de scroll-snap sigan presentes */
        #tiktok-scroll-container {
            /* ... (otras propiedades de estilo) ... */
            overflow-y: scroll;
        }