/* ============================================================================
   STC-Metro-IoT-Solution — mtr-base.css
   FASE 2 · Sistema de diseño: tokens, tipografía y componentes compartidos.

   Lo carga TODO frontend. Cada uno añade después su propia hoja.

   Índice
     1. Tipografía METRO-DF
     2. Tokens: color, línea, espaciado, tipografía, forma
     3. Reset
     4. Accesibilidad
     5. Componentes compartidos
   ========================================================================= */


/* ═══════════════════ 1. TIPOGRAFÍA ═══════════════════
   Metro-DF de Harold Lohner, basada en el rotulado original de Lance Wyman
   para el Metro de la CDMX. Verificado: 204 caracteres, cobertura completa
   de acentos del español, dígitos y ambas cajas.

   Es una fuente DISPLAY: se usa para nombres de estación, números de línea
   y cifras grandes. NO para texto corrido ni tablas — no tiene las variantes
   de peso ni el interletraje que eso exige. Ahí va la pila del sistema.

   font-display: swap → el texto se lee desde el primer frame aunque la
   fuente tarde. En una pantalla de estación eso no es un lujo.            */

@font-face {
  font-family: 'Metro DF';
  src: url('../../../assets/fonts/metro_df/METRO-DF.TTF') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ═══════════════════ 2. TOKENS ═══════════════════ */

:root {

  /* ---- Esquema de color ----
     `color-scheme: light dark` declara que la página sabe verse de las dos
     formas. El navegador aplica el tema del sistema y, de paso, adapta solo
     los controles nativos: selects, scrollbars, date pickers. Eso no se
     puede lograr pintando cajas a mano.

     Cada token de color se declara DOS veces:
       1. valor claro a secas  → lo toma un navegador sin light-dark()
       2. light-dark(claro, oscuro) → lo toma un navegador moderno
     Un navegador viejo se queda en tema claro, que es correcto; nunca se
     queda sin color, que sería una página rota. */
  color-scheme: light dark;

  /* ---- Tipografía ---- */
  --mtr-font-display: 'Metro DF', 'Futura', 'Century Gothic', sans-serif;
  --mtr-font-ui: system-ui, -apple-system, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
  --mtr-font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo,
                   Consolas, monospace;

  /* Escala tipográfica (razón 1.25) */
  --mtr-t-xs:   0.75rem;
  --mtr-t-sm:   0.875rem;
  --mtr-t-base: 1rem;
  --mtr-t-md:   1.125rem;
  --mtr-t-lg:   1.375rem;
  --mtr-t-xl:   1.75rem;
  --mtr-t-2xl:  2.25rem;
  --mtr-t-3xl:  3rem;
  --mtr-t-4xl:  4rem;
  --mtr-t-5xl:  6rem;

  /* ---- Espaciado (base 4px) ---- */
  --mtr-e-1: 0.25rem;
  --mtr-e-2: 0.5rem;
  --mtr-e-3: 0.75rem;
  --mtr-e-4: 1rem;
  --mtr-e-5: 1.5rem;
  --mtr-e-6: 2rem;
  --mtr-e-7: 3rem;
  --mtr-e-8: 4rem;

  /* ---- Forma ---- */
  --mtr-r-sm: 4px;
  --mtr-r-md: 8px;
  --mtr-r-lg: 16px;
  --mtr-r-full: 999px;

  --mtr-sombra-color: rgba(0, 0, 0, .12);
  --mtr-sombra-color: light-dark(rgba(0, 0, 0, .12), rgba(0, 0, 0, .55));
  --mtr-sombra-1: 0 1px 3px var(--mtr-sombra-color);
  --mtr-sombra-2: 0 8px 20px var(--mtr-sombra-color);
  --mtr-sombra-3: 0 20px 32px var(--mtr-sombra-color);

  /* ---- Neutros ---- */
  --mtr-fondo:        #f5f6f7;
  --mtr-fondo:        light-dark(#f5f6f7, #0e1113);
  --mtr-superficie:   #ffffff;
  --mtr-superficie:   light-dark(#ffffff, #181c1f);
  --mtr-superficie-2: #eceef0;
  --mtr-superficie-2: light-dark(#eceef0, #22272b);
  --mtr-borde:        #d8dbdf;
  --mtr-borde:        light-dark(#d8dbdf, #2e343a);
  --mtr-borde-fuerte: #b4b9c0;
  --mtr-borde-fuerte: light-dark(#b4b9c0, #454d55);
  --mtr-texto:        #14171a;
  --mtr-texto:        light-dark(#14171a, #eef1f4);
  --mtr-texto-2:      #565d66;
  --mtr-texto-2:      light-dark(#565d66, #a8b1ba);
  --mtr-texto-3:      #838b95;
  --mtr-texto-3:      light-dark(#838b95, #79838d);
  --mtr-texto-inv:    #ffffff;

  /* ---- Semánticos ----
     Los tonos "fuertes" existen porque un verde de marca (#00843D) tiene
     contraste suficiente sobre blanco pero no sobre negro. En oscuro se
     aclara para seguir cumpliendo AA; el color de marca no se toca donde
     sí funciona. */
  /* Medidos sobre su propio tono suave, que es donde de verdad se usan
     (chips, alertas, intervalos). El verde de marca daba 4.18:1 sobre
     #e3f3ea y el naranja de marca 2.65:1 sobre #fdf0e6 — por debajo de AA
     los dos. Se oscurecen lo justo para cumplir sin salirse del tono:
     4.57:1 y 4.96:1. El color de marca sigue intacto en --mtr-ok y
     --mtr-aviso, que es lo que se pinta como fondo. */
  --mtr-ok:            #00843D;
  --mtr-ok-fuerte:     #007d3a;
  --mtr-ok-fuerte:     light-dark(#007d3a, #4ade80);
  --mtr-ok-suave:      #e3f3ea;
  --mtr-ok-suave:      light-dark(#e3f3ea, rgba(0, 132, 61, .18));

  --mtr-aviso:         #E87722;
  --mtr-aviso-fuerte:  #a25318;
  --mtr-aviso-fuerte:  light-dark(#a25318, #fbbf24);
  --mtr-aviso-suave:   #fdf0e6;
  --mtr-aviso-suave:   light-dark(#fdf0e6, rgba(232, 119, 34, .18));

  --mtr-critico:       #DA291C;
  --mtr-critico-fuerte:#DA291C;
  --mtr-critico-fuerte:light-dark(#c1241a, #f87171);
  --mtr-critico-suave: #fdeceb;
  --mtr-critico-suave: light-dark(#fdeceb, rgba(218, 41, 28, .20));

  --mtr-info:          #005EB8;
  --mtr-info-fuerte:   #005EB8;
  --mtr-info-fuerte:   light-dark(#005EB8, #60a5fa);
  --mtr-info-suave:    #e6eff8;
  --mtr-info-suave:    light-dark(#e6eff8, rgba(0, 94, 184, .22));

  /* ---- Colores de línea ----
     Cada línea trae su color y el color de texto que garantiza AA sobre él.
     El texto NO se eligió a ojo: se calculó el contraste WCAG de los 12
     contra blanco y contra negro y se tomó el mayor. El peor caso es
     Línea B con 4.88:1; el resto va de 4.87:1 a 12.92:1.
     Por eso la bala de Línea 5 (amarillo) lleva texto negro y la de
     Línea 2 (azul) lo lleva blanco: no es preferencia, es legibilidad. */

  --mtr-l1:  #F04E98;  --mtr-l1-txt:  #111111;  /* Rosa mexicano  5.62:1 */
  --mtr-l2:  #005EB8;  --mtr-l2-txt:  #ffffff;  /* Azul           6.38:1 */
  --mtr-l3:  #AF9800;  --mtr-l3-txt:  #111111;  /* Verde olivo    6.58:1 */
  --mtr-l4:  #00A9A6;  --mtr-l4-txt:  #111111;  /* Cian           6.50:1 */
  --mtr-l5:  #FFD100;  --mtr-l5-txt:  #111111;  /* Amarillo      12.92:1 */
  --mtr-l6:  #DA291C;  --mtr-l6-txt:  #ffffff;  /* Rojo           4.87:1 */
  --mtr-l7:  #E87722;  --mtr-l7-txt:  #111111;  /* Naranja        6.38:1 */
  --mtr-l8:  #00843D;  --mtr-l8-txt:  #ffffff;  /* Verde          4.81:1 */
  --mtr-l9:  #6C4C42;  --mtr-l9-txt:  #ffffff;  /* Café           7.64:1 */
  --mtr-l12: #C5A900;  --mtr-l12-txt: #111111;  /* Dorado         8.14:1 */
  --mtr-la:  #94288C;  --mtr-la-txt:  #ffffff;  /* Morado         7.14:1 */
  --mtr-lb:  #009639;  --mtr-lb-txt:  #111111;  /* Verde-gris     4.88:1 */
  --mtr-lb-2: #A2AAAD;                          /* gris de la L B        */

  /* Color activo del contexto. Cada página lo sobrescribe con su línea. */
  --mtr-linea: var(--mtr-l2);
  --mtr-linea-txt: var(--mtr-l2-txt);

  --mtr-transicion: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* ---- Selección explícita de tema ----
   El toggle NO reescribe veinte tokens: cambia el esquema declarado y el
   navegador reevalúa cada light-dark() de una sola vez. Sin data-tema, la
   página sigue al sistema operativo — que es lo correcto por defecto.
   El CCO y el kiosk ignoran todo esto: tienen paleta fija por diseño. */
:root[data-tema="claro"]  { color-scheme: light; }
:root[data-tema="oscuro"] { color-scheme: dark; }

/* ---- Logotipos institucionales ----
   Son PNG/SVG con fondo transparente y tinta oscura: hechos para papel
   membretado, no para pantalla oscura. Sobre negro desaparecen.
   Se les da lienzo blanco propio en AMBOS temas: en claro parece una
   tarjeta, en oscuro los rescata. Recolorear un logotipo oficial no es
   una opción disponible. */
.mtr-logo-inst {
  padding: var(--mtr-e-2);
  background: #ffffff;
  border-radius: var(--mtr-r-sm);
}


/* ═══════════════════ 3. RESET ═══════════════════ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--mtr-font-ui);
  font-size: var(--mtr-t-base);
  line-height: 1.5;
  color: var(--mtr-texto);
  background: var(--mtr-fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

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

/* El atributo `hidden` tiene que ganar SIEMPRE.
   El navegador lo aplica con [hidden]{display:none} desde su hoja por
   defecto, y cualquier regla de autor con clase le gana por especificidad.
   Paso: `.mtr-acceso { display: flex }` anulaba el hidden del panel de
   acceso, asi que tras entrar la portada se pintaba DEBAJO y el usuario
   seguia viendo el formulario ocupando la pantalla entera. Parecia que el
   acceso no funcionaba cuando en realidad ya habia entrado.
   Con !important esto deja de depender de que nadie escriba un display
   sobre un elemento que alguna vez se oculte. */
[hidden] { display: none !important; }

/* Toda cifra que cambia en vivo va con ancho fijo de dígito.
   Sin esto el contador de arribo "baila" a cada segundo y se ve roto. */
time, .mtr-num, [data-campo="eta"], [data-campo="reloj"], [data-campo="hora"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------- Ancho reservado de los marcadores de tiempo ----------

   Las cifras ya son de ancho igual —medido: en las tres tipografías del
   proyecto los diez dígitos miden exactamente lo mismo, con y sin
   tabular-nums—. Lo que sí cambia de ancho es el CONTENIDO del marcador:

     "00:01:40"   7.00ch     cuenta regresiva normal
     "— — —"      6.41ch     tren sin cuenta (cerrando puertas, saliendo)
     "3:12"       3.5ch      intervalo
     "12:34"      4.5ch      intervalo de dos cifras

   Medido en la tipografía Metro DF. Cuando un tren pasa de contar a "— — —"
   el marcador encoge 0.6ch, y como su columna se dimensiona por contenido,
   arrastra al texto de al lado: la línea de detalle se reacomoda y lo que
   estaba al final salta de renglón. Eso es lo que se ve como corrimiento.

   Reservando el ancho del caso más largo, el marcador deja de empujar. Un
   dígito de más —una hora de tres cifras— lo desbordaría, pero un arribo de
   cien horas no es un caso que exista. */
:root {
  --mtr-reloj-hms: 7ch;     /* hh:mm:ss */
  --mtr-reloj-ms:  4.5ch;   /* m:ss y mm:ss */
}


/* ═══════════════════ 4. ACCESIBILIDAD ═══════════════════ */

.mtr-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mtr-skip {
  position: absolute;
  top: -100%; left: var(--mtr-e-2);
  z-index: 999;
  padding: var(--mtr-e-3) var(--mtr-e-4);
  background: var(--mtr-texto);
  color: var(--mtr-texto-inv);
  border-radius: 0 0 var(--mtr-r-md) var(--mtr-r-md);
  font-weight: 600;
}
.mtr-skip:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--mtr-info);
  outline-offset: 2px;
  border-radius: var(--mtr-r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ═══════════════════ 5. COMPONENTES COMPARTIDOS ═══════════════════ */

/* ---------- Bala de línea ----------
   El disco numerado que identifica cada línea. Es el elemento más
   reconocible del sistema de Wyman: círculo, color plano, número dentro. */

.mtr-bala {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75em;
  height: 1.75em;
  padding: 0 .35em;
  border-radius: var(--mtr-r-full);
  font-family: var(--mtr-font-display);
  font-size: .95em;
  line-height: 1;
  background: var(--mtr-linea);
  color: var(--mtr-linea-txt);
  flex: none;
}

.mtr-bala--l1  { background: var(--mtr-l1);  color: var(--mtr-l1-txt); }
.mtr-bala--l2  { background: var(--mtr-l2);  color: var(--mtr-l2-txt); }
.mtr-bala--l3  { background: var(--mtr-l3);  color: var(--mtr-l3-txt); }
.mtr-bala--l4  { background: var(--mtr-l4);  color: var(--mtr-l4-txt); }
.mtr-bala--l5  { background: var(--mtr-l5);  color: var(--mtr-l5-txt); }
.mtr-bala--l6  { background: var(--mtr-l6);  color: var(--mtr-l6-txt); }
.mtr-bala--l7  { background: var(--mtr-l7);  color: var(--mtr-l7-txt); }
.mtr-bala--l8  { background: var(--mtr-l8);  color: var(--mtr-l8-txt); }
.mtr-bala--l9  { background: var(--mtr-l9);  color: var(--mtr-l9-txt); }
.mtr-bala--l12 { background: var(--mtr-l12); color: var(--mtr-l12-txt); }
.mtr-bala--la  { background: var(--mtr-la);  color: var(--mtr-la-txt); }
.mtr-bala--lb  {
  color: var(--mtr-lb-txt);
  background: linear-gradient(135deg,
              var(--mtr-lb) 0 50%, var(--mtr-lb-2) 50% 100%);
}

/* ---------- Botones ---------- */

.mtr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mtr-e-2);
  padding: var(--mtr-e-3) var(--mtr-e-5);
  border: 1px solid var(--mtr-borde-fuerte);
  border-radius: var(--mtr-r-md);
  background: var(--mtr-superficie);
  color: var(--mtr-texto);
  font-weight: 600;
  font-size: var(--mtr-t-sm);
  cursor: pointer;
  transition: background var(--mtr-transicion), border-color var(--mtr-transicion);
  /* 44px: objetivo táctil mínimo. En el andén se usa a una mano y en movimiento. */
  min-height: 44px;
  /* La etiqueta de un botón nunca se parte. Sin esto, una columna de grid
     `auto` se encoge hasta min-content —el ancho de la palabra más larga—
     y "Ver arribos" cae en dos renglones. */
  white-space: nowrap;
}
.mtr-btn:hover { background: var(--mtr-superficie-2); }

.mtr-btn--primario {
  background: var(--mtr-linea);
  border-color: var(--mtr-linea);
  color: var(--mtr-linea-txt);
}
.mtr-btn--primario:hover { filter: brightness(.92); background: var(--mtr-linea); }

.mtr-btn--fantasma { background: transparent; border-color: transparent; color: var(--mtr-texto-2); }
.mtr-btn--fantasma:hover { background: var(--mtr-superficie-2); color: var(--mtr-texto); }

.mtr-btn--bloque { width: 100%; }

.mtr-btn--mini { padding: var(--mtr-e-1) var(--mtr-e-3); min-height: 32px; font-size: var(--mtr-t-xs); }

.mtr-btn--favorito {
  min-height: 44px; min-width: 44px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  font-size: var(--mtr-t-lg);
  color: var(--mtr-texto-3);
}
.mtr-btn--favorito[aria-pressed="true"] { color: #f5b301; }

/* ---------- Chips de estado ---------- */

.mtr-chip {
  display: inline-block;
  padding: var(--mtr-e-1) var(--mtr-e-3);
  border-radius: var(--mtr-r-full);
  background: var(--mtr-superficie-2);
  color: var(--mtr-texto-2);
  font-size: var(--mtr-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.mtr-chip--anden   { background: var(--mtr-ok-suave);      color: var(--mtr-ok-fuerte); }
.mtr-chip--aviso   { background: var(--mtr-aviso-suave);   color: var(--mtr-aviso-fuerte); }
.mtr-chip--critico { background: var(--mtr-critico-suave); color: var(--mtr-critico-fuerte); }

.mtr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em; height: 1.4em;
  padding: 0 .35em;
  border-radius: var(--mtr-r-full);
  background: var(--mtr-critico);
  color: #fff;
  font-size: var(--mtr-t-xs);
  font-weight: 700;
}

/* ---------- Severidad ---------- */

.mtr-sev {
  display: inline-block;
  padding: var(--mtr-e-1) var(--mtr-e-3);
  border-radius: var(--mtr-r-sm);
  font-size: var(--mtr-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.mtr-sev--critica { background: var(--mtr-critico); color: #fff; }
.mtr-sev--alta    { background: var(--mtr-aviso);   color: #111; }
.mtr-sev--media   { background: #f5d000;            color: #111; }
.mtr-sev--baja    { background: var(--mtr-superficie-2); color: var(--mtr-texto-2); }
.mtr-sev--info    { background: var(--mtr-info-suave);   color: var(--mtr-info); }

/* ---------- Confianza ----------
   Nunca es sólo un número: lleva color y un punto que lo hace legible
   de un vistazo. Un ETA al 18 % no puede verse igual que uno al 96 %. */

.mtr-confianza {
  display: inline-flex;
  align-items: center;
  gap: var(--mtr-e-2);
  font-size: var(--mtr-t-xs);
  font-weight: 600;
}
.mtr-confianza::before {
  content: '';
  width: .6em; height: .6em;
  border-radius: var(--mtr-r-full);
  background: currentColor;
  flex: none;
}
.mtr-confianza--alta  { color: var(--mtr-ok-fuerte); }
.mtr-confianza--media { color: var(--mtr-aviso-fuerte); }
.mtr-confianza--baja  { color: var(--mtr-critico-fuerte); }

/* ---------- Punto de conexión ---------- */

.mtr-punto {
  display: inline-block;
  width: .6em; height: .6em;
  border-radius: var(--mtr-r-full);
  background: var(--mtr-texto-3);
  flex: none;
}
[data-estado="conectado"] .mtr-punto,
.mtr-punto[data-estado="conectado"] {
  background: var(--mtr-ok);
  animation: mtr-latido 2s ease-in-out infinite;
}
[data-estado="desconectado"] .mtr-punto { background: var(--mtr-critico); }

@keyframes mtr-latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 132, 61, .5); }
  50%      { box-shadow: 0 0 0 .45em rgba(0, 132, 61, 0); }
}

/* ---------- Avisos ---------- */

.mtr-aviso {
  padding: var(--mtr-e-3) var(--mtr-e-4);
  border-left: 4px solid var(--mtr-texto-3);
  border-radius: var(--mtr-r-sm);
  background: var(--mtr-superficie-2);
  font-size: var(--mtr-t-sm);
}
.mtr-aviso--info    { border-color: var(--mtr-info);    background: var(--mtr-info-suave); }
.mtr-aviso--ok      { border-color: var(--mtr-ok);      background: var(--mtr-ok-suave); }
.mtr-aviso--alerta  { border-color: var(--mtr-aviso);   background: var(--mtr-aviso-suave); }
.mtr-aviso--critico { border-color: var(--mtr-critico); background: var(--mtr-critico-suave); }

/* ---------- Indicadores (KPI) ---------- */

.mtr-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--mtr-e-3);
}

.mtr-kpi {
  padding: var(--mtr-e-4);
  border: 1px solid var(--mtr-borde);
  border-top: 3px solid var(--mtr-borde-fuerte);
  border-radius: var(--mtr-r-md);
  background: var(--mtr-superficie);
}
.mtr-kpi__label {
  font-size: var(--mtr-t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mtr-texto-2);
}
.mtr-kpi__valor {
  margin: var(--mtr-e-1) 0;
  font-family: var(--mtr-font-display);
  font-size: var(--mtr-t-2xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mtr-kpi__valor small { font-size: var(--mtr-t-md); color: var(--mtr-texto-2); }
.mtr-kpi__nota { font-size: var(--mtr-t-xs); color: var(--mtr-texto-3); }

.mtr-kpi--alerta  { border-top-color: var(--mtr-aviso); }
.mtr-kpi--alerta  .mtr-kpi__valor { color: var(--mtr-aviso-fuerte); }
.mtr-kpi--critico { border-top-color: var(--mtr-critico); }
.mtr-kpi--critico .mtr-kpi__valor { color: var(--mtr-critico-fuerte); }

/* ---------- Paneles ---------- */

.mtr-panel {
  border: 1px solid var(--mtr-borde);
  border-radius: var(--mtr-r-md);
  background: var(--mtr-superficie);
  overflow: hidden;
}
.mtr-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mtr-e-3);
  padding: var(--mtr-e-4);
  border-bottom: 1px solid var(--mtr-borde);
}
.mtr-panel__head h2 { font-size: var(--mtr-t-md); }
.mtr-panel__meta { font-size: var(--mtr-t-xs); color: var(--mtr-texto-3); }
.mtr-panel__nota {
  padding: var(--mtr-e-4);
  border-top: 1px solid var(--mtr-borde);
  font-size: var(--mtr-t-xs);
  color: var(--mtr-texto-2);
  background: var(--mtr-superficie-2);
}

/* ---------- Tablas ----------
   Denso a propósito: quien las lee está de turno, no navegando.
   Encabezado pegajoso para que no se pierda al hacer scroll. */

.mtr-tabla-wrap { overflow-x: auto; }

.mtr-tabla { font-size: var(--mtr-t-sm); }
.mtr-tabla th, .mtr-tabla td {
  padding: var(--mtr-e-3) var(--mtr-e-4);
  text-align: left;
  border-bottom: 1px solid var(--mtr-borde);
  white-space: nowrap;
}
.mtr-tabla thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--mtr-superficie-2);
  font-size: var(--mtr-t-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mtr-texto-2);
}
.mtr-tabla tbody tr:hover { background: var(--mtr-superficie-2); }
.mtr-tabla tbody th { font-family: var(--mtr-font-mono); font-weight: 700; }
.mtr-tabla .mtr-num { text-align: right; font-variant-numeric: tabular-nums; }

.mtr-tabla tr.is-alerta  { background: var(--mtr-aviso-suave); }
.mtr-tabla tr.is-critica { background: var(--mtr-critico-suave); }
.mtr-tabla tr.is-alerta:hover  { background: var(--mtr-aviso-suave); filter: brightness(.97); }
.mtr-tabla tr.is-critica:hover { background: var(--mtr-critico-suave); filter: brightness(.97); }

/* ---------- Campos de formulario ---------- */

/* min-width: 0 no es opcional aquí.
   El tamaño mínimo por defecto de un elemento de grid o flex es su
   min-content, y el min-content de un <select> es el ancho de su opción
   más larga — "Línea 2 · Cuatro Caminos – Tasqueña", o cualquiera de las
   195 estaciones. Sin esto, una columna 1fr se niega a encogerse, la fila
   no cabe y lo que sobra se desborda fuera de la tarjeta. */
.mtr-campo { display: flex; flex-direction: column; gap: var(--mtr-e-1); min-width: 0; }
.mtr-campo > label {
  font-size: var(--mtr-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mtr-texto-2);
}
.mtr-campo > label small { font-weight: 400; text-transform: none; letter-spacing: 0; }

.mtr-campo select,
.mtr-campo input,
.mtr-campo textarea {
  /* El control ocupa su columna y se deja truncar. Un <select> recorta
     el texto solo; la lista desplegada sigue mostrándolo completo. */
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: var(--mtr-e-2) var(--mtr-e-3);
  border: 1px solid var(--mtr-borde-fuerte);
  border-radius: var(--mtr-r-md);
  background: var(--mtr-superficie);
  color: var(--mtr-texto);
}
.mtr-campo textarea { min-height: 6rem; resize: vertical; }
.mtr-campo select:hover { border-color: var(--mtr-linea); }

.mtr-campo--check { flex-direction: row; align-items: center; gap: var(--mtr-e-2); }
.mtr-campo--check input { min-height: auto; width: 1.15rem; height: 1.15rem; }
.mtr-campo--check label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--mtr-t-sm); }

.mtr-campo__ayuda { font-size: var(--mtr-t-xs); color: var(--mtr-texto-3); }

/* ---------- Selector de tema ----------
   Componente compartido: lo usan la app y el centro de comando.
   El CCO y el kiosk no lo llevan — su paleta es fija por diseño.

   Tres estados, no dos: claro, oscuro y AUTO. Auto es el de fábrica y
   respeta la preferencia del sistema operativo, que mucha gente ya
   configuró por horario o por accesibilidad. Un interruptor de dos
   posiciones obliga a elegir y tira esa señal.

   El botón existe en el HTML aunque no haya JS: sin script no hace nada
   y la página sigue al sistema, que es el comportamiento correcto. */

.mtr-tema {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  /* Borde y superficie propios: sin ellos no se lee como control, sólo
     como un adorno flotando en la barra. */
  border: 1px solid var(--mtr-borde);
  border-radius: var(--mtr-r-full);
  background: var(--mtr-superficie);
  color: var(--mtr-texto-2);
  cursor: pointer;
  flex: none;
  transition: background var(--mtr-transicion),
              border-color var(--mtr-transicion),
              color var(--mtr-transicion);
}
.mtr-tema:hover {
  background: var(--mtr-superficie-2);
  border-color: var(--mtr-borde-fuerte);
  color: var(--mtr-texto);
}
.mtr-tema:active { transform: scale(.94); }

/* Iconos en SVG, no en glifos tipográficos.
   ☀ y ☾ dependen de la fuente instalada: se ven delgados, desalineados o
   directamente distintos en cada sistema, y algunos los pintan como emoji
   a color. Un trazo propio se ve igual en todas partes y hereda el color
   del botón con currentColor. */
.mtr-tema__icono {
  display: none;
  width: 20px;
  height: 20px;
}

/* Un botón, tres iconos: se muestra el del estado vigente.
   El JS sólo cambia data-tema en <html>; el CSS decide qué se ve. */
:root:not([data-tema]) .mtr-tema__icono--auto,
:root[data-tema="auto"]   .mtr-tema__icono--auto,
:root[data-tema="claro"]  .mtr-tema__icono--claro,
:root[data-tema="oscuro"] .mtr-tema__icono--oscuro { display: block; }


/* ---------- Enlace externo ---------- */

.mtr-ext { font-size: .8em; opacity: .6; }