@import url('base.css');
@import url('header.css');

@import url('mobile-bottom-nav.css');
@import url('mobile-filters.css');
@import url('hero.css?v=1.5');
@import url('content.css');
@import url('details-view.css');
@import url('stats.css');
@import url('history.css');
@import url('providers.css');
@import url('m3u-generator.css');
@import url('chat.css');
@import url('modals.css');
@import url('footer.css');
@import url('custom-filters.css');
@import url('settings.css');
@import url('tv-navigation.css');
@import url('android-tv-optimizations.css');
/* Profile Overlay */
.profile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #141414; z-index: 100000; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.profile-title { color: #fff; font-size: 3vw; margin-bottom: 2em; font-weight: 500; }
.profile-list { display: flex; gap: 2vw; justify-content: center; align-items: center; }
.profile-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.2s; opacity: 0.7; }
.profile-item:hover { transform: scale(1.1); opacity: 1; }
.profile-avatar { width: 10vw; height: 10vw; min-width: 84px; min-height: 84px; max-width: 200px; max-height: 200px; border-radius: 8px; font-size: 5vw; display: flex; align-items: center; justify-content: center; background-color: #333; margin-bottom: 1em; border: 3px solid transparent; }
.profile-item:hover .profile-avatar { border-color: #fff; }
.profile-name { color: #808080; font-size: 1.3vw; min-font-size: 12px; transition: color 0.2s; }
.profile-item:hover .profile-name { color: #fff; }
.profile-pin-modal { background-color: #141414; color: #fff; border: 1px solid #333; }
.profile-pin-modal .modal-header { border-bottom: 1px solid #333; }
.profile-pin-modal .modal-footer { border-top: 1px solid #333; }
.profile-pin-modal input { background: #333; color: white; border: none; font-size: 24px; letter-spacing: 5px; }

/* Role Restrictions */
body.role-viewer #settings-btn,
body.role-viewer [data-bs-target="#settingsModal"],
body.role-viewer .btn-jdownloader,
body.role-viewer .jdownloader-btn-container,
body.role-viewer #jdownloader-controls,
body.role-viewer .download-specific-btn,
body.role-viewer .download-btn,
body.role-viewer .download-season-btn,
body.profile-komino #settings-btn,
body.profile-komino [data-bs-target="#settingsModal"],
body.profile-komino .download-specific-btn,
body.profile-komino .download-btn,
body.profile-komino .download-season-btn {
    display: none !important;
}

body.role-downloader #settings-btn,
body.role-downloader [data-bs-target="#settingsModal"] {
    display: none !important;
}

/* ============================================================
   Optimizaciones Tablet & Restricciones EXCLUSIVAS para Amparo (role-online_viewer)
   ============================================================ */
/* 1. Elementos Ocultos Exclusivamente para Amparo */
body.role-online_viewer #top-floating-nav,
body.role-online_viewer .top-floating-nav,
body.role-online_viewer .mobile-filters-container,
body.role-online_viewer #mobile-bottom-nav,
body.role-online_viewer .mobile-bottom-nav,
body.role-online_viewer footer.footer,
body.role-online_viewer .footer,
body.role-online_viewer #settings-btn,
body.role-online_viewer [data-bs-target="#settingsModal"],
body.role-online_viewer #profile-btn,
body.role-online_viewer .btn-jdownloader,
body.role-online_viewer .jdownloader-btn-container,
body.role-online_viewer #jdownloader-controls,
body.role-online_viewer .download-specific-btn,
body.role-online_viewer .download-btn,
body.role-online_viewer .browser-download-btn,
body.role-online_viewer .download-season-btn,
body.role-online_viewer .vlc-btn,
body.role-online_viewer .vlc-specific-btn,
body.role-online_viewer .history-vlc-btn,
body.role-online_viewer .servers-container,
body.role-online_viewer #history-section,
body.role-online_viewer #plex-up-next-overlay,
body.role-online_viewer .up-next-overlay,
body.role-online_viewer .watchlist-header-group,
body.role-online_viewer .watchlist-movies-group,
body.role-online_viewer .item-card .item-actions,
body.role-online_viewer .item-card .favorites-btn {
    display: none !important;
}

/* 2. Cabecera con Buscador Grande y Pastilla de Perfil */
body.role-online_viewer header.top-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1.2rem 2.5rem !important;
    background: linear-gradient(180deg, rgba(10, 10, 15, 0.98) 0%, transparent 100%) !important;
    border-bottom: none !important;
    gap: 1.5rem !important;
}

body.role-online_viewer .top-bar-left {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
}

body.role-online_viewer .search-bar {
    display: flex !important;
    width: 100% !important;
    max-width: 580px !important;
    position: relative !important;
}

body.role-online_viewer .search-input {
    width: 100% !important;
    height: 54px !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    padding-left: 3.6rem !important;
    padding-right: 1.5rem !important;
    border-radius: 2rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

body.role-online_viewer .search-input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
}

body.role-online_viewer .search-input:focus {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: var(--accent, #00d2ff) !important;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.4) !important;
}

body.role-online_viewer .search-icon {
    position: absolute !important;
    left: 1.3rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.35rem !important;
    color: var(--accent, #00d2ff) !important;
    pointer-events: none !important;
}

/* 3. Pastilla de Perfil Destacada y Nítida */
body.role-online_viewer #profile-welcome {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    font-family: 'Poppins', sans-serif !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 0.6rem 1.4rem !important;
    border-radius: 2rem !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
    white-space: nowrap !important;
}

body.role-online_viewer #profile-welcome:hover {
    transform: scale(1.05) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 6px 25px rgba(0, 210, 255, 0.3) !important;
}

/* 3. Cuadrícula de Series: Posters más grandes y con proporción horizontal */
body.role-online_viewer .content-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 2.2rem !important;
    padding: 1.5rem 0.5rem !important;
}

body.role-online_viewer .item-card {
    border-radius: 1.4rem !important;
    background: rgba(20, 20, 30, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.role-online_viewer .item-card .item-poster {
    aspect-ratio: 16 / 11 !important;
    border-radius: 1.4rem 1.4rem 0 0 !important;
    object-fit: cover !important;
}

body.role-online_viewer .item-card .item-info {
    padding: 1.3rem !important;
}

body.role-online_viewer .item-card .item-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.3 !important;
}

body.role-online_viewer .item-card .item-meta {
    font-size: 0.95rem !important;
    margin-top: 0.5rem !important;
}

/* Ajuste de padding inferior al no haber barra móvil */
body.role-online_viewer main.main-content {
    padding-bottom: 2rem !important;
}

#pinModal { z-index: 100005; }
.modal-backdrop { z-index: 100004 !important; }



/* 4. Carátula de Episodios con Botón Play Transparente Estilo YouTube (Exclusivo Amparo) */
body.role-online_viewer .episode-thumb-wrap {
    position: relative !important;
    display: inline-block !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    width: 220px !important;
    height: 124px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.role-online_viewer .episode-thumb-wrap:hover,
body.role-online_viewer .episode-thumb-wrap:active {
    transform: scale(1.03) !important;
    box-shadow: 0 6px 20px rgba(0, 210, 255, 0.35) !important;
}

body.role-online_viewer .episode-thumb-wrap .episode-item-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: filter 0.2s ease !important;
}

body.role-online_viewer .episode-yt-play-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
}

body.role-online_viewer .episode-thumb-wrap:hover .episode-yt-play-overlay {
    background: rgba(0, 0, 0, 0.2) !important;
}

body.role-online_viewer .episode-yt-play-btn {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.65) !important;
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(5px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}

body.role-online_viewer .episode-yt-play-btn i {
    color: #ffffff !important;
    font-size: 1.3rem !important;
    margin-left: 3px !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
}

body.role-online_viewer .episode-thumb-wrap:hover .episode-yt-play-btn,
body.role-online_viewer .episode-thumb-wrap:active .episode-yt-play-btn {
    transform: scale(1.15) !important;
    background: rgba(0, 210, 255, 0.85) !important;
    border-color: #ffffff !important;
}

body.role-online_viewer .episode-item {
    gap: 1.5rem !important;
    padding: 1.2rem !important;
    border-radius: 1rem !important;
    background: rgba(255, 255, 255, 0.03) !important;
    margin-bottom: 1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Visibility of Audit Logs nav */
li.admin-only-nav { display: none !important; }
body.role-admin li.admin-only-nav { display: list-item !important; }

/* =========================================================
   VISTA DE DETALLES Y CUADRÍCULA DE CAPÍTULOS PARA AMPARO
   ========================================================= */
body.role-online_viewer .amparo-details-wrapper {
    max-width: 1500px;
    margin: 0 auto;
}

/* Selector de Temporadas Arriba (con salto de línea natural hacia abajo) */
body.role-online_viewer .amparo-seasons-top-wrapper #seasons-navigator .season-tab-btn {
    border-radius: 9999px !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 1.05rem !important;
    border: 2px solid rgba(139, 92, 246, 0.35) !important;
    background: rgba(30, 27, 75, 0.85) !important;
    transition: all 0.2s ease !important;
}

body.role-online_viewer .amparo-seasons-top-wrapper #seasons-navigator .season-tab-btn:hover {
    border-color: rgba(236, 72, 153, 0.8) !important;
    background: rgba(49, 46, 129, 0.95) !important;
}

body.role-online_viewer .amparo-seasons-top-wrapper #seasons-navigator .season-tab-btn.active {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    border-color: #f472b6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.45) !important;
}

/* Cuadrícula compacta de episodios para que quepan muchos más en pantalla */
body.role-online_viewer .amparo-episodes-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap: 1rem !important;
    padding-bottom: 3rem !important;
}

@media (min-width: 600px) {
    body.role-online_viewer .amparo-episodes-grid {
        grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)) !important;
        gap: 1.15rem !important;
    }
}

@media (min-width: 900px) {
    body.role-online_viewer .amparo-episodes-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 1.25rem !important;
    }
}

