/* =====================================================================
 * OmnIA · estilos propios de la página de Transporte (transporte.html)
 *
 * ⚠ TODO lo de acá sale de las variables de tokens.css. Ni un hex suelto:
 * es lo único que evita que en seis meses esta página tenga su propia
 * paleta paralela a la del resto del sitio.
 *
 * ⚠ Y va en un archivo, no en un <style>: la CSP de `_headers` es
 * `style-src 'self'` sin unsafe-inline. Un bloque inline no se aplica y la
 * página sale sin diseño, sin ningún error que lo explique. Lo mismo vale
 * para los `style="..."` sueltos: acá hay clases hasta para el ancho de la
 * barra de capacidad del camión.
 *
 * El recorrido de pantallas y el visor son los mismos de /deposito, con el
 * prefijo `tms-`. Se copian y no se comparten a propósito: son dos páginas
 * que tienen que poder evolucionar sin romperse entre sí, y los comentarios
 * de los números medidos viajan con el código que explican.
 * ===================================================================== */

/* ---------- los colores que NO están en tokens.css, y por qué ----------
   No son una paleta paralela: son los casos que el kit no cubre porque no son
   superficies de marca. Los ratios están MEDIDOS, no estimados.

   1. TINTA SOBRE LOS COLORES DE MARCA. El §4.2 del manual avisa que blanco
      sobre oro no pasa AA. Con tinta oscura: 10,25:1 sobre el oro, 8,67:1
      sobre el verde.
   2. EL MAPA DEL DEMO es un esquema sobre el panel oscuro, así que sus zonas
      son veladuras del propio navy, no un color nuevo. */
:root{
  --sobre-oro:#2a220c;      /* 10,25:1 sobre --gold */
  --sobre-ok:#04231a;       /*  8,67:1 sobre --ok   */
}

/* ---------- hero ---------- */
.tms-hero{ padding-top:var(--sp-7) }
.tms-hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:var(--sp-8); align-items:center;
}
.tms-hero-txt{ display:flex; flex-direction:column; gap:var(--sp-4); align-items:flex-start }
.tms-oro{ color:var(--gold) }
.tms-bajada{ color:var(--muted); font-size:var(--fs-xl); max-width:46ch }
.tms-acciones{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; margin-top:var(--sp-2) }
.tms-intro{ color:var(--muted); margin-top:var(--sp-3); max-width:70ch }
.seccion h2 + .tms-intro{ margin-top:var(--sp-3) }

/* ---------- la hoja de ruta del hero ----------
   Es el objeto que hoy se llena a mano y que el sistema reemplaza. Va como
   tarjeta oscura y no como papel blanco —al revés que la etiqueta de
   /deposito— porque acá el objeto real ya no es un papel: es la pantalla del
   teléfono del chofer. */
.tms-hero-obj{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3) }
.tms-hoja{
  inline-size:100%; max-inline-size:420px;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.75);
}
.tms-hoja-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3) }
.tms-hoja-tit{ font-family:var(--tit); font-weight:700; font-size:var(--fs-xl) }
.tms-hoja-sub{ color:var(--subtle); font-size:var(--fs-sm); margin-top:2px }
.tms-hoja-fecha{
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cyan); flex:none; padding-top:var(--sp-1);
}
.tms-hoja-paradas{ list-style:none; display:flex; flex-direction:column; gap:var(--sp-2) }
.tms-hoja-paradas li{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid transparent;
}
.tms-hoja-ahora{ border-color:var(--gold) !important }
.tms-hoja-n{
  inline-size:26px; block-size:26px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-weight:700; font-size:var(--fs-sm);
  background:var(--line); color:var(--muted);
}
.tms-hoja-ahora .tms-hoja-n{ background:var(--gold); color:var(--sobre-oro) }
.tms-hoja-cli{ flex:1; min-inline-size:0; font-size:var(--fs-md); font-weight:600 }
.tms-hoja-cli em{ display:block; font-style:normal; font-weight:400; font-size:var(--fs-sm); color:var(--subtle) }
.tms-hoja-est{
  flex:none; font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; border-radius:var(--r-pill);
  padding:2px var(--sp-2);
}
.tms-hoja-est.ok{ background:rgba(52,211,153,.14); color:var(--ok) }
.tms-hoja-est.yendo{ background:rgba(230,207,139,.16); color:var(--gold) }
.tms-hoja-pie{
  display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:var(--sp-3);
  font-size:var(--fs-sm); color:var(--subtle);
}
.tms-hoja-pie b{ color:var(--ink); font-size:var(--fs-lg); font-family:var(--tit) }
.tms-pie-obj{
  font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--subtle);
}

