/* ==========================================================================
   URBI — Portal inmobiliario
   Hoja de estilos única. Orden: variables, base, cabecera, filtros,
   mapa, marcadores, tarjeta emergente, responsivo.
   ========================================================================== */

/* ------------------------------ 1. Variables ---------------------------- */
:root {
  --tinta:      #0d2a5c;   /* azul muy oscuro, texto y trazos */
  --papel:      #f6f3ee;   /* fondo cálido claro */
  --blanco:     #ffffff;
  --linea:      #d9d3c8;
  --gris:       #6b6459;
  /* Solo bordes, fondos y adornos. Como color de texto no alcanza el
     contraste mínimo: para texto secundario use --gris.                  */
  --gris-claro: #9a9287;
  --acento:     #f5b301;   /* amarillo de señalización: solo interacción */
  --acento-osc: #a87700;

  --alto-cabecera: 118px;
  --radio: 3px;

  --f-display: 'Barlow Condensed', system-ui, sans-serif;
  --f-texto:   'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

/* ------------------------------- 2. Base -------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--f-texto);
  color: var(--tinta);
  background: var(--papel);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tinta); }
a:hover { color: var(--acento-osc); }

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* ----------------------------- 3. Cabecera ------------------------------ */
.cabecera {
  flex: 0 0 auto;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}

.cabecera-fila {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 20px 10px;
}

.marca {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.bajada {
  font-size: 13px;
  color: var(--gris);
}

.conteo {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--gris);
  white-space: nowrap;
}

/* Acceso a la página de campo */
.enlace-campo {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid var(--acento);
}
.enlace-campo:hover { color: var(--acento-osc); }

/* ------------------------------ 4. Filtros ------------------------------ */
.filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 12px;
}

.filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}

.filtro:hover { background: var(--papel); }

/* Activo: el punto toma el color del estado (se fija desde JS) */
.filtro[aria-pressed="true"] {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--blanco);
}

.filtro[aria-pressed="false"] { color: var(--gris); }

.filtro-punto {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--punto, var(--gris-claro));
  border: 1px solid rgba(0, 0, 0, .28);
  flex: 0 0 9px;
}

/* Ilustración del estado dentro del filtro: la misma que en el mapa, para
   que la leyenda y los marcadores compartan simbología. */
.filtro-icono {
  display: block;
  width: 26px; height: 26px;
  flex: 0 0 26px;
  margin: -4px 0;
  object-fit: contain;
}
.filtro-num {
  font-family: var(--f-mono);
  font-size: 11px;
  opacity: .75;
}

.filtro-todos {
  border-style: dashed;
  font-weight: 600;
}

/* ---------------------------- 4 bis. Distrito --------------------------- */
.distritos {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 10px;
  flex-wrap: wrap;
}

.distritos-rotulo {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gris);
}

.distrito {
  padding: 6px 14px;
  border: 1px solid var(--tinta);
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radio);
  cursor: pointer;
}
.distrito:hover { background: var(--papel); }
.distrito[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--blanco);
}

.distritos-nota { font-size: 11.5px; color: var(--gris); }

/* ------------------------------ 5. Mapa ------------------------------- */
.mapa-zona {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* El mapa se dimensiona por su contenedor, no por inset: si Leaflet alcanza
   a escribir position:relative en línea antes de que aplique esta hoja, el
   alto absoluto se perdería y el mapa quedaría en cero.

   overflow y position van aquí, y no se dejan a la clase leaflet-container
   que Leaflet añade en tiempo de ejecución: si la página se recompone y
   restituye el atributo class declarado, esa clase se pierde y el mapa
   deja de recortar, con los marcadores pintándose sobre la cabecera.   */
#mapa {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #e8e2d8;
}

.leaflet-container { font-family: var(--f-texto); }
.leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, .85);
}

