/* TIMETABLE SPEKTRA DESIGN */
.spk-timetable-page {
    background: #0a0a0a;
    color: #fff;
    min-height: 100vh;
    /* Actualizado: Más espacio superior para separar del header */
    padding: 120px 20px 80px 20px; 
    font-family: 'Inter', sans-serif; /* O la que uses */
}

.container-parrilla { 
    max-width: 1000px; 
    margin: 0 auto; 
}

/* Margen extra en escritorio para evitar que se pegue al menú fijo */
@media (min-width: 768px) {
    .container-parrilla {
        margin-top: 40px;
    }
}

.parrilla-header { margin-bottom: 50px; }
.main-title { font-size: 70px; font-weight: 900; letter-spacing: -3px; margin: 0; line-height: 0.9; }
.main-title span { color: #00ffcc; } /* Color primario */
.subtitle { color: #666; text-transform: uppercase; font-size: 12px; font-weight: 700; margin-top: 10px; }

/* Navegación */
.days-navigation { display: flex; gap: 10px; margin-bottom: 40px; overflow-x: auto; padding-bottom: 10px; }
.day-btn { 
    background: transparent; border: 1px solid #333; color: #888; padding: 10px 20px; 
    cursor: pointer; text-transform: uppercase; font-weight: 800; font-size: 11px; transition: 0.3s;
}
.day-btn.active { background: #fff; color: #000; border-color: #fff; }
.day-btn:hover:not(.active) { border-color: #666; color: #fff; }

/* Paneles */
.day-wrapper { display: none; }
.day-wrapper.active { display: block; animation: fadeIn 0.5s ease forwards; }

/* Fila de programa */
.program-row { 
    display: grid; grid-template-columns: 120px 1fr 100px; gap: 20px; 
    padding: 30px 0; border-bottom: 1px solid #1a1a1a; align-items: center;
}
.program-row.is-live { background: linear-gradient(90deg, #111 0%, transparent 100%); border-left: 4px solid #00ffcc; padding-left: 20px; }

.time-col { display: flex; flex-direction: column; font-weight: 900; font-size: 18px; color: #444; }
.is-live .time-col { color: #00ffcc; }
.t-end { font-size: 12px; opacity: 0.5; }

.info-col h2 { font-size: 28px; font-weight: 900; text-transform: uppercase; margin: 0 0 10px 0; letter-spacing: -1px; }
.live-pulse { background: #00ffcc; color: #000; font-size: 9px; font-weight: 900; padding: 2px 6px; border-radius: 2px; display: inline-block; margin-bottom: 10px; }

.tags-row { display: flex; gap: 8px; }
.tags-row span { color: #666; font-size: 10px; font-weight: 700; text-transform: uppercase; }

.img-col img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; filter: grayscale(100%); transition: 0.5s; }
.program-row:hover .img-col img { filter: grayscale(0%); transform: scale(1.1); }

.empty-day { padding: 50px; text-align: center; color: #333; font-weight: 900; text-transform: uppercase; border: 2px dashed #1a1a1a; }

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

@media (max-width: 768px) {
    .program-row { grid-template-columns: 80px 1fr; }
    .img-col { display: none; }
    .main-title { font-size: 40px; }
    .spk-timetable-page { padding-top: 100px; } /* Ajuste para móvil */
}