/* Variables CSS (colores, espaciado, etc.) */
:root {
    /* Colores Base - Optimizados para Modo Oscuro */
    --primary-color: #5559eb; /* Azul/Púrpura vibrante para elementos interactivos en modo oscuro */
    --primary-dark-color: #6886dd; /* Tono más oscuro de primary-color para hover/active */
    --secondary-color: #03dac6; /* Cian para elementos secundarios en modo oscuro */
    --secondary-dark-color: #018786; /* Tono más oscuro de secondary-color */
    --success-color: #66bb6a; /* Verde suave para éxito */
    --success-dark-color: #388e3c;
    --danger-color: #ef5350; /* Rojo suave para eliminar/peligro */
    --danger-dark-color: #c62828;
    --warning-color: #ffca28; /* Amarillo para advertencias */
    --warning-dark-color: #ffa000;
    --info-color: #42a5f5; /* Azul claro para información */
    --info-dark-color: #1976d2;

    /* Fondos y Texto para Modo Oscuro */
    --bg-color: #121212; /* Fondo principal de la página: Negro muy oscuro */
    --light-bg-color: #1e1e1e; /* Fondo para tarjetas/formularios/modal: Un poco más claro que el fondo principal */
    --dark-bg-color: #000000; /* Fondo para encabezado/pie de página: Negro puro */

    --text-color: #e0e0e0; /* Color de texto principal: Gris claro */
    --text-color-light: #fff; /* Color de texto muy claro (para fondos oscuros, ej. header/footer) */
    --text-color-secondary: #a0a0a0; /* Color de texto secundario: Gris medio */
    --border-color: #333333; /* Color de borde general: Gris oscuro para sutilidad */

    /* Tablas - Ajustadas para Modo Oscuro */
    --table-border-color: #444444; /* Borde de tabla más oscuro */
    --table-header-bg: #282828; /* Fondo de encabezado de tabla más oscuro */
    --table-row-even-bg: #222222; /* Fondo de filas pares: sutilmente diferente */
    --table-row-hover-bg: #303030; /* Fondo de filas al pasar el ratón: más oscuro */

    /* Espaciado y Dimensiones */
    --spacing-unit: 15px; /* Unidad de espaciado general */
    --border-radius: 8px; /* Radio de borde para elementos redondeados */
    --border-radius-sm: 4px; /* Radio de borde pequeño */
    --border-radius-lg: 12px; /* Radio de borde grande para tarjetas */

    /* Sombras - Ajustadas para Modo Oscuro (más sutiles) */
    --shadow-light: 0 2px 4px rgba(0,0,0,0.2); /* Sombra ligera */
    --shadow-medium: 0 5px 15px rgba(0,0,0,0.3); /* Sombra media */
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.4); /* Sombra grande para header/footer */

    /* Tipografía */
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.5rem; /* Para h2 */
    --font-size-xl: 2rem; /* Para h1 */
}

/* Estilos Generales */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color); /* Fondo principal oscuro */
    color: var(--text-color); /* Texto principal claro */
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    padding: var(--spacing-unit) 0;
}

.container {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0 var(--spacing-unit);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color); /* Usar la variable de texto principal para h1, h2, etc. */
    margin-bottom: var(--spacing-unit);
    margin-top: -10px;
}

a {
    color: var(--info-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-dark-color); /* Usar la variable dark para hover */
    text-decoration: underline;
}

/* Header */
header {
    position: fixed; /* Asegura que el header esté fijo en la parte superior */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--dark-bg-color); /* Fondo más oscuro para el header */
    color: var(--text-color-light); /* Texto claro */
    padding: var(--spacing-unit) 0;
    box-shadow: var(--shadow-lg); /* Sombra más pronunciada */
}

header h1 {
    color: var(--text-color-light); /* H1 en el header siempre blanco */
    text-align: center;
    margin-top: 0;
    margin-bottom: var(--spacing-unit);
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

nav ul li a {
    color: var(--text-color-light);
    padding: 8px 15px;
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease, color 0.3s ease; /* Añadido color a la transición */
}

nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Ligero brillo al pasar el ratón */
    text-decoration: none;
}