/* ---------- el problema ---------- */
.tms-tres{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); margin-top:var(--sp-6) }
.tms-problema h3{ font-size:var(--fs-xl); margin-bottom:var(--sp-2) }
.tms-problema p{ color:var(--muted); font-size:var(--fs-md) }

/* =====================================================================
 * EL DEMO JUGABLE
 * ===================================================================== */
.tms-mesa{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--sp-5); margin-top:var(--sp-6); align-items:start;
}
.tms-col-mapa, .tms-col-info{ display:flex; flex-direction:column; gap:var(--sp-4); min-inline-size:0 }
.tms-panel{ padding:var(--sp-4) }
.tms-panel-cabeza{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-3) }
.tms-chip{
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--subtle);
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:2px var(--sp-3);
}
.tms-chip.mejor{ color:var(--ok); border-color:var(--ok) }

/* el esquema de zonas */
.tms-mapa{ inline-size:100%; block-size:auto; display:block; border-radius:var(--r-sm); background:var(--navy) }
.tms-zona{ fill:rgba(255,255,255,.035); stroke:var(--line); stroke-width:1 }
.tms-zona-txt{
  fill:var(--subtle); font-family:var(--baj); font-size:var(--fs-sm);
  font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.tms-linea{ fill:none; stroke:var(--gold); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round }
.tms-linea-vieja{ stroke:var(--line-2); stroke-width:2; stroke-dasharray:5 6 }
.tms-punto{ cursor:pointer }
.tms-punto circle{ fill:var(--panel-2); stroke:var(--line-2); stroke-width:2; transition:fill var(--ease), stroke var(--ease) }
.tms-punto text{ fill:var(--muted); font-family:var(--cuerpo); font-size:var(--fs-sm); font-weight:700; text-anchor:middle }
.tms-punto.cargado circle{ fill:var(--gold); stroke:var(--gold) }
.tms-punto.cargado text{ fill:var(--sobre-oro) }
.tms-punto.hecho circle{ fill:var(--ok); stroke:var(--ok) }
.tms-punto.hecho text{ fill:var(--sobre-ok) }
.tms-punto.fallado circle{ fill:var(--bad); stroke:var(--bad) }
.tms-punto.fallado text{ fill:var(--navy) }
.tms-punto.trabado circle{ stroke:var(--warn); stroke-dasharray:4 3 }
.tms-depo circle{ fill:var(--cyan); stroke:var(--cyan) }
.tms-depo text{ fill:var(--navy) }
/* ⚠ EL BLANCO DE TOQUE, y su lugar en el archivo NO es decorativo.
   Es un circulo invisible de radio 26 que va primero en el <g>, debajo del que
   se ve, para agrandar el area clickeable. Tiene que ganarle en pintura a
   `.tms-punto circle` y a las variantes de estado —todas (0,2,1)— asi que va
   con la misma especificidad pero DESPUES: declarado antes, el punto se
   dibujaba como un disco gigante de 26 de radio y el mapa quedaba ilegible.
   Y `rgba(0,0,0,0)` y no `fill:none`: con `none` el SVG deja pasar el click. */
.tms-punto circle.tms-agarre{ fill:rgba(0,0,0,0); stroke:none }
.tms-rotulo-punto{ fill:var(--subtle); font-family:var(--cuerpo); font-size:var(--fs-xs); text-anchor:middle }
.tms-mapa-pie{ font-size:var(--fs-sm); color:var(--subtle); margin-top:var(--sp-2) }

/* los marcadores */
.tms-marcadores{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3) }
.tms-marcadores > div{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-3); text-align:center;
}
.tms-marca-n{ display:block; font-family:var(--tit); font-size:var(--fs-2xl); font-weight:700; color:var(--gold) }
.tms-marca-t{
  display:block; font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--subtle); margin-top:2px;
}

/* el camión y su capacidad */
.tms-panel-alto{ display:flex; flex-direction:column; gap:var(--sp-4) }
.tms-camion{ display:flex; flex-direction:column; gap:var(--sp-2) }
.tms-camion-txt{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap }
.tms-camion-nom{ font-weight:700; font-size:var(--fs-md) }
.tms-camion-cap{ font-size:var(--fs-sm); color:var(--subtle) }
.tms-camion-cap b{ color:var(--ink) }
.tms-barra{ block-size:10px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-pill); overflow:hidden }
.tms-barra i{ display:block; block-size:100%; inline-size:0; background:var(--gold); transition:inline-size var(--ease), background var(--ease) }
.tms-barra i.lleno{ background:var(--warn) }

