/* ══════════════════════════════════════════════════════════════════════════════
   clotitec-mapa.css · Kit de mapas de Clotitec Design OS · v0.1.0
   ══════════════════════════════════════════════════════════════════════════════
   Estilos de lo que flota sobre el mapa. Va DESPUÉS de css\clotitec.css y de
   componentes\g3\ui-golf360.css. No contiene ningún color, radio, sombra,
   duración ni curva propios: todo sale de variables --ct-* (o de las --g3-*
   del tema activo). Lo que falta está apuntado en mapa\FALTAN-TOKENS.md.

   Índice
     1. Contenedor y variables locales
     2. Vidrio: UNA receta
     3. Lienzo y controles de MapLibre
     4. Marcadores por categoría
     5. Rótulos de cristal
     6. Ficha de lugar (hoja inferior)
     7. Barra de efectos
     8. Movimiento reducido
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Contenedor ──────────────────────────────────────────────────────────
   El elemento que se pasa a ClotitecMapa.crear(). Necesita un alto: el kit no
   se lo pone. */
.ct-mapa {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ct-fondo-suave);
  color: var(--ct-texto);
  font-family: var(--ct-fuente-texto);
  -webkit-font-smoothing: antialiased;

  /* Tinta sobre el vidrio. El vidrio es siempre claro (es una sola receta),
     así que lo que va encima es siempre tinta oscura, también con el tema
     oscuro activo: allí los roles de texto pasan a claro y no servirían. */
  --ct-mapa-sobre-vidrio: var(--ct-texto);
  --ct-mapa-sobre-vidrio-suave: var(--ct-texto-suave);
  /* el verde de texto de Golf360 (--ct-primario-texto) da 3,94:1 sobre el
     vidrio; su relleno, 5,02:1. El relleno pasa AA en los cuatro clientes. */
  --ct-mapa-vidrio-acento: var(--ct-primario-relleno);
  --ct-mapa-vidrio-linea: var(--ct-linea);
  --ct-mapa-vidrio-foco: var(--ct-foco);

  /* Color de categoría por defecto; cada marcador, rótulo y ficha lo redefine. */
  --ct-mapa-cat: var(--ct-primario-relleno);

  /* El kit .g3- trae dos ganchos para el fondo de barras, chips y pestañas:
     aquí se les da la receta de vidrio del mapa. Fuera de un .ct-mapa el kit
     sigue como siempre (panel al 94 % y sin desenfoque). */
  --g3-panel: var(--ct-mapa-vidrio-fondo);
  --g3-cristal-filtro: var(--ct-mapa-vidrio-desenfoque);
}
[data-ct-tema="oscuro"] .ct-mapa,
.ct-mapa[data-ct-tema="oscuro"] {
  --ct-mapa-sobre-vidrio: var(--ct-tinta-intensa);
  --ct-mapa-sobre-vidrio-suave: var(--ct-tinta-intensa-2);
  --ct-mapa-vidrio-linea: var(--ct-tinta-4);
  --ct-mapa-vidrio-foco: var(--ct-primario-relleno);
}
.ct-mapa *,
.ct-mapa *::before,
.ct-mapa *::after { box-sizing: border-box; }

.ct-mapa__espera {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: var(--ct-tipo-cuerpo-tamano);
  color: var(--ct-texto-suave);
  pointer-events: none;
}

/* ── 2. Vidrio: UNA receta ──────────────────────────────────────────────────
   La de los controles que flotan sobre el mapa (tokens\mapa.json → vidrio,
   que es la .floating-pill del Atlas Map Kit). Se escribe una sola vez y la
   comparten el rótulo, los controles de MapLibre y cualquier pieza con
   .ct-mapa-vidrio. Sin backdrop-filter sigue leyéndose: el fondo ya es opaco
   al 88-92 %.
   La ficha NO es de vidrio: es una tarjeta opaca del kit .g3-. Sus etiquetas
   de 12 px están medidas sobre blanco y sobre el vidrio la de Golf360 baja
   de 4,89:1 a 3,94:1. */
