:root {
    --font-principal: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --border-radius: 12px;
    --shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
    --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    --color-primario: #4338ca;
    --color-primario-hover: #3730a3;
    --color-secundario: #059669;
    --color-secundario-hover: #047857;
    --color-peligro: #e11d48;
    --color-fondo-claro: #ffffff;
    --color-fondo-oscuro-suave: #e2e8f0;
    --color-texto-oscuro: #1e293b;
    --color-texto-claro: #64748b;
    --color-borde: #cbd5e1;
    --color-foco-sombra: rgba(67, 56, 202, 0.2);
    --color-texto-en-primario: #ffffff;
}

.location-banner {
    background-color: var(--color-primario);
    color: var(--color-texto-en-primario);
    padding: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    position: sticky;
    top: 0;
    z-index: 3001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    transform: translateY(0);
    opacity: 1;
    height: auto;
    overflow: hidden;
}

.location-banner.hidden {
    transform: translateY(-100%);
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: 0;
}

.location-banner .station-gps-counter {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--color-texto-en-primario);
    background-color: rgba(0,0,0,0.15);
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: 8px;
}

.location-banner .station-gps-counter svg {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-principal);
    background-color: var(--color-fondo-claro);
    color: var(--color-texto-oscuro);
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.6;
    padding-bottom: 85px;
    transition: background-color 0.3s ease;
}

.offline-aviso {
    background-color: #facc15;
    color: #422006;
    text-align: center;
    padding: 10px;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 3000;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.offline-aviso.hidden { display: none; }

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem;
    overflow-x: hidden;
}

@media (min-width: 640px) {
    .container {
        max-width: 720px;
        margin: 1.5rem auto;
        border-radius: 1.5rem;
        box-shadow: var(--shadow-md);
        padding: 2rem;
        background-color: var(--color-fondo-claro);
    }
}

h1 {
    text-align: center;
    color: var(--color-primario);
    font-weight: 800;
    font-size: 2rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.75rem;
    letter-spacing: -1px;
    transition: color 0.3s ease;
}

h1::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--color-primario);
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

.header-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.header-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-texto-claro);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-btn svg {
    width: 28px;
    height: 28px;
    transition: all 0.2s ease;
}

.header-btn:disabled {
    color: #d1d5db;
    cursor: not-allowed;
}

.header-btn:not(:disabled):hover svg {
    color: var(--color-primario);
}

.header-btn.activo svg {
    color: var(--color-primario);
    stroke-width: 2.5;
    transform: scale(1.1);
}

#favoritosBtn:not(:disabled) svg {
    color: var(--color-peligro);
    fill: rgba(225, 29, 72, 0.1);
}

#favoritosBtn:not(:disabled):hover svg {
    color: var(--color-peligro);
    transform: scale(1.1);
}

.badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #9ca3af;
    color: white;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-fondo-claro);
    transform: translate(40%, -40%);
}

.badge.novedad {
    background-color: var(--color-peligro);
}

.grupo-botones { display: flex; justify-content: center; padding: 4px; border-radius: var(--border-radius); overflow: hidden; background-color: var(--color-fondo-oscuro-suave); }
.grupo-botones button { flex: 1; border: none; border-radius: 10px; background-color: transparent; color: var(--color-texto-claro); padding: 0.75rem 0.5rem; font-size: 0.9rem; font-weight: 600; transition: all 0.2s ease; cursor: pointer; }
.grupo-botones button.activo { background-color: #fff; color: var(--color-primario); box-shadow: var(--shadow-sm); }
.grupo-botones button:disabled { background-color: var(--color-fondo-oscuro-suave) !important; color: var(--color-texto-claro) !important; cursor: not-allowed; opacity: 0.7; }

.seccion-titulo {
    color: var(--color-primario);
    font-weight: 700;
    text-align: center;
    font-size: 1.1rem;
    margin: 0 0 1rem 0;
    transition: color 0.3s ease;
}

#vista-monitor .selector-container .seccion-titulo {
    display: block;
    margin-bottom: 1rem;
}

