:root {
    /* ===== Paleta base (modo oscuro, por defecto) ===== */
    --bg-color: #0d0d0f;
    --card-bg: rgba(20, 20, 25, 0.85);
    --accent-color: #e50914;
    --accent-glow: rgba(229, 9, 20, 0.5);
    --text-color: #ffffff;
    --text-muted: #a0a0a0;
    --text-dim: #999999;
    --glass-bg: rgba(13, 13, 15, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    --overlay-03: rgba(255, 255, 255, 0.03);
    --overlay-04: rgba(255, 255, 255, 0.04);
    --overlay-05: rgba(255, 255, 255, 0.05);
    --overlay-06: rgba(255, 255, 255, 0.06);
    --overlay-08: rgba(255, 255, 255, 0.08);
    --overlay-10: rgba(255, 255, 255, 0.1);
    --overlay-12: rgba(255, 255, 255, 0.12);
    --overlay-15: rgba(255, 255, 255, 0.15);
    --overlay-18: rgba(255, 255, 255, 0.18);
    --overlay-20: rgba(255, 255, 255, 0.2);
    --overlay-40: rgba(255, 255, 255, 0.4);
    --overlay-70: rgba(255, 255, 255, 0.7);

    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.1);

    --placeholder-bg: #1a1a24;
    --shimmer-base: #161616;
    --disabled-bg: #3a3a3a;
}

/* =========================================
   MODO CLARO
   Los degradados y overlays QUE VAN ENCIMA DE FOTOS (hero, backdrops de
   modales, iconos flotantes sobre caratulas) se dejan igual en los dos
   modos a proposito: son para legibilidad sobre la imagen, no decoracion
   del tema.
========================================= */
body.light-theme {
    --bg-color: #f2f2f5;
    --card-bg: rgba(255, 255, 255, 0.95);
    --accent-color: #e50914;
    --accent-glow: rgba(229, 9, 20, 0.35);
    --text-color: #16161a;
    --text-muted: #5a5a63;
    --text-dim: #6b6b73;
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(0, 0, 0, 0.08);

    --overlay-03: rgba(0, 0, 0, 0.03);
    --overlay-04: rgba(0, 0, 0, 0.04);
    --overlay-05: rgba(0, 0, 0, 0.05);
    --overlay-06: rgba(0, 0, 0, 0.06);
    --overlay-08: rgba(0, 0, 0, 0.08);
    --overlay-10: rgba(0, 0, 0, 0.1);
    --overlay-12: rgba(0, 0, 0, 0.12);
    --overlay-15: rgba(0, 0, 0, 0.15);
    --overlay-18: rgba(0, 0, 0, 0.18);
    --overlay-20: rgba(0, 0, 0, 0.2);
    --overlay-40: rgba(0, 0, 0, 0.4);
    --overlay-70: rgba(0, 0, 0, 0.55);

    --input-bg: rgba(0, 0, 0, 0.04);
    --input-border: rgba(0, 0, 0, 0.12);

    --placeholder-bg: #e2e2e7;
    --shimmer-base: #e4e4e8;
    --disabled-bg: #d8d8dc;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Inter', -apple-system, sans-serif; 
    -webkit-tap-highlight-color: transparent;
}

/* 1. Modificamos el body para que sea transparente */
body {
    background: transparent; /* Eliminamos el color sólido que tapa la Aurora */
    color: var(--text-color);
    overflow-x: hidden;
    user-select: none;
    font-weight: 500; /* peso base "premium", ni fino ni exagerado */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

body::-webkit-scrollbar {
    display: none;
}

/* 2. Aplicamos el color de fondo a la Aurora para que actúe como base */
.aurora-bg {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1; /* Mantenemos el z-index negativo pero sobre el fondo */
    background-color: var(--bg-color); /* El color negro ahora vive aquí */
    pointer-events: none;
    /* ... el resto de tus propiedades de gradiente y animación ... */
}

/* =========================================
   HEADER & NAVBAR (Glassmorphism)
========================================= */
.sticky-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

/* Inicio y Mi Cuenta como dos paginas de scroll horizontal nativo con
   scroll-snap (el "iman" y el seguimiento del dedo los maneja el sistema,
   no JS). */
.pages-scroll-container {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.pages-scroll-container::-webkit-scrollbar {
    display: none;
}

.page-panel {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding-bottom: 100px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.page-panel::-webkit-scrollbar {
    display: none;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    max-width: 1400px;
    margin: 0 auto;
    gap: 15px;
}

.logo {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--accent-color);
    letter-spacing: 1px;
    text-shadow: 0 0 10px var(--accent-glow);
}

/* Selector Películas / Series */
.toggle-btn {
    transition: var(--transition);
}
.toggle-btn:not(.active):hover {
    background: var(--overlay-05) !important;
}

/* Agrupa lupa + cuenta cerca una de otra, sin tocarse, ancladas a la derecha */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Boton de lupa solo (estilo Facebook), reemplaza al input fijo del header */
.search-icon-btn {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 6px;
}

/* Ventana de busqueda aparte: pantalla completa, se abre al tocar la lupa */
/* El modal de detalles siempre por encima del overlay de busqueda: asi,
   si se abre un modal desde un resultado, el overlay se queda intacto
   debajo y al cerrar el modal se vuelve directo a la lista de resultados. */
#details-modal {
    z-index: 10500;
}

.search-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-color);
    z-index: 10000; /* por encima del bottom-nav (9999) para que no se vea flotando */
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.search-results-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 20px 30px;
}

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

.search-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--overlay-05);
    cursor: pointer;
    animation: searchItemEnter 0.35s ease backwards;
    will-change: transform;
}

/* Entrada en ola de arriba a abajo (las primeras filas visibles; el resto
   entra sin retraso extra, no hace falta escalonar lo que esta fuera de
   pantalla). */
.search-result-item:nth-child(1) { animation-delay: 0s; }
.search-result-item:nth-child(2) { animation-delay: 0.04s; }
.search-result-item:nth-child(3) { animation-delay: 0.08s; }
.search-result-item:nth-child(4) { animation-delay: 0.12s; }
.search-result-item:nth-child(5) { animation-delay: 0.16s; }
.search-result-item:nth-child(6) { animation-delay: 0.2s; }
.search-result-item:nth-child(7) { animation-delay: 0.24s; }
.search-result-item:nth-child(8) { animation-delay: 0.28s; }

.search-result-poster {
    width: 50px;
    height: 75px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--placeholder-bg);
    flex-shrink: 0;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
}

.search-results-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 20px;
    font-size: 0.9rem;
}

.search-overlay.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.search-overlay-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--glass-border);
}

.search-input-wrapper {
    position: relative;
    flex: 1;
}

#search-input, #pedido-search-input {
    width: 100%;
    padding: 10px 15px 10px 40px;
    background: var(--overlay-06);
    border: 1px solid var(--overlay-10);
    border-radius: 25px;
    color: var(--text-color);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition);
}

#search-input:focus, #pedido-search-input:focus {
    background: var(--overlay-12);
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.2);
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* Menu Horizontal de Categorías */
.genres-menu {
    display: flex;
    gap: 10px;
    padding: 0 20px 12px 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.genres-menu::-webkit-scrollbar {
    display: none;
}

.genre-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--overlay-05);
    border: 1px solid var(--overlay-05);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.genre-btn.active {
    background: var(--accent-color);
    color: var(--text-color);
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px var(--accent-glow);
}

/* =========================================
   NUEVO: PANEL LATERAL DE FILTROS (SIDEBAR)
========================================= */
.sidebar {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100vh;
    background: rgba(15, 15, 20, 0.95);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-left: 1px solid var(--glass-border);
    z-index: 2000;
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.sidebar.active {
    right: 0;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--overlay-10);
    padding-bottom: 15px;
}