.ct-mapa-vidrio,
.ct-mapa-rotulo,
.ct-mapa .maplibregl-ctrl-group,
.ct-mapa .maplibregl-ctrl-attrib {
  background: var(--ct-mapa-vidrio-fondo);
  -webkit-backdrop-filter: var(--ct-mapa-vidrio-desenfoque);
  backdrop-filter: var(--ct-mapa-vidrio-desenfoque);
  border: var(--ct-mapa-vidrio-borde);
  box-shadow: var(--ct-mapa-vidrio-sombra);
  color: var(--ct-mapa-sobre-vidrio);
}
.ct-mapa-vidrio,
.ct-mapa-rotulo { border-radius: var(--ct-mapa-vidrio-radio); }

/* Los chips y botones del kit .g3- dentro del mapa reciben el desenfoque
   también en Safari (el kit solo escribe la propiedad sin prefijo). */
.ct-mapa .g3-chip,
.ct-mapa .g3-btn-icono,
.ct-mapa .g3-pestanas { -webkit-backdrop-filter: var(--ct-mapa-vidrio-desenfoque); }

/* ── 3. Lienzo y controles de MapLibre ──────────────────────────────────── */
.ct-mapa__lienzo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Con el relieve activo, lo que MapLibre deje sin pintar (teselas lejanas que
   aún no han llegado, o un navegador sin la nivelación del mar de
   clotitec-mapa.js) enseña el color del horizonte y no el fondo de la página. */
.ct-mapa[data-ct-mapa-relieve] .ct-mapa__lienzo { background: var(--ct-mapa-cielo-horizonte); }
.ct-mapa .maplibregl-map { font-family: var(--ct-fuente-texto); }
/* Foco de lo que va directamente sobre el mapa (lienzo y marcadores): anillo
   doble, tinta por fuera y superficie por dentro. El verde de --ct-foco sobre
   el mar teñido da 1,97:1 y no se ve; la tinta da 9,08:1. */
.ct-mapa .maplibregl-canvas:focus-visible {
  outline: var(--ct-foco-grosor) solid var(--ct-texto);
  outline-offset: calc(var(--ct-foco-grosor) * -1);
}
.ct-mapa__lienzo:has(.maplibregl-canvas:focus-visible)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 3px solid var(--ct-texto);
  box-shadow: inset 0 0 0 2px var(--ct-superficie);
  pointer-events: none;
}
.ct-mapa .maplibregl-ctrl-group {
  border-radius: var(--ct-radio-boton);
  overflow: hidden;
}
.ct-mapa .maplibregl-ctrl-group:not(:empty) { box-shadow: var(--ct-mapa-vidrio-sombra); }
.ct-mapa .maplibregl-ctrl-group button {
  width: var(--ct-toque-minimo);
  height: var(--ct-toque-minimo);
}
.ct-mapa .maplibregl-ctrl-group button + button { border-top: 1px solid var(--ct-mapa-vidrio-linea); }
.ct-mapa .maplibregl-ctrl-group button:focus-visible {
  outline: var(--ct-foco-grosor) solid var(--ct-mapa-vidrio-foco);
  outline-offset: calc(var(--ct-foco-grosor) * -1);
  box-shadow: none;
}
.ct-mapa .maplibregl-ctrl-attrib {
  font-size: var(--ct-tipo-interfaz-etiqueta);
  line-height: 1.5;
}
.ct-mapa .maplibregl-ctrl-attrib a { color: var(--ct-mapa-sobre-vidrio-suave); }
.ct-mapa .maplibregl-ctrl-attrib a:focus-visible {
  outline: var(--ct-foco-grosor) solid var(--ct-mapa-vidrio-foco);
  outline-offset: var(--ct-foco-separacion);
  border-radius: var(--ct-radio-fila);
}
.ct-mapa .maplibregl-ctrl-attrib.maplibregl-compact { border-radius: var(--ct-radio-fila); }
/* el botón de créditos mide 24 px: se le amplía el área de toque hasta 44 */
.ct-mapa .maplibregl-ctrl-attrib-button::after {
  content: "";
  position: absolute;
  inset: -10px;
}
.ct-mapa .maplibregl-ctrl-attrib-button:focus-visible {
  outline: var(--ct-foco-grosor) solid var(--ct-mapa-vidrio-foco);
  outline-offset: var(--ct-foco-separacion);
  box-shadow: none;
}
/* En estrecho la ficha es una hoja inferior: los controles suben con ella
   para que los créditos del mapa no queden tapados. */
