.sub { font-size: 12px; line-height: 1.5; }
#ahora { display: block; }
#ahora::first-letter { text-transform: uppercase; }
.sub a { color: inherit; text-underline-offset: 2px; }
:root {
  --fondo: #F3F0EA;
  --tarjeta: #FFFFFF;
  --borde: #E0D9CD;
  --tinta: #1B1D22;
  --suave: #5B5F66;
  --azul: #1F4E8C;
  --naranja: #C45E1C;
  --naranja-texto: #A84B12;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

.pagina {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

h1, h2 { font-family: 'Barlow Condensed', sans-serif; margin: 0; }
h1 { font-size: 52px; font-weight: 700; line-height: 1; }
h2 { font-size: 28px; font-weight: 600; }

.cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.sub { margin: 6px 0 0; color: var(--suave); }
.etiqueta { padding: 4px 10px; border-radius: 999px; background: #FBE3CF; color: #8E3A0A; font-size: 13px; font-weight: 600; white-space: nowrap; }

.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 24px; }
.tarjeta-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.nota { font-size: 14px; color: var(--suave); }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px; padding: 20px 24px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.lbl { font-size: 13px; font-weight: 600; color: var(--suave); }
select, .segmentado button {
  height: 44px; border-radius: 10px; border: 1px solid #CFC8BC;
  background: #fff; color: var(--tinta); font: inherit; font-size: 15px;
}
select { padding: 0 12px; min-width: 170px; }
.segmentado { display: flex; gap: 6px; }
.segmentado button { padding: 0 16px; font-weight: 600; cursor: pointer; }
.segmentado button[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi-lbl { font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); }
.kpi-valor { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 60px; line-height: 1.05; }
.kpi-texto { font-size: 32px; line-height: 1.2; padding-top: 8px; }
.kpi-sub { font-size: 14px; color: var(--suave); }
.azul { color: var(--azul); }
.naranja { color: var(--naranja-texto); }

.grafico { width: 100%; }
.doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

/* Leyenda del calendario */
.leyenda { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); margin-top: 8px; }
.leyenda i { width: 16px; height: 16px; border-radius: 3px; display: inline-block; }

/* Ranking */
.ranking { display: flex; flex-direction: column; gap: 12px; }
.ranking-fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 56px; align-items: center; gap: 12px; font-size: 15px; }
.ranking-barra { height: 20px; background: var(--fondo); border-radius: 4px; overflow: hidden; }
.ranking-barra span { display: block; height: 100%; border-radius: 4px; }
.ranking-pct { font-family: 'IBM Plex Mono', monospace; font-size: 14px; text-align: right; }