.sidebar-header h3 {
    font-size: 1.2rem;
    color: white;
}

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

.filter-group label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.filter-input {
    width: 100%;
    padding: 12px;
    background: var(--overlay-05);
    border: 1px solid var(--overlay-10);
    border-radius: 8px;
    color: white;
    outline: none;
}

.filter-range {
    width: 100%;
    accent-color: var(--accent-color);
}

/* =========================================
   HERO SECTION (Banner Principal)
========================================= */
.hero-section {
    position: relative;
    width: 100%;
    height: 65vh;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-color: transparent;
    
    /* Añade estas tres líneas: */
    border-bottom-left-radius: 30px; 
    border-bottom-right-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4); /* Le da un sombreado premium */
}

/* Carrusel del hero: dos capas de imagen que se turnan el frente, con
   sensacion de profundidad tipo el switcher de Recientes de Android (la
   que sale se achica y se va hacia atras-izquierda, la que entra crece
   desde atras-derecha hacia el centro, al mismo tiempo). */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.hero-bg.hero-layer-front {
    transform: translateX(0) scale(1);
    opacity: 1;
    z-index: 2;
}

.hero-bg.hero-layer-idle-right {
    transform: translateX(22%) scale(0.85);
    opacity: 0;
    z-index: 1;
}

.hero-bg.hero-layer-exit-left {
    transform: translateX(-22%) scale(0.85);
    opacity: 0;
    z-index: 1;
}

/* Shimmer del hero: se ve mientras carga la primera foto, o indefinidamente
   si no hay conexion (en vez del icono de imagen rota + "Hero Background"). */
#hero-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 0;
    transition: opacity 0.4s ease;
}

#hero-skeleton.hero-skeleton-hidden {
    opacity: 0;
    pointer-events: none;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* AQUÍ ESTÁ LA MAGIA: 
       Cambiamos var(--bg-color) por transparencia en la parte de abajo, 
       y oscurecemos un poco la parte media para que el texto siga siendo legible */
    background: linear-gradient(to top, 
        transparent 0%,                /* Abajo del todo: 100% transparente para ver la aurora */
        rgba(13, 13, 15, 0.8) 30%,     /* Medio-abajo: oscuro para que el título resalte */
        rgba(13, 13, 15, 0.4) 60%,     /* Medio-arriba: empieza a clarear */
        rgba(13, 13, 15, 0.1) 100%     /* Arriba: casi transparente para ver la imagen de la película */
    );
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    padding: 30px 20px;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    /* Invisible en reposo: recien se revela con la animacion
       slideInPremium (opacity 0 -> 1) cuando updateHero() trae datos
       reales. Asi no se ve el "Cargando..." de relleno contra el shimmer. */
    opacity: 0;
}


/* Jerarquia de titulos: negrita fuerte + espaciado ajustado, estilo apps top */
.row-title,
.modal-title,
.cast-title,
.universe-title,
.vip-modal-title,
.logo {
    font-weight: 800;
    letter-spacing: -0.01em;
}
.hero-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    line-height: 1.2;
    color: #ffffff; /* fijo: el texto va siempre sobre una foto, no sobre el fondo de la app */
}

.hero-overview {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85); /* fijo, mismo motivo */
    margin-bottom: 20px;
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-buttons {
    display: flex;
    gap: 12px;
}

/* =========================================
   FILAS DE CONTENIDO (Carousels)
========================================= */
.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 0;
}

.movie-row {
    margin-bottom: 25px;
    padding-left: 20px;
}

.row-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    padding-left: 14px;
    margin-bottom: 12px;
    position: relative;
}

.row-title-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background: #2f80ff;
    border-radius: 2px;
}

.row-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.btn-see-more {
    background: var(--overlay-06);
    border: 1px solid var(--overlay-10);
    color: var(--accent-color);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 20px;
    transition: var(--transition);
}

.btn-see-more i {
    transition: transform 0.2s ease;
}

.btn-see-more:hover {
    background: rgba(229, 9, 20, 0.1);
    border-color: var(--accent-color);
}

.btn-see-more:hover i {
    transform: translateX(2px);
}

.btn-see-more:active {
    transform: scale(0.94);
    background: var(--overlay-10);
}

.movies-container {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 12px 6px 14px 0;
    scrollbar-width: none;
}

.movies-container::-webkit-scrollbar {
    display: none;
}

/* Tarjetas de Contenido */
@keyframes cardEnter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.movie-card {
    position: relative;
    flex: 0 0 auto;
    width: 132px;
    cursor: pointer;
    transition: var(--transition);
    animation: cardEnter 0.4s ease backwards;
}

/* Entrada escalonada: las primeras tarjetas de cada fila aparecen de a una
   en vez de todas juntas. Del 11 en adelante no hace falta (quedan fuera
   de pantalla hasta que se scrollea la fila). */
.movie-card:nth-child(1) { animation-delay: 0s; }
.movie-card:nth-child(2) { animation-delay: 0.05s; }
.movie-card:nth-child(3) { animation-delay: 0.1s; }
.movie-card:nth-child(4) { animation-delay: 0.15s; }
.movie-card:nth-child(5) { animation-delay: 0.2s; }
.movie-card:nth-child(6) { animation-delay: 0.25s; }
.movie-card:nth-child(7) { animation-delay: 0.3s; }
.movie-card:nth-child(8) { animation-delay: 0.35s; }
.movie-card:nth-child(9) { animation-delay: 0.4s; }
.movie-card:nth-child(10) { animation-delay: 0.45s; }

.movie-card:hover {
    transform: translateY(-5px) scale(1.03);
}

/* Feedback tactil real al tocar (el :hover casi no aplica en pantalla
   tactil): un pequeno achique inmediato al presionar. */
.movie-card:active {
    transform: scale(0.95);
}

.movie-img-wrapper {
    position: relative;
    width: 100%;
    height: 198px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    background: var(--placeholder-bg);
}

.movie-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   SHIMMER: placeholders de carga estilo premium
   (animado con transform, corre por GPU sin
   forzar repintado en cada cuadro -> scroll fluido)
   ============================================ */
@keyframes shimmerSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.skeleton-card,
.skeleton-bar {
    position: relative;
    overflow: hidden;
    background-color: var(--shimmer-base);
}

.skeleton-card::after,
.skeleton-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background: linear-gradient(
        90deg,
        transparent,
        var(--overlay-06),
        transparent
    );
    transform: translateX(-100%);
    animation: shimmerSweep 1.5s ease-in-out infinite;
    will-change: transform;
}

.skeleton-card {
    border-radius: 12px;
}

.skeleton-bar {
    border-radius: 8px;
    display: block;
}

/* Skeleton de la pantalla "Mi Cuenta" mientras carga */
.account-skeleton-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 20px;
}
.account-skeleton-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
}
.account-skeleton-line {
    height: 14px;
    border-radius: 6px;
}
.account-skeleton-menu-item {
    height: 72px;
    border-radius: 14px;
    margin-bottom: 12px;
}

/* Historial / Vistos Opacidad */
.movie-card.seen-card {
    opacity: 0.65;
}
.seen-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #4caf50;
    color: white;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: bold;
    z-index: 5;
}

.card-rating {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(13, 13, 15, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffc107;
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--overlay-05);
}

.movie-card h4 {
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
}