.ct-mapa[data-ct-mapa-ancho="estrecho"] .maplibregl-ctrl-bottom-right,
.ct-mapa[data-ct-mapa-ancho="estrecho"] .maplibregl-ctrl-bottom-left {
  transform: translateY(calc(-1 * var(--ct-mapa-ficha-visible, 0px)));
  transition: transform var(--ct-dur-hoja) var(--ct-curva-entrada), visibility 0s;
}
/* Con la hoja a altura llena no queda mapa que manejar y los controles
   acabarían debajo de la barra: se retiran (también del orden de tabulación)
   y vuelven al bajar la hoja. */
.ct-mapa[data-ct-mapa-ancho="estrecho"][data-ct-mapa-ficha="llena"] .maplibregl-ctrl-bottom-right,
.ct-mapa[data-ct-mapa-ancho="estrecho"][data-ct-mapa-ficha="llena"] .maplibregl-ctrl-bottom-left { visibility: hidden; }
/* En ancho la ficha ocupa la esquina inferior izquierda: los créditos se
   parten en más líneas a su derecha en vez de pasar por debajo y leerse cortados. */
.ct-mapa[data-ct-mapa-ancho="ancho"][data-ct-mapa-ficha] .maplibregl-ctrl-bottom-right {
  left: calc(min(380px, 100% - 2 * var(--ct-espacio-2)) + 2 * var(--ct-espacio-2));
}

/* ── 4. Marcadores por categoría ────────────────────────────────────────────
   Un <button> de 44 px de toque con un disco de color dentro.
   OJO: nunca se anima ni se transforma el propio botón. MapLibre lo coloca
   con transform y cualquier transformación nuestra lo descolocaría: por eso
   crece el disco interior. */
