/* ============================================================
   REALTIME.CSS - Indicador y panel de circulación en tiempo real
   ============================================================
   El indicador reutiliza la escala de color de ocupación
   (occ-low / occ-mid / occ-high) para que la app hable un solo
   lenguaje visual. El color nunca es el único canal: el signo y
   la palabra ("En hora", "+12 min") distinguen los estados por
   sí solos, algo necesario con reflejos y luz cambiante a bordo.
   ============================================================ */

/* ---------- Indicador en la cabecera ----------
   La cabecera tiene fondo oscuro incluso en modo claro, así que aquí
   se usan colores SÓLIDOS con texto claro: los fondos translúcidos
   claros resultan ilegibles sobre el morado de la cabecera. */

.rt-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.55rem;
    border: none;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    background: var(--color-gray-500);
    color: #fff;
    transition: opacity 0.15s ease;
}

.rt-pill[hidden] {
    display: none;
}

.rt-pill:active {
    opacity: 0.7;
}

/* En hora */
.rt-pill.occ-low {
    background: #059669;
    color: #fff;
}

/* Retraso moderado */
.rt-pill.occ-mid {
    background: #d97706;
    color: #fff;
}

/* Retraso alto */
.rt-pill.occ-high {
    background: var(--color-danger-dark);
    color: #fff;
}