/* NUEVA FILA: Actores Circulares */
.actor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85px;
    text-align: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: var(--transition);
}
.actor-card:hover {
    transform: scale(1.05);
}
.actor-img {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--overlay-10);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    background: var(--placeholder-bg);
}
.actor-card h4 {
    font-size: 0.7rem;
    margin-top: 5px;
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================
   GRID LAYOUT (Búsquedas, Ver Más, Listas)
========================================= */
.grid-header {
    padding: 0 20px;
}

.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 15px;
    padding: 0 20px 40px 20px;
}

.grid-layout .movie-card {
    width: 100%;
}

.grid-layout .movie-img-wrapper {
    height: 160px;
}

/* =========================================
   MODAL DE DETALLES (Glassmorphism)
========================================= */
/* Elemento fantasma temporal: crece desde la tarjeta tocada hasta el
   tamaño del modal, dando la sensacion de que la tarjeta "se convierte"
   en la pantalla de detalles, sin tocar la estructura real del modal. */
.modal-grow-ghost {
    position: fixed;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    z-index: 2001;
    pointer-events: none;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(5, 5, 5, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    will-change: opacity;
}

.modal.active {
    opacity: 1;
    pointer-events: auto;
}

.glass-modal {
    background: var(--card-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    max-height: 92vh;
    overflow-y: auto;
    scrollbar-width: none;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
}

.modal-content::-webkit-scrollbar {
    display: none;
}

.modal.active .modal-content {
    transform: translateY(0);
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--overlay-10);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    font-size: 1.2rem;
    transition: var(--transition);
}

.close-btn:hover {
    background: rgba(229, 9, 20, 0.8);
    transform: rotate(90deg);
}

.modal-media-container {
    position: relative;
    width: 100%;
    height: 220px;
    background: #000;
}

.modal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(20,20,25,1), rgba(20,20,25,0));
}

.fav-icon-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--overlay-15);
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    font-size: 1.3rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: var(--transition);
}

.fav-icon-btn:hover {
    transform: scale(1.1);
}

.fav-icon-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.modal-info {
    padding: 20px;
}

.modal-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.3;
}

.modal-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.meta-match {
    color: #ffc107;
    display: flex;
    align-items: center;
    gap: 2px;
}

.badge {
    background: var(--overlay-08);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.modal-overview {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* Elenco del Modal */
.cast-title {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: var(--text-color);
}

.cast-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 5px;
    margin-bottom: 15px;
}
.cast-row::-webkit-scrollbar { display: none; }

.cast-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    text-align: center;
    flex: 0 0 auto;
}
.cast-avatar-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}
.cast-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--placeholder-bg);
}
.cast-item span {
    font-size: 0.65rem;
    margin-top: 4px;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Selectores Glassmorphism */
.glass-select option {
    background: #141419;
    color: white;
}

/* Botones de Acción Globales */
.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent-color);
    color: var(--text-color);
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.3);
}

.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(229, 9, 20, 0.5);
}

.btn-action:active {
    transform: translateY(0);
}

/* Botones Flotantes */
.floating-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 25px;
    font-weight: bold;
    box-shadow: 0 4px 15px var(--accent-glow);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition);
}

.copy-toast {
    position: fixed;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1e1e1e;
    color: #fff;
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    border: 1px solid var(--overlay-10);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 5000;
}

.copy-toast i {
    color: #4caf50;
    font-size: 16px;
}

.copy-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Toast general de la app: mismo lenguaje visual que el de "copiado", pero
   reutilizable con variantes de color (exito/error/info). */
.app-toast {
    z-index: 10700; /* por encima de TODOS los overlays (10600 es el mas alto que hay) */
    position: fixed;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1e1e1e;
    color: #fff;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    border: 1px solid var(--overlay-10);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 5000;
    max-width: 88vw;
    text-align: center;
}

.app-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.app-toast.toast-success { border-color: rgba(76,175,80,0.4); }
.app-toast.toast-success i { color: #4caf50; }

.app-toast.toast-error { border-color: rgba(229,9,20,0.4); }
.app-toast.toast-error i { color: var(--accent-color); }

.app-toast.toast-info i { color: #4fc3f7; }

/* Estado vacio con diseño (Mi Lista, Mi Historial, etc.) en vez de un
   parrafo pelado. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 30px;
    width: 100%;
}

.empty-state i {
    font-size: 56px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    max-width: 280px;
}

/* Chips de busquedas recientes, dentro de la ventana de busqueda */
.recent-searches-container {
    padding: 14px 20px 4px;
}

.recent-searches-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.recent-searches-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recent-searches-clear {
    font-size: 0.78rem;
    color: var(--accent-color);
    cursor: pointer;
}

.recent-searches-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.recent-search-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--overlay-06);
    border: 1px solid var(--overlay-10);
    border-radius: 20px;
    color: var(--text-color);
    font-size: 0.82rem;
    cursor: pointer;
}

.recent-search-chip i {
    font-size: 14px;
    color: var(--text-muted);
}

/* Boton flotante "volver arriba" en Inicio (lado opuesto al de Sorpresa) */
.btn-scroll-top {
    position: fixed;
    bottom: 100px;
    left: 20px;
    z-index: 999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.btn-scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Barrita sutil de "sin conexion" (modo offline tipo Facebook: nunca
   bloquea, solo avisa) */
.offline-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #b71c1c;
    color: #fff;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 0;
    z-index: 4000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.offline-indicator.visible {
    transform: translateY(0);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.floating-btn:hover {
    transform: scale(1.05);
}

/* =========================================
   BARRA DE NAVEGACIÓN INFERIOR (Estilo Telegram)
========================================= */
.bottom-nav {
    position: fixed;
    bottom: 20px; /* Separación del borde inferior */
    left: 20px;   /* Separación del borde izquierdo */
    right: 20px;  /* Separación del borde derecho */

    height: 70px;

    /* Fondo con difuminado (Glassmorphism) */
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Bordes redondeados para el efecto flotante */
    border-radius: 35px;

    /* Borde sutil para darle profundidad */
    border: 1px solid var(--overlay-10);

    /* Sombra para que realmente parezca que flota */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
    
    /* NUEVO: Transición fluida para ocultar/mostrar (0.4s para coincidir con tu modal) */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

/* NUEVO: Clase que JavaScript usará para ocultar el menú deslizándolo hacia abajo */
.bottom-nav.nav-hidden {
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none;
}

/* ==========================================
   REPRODUCTOR (PelisPlex Style)
========================================== */
.player-modal-content {
    max-width: 1000px;
    margin: auto;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    max-height: 95vh;
    background: #0d0d0f;
}

.player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(0,0,0,0.8);
    border-bottom: 1px solid var(--overlay-10);
}

.player-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.player-controls-top {
    display: flex;
    gap: 10px;
}

.player-btn-servers {
    background: var(--overlay-10);
    border: 1px solid var(--overlay-15);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}

.player-btn-servers:hover {
    background: var(--overlay-20);
}

.player-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
}

.player-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
    display: none;
}

.player-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0d0d0f;
    color: var(--text-muted);
    z-index: 10;
}

.player-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--overlay-15);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

.player-loading p {
    font-size: 0.85rem;
    margin: 4px 0;
}

.player-servidor-info {
    font-weight: 600;
    color: var(--text-color);
}

.player-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(0,0,0,0.6);
    border-top: 1px solid var(--overlay-08);
}

