/* Sistema visual del dashboard y del catálogo.

   La referencia son los sitios de transporte público europeos que funcionan —
   SBB, NS, BVG, TfL — y de ellos se toman cuatro cosas concretas, no el
   aspecto:

   1. **La herramienta primero.** Un tablero de salidas no tiene portada: lo
      primero que se ve es el campo donde escribes tu parada. Todo lo demás es
      contexto y va debajo.
   2. **Densidad tabular.** Las salidas son una tabla, no tarjetas. Filas
      apretadas, un filete de separación, cifras de ancho fijo y la espera
      alineada a la derecha, para poder compararlas en vertical de un vistazo.
   3. **El color identifica, no decora.** Cada recorrido lleva el color de su
      destino — la convención del Letrero Único de Recorrido de DTPR — y el
      resto de la página es tinta sobre papel. Un color que no significa nada
      compite con los que sí.
   4. **Escala tipográfica con saltos grandes.** La jerarquía la hace el
      tamaño, no el contenedor: de 11 px a 38 px sin pasos intermedios tibios.

   Y se mantienen las dos reglas de forma de este proyecto: **sin cajas**
   (nada de tarjetas con borde y fondo apiladas; las secciones se separan con
   aire y una línea de un píxel) y **jerarquía por tipografía**. Las insignias
   de línea sí llevan fondo de color, y eso no las contradice: no son
   contenedores de la interfaz, son el letrero de la micro.

   La paleta pasa el validador de contraste y de daltonismo: los cuatro pasos
   de la escala de velocidad tienen ΔE ≥ 10 bajo deuteranopía y ΔE ≥ 20 en
   visión normal, y todos superan 3:1 contra el papel. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');

:root {
  color-scheme: light;

  --papel: #f4f6f5;          /* fondo de página */
  --lienzo: #ffffff;         /* superficies dibujadas: mapa, hover de fila */
  --tinta: #10262a;          /* texto principal */
  --tenue: #4c6166;          /* texto secundario */
  --apagado: #7e9296;        /* texto terciario, rótulos de eje */
  --linea: #e0e7e5;          /* filete de un píxel */
  --linea-fuerte: #c7d3d1;

  --marca: #00897c;          /* verde azulado: acento primario */
  --marca-honda: #00655c;
  --marca-suave: #e0f2ef;
  --indigo: #4739c9;         /* segunda serie de los gráficos */
  --frambuesa: #c43b76;

  --ok: #00897c;
  --alerta: #b98900;
  --malo: #96122b;

  --titulo: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --fuente: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Cifras de ancho fijo en toda la página. En un tablero de salidas las
     columnas de minutos y de horas tienen que alinearse verticalmente; con
     cifras proporcionales bailan y dejan de ser comparables de un vistazo. */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { font-family: var(--titulo); font-weight: 600; letter-spacing: -0.015em; }

a { color: var(--marca-honda); text-decoration: none; }
a:hover { text-decoration: underline; }

.envoltura { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .envoltura { padding: 0 18px; } }

/* Un solo rótulo pequeño en toda la página: versalitas espaciadas. Marca
   «esto es una etiqueta, no contenido» sin gastar una caja. */
.rotulo, .cifra .etiqueta, .rotulo-busqueda, th, .etiqueta-parada,
.cabecera-tablero span, .espera .metodo, .sentido-fila b {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 500; color: var(--apagado);
}

/* ── Cabecera ────────────────────────────────────────────────────────── */
header.principal {
  background: rgba(244, 246, 245, 0.92);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--linea);
}
.barra {
  display: flex; align-items: center; gap: 18px;
  padding: 13px 0; flex-wrap: wrap;
}
.marca {
  font-family: var(--titulo); font-size: 15px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--tinta);
}
.marca span { color: var(--apagado); font-weight: 500; }
/* `wrap` porque en una pantalla estrecha los cuatro enlaces no caben en una
   línea, y sin él el último se salía de la pantalla en vez de bajar. */
nav.enlaces {
  margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px;
}
nav.enlaces a { color: var(--tenue); }
nav.enlaces a.activo { color: var(--marca-honda); font-weight: 500; }
nav.enlaces a:hover { color: var(--tinta); }

