/**
 * Canal Live Player — epg.css
 * [canal_epg]      → franja horizontal 3 bloques
 * [canal_schedule] → lista vertical con navegación de días
 */

/* ── Variables ───────────────────────────────────────────────────── */
:root {
    --clp-bg:       #0f1117;
    --clp-surface:  #1a1d27;
    --clp-border:   #2a2d3a;
    --clp-accent:   #e53e3e;
    --clp-glow:     rgba(229,62,62,0.3);
    --clp-text:     #e2e8f0;
    --clp-muted:    #718096;
    --clp-live-bg:  #1a0505;
    --clp-radius:   8px;
    --clp-font:     'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════
   FRANJA EPG HORIZONTAL — [canal_epg]
   3 bloques: EN VIVO + 2 SIGUIENTES
   ═══════════════════════════════════════════════════════════════════ */

.clp-epg-wrapper {
    font-family: var(--clp-font);
    background:  var(--clp-bg);
    border:      1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    overflow:    hidden;
    margin:      1rem 0;
    color:       var(--clp-text);
}

/* ── Cabecera ────────────────────────────────────────────────────── */
.clp-epg-header {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 16px;
    background:      var(--clp-surface);
    border-bottom:   1px solid var(--clp-border);
    font-size:       0.78rem;
    color:           var(--clp-muted);
    letter-spacing:  0.04em;
    text-transform:  uppercase;
}

.clp-epg-ch-logo {
    width:        32px;
    height:       32px;
    object-fit:   contain;
    border-radius: 4px;
}

.clp-epg-now-dot {
    display:       inline-block;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--clp-accent);
    margin-left:   auto;
    animation:     clp-pulse 1.5s infinite;
}

.clp-epg-now-time {
    font-size:    0.78rem;
    color:        var(--clp-muted);
    white-space:  nowrap;
}

/* ── Fila de 3 bloques ───────────────────────────────────────────── */
/*
 * display:flex + flex-wrap:nowrap → los 3 bloques SIEMPRE en fila.
 * overflow-x:auto → scroll si el viewport es estrecho.
 */
.clp-epg-strip-row {
    display:        flex;
    flex-direction: row;
    flex-wrap:      nowrap;        /* NO bajar a segunda línea */
    align-items:    stretch;
    gap:            0;
    overflow-x:     auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--clp-border) transparent;
}

.clp-epg-strip-row::-webkit-scrollbar       { height: 3px; }
.clp-epg-strip-row::-webkit-scrollbar-thumb { background: var(--clp-border); border-radius: 2px; }

/* ── Bloque individual ───────────────────────────────────────────── */
.clp-epg-block {
    position:       relative;
    flex:           1 0 0;         /* los 3 se reparten el espacio equitativamente */
    min-width:      160px;         /* mínimo para que el título sea legible */
    padding:        14px 16px 16px;
    border-right:   1px solid var(--clp-border);
    display:        flex;
    flex-direction: column;
    gap:            5px;
    box-sizing:     border-box;
    overflow:       hidden;
    transition:     background 0.15s;
}

.clp-epg-block:last-child {
    border-right: none;
}

/* Bloque activo (EN VIVO) */
.clp-epg-block.clp-epg-live {
    background:  var(--clp-live-bg);
    border-left: 3px solid var(--clp-accent);
    padding-left: 13px;
}

/* Bloques siguientes — ligero oscurecimiento */
.clp-epg-block.clp-epg-next {
    opacity: 0.85;
}

/* ── Barra de progreso (parte inferior del bloque activo) ────────── */
.clp-epg-progress {
    position:   absolute;
    bottom:     0;
    left:       0;
    height:     3px;
    background: var(--clp-accent);
    box-shadow: 0 0 8px var(--clp-glow);
    transition: width 1s linear;
}

/* ── Badge EN VIVO ───────────────────────────────────────────────── */
.clp-epg-live-badge {
    display:        inline-block;
    align-self:     flex-start;
    font-size:      0.58rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    color:          #fff;
    background:     var(--clp-accent);
    padding:        2px 6px;
    border-radius:  3px;
    text-transform: uppercase;
}

/* ── Hora ────────────────────────────────────────────────────────── */
.clp-epg-time {
    font-size:      0.7rem;
    color:          var(--clp-muted);
    white-space:    nowrap;
    letter-spacing: 0.02em;
}

/* ── Título: wrap hasta 3 líneas ─────────────────────────────────── */
.clp-epg-title {
    font-size:             0.88rem;
    font-weight:           600;
    color:                 var(--clp-text);
    line-height:           1.35;
    white-space:           normal;   /* PERMITE salto de línea */
    display:               -webkit-box;
    -webkit-line-clamp:    3;
    -webkit-box-orient:    vertical;
    overflow:              hidden;
}

