/* Streametx - Canales/Grilla TV - Strario Style EPG-Only View */

/* ============================================
   GRILLA TV HEADER
   ============================================ */
.grilla-header {
    margin-bottom: 14px;
}
.grilla-title {
    font-size: 18px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* ============================================
   EPG CHANNEL ROW - Strario Style
   Logo left | Current Program | Scrollable upcoming
   ============================================ */
.canal-epg-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    min-height: 74px;
}
.canal-epg-row:hover {
    background: rgba(255,255,255,0.03);
}
.canal-epg-row:active {
    background: rgba(255,255,255,0.05);
    transform: scale(0.995);
}

/* Logo column - fixed width */
.canal-epg-logo-col {
    width: 72px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 6px;
    border-right: 1px solid var(--borde);
}
.canal-epg-logo-col img {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    background: rgba(255,255,255,0.04);
    padding: 3px;
}
.canal-epg-logo-placeholder {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--texto-dim);
}
.canal-epg-logo-name {
    font-size: 8px; font-weight: 700;
    color: var(--texto-dim);
    text-align: center;
    max-width: 64px;
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: lowercase;
}

/* Programs horizontal scroll area */
.canal-epg-programs {
    flex: 1;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.canal-epg-programs::-webkit-scrollbar { display: none; }

/* Individual program block */
.canal-epg-program-block {
    min-width: 200px;
    max-width: 280px;
    flex-shrink: 0;
    padding: 12px 14px;
    border-right: 1px solid rgba(255,255,255,0.03);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    scroll-snap-align: start;
    position: relative;
}
.canal-epg-program-block:first-child {
    min-width: 220px;
}
.canal-epg-program-block.is-current {
    background: rgba(255,255,255,0.02);
}
.canal-epg-program-block.is-next {
    opacity: 0.7;
}
.canal-epg-program-block.is-next:hover {
    opacity: 0.9;
}

.canal-epg-program-title {
    font-size: 14px; font-weight: 700;
    color: var(--texto);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.canal-epg-program-time {
    font-size: 11px; font-weight: 600;
    color: var(--texto-muted);
}

/* Progress bar - Red like Strario */
.epg-progress {
    width: 100%; height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px; overflow: hidden;
    margin-top: 4px;
}
.epg-progress-fill {
    height: 100%;
    background: var(--rojo);
    border-radius: 3px;
    transition: width 1s linear;
}

/* No EPG fallback */
.canal-epg-no-data {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--texto-dim);
    font-style: italic;
}

/* ============================================
   CATEGORY SECTION (Grilla)
   ============================================ */
.grilla-category {
    margin-bottom: 8px;
}
.grilla-category-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; margin-bottom: 4px;
}
.grilla-category-icon {
    font-size: 16px; color: var(--texto-muted);
}
.grilla-category-name {
    font-size: 13px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.8px;
}
.grilla-category-count {
    margin-left: auto;
    padding: 2px 10px; border-radius: var(--radius-pill);
    background: rgba(0, 200, 150, 0.12); color: var(--verde);
    font-size: 10px; font-weight: 800;
}

/* ============================================
   CHANNEL DETAIL PAGE
   ============================================ */
.canal-detail-header {
    margin-bottom: 16px;
}
.canal-detail-breadcrumb {
    font-size: 12px; color: var(--texto-dim); margin-bottom: 16px;
}
.canal-detail-breadcrumb a { color: var(--texto-muted); }
.canal-detail-title {
    font-size: 20px; font-weight: 900;
    text-transform: uppercase; margin-bottom: 6px;
}
.canal-detail-sub {
    font-size: 13px; color: var(--texto-muted);
}

/* ============================================
   PLAYER PAGE - Strario Style
   ============================================ */
.player-page {
    padding-bottom: 20px;
}

/* Player video wrapper */
.player-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 0;
}
.player-video-wrapper video,
.player-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
    display: block;
    object-fit: contain !important;
}
.player-video-wrapper .player-back-btn {
    position: absolute; top: 12px; left: 12px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    transition: all var(--transition);
}
.player-video-wrapper .player-back-btn:hover {
    background: rgba(0,0,0,0.8);
}