.pulso {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--tenue);
}
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--apagado); flex: none; }
.punto.vivo { background: var(--ok); box-shadow: 0 0 0 0 rgba(0,137,124,.65); animation: latido 2.4s infinite; }
.punto.viejo { background: var(--alerta); }
.punto.caido { background: var(--malo); }
@keyframes latido {
  70%  { box-shadow: 0 0 0 7px rgba(0,137,124,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,137,124,0); }
}
@media (prefers-reduced-motion: reduce) { .punto.vivo { animation: none; } }

/* ── Entradilla ──────────────────────────────────────────────────────── */
/* Corta: dos líneas y al grano. En un sitio de transporte la portada es la
   herramienta, no el texto que la presenta. */
.entradilla { padding: 34px 0 0; max-width: 620px; }
.entradilla h1 {
  font-size: 38px; line-height: 1.1; margin: 0 0 10px; font-weight: 700;
  letter-spacing: -0.035em; overflow-wrap: break-word;
}
.entradilla p { margin: 0; color: var(--tenue); font-size: 16px; }
@media (max-width: 640px) { .entradilla h1 { font-size: 29px; } }

/* ── Secciones ───────────────────────────────────────────────────────── */
.seccion { margin: 46px 0 0; }
.seccion > h2 {
  margin: 0 0 4px; font-size: 19px; font-weight: 600;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.seccion > h2 .sub {
  font-family: var(--fuente); font-weight: 400; color: var(--apagado);
  font-size: 13px; letter-spacing: 0; text-transform: none;
}
.seccion > .intro {
  margin: 0 0 16px; color: var(--tenue); font-size: 14px; max-width: 76ch;
}
.seccion > .regla { border: 0; border-top: 1px solid var(--linea-fuerte); margin: 12px 0 18px; }

.rejilla-2 { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 940px) { .rejilla-2 { grid-template-columns: 1fr; gap: 34px; } }

/* ═══════════════════════════════════════════════════════════════════════
   El buscador: lo primero y lo más grande de la página
   ═══════════════════════════════════════════════════════════════════════ */
.buscador { margin: 22px 0 0; position: relative; }
.rotulo-busqueda { display: block; margin-bottom: 7px; }
.campo {
  display: flex; align-items: center; gap: 13px;
  border-bottom: 2px solid var(--tinta); padding-bottom: 9px; max-width: 640px;
}
.campo .lupa {
  width: 21px; height: 21px; flex: none; fill: none;
  stroke: var(--apagado); stroke-width: 1.8; stroke-linecap: round;
}
.campo input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-family: var(--titulo); font-size: 26px; font-weight: 500;
  letter-spacing: -0.025em; color: var(--tinta); min-width: 0;
}
.campo input::placeholder { color: var(--apagado); font-weight: 400; }
.campo:focus-within { border-bottom-color: var(--marca); }
.campo:focus-within .lupa { stroke: var(--marca); }
@media (max-width: 640px) { .campo input { font-size: 20px; } }

.pista { font-size: 13px; color: var(--apagado); margin: 9px 0 0; max-width: 640px; }
.sugerencia {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; color: var(--marca-honda); text-decoration: underline;
  text-underline-offset: 2px;
}
.sugerencia:hover { color: var(--tinta); }

/* El desplegable sí flota: tapa contenido y tiene que despegarse del papel
   para que se entienda que es temporal. Es la única sombra de la página
   aparte del mapa. */
.lista-sugerencias {
  position: absolute; z-index: 30; left: 0; top: 100%; margin-top: 6px;
  width: min(640px, 100%); background: var(--lienzo);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(16,38,42,.08), 0 14px 40px rgba(16,38,42,.16);
}
.sugerencia-esquina {
  display: flex; align-items: baseline; gap: 14px; width: 100%;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: 11px 16px; font-family: var(--fuente); font-size: 14.5px;
  color: var(--tinta); border-bottom: 1px solid var(--linea);
}
.sugerencia-esquina:last-child { border-bottom: 0; }
.sugerencia-esquina:hover, .sugerencia-esquina:focus-visible { background: var(--marca-suave); outline: none; }
.sugerencia-esquina .comuna { margin-left: auto; font-size: 12.5px; color: var(--apagado); white-space: nowrap; }
.sin-resultados { padding: 14px 16px; font-size: 13.5px; color: var(--apagado); }