.player-language-selector {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.player-lang-btn {
    background: var(--overlay-06);
    border: 1px solid var(--overlay-10);
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.player-lang-btn.active {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.player-quality-selector {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

.player-quality-btn {
    background: var(--overlay-06);
    border: 1px solid var(--overlay-10);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.player-quality-btn.active {
    background: #2f80ff;
    color: #fff;
    border-color: #2f80ff;
}

.player-fullscreen-btn {
    position: absolute;
    bottom: 80px;
    right: 20px;
    background: rgba(0,0,0,0.6);
    border: 1px solid var(--overlay-15);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: var(--transition);
}

.player-fullscreen-btn:hover {
    background: var(--overlay-20);
}

.servers-modal-content {
    max-width: 400px;
    margin: auto;
    padding: 24px 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.servers-modal-title {
    font-size: 1.1rem;
    margin-bottom: 16px;
    color: var(--text-color);
}

.servers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.server-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--overlay-04);
    border: 1px solid var(--overlay-10);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-color);
}

.server-item:hover {
    background: var(--overlay-08);
}

.server-item.active {
    border-color: var(--accent-color);
    background: rgba(229, 9, 20, 0.12);
}

.server-item .server-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.server-item .server-badge {
    font-size: 0.65rem;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--overlay-10);
    color: var(--text-muted);
}

.server-item .server-badge.has-ads {
    background: #ff6b35;
    color: #fff;
}

@media (max-width: 768px) {
    .player-controls {
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
    }
    .player-quality-selector {
        margin-left: 0;
    }
    .player-title {
        font-size: 0.85rem;
        max-width: 50%;
    }
    .player-lang-btn,
    .player-quality-btn {
        font-size: 0.6rem;
        padding: 4px 10px;
    }
}

.player-container.loaded .player-loading {
    display: none;
}
.player-container.loaded .player-iframe {
    display: block;
}

.nav-item {
    background: none;
    border: none;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    flex: 1;
    height: 100%;
    transition: var(--transition);
}

.nav-item i {
    font-size: 1.35rem;
}

.nav-item.active {
    color: var(--accent-color);
}

/* =========================================
   ANIMACIONES & EFECTOS
========================================= */
.pulse-anim { animation: pulse 2s infinite; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(229, 9, 20, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 9, 20, 0); }
}

/* =========================================
   NOTIFICACIÓN FLOTANTE (ESTRENOS)
========================================= */
.toast-notificacion {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: bold;
    z-index: 3000;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    display: none;
    white-space: nowrap;
    animation: slideDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideDown {
    from { top: -60px; opacity: 0; }
    to { top: 20px; opacity: 1; }
}

.toast-notificacion.fade-out {
    animation: slideUp 0.3s forwards ease;
}

@keyframes slideUp {
    from { top: 20px; opacity: 1; }
    to { top: -60px; opacity: 0; }
}
/* =========================================
   FILA TOP 10 ESTILO NETFLIX (CORREGIDO)
========================================= */
.top10-row {
    display: flex;
    gap: 40px; /* Margen amplio para que quepan los números gigantes */
    overflow-x: auto;
    padding: 15px 10px 15px 35px; /* Espaciado izquierdo para que no se corte el primer número */
    scrollbar-width: none;
}

.top10-row::-webkit-scrollbar {
    display: none;
}

.top10-card {
    position: relative;
    flex: 0 0 auto;
    width: 110px; /* Alineado al tamaño estándar de tus tarjetas en móvil */
    height: 165px;
    margin-left: 20px; /* Desfase necesario para la superposición del número */
    cursor: pointer;
    transition: var(--transition);
}

.top10-card:hover {
    transform: translateY(-5px) scale(1.05);
}

.top10-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 2; /* Obliga al póster a estar por encima del número */
}

.top10-number {
    position: absolute;
    bottom: -15px;
    left: -35px; /* Desplaza el número hacia la izquierda trasera del póster */
    font-size: 6.5rem; /* Tamaño masivo de impacto */
    font-weight: 900;
    line-weight: 1;
    color: var(--bg-color); /* Color de fondo idéntico para simular transparencia */
    -webkit-text-stroke: 3px var(--text-muted); /* Se ajusta solo al tema, no un gris fijo pensado solo para oscuro */
    z-index: 1; /* Posicionado por detrás de la imagen */
    user-select: none;
    transition: var(--transition);
}

.top10-card:hover .top10-number {
    -webkit-text-stroke: 3px var(--accent-color); /* Ilumina el borde del número en hover */
}

/* =========================================
   MEDIA QUERIES DESKTOP
========================================= */
@media (min-width: 768px) {
    .modal { align-items: center; padding: 20px; }
    .modal-content { border-radius: 24px; max-height: 85vh; transform: scale(0.9); opacity: 0; }
    .modal.active .modal-content { transform: scale(1); opacity: 1; }
    .grid-layout { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .grid-layout .movie-img { height: 210px; }
    .movie-card { width: 140px; }
    .movie-img-wrapper { height: 210px; }
    .hero-section { height: 75vh; }
    .hero-title { font-size: 3.5rem; }
    .hero-overview { font-size: 1.1rem; }
    .bottom-nav { display: none; } /* Ocultar barra inferior en pantallas grandes */
    body { padding-bottom: 0; }

    /* Adaptación del Top 10 para pantallas de Escritorio */
    .top10-card {
        width: 140px;
        height: 210px;
        margin-left: 35px;
    }
    .top10-number {
        font-size: 8.5rem;
        left: -50px;
        bottom: -20px;
        -webkit-text-stroke: 4px var(--text-muted);
    }
}

/* =========================================
   EFECTO AURORA BOREAL (FONDO VIBRANTE)
========================================= */
.aurora-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    pointer-events: none;
    background-color: var(--bg-color);
}

/* =========================================
   COLECCIONES ÉPICAS (SAGAS)
========================================= */
.universe-card {
    position: relative;
    flex: 0 0 auto;
    width: 240px; /* Más ancho que una película normal para aprovechar los fondos (backdrops) */
    height: 135px;
    border-radius: 16px; /* AQUÍ ESTÁ LA MAGIA: El borde redondo moderno */
    overflow: hidden; /* Evita que la imagen se salga de las esquinas redondas */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
}

.universe-card:hover {
    transform: translateY(-5px) scale(1.03); /* Efecto al tocar o pasar el mouse */
}

.universe-bg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que la imagen se estire o se deforme */
}

.universe-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 10px 10px; /* Espacio para que respire el texto */
    
    /* Un gradiente oscuro abajo para que el nombre de la saga siempre se lea bien */
    background: linear-gradient(to top, rgba(13, 13, 15, 0.95) 0%, transparent 100%);
    
    color: white;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* =========================================
   ANIMACIÓN PREMIUM HERO (Deslizamiento)
========================================= */
@keyframes slideInPremium {
    0% {
        opacity: 0;
        transform: translateX(40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.animacion-premium {
    animation: slideInPremium 0.7s linear forwards;
}


/* ===== SISTEMA DE CUENTAS (LOGIN / REGISTRO) ===== */
.account-btn {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 26px;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 8px;
}

.auth-modal-content {
    max-width: 420px;
    margin: 0 auto;
    padding: 28px 24px;
}

/* Panel de "Todas las categorias": pantalla completa con grilla de 3 en 3. */
.all-genres-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-color);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.all-genres-overlay.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.all-genres-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--glass-border);
}

.all-genres-header h2 {
    font-size: 1.2rem;
    color: var(--text-color);
}

.all-genres-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: none;
}

.all-genres-grid::-webkit-scrollbar {
    display: none;
}

.all-genres-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px 8px;
    background: var(--overlay-05);
    border: 1px solid var(--overlay-10);
    border-radius: 14px;
    cursor: pointer;
    transition: var(--transition);
}

.all-genres-item:active {
    transform: scale(0.95);
    background: var(--overlay-10);
}

.all-genres-item i {
    font-size: 28px;
    color: var(--accent-color);
}

.all-genres-item span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
}