/* NUEVO: Estilo para el elemento de navegación activo */
nav ul li.active-nav-item a {
    position: relative; /* Para posicionar el borde inferior */
    color: var(--primary-color); /* Cambiar el color del texto para destacar */
    font-weight: bold; /* Hacer el texto un poco más negrita */
    /* Aseguramos que el hover no afecte el color del texto del item activo */
    background-color: rgba(255, 255, 255, 0.05); /* Un fondo muy sutil para el activo */
}

nav ul li.active-nav-item a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Mantener el hover sutil pero visible */
    color: var(--primary-color); /* Asegurar que el texto activo siga siendo primary-color en hover */
    text-decoration: none;
}


nav ul li.active-nav-item a::after {
    content: '';
    position: absolute;
    left: 50%; /* Centrar el borde */
    transform: translateX(-50%); /* Centrar el borde */
    bottom: -5px; /* Ajusta la distancia del borde inferior */
    width: calc(100% - 10px); /* El ancho del borde (ajustado para que no toque los bordes) */
    height: 3px; /* Grosor del borde */
    background-color: var(--primary-color); /* Color del borde */
    border-radius: 2px;
    animation: slideInBottom 0.3s forwards; /* Animación sutil */
}

@keyframes slideInBottom {
    from { transform: translateX(-50%) translateY(5px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* Media Query para la navegación en móvil (si la tienes ya) */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        gap: 10px;
    }
    nav ul li.active-nav-item a::after {
         width: calc(100% - 30px); /* Ajustar el ancho del borde en móvil */
         left: 15px; /* Alineado a la izquierda */
         transform: translateX(0); /* Eliminar la transformación de centrado */
    }
}

/* Footer */
footer {
    background-color: var(--dark-bg-color); /* Fondo oscuro para el footer */
    color: var(--text-color-light); /* Texto claro */
    text-align: center;
    padding: var(--spacing-unit) 0;
    margin-top: auto;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Sombra sutil hacia arriba */
}

/* Mensajes (Éxito, Error, etc.) */
.message {
    padding: var(--spacing-unit);
    margin-bottom: 20px;
    border-radius: var(--border-radius);
    font-weight: bold;
    text-align: center;
    opacity: 0;
    animation: fadeIn 0.5s forwards;
    /* Los colores de fondo y texto de los mensajes específicos se mantienen claros para contraste */
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.message.warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

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


/* Tarjetas de Formulario y Tabla */
.form-card {
    background-color: var(--light-bg-color); /* Fondo de tarjeta más oscuro */
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium); /* Sombra media para las tarjetas */
    margin-bottom: 25px;
    border: 1px solid var(--border-color); /* Borde sutil para tarjetas */
}

.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-color-secondary); /* Etiquetas en color secundario */
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group textarea,
.form-group select {
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid var(--border-color); /* Borde de input oscuro */
    border-radius: var(--border-radius);
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    background-color: #2a2a2a; /* Fondo de inputs más oscuro */
    color: var(--text-color); /* Texto en inputs claro */
}

.form-group input[type="text"]:focus,
.form-group input[type="url"]:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary-color); /* Borde de foco primary-color */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(187, 134, 252, 0.25); /* Sombra de foco ajustada al primary-color */
}

textarea {
    resize: vertical;
    min-height: 80px;
}

.form-actions {
    display: flex;
    justify-content: flex-start;
    gap: var(--spacing-unit);
    margin-top: 10px;
    flex-wrap: wrap;
}

/* Botones */
.button {
    padding: 8px 10px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-light); /* Sombra sutil para botones */
}

.primary-button {
    background-color: var(--primary-color);
    color: var(--text-color-light);
}

.primary-button:hover {
    background-color: var(--primary-dark-color);
    color: var(--bg-color);
    transform: translateY(-2px);
}

.secondary-button {
    background-color: var(--secondary-color);
    color: var(--text-color-light); /* CAMBIO: Texto blanco o muy claro */
}

.secondary-button:hover {
    background-color: var(--secondary-dark-color);
    color: var(--text-color-light); /* CAMBIO: Aseguramos que el texto sea blanco también en hover */
    transform: translateY(-2px);
}