/* el aviso: lo que el sistema contesta cuando frena algo */
.tms-aviso{
  display:none; font-size:var(--fs-sm); line-height:1.5;
  border-radius:var(--r-sm); padding:var(--sp-3); border:1px solid;
}
.tms-aviso.hay{ display:block }
.tms-aviso.freno{ background:rgba(248,113,113,.10); border-color:rgba(248,113,113,.5); color:var(--ink) }
.tms-aviso.bien{ background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.45); color:var(--ink) }
.tms-aviso.dato{ background:rgba(95,200,232,.10); border-color:rgba(95,200,232,.45); color:var(--ink) }
.tms-aviso b{ display:block; font-family:var(--tit); margin-bottom:2px }

.tms-rotulo{
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--subtle); margin-bottom:var(--sp-2);
}
.tms-rotulo-2{ margin-top:var(--sp-4) }

/* la lista de entregas del día */
.tms-lista{ list-style:none; display:flex; flex-direction:column; gap:var(--sp-2) }
.tms-item{
  display:flex; align-items:center; gap:var(--sp-3); inline-size:100%; text-align:left;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-2) var(--sp-3); min-block-size:48px; cursor:pointer; color:var(--ink);
  font-family:var(--cuerpo); transition:border-color var(--ease), background var(--ease);
}
.tms-item:hover{ border-color:var(--muted) }
.tms-item.puesto{ border-color:var(--gold); background:rgba(230,207,139,.08) }
.tms-item.trabado{ border-color:var(--warn) }
.tms-item-zona{
  flex:none; inline-size:52px; font-family:var(--baj); font-size:var(--fs-xs);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan);
}
.tms-item-cli{ flex:1; min-inline-size:0; font-size:var(--fs-md); font-weight:600 }
.tms-item-cli em{ display:block; font-style:normal; font-weight:400; font-size:var(--fs-xs); color:var(--subtle) }
.tms-item-m3{ flex:none; font-size:var(--fs-sm); color:var(--muted) }
.tms-item-tilde{ flex:none; inline-size:20px; text-align:center; color:var(--gold); font-weight:700 }

/* el teléfono del chofer, adentro del panel */
.tms-fono{ display:flex; flex-direction:column; gap:var(--sp-2) }
.tms-parada{
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2);
}
.tms-parada.activa{ border-color:var(--gold) }
.tms-parada-cab{ display:flex; align-items:center; gap:var(--sp-2) }
.tms-parada-n{
  inline-size:24px; block-size:24px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:var(--fs-xs); font-weight:700; background:var(--line); color:var(--muted);
}
.tms-parada.activa .tms-parada-n{ background:var(--gold); color:var(--sobre-oro) }
.tms-parada.lista .tms-parada-n{ background:var(--ok); color:var(--sobre-ok) }
.tms-parada.fallo .tms-parada-n{ background:var(--bad); color:var(--navy) }
.tms-parada-cli{ flex:1; min-inline-size:0; font-size:var(--fs-md); font-weight:600 }
.tms-parada-est{
  flex:none; font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--subtle);
}
.tms-parada-est.ok{ color:var(--ok) }
.tms-parada-est.no{ color:var(--bad) }
.tms-parada-obs{ font-size:var(--fs-sm); color:var(--subtle) }
.tms-acc{ display:flex; gap:var(--sp-2); flex-wrap:wrap }
.tms-acc button{
  flex:1 1 auto; min-block-size:44px; border-radius:var(--r-sm); cursor:pointer;
  font-family:var(--cuerpo); font-size:var(--fs-md); font-weight:700;
  border:1px solid var(--line-2); background:var(--panel); color:var(--ink);
  transition:border-color var(--ease), background var(--ease);
}
.tms-acc button:hover{ border-color:var(--muted) }
.tms-acc .tms-si{ background:var(--ok); border-color:var(--ok); color:var(--sobre-ok) }
.tms-acc .tms-no{ background:transparent; border-color:var(--bad); color:var(--bad) }
.tms-acc .tms-foto.tiene{ border-color:var(--gold); color:var(--gold) }
.tms-motivos{ display:flex; flex-direction:column; gap:var(--sp-1) }
.tms-motivos button{ text-align:left; font-size:var(--fs-sm); font-weight:500 }