/* Aviso cuando ningún filtro deja proyectos visibles */
.aviso-vacio {
  position: absolute;
  left: 50%; top: 18px;
  transform: translateX(-50%);
  z-index: 500;
  display: none;
  padding: 8px 16px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font-size: 13px;
  color: var(--gris);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.aviso-vacio.visible { display: block; }

/* ----------------------------- 6. Marcadores ---------------------------- */
/* El tamaño en píxeles lo fija JS (60 en escritorio, 44 en móvil), por eso
   el marcador no se deforma al hacer zoom: Leaflet solo lo reposiciona.   */

.marcador { background: none; border: 0; }
.marcador-caja {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 4px rgba(13, 42, 92, .32));
  transition: transform .18s ease-out;
  transform-origin: 50% 100%;   /* crece desde el punto que toca el terreno */
  cursor: pointer;
}

/* Al pasar el cursor, la ilustración se ve al triple y se pone por encima
   del resto de marcadores (Leaflet fija su z-index en línea).           */
.marcador:hover,
.marcador:focus-within { z-index: 1000 !important; }

.marcador:hover .marcador-caja,
.marcador:focus-visible .marcador-caja { transform: scale(3); }

.marcador-activo .marcador-caja { transform: scale(1.12); }

/* La imagen conserva su transparencia y sus fotogramas WebP animados */
.marcador-caja img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Respaldo mientras el .webp no esté disponible en el servidor */
.marcador-caja .respaldo {
  display: none;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-estado, var(--gris));
  border: 2px solid var(--blanco);
  box-shadow: inset 0 0 0 1px rgba(13, 42, 92, .45);
  color: var(--blanco);
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.marcador-caja.sin-icono img { display: none; }
.marcador-caja.sin-icono .respaldo { display: flex; }

/* ------------------- 6 bis. Glifos animados por estado ------------------
   El dibujo va incrustado en el HTML y la animación vive aquí. Un .svg
   suelto no sirve para esto: al guardarse pierde su bloque <style>.
   Cada estado anima su propia idea.                                      */

.glifo {
  display: block;
  overflow: visible;
}

/* El tamaño lo manda el contenedor: en el marcador ocupa toda la caja,
   en el filtro manda .filtro-icono. Sin acotar, .glifo ganaría por orden
   en la cascada y el ícono del chip crecería sin tope.                  */
.marcador-caja .glifo { width: 100%; height: 100%; }

.glifo [class^="g-"] { transform-box: view-box; }