.edit-btn {
    background-color: var(--info-color);
    color: var(--text-color-light);
    margin-right: 5px;
}

.edit-btn:hover {
    background-color: var(--info-dark-color);
    transform: translateY(-2px);
}

.delete-btn {
    background-color: #262626;
    color: var(--text-color-light);
}

.delete-btn:hover {
    background-color: #262626;
    transform: translateY(-2px);
}

/* Tablas de Datos */
.table-container {
    overflow-x: auto;
    background-color: var(--light-bg-color); /* Fondo de tabla principal oscuro */
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--border-color); /* Borde sutil para el contenedor de tabla */
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px; /* Mantener margen si está fuera del contenedor */
}

.data-table th,
.data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--table-border-color); /* Bordes de tabla más oscuros */
    color: var(--text-color); /* Texto de tabla claro */
    font-size: 0.8rem;
}

.data-table th {
    background-color: var(--table-header-bg);
    color: var(--text-color-secondary); /* Texto de encabezado secundario */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
}

.data-table tbody tr:nth-child(even) {
    background-color: var(--table-row-even-bg); /* Filas pares con un fondo sutilmente diferente */
}

.data-table tbody tr:hover {
    background-color: var(--table-row-hover-bg); /* Hover de fila más oscuro */
}

.data-table img {
    display: block;
    max-width: 100px;
    height: auto;
    border-radius: 5px;
    box-shadow: var(--shadow-light);
}

.data-table .actions-column {
    white-space: nowrap;
}

/* Mensajes de validación de formulario */
.error-message {
    color: var(--danger-color);
    font-size: 0.9em;
    margin-top: 5px;
    display: block;
}

.input-error-border {
    border: 1px solid var(--danger-color) !important;
}

/* --- Estilos para Modales (Ventanas Flotantes) --- */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8); /* Fondo de modal más oscuro para contraste */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--light-bg-color); /* Fondo del contenido del modal oscuro */
    margin: auto;
    padding: 30px;
    border: 1px solid var(--border-color); /* Borde sutil */
    width: 90%;
    max-width: 500px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg); /* Sombra pronunciada para el modal */
    position: relative;
    text-align: center;
    animation: fadeIn 0.3s ease-out;
    color: var(--text-color); /* Texto del modal claro */
}

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

.modal-content h3 {
    color: var(--primary-color); /* Título del modal en primary-color */
    margin-top: 0;
    margin-bottom: 15px;
}

.modal-content p {
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--text-color-secondary); /* Texto del párrafo del modal secundario */
    margin-bottom: 20px;
    margin-top: -10px;
}

/* Botón de cerrar (la 'x') */
.close-button {
    color: var(--text-color-secondary); /* Color secundario para la 'x' */
    font-size: 32px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: var(--danger-color);
    text-decoration: none;
    outline: none;
}

/* Contenedor de botones del modal */
.modal-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-unit);
    margin-top: 25px;
}

/* Estilos para los botones dentro del modal */
.modal-buttons .button {
    flex-grow: 1;
    max-width: 150px;
    margin: 0;
}

/* Estilo para mensajes de advertencia dentro del modal */
.warning-text {
    color: var(--info-color); /* Mensaje de advertencia en danger-color */
    font-weight: bold;
    margin-top: 10px;
}

/* Responsive design */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        gap: 10px;
    }

    .form-actions {
        flex-direction: column;
        gap: 10px;
    }

    .button {
        width: 100%;
        margin-right: 0 !important;
    }

    .modal-buttons {
        flex-direction: column;
    }

    .modal-buttons .button {
        max-width: 100%;
    }
}

/* --- Layout de Tarjetas en Home (NUEVO) --- */
.card-grid {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan a la siguiente línea */
    gap: var(--spacing-unit); /* Espacio entre las tarjetas */
    justify-content: center; /* Centra las tarjetas si hay menos de las que caben en una fila */
    align-items: stretch; /* Asegura que todas las tarjetas tengan la misma altura */
}