.ct-mapa-marcador {
  display: grid;
  place-items: center;
  width: var(--ct-toque-minimo);
  height: var(--ct-toque-minimo);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ct-mapa-marcador[hidden] { display: none; }
.ct-mapa-marcador__disco {
  display: grid;
  place-items: center;
  width: var(--ct-toque-chip);
  height: var(--ct-toque-chip);
  border: 3px solid var(--ct-sobre-primario);
  border-radius: 50%;
  background: var(--ct-mapa-cat);
  color: var(--ct-sobre-primario);
  box-shadow: var(--ct-sombra-media);
  transition: transform var(--ct-dur-base) var(--ct-curva-estado);
}
.ct-mapa-icono {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .ct-mapa-marcador:hover .ct-mapa-marcador__disco { transform: scale(1.1); }
}
.ct-mapa-marcador:active .ct-mapa-marcador__disco { transform: scale(var(--ct-pulsacion-escala)); }
/* Dos marcadores muy juntos se pisan (el kit no agrupa): el que está bajo el
   cursor, el que tiene el foco y el seleccionado pasan delante. */
.ct-mapa-marcador:focus-visible,
.ct-mapa-marcador[aria-pressed="true"] { z-index: 2; }
@media (hover: hover) {
  .ct-mapa-marcador:hover { z-index: 3; }
}
.ct-mapa-marcador[aria-pressed="true"] .ct-mapa-marcador__disco {
  transform: scale(1.2);
  box-shadow: 0 0 0 3px var(--ct-mapa-cat), var(--ct-sombra-elevada);
}
.ct-mapa-marcador:focus-visible {
  outline: var(--ct-foco-grosor) solid var(--ct-texto);
  outline-offset: var(--ct-foco-separacion);
  box-shadow: 0 0 0 2px var(--ct-superficie);
}

/* ── 5. Rótulos de cristal ──────────────────────────────────────────────────
   Portado de mapa-marca\kit\rotulos-cristal.css. Allí había dos vidrios
   (claro y ahumado); aquí uno, el del bloque 2. */
.ct-mapa-rotulo {
  display: flex;
  align-items: center;
  gap: var(--ct-espacio-interfaz-2);
  max-width: 210px;
  padding: var(--ct-espacio-interfaz-2) var(--ct-espacio-interfaz-4) var(--ct-espacio-interfaz-2) var(--ct-espacio-interfaz-3);
  white-space: nowrap;
  font-family: var(--ct-fuente-texto);
  font-size: var(--ct-tipo-interfaz-nota);
  font-weight: var(--ct-peso-texto-medio);
  line-height: 1.25;
  cursor: pointer;
  transition: opacity var(--ct-dur-base) var(--ct-curva-lineal);
  animation: ct-mapa-rotulo-entra var(--ct-dur-aviso) var(--ct-curva-entrada) backwards;
  animation-delay: calc(var(--ct-dur-escalon) * var(--ct-mapa-orden, 0));
}
/* área de toque hasta 44 px de alto sin engordar la pastilla */
.ct-mapa-rotulo::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--ct-espacio-interfaz-3)) 0;
}
@media (hover: hover) {
  .ct-mapa-rotulo:hover { box-shadow: var(--ct-sombra-media); }
}
.ct-mapa-rotulo__punto {
  flex: 0 0 auto;
  width: var(--ct-espacio-interfaz-3);
  height: var(--ct-espacio-interfaz-3);
  border-radius: 50%;
  background: var(--ct-mapa-cat);
  box-shadow: 0 0 0 2px var(--ct-sobre-primario);
}
.ct-mapa-rotulo__texto {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* dato secundario (altitud, distancia…): filete, negrita y cifras tabulares */
.ct-mapa-rotulo__dato {
  flex: 0 0 auto;
  margin-left: 1px;
  padding-left: var(--ct-espacio-interfaz-3);
  border-left: 1px solid var(--ct-mapa-vidrio-linea);
  font-weight: var(--ct-peso-texto-fuerte);
  font-variant-numeric: tabular-nums;
  color: var(--ct-mapa-vidrio-acento);
}
/* !important a conciencia: MapLibre escribe opacity en el estilo EN LÍNEA de
   sus marcadores (los atenúa cuando el relieve los tapa) y sin esto el rótulo
   descartado se seguiría viendo encima de los demás. */
.ct-mapa-rotulo--oculto {
  opacity: 0 !important;
  pointer-events: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* NUNCA animar transform aquí: es la propiedad con la que MapLibre coloca el
   marcador. Si se anima, todos los rótulos leen la misma posición y el reparto
   solo deja uno. La entrada es solo de opacidad. */
@keyframes ct-mapa-rotulo-entra { from { opacity: 0; } }
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-rotulo { max-width: 170px; }

/* ── 6. Ficha de lugar ──────────────────────────────────────────────────────
   Ancho: tarjeta flotante abajo a la izquierda.
   Estrecho (el contenedor mide 720 px o menos): hoja inferior de tres alturas,
   portada de cumbres-ar\kit\fragmentos\tabbar.css (150 px, 52 % y 86 %).
   El aspecto de la tarjeta es el de .g3-tarjeta; aquí solo va la posición. */
.ct-mapa-ficha {
  position: absolute;
  z-index: var(--ct-z-barra);
  left: var(--ct-espacio-2);
  bottom: var(--ct-espacio-2);
  display: flex;
  width: min(380px, calc(100% - 2 * var(--ct-espacio-2)));
  max-height: calc(100% - var(--ct-mapa-barra-alto, var(--ct-espacio-12)) - 2 * var(--ct-espacio-2));
}
.ct-mapa-ficha[hidden] { display: none; }
.ct-mapa-ficha__tarjeta {
  width: 100%;
  max-height: 100%;
}
.ct-mapa-ficha__categoria {
  display: flex;
  align-items: center;
  gap: var(--ct-espacio-interfaz-3);
  padding-right: var(--ct-toque-minimo);
}
.ct-mapa-ficha__titulo {
  padding-right: var(--ct-espacio-interfaz-6);
  text-wrap: balance;
}
.ct-mapa-ficha__titulo:focus { outline: none; }   /* recibe el foco por programa; no es un control */
/* El tema .g3- de Clotitec da relieve (sombra de texto) a todo .g3-titulo y el
   kit lo pinta en peso 800. La ficha es una tarjeta blanca: DESIGN.md §6 prohíbe
   el relieve sobre blanco o arena y §4 fija el peso del titular en 600-700.
   Tres clases para ganar a [data-g3-tema] .g3-titulo sin depender del orden. */
.ct-mapa .ct-mapa-ficha .g3-titulo {
  text-shadow: none;
  font-weight: var(--ct-peso-titular);
}
.ct-mapa-ficha__asa { display: none; }
.ct-mapa-ficha .g3-btn { text-wrap: balance; }

/* Botón de cierre. El kit .g3- lo dibuja de 32 px y alarga el toque con un
   ::before invisible, de modo que la caja del botón medía 32. Aquí la caja
   mide ya el área de toque (--ct-toque-minimo, 44 px, cuadrada: se pulsa en
   toda ella) y el círculo visible lo dibuja el ::before, centrado donde
   estaba (la caja queda a 4 px del borde, como el toque que alargaba el kit).
   El círculo es la caja menos 4 px por lado: 36 px, igual que --ct-toque-chip,
   y crece con la caja en modo quiosco. El anillo de foco rodea al círculo, no
   a la caja. La caja no se sale de la tarjeta, así que a 360 px no descuadra
   nada: el rótulo de categoría ya reserva 44 px a la derecha. */
.ct-mapa .ct-mapa-ficha .g3-tarjeta > .g3-x {
  top: var(--ct-espacio-interfaz-1);
  right: var(--ct-espacio-interfaz-1);
  width: max(var(--ct-toque-minimo), var(--g3-toque, 0px));
  height: max(var(--ct-toque-minimo), var(--g3-toque, 0px));
  border-radius: 0;
  background: none;
  isolation: isolate;
}
.ct-mapa .ct-mapa-ficha .g3-tarjeta > .g3-x::before {
  inset: var(--ct-espacio-interfaz-1);
  z-index: -1;
  border-radius: 50%;
  background: var(--g3-tinte);
}
.ct-mapa .ct-mapa-ficha .g3-tarjeta > .g3-x:focus-visible { outline: none; }
.ct-mapa .ct-mapa-ficha .g3-tarjeta > .g3-x:focus-visible::before {
  outline: var(--ct-foco-grosor) solid var(--g3-foco, var(--ct-foco));
  outline-offset: var(--ct-foco-separacion);
}

/* El alto es el del contenido con tope del 86 % (lo mide el JS y lo deja en
   --ct-mapa-ficha-alto). Cuánto asoma en cada altura (150 px, 52 % o toda)
   también lo publica el JS: --ct-mapa-ficha-oculta es lo que queda bajo el borde. */
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-ficha {
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: var(--ct-mapa-ficha-alto, 86%);
  max-height: 86%;
  transform: translateY(var(--ct-mapa-ficha-oculta, 0px));
  transition: transform var(--ct-dur-hoja) var(--ct-curva-entrada);
}
/* solo mientras el JS mide el alto natural del contenido */
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-ficha[data-midiendo] { height: auto; max-height: none; }
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-ficha[data-midiendo] .ct-mapa-ficha__tarjeta {
  height: auto;
  max-height: none;
  padding-bottom: calc(var(--ct-espacio-interfaz-6) + env(safe-area-inset-bottom, 0px));
}
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-ficha__tarjeta {
  height: 100%;
  border-radius: var(--ct-radio-hoja) var(--ct-radio-hoja) 0 0;
  padding-top: calc(var(--ct-espacio-interfaz-6) + var(--ct-espacio-interfaz-4));
  /* la parte de la hoja que queda bajo el borde no debe esconder contenido */
  padding-bottom: calc(var(--ct-espacio-interfaz-6) + var(--ct-mapa-ficha-oculta, 0px) + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
}
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-ficha__asa {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ct-toque-minimo);
  padding: 0;
  border: 0;
  border-radius: var(--ct-radio-hoja) var(--ct-radio-hoja) 0 0;
  background: none;
  cursor: grab;
  touch-action: none;
}
.ct-mapa-ficha__asa::before {
  content: "";
  display: block;
  width: 42px;
  height: 5px;
  margin: var(--ct-espacio-interfaz-4) auto 0;
  border-radius: var(--ct-radio-pildora);
  background: var(--ct-texto-tenue);
}
.ct-mapa-ficha__asa:focus-visible {
  outline: var(--ct-foco-grosor) solid var(--ct-mapa-vidrio-foco);
  outline-offset: calc(var(--ct-foco-grosor) * -1);
}

/* ── 7. Barra de efectos ────────────────────────────────────────────────────
   Piezas para montar la barra de una demo o de una app. Los chips, botones y
   menús son los del kit .g3-; aquí va solo el armazón. La barra no captura
   toques en los huecos: el gesto pasa al mapa. */
.ct-mapa-barra {
  position: absolute;
  z-index: var(--ct-z-barra);
  top: calc(env(safe-area-inset-top, 0px) + var(--ct-espacio-interfaz-4));
  left: var(--ct-espacio-interfaz-4);
  right: var(--ct-espacio-interfaz-4);
  display: flex;
  flex-direction: column;
  gap: var(--ct-espacio-interfaz-3);
  pointer-events: none;
}
.ct-mapa-barra__fila {
  display: flex;
  align-items: center;
  gap: var(--ct-espacio-interfaz-3);
}
.ct-mapa-barra__fila > *,
.ct-mapa-tira > * { pointer-events: auto; }
.ct-mapa-barra__hueco { flex: 1 1 auto; }

.ct-mapa-marca {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: var(--ct-toque-minimo);
  padding: 0 var(--ct-espacio-interfaz-5);
  text-decoration: none;
}
.ct-mapa-marca[hidden] { display: none; }
/* el anillo cae fuera de la píldora, sobre el mapa: va en tinta, como el de los marcadores */
.ct-mapa-marca:focus-visible {
  outline: var(--ct-foco-grosor) solid var(--ct-texto);
  outline-offset: var(--ct-foco-separacion);
}
.ct-mapa-marca img {
  display: block;
  width: auto;
  height: 24px;   /* mínimo del logotipo: 24 px (DESIGN.md §10) */
}
.ct-mapa-titulo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--ct-toque-minimo);
  padding: 0 var(--ct-espacio-interfaz-5);
}
.ct-mapa-titulo h1 {
  margin: 0;
  font-family: var(--ct-fuente-titular);
  font-size: var(--ct-tipo-interfaz-linea);
  font-weight: var(--ct-peso-titular);
  line-height: 1.1;
  color: var(--ct-mapa-sobre-vidrio);
}
/* En estrecho no caben el logotipo entero y el título: la marca pasa a su
   isotipo (la página lo ofrece con <picture>; mínimo 16 px, DESIGN.md §10) y
   el título se queda en su nombre corto, para que siempre se lea qué lugar es.
   Lo que se pliega sigue ahí para el lector de pantalla. */
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-marca { padding: 0 var(--ct-espacio-interfaz-4); }
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-titulo {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 var(--ct-espacio-interfaz-4);
}
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-titulo h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-titulo small,
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-titulo__resto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ct-mapa-titulo small {
  font-size: var(--ct-tipo-interfaz-etiqueta);
  font-weight: var(--ct-peso-texto-fuerte);
  letter-spacing: var(--ct-tipo-interfaz-tracking-etiqueta);
  text-transform: uppercase;
  color: var(--ct-mapa-sobre-vidrio-suave);
}