/* ═══════════════════════════════════════════════════════════════════════
   El tablero de salidas
   ═══════════════════════════════════════════════════════════════════════ */
/* El tablero se acota: en una pantalla ancha, una fila de 1.100 px deja la
   espera tan lejos del destino que hay que barrer con la vista para unirlos.
   Un tablero de salidas real tiene el ancho de una columna de lectura. */
#panel-paradero { max-width: 840px; }

.cabecera-parada {
  display: flex; align-items: flex-start; gap: 16px;
  margin: 32px 0 2px; padding-top: 18px;
  border-top: 2px solid var(--tinta);
}
.etiqueta-parada { margin: 0; }
.cabecera-parada h2 {
  margin: 3px 0 0; font-size: 28px; font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.15;
}
.sub-parada { margin: 2px 0 0; color: var(--tenue); font-size: 13.5px; }
.cerrar {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--apagado); padding: 0 4px;
  font-family: inherit;
}
.cerrar:hover { color: var(--tinta); }

/* ── Los dos sentidos ────────────────────────────────────────────────── */
/* Un bloque por vereda. La flecha apunta al rumbo real que llevan los buses
   al pasar por la esquina — sale del trazado observado, no del feed— y es lo
   que permite identificar de un vistazo en cuál de las dos estás parado. */
.sentido { margin-top: 26px; }
.sentido:first-child { margin-top: 14px; }
.titulo-sentido {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.02em;
}
.titulo-sentido .flecha {
  display: inline-block; font-size: 17px; line-height: 1; color: var(--marca);
  transform-origin: 50% 50%;
}
.titulo-sentido .conteo {
  font-family: var(--fuente); font-weight: 400; font-size: 12.5px;
  color: var(--apagado); letter-spacing: 0;
}

/* La cabecera de columnas existe para que la cifra de la derecha se lea como
   «espera» y no como un número suelto. */
.cabecera-tablero {
  display: grid; grid-template-columns: 4px 62px minmax(0, 1fr) auto;
  gap: 0 14px; align-items: end;
  padding: 10px 4px 6px; border-bottom: 1px solid var(--linea-fuerte);
}
.cabecera-tablero span:last-child { text-align: right; }

/* Una fila = una salida. La barra de color de la izquierda es el destino, y
   es lo que permite escanear la lista por color sin leer. */
.llegada {
  display: grid; grid-template-columns: 4px 62px minmax(0, 1fr) auto;
  gap: 0 14px; align-items: center; width: 100%;
  border: 0; border-bottom: 1px solid var(--linea); background: transparent;
  padding: 11px 4px; cursor: pointer; text-align: left;
  font-family: var(--fuente); color: var(--tinta);
}
.llegada { text-decoration: none; }
.llegada:hover { background: var(--lienzo); text-decoration: none; }
.llegada:last-of-type { border-bottom: 0; }
.barra-destino { align-self: stretch; border-radius: 2px; min-height: 38px; }