.card-grid .form-card {
    flex: 1 1 calc(33.333% - (2 * var(--spacing-unit) / 3)); /* Por defecto, 3 tarjetas por fila */
    min-width: 280px; /* Ancho mínimo para evitar que se hagan demasiado pequeñas */
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
    margin-bottom: 0; /* Elimina el margin-bottom que el form-card podría tener por defecto */
    display: flex; /* Añadir flexbox también al contenido de la tarjeta */
    flex-direction: column;
    justify-content: space-between; /* Empuja el botón al final de la tarjeta */
    align-items: center; /* Centramos */
}

.card-grid .form-card h3 { /* Cuidado aquí: tus tarjetas tienen h3, no h2 */
    margin-top: 0;
}

.card-grid .form-card p {
    flex-grow: 1; /* Permite que el párrafo ocupe el espacio disponible y empuje el botón */
}

/* Media Queries para Responsiveness */
@media (max-width: 992px) {
    .card-grid .form-card {
        flex: 1 1 calc(50% - (var(--spacing-unit) / 2)); /* 2 tarjetas por fila en pantallas medianas */
    }
}

@media (max-width: 600px) {
    .card-grid .form-card {
        flex: 1 1 100%; /* 1 tarjeta por fila en pantallas pequeñas */
    }
}

/* Estilos para el campo de subida de archivo personalizado */
.file-input-wrapper {
    display: flex; /* Para alinear el botón y el texto en la misma línea */
    align-items: center; /* Centrar verticalmente */
    gap: 10px; /* Espacio entre el botón y el nombre del archivo */
    margin-top: 5px; /* Pequeño margen superior */
}

.hidden-file-input {
    display: none; /* Ocultar el input de archivo nativo */
}

.file-name-display {
    flex-grow: 1; /* Permitir que el texto ocupe el espacio restante */
    padding: 8px 10px; /* Un poco de padding para que se vea bien */
    background-color: #2a2a2a; /* Fondo similar a otros inputs */
    border: 1px solid var(--border-color); /* Borde similar a otros inputs */
    border-radius: var(--border-radius);
    color: var(--text-color); /* Color de texto estándar */
    font-size: var(--font-size-base);
    white-space: nowrap; /* Evitar que el texto se rompa en varias líneas */
    overflow: hidden; /* Ocultar el texto que excede el ancho */
    text-overflow: ellipsis; /* Mostrar puntos suspensivos si el texto es muy largo */
}

/* Ajustar el botón de subida para que parezca un botón normal */
#custom_upload_button {
    flex-shrink: 0; /* Evitar que el botón se encoja */
    /* Las clases .button y .primary-button ya le darán el estilo base */
    padding: 10px 15px; /* Ejemplo de padding, ajusta si tus botones son diferentes */
}

/* --- Estilos para el Gráfico de Tarta de Disco --- */
.pie-chart-container {
    display: flex;
    flex-direction: column; /* Cambiado a columna para apilar el gráfico y la leyenda */
    align-items: center; /* Centrar elementos horizontalmente */
    width: 100%;
    margin: 15px 0;
}

.pie-chart {
    margin-left: 150px;
    width: 200px; /* Tamaño del círculo */
    height: 200px; /* Tamaño del círculo */
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Asegura que el contenido interno no se desborde */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Sombra suave */
}

.pie-chart::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; /* Tamaño del agujero central para que parezca un "doughnut" */
    height: 80px;
    border-radius: 50%;
    background-color: #1e1e1e; /* Fondo del agujero */
    z-index: 1;
}

.pie-chart .center-text {
    position: absolute;
    font-weight: bold;
    font-size: 1.1rem;
    color: #ff6384;
    z-index: 2; /* Asegura que el texto esté por encima del agujero */
}