body.role-online_viewer .amparo-episode-card {
    background: rgba(30, 27, 75, 0.5) !important;
    border: 1.5px solid rgba(139, 92, 246, 0.3) !important;
    border-radius: 0.85rem !important;
    overflow: hidden !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
}

body.role-online_viewer .amparo-episode-card:hover,
body.role-online_viewer .amparo-episode-card:focus {
    transform: translateY(-3px) !important;
    border-color: rgba(236, 72, 153, 0.85) !important;
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.3) !important;
}

body.role-online_viewer .amparo-episode-card:active {
    transform: scale(0.96) !important;
    background: rgba(49, 46, 129, 0.8) !important;
}

body.role-online_viewer .amparo-ep-thumb-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #0f172a !important;
    overflow: hidden !important;
}

body.role-online_viewer .amparo-ep-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

body.role-online_viewer .amparo-episode-card .episode-yt-play-btn {
    width: 40px !important;
    height: 40px !important;
}

body.role-online_viewer .amparo-episode-card .episode-yt-play-btn i {
    font-size: 1.05rem !important;
}

body.role-online_viewer .amparo-ep-info {
    padding: 0.65rem 0.5rem !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
}

body.role-online_viewer .amparo-ep-number {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 0 !important;
}

body.role-online_viewer .amparo-ep-name {
    font-size: 0.8rem !important;
    opacity: 0.8 !important;
    margin-top: 2px !important;
}