/* lo que ve el cliente */
.tms-cliente{
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-3); font-size:var(--fs-sm); color:var(--muted);
}
.tms-cli-tit{ color:var(--ink); font-weight:700; margin-bottom:var(--sp-2) }
.tms-cli-pasos{ display:flex; align-items:center; gap:var(--sp-1) }
.tms-cli-paso{ flex:1; text-align:center }
.tms-cli-bola{
  inline-size:26px; block-size:26px; border-radius:50%; margin:0 auto var(--sp-1);
  display:grid; place-items:center; background:var(--line); color:var(--subtle); font-size:var(--fs-sm);
}
.tms-cli-paso.on .tms-cli-bola{ background:var(--gold); color:var(--sobre-oro) }
.tms-cli-paso.fin .tms-cli-bola{ background:var(--ok); color:var(--sobre-ok) }
.tms-cli-rot{ font-size:var(--fs-xs); color:var(--subtle) }
.tms-cli-paso.on .tms-cli-rot, .tms-cli-paso.fin .tms-cli-rot{ color:var(--ink) }
.tms-cli-frase{ margin-top:var(--sp-2); text-align:center; color:var(--ink) }

.tms-botones{ display:flex; gap:var(--sp-2); margin-top:auto; flex-wrap:wrap }
.tms-btn-ppal{
  flex:1 1 200px; background:var(--gold); border-color:var(--gold); color:var(--sobre-oro);
  font-weight:700;
}
.tms-btn-ppal:hover{ background:var(--gold-1); border-color:var(--gold-1) }
.tms-btn-ppal[disabled]{ opacity:.45; cursor:default }
.tms-btn-ppal[disabled]:hover{ background:var(--gold); border-color:var(--gold) }
.tms-btn-reset{ flex:0 0 auto }

/* =====================================================================
 * EL RECORRIDO POR LAS PANTALLAS
 * ===================================================================== */
.tms-tour-cabeza{ display:flex; align-items:center; gap:var(--sp-5); margin:var(--sp-6) 0 var(--sp-4); flex-wrap:wrap }
.tms-modos{ display:inline-flex; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; flex:none }
.tms-modo{
  font-family:var(--cuerpo); font-size:var(--fs-md); font-weight:700;
  padding:var(--sp-2) var(--sp-4); border:0; background:transparent; color:var(--muted);
  cursor:pointer; min-height:44px; transition:background var(--ease), color var(--ease);
}
.tms-modo + .tms-modo{ border-left:1px solid var(--line-2) }
.tms-modo:hover{ color:var(--ink) }
.tms-modo.activo{ background:var(--gold); color:var(--sobre-oro) }

.tms-barras{ display:flex; gap:5px; flex:1 1 220px; min-width:160px }
.tms-barra{ flex:1; height:3px; background:var(--line); border-radius:2px; overflow:hidden; cursor:pointer }
.tms-barra i{ display:block; height:100%; width:0; background:var(--gold) }
.tms-barra.hecha i{ width:100% }
.tms-barra.activa i{ width:100%; transition:width var(--tour-dur,5s) linear }
.tms-barra.activa.quieta i{ transition:none }

.tms-escena{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--panel) }
.tms-marco-barra{ display:flex; align-items:center; gap:var(--sp-1); padding:var(--sp-2) var(--sp-4); background:var(--panel-2); border-bottom:1px solid var(--line) }
.tms-marco-barra i{ width:8px; height:8px; border-radius:50%; background:var(--line-2); flex:none }
.tms-marco-barra span{ font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.1em; color:var(--subtle); margin-left:var(--sp-2) }
/* ⚠ El alto del marco decide si la captura se lee o no. Es el mismo número
   que /deposito, y por la misma medición: con `100vh - 240px` a 860px de
   ventana el marco da 992×620 y una captura de 1440×900 se dibuja al 69%.
   Con el cálculo anterior (`100vh - 560px`) daba 480×300, o sea el 33%: un
   texto de 12px salía a 4px y no se leía nada. Si se agrega o saca algo del
   pie o de la cabecera, este número hay que volver a MEDIRLO. */