.legend {
    margin-top: -70px;
    font-size: 0.7rem;
    width: 100%; /* Ocupa el ancho completo del contenedor */
    text-align: left; /* Alinear el texto de la leyenda a la izquierda */
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.legend-color-box {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    margin-right: 8px;
    flex-shrink: 0; /* Evita que el cuadro se encoja */
}

.legend-color-box.used {
    background-color: #ff6384; /* Color para "Usado" */
}

.legend-color-box.free {
    background-color: #36a2eb; /* Color para "Libre" */
}

.legend-color-box.total {
    background-color: #cccccc; /* Color para "Total" (opcional, solo para visualización) */
}

/* Botón de play en la tabla */
.play-circle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: inline-flex; /* Para centrar el SVG */
    align-items: center;
    justify-content: center;
    color: #f45a30; /* Color del icono de play (usa tu color principal) */
    transition: transform 0.2s ease, color 0.2s ease;
    border-radius: 50%; /* Para que sea circular, si deseas un efecto de fondo en hover */
    background-color: rgba(255, 255, 255, 0.1); /* Puedes añadir un fondo sutil si lo quieres circular */
}

.play-circle-btn:hover {
    transform: scale(1.1); /* Efecto de escala al pasar el ratón */
    color: #d71d32; /* Cambia el color al pasar el ratón */
    /* background-color: rgba(255, 255, 255, 0.2); /* Fondo sutil al pasar el ratón */
}

.play-circle-btn svg {
    width: 24px; /* Tamaño del SVG */
    height: 24px; /* Tamaño del SVG */
    fill: currentColor; /* Usa el color definido en el padre (.play-circle-btn) */
}

/* Estilos generales para el layout de la página */
.live-channel-container {
    max-width: 1400px; /* Un poco más ancho para acomodar los dos paneles */
    margin: 20px auto;
    padding: 0; /* Sin padding aquí, lo darán los subcontenedores */
    background-color: #1a1a1a;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    display: flex; /* LAYOUT FLEXBOX PRINCIPAL */
    min-height: calc(100vh - 120px); /* Ajuste para que ocupe la mayor parte de la pantalla, dejando espacio para header/footer */
}

/* Estilos para los mensajes de notificación */
.message {
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    position: fixed; /* Cambiado a fixed para flotar por encima de todo */
    top: 120px; /* Debajo del header */
    left: 34%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 420px;
    z-index: 1001; /* Por encima de todo lo demás */
}