/* Venta en planos: el plano se traza solo */
.g-p1, .g-p2, .g-p3 {
  fill: none; stroke: #0d2a5c; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.g-p1 { stroke-dasharray: 15; stroke-dashoffset: 15; animation: gPlano1 4.2s ease-in-out infinite .15s; }
.g-p2 { stroke-dasharray: 10; stroke-dashoffset: 10; animation: gPlano2 4.2s ease-in-out infinite .6s; }
.g-p3 { stroke-dasharray: 52; stroke-dashoffset: 52; animation: gPlano3 4.2s ease-in-out infinite 1.05s; }
@keyframes gPlano1 { 0%,4%{stroke-dashoffset:15} 22%,86%{stroke-dashoffset:0} 96%,100%{stroke-dashoffset:15} }
@keyframes gPlano2 { 0%,4%{stroke-dashoffset:10} 22%,86%{stroke-dashoffset:0} 96%,100%{stroke-dashoffset:10} }
@keyframes gPlano3 { 0%,4%{stroke-dashoffset:52} 30%,86%{stroke-dashoffset:0} 96%,100%{stroke-dashoffset:52} }

/* Demolición: la bola golpea el muro y caen escombros */
.g-brazo { transform-origin: 20px 14px; animation: gSwing 2.6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes gSwing { 0%,100%{transform:rotate(-30deg)} 50%{transform:rotate(12deg)} }
.g-muro { transform-origin: 40px 46px; animation: gGolpe 2.6s ease-out infinite; }
@keyframes gGolpe { 0%,44%{transform:translateX(0)} 50%{transform:translateX(2.5px)} 56%{transform:translateX(-1px)} 62%,100%{transform:translateX(0)} }
.g-esc { opacity: 0; animation: gCae 2.6s ease-in infinite; }
.g-esc2 { animation-delay: .12s; }
@keyframes gCae {
  0%,46%   { opacity: 0; transform: translate(0,0) rotate(0deg); }
  54%      { opacity: 1; transform: translate(2px,1px) rotate(30deg); }
  82%,100% { opacity: 0; transform: translate(7px,11px) rotate(150deg); }
}

/* Excavación: el brazo baja a la zanja, carga y levanta */
.g-excava { transform-origin: 22px 26px; animation: gCava 3.2s ease-in-out infinite; }
@keyframes gCava {
  0%,100% { transform: rotate(-14deg); }
  30%     { transform: rotate(16deg); }
  46%     { transform: rotate(14deg); }
  70%     { transform: rotate(-16deg); }
}
.g-tierra { opacity: 0; animation: gTierra 3.2s ease-in-out infinite; }
@keyframes gTierra {
  0%,34%   { opacity: 0; transform: translateY(0); }
  44%,64%  { opacity: 1; transform: translateY(0); }
  78%,100% { opacity: 0; transform: translateY(4px); }
}

/* Construcción: el gancho baja y el edificio sube piso a piso */
.g-piso { opacity: 0; }
.g-piso1 { animation: gSube 4.4s ease-out infinite .25s; }
.g-piso2 { animation: gSube 4.4s ease-out infinite 1.05s; }
.g-piso3 { animation: gSube 4.4s ease-out infinite 1.85s; }
@keyframes gSube {
  0%       { opacity: 0; transform: translateY(-7px); }
  12%, 86% { opacity: 1; transform: translateY(0); }
  94%,100% { opacity: 0; transform: translateY(0); }
}
.g-gancho { animation: gGancho 4.4s ease-in-out infinite; }
@keyframes gGancho { 0%,100%{transform:translateY(0)} 40%{transform:translateY(7px)} 70%{transform:translateY(1px)} }

/* Acabados: el rodillo cruza la pared y la deja pintada */
.g-pintura { transform-origin: 20px 32px; animation: gPinta 3.6s ease-in-out infinite; }
@keyframes gPinta { 0%,6%{transform:scaleX(0)} 52%,84%{transform:scaleX(1)} 96%,100%{transform:scaleX(0)} }
.g-rodillo { animation: gRodillo 3.6s ease-in-out infinite; }
@keyframes gRodillo { 0%,6%{transform:translateX(0)} 52%,84%{transform:translateX(20px)} 96%,100%{transform:translateX(0)} }

/* Entregada: se encienden los departamentos y se marca la conformidad */
.g-luz { opacity: 0; }
.g-luz1 { animation: gLuz 4.6s ease-in-out infinite .3s; }
.g-luz2 { animation: gLuz 4.6s ease-in-out infinite .8s; }
.g-luz3 { animation: gLuz 4.6s ease-in-out infinite 1.3s; }
.g-luz4 { animation: gLuz 4.6s ease-in-out infinite 1.8s; }
@keyframes gLuz { 0%,3%{opacity:0} 12%,88%{opacity:1} 96%,100%{opacity:0} }
.g-sello { transform-origin: 45px 45px; animation: gSello 4.6s cubic-bezier(.2,1.5,.4,1) infinite; }
@keyframes gSello {
  0%,48%   { opacity: 0; transform: scale(.5); }
  58%      { opacity: 1; transform: scale(1.15); }
  64%,88%  { opacity: 1; transform: scale(1); }
  96%,100% { opacity: 0; transform: scale(1); }
}
.g-visto {
  fill: none; stroke: #1e7a38; stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26;
  animation: gVisto 4.6s ease-out infinite;
}
@keyframes gVisto { 0%,52%{stroke-dashoffset:26} 68%,88%{stroke-dashoffset:0} 96%,100%{stroke-dashoffset:26} }

@media (prefers-reduced-motion: reduce) {
  .glifo [class^="g-"] { animation: none !important; transform: none !important; opacity: 1; }
  .g-p1, .g-p2, .g-p3, .g-visto { stroke-dashoffset: 0; }
}

/* ------------------ 6 ter. Movimiento de las ilustraciones --------------
   Las imágenes son fijas: no se pueden mover sus piezas por dentro, así
   que se anima la pieza entera y se le añaden acentos según el estado.  */

@keyframes mFlota { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }

@keyframes mPolvo {
  0%   { opacity: 0;  transform: translate(0, 0) scale(.5); }
  20%  { opacity: .5; }
  100% { opacity: 0;  transform: translate(7px, -15px) scale(1.6); }
}

@keyframes mBrillo { 0%, 100% { filter: brightness(1) } 50% { filter: brightness(1.13) } }

@keyframes mSello {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(30, 122, 56, 0)) }
  50%      { filter: drop-shadow(0 0 7px rgba(30, 122, 56, .75)) }
}