/* Ocultar el botón circular flotante genérico en el perfil de Amparo para no tapar el título */
body.role-online_viewer .item-details .back-button,
body.role-online_viewer #item-details-view .back-button {
    display: none !important;
}

body.role-online_viewer .amparo-seasons-top-wrapper #seasons-navigator {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
}

body.role-online_viewer .amparo-seasons-top-wrapper #seasons-navigator .season-tab-btn {
    width: auto !important;
    min-width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    padding: 0.55rem 1.4rem !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    border: 2px solid rgba(139, 92, 246, 0.35) !important;
    background: rgba(30, 27, 75, 0.85) !important;
    color: #e2e8f0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

body.role-online_viewer .amparo-seasons-top-wrapper #seasons-navigator .season-tab-btn:hover {
    border-color: rgba(236, 72, 153, 0.8) !important;
    background: rgba(49, 46, 129, 0.95) !important;
}

body.role-online_viewer .amparo-seasons-top-wrapper #seasons-navigator .season-tab-btn.active {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    border-color: #f472b6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.45) !important;
}

/* Póster táctil interactivo con Play estilo YouTube para películas en perfil de Amparo */
body.role-online_viewer .amparo-movie-poster-card {
    position: relative;
    display: inline-block;
    max-width: 320px;
    width: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.role-online_viewer .amparo-movie-poster-card:hover,
body.role-online_viewer .amparo-movie-poster-card:focus {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(236, 72, 153, 0.85);
    box-shadow: 0 16px 35px rgba(236, 72, 153, 0.4);
}

body.role-online_viewer .amparo-movie-poster-card:active {
    transform: scale(0.97);
}

body.role-online_viewer .amparo-movie-poster-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    background: #0f172a;
    overflow: hidden;
}

body.role-online_viewer .amparo-movie-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.role-online_viewer .amparo-movie-poster-card .episode-yt-play-btn {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: rgba(236, 72, 153, 0.9) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(236, 72, 153, 0.6) !important;
}

body.role-online_viewer .amparo-movie-poster-card .episode-yt-play-btn i {
    font-size: 1.6rem !important;
    color: #ffffff !important;
    margin-left: 4px !important;
}

/* Optimización de pantalla completa para Amparo: Subir contenido y cuadrícula más compacta */
body.role-online_viewer #watchlist-section {
    padding-top: 0.25rem !important;
    margin-top: 0 !important;
}

body.role-online_viewer #watchlist-section .watchlist-header-group,
body.role-online_viewer #watchlist-section .section-header {
    display: none !important;
}

body.role-online_viewer #watchlist-section .watchlist-series-group,
body.role-online_viewer #watchlist-section .watchlist-movies-group {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.role-online_viewer .main-content {
    padding-top: 0.5rem !important;
}

/* Cuadrícula de favoritos con tamaño optimizado y legible */
body.role-online_viewer #watchlist-series-grid.content-grid,
body.role-online_viewer #content-grid.content-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 1.1rem !important;
    padding-top: 0.25rem !important;
}

@media (min-width: 600px) {
    body.role-online_viewer #watchlist-series-grid.content-grid,
    body.role-online_viewer #content-grid.content-grid {
        grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important;
        gap: 1.25rem !important;
    }
}

@media (min-width: 900px) {
    body.role-online_viewer #watchlist-series-grid.content-grid,
    body.role-online_viewer #content-grid.content-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
        gap: 1.4rem !important;
    }
}