.message.success { background-color: #28a745; color: white; }
.message.error { background-color: #dc3545; color: white; }
.message.warning { background-color: #ffc107; color: #343a40; }

/* --- ESTILOS DEL PANEL IZQUIERDO (Lista de Videos) --- */
.video-library-panel {
    flex: 0 0 300px; /* Ancho fijo para el panel izquierdo */
    background-color: #212121;
    border-right: 1px solid #333;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.video-library-panel h2 {
    color: #00bcd4;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
    text-align: center;
}

.video-search-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #333;
    color: #e0e0e0;
    font-size: 0.9em;
    box-sizing: border-box;
}

.video-list {
    flex-grow: 1; /* Permite que la lista ocupe el espacio restante */
    overflow-y: auto; /* Scroll si hay muchos videos */
    padding-right: 5px; /* Espacio para la barra de scroll */
    margin: 0;
    padding: 0;
    list-style: none; /* Quita viñetas si las hubiera */
}

.video-list-item {
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column; /* Apila título y filename */
    gap: 2px;
    cursor: grab; /* Indica que es arrastrable */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.video-list-item:hover {
    background-color: #3a3a3a;
    border-color: #00bcd4;
}

.video-list-item.selected { /* Para resaltar el video seleccionado (para programación manual) */
    background-color: #00bcd4; /* Color principal */
    border-color: #00bcd4;
    color: white;
}

/* --- ESTILOS PARA SORTABLEJS (DRAG & DROP) - REVISADOS Y UNIFICADOS --- */
/*
    Estos estilos son cruciales para la experiencia de arrastre.
    Aseguran que el elemento arrastrado sea visible y tenga un aspecto claro.
*/
.sortable-ghost {
    opacity: 0.0; /* Hace que el elemento original que se arrastra no se vea (es un placeholder) */
    background-color: #4a4a4a; /* Color del placeholder visual */
    border: 1px dashed #00bcd4; /* Borde punteado para el placeholder */
    box-shadow: none; /* Sin sombra para el fantasma */
}

.sortable-chosen {
    /* Este estilo se aplica al elemento que ha sido 'elegido' para ser arrastrado.
       Puede usarse para darle un estilo inicial antes de que comience el arrastre completo,
       pero a menudo `.sortable-drag` lo sobreescribe para el clon. */
    opacity: 1; /* Asegurarse de que el elegido no se oculte antes de arrastrar */
    /* background-color: var(--primary-color); */
    /* color: var(--text-color-light); */
}

.sortable-drag {
    /* Estilos para el CLON del elemento mientras se arrastra. Es el que se mueve con el cursor. */
    opacity: 0.9; /* Ligeramente transparente para indicar que es un clon */
    background-color: var(--primary-color); /* Color de fondo mientras se arrastra */
    color: var(--text-color-light); /* Color de texto mientras se arrastra */
    box-shadow: var(--shadow-medium); /* Sombra para que flote visualmente */
    transform: scale(1.02); /* Ligeramente más grande */
    z-index: 9999; /* Asegura que esté por encima de casi todo */
    cursor: grabbing !important; /* El cursor de arrastre */
    border: 1px solid var(--primary-color); /* Borde sólido */
}

/* Si arrastras y sueltas un elemento de la parrilla en un nuevo lugar en la parrilla */
.schedule-item.sortable-drag {
    background-color: var(--secondary-color); /* Otro color para distinguir si se arrastra dentro de la parrilla */
    color: var(--text-color-light);
    border-color: var(--secondary-color);
}
/* Fin de los estilos de SortableJS */


.video-list-item .video-title {
    font-weight: bold;
    color: #e0e0e0;
    font-size: 0.95em;
}
.video-list-item.selected .video-title {
    color: white;
}

.video-list-item .video-file-name {
    font-size: 0.75em;
    color: #bbbbbb;
}
.video-list-item.selected .video-file-name {
    color: rgba(255, 255, 255, 0.8);
}

/* --- ESTILOS DEL PANEL DERECHO (Parrilla de Programación) --- */
.schedule-panel {
    flex-grow: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.schedule-panel h2 {
    color: #00bcd4;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.8em;
    text-align: center;
}

.schedule-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: -15px;
    padding: 15px;
    background-color: #2a2a2a;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    position:sticky;
    
}

.schedule-date-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 95px;
}
.schedule-date-nav .nav-button {
    background-color: #333;
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
    font-size: 0.9em;
}

.schedule-date-nav .nav-button:hover {
    background-color: #555;
    border-color: #00bcd4;
}

.schedule-date-nav .schedule-date-display {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--text-color);
    white-space: nowrap; /* Evita que la fecha se rompa */
}

/* Formulario de Programación Manual */
.schedule-form-inline {
    display: flex; /* Flexbox para alinear elementos */
    flex-direction: row;
    justify-content: center;
    align-items: center; /* Centrar verticalmente */
    gap: 10px; /* Espacio entre elementos */
    flex-wrap: wrap; /* Permitir que los elementos se envuelvan en pantallas pequeñas */
    background-color: #333; /* Fondo para el formulario */
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); /* Sombra interna */
    width: 80%;
}

.schedule-form-inline label {
    color: var(--text-color-secondary);
    font-weight: bold;
    white-space: nowrap;
}

.schedule-form-inline input[type="datetime-local"] {
    flex-grow: 1; /* Permite que el input ocupe el espacio disponible */
    max-width: 200px; /* Ancho máximo para el input de fecha/hora */
    padding: 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #444;
    color: #e0e0e0;
    font-size: 0.9em;
}

.schedule-form-inline input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Hace que el icono del calendario sea blanco en modo oscuro */
}

.schedule-form-inline .selected-video-info {
    font-weight: bold;
    color: var(--info-color);
    flex-basis: 100%; /* Ocupa toda la línea superior en flex-wrap */
    text-align: center;
    margin-bottom: 5px;
}

.schedule-form-inline button {
    padding: 8px 15px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Evita que el botón se encoja */
}

.schedule-form-inline button:hover {
    background-color: var(--primary-dark-color);
}

/* Tabla de la Parrilla de Programación */
.schedule-table-container {
    flex-grow: 1;
    overflow-y: auto; /* Scroll para la tabla si es muy larga */
    background-color: var(--light-bg-color); /* Fondo de la tabla */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--border-color);
    padding: 1px; /* Pequeño padding para que los bordes internos se vean bien */
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
}