/* El modal de login/registro y verificacion de correo va a pantalla
   completa (estilo Telegram), a diferencia de los demas modales (VIP,
   detalles) que se quedan como hojas que suben desde abajo. */
#auth-modal .modal-content {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    background: var(--bg-color);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ===== Cuadritos del codigo de verificacion (estilo Telegram) ===== */
.code-boxes {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 8px 0 20px;
}

.code-box {
    width: 56px;
    height: 64px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    border-radius: 12px;
    border: 2px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-color);
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.code-box:focus {
    border-color: var(--accent-color);
    background: var(--overlay-08);
}

@keyframes codeBoxSuccess {
    0% { transform: translateY(0); }
    35% { transform: translateY(-10px); background: #1f7a3d; border-color: #2ecc71; color: #ffffff; }
    70% { transform: translateY(0); }
    100% { transform: translateY(0); background: #1f7a3d; border-color: #2ecc71; color: #ffffff; }
}

.code-box.success {
    animation: codeBoxSuccess 0.45s ease forwards;
}

.code-box:nth-child(1).success { animation-delay: 0s; }
.code-box:nth-child(2).success { animation-delay: 0.08s; }
.code-box:nth-child(3).success { animation-delay: 0.16s; }
.code-box:nth-child(4).success { animation-delay: 0.24s; }

@keyframes codeBoxError {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

.code-box.error {
    border-color: #e53935;
    color: #e53935;
    animation: codeBoxError 0.4s ease;
}

.auth-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: #1a1a22;
    border-radius: 10px;
    padding: 4px;
}

.auth-tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-tab.active {
    background: var(--accent-color);
    color: #fff;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.password-field-wrapper {
    position: relative;
    width: 100%;
}

.password-field-wrapper .filter-input {
    padding-right: 44px;
}

.toggle-password-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.15rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.toggle-password-btn:hover,
.toggle-password-btn.active {
    color: var(--accent-color);
}

.auth-error {
    background: rgba(229, 9, 20, 0.15);
    border: 1px solid rgba(229, 9, 20, 0.4);
    color: #ff6b6b;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #666;
    margin: 18px 0;
}

.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #333;
}

.auth-divider span {
    padding: 0 12px;
    font-size: 0.85rem;
}

.btn-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: #1a1a1a;
    border: none;
    padding: 13px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.btn-google i {
    font-size: 20px;
}

/* ===== SECCION MI CUENTA ===== */
.account-btn {
    position: relative;
}

.account-crown-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffc107;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 193, 7, 0.7);
}

.account-crown-badge i {
    font-size: 11px;
    color: #1a1a1a;
}

.account-profile-card {
    background: var(--overlay-04);
    border: 1px solid var(--overlay-08);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    margin-bottom: 24px;
}

.account-profile-card .avatar-icon {
    font-size: 64px;
    color: #2f80ff;
    margin-bottom: 12px;
}

.account-profile-card h3 {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.account-profile-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.account-menu-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.account-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--overlay-04);
    border: 1px solid var(--overlay-08);
    border-radius: 12px;
    padding: 16px 10px;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-color);
    text-align: center;
    min-height: 90px;
}

.account-menu-item:hover {
    background: var(--overlay-08);
}

.account-menu-item i {
    font-size: 26px;
    color: #2f80ff;
}

.update-icon-wrapper {
    position: relative;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.update-progress-ring {
    position: absolute;
    top: -9px;
    left: -9px;
    width: 44px;
    height: 44px;
    transform: rotate(-90deg);
}

.update-progress-bg {
    fill: none;
    stroke: var(--overlay-10);
    stroke-width: 3;
}

.update-progress-fg {
    fill: none;
    stroke: #2f80ff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 113.097;
    stroke-dashoffset: 113.097;
    transition: stroke-dashoffset 0.15s linear;
}

.account-menu-item span {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
}

.account-logged-out-card {
    text-align: center;
    padding: 40px 20px;
}

.account-logged-out-card i {
    font-size: 72px;
    color: #2f80ff;
    margin-bottom: 16px;
}

.account-logged-out-card p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* ===== ICONO FLOTANTE DE FAVORITO EN EL MODAL ===== */
.fav-icon-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    border: none;
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: var(--transition);
}

.fav-icon-btn.active {
    background: var(--accent-color);
}

/* ===== CAMPO DE CONTRASEÑA CON OJITO ===== */
.password-field-wrapper {
    position: relative;
}

.password-field-wrapper input {
    width: 100%;
    padding-right: 46px;
}

.toggle-password-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* ===== ARREGLO: evitar que las caratulas se recorten al agrandarse ===== */
.movies-container {
    padding: 12px 4px;
}

.movie-card:hover {
    transform: scale(1.05) translateY(-2px);
    z-index: 5;
}

/* ===== PILLS DE INFORMACION EN EL MODAL ===== */
.info-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.info-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--overlay-06);
    border: 1px solid var(--overlay-10);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.info-pill i {
    color: #2f80ff;
    font-size: 14px;
}

/* ===== ESTADO VIP EN MI CUENTA ===== */
.vip-status-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.vip-status-card i {
    font-size: 32px;
}

.vip-status-card strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.vip-status-card p {
    font-size: 0.8rem;
    color: var(--overlay-70);
    margin: 0;
}

.vip-active {
    background: linear-gradient(135deg, rgba(255,193,7,0.2), rgba(255,152,0,0.1));
    border: 1px solid rgba(255,193,7,0.4);
}

.vip-active i {
    color: #ffc107;
}

.vip-inactive {
    background: var(--overlay-04);
    border: 1px solid var(--overlay-10);
}

.vip-inactive i {
    color: var(--text-muted);
}

/* ===== MODAL DE COMPRA VIP ===== */
.vip-modal-content {
    max-width: 480px;
    margin: auto;
    padding: 28px 22px;
    max-height: 85vh;
    overflow-y: auto;
}

.vip-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    margin-bottom: 20px;
}

.vip-modal-title i {
    color: #ffc107;
}

.vip-section-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 18px 0 10px;
    font-weight: 600;
}

.vip-tier-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.vip-tier-card {
    background: var(--overlay-04);
    border: 2px solid var(--overlay-10);
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    text-align: left;
    color: var(--text-color);
}

.vip-tier-card.active {
    border-color: #ffc107;
    background: rgba(255,193,7,0.1);
}

/* En modo claro el 4% de tinte de overlay-04 queda casi invisible sobre un
   fondo ya blanco ("todo plano") -> le damos superficie propia + sombra
   suave a las tarjetas del panel VIP, mas premium y con jerarquia real. */