.destino-llegada { min-width: 0; }
.destino-llegada .hacia {
  display: block; font-family: var(--titulo); font-weight: 600; font-size: 16.5px;
  letter-spacing: -0.02em; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.destino-llegada .detalle {
  display: block; font-size: 12.5px; color: var(--apagado); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sin-destino { color: var(--apagado); font-weight: 500; }

/* La espera manda: es la columna que se mira primero y por eso es la más
   grande de la fila. Verde con punto latiendo = medido sobre un bus que
   circula ahora; gris = frecuencia típica del archivo. Nunca se pintan igual,
   porque no afirman lo mismo. */
.espera { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.espera .numero {
  font-family: var(--titulo); font-weight: 600; font-size: 23px;
  letter-spacing: -0.03em; white-space: nowrap; line-height: 1.1;
  display: inline-flex; align-items: center; gap: 7px;
}
.espera .metodo { margin-top: 1px; }
.espera.viva .numero { color: var(--marca-honda); }
.espera.viva .numero::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--marca); flex: none; animation: latido 2.4s infinite;
}
@media (prefers-reduced-motion: reduce) { .espera.viva .numero::before { animation: none; } }
.espera.tipica .numero { color: var(--apagado); font-weight: 500; font-size: 18px; }

@media (max-width: 560px) {
  .llegada, .cabecera-tablero {
    grid-template-columns: 3px 52px minmax(0, 1fr) auto; gap: 0 10px;
  }
  /* La insignia tiene que encoger con su columna: a 62 px en una columna de
     52 se metía encima del destino. */
  .insignia.grande { width: 52px; min-width: 52px; height: 36px; font-size: 17px; }
  .destino-llegada .hacia { font-size: 15px; }
  .espera .numero { font-size: 19px; }
  /* En el móvil la espera puede partirse en dos líneas antes que empujar la
     fila: es preferible un «cada 12 min» en dos renglones a una página que
     se desplaza en horizontal. */
  .espera { max-width: 40vw; }
  .espera .numero { white-space: normal; text-align: right; }
}

/* Red de seguridad: ningún descendiente puede ensanchar la página. Una fila de
   tablero con un destino largo lo hacía, y en un móvil eso se nota como una
   página que se mueve de lado. */
main.envoltura { overflow-x: clip; }

.letra-pequena {
  font-size: 12.5px; color: var(--apagado); margin: 16px 0 0; max-width: 88ch;
  line-height: 1.65;
}
.letra-pequena strong { color: var(--tenue); font-weight: 500; }

/* ── Insignias de línea, al modo del LUR ─────────────────────────────── */
/* El número de la línea es el dato, así que se trata como tal: pastilla del
   color del destino, cifra ancha, y la letra del ramal más pequeña dentro de
   la misma pastilla — «50 Y», igual que en el letrero de la micro. */
.insignia {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 32px; padding: 0 9px;
  border-radius: 7px; background: var(--tinta); color: #fff;
  font-family: var(--titulo); font-weight: 600; font-size: 17px;
  letter-spacing: -0.02em;
}
.insignia i { font-style: normal; font-size: .7em; font-weight: 500; opacity: .82; margin-left: 3px; }
.insignia.grande  { width: 62px; min-width: 62px; height: 40px; font-size: 20px; border-radius: 8px; }
.insignia.chica   { min-width: 42px; height: 24px; font-size: 13px; border-radius: 5px; }
.insignia.enorme  { min-width: 78px; height: 58px; font-size: 29px; border-radius: 11px; }

/* ── Estado de la red: cifras sueltas, no tarjetas ───────────────────── */
.cifras {
  display: grid; gap: 4px 34px; margin: 22px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--linea-fuerte);
  padding-top: 18px;
}
.cifra { padding-bottom: 10px; }
.cifra .valor {
  font-family: var(--titulo); font-size: 38px; font-weight: 600;
  letter-spacing: -0.04em; line-height: 1.08; margin-top: 2px;
}
.cifra .valor .unidad { font-size: 16px; color: var(--apagado); font-weight: 500; margin-left: 3px; }
.cifra .nota { font-size: 12.5px; color: var(--apagado); margin-top: 2px; line-height: 1.4; }
.cifras.menor { margin-top: 18px; border-top: 0; padding-top: 0; }
.cifras.menor .valor { font-size: 25px; }

/* ── Barra de herramientas del mapa ──────────────────────────────────── */
.herramientas {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 13px;
}
.grupo-botones { display: inline-flex; gap: 4px; }
.grupo-botones button {
  background: transparent; border: 1px solid var(--linea-fuerte);
  color: var(--tenue); border-radius: 999px;
  padding: 5px 15px; font-size: 13px; cursor: pointer;
  font-family: inherit; transition: background .12s, color .12s, border-color .12s;
}
.grupo-botones button.activo {
  background: var(--tinta); border-color: var(--tinta); color: #fff; font-weight: 500;
}
.grupo-botones button:hover:not(.activo) { border-color: var(--marca); color: var(--marca-honda); }
.grupo-botones button:disabled { opacity: .45; cursor: not-allowed; }