/* Channel info bar below video */
.player-channel-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
}
.player-channel-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(229,9,20,0.4) 100%);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(229,9,20,0.3);
}
.player-channel-info {
    flex: 1; min-width: 0;
}
.player-channel-name {
    font-size: 15px; font-weight: 800;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
    line-height: 1.3;
}
.player-channel-program {
    font-size: 12px;
    color: var(--texto-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
    display: flex;
    align-items: center;
}
.player-bar-logo {
    flex-shrink: 0;
}
.player-bar-logo img {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    background: rgba(255,255,255,0.06);
    padding: 4px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.player-channel-logo-placeholder {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(229,9,20,0.15), rgba(229,9,20,0.05));
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--accent);
    flex-shrink: 0;
    border: 1px solid rgba(229,9,20,0.2);
}
/* Legacy EPG card styles - kept for backward compat, no longer rendered */

/* Live badge pulse animation */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    animation: livePulse 2s ease-in-out infinite;
}
.live-dot {
    width: 6px; height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: liveDotPulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229,9,20,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(229,9,20,0); }
}
@keyframes liveDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.7); }
}

/* Player action buttons */
.player-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 14px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}
.player-action-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    color: var(--texto);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.player-action-item:last-child {
    border-bottom: none;
}
.player-action-item:hover,
.player-action-item:active {
    background: rgba(255,255,255,0.06);
}
.player-action-icon {
    font-size: 18px;
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    color: var(--texto-muted);
}
.player-action-text {
    flex: 1;
}
.player-action-arrow {
    color: var(--texto-dim);
    font-size: 14px;
    transition: transform 0.2s ease;
}

/* Playback options panel */
.playback-options-panel {
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: var(--radius-md);
    margin-top: 8px;
    overflow: hidden;
}
.playback-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--texto-secondary);
    cursor: pointer;
    transition: all var(--transition);
    border-bottom: 1px solid var(--borde);
}
.playback-option:last-child { border-bottom: none; }
.playback-option:hover { background: rgba(255,255,255,0.04); }
.playback-option.active {
    background: rgba(220,38,38,0.08);
    color: var(--accent);
    font-weight: 700;
}
.playback-option-badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

/* Player ad banner */
.player-ad-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--borde);
    border-radius: var(--radius-md);
    margin-top: 12px;
}
.player-ad-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}
.player-ad-text {
    font-size: 12px;
    color: var(--texto-secondary);
    line-height: 1.5;
}
.player-ad-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--verde);
    margin-top: 6px;
    cursor: pointer;
}