/* ── Descripción (solo bloque activo) ───────────────────────────── */
.clp-epg-desc {
    font-size:          0.72rem;
    color:              var(--clp-muted);
    line-height:        1.4;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* ── Sin datos ───────────────────────────────────────────────────── */
.clp-epg-empty {
    padding:    2rem;
    text-align: center;
    color:      var(--clp-muted);
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════════
   SCHEDULE VERTICAL — [canal_schedule]
   ═══════════════════════════════════════════════════════════════════ */

.clp-schedule-wrapper {
    font-family:   var(--clp-font);
    background:    var(--clp-bg);
    border:        1px solid var(--clp-border);
    border-radius: var(--clp-radius);
    margin:        1rem 0;
    color:         var(--clp-text);
    overflow:      hidden;
}

/* ── Cabecera de canal ───────────────────────────────────────────── */
.clp-schedule-ch-header {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       12px 18px;
    background:    var(--clp-surface);
    border-bottom: 1px solid var(--clp-border);
}

.clp-schedule-ch-logo {
    width:        36px;
    height:       36px;
    object-fit:   contain;
    border-radius: 4px;
}

.clp-schedule-ch-name {
    font-size:   0.88rem;
    font-weight: 700;
    color:       var(--clp-text);
}

/* ── Barra de navegación de días ─────────────────────────────────── */
.clp-schedule-nav {
    display:        flex;
    align-items:    center;
    background:     var(--clp-surface);
    border-bottom:  1px solid var(--clp-border);
}

.clp-schedule-btn-prev,
.clp-schedule-btn-next {
    flex:        0 0 auto;
    background:  none;
    border:      none;
    color:       var(--clp-muted);
    font-size:   1.4rem;
    line-height: 1;
    padding:     8px 18px;
    cursor:      pointer;
    transition:  color 0.15s, background 0.15s;
}

.clp-schedule-btn-prev:hover:not(:disabled),
.clp-schedule-btn-next:hover:not(:disabled) {
    color:      var(--clp-text);
    background: rgba(255,255,255,0.05);
}

.clp-schedule-btn-prev:disabled,
.clp-schedule-btn-next:disabled {
    opacity: 0.25;
    cursor:  not-allowed;
}

.clp-schedule-day-title {
    flex:           1;
    text-align:     center;
    font-size:      0.88rem;
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          var(--clp-text);
    padding:        12px 6px;
}

.clp-schedule-btn-today {
    flex:           0 0 auto;
    background:     var(--clp-accent);
    border:         none;
    color:          #fff;
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        5px 12px;
    border-radius:  4px;
    margin:         0 10px;
    cursor:         pointer;
    transition:     opacity 0.15s;
}

.clp-schedule-btn-today:hover:not(:disabled) { opacity: 0.82; }
.clp-schedule-btn-today:disabled             { opacity: 0.35; cursor: not-allowed; }

/* ── Lista de programas ──────────────────────────────────────────── */
.clp-schedule-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

/* Animación de fade al cambiar día */
.clp-schedule-list.clp-fading {
    opacity:    0;
    transition: opacity 0.15s;
}

.clp-schedule-item {
    display:    flex;
    align-items: flex-start;
    gap:         16px;
    padding:     13px 20px;
    border-bottom: 1px solid var(--clp-border);
    position:   relative;
    transition: background 0.12s;
}

.clp-schedule-item:last-child { border-bottom: none; }
.clp-schedule-item:hover      { background: rgba(255,255,255,0.025); }

/* Activo (EN VIVO ahora) */
.clp-schedule-item.clp-sched-live {
    background:   var(--clp-live-bg);
    border-left:  3px solid var(--clp-accent);
    padding-left: 17px;
}

/* Ya terminó */
.clp-schedule-item.clp-sched-past {
    opacity: 0.4;
}

/* ── Hora de inicio ──────────────────────────────────────────────── */
.clp-schedule-time {
    flex:        0 0 50px;
    font-size:   0.82rem;
    font-weight: 700;
    color:       var(--clp-muted);
    white-space: nowrap;
    padding-top: 1px;
}

.clp-schedule-item.clp-sched-live .clp-schedule-time {
    color: var(--clp-accent);
}

/* ── Contenido del programa ──────────────────────────────────────── */
.clp-schedule-content {
    flex:      1;
    min-width: 0;
}

.clp-schedule-item-title {
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--clp-text);
    line-height: 1.3;
    margin-bottom: 3px;
    word-break:  break-word;
}

.clp-schedule-item-meta {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
    margin-top:  2px;
}

.clp-schedule-item-dur  {
    font-size: 0.7rem;
    color:     var(--clp-muted);
}

.clp-schedule-item-cat  {
    font-size:      0.65rem;
    color:          var(--clp-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.clp-schedule-item-desc {
    font-size:          0.75rem;
    color:              var(--clp-muted);
    margin-top:         4px;
    line-height:        1.4;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* Badge EN VIVO en el schedule */
.clp-sched-live-badge {
    display:        inline-block;
    font-size:      0.58rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    color:          #fff;
    background:     var(--clp-accent);
    padding:        1px 6px;
    border-radius:  3px;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left:    6px;
}

/* Barra de progreso del programa activo */
.clp-sched-prog-bar {
    position:   absolute;
    bottom:     0;
    left:       0;
    height:     2px;
    background: var(--clp-accent);
    box-shadow: 0 0 6px var(--clp-glow);
    transition: width 1s linear;
}

/* Sin programas */
.clp-schedule-empty {
    padding:    2.5rem;
    text-align: center;
    color:      var(--clp-muted);
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════════
   ANIMACIONES
   ═══════════════════════════════════════════════════════════════════ */

@keyframes clp-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%       { opacity: 0.5; transform: scale(0.75); }
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .clp-epg-block    { min-width: 140px; padding: 10px 12px 14px; }
    .clp-epg-title    { font-size: 0.82rem; }

    .clp-schedule-item   { padding: 10px 14px; gap: 10px; }
    .clp-schedule-time   { flex: 0 0 42px; font-size: 0.78rem; }
    .clp-schedule-btn-prev,
    .clp-schedule-btn-next { padding: 8px 12px; }
}


/* ═══════════════════════════════════════════════════════════════════
   MODO CLARO
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: light) {
    :root {
        --clp-bg:      #f7f8fc;
        --clp-surface: #ffffff;
        --clp-border:  #e2e8f0;
        --clp-text:    #1a202c;
        --clp-muted:   #718096;
        --clp-live-bg: #fff0f0;
    }
}