.schedule-table thead th {
    background-color: var(--table-header-bg);
    color: var(--text-color-secondary);
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--table-border-color);
    font-size: 0.9em;
    text-transform: uppercase;
}

.schedule-table tbody {
    /* Aquí se aplica la lógica del placeholder de tabla vacía para SortableJS */
    min-height: 100px; /* Altura mínima para que la zona de drop sea visible cuando está vacía */
    display: table-row-group; /* Esencial para que SortableJS funcione en tbody */
}

.schedule-table .schedule-item {
    background-color: #262626;
    border-bottom: 1px solid var(--table-border-color);
    transition: background-color 0.2s ease;
    cursor: grab; /* Cursor para indicar que las filas son arrastrables */
}

.schedule-table .schedule-item:hover {
    background-color: var(--table-row-hover-bg);
}

.schedule-table .schedule-item td {
    padding: 12px 15px;
    color: var(--text-color);
    font-size: 0.9em;
    vertical-align: middle;
}

.schedule-table .schedule-item td.action-buttons {
    white-space: nowrap;
    text-align: right;
}

.schedule-table .schedule-item .video-title {
    font-weight: bold;
    color: var(--text-color-light);
}

.schedule-table .schedule-item .video-file-name {
    font-size: 0.75em;
    color: var(--text-color-secondary);
}

/* Estilo para el placeholder cuando la parrilla está vacía */
.schedule-table tbody.empty-placeholder-active .empty-placeholder-row {
    display: table-row; /* Hacer visible la fila placeholder */
}

.schedule-table tbody.empty-placeholder-active tr:not(.empty-placeholder-row) {
    display: none; /* Ocultar otras filas si están presentes y el placeholder está activo */
}

.empty-placeholder-row {
    display: none; /* Por defecto, oculto */
}
.empty-placeholder-row td {
    padding: 50px !important;
    text-align: center;
    color: #888 !important;
    font-style: italic;
}


/* Responsive para la parrilla de programación */
@media (max-width: 768px) {
    .live-channel-container {
        flex-direction: column; /* Apilar los paneles en móviles */
        min-height: unset; /* Eliminar altura mínima en móvil */
    }

    .video-library-panel {
        flex: 1 1 auto; /* Ocupar el ancho completo */
        border-right: none;
        border-bottom: 1px solid #333; /* Separador en la parte inferior */
    }

    .schedule-controls {
        flex-direction: column; /* Apilar controles */
        align-items: stretch; /* Estirar para ocupar el ancho completo */
    }

    .schedule-date-nav {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .schedule-date-nav .nav-button {
        width: 100%;
        text-align: center;
    }

    .schedule-table {
        /* Para tablas en pantallas pequeñas, usar display:block o grid/flex */
        display: block;
        width: 100%;
    }

    .schedule-table thead {
        display: none; /* Ocultar el encabezado de la tabla en móvil */
    }

    .schedule-table tbody, .schedule-table tr, .schedule-table td {
        display: block; /* Cada tr y td se comportará como un bloque */
        width: 100%;
    }

    .schedule-table tr {
        margin-bottom: 15px;
        background-color: #262626;
        border: 1px solid var(--table-border-color);
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .schedule-table td {
        text-align: right;
        padding-left: 50%; /* Espacio para la etiqueta */
        position: relative;
    }

    .schedule-table td::before {
        content: attr(data-label); /* Usa el atributo data-label como etiqueta */
        position: absolute;
        left: 15px;
        width: calc(50% - 30px);
        white-space: nowrap;
        font-weight: bold;
        color: var(--text-color-secondary);
        text-align: left;
    }

    .schedule-table td.action-buttons {
        text-align: left; /* Alinea los botones de acción a la izquierda */
        display: flex;
        justify-content: flex-start;
        gap: 8px;
        padding-left: 15px; /* Quita el padding si no hay etiqueta */
    }

    .schedule-table td.action-buttons::before {
        display: none; /* Oculta la etiqueta para los botones de acción */
    }
}