/* Peores días */
.peores-fila { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid #EDE7DD; }
.peores-pct { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 28px; color: var(--naranja-texto); }
.peores-fecha { font-weight: 600; }
.peores-det { font-size: 13px; color: var(--suave); }

/* Tabla */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 760px; }
.tabla th { text-align: left; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--suave); padding: 10px 8px; border-bottom: 2px solid var(--tinta); }
.tabla td { padding: 10px 8px; border-bottom: 1px solid #EDE7DD; }
.tabla .mono { font-family: 'IBM Plex Mono', monospace; font-size: 14px; white-space: nowrap; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }

.pie { font-size: 13px; color: var(--suave); }

.cargando {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  background: var(--tinta); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: 14px;
}

/* Ahora mismo */
.directo h2 { display: flex; align-items: center; gap: 10px; }
.punto { width: 12px; height: 12px; border-radius: 50%; background: #D93A2B; animation: latido 2s infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.ficha-leyenda { flex-wrap: wrap; margin-top: 4px; }
.ficha-leyenda span { margin-right: 12px; }
@media (prefers-reduced-motion: reduce) { .punto { animation: none; } }
.directo-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.directo-kpis > div { display: flex; flex-direction: column; gap: 2px; }
.mini-valor { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 40px; line-height: 1.1; }

.bloque-titulo { padding-top: 16px; border-top: 2px solid var(--tinta); }
.bloque-titulo p { margin: 4px 0 0; }

/* Buscador de trenes */
.cabecera-der { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.buscador { display: flex; gap: 6px; }
.buscador input {
  height: 44px; width: 230px; padding: 0 12px; border-radius: 10px;
  border: 1px solid #CFC8BC; font: inherit; font-size: 15px; background: #fff;
}
.buscador button {
  height: 44px; padding: 0 16px; border-radius: 10px; border: none;
  background: var(--tinta); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ficha de tren */
.ficha-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.ficha-cab h2 { font-size: 36px; }
.ficha-trayectos { color: var(--suave); font-size: 15px; margin-top: 4px; line-height: 1.6; }
.ficha-cerrar {
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid #CFC8BC; background: #fff;
  font-size: 22px; line-height: 1; cursor: pointer; color: var(--tinta);
}
.ficha-vivo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 16px; border-radius: 10px; background: var(--fondo); font-size: 15px;
}
.ficha-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.ficha-kpis > div { display: flex; flex-direction: column; gap: 2px; }
a[data-tren] { color: inherit; text-decoration: underline; text-decoration-color: #CFC8BC; text-underline-offset: 3px; }
a[data-tren]:hover { text-decoration-color: currentColor; }

.buscadores { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pestanas { display: flex; gap: 8px; }
.pestana { background: none; border: 0; border-bottom: 2px solid transparent; padding: 2px 4px;
  font: inherit; font-size: 13px; color: #5B5F66; cursor: pointer; }
.pestana.activa { color: #1A1A1A; font-weight: 600; border-bottom-color: #C45E1C; }
.buscador[hidden] { display: none; }
#buscador-trayecto input { width: 11em; }

.ficha-volver { background: none; border: 0; padding: 0; margin-bottom: 4px; font: inherit;
  font-size: 13px; color: #1F4E8C; cursor: pointer; }
.ficha-volver:hover { text-decoration: underline; }

.tabla-scroll { overflow-x: auto; }
.tabla-trayecto { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
.tabla-trayecto th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #5B5F66; padding: 6px 8px; border-bottom: 2px solid #1A1A1A; }
.tabla-trayecto td { padding: 9px 8px; border-bottom: 1px solid #E4DED3; vertical-align: top; }
.tabla-trayecto .mono { font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }
.tabla-trayecto .servicio { color: #5B5F66; font-size: 13px; }

.hora-prog { color: #9A958C; text-decoration-thickness: 1px; margin-right: 4px; }

.mapa-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mapa { width: 100%; max-width: calc(85vh * 1.25); aspect-ratio: 5 / 4; margin: 12px auto 8px; border-radius: 8px; background: #E8E4DC; isolation: isolate; }
.mapa .leaflet-popup-content { font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; line-height: 1.5; }
.mapa .leaflet-tile-pane { filter: grayscale(1) contrast(.85) brightness(1.08); }

.info-boton { background: none; border: 0; padding: 0 2px; margin-right: 5px; color: #1F4E8C;
  cursor: pointer; vertical-align: -2px; }
.info-boton:hover, .info-boton:focus-visible { color: #C45E1C; }

.info { width: min(640px, calc(100% - 32px)); max-height: 85vh; padding: 0; border: 0;
  border-radius: 12px; background: #FFFFFF; color: #1A1A1A; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.info::backdrop { background: rgba(26, 26, 26, .45); }
.info-cab { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 18px 24px 12px; background: #FFFFFF; border-bottom: 1px solid #E4DED3; }
.info-cab h2 { margin: 0; }
.info-cuerpo { padding: 4px 24px 24px; font-size: 15px; line-height: 1.6; }
.info-cuerpo h3 { font-size: 16px; margin: 20px 0 4px; }
.info-cuerpo p { margin: 0 0 8px; }

@media (max-width: 640px) {
  .buscadores { align-items: stretch; width: 100%; }
  #buscador-trayecto { flex-wrap: wrap; }
  #buscador-trayecto input { flex: 1 1 40%; width: auto; }
  .tabla-trayecto .col-estaciones { display: none; }
  .mapa { height: 360px; }
  .info { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; }
}
/* Móvil */
@media (max-width: 900px) {
  .pagina { padding: 20px 16px 32px; gap: 16px; }
  h1 { font-size: 38px; }
  h2 { font-size: 24px; }
  .tarjeta { padding: 16px; border-radius: 12px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-valor { font-size: 40px; }
  .kpi-texto { font-size: 22px; }
  .doble { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .filtros { gap: 14px; }
  .campo, .segmentado { width: 100%; }
  .segmentado button { flex: 1; }
  select { width: 100%; font-size: 16px; }
  .ranking-fila { grid-template-columns: minmax(0, 1fr) 56px; }
  .ranking-barra { grid-column: 1 / -1; order: 3; height: 10px; }
  .directo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cabecera { flex-direction: column; align-items: stretch; }
  .cabecera-der { justify-content: space-between; }
  .buscador { width: 100%; }
  .buscador input { flex: 1; width: auto; font-size: 16px; }
  .ficha-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-cab h2 { font-size: 28px; }
}

/* Icono de información de la cabecera */
.sub .info-boton { display: inline-flex; vertical-align: -4px; margin: 0 7px 0 0; padding: 0;
  border: 0; border-radius: 50%; background: none; box-shadow: none; color: #1A1A1A;
  cursor: pointer; transition: color .15s, transform .15s; }
.sub .info-boton:hover { color: #C45E1C; transform: scale(1.12); }
.sub .info-boton:focus-visible { color: #C45E1C; outline: 2px solid #C45E1C; outline-offset: 2px; }

/* Logo: reloj + TengoUnRetraso */
.logo a { display: inline-flex; align-items: center; gap: .16em; color: inherit; text-decoration: none; }
.logo-reloj { width: .9em; height: .9em; flex: none; }
.logo-texto { display: inline-flex; }
.logo-retraso { color: #C45E1C; }
.logo a, .logo a:hover { text-decoration: none; }

/* Paginación de "Ahora mismo" */
.paginador { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 14px;
  font-size: 14px; color: #5B5F66; }
.paginador[hidden] { display: none; }
.paginador button { min-height: 40px; padding: 0 14px; border: 1px solid #CFC8BC; border-radius: 10px;
  background: #FFFFFF; color: #1B1D22; font: inherit; font-weight: 600; cursor: pointer; }
.paginador button:hover:not(:disabled) { border-color: #1B1D22; }
.paginador button:disabled { opacity: .4; cursor: default; }
.pos { display: inline-block; min-width: 2em; color: #9A958C; font-size: 12px; font-variant-numeric: tabular-nums; }