/**
 * Próximas Salidas Transporte - CSS Estilo FIDS v1.5
 * Dark theme, gold accents, table-like layout, auto-scroll support
 */

/* --- Variables de Color (Sin cambios) --- */
:root {
    --pst-bg-dark: #0d0d0d;
    --pst-bg-row: #1c1c1c;
    --pst-bg-header: #2a2a2a;
    --pst-text-primary: #e0e0e0;
    --pst-text-secondary: #999;
    --pst-text-header: #c5a578;
    --pst-accent-gold: #c5a578;
    --pst-accent-gold-darker: #a98c64;
    --pst-highlight-glow: rgba(218, 165, 32, 0.5);
    --pst-border-color: #333;
    --pst-departed-text: #666;
    --pst-boarding-text: #e67e22;
    --pst-imminent-text: #f1c40f;
    --pst-scheduled-text: #2ecc71;
    --pst-error-color: #e74c3c;
}

/* --- Estilos Base y Contenedor Principal (Sin cambios) --- */
.proximas-salidas-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--pst-bg-dark);
    color: var(--pst-text-primary);
    padding: 25px 15px;
    margin: 25px 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--pst-border-color);
    position: relative; /* Para posicionar elementos internos si es necesario */
}

/* Estilos del Logo (Ajustados/Revisados) */
/* Si quieres el logo fijo en esquina superior izquierda */
div.proximas-salidas-container img.pst-logo {
    position: fixed; /* O absolute si prefieres dentro del contenedor */
    top: 15px;
    left: 15px;
    z-index: 1001; /* Encima de casi todo */
    height: 60px !important; /* Tamaño más discreto */
    width: 60px !important;
    max-height: 60px !important;
    max-width: 60px !important;
    min-height: 60px;
    min-width: 60px;
    border-radius: 50% !important;
    border: 2px solid var(--pst-accent-gold-darker);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    object-fit: cover;
    background-color: #ffffff;
    display: block;
}
/* Si quieres el logo normal dentro del flujo, comenta/elimina lo anterior */


.pst-main-title {
    text-align: center;
    font-size: 1.8em;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--pst-accent-gold);
    margin: 0 auto 15px auto; /* Reducido margen inferior */
    padding-bottom: 15px;
    border-bottom: 1px solid var(--pst-accent-gold-darker);
    max-width: 90%;
}

/* --- *** NUEVO: Barra superior para Fecha y Botón *** --- */
.pst-top-info-bar {
    display: flex;
    justify-content: space-between; /* Espacio entre fecha y botón */
    align-items: center;
    padding: 0 10px 15px 10px; /* Padding inferior */
    margin-bottom: 15px;
    border-bottom: 1px solid var(--pst-border-color);
}

.pst-current-date {
    font-size: 1em;
    color: var(--pst-text-secondary);
    font-weight: 500;
}

.pst-fullscreen-button {
    background: none;
    border: 1px solid var(--pst-text-secondary);
    color: var(--pst-text-secondary);
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1em; /* Tamaño del icono */
    line-height: 1; /* Alinear icono */
}
.pst-fullscreen-button:hover {
    color: var(--pst-accent-gold);
    border-color: var(--pst-accent-gold);
}
/* --- *** FIN NUEVOS ESTILOS BARRA SUPERIOR *** --- */


/* --- Selector de Hotel (Ajustado margen) --- */
.pst-hotel-selector-container {
    margin-bottom: 20px; /* Reducido */
    display: flex;
    flex-wrap: wrap;
    gap: 10px 15px;
    align-items: center;
    justify-content: center;
    padding: 10px; /* Reducido */
    background-color: rgba(0,0,0,0.1);
    border-radius: 5px;
}

.pst-hotel-selector-container label {
    font-weight: 500;
    color: var(--pst-text-secondary);
    margin-bottom: 0;
}

#pst-hotel-select {
    padding: 10px 12px;
    border: 1px solid var(--pst-border-color);
    border-radius: 4px;
    background-color: #222;
    color: var(--pst-text-primary);
    min-width: 220px;
    flex-grow: 1;
    max-width: 450px;
    font-size: 0.95em;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#pst-hotel-select:focus {
    outline: none;
    border-color: var(--pst-accent-gold);
    box-shadow: 0 0 0 2px rgba(197, 165, 120, 0.2);
}

