/* AvanzaInfo Component Styles */

/* Anular márgenes de SP Page Builder cuando se muestra el componente */
#sp-main-body:has(.avanzainfo-lineas, .avanzainfo-linea, .avanzainfo-parada) {
    margin: 0;
    padding: 0;
}

/* Establecer márgenes para cada view */
.avanzainfo-lineas, .avanzainfo-linea, .avanzainfo-parada { margin: 0 0 30px 0; }

.avanzainfo-lineas-layout, .avanzainfo-linea-layout, .avanzainfo-parada-layout {
    display: flex; gap: 0; margin-top: 1rem;
}
.avanzainfo-lineas-list {
    flex: 0 0 400px; height: var(--avanzainfo-map-height, 600px); display: flex; flex-direction: column;
    border: 1px solid #ddd; border-right: none;
}
.avanzainfo-linea-info, .avanzainfo-parada-info {
    flex: 0 0 400px; max-height: var(--avanzainfo-map-height, 600px); overflow-y: auto;
}
.avanzainfo-lineas-map, .avanzainfo-linea-map, .avanzainfo-parada-map { flex: 1; min-width: 0; }
.avanzainfo-map {
    width: 100%; height: var(--avanzainfo-map-height, 600px); border: 1px solid #ddd;
}

.avanzainfo-lineas-header {
    display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0.5rem;
    border-bottom: 1px solid #eee; flex-shrink: 0;
}
.avanzainfo-lineas-header h2 { margin: 0; font-size: 1.3rem; }
.avanzainfo-select-all-label {
    display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: #555; cursor: pointer; white-space: nowrap;
}
.avanzainfo-select-all-label input { cursor: pointer; }