.tms-marco{
  aspect-ratio:16/10;   /* el de las capturas: 1440x900 */
  max-height:clamp(300px, calc(100vh - 240px), 720px);
  background:var(--navy); display:grid; place-items:center;
  cursor:zoom-in;
}
.tms-marco img{ width:100%; height:100%; object-fit:contain; object-position:center }

.tms-tour-pie{ display:flex; gap:var(--sp-5); align-items:flex-start; justify-content:space-between; padding-top:var(--sp-4); flex-wrap:wrap }
.tms-tour-txt{ max-width:58ch }
.tms-paso{ font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--subtle); margin-bottom:var(--sp-1) }
.tms-tour-txt h3{ margin-bottom:var(--sp-1) }
.tms-tour-txt p{ color:var(--muted); font-size:var(--fs-md) }
.tms-mandos{ display:flex; gap:var(--sp-2); flex:none }
.tms-btn-mando{
  width:44px; height:44px; border-radius:var(--r-sm); border:1px solid var(--line-2);
  background:var(--panel); color:var(--ink); cursor:pointer; font-size:var(--fs-lg);
  display:grid; place-items:center; transition:border-color var(--ease), background var(--ease);
}
.tms-btn-mando:hover{ border-color:var(--muted); background:var(--panel-2) }
.tms-btn-play{ background:var(--gold); border-color:var(--gold); color:var(--sobre-oro); font-size:var(--fs-sm) }
.tms-btn-play:hover{ background:var(--gold-1); border-color:var(--gold-1) }

.tms-ampliar{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:var(--sp-1);
  background:transparent; border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--muted); cursor:pointer;
  font-family:var(--cuerpo); font-size:var(--fs-sm); font-weight:700;
  padding:2px var(--sp-2); min-height:28px;
  transition:color var(--ease), border-color var(--ease);
}
.tms-ampliar:hover{ color:var(--ink); border-color:var(--muted) }

/* ---------- grilla de pantallas ---------- */
.tms-grilla{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5) }
.tms-cap{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel); overflow:hidden }
/* La miniatura es un <button>, no un <a>: no navega a ningún lado, abre el visor. */
.tms-cap-btn{
  display:block; line-height:0; inline-size:100%;
  padding:0; border:0; background:transparent; cursor:zoom-in;
}
.tms-cap img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center }
.tms-cap figcaption{ padding:var(--sp-3) var(--sp-4) var(--sp-4); font-size:var(--fs-sm); color:var(--muted) }
.tms-cap figcaption strong{ display:block; color:var(--ink); font-family:var(--tit); font-size:var(--fs-lg); margin-bottom:2px }

/* ---------- el visor ----------
 * Es un <dialog> con showModal(): el foco, el Esc y el fondo inerte los hace
 * el navegador, y el ::backdrop también. */
.tms-visor{
  border:0; padding:0; background:transparent;
  max-width:100vw; max-height:100vh; width:100%; height:100%;
  color:var(--ink);
}
.tms-visor::backdrop{ background:rgba(5,8,15,.94) }
.tms-visor-caja{ block-size:100%; display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4) }
/* El `min-height:0` no es decorativo: sin él el hijo flex no se deja achicar
   y la imagen se pasa del alto de la ventana con el pie afuera de pantalla. */
.tms-visor-marco{
  flex:1 1 auto; min-height:0; position:relative;
  background:var(--navy); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden;
}
/* ⚠ Absoluta, no `max-height:100%`: con la imagen en flujo ese porcentaje se
   resuelve contra un alto que el propio contenido define —referencia
   cíclica— y el navegador lo trata como `none`. `scale-down` y no `contain`
   porque la captura mide 1440×900 y en un monitor grande `contain` la
   estiraría y saldría borrosa. */
.tms-visor-marco img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:scale-down }
.tms-visor-pie{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap }
.tms-visor-txt{ font-size:var(--fs-md); color:var(--muted); max-width:72ch }
.tms-visor-txt b{ color:var(--ink); font-family:var(--tit); font-weight:700 }
.tms-visor-mandos{ display:flex; align-items:center; gap:var(--sp-2); flex:none }
.tms-visor-n{ font-family:var(--baj); font-size:var(--fs-sm); letter-spacing:.1em; color:var(--subtle); padding-inline:var(--sp-2) }
/* ⚠ Va ANTES del media query a propósito: declarada después, esta regla
   `display:none` pisaba al `display:block` del media —misma especificidad,
   gana la última— y la pista no aparecía nunca. */