body.light-theme .vip-tier-card,
body.light-theme .vip-duration-pill,
body.light-theme .vip-method-card,
body.light-theme .vip-payment-details,
body.light-theme .vip-upload-box {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

body.light-theme .vip-tier-card.active {
    background: rgba(255,193,7,0.22);
    border-color: #e0a800;
    box-shadow: 0 2px 12px rgba(255,193,7,0.35);
}

body.light-theme .vip-method-card.active {
    background: color-mix(in srgb, var(--method-color, #333) 22%, white);
    border-color: var(--method-color, var(--accent-color));
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

body.light-theme .vip-duration-pill.active {
    background: rgba(229,9,20,0.16);
    border-color: var(--accent-color);
    box-shadow: 0 2px 12px rgba(229,9,20,0.25);
}

/* El azul claro de los numeros (tarjeta, saldo, cripto, PayPal) esta hecho
   para fondos oscuros; sobre blanco casi no se lee -> mas oscuro y con
   chip propio para que se note bien. */
body.light-theme .vip-payment-details code {
    background: rgba(2,119,189,0.12);
    color: #0277bd;
}

.vip-tier-name {
    font-weight: 700;
    font-size: 0.95rem;
}

.vip-tier-name i {
    color: #ffc107;
    font-size: 14px;
}

.vip-tier-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.vip-duration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.vip-duration-pill {
    background: var(--overlay-04);
    border: 2px solid var(--overlay-10);
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    color: var(--text-color);
    font-size: 0.82rem;
    font-weight: 600;
}

.vip-duration-pill.active {
    border-color: var(--accent-color);
    background: rgba(229,9,20,0.12);
}

.vip-duration-pill small {
    display: block;
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.72rem;
    margin-top: 2px;
}

.vip-duration-savings {
    display: block;
    color: #4caf50;
    font-weight: 700;
    font-size: 0.68rem;
    margin-top: 3px;
}

/* El modal de VIP tambien va a pantalla completa (igual que login/registro):
   el usuario debe concentrarse en la compra, sin distracciones del nav de
   Inicio/Mi Cuenta detras. */
#vip-modal .modal-content {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    background: var(--bg-color);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
}

.vip-price-display {
    text-align: center;
    background: rgba(255,193,7,0.1);
    border: 1px solid rgba(255,193,7,0.3);
    border-radius: 10px;
    padding: 14px;
    margin: 14px 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffc107;
}

.vip-method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.vip-method-card {
    background: var(--overlay-04);
    border: 2px solid var(--overlay-10);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-color);
    font-size: 0.82rem;
    font-weight: 600;
}

.vip-method-card i {
    color: var(--method-color, var(--text-muted));
    font-size: 18px;
}

.vip-method-card.active {
    border-color: var(--method-color, #fff);
    background: color-mix(in srgb, var(--method-color, #333) 15%, transparent);
}

.vip-payment-details {
    background: var(--overlay-05);
    border-radius: 10px;
    padding: 14px;
    margin-top: 12px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.vip-payment-details code {
    display: inline-block;
    background: rgba(0,0,0,0.3);
    padding: 4px 8px;
    border-radius: 6px;
    color: #4fc3f7;
    margin: 6px 0;
    word-break: break-all;
    font-size: 0.82rem;
}

.vip-copy-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
}

.vip-copy-row code {
    margin: 0;
}

.vip-copy-btn {
    background: var(--overlay-08);
    border: 1px solid var(--overlay-15);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.vip-copy-btn i {
    font-size: 14px;
}

.vip-copy-btn:active {
    background: var(--overlay-18);
}

.vip-upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 2px dashed var(--overlay-20);
    border-radius: 12px;
    padding: 24px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.vip-upload-box i {
    font-size: 32px;
}

.vip-upload-box.has-image {
    border-color: #4caf50;
    color: #81c784;
}

.vip-upload-preview {
    width: 100%;
    max-height: 160px;
    object-fit: contain;
    border-radius: 10px;
}

.vip-upload-icon-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vip-upload-progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    transform: rotate(-90deg);
}

.vip-upload-progress-bg {
    fill: none;
    stroke: var(--overlay-10);
    stroke-width: 3;
}

.vip-upload-progress-fg {
    fill: none;
    stroke: #4caf50;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 113.097;
    stroke-dashoffset: 113.097;
    transition: stroke-dashoffset 0.15s linear;
}

.vip-upload-progress-ring.spinning-wait {
    animation: spin 0.9s linear infinite;
}

#vip-submit-btn {
    background: var(--disabled-bg) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    transition: background 0.25s ease, color 0.25s ease;
}

#vip-submit-btn:not(:disabled) {
    background: var(--accent-color) !important;
    color: #fff !important;
    cursor: pointer;
}

#vip-submit-btn.btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#vip-submit-btn .btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--overlay-40);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ===== PANEL DE ADMINISTRADOR ===== */
.admin-modal-content {
    max-width: 480px;
    margin: auto;
    padding: 28px 22px;
    max-height: 85vh;
    overflow-y: auto;
}

.admin-payment-card {
    background: var(--overlay-04);
    border: 1px solid var(--overlay-10);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 16px;
}

.admin-payment-card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 12px;
    max-height: 280px;
    object-fit: contain;
    background: #000;
}

.admin-payment-info {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 12px;
}

.admin-payment-info strong {
    color: var(--text-color);
}

.admin-payment-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.admin-btn-approve {
    background: #4caf50;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.admin-btn-reject {
    background: #e53935;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.admin-empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 20px;
}

.admin-empty-state i {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
    color: #4caf50;
}

/* ===== INDICADOR DE DESLIZAR PARA ACTUALIZAR ===== */
.ptr-indicator {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    width: 42px;
    height: 42px;
    background: rgba(30,30,38,0.95);
    border: 1px solid var(--overlay-10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--accent-color);
    z-index: 5000;
    opacity: 0;
    transition: none;
    pointer-events: none;
}

.ptr-indicator.spinning i {
    animation: ptrSpin 0.7s linear infinite;
}

@keyframes ptrSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== SCROLL PROPIO PARA MI CUENTA (evita que el nav inferior tape botones) ===== */
/* #account-section ya no maneja su propio scroll: ahora scrollea el
   .page-panel (#page-account) que lo contiene. */

/* =========================================
   MENU LATERAL (hamburguesa)
========================================= */
.hamburger-btn {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px;
}

/* Menu lateral: scroll horizontal nativo con scroll-snap (mismo mecanismo
   que Inicio/Mi Cuenta), flotando fijo sobre toda la app. En reposo esta
   scrolleado hacia el espaciador transparente (el menu queda "afuera" a la
   izquierda) y una franja angosta del borde deja pasar el arrastre para
   abrirlo sin bloquear el resto de la pantalla. */
.side-menu-scroll-container {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    pointer-events: none;
}

.side-menu-scroll-container::-webkit-scrollbar {
    display: none;
}

.side-menu {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    pointer-events: auto;
}

.side-menu-spacer {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    pointer-events: none;
}

.side-menu-edge-strip {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 100%;
    pointer-events: auto;
}

.side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.side-menu-account-block {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
}

.side-menu-account-block .avatar-icon-small {
    font-size: 42px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.side-menu-account-block strong {
    display: block;
    font-size: 1rem;
    color: var(--text-color);
}

.side-menu-account-block p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.side-menu-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 14px 0;
}

.side-menu-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--card-bg);
    border-radius: 12px;
    margin-bottom: 10px;
}

.side-menu-option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 500;
}

.side-menu-option-label i {
    font-size: 20px;
    color: var(--accent-color);
    width: 22px;
    text-align: center;
}

/* Interruptor estilo iOS */
.theme-toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}

.theme-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--overlay-15);
    border-radius: 26px;
    transition: background 0.25s ease;
}

.theme-toggle-slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.theme-toggle-switch input:checked + .theme-toggle-slider {
    background: var(--accent-color);
}

.theme-toggle-switch input:checked + .theme-toggle-slider::before {
    transform: translateX(20px);
}

.player-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    border: none;
    outline: none;
}

/* =========================================
   PARCHE: ESTILO YOUTUBE PARA EL REPRODUCTOR
   ========================================= */
#player-modal {
    align-items: flex-start !important;
    padding: 0 !important;
    background: #0f0f0f !important;
}