@keyframes mHalo { to { transform: rotate(360deg) } }

/* 1. Flotación común, desfasada marcador a marcador */
.marcador-caja img {
  animation: mFlota 4.5s ease-in-out infinite;
  animation-delay: var(--retardo, 0s);
}

/* 2. Acentos por estado */
.estado-acabados img {
  animation: mFlota 4.5s ease-in-out infinite, mBrillo 3.4s ease-in-out infinite;
  animation-delay: var(--retardo, 0s);
}
.estado-entregada img {
  animation: mFlota 4.5s ease-in-out infinite, mSello 4.6s ease-in-out infinite;
  animation-delay: var(--retardo, 0s);
}

/* Polvo en las etapas con maquinaria trabajando */
.estado-demolicion::after,
.estado-excavacion::after,
.estado-construccion::after,
.estado-demolicion::before,
.estado-excavacion::before {
  content: '';
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(122, 104, 76, .65);
  pointer-events: none;
  animation: mPolvo 2.9s ease-out infinite;
  animation-delay: var(--retardo, 0s);
}
.estado-demolicion::after   { bottom: 26%; left: 46%; }
.estado-demolicion::before  { bottom: 20%; left: 62%; animation-duration: 3.4s; }
.estado-excavacion::after   { bottom: 22%; left: 58%; }
.estado-excavacion::before  { bottom: 28%; left: 48%; animation-duration: 3.6s; }
.estado-construccion::after { bottom: 16%; left: 30%; animation-duration: 3.8s; }

/* Halo de anteproyecto: gira muy despacio */
.estado-venta-planos::before {
  content: '';
  position: absolute;
  inset: 6%;
  border: 1.5px dashed rgba(63, 98, 150, .5);
  border-radius: 50%;
  pointer-events: none;
  animation: mHalo 16s linear infinite;
}

/* Venta en planos: el proyecto se levanta al pasar el cursor.
   Dos capas superpuestas de la misma ilustración: la tenue queda siempre
   a la vista, la nítida se descubre de la base hacia arriba.            */
.estado-venta-planos .capa-fantasma,
.estado-venta-planos .capa-revela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.estado-venta-planos .capa-fantasma { opacity: .38; }
.estado-venta-planos .capa-revela {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 2.6s cubic-bezier(.22, .9, .3, 1);
}
.marcador:hover .estado-venta-planos .capa-revela,
.marcador:focus-visible .estado-venta-planos .capa-revela { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .marcador-caja img,
  .estado-acabados img,
  .estado-entregada img { animation: none !important; }
  .marcador-caja::before,
  .marcador-caja::after { display: none; }
  .estado-venta-planos .capa-fantasma { opacity: 0; }
  .estado-venta-planos .capa-revela { clip-path: inset(0 0 0 0); transition: none; }
}

/* -------------------------- 7. Tarjeta emergente ------------------------ */
.leaflet-popup.tarjeta .leaflet-popup-content-wrapper {
  padding: 0;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: 0 6px 20px rgba(13, 42, 92, .22);
  background: var(--blanco);
}

.leaflet-popup.tarjeta .leaflet-popup-content {
  margin: 0;
  width: 264px !important;
  line-height: 1.45;
}

.tarjeta-cuerpo { padding: 0; }