/* tira de chips: en ancho se parte en líneas; en estrecho se desplaza de lado
   dentro de sí misma (la página nunca se desplaza en horizontal) */
.ct-mapa-tira {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ct-espacio-interfaz-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct-mapa-tira[hidden],
.ct-mapa-tira > [hidden] { display: none; }
.ct-mapa-tira__filete {
  flex: 0 0 auto;
  width: 1px;
  height: var(--ct-espacio-interfaz-6);
  background: var(--ct-mapa-vidrio-linea);
}
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-tira {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: calc(-1 * var(--ct-espacio-interfaz-1)) calc(-1 * var(--ct-espacio-interfaz-4));
  padding: var(--ct-espacio-interfaz-1) var(--ct-espacio-interfaz-4);
  pointer-events: auto;
}
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-tira::-webkit-scrollbar { display: none; }
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-tira > * { flex: 0 0 auto; }
.ct-mapa-punto {
  flex: 0 0 auto;
  width: var(--ct-espacio-interfaz-3);
  height: var(--ct-espacio-interfaz-3);
  border-radius: 50%;
  background: var(--ct-mapa-cat);
  box-shadow: 0 0 0 2px var(--ct-sobre-primario);
}

/* selector de cliente: un <select> nativo dentro de una píldora de vidrio */
.ct-mapa-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ct-espacio-interfaz-3);
  flex: 0 1 auto;
  min-width: 0;
  min-height: var(--ct-toque-minimo);
  padding: 0 var(--ct-espacio-interfaz-4);
  --ct-mapa-cat: var(--ct-primario-relleno);
}
.ct-mapa-selector select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: var(--ct-toque-minimo);
  padding: 0 var(--ct-espacio-interfaz-6) 0 0;
  border: 0;
  background: none;
  font-family: var(--ct-fuente-texto);
  font-size: var(--ct-tipo-cuerpo-tamano);   /* 16 px: evita el zoom de iOS al enfocar */
  font-weight: var(--ct-peso-texto-fuerte);
  color: var(--ct-mapa-sobre-vidrio);
  cursor: pointer;
}
.ct-mapa-selector select:focus { outline: none; }
.ct-mapa-selector:focus-within {
  outline: var(--ct-foco-grosor) solid var(--ct-texto);   /* cae sobre el mapa: tinta, no el verde de --ct-foco */
  outline-offset: var(--ct-foco-separacion);
}
.ct-mapa-selector .ct-mapa-icono {
  position: absolute;
  right: var(--ct-espacio-interfaz-4);
  pointer-events: none;
  color: var(--ct-mapa-sobre-vidrio-suave);
}
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-selector {
  flex: 0 0 auto;
  padding: 0 var(--ct-espacio-interfaz-3);
}
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-selector .ct-mapa-icono { right: var(--ct-espacio-interfaz-3); }