.selector-grupo-principal {
    background-color: #fff;
    border: 1px solid var(--color-borde);
    border-radius: var(--border-radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

select { 
    width: 100%; 
    padding: 0.8rem 1rem; 
    border-radius: var(--border-radius); 
    border: 1px solid var(--color-borde); 
    font-size: 1rem; 
    font-weight: 500;
    cursor: pointer; 
    background-color: #ffffff; 
    color: var(--color-texto-oscuro); 
    transition: all 0.2s ease; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.7rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

select:hover { border-color: var(--color-primario); }
select:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px var(--color-foco-sombra); }

.selector-grupo-viaje {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.selector-fila { display: flex; align-items: center; gap: 0.75rem; }
.selector-wrapper { flex-grow: 1; }

#swapBtn, #addFavoriteBtn {
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    color: var(--color-texto-claro);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#swapBtn:hover:not(:disabled) { color: var(--color-primario); transform: rotate(180deg); border-color: var(--color-primario); }
#addFavoriteBtn:hover:not(:disabled) { color: var(--color-peligro); border-color: var(--color-peligro); }
#swapBtn:disabled, #addFavoriteBtn:disabled { cursor: not-allowed; opacity: 0.6; }

@keyframes heartBeat { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
#addFavoriteBtn.favorito-guardado { animation: heartBeat 0.5s ease-in-out; color: var(--color-peligro); }

.ramal-titulo {
    color: var(--color-primario);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: left;
    margin: 0.5rem 0 0.5rem 0.25rem;
    padding: 0;
    transition: color 0.3s ease;
}

#historial-viajes-lista .historial-item { 
    background-color: var(--color-fondo-claro); 
    border: 1px solid var(--color-borde); 
    border-radius: var(--border-radius); 
    padding: 0.75rem 1rem; 
    font-size: 0.9em; 
    transition: all 0.2s ease; 
    box-shadow: var(--shadow-sm); 
    cursor: pointer; 
    margin-bottom: 0.75rem; 
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#historial-viajes-lista .historial-item:last-child { margin-bottom: 0; }
#historial-viajes-lista .historial-item:hover { border-color: var(--color-primario); color: var(--color-primario); }
#historial-viajes-lista .preposicion { font-size: 0.8em; color: var(--color-texto-claro); margin: 0 4px; }
#historial-viajes-lista .delete-historial { background: none; border: none; font-size: 1.4em; font-weight: 700; color: var(--color-texto-claro); padding: 0 0.5rem; border-radius: 50%; transition: all 0.2s ease; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
#historial-viajes-lista .delete-historial:hover { background-color: #fee2e2; color: var(--color-peligro); }

.filtro-grupo {
    background-color: #f9fafb;
    border: 1px solid var(--color-borde);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-top: 1.5rem;
}

.filtro-grupo .dias-semana { margin-bottom: 1.5rem; }
.filtro-grupo .filtro-horario-container { margin: 0; }

.filtro-horario-container { margin: 0; }
.filtro-horario-controles { display: flex; gap: 1rem; width: 100%; justify-content: center; }
.filtro-horario-selector { display: flex; align-items: center; gap: 0.5rem; flex: 1; }
.filtro-horario-selector label { font-weight: 500; }
.filtro-horario-selector select { text-align: center; padding: 0.5rem; font-weight: 600; background-image: none; padding-right: 0.5rem; }

.grupo-botones-accion { display: flex; gap: 1rem; margin-top: 1.5rem; }
.grupo-botones-accion button { width: 100%; padding: 1rem; border-radius: var(--border-radius); font-size: 1rem; cursor: pointer; color: white; font-weight: 700; border: none; transition: all 0.2s ease; box-shadow: var(--shadow-sm); transform: translateY(0); }
.grupo-botones-accion button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.grupo-botones-accion button#verHorariosBtn { background-color: var(--color-primario); }
.grupo-botones-accion button#verProximoTrenBtn { background-color: var(--color-secundario); }
.grupo-botones-accion button:disabled { 
    background-color: #d1d5db !important; 
    color: #6b7280 !important; 
    cursor: not-allowed; 
    box-shadow: none; 
    transform: none; 
}

.ver-mas-btn {
    display: none;
    width: 100%;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: var(--border-radius);
    font-size: 1rem;
    cursor: pointer;
    background-color: var(--color-secundario);
    color: var(--color-texto-en-primario);
    font-weight: 700;
    border: none;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.ver-mas-btn:hover:not(:disabled) {
    background-color: var(--color-secundario-hover);
    box-shadow: var(--shadow-md);
}

.ver-mas-btn:disabled {
    background-color: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
}

#titulo-resultados h2, .titulo-servicio-dia { text-align: center; color: var(--color-texto-oscuro); font-size: 1.5rem; margin: 2.5rem 0 1.5rem 0; font-weight: 700; }
#titulo-resultados h2 strong { color: var(--color-primario); }
.titulo-servicio-dia { font-size: 1.1rem; padding: 0.75rem; background-color: var(--color-fondo-oscuro-suave); border-top: 1px solid var(--color-borde); border-bottom: 1px solid var(--color-borde); }

#lista-trenes-container .titulo-servicio-dia {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primario);
    background-color: #fff;
    border-bottom: 2px solid var(--color-primario);
    border-top: none;
    padding-bottom: 0.5rem;
}

#lista-trenes-container .titulo-servicio-dia:first-child {
    margin-top: 0;
}


.tren-card { background: #ffffff; border: 1px solid var(--color-borde); border-radius: var(--border-radius); padding: 1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: all 0.3s ease; }
.tren-card-header { text-align: center; font-size: 0.9em; padding-bottom: 0.75rem; color: var(--color-texto-claro); font-weight: 500; }
.tren-card-header strong { color: var(--color-texto-oscuro); }
.tren-card-body { display: flex; justify-content: center; align-items: center; gap: 1rem; background-color: var(--color-fondo-claro); border-radius: var(--border-radius); padding: 1rem; margin: 0; }
.timeline { flex-grow: 0; width: auto; }
.timeline-icon { font-size: 1.5rem; color: var(--color-primario); font-weight: bold; }
.trip-point { flex: 1; min-width: 90px; }
.trip-point.departure { text-align: left; }
.trip-point.arrival { text-align: right; }
.trip-time { font-size: 1.5rem; font-weight: 700; color: var(--color-texto-oscuro); }
.trip-station { font-size: 0.9rem; color: var(--color-texto-claro); font-weight: 500; }
.tren-card-footer { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-borde); }
.footer-details { display: flex; justify-content: space-between; width: 100%; font-size: 0.8rem; color: var(--color-texto-claro); }

.tren-card.tren-opacado { background-color: #f9fafb; opacity: 0.8; }
.tren-card.tren-pasado { background-color: #f3f4f6; opacity: 0.6; filter: grayscale(50%); }
.tren-card.tren-cancelado { opacity: 0.6; filter: grayscale(1); background-color: #f3f4f6; }

.tren-card.proximo-tren-highlight { 
    border-width: 2px; 
    border-color: var(--color-secundario); 
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.2), var(--shadow-md); 
    transform: scale(1.02); 
    background-color: #fff; 
}

.aviso-cancelacion { font-weight: 600; text-align: center; font-size: 0.9em; width: 100%; }
.aviso-cancelacion span { display: inline-block; padding: 4px 8px; border-radius: 6px; }
.aviso-cancelacion .aviso-info { font-weight: 500; color: var(--color-texto-claro); background-color: var(--color-fondo-oscuro-suave); }
.tren-card.tren-cancelado .aviso-cancelacion span { color: var(--color-peligro); }

.countdown { color: var(--color-texto-claro); font-weight: 500; margin: 1rem 0 0.5rem 0; padding: 1rem 0 0.5rem 0; border-top: 2px dashed var(--color-borde); font-size: 1.1em; text-align: center; line-height: 1.5; }
.tren-card.proximo-tren-highlight .countdown { border-top-color: var(--color-secundario); }
.tren-card.tren-pasado .countdown { border-top-style: solid; }
.countdown .estacion-azul { color: var(--color-primario); font-weight: 700; }
.countdown .tiempo-verde { color: var(--color-secundario); font-weight: 700; font-size: 1.5rem; }
.countdown .tiempo-rojo { color: var(--color-peligro); font-weight: 700; font-size: 1.3rem; }
.countdown-info { font-size: 0.9em; }

.fin-servicio-mensaje { text-align: center; padding: 1.5rem; font-weight: 600; color: var(--color-texto-claro); background-color: #f9fafb; border-radius: var(--border-radius); margin-top: 1.5rem; }
.loading-mensaje { text-align: center; padding: 2.5rem; font-weight: 600; font-size: 1.1rem; color: var(--color-texto-claro); background-color: #f9fafb; border-radius: var(--border-radius); margin-top: 1.5rem; }
.disclaimer { text-align: center; font-size: 0.8em; color: #9ca3af; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-borde); }
.disclaimer a { color: var(--color-primario); text-decoration: none; font-weight: 600;}
.disclaimer a:hover { text-decoration: underline; }

.ad-banner-container {
    position: fixed;
    bottom: 5px;
    left: 0;
    width: 100%;
    z-index: 1001;
    background-color: #f0f0f0;
    text-align: center;
}

.scroll-buttons-container { 
    position: fixed; 
    bottom: 25px; 
    right: 25px; 
    z-index: 1002;
    display: none; 
    flex-direction: column; 
    gap: 10px;
    transform: translateY(-50px);
    transition: transform 0.3s ease;
}
.scroll-buttons-container.con-banner { transform: translateY(-60px); }

.scroll-buttons-container button { width: 50px; height: 50px; border-radius: 50%; border: none; background-color: var(--color-texto-oscuro); color: white; font-size: 1.5em; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: all 0.2s ease; }
.scroll-buttons-container button:hover { background-color: var(--color-texto-oscuro); transform: scale(1.1) translateY(-2px); }

.aviso-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 1; transition: opacity 0.3s ease; }
.aviso-overlay.hidden { opacity: 0; pointer-events: none; }
.aviso-modal { background-color: #fff; padding: 1.5rem; border-radius: var(--border-radius); box-shadow: var(--shadow-md); width: 90%; max-width: 500px; transform: scale(1); transition: transform 0.3s ease; }
.aviso-overlay.hidden .aviso-modal { transform: scale(0.9); }
.aviso-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-borde); padding-bottom: 0.75rem; margin-bottom: 1rem; }
.aviso-titulo { font-size: 1.25rem; font-weight: 700; color: var(--color-primario); }
.aviso-cerrar-btn { background: none; border: none; font-size: 2rem; font-weight: 300; color: var(--color-texto-claro); cursor: pointer; line-height: 1; padding: 0; }
.aviso-body {
    padding: 0;
}
.aviso-body p { margin: 0 0 1rem 0; line-height: 1.6; }
.aviso-body p:last-child { margin-bottom: 0; }

#anuncios-modal-body {
    padding: 1rem 0 0 0;
}

#favoritos-modal-body #historial-viajes-lista {
    max-height: 40vh;
    overflow-y: auto;
}
.aviso-modal button:not(.aviso-cerrar-btn) { width: 100%; padding: 1rem; margin-top: 1.5rem; border-radius: var(--border-radius); font-size: 1rem; cursor: pointer; background-color: var(--color-primario); color: var(--color-texto-en-primario); font-weight: bold; border: none; transition: background-color 0.2s ease;}
.aviso-modal button:not(.aviso-cerrar-btn):hover { background-color: var(--color-primario-hover); }

.tren-card-transbordo {
    background: #ffffff;
    border: 1px solid var(--color-borde);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.tren-card-transbordo .tren-card-header { padding: 1rem 1.25rem 0.75rem; }
.tren-card-transbordo .tren-card-body { padding: 1rem; margin: 0 1.25rem; }
.tren-card-transbordo .tren-card-footer { padding: 0.75rem 1.25rem 1rem; margin-top: 0; }
.tren-card-transbordo .tren-card-footer:last-of-type { padding-bottom: 1.25rem; }

.transbordo-conexion {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    gap: 1rem;
}
.transbordo-conexion .conexion-linea {
    flex-grow: 1;
    height: 2px;
    background-color: var(--color-borde);
    border-radius: 1px;
}
.transbordo-conexion .conexion-info {
    flex-shrink: 0;
    text-align: center;
    font-size: 0.9em;
    color: var(--color-primario);
    font-weight: 500;
    line-height: 1.5;
    padding: 0.5rem 1rem;
    background-color: var(--color-fondo-oscuro-suave);
    border-radius: var(--border-radius);
}
.transbordo-conexion .conexion-info strong {
    font-weight: 700;
    color: var(--color-primario);
}

.tren-card-transbordo.proximo-tren-highlight {
    border-width: 2px; 
    border-color: var(--color-secundario); 
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.2), var(--shadow-md); 
}

.tren-card-transbordo .tren-numero-footer.hidden {
    display: none;
}