/* --- Contenedor de Resultados (Simulación Tabla) --- */
.pst-resultados-container {
    margin-top: 0; /* Eliminado margen superior, ya lo da el selector */
    overflow: hidden; /* Ocultar overflow horizontal del contenedor general */
}

/* --- Encabezado de la Tabla Falsa --- */
.pst-table-header {
    display: flex;
    padding: 10px 5px;
    background-color: var(--pst-bg-header);
    border-bottom: 2px solid var(--pst-accent-gold-darker);
    border-radius: 5px 5px 0 0;
    color: var(--pst-text-header);
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* No sticky header si queremos scroll automático completo */
    /* position: sticky; top: 0; z-index: 10; */
}

/* --- Cuerpo de la Tabla Falsa (Contenedor de Filas y SCROLL) --- */
.pst-table-body {
    border: 1px solid var(--pst-border-color);
    border-top: none;
    border-radius: 0 0 5px 5px;
    background-color: var(--pst-bg-row);
    /* *** ALTURA MÁXIMA Y SCROLL VERTICAL *** */
    max-height: 65vh; /* Ajusta este valor según la altura del TV y otros elementos */
                      /* vh = viewport height percentage */
    overflow-y: auto; /* Scroll vertical si el contenido excede max-height */
    overflow-x: hidden; /* Ocultar scroll horizontal */
    /* Para scroll suave con JS animate() */
    scroll-behavior: smooth;
     /* Ocultar barra de scroll estándar (opcional, puede afectar usabilidad con ratón)*/
    /* -ms-overflow-style: none; /* IE y Edge */
    /* scrollbar-width: none; /* Firefox */
}
/* Ocultar barra de scroll para Webkit (Chrome, Safari) */
/* .pst-table-body::-webkit-scrollbar {
    display: none;
} */


/* --- Fila Individual (.pst-row) (Sin cambios) --- */
.pst-row {
    display: flex;
    align-items: center;
    padding: 12px 5px;
    border-bottom: 1px solid var(--pst-border-color);
    background-color: var(--pst-bg-row);
    color: var(--pst-text-primary);
    transition: background-color 0.4s ease, opacity 0.4s ease;
    min-height: 50px;
}
.pst-table-body .pst-row:last-child {
    border-bottom: none;
}
.pst-row:hover {
    background-color: #282828;
}

/* --- Columnas Individuales (.pst-col) y Anchos (Sin cambios) --- */
.pst-col {
    padding: 0 8px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95em;
}
.pst-col-icon { flex: 0 0 40px; text-align: center; color: var(--pst-accent-gold); font-size: 1.3em; }
.pst-col-destino { flex: 1 1 30%; font-weight: 600; white-space: normal; }
.pst-col-habitacion { flex: 0 1 15%; min-width: 80px; text-align: center; }
.pst-col-cupos { flex: 0 1 10%; min-width: 60px; text-align: center; }
.pst-col-hora { flex: 0 0 70px; font-weight: 600; text-align: center; font-family: 'Courier New', Courier, monospace; font-size: 1.1em; }
.pst-col-status { flex: 0 1 20%; min-width: 130px; text-align: right; font-weight: 700; padding-right: 15px; }