/* mando del vuelo: sustituye a la tira de efectos mientras la cámara vuela */
.ct-mapa-vuelo {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ct-espacio-interfaz-3);
  align-self: flex-start;
  width: min(100%, 30rem);
  padding: var(--ct-espacio-interfaz-3) var(--ct-espacio-interfaz-3) var(--ct-espacio-interfaz-3) var(--ct-espacio-interfaz-5);
  overflow: hidden;
  pointer-events: auto;
}
.ct-mapa-vuelo[hidden] { display: none; }
.ct-mapa-vuelo > .g3-btn { flex: 0 0 auto; }
/* Un mando con tres botones (pausar, continuar y detener) necesita más sitio
   que el de dos: más ancho, y en estrecho el texto ocupa su propia fila. Solo
   afecta a los mandos que tengan un tercer botón; el de dos queda como estaba. */
.ct-mapa-vuelo:has(> .g3-btn:nth-of-type(3)) { width: min(100%, 36rem); }
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-vuelo:has(> .g3-btn:nth-of-type(3)) { flex-wrap: wrap; }
.ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-vuelo:has(> .g3-btn:nth-of-type(3)) .ct-mapa-vuelo__texto { flex: 1 1 100%; }
.ct-mapa-vuelo__texto {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--ct-tipo-interfaz-cuerpo);
  line-height: 1.3;
  color: var(--ct-mapa-sobre-vidrio-suave);
}
.ct-mapa-vuelo__texto b {
  display: block;
  font-weight: var(--ct-peso-texto-fuerte);
  color: var(--ct-mapa-sobre-vidrio);
}
/* barra de continuación automática: dura lo que la parada
   (--ct-mapa-camara-parada-automatica, en milisegundos) */