.player-modal-content {
    display: flex !important;
    flex-direction: column !important;
    background-color: #0f0f0f !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Forzar que el iframe del video quede arriba y con formato 16:9 (Horizontal) */
.player-modal-content iframe {
    width: 100% !important;
    height: 56.25vw !important; /* Aspect Ratio 16:9 basado en el ancho de la pantalla */
    max-height: 56.25vw !important;
    min-height: 56.25vw !important;
    border: none !important;
    flex-shrink: 0;
    background: #000;
    display: block;
    margin: 0;
    padding: 0;
}

/* Si el usuario gira el dispositivo a horizontal (Landscape) */
@media (orientation: landscape) {
    .player-modal-content iframe {
        height: 100vh !important;
        max-height: 100vh !important;
        min-height: 100vh !important;
    }
}

/* Contenedor de botones (Latino, Español, Resoluciones) se ajusta debajo y es deslizable */
.player-modal-content > div:not(.video-wrapper):not(iframe) {
    padding: 15px !important;
    overflow-y: auto !important;
    flex-grow: 1 !important;
    width: 100%;
    box-sizing: border-box;
}

/* Ajustar el botón de cerrar si existe para que quede flotante sin estorbar */
.player-modal-content .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0,0,0,0.6) !important;
    color: white !important;
    border-radius: 50%;
    z-index: 9999;
}