/* Upcoming EPG list */
.player-upcoming {
    margin-top: 18px;
}
.player-upcoming-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--texto-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.player-upcoming-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.02);
    margin-bottom: 4px;
    transition: background 0.15s ease;
}
.player-upcoming-item:hover {
    background: rgba(255,255,255,0.04);
}
.player-upcoming-time {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    min-width: 90px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.player-upcoming-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--texto-secondary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   RESPONSIVE - Mobile
   ============================================ */
@media (max-width: 480px) {
    .canal-epg-logo-col {
        width: 60px;
        padding: 10px 4px;
    }
    .canal-epg-logo-col img,
    .canal-epg-logo-placeholder {
        width: 38px; height: 38px;
    }
    .canal-epg-program-block {
        min-width: 170px;
        padding: 10px 12px;
    }
    .canal-epg-program-block:first-child {
        min-width: 190px;
    }
    .canal-epg-program-title { font-size: 13px; }
    .canal-epg-program-time { font-size: 10px; }
    .canal-epg-logo-name { font-size: 7px; }
    
    .player-channel-bar {
        padding: 12px 10px;
    }
    .player-channel-logo,
    .player-channel-logo-placeholder {
        width: 42px; height: 42px;
    }
    .player-channel-name { font-size: 15px; }
}

/* ============================================
   RESPONSIVE - Tablet
   ============================================ */
@media (min-width: 481px) and (max-width: 768px) {
    .canal-epg-logo-col {
        width: 68px;
    }
    .canal-epg-program-block {
        min-width: 200px;
        max-width: 260px;
    }
}

/* ============================================
   RESPONSIVE - Desktop / Tablet landscape
   ============================================ */
@media (min-width: 769px) {
    .canal-epg-program-block {
        min-width: 220px;
        max-width: 300px;
    }
    .canal-epg-program-block:first-child {
        min-width: 250px;
    }
    .player-video-wrapper {
        border-radius: var(--radius);
    }
}

/* ============================================
   NATIVE PLAYER ACTIVE STATE
   When Android ExoPlayer is rendering above the WebView,
   the web video wrapper is hidden and the channel info
   shows directly at the top of the visible WebView area.
   All spacing is eliminated so content hugs the native player.
   ============================================ */

/* Hide the web video wrapper entirely */
body.native-player-active .player-video-wrapper {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Hide navbar and bottombar via CSS for instant effect */
body.native-player-active .navbar {
    display: none !important;
}
body.native-player-active .bottom-nav {
    display: none !important;
}

/* Remove ALL padding/margins from main-content so it starts at y=0 */
body.native-player-active .main-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    max-width: 100% !important;
}

/* Player page itself: no top padding, tight layout */
body.native-player-active .player-page {
    padding-top: 0;
    padding-bottom: 16px;
}

/* Hide back button since native player has its own controls */
body.native-player-active .player-back-btn {
    display: none !important;
}

/* Channel info bar: prominent glassmorphism header below the native player */
body.native-player-active .player-channel-bar {
    padding: 14px 12px;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(135deg, rgba(19,28,39,0.98) 0%, rgba(15,22,30,0.95) 100%);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Slightly larger logo in native mode for visibility */
body.native-player-active .player-channel-logo,
body.native-player-active .player-channel-logo-placeholder {
    width: 48px;
    height: 48px;
}

body.native-player-active .player-channel-name {
    font-size: 16px;
}

body.native-player-active .player-channel-program {
    font-size: 13px;
}

/* Tighten action items */
body.native-player-active .player-actions {
    margin-top: 6px;
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* Hide the ad banner in native mode */
body.native-player-active .player-ad-banner {
    display: none;
}

/* Smooth transition when entering/leaving native player */
body.native-player-active .player-page {
    animation: fadeIn 0.2s ease-out;
}

/* ============================================
   MOBILE CHANNELS GRID - TV-style visual cards
   ============================================ */
.mobile-channels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    padding: 10px 0 30px;
}

.mobile-ch-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 6px;
    aspect-ratio: 1.25 / 1;
    background: #151b26; /* Solid dark background matching TV */
    border: 2px solid #222b3c; /* Exact TV card border size & color */
    border-radius: 14px; /* Wide TV-style rounded corners */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.mobile-ch-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 75%);
    opacity: 1;
    transition: opacity 0.3s ease;
}

.mobile-ch-card:hover,
.mobile-ch-card:active,
.mobile-ch-card:focus {
    border-color: #ffffff !important; /* Premium bright white glow border */
    transform: scale(1.06); /* Scale up transformation */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.45) !important; /* White glowing focus contour */
    outline: none;
    z-index: 5;
}

.mobile-ch-logo {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.mobile-ch-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.mobile-ch-letter {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--accent), #ff2d2d);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(229, 9, 20, 0.3);
}

.mobile-ch-name {
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    color: #ffffff; /* Bright white text matching TV */
    position: relative;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 380px) {
    .mobile-channels-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .mobile-ch-card {
        border-radius: 10px;
    }
    .mobile-ch-logo { width: 40px; height: 40px; }
    .mobile-ch-letter { width: 36px; height: 36px; font-size: 14px; }
    .mobile-ch-name { font-size: 10px; }
}

@media (min-width: 600px) {
    .mobile-channels-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 14px;
    }
}