.avanzainfo-lines-container { overflow-y: auto; flex: 1; min-height: 0; }
.avanzainfo-line-item { border-bottom: 1px solid #eee; }
.avanzainfo-line-item:last-child { border-bottom: none; }
.avanzainfo-line-row { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.6rem 0.5rem; }
.avanzainfo-line-row:hover { background: #f8f8f8; }

.avanzainfo-line-toggle-label {
    display: flex; align-items: center; gap: 0.4rem; cursor: pointer; flex-shrink: 0; padding-top: 0.1rem;
}
.avanzainfo-line-toggle { cursor: pointer; width: 1.1rem; height: 1.1rem; }
.avanzainfo-line-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem;
    padding: 0.2rem 0.5rem; border-radius: 4px; color: #fff; font-weight: 700; font-size: 0.85rem; white-space: nowrap;
}

.avanzainfo-line-info { flex: 1; min-width: 0; }
.avanzainfo-line-name { display: block; font-size: 0.9rem; line-height: 1.3; }

.avanzainfo-line-stops-btn {
    background: none; border: none; padding: 0; cursor: pointer; color: #999; font-size: 0.78rem;
    display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.15rem;
}
.avanzainfo-line-stops-btn:hover { color: #666; }
.avanzainfo-stops-btn-text { color: #333; }
.avanzainfo-stops-btn-icon { transition: transform 0.2s; font-size: 0.7rem; }
.avanzainfo-line-stops-btn[aria-expanded="true"] .avanzainfo-stops-btn-icon { transform: rotate(180deg); }

.avanzainfo-line-detail-link {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.6rem; border-radius: 4px;
    text-decoration: none; color: #d9534f; font-size: 0.8rem; flex-shrink: 0; white-space: nowrap;
    transition: color 0.2s; align-self: flex-start; margin-top: 0.1rem;
}
.avanzainfo-line-detail-link:hover { color: #c9302c; }
.avanzainfo-detail-icon { font-size: 0.9rem; }

.avanzainfo-line-stops-panel {
    background: #f9f9f9; border-top: 1px solid #eee; max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.avanzainfo-line-stops-panel:not([hidden]) { padding: 0.75rem; max-height: 500px; overflow-y: auto; }
.avanzainfo-line-stops-panel[hidden] { display: block; max-height: 0; padding: 0 0.75rem; }

.avanzainfo-stops-direction {
    font-weight: 600; font-size: 0.85rem; color: #555; margin: 0.5rem 0 0.25rem;
    padding-bottom: 0.25rem; border-bottom: 1px solid var(--line-color, #666);
}
.avanzainfo-stops-direction:first-child { margin-top: 0; }

.avanzainfo-mini-stops { list-style: none; padding: 0; margin: 0; }
.avanzainfo-mini-stop {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; padding-left: 1.2rem;
    position: relative; font-size: 0.82rem;
}
.avanzainfo-mini-stop::before {
    content: ''; position: absolute; left: 0.21rem; top: 0; bottom: 0; width: 2px; background: var(--line-color, #ccc);
}
.avanzainfo-mini-stop:first-child::before { top: 50%; }
.avanzainfo-mini-stop:last-child::before { bottom: 50%; }
.avanzainfo-mini-stop-dot {
    width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--line-color, #666); background: #fff;
    position: absolute; left: 0.02rem; top: 50%; transform: translateY(-50%); z-index: 1;
}
.avanzainfo-mini-stop.is-terminal .avanzainfo-mini-stop-dot { width: 10px; height: 10px; left: -0.04em; background: var(--line-color, #666); }

.avanzainfo-stops-list { list-style: none; padding: 0; margin: 0; }
.avanzainfo-stop-item {
    display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0; cursor: pointer;
    position: relative; padding-left: 2rem;
}
.avanzainfo-stop-item::before {
    content: ''; position: absolute; left: 0.6rem; top: 0; bottom: 0; width: 3px; background: var(--line-color, #666);
}
.avanzainfo-stop-item:first-child::before { top: 50%; }
.avanzainfo-stop-item:last-child::before { bottom: 50%; }
.avanzainfo-stop-icon {
    width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--line-color, #666); background: #fff;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1;
}.avanzainfo-schedule-item
.avanzainfo-stop-item.is-terminal .avanzainfo-stop-icon { width: 18px; height: 18px; background: var(--line-color, #666); }
.avanzainfo-stop-item.is-active { background: #e8f4fd; border-radius: 4px; }
.avanzainfo-stop-correspondences { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.25rem; }
.avanzainfo-correspondence-badge { font-size: 0.7rem; padding: 0.1rem 0.3rem; border-radius: 3px; color: #fff; font-weight: 600; }

.avanzainfo-schedule-times { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.5rem; }
.avanzainfo-schedule-time { padding: 0.1rem 0.4rem; background: #f0f0f0; font-family: monospace; font-size: 0.95rem; }
.avanzainfo-direction-toggle { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }

.avanzainfo-popup-stop-name { font-weight: 700; margin-bottom: 0.25rem; }
.avanzainfo-popup-lines { margin: 0.25rem 0; }
.avanzainfo-loading { color: #999; font-size: 0.85rem; font-style: italic; }

/* === DETALLE DE LÍNEA === */
.avanzainfo-linea-header { margin-bottom: 1rem; }
.avanzainfo-linea-title-row { display: flex; align-items: center; gap: 0.75rem; }
.avanzainfo-linea-title-row h2 { margin: 0; font-size: 1.3rem; }
.avanzainfo-line-badge-lg { font-size: 1.1rem; padding: 0.3rem 0.75rem; min-width: 2.5rem; }
.avanzainfo-direction-row { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.avanzainfo-direction-label { font-size: 0.95rem; color: #555; font-weight: 500; }

.avanzainfo-linea-layout { display: flex; gap: 0; }
.avanzainfo-linea-info {
    flex: 0 0 400px; height: var(--avanzainfo-map-height, 600px); overflow-y: auto;
    border: 1px solid #ddd; border-right: none;
}
.avanzainfo-linea-map { flex: 1; min-width: 0; }

.avanzainfo-thermometer-section { padding: 0.75rem; }
.avanzainfo-thermometer-section h3 {
    font-size: 1rem; margin: 0 0 0.5rem; color: #333;
}

/* Termómetro */
.avanzainfo-thermometer { list-style: none; padding: 0; margin: 0; }
.avanzainfo-thermo-stop {
    display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4rem 0; padding-left: 1.5rem;
    position: relative; cursor: pointer; font-size: 0.85rem;
}
.avanzainfo-thermo-stop:hover { background: #f5f5f5; }
.avanzainfo-thermo-stop.is-active { background: #e3f2fd; }

.avanzainfo-thermo-stop::before {
    content: ''; position: absolute; left: 0.2rem; top: 0; bottom: 0; width: 3px;
    background: var(--line-color, #666);
}
.avanzainfo-thermo-stop:first-child::before { top: 50%; }
.avanzainfo-thermo-stop:last-child::before { bottom: 50%; }

.avanzainfo-thermo-dot {
    width: 10px; height: 10px; border-radius: 50%; border: 3px solid var(--line-color, #666);
    background: #fff; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); z-index: 1;
    flex-shrink: 0;
}
.avanzainfo-thermo-stop.is-terminal .avanzainfo-thermo-dot {
    width: 14px; height: 14px; background: var(--line-color, #666); left: -3px;
}

.avanzainfo-thermo-info { display: flex; flex-direction: column; }
.avanzainfo-thermo-name { font-weight: 500; }
.avanzainfo-thermo-corresp { display: flex; gap: 0.2rem; flex-wrap: wrap; margin-top: 0.15rem; }

/* Horarios */
.avanzainfo-schedules-section { margin-top: 1rem;  }
.avanzainfo-schedules-header {
    display: flex; align-items: center; gap: 2rem; margin-bottom: 0.75rem;
}
.avanzainfo-schedule-label { font-size: 0.95rem; color: #333; margin: 0; font-weight: 500; }
.avanzainfo-date-row { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.avanzainfo-date-row label { font-size: 0.9rem; font-weight: 500; white-space: nowrap; }
.avanzainfo-date-row input { font-size: 0.9rem; padding: 0.25rem 0.4rem; width: auto; }

.avanzainfo-schedule-grid {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}
.avanzainfo-schedule-item {
    display: inline-flex; align-items: baseline; gap: 0.4rem; 
    font-size: 0.9rem; border-bottom: 1px solid #f0f0f0;
}
.avanzainfo-schedule-time {
    font-family: monospace; font-weight: 600; font-size: 0.95rem; min-width: 3rem;
}
.avanzainfo-schedule-route { color: #666; font-size: 0.82rem; }

/* Selector de trayecto */
.avanzainfo-trayecto-selector { margin-bottom: 0.5rem; }
.avanzainfo-trayecto-label { display: block; font-size: 0.85rem; color: #555; margin-bottom: 0.25rem; }
.avanzainfo-trayecto-select {
    width: 100%; padding: 0.3rem 0.5rem; font-size: 0.85rem; border: 1px solid #ccc;
}

/* === DETALLE DE PARADA === */
.avanzainfo-parada-header { margin-bottom: 1rem; }
.avanzainfo-parada-header h2 { margin: 0 0 0.5rem; font-size: 1.3rem; }
.avanzainfo-parada-lines { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.avanzainfo-parada-lines-label { font-size: 0.9rem; color: #555; }
.avanzainfo-parada-lines .avanzainfo-line-badge { text-decoration: none; cursor: pointer; font-size: 0.8rem; }
.avanzainfo-parada-lines .avanzainfo-line-badge:hover { opacity: 0.8; }

.avanzainfo-parada-layout { display: flex; gap: 0; }
.avanzainfo-parada-info {
    flex: 0 0 var(--avanzainfo-info-width, 550px); height: var(--avanzainfo-map-height, 500px); overflow-y: auto;
    border: 1px solid #ddd; border-right: none;
}
.avanzainfo-parada-map { flex: 1; min-width: 0; }

.avanzainfo-parada-schedules-section { }
.avanzainfo-parada-schedules-section h3 {
    font-size: 1rem; margin: 0 0 0.5rem; color: #333;
}

.avanzainfo-parada-filter-label { font-size: 0.9rem; color: #555; margin: 0 0 0.4rem; }

.avanzainfo-parada-line-buttons { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.avanzainfo-parada-line-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.2rem; padding: 0.3rem 0.6rem; border-radius: 4px;
    font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.avanzainfo-parada-line-btn:hover { opacity: 0.85; }

.avanzainfo-parada-date-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.avanzainfo-parada-date-row label { font-size: 0.9rem; font-weight: 500; white-space: nowrap; }
.avanzainfo-parada-date-row input { font-size: 0.9rem; padding: 0.25rem 0.4rem; width: auto; }

/* ETAs - Próximas llegadas */
.avanzainfo-tabs {
    display: flex; border-bottom: 2px solid #ddd;
}
.avanzainfo-tab {
    flex: 1; padding: 0.6rem 1rem; background: none; border: none; border-bottom: 2px solid transparent;
    margin-bottom: -2px; cursor: pointer; font-size: 0.95rem; font-weight: 600; color: #888;
    transition: all 0.15s; text-align: center;
}
.avanzainfo-tab:hover { color: #555; }
.avanzainfo-tab.is-active { color: #333; border-bottom-color: #0d6efd; }

.avanzainfo-tab-panel { padding: 0.75rem; }
.avanzainfo-tab-panel[hidden] { display: none; }

.avanzainfo-parada-schedules-direct { padding: 0.75rem; }

.avanzainfo-etas-section { padding: 0.75rem; border-bottom: 1px solid #eee; }
.avanzainfo-section-title { font-size: 1.1rem; margin: 0 0 0.25rem; color: #333; font-weight: 700; }
.avanzainfo-etas-subtitle { font-size: 0.82rem; color: #4caf50; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid #eee; }
.avanzainfo-etas-subtitle i { margin-right: 0.3rem; }

.avanzainfo-etas-list { }
.avanzainfo-etas-empty { color: #999; font-size: 0.9rem; font-style: italic; }

.avanzainfo-eta-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.6rem 0; border-bottom: 1px solid #f0f0f0;
}
.avanzainfo-eta-row:last-child { border-bottom: none; }

.avanzainfo-eta-line { display: flex; align-items: center; gap: 0.4rem; }
.avanzainfo-eta-line .avanzainfo-line-badge { font-size: 0.75rem; min-width: 1.6rem; padding: 0.15rem 0.35rem; }
.avanzainfo-eta-arrow { color: #aaa; font-size: 0.85rem; letter-spacing: -1px; }
.avanzainfo-eta-dest { font-weight: 600; font-size: 1rem; text-transform: uppercase; }

.avanzainfo-eta-time { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; color: #4caf50; }
.avanzainfo-eta-live-icon { font-size: 0.75rem; }
.avanzainfo-eta-mins { font-weight: 700; font-size: 1rem; white-space: nowrap; }

/* Horarios programados parada */
.avanzainfo-schedules-title { padding: 0.75rem 0.75rem 0; }
.avanzainfo-parada-schedules-section { padding: 0 0.75rem 0.75rem; }

@media (max-width: 768px) {
    .avanzainfo-lineas-layout, .avanzainfo-linea-layout, .avanzainfo-parada-layout { flex-direction: column; }
    .avanzainfo-lineas-list, .avanzainfo-linea-info, .avanzainfo-parada-info {
        flex: none; max-height: none; height: auto; border: 1px solid #ddd; border-right: 1px solid #ddd;
    }
    .avanzainfo-map { height: 350px; }
}