.ct-mapa-vuelo__avance {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ct-primario);
  transform: scaleX(0);
  transform-origin: left center;
}
.ct-mapa-vuelo__avance.ct-mapa-vuelo__avance--corre {
  animation: ct-mapa-avance calc(var(--ct-mapa-camara-parada-automatica) * 1ms) var(--ct-curva-lineal) forwards;
}
/* vuelo en pausa: la barra se queda donde está y sigue desde ahí al reanudar */
.ct-mapa-vuelo__avance.ct-mapa-vuelo__avance--pausa { animation-play-state: paused; }
@keyframes ct-mapa-avance { to { transform: scaleX(1); } }

/* ── 8. Movimiento reducido ─────────────────────────────────────────────────
   La cámara ya salta en vez de volar (lo decide el JS). Aquí se apagan las
   transiciones y las entradas de lo que flota. */
@media (prefers-reduced-motion: reduce) {
  .ct-mapa-rotulo,
  .ct-mapa-vuelo__avance.ct-mapa-vuelo__avance--corre { animation: none; }
  .ct-mapa-rotulo,
  .ct-mapa-marcador__disco,
  .ct-mapa[data-ct-mapa-ancho="estrecho"] .ct-mapa-ficha,
  .ct-mapa[data-ct-mapa-ancho="estrecho"] .maplibregl-ctrl-bottom-right,
  .ct-mapa[data-ct-mapa-ancho="estrecho"] .maplibregl-ctrl-bottom-left { transition: none; }
}