.filtro-activo {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--marca-suave); color: var(--marca-honda);
  border-radius: 999px; padding: 5px 8px 5px 14px; font-size: 13px; font-weight: 500;
}
.filtro-activo button {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 4px; font-family: inherit;
}
.filtro-activo button:hover { color: var(--tinta); }

/* ── Mapa: la única superficie con marco de toda la página ───────────── */
#mapa {
  height: 520px; width: 100%; background: var(--lienzo);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,38,42,.06), 0 8px 28px rgba(16,38,42,.07);
}
@media (max-width: 700px) { #mapa { height: 400px; } }

.maplibregl-popup-content {
  background: var(--lienzo); color: var(--tinta);
  border-radius: 10px; box-shadow: 0 6px 24px rgba(16,38,42,.16);
  font-family: var(--fuente); font-size: 13px; padding: 13px 15px;
}
.maplibregl-popup-close-button { color: var(--apagado); font-size: 18px; }
.popup-id {
  font-family: var(--titulo); font-weight: 600; font-size: 15px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.popup-id .sub { flex-basis: 100%; font-family: var(--fuente); font-weight: 400; font-size: 12px; color: var(--apagado); }
.popup-fila { display: flex; justify-content: space-between; gap: 20px; }
.popup-fila span:first-child { color: var(--apagado); }

.leyenda {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  font-size: 12.5px; color: var(--tenue); padding: 13px 2px 0;
}
.muestra { display: inline-flex; align-items: center; gap: 6px; }
.chip { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* ── Directorio de líneas: un índice de red ──────────────────────────── */
.chips-linea {
  display: grid; gap: 0 26px;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
}
.chip-linea {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; border-bottom: 1px solid var(--linea); background: transparent;
  padding: 8px 4px; cursor: pointer; text-align: left;
  font-family: var(--fuente); font-size: 14px; color: var(--tinta);
}
.chip-linea { text-decoration: none; }
.chip-linea:hover { background: var(--lienzo); text-decoration: none; }
.chip-linea:hover .nombre-chip { color: var(--tinta); }
.chip-linea .insignia { min-width: 44px; height: 27px; font-size: 15px; flex: none; }
.nombre-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tenue); }

/* ── Perfil de línea ─────────────────────────────────────────────────── */
.cabecera-linea {
  display: flex; align-items: center; gap: 18px;
  margin: 30px 0 20px; padding-top: 20px;
  border-top: 2px solid var(--tinta);
}
.cabecera-linea h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.sub-linea { margin: 2px 0 0; color: var(--tenue); font-size: 13.5px; }

.horario { margin-top: 10px; }
.horario > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--linea);
}
.horario > div:last-child { border-bottom: 0; }
.horario span { color: var(--apagado); font-size: 13.5px; }
.horario b { font-weight: 600; font-size: 16px; }
/* Una cifra que no se puede sostener no se pinta como cifra. */
.sin-muestra { font-weight: 400; font-size: 13px; color: var(--apagado); }

.sentido-fila { font-size: 13.5px; }
.sentido-fila b { display: inline-block; min-width: 64px; }
.acciones-linea { margin-top: 18px; }
.acciones-linea .boton, .acciones-linea button {
  display: inline-block; background: transparent;
  border: 1px solid var(--linea-fuerte); color: var(--tenue);
  border-radius: 999px; padding: 6px 16px; font-size: 13px; cursor: pointer;
  font-family: inherit; text-decoration: none;
}
.acciones-linea .boton:hover, .acciones-linea button:hover {
  border-color: var(--marca); color: var(--marca-honda); text-decoration: none;
}

/* La ficha de línea es un documento, no un tablero: se lee de arriba abajo y
   por eso va más estrecha que la portada. A 1.180 px la tabla de ramales deja
   un vacío enorme entre el recorrido y sus horarios. */
#perfil { max-width: 860px; }

/* Migas de la ficha de línea: un enlace de vuelta y nada más. */
.volver { margin: 26px 0 0; font-size: 13.5px; }
.cabecera-linea h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }

/* ── Avance del día ──────────────────────────────────────────────────── */
.barra-avance {
  position: relative; height: 24px; border-radius: 999px;
  background: var(--linea); overflow: hidden; margin: 12px 0 24px; max-width: 540px;
}
.barra-avance i { display: block; height: 100%; background: var(--marca); }
.barra-avance span {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding-left: 13px; font-size: 12.5px; font-weight: 500; color: var(--tinta);
  mix-blend-mode: luminosity;
}
.con-leyenda-serie { display: flex; gap: 18px; font-size: 12.5px; color: var(--tenue); margin-bottom: 8px; }
.serie { display: inline-flex; align-items: center; gap: 6px; }
.serie i { width: 11px; height: 11px; border-radius: 3px; }
.muestra-tipica { background: var(--linea-fuerte); }
.muestra-hoy { background: var(--marca); }

/* ── Tablas: filetes, no rejilla ─────────────────────────────────────── */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 14px 10px 0; text-align: left; border-bottom: 1px solid var(--linea); }
th { white-space: nowrap; border-bottom-color: var(--linea-fuerte); }
td.num, th.num { text-align: right; padding-right: 14px; }
tbody tr:last-child td { border-bottom: 0; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }

/* ── Gráficos SVG ────────────────────────────────────────────────────── */
/* El `viewBox` es de 480×200, así que a todo lo ancho de la página el gráfico
   se estiraba a casi 500 px de alto y una sola barra ocupaba media pantalla.
   El tope lo devuelve a su tamaño natural. */
.grafico { width: 100%; max-width: 560px; display: block; overflow: visible; }
.grafico .eje { stroke: var(--linea-fuerte); stroke-width: 1; }
.grafico .rejilla { stroke: var(--linea); stroke-width: 1; }
.grafico .rotulo { fill: var(--apagado); font-size: 10.5px; font-family: var(--fuente); }
.grafico .barra { fill: var(--marca); }
.grafico .barra:hover { fill: var(--marca-honda); }
.grafico .barra-tipica { fill: var(--linea-fuerte); }
.titulo-grafico {
  font-family: var(--titulo); font-size: 13px; font-weight: 600;
  color: var(--tinta); margin: 0 0 2px;
}
.nota-grafico { font-size: 12.5px; color: var(--apagado); margin: 0 0 10px; }

/* ── Avisos del catálogo ─────────────────────────────────────────────── */
.aviso { border-left: 2px solid var(--alerta); padding: 2px 0 2px 16px; margin-bottom: 18px; }
.aviso h4 { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; }
.aviso p { margin: 0; color: var(--tenue); font-size: 14px; }

.etiqueta-auth {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.auth-publico { background: var(--marca-suave); color: var(--marca-honda); }
.auth-api_key { background: #fbf1d6; color: #7a5c00; }
.auth-master  { background: #fbe4e8; color: var(--malo); }

pre {
  background: var(--lienzo); border: 1px solid var(--linea);
  border-radius: 10px; padding: 14px 16px; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; margin: 0;
}
pre .c { color: var(--apagado); }

footer.principal {
  border-top: 1px solid var(--linea-fuerte); margin-top: 58px;
  padding: 24px 0 48px; font-size: 13px; color: var(--apagado);
}
.cargando { color: var(--apagado); font-size: 13.5px; padding: 20px 0; }

/* Cifra con su marca de color al lado: el número siempre en tinta, porque un
   número es texto y el texto no lleva el color de la serie. */
.vel { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.vel .chip { width: 9px; height: 9px; border-radius: 50%; }
.leyenda .chip { border-radius: 3px; }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 3px; }

/* Botón de «ver más» del tablero: un enlace con forma de fila, sin caja. */
.ver-mas {
  display: block; width: 100%; border: 0; background: transparent;
  border-top: 1px solid var(--linea); cursor: pointer;
  padding: 12px 4px; text-align: left; font-family: inherit; font-size: 13.5px;
  color: var(--marca-honda);
}
.ver-mas:hover { background: var(--lienzo); text-decoration: underline; }