/* Adelantado: neutro, no es ni bueno ni malo para el interventor */
.rt-pill.rt-early {
    background: #4338ca;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Dentro del panel (fondo claro) el pill vuelve a la escala translúcida
   de las insignias de ocupación, que ahí sí contrasta bien. */
.rt-modal .rt-pill.occ-low {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

body.dark-mode .rt-modal .rt-pill.occ-low {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.rt-modal .rt-pill.occ-mid {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

body.dark-mode .rt-modal .rt-pill.occ-mid {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.rt-modal .rt-pill.occ-high {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger-dark);
}

body.dark-mode .rt-modal .rt-pill.occ-high {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.rt-modal .rt-pill.rt-early {
    background: rgba(79, 70, 229, 0.12);
    color: var(--color-primary-dark);
    box-shadow: none;
}

body.dark-mode .rt-modal .rt-pill.rt-early {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

/* Datos sin refrescar: se atenúa en lugar de desaparecer, para que
   se note que hay algo pero no se confíe en el número */
.rt-pill.rt-stale {
    opacity: 0.55;
}

/* ---------- Panel de detalle ---------- */

.rt-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.5rem 1rem 1rem;
}

.rt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-gray-200);
}

body.dark-mode .rt-row {
    border-bottom-color: var(--color-dark-border);
}

.rt-row:last-of-type {
    border-bottom: none;
}

.rt-row-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

body.dark-mode .rt-row-label {
    color: var(--color-gray-400);
}

.rt-row-value {
    font-size: 0.95rem;
    font-weight: 600;
    text-align: right;
}

.rt-delta {
    color: var(--color-danger-dark);
    font-weight: 700;
}

body.dark-mode .rt-delta {
    color: #f87171;
}

/* ---------- Sugerencia de material ---------- */

.rt-suggestion {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.2);
}

body.dark-mode .rt-suggestion {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
}

.rt-suggestion p {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    line-height: 1.4;
}

.rt-suggestion-btn {
    width: 100%;
    padding: 0.55rem;
    border: none;
    border-radius: 0.4rem;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.rt-suggestion-btn:active {
    background: var(--color-primary-dark);
}

/* ---------- Botón de acceso al recorrido ---------- */

.rt-route-btn {
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.7rem;
    border: 1px solid var(--color-gray-300);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

body.dark-mode .rt-route-btn {
    border-color: var(--color-dark-border);
    color: var(--color-dark-text);
}

.rt-route-btn:active {
    background: var(--color-gray-100);
}

body.dark-mode .rt-route-btn:active {
    background: var(--color-dark-surface);
}

/* ---------- Vista de recorrido ----------
   Cuatro columnas de ancho fijo salvo el nombre: así las horas y las
   desviaciones quedan alineadas y se leen en vertical de un vistazo,
   que es lo que permite ver si el retraso se recupera. */

/* .modal tiene overflow:hidden y max-height:80vh, así que el cuerpo debe
   aportar su propio scroll o el recorrido se corta y no se puede bajar
   (mismo patrón que .modal-list). */
.rv-body {
    flex: 1;
    min-height: 0;                     /* sin esto flex no deja encoger */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.5rem 1rem 1rem;
}

.rv-head,
.rv-row {
    display: grid;
    grid-template-columns: 1.4rem 1fr 3.2rem 2.4rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

/* La cabecera de columnas se queda fija al desplazar la lista */
.rv-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-background);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-gray-200);
}

body.dark-mode .rv-head {
    background: var(--color-dark-bg);
    color: var(--color-gray-400);
    border-bottom-color: var(--color-dark-border);
}

.rv-row {
    border-bottom: 1px solid var(--color-gray-100);
}

body.dark-mode .rv-row {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.rv-mark {
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.rv-name {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv-time {
    font-size: 0.88rem;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rv-dev {
    font-size: 0.82rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rv-dev.rv-late {
    color: var(--color-danger-dark);
}

body.dark-mode .rv-dev.rv-late {
    color: #f87171;
}

.rv-dev.rv-early {
    color: #059669;
}

body.dark-mode .rv-dev.rv-early {
    color: #34d399;
}

/* Paradas ya superadas: atenuadas, pero legibles por si se consultan */
.rv-passed {
    opacity: 0.45;
}

/* Parada actual: destacada sin depender solo del color */
.rv-current {
    background: rgba(79, 70, 229, 0.08);
    border-radius: 0.4rem;
    font-weight: 700;
}

body.dark-mode .rv-current {
    background: rgba(99, 102, 241, 0.16);
}

.rv-current .rv-mark {
    color: var(--color-primary);
}

body.dark-mode .rv-current .rv-mark {
    color: #a5b4fc;
}

/* ---------- Aviso de parada desfasada ----------
   Va abajo para no tapar el mapa de asientos, y NO caduca solo: aparece
   precisamente cuando el interventor está ocupado. Los botones son
   generosos porque esto se pulsa de pie y en marcha. */

.rt-stop-banner {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translate(-50%, 130%);
    width: calc(100% - 2rem);
    max-width: 26rem;
    z-index: 9998;               /* bajo los modales (9999) */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 0.8rem;
    background: #1e293b;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.28s ease;
}

.rt-stop-banner-visible {
    transform: translate(-50%, 0);
}

.rt-stop-banner-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.35;
}

.rt-stop-banner-text strong {
    font-size: 0.95rem;
}

.rt-stop-banner-text span {
    font-size: 0.8rem;
    opacity: 0.8;
}

.rt-stop-banner-actions {
    display: flex;
    gap: 0.6rem;
}

.rt-stop-banner-actions button {
    flex: 1;
    padding: 0.7rem 0.5rem;      /* alto cómodo para el pulgar */
    border: none;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.rt-stop-apply {
    background: var(--color-primary-light);
    color: #fff;
}

.rt-stop-apply:active {
    background: var(--color-primary);
}

.rt-stop-dismiss {
    background: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

.rt-stop-dismiss:active {
    background: rgba(255, 255, 255, 0.25);
}

/* Variante informativa: no hay acción que ofrecer, solo se informa */
.rt-suggestion-info {
    background: var(--color-gray-100);
    border-color: var(--color-gray-200);
}

body.dark-mode .rt-suggestion-info {
    background: var(--color-dark-surface);
    border-color: var(--color-dark-border);
}

.rt-suggestion-info p {
    margin: 0;
}

/* Configuración de coches de la unidad (C1:A · C2:A · C3:D) */
.rt-unit-detail {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    opacity: 0.75;
}

/* Confirmación de que el material cuadra. Se muestra siempre que coincide:
   el silencio es ambiguo y hace dudar de si la función está rota. */
.rt-match {
    margin: 0.75rem 0 0;
    padding: 0.5rem;
    border-radius: 0.4rem;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

body.dark-mode .rt-match {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

/* Aviso en el selector de parada: lo escrito existe en la ruta pero ya se
   ha superado, así que se oculta a propósito. Sin esto, el desplegable
   vacío se confundiría con una errata al escribir. */
.stop-option-note {
    padding: 0.55rem 0.5rem;
    background: #fff;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-style: italic;
    text-align: center;
}

body.dark-mode .stop-option-note {
    background: var(--color-dark-surface);
    color: var(--color-gray-400);
}

/* ---------- Notas por unidad de material ----------
   Particularidades del tren físico (enchufes, cerradura de cabina…) que el
   interventor necesita ver de un vistazo al cargar el servicio. */

.mn-block {
    margin-top: 0.85rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

body.dark-mode .mn-block {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.3);
}

.mn-entry + .mn-entry {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(245, 158, 11, 0.25);
}

.mn-entry-unit {
    display: inline-block;
    margin-bottom: 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #b45309;
}

body.dark-mode .mn-entry-unit {
    color: #fbbf24;
}

.mn-entry-text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre-wrap;        /* respeta los saltos de línea escritos */
}

.mn-edit-btn {
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.6rem;
    border: 1px dashed var(--color-gray-300);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

body.dark-mode .mn-edit-btn {
    border-color: var(--color-dark-border);
    color: var(--color-gray-400);
}

.mn-edit-btn:active {
    background: var(--color-gray-100);
}

body.dark-mode .mn-edit-btn:active {
    background: var(--color-dark-surface);
}

/* ---------- Editor de notas ----------
   Se abre desde el panel de tiempo real (z-index 30) pero también desde el
   selector de unidades del 470, que está a 1100: sin una capa propia por
   encima quedaría debajo y sería inalcanzable. */

.mn-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Por encima del selector de unidades del 470 (1100) */
    z-index: 1200;
}

.mn-overlay .mn-modal {
    width: 100%;
    max-width: 32rem;
}

.mn-body {
    padding: 0.5rem 1rem 1rem;
}

.mn-hint {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

body.dark-mode .mn-hint {
    color: var(--color-gray-400);
}

.mn-textarea {
    width: 100%;
    padding: 0.65rem;
    border: 1px solid var(--color-gray-300);
    border-radius: 0.5rem;
    background: var(--color-background);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.45;
    resize: vertical;
}

body.dark-mode .mn-textarea {
    background: var(--color-dark-surface);
    border-color: var(--color-dark-border);
    color: var(--color-dark-text);
}

.mn-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.mn-actions button {
    flex: 1;
    padding: 0.7rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.mn-save {
    background: var(--color-primary);
    color: #fff;
}

.mn-save:active {
    background: var(--color-primary-dark);
}

.mn-cancel {
    background: var(--color-gray-200);
    color: var(--color-gray-800);
}

body.dark-mode .mn-cancel {
    background: var(--color-dark-surface);
    color: var(--color-dark-text);
}

/* ---------- Marcas en la lista de unidades 470 ---------- */

.units470-note-dot {
    color: var(--color-warning);
    font-size: 0.6rem;
    vertical-align: middle;
}

.units470-item-note {
    padding: 0 0.7rem;
    border: none;
    background: transparent;
    color: var(--color-gray-400);
    font-size: 1rem;
    cursor: pointer;
}

.units470-item-note.has-note {
    color: var(--color-warning);
}

/* ---------- Notas al pie ---------- */

.rt-age,
.rt-source,
.rt-stale-note {
    margin: 0.5rem 0 0;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    text-align: center;
}

body.dark-mode .rt-age,
body.dark-mode .rt-source,
body.dark-mode .rt-stale-note {
    color: var(--color-gray-400);
}

.rt-source {
    opacity: 0.75;
}

.rt-stale-note {
    color: #d97706;
}

body.dark-mode .rt-stale-note {
    color: #fbbf24;
}