/* Los datos se desplazan dentro de un alto fijo, conocido antes de que
   Leaflet mida la ficha; así el pie con el botón nunca queda fuera. */
.tarjeta-desliza {
  padding: 13px 14px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tarjeta-pie {
  padding: 9px 14px 10px;
  border-top: 1px solid var(--linea);
}

.leaflet-popup.tarjeta .leaflet-popup-tip {
  background: var(--blanco);
  border: 1px solid var(--tinta);
}

.leaflet-popup.tarjeta a.leaflet-popup-close-button {
  width: 26px; height: 26px;
  padding: 4px 0 0 0;
  color: var(--gris);
  font-size: 18px;
}
.leaflet-popup.tarjeta a.leaflet-popup-close-button:hover { color: var(--tinta); }

.tarjeta-estado {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: var(--color-estado, var(--tinta));
  color: var(--blanco);
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tarjeta-nombre {
  font-family: var(--f-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--tinta);
}

.tarjeta-distrito {
  font-size: 12.5px;
  color: var(--gris);
  margin-top: 3px;
}

.tarjeta-datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 13px 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
}

.tarjeta-dato dt {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gris);
}

.tarjeta-dato dd {
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
  margin-top: 2px;
}

.tarjeta-dato dd small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--gris);
}

.tarjeta-dato-ancho { grid-column: 1 / -1; }
.tarjeta-dato-ancho dd { font-size: 13px; font-weight: 500; }
.tarjeta-mono { font-family: var(--f-mono); font-size: 12px !important; }

/* Fotos tomadas en campo, en la ficha del proyecto. Una tira horizontal:
   ocupa poco alto y no compite con los datos.                           */
.ficha-fotos {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.ficha-foto {
  flex: 0 0 auto;
  width: 122px;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  scroll-snap-align: start;
  background: var(--papel);
}

.boton-proyecto {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: var(--acento);
  border: 1px solid var(--acento-osc);
  border-radius: var(--radio);
  color: #1c1200;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.boton-proyecto:hover { background: #ffc82e; color: #1c1200; }

.tarjeta-nota {
  margin: 9px 0 12px;
  font-size: 10.5px;
  color: var(--gris);
  text-align: center;
}

/* ------------------------- 7 bis. Panel de la ficha ---------------------
   La ficha es un panel fijo dentro del mapa, no un globo anclado al
   marcador: así cabe entera siempre, sin depender de dónde esté el
   marcador ni de cuánto mida el mapa.                                   */

.ficha {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1002;
  width: 288px;
  max-height: calc(100% - 28px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--blanco);
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: 0 6px 20px rgba(13, 42, 92, .22);
}
.ficha[hidden] { display: none; }

.ficha .tarjeta-cuerpo {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.ficha .tarjeta-desliza {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}
.ficha .tarjeta-pie { flex: 0 0 auto; }

.ficha-cerrar {
  position: absolute;
  top: 5px;
  right: 6px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.ficha-cerrar:hover { color: #fff; }

@media (max-width: 720px) {
  .ficha { left: 10px; right: 10px; bottom: 10px; width: auto; max-height: calc(100% - 20px); }
}

/* ----------------------------- 8. Responsivo ---------------------------- */
@media (max-width: 720px) {
  .cabecera-fila {
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 12px 14px 8px;
  }
  .marca { font-size: 25px; }
  .bajada { font-size: 12px; flex: 1 1 100%; }
  .conteo { margin-left: 0; flex: 1 1 auto; }
  .enlace-campo { font-size: 14px; }

  .filtros {
    padding: 0 14px 10px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .filtro { padding: 6px 11px; font-size: 12.5px; }
  .filtro-icono { width: 22px; height: 22px; flex: 0 0 22px; }

  .marcador-caja .respaldo { font-size: 15px; border-width: 2px; }

  .leaflet-popup.tarjeta .leaflet-popup-content { width: 232px !important; }
  .tarjeta-nombre { font-size: 20px; }
  .tarjeta-datos { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .marcador-caja { transition: none; }
}