/* --- Estilos del Span de Estado (tiempo-restante) (Sin cambios) --- */
.tiempo-restante { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.5px; transition: background-color 0.3s, color 0.3s; }
.scheduled-status { color: var(--pst-scheduled-text); }
.imminent-status { color: var(--pst-imminent-text); animation: blink-warning 1.5s infinite ease-in-out; }
.boarding-status { color: var(--pst-boarding-text); animation: blink-warning 1s infinite ease-in-out; }
.departed-status { color: var(--pst-departed-text); }
@keyframes blink-warning { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* --- Estilos de Estados de Fila (Highlight, Departed) (Sin cambios) --- */
.pst-row.highlight-soon { background-color: #302a1f; border-left: 3px solid var(--pst-accent-gold); }
.pst-row.departed { opacity: 0.6; background-color: #111; }
.pst-row.departed:hover { background-color: #151515; }
.pst-row.departed .pst-col { color: var(--pst-departed-text) !important; }
.pst-row.departed .pst-col-icon { color: var(--pst-departed-text) !important; opacity: 0.7; }

/* --- Mensajes Informativos y de Error (Sin cambios) --- */
p.pst-info, p.no-salidas, p.pst-error { background-color: rgba(44, 44, 44, 0.7); padding: 15px 20px; border: 1px solid var(--pst-border-color); border-left-width: 5px; border-radius: 5px; text-align: center; margin: 20px auto; max-width: 90%; font-size: 0.95em; }
p.pst-info, p.no-salidas { color: var(--pst-text-secondary); border-left-color: var(--pst-accent-gold); }
p.pst-error { color: var(--pst-error-color); border-left-color: var(--pst-error-color); font-weight: 500; }
#pst-mensajes-dinamicos p { margin-top: 15px; }

/* --- Animación para Nuevas Filas (Sin cambios) --- */
@keyframes fadeInRow { from { opacity: 0; background-color: #3a3325; transform: translateY(-10px); } to { opacity: 1; background-color: var(--pst-bg-row); transform: translateY(0); } }
@keyframes highlightNewRow { 0% { background-color: var(--pst-bg-row); } 50% { background-color: #3a3325; } 100% { background-color: var(--pst-bg-row); } }
.pst-row.new-item-animation { animation: highlightNewRow 1.5s ease-out; }

/* --- Responsividad (Ajustar altura máxima en móviles si es necesario) --- */
@media (max-width: 768px) {
    .pst-main-title { font-size: 1.5em; letter-spacing: 1px; margin-bottom: 10px; }
    .pst-top-info-bar { flex-direction: column; gap: 10px; align-items: center; text-align: center; border-bottom: none; margin-bottom: 10px; }
    .pst-fullscreen-button { margin-top: 5px; }
    .pst-hotel-selector-container { flex-direction: column; align-items: stretch; }
    #pst-hotel-select { max-width: none; }

    .pst-table-header { display: none; }
    .pst-table-body {
        border: none;
        background-color: transparent;
        max-height: none; /* Quitar altura máxima fija en móvil */
        overflow-y: visible; /* Quitar scroll interno en móvil */
    }
    .pst-row { flex-direction: column; align-items: stretch; border: 1px solid var(--pst-border-color); border-radius: 6px; margin-bottom: 15px; padding: 12px; background-color: var(--pst-bg-row); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
    .pst-row:last-child { margin-bottom: 0; }
    .pst-col { flex-basis: auto !important; width: 100% !important; min-width: 0 !important; padding: 5px 0; text-align: left; white-space: normal; border-bottom: 1px dashed #333; display: flex; justify-content: space-between; align-items: center; }
    .pst-row .pst-col:last-child { border-bottom: none; }
    .pst-col::before { content: attr(data-label); font-weight: 600; color: var(--pst-text-secondary); margin-right: 10px; display: inline-block; min-width: 80px; }
    .pst-col-icon { display: none; }
    /* Labels para móvil */
    .pst-col-destino::before { content: 'Destino:'; }
    .pst-col-habitacion::before { content: 'Habitación:'; }
    .pst-col-cupos::before { content: 'Cupos:'; }
    .pst-col-hora::before { content: 'Hora:'; }
    .pst-col-status::before { content: 'Estado:'; }
    .pst-col-hora { font-family: inherit; font-size: 1em; }
    .pst-col-status { padding-right: 0; }
    .tiempo-restante { font-size: 0.95em; }
}

@media (max-width: 480px) {
     .pst-main-title { font-size: 1.3em; }
     .proximas-salidas-container { padding: 15px 10px; }
     .pst-row { padding: 10px; }
     .pst-col::before { min-width: 70px; font-size: 0.9em; }
     p.pst-info, p.no-salidas, p.pst-error { max-width: 95%; font-size: 0.9em; }
     .pst-current-date { font-size: 0.9em; }
     .pst-fullscreen-button { font-size: 1em; padding: 4px 6px; }
}