.tms-visor-pista{
  display:none; flex:1 1 100%; order:2;
  font-family:var(--baj); font-size:var(--fs-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--subtle);
}

/* ---------- módulos ---------- */
.tms-modulos{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--sp-6); margin-top:var(--sp-6) }
.tms-modulo{ padding:var(--sp-4) 0; border-top:1px solid var(--line) }
.tms-modulo h3{ font-size:var(--fs-lg) }
.tms-modulo p{ font-size:var(--fs-md); color:var(--muted); margin-top:var(--sp-1) }

/* ---------- pasos ---------- */
.tms-pasos{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); margin-top:var(--sp-6) }
.tms-paso-caja p{ font-size:var(--fs-md); color:var(--muted) }
.tms-paso-cabeza{ display:flex; align-items:baseline; gap:var(--sp-2); border-bottom:2px solid var(--gold); padding-bottom:var(--sp-2); margin-bottom:var(--sp-3) }
.tms-paso-n{ font-family:var(--baj); font-weight:700; font-size:var(--fs-sm); color:var(--gold) }

/* ---------- preguntas ---------- */
.tms-faq{ margin-top:var(--sp-6); max-width:78ch }
.tms-faq details{ border-top:1px solid var(--line); padding:var(--sp-4) 0 }
.tms-faq details:last-child{ border-bottom:1px solid var(--line) }
.tms-faq summary{
  cursor:pointer; font-family:var(--tit); font-weight:600; font-size:var(--fs-lg);
  min-height:44px; display:flex; align-items:center; gap:var(--sp-3);
}
.tms-faq summary::marker{ color:var(--gold) }
.tms-faq p{ color:var(--muted); font-size:var(--fs-md); margin-top:var(--sp-2) }

/* =====================================================================
 * PANTALLAS ANGOSTAS
 * ===================================================================== */
@media (max-width:1000px){
  .tms-hero-grid{ grid-template-columns:1fr; gap:var(--sp-6) }
  .tms-mesa{ grid-template-columns:1fr }
  .tms-tres{ grid-template-columns:1fr; gap:var(--sp-5) }
  .tms-pasos{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:760px){
  /* EL MAPA PASA A SER UN DIBUJO. Medido a 390px: el esquema entra en 309px de
     ancho, o sea al 51%, y un punto de 13 de radio queda en 13px de diametro.
     Agrandarlo hasta los 44px que pide el manual haria que los puntos se pisen
     entre si. Asi que en el telefono se toca la LISTA —que mide 48px de alto— y
     el mapa acompana. No se pierde nada: la lista hace todo lo que hace el mapa. */
  .tms-punto{ pointer-events:none; cursor:default }
  .tms-modulos{ grid-template-columns:1fr }
  .tms-grilla{ grid-template-columns:1fr }
  .tms-pasos{ grid-template-columns:1fr }
  .tms-bajada{ font-size:var(--fs-lg) }
  .tms-marcadores{ grid-template-columns:repeat(3,1fr); gap:var(--sp-2) }
  .tms-marca-n{ font-size:var(--fs-xl) }
  .tms-tour-pie{ gap:var(--sp-3) }
}

/* ---------- el visor en celular ----------
 * Acá «ampliar» no alcanza: una captura apaisada de 1440×900 adentro de una
 * pantalla de 390 de ancho entra al 26% —medido—, casi lo mismo que en línea.
 * Así que la imagen va a TAMAÑO REAL y la caja se arrastra: se lee un dato de
 * verdad, al precio de moverse por la pantalla, que es como se mira una
 * captura en un teléfono. */
@media (max-width:700px){
  /* «Ampliar» mide 28px de alto, que en escritorio con un mouse esta bien pero
     en un telefono queda por debajo de los 44 que pide el manual. Se le da el
     alto completo: la barra del marco crece unos pixeles y se puede tocar. */
  .tms-ampliar{ min-height:44px; padding-inline:var(--sp-3) }
  .tms-visor-caja{ padding:var(--sp-2) }
  .tms-visor-txt span{ display:none }
  .tms-visor-marco{ overflow:auto; -webkit-overflow-scrolling:touch }
  .tms-visor-marco img{
    position:static; inline-size:auto; block-size:auto;
    max-inline-size:none; max-block-size:none; object-fit:none;
  }
  .tms-visor-pista{ display:block }
}

@media (prefers-reduced-motion: reduce){
  .tms-barra.activa i{ transition:none }
  .tms-barra i{ width:100% }
}