/* ==========================================
   SOLICITAR CONTENIDO (pedidos)
========================================== */
.pedido-overlay {
    position: fixed;
    inset: 0;
    z-index: 10600; /* por encima de TODO (details-modal usa 10500, el mas alto hasta ahora) */
    background: var(--bg-color, #0a0a0a);
    display: none;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px;
}
.pedido-overlay.active { display: flex; }

.pedido-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.pedido-header h2 { font-size: 1.25rem; margin: 0; }

.pedido-step { display: flex; flex-direction: column; gap: 14px; }

/* .search-input-wrapper trae "flex: 1" pensado para una fila horizontal
   (el buscador principal). Aqui, dentro de una columna, ese mismo "flex: 1"
   estiraba la caja para que ocupara TODA la pantalla verticalmente -- por
   eso el icono de lupa "caia" al centro de esa zona gigante invisible, y
   los resultados quedaban empujados fuera de la vista. Se anula ese flex
   solo dentro de la pantalla de pedido, sin tocar el buscador principal. */
.pedido-step .search-input-wrapper { flex: none; }

.pedido-aviso {
    display: flex;
    gap: 10px;
    background: rgba(229, 9, 20, 0.08);
    border: 1px solid rgba(229, 9, 20, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
}
.pedido-aviso > i {
    color: var(--accent-color);
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.pedido-aviso strong { display: block; margin-bottom: 4px; font-size: 0.92rem; }
.pedido-aviso p { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.35; }
.pedido-ejemplo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px !important;
}
.pedido-ejemplo-mal, .pedido-ejemplo-bien {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}
.pedido-ejemplo-mal { color: #e57373; }
.pedido-ejemplo-mal i { color: #e57373; }
.pedido-ejemplo-bien { color: #81c784; }
.pedido-ejemplo-bien i { color: #81c784; }

.pedido-volver {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 4px 0;
    align-self: flex-start;
}

.pedido-item-card {
    display: flex;
    gap: 14px;
    background: var(--card-bg);
    border-radius: 14px;
    padding: 12px;
    align-items: center;
}
.pedido-item-card img {
    width: 64px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.pedido-item-card-info { display: flex; flex-direction: column; gap: 4px; }
.pedido-item-card-tipo { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.pedido-item-card-titulo { font-size: 1.05rem; font-weight: 700; }
.pedido-item-card-meta { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }

.pedido-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin: 4px 0 -4px; }
.pedido-label-opcional { text-transform: none; letter-spacing: 0; }

.pedido-tipo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pedido-tipo-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--card-bg);
    border: 1.5px solid transparent;
    border-radius: 12px;
    padding: 14px 8px;
    color: var(--text-color, #fff);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}
.pedido-tipo-btn i { font-size: 1.4rem; color: var(--text-muted); transition: color 0.2s; }
.pedido-tipo-btn span { font-size: 0.8rem; line-height: 1.25; }
.pedido-tipo-btn.active {
    border-color: var(--accent-color);
    background: rgba(229, 9, 20, 0.1);
}
.pedido-tipo-btn.active i { color: var(--accent-color); }

.pedido-nota-textarea { resize: none; width: 100%; }
.pedido-nota-counter {
    text-align: right;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: -8px;
}

.pedido-btn-enviar { width: 100%; margin-top: 6px; }
.pedido-btn-enviar:disabled {
    opacity: 0.55;
    filter: grayscale(0.4);
    cursor: not-allowed;
}

.pedido-exito-card {
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 20px;
    max-width: 360px;
}
.pedido-exito-icon-wrap {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(76, 175, 80, 0.15);
    margin-bottom: 6px;
    animation: pedido-rebote 0.65s cubic-bezier(0.36, 1.75, 0.64, 1) both;
}
.pedido-yapedido-icon-wrap { background: rgba(255, 193, 7, 0.15); }
.pedido-exito-icon { font-size: 2.6rem; color: #4caf50; }
.pedido-yapedido-icon-wrap .pedido-exito-icon { color: #ffc107; }
.pedido-exito-card h3 { margin: 0; font-size: 1.3rem; }
.pedido-exito-card p { margin: 0 0 10px; color: var(--text-muted); font-size: 0.92rem; line-height: 1.4; }
.pedido-exito-card .btn-action { width: 100%; }

@keyframes pedido-rebote {
    0%   { transform: scale(0) translateY(-30px); opacity: 0; }
    55%  { transform: scale(1.15) translateY(0); opacity: 1; }
    75%  { transform: scale(0.92) translateY(-6px); }
    90%  { transform: scale(1.04) translateY(0); }
    100% { transform: scale(1) translateY(0); }
}


/* Icono de Mi Cuenta en el header: color segun el plan */
.icono-cuenta-premium { color: #4fc3f7; }
.icono-cuenta-clasica { color: #ffc107; }


/* ==========================================
   MI CUENTA
========================================== */
.micuenta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 20px;
    border-radius: 20px;
    position: relative;
    margin-bottom: 20px;
}
.micuenta-card-premium { background: linear-gradient(135deg, #1a3a5c, #0d1f33); border: 1px solid rgba(79,195,247,0.3); }
.micuenta-card-clasica { background: linear-gradient(135deg, #4a3a10, #2a2008); border: 1px solid rgba(255,193,7,0.3); }
.micuenta-card-vacia { background: var(--card-bg); border: 1px solid var(--glass-border); }

.micuenta-icono-grande { font-size: 3.2rem; margin-bottom: 12px; }
.micuenta-card-premium .micuenta-icono-grande { color: #4fc3f7; }
.micuenta-card-clasica .micuenta-icono-grande { color: #ffc107; }
.micuenta-card-vacia .micuenta-icono-grande { color: var(--text-muted); }

.micuenta-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(76,175,80,0.2);
    color: #81c784;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.micuenta-card h3 { margin: 0; font-size: 1.4rem; }
.micuenta-card-vacia p { color: var(--text-muted); font-size: 0.9rem; margin-top: 8px; }

.micuenta-stats {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 4px 16px;
}
.micuenta-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--glass-border);
}
.micuenta-stat-row:last-child { border-bottom: none; }
.micuenta-stat-label { display:flex; align-items:center; gap:8px; color: var(--text-muted); font-size:0.9rem; }
.micuenta-stat-label i { color: var(--accent-color); }
.micuenta-stat-valor { font-weight: 700; }


/* Medalla circular con degradado detras del icono de plan (mas profesional
   que el icono suelto y plano de antes) */
.micuenta-icono-badge {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.micuenta-icono-badge .micuenta-icono-grande { margin-bottom: 0; font-size: 2.6rem; }

.micuenta-card-premium-badge {
    background: radial-gradient(circle at 35% 30%, #7fdcff, #2196f3 60%, #0d5b96);
    box-shadow: 0 0 24px rgba(79,195,247,0.55), inset 0 2px 6px rgba(255,255,255,0.35);
}
.micuenta-card-premium-badge .micuenta-icono-grande { color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }

.micuenta-card-clasica-badge {
    background: radial-gradient(circle at 35% 30%, #ffe082, #ffb300 60%, #a86a00);
    box-shadow: 0 0 24px rgba(255,193,7,0.5), inset 0 2px 6px rgba(255,255,255,0.35);
}
.micuenta-card-clasica-badge .micuenta-icono-grande { color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }

.micuenta-card-vacia-badge {
    background: radial-gradient(circle at 35% 30%, #4a4a55, #2a2a33 70%);
    box-shadow: inset 0 2px 6px rgba(255,255,255,0.08);
}
.micuenta-card-vacia-badge .micuenta-icono-grande { color: var(--text-muted); }


/* Cuadricula de "Metodos de pago aceptados" en Mi Cuenta */
.micuenta-metodos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}
.micuenta-metodo-item {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 14px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.micuenta-metodo-item i { font-size: 1.5rem; color: var(--accent-color); }
.micuenta-metodo-item span { font-size: 0.72rem; color: var(--text-muted); line-height: 1.2; }


/* Emoji real (diamante/medalla) en vez de icono plano de Phosphor */
.icono-emoji-cuenta { font-size: 1.3rem; font-style: normal; line-height: 1; }
.micuenta-icono-grande-emoji { font-size: 2.8rem; line-height: 1; display: block; }


/* Acordeon de Preguntas Frecuentes en Mi Cuenta */
.micuenta-faq-item {
    background: var(--card-bg);
    border-radius: 12px;
    margin-top: 8px;
    overflow: hidden;
}
.micuenta-faq-pregunta {
    width: 100%;
    background: none;
    border: none;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.micuenta-faq-pregunta i { color: var(--text-muted); flex-shrink: 0; transition: transform 0.25s ease; }
.micuenta-faq-item.abierto .micuenta-faq-pregunta i { transform: rotate(180deg); color: var(--accent-color); }

.micuenta-faq-respuesta {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.micuenta-faq-item.abierto .micuenta-faq-respuesta { max-height: 260px; }
.micuenta-faq-respuesta p {
    margin: 0;
    padding: 0 16px 16px;
    font-size: 0.83rem;
    color: var(--text-muted);
    line-height: 1.5;
}


/* Comparativa Clasica vs Premium en Mi Cuenta */
.micuenta-plan-compare { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.micuenta-plan-compare-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid transparent;
}
.micuenta-plan-compare-premium { border-color: rgba(79,195,247,0.35); }
.micuenta-plan-compare-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 10px;
}
.micuenta-plan-compare-precio { color: var(--accent-color); }
.micuenta-plan-compare-precio small { font-weight: 400; color: var(--text-muted); font-size: 0.7rem; }
.micuenta-plan-compare-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.micuenta-plan-compare-card li { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); }
.micuenta-plan-compare-card li i { color: #81c784; flex-shrink: 0; }


/* "Gana con Referidos" en Mi Cuenta */
.micuenta-referidos-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0 16px 10px;
}
.micuenta-referidos-stats > div {
    background: var(--overlay-06, rgba(255,255,255,0.06));
    border-radius: 10px;
    padding: 10px 4px;
    text-align: center;
}
.micuenta-referidos-stats span { display: block; font-size: 1.1rem; font-weight: 800; color: var(--accent-color); }
.micuenta-referidos-stats small { font-size: 0.68rem; color: var(--text-muted); }

.micuenta-referidos-link-row {
    display: flex;
    gap: 8px;
    margin: 10px 16px 16px;
}
.micuenta-referidos-link-row input {
    flex: 1;
    min-width: 0;
    background: var(--overlay-06, rgba(255,255,255,0.06));
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text-color);
    font-size: 0.78rem;
}
.micuenta-referidos-link-row button {
    background: var(--accent-color);
    border: none;
    border-radius: 10px;
    width: 42px;
    flex-shrink: 0;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
}


/* ==========================================
   FLUJO DE COMPRA (dentro de la Mini App)
========================================== */
.comprar-tipo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.comprar-tipo-card {
    background: var(--card-bg);
    border: 1.5px solid transparent;
    border-radius: 16px;
    padding: 22px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    cursor: pointer;
    color: var(--text-color);
}
.comprar-tipo-card:active { border-color: var(--accent-color); background: rgba(229,9,20,0.08); }
.comprar-tipo-emoji { font-size: 2.2rem; }
.comprar-tipo-nombre { font-weight: 800; font-size: 1.05rem; }
.comprar-tipo-desc { font-size: 0.75rem; color: var(--text-muted); }

.comprar-metodo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.comprar-metodo-card {
    background: var(--card-bg);
    border: 1.5px solid transparent;
    border-radius: 14px;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-color);
}
.comprar-metodo-card:active { border-color: var(--accent-color); background: rgba(229,9,20,0.08); }
.comprar-metodo-card i { font-size: 1.5rem; color: var(--accent-color); }
.comprar-metodo-card span { font-size: 0.82rem; font-weight: 600; }

.comprar-oferta-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 152, 0, 0.12);
    border: 1px solid rgba(255, 152, 0, 0.35);
    color: #ffb74d;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 600;
}

.comprar-duracion-list { display: flex; flex-direction: column; gap: 10px; }
.comprar-duracion-item {
    background: var(--card-bg);
    border: 1.5px solid transparent;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: var(--text-color);
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.comprar-duracion-item.destacado { border-color: var(--accent-color); }
.comprar-duracion-etiqueta { display: flex; flex-direction: column; gap: 2px; }
.comprar-duracion-badge { font-size: 0.7rem; color: var(--accent-color); font-weight: 700; }
.comprar-duracion-precio { font-weight: 800; font-size: 1.05rem; text-align: right; }
.comprar-duracion-descuento { font-size: 0.7rem; color: #81c784; display:block; font-weight: 600; }

.comprar-datos-pago {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 20px;
}
.comprar-datos-pago-fila { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--glass-border); }
.comprar-datos-pago-fila:last-child { border-bottom: none; }
.comprar-datos-pago-fila span:first-child { color: var(--text-muted); font-size: 0.85rem; }
.comprar-datos-pago-fila span:last-child { font-weight: 700; text-align: right; }
.comprar-datos-pago-monto { color: var(--accent-color) !important; font-size: 1.2rem !important; }

.comprar-upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 2px dashed var(--glass-border);
    border-radius: 14px;
    padding: 24px;
    cursor: pointer;
    min-height: 120px;
}
.comprar-upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); text-align: center; }
.comprar-upload-placeholder i { font-size: 1.8rem; }
#comprar-foto-preview { max-width: 100%; max-height: 260px; border-radius: 12px; }


/* Overlay "Subiendo foto..." al elegir el comprobante */
.comprar-upload-box { position: relative; }
.comprar-upload-box.subiendo #comprar-foto-preview { display: block !important; filter: brightness(0.35); }
.comprar-upload-box.subiendo::after {
    content: "Subiendo foto...";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    background: rgba(0,0,0,0.15);
    border-radius: 14px;
}

/* Botones de copiar en los datos de pago */
.comprar-datos-pago-valor-copiable {
    display: flex;
    align-items: center;
    gap: 8px;
}
.comprar-btn-copiar {
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}
.comprar-direccion-cripto { font-size: 0.72rem; word-break: break-all; }


/* Tarjeta fija de "Gana con Referidos" (ya no es un acordeon plegable) */
.micuenta-referidos-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding-top: 14px;
}