/* EL MAPA DE PROYECTOS EN GLOBO (09-10-2026, mapa-satelite.html): solo lo que es del mapa. Los colores, los redondeos, la letra y los botones son los de estilo.css
   (`--tinta`, `--acento`, `--r-modulo`…): si el aspecto del producto cambia, el mapa lo recoge.
   NADA DE `style=""` ESCRITO EN EL HTML NI EN EL GUION POR TEXTO: la CSP de la página no deja atributos de estilo en línea (el guion usa CSSOM).

   LA IDEA: un escenario a lo ancho, con el globo a pantalla casi completa, y encima piezas de cristal (la caja de búsqueda, los filtros, los controles, la ficha de
   un proyecto, la leyenda y el recuento). El cristal claro es para lo que se toca y se lee despacio; el oscuro, para lo que acompaña al mapa. Todo lo que flota deja
   pasar el ratón por donde no hay nada (`pointer-events`), para que el mapa se siga arrastrando. */

.escena {
  --atrib: 2.75rem;                                   /* lo que ocupa la atribución a pie de mapa (la licencia la exige entera y a la vista) */
  --vidrio: rgb(255 255 255 / .9);
  --vidrio-oscuro: rgb(7 16 30 / .74);
  --filo-vidrio: rgb(255 255 255 / .6);
  --filo-oscuro: rgb(255 255 255 / .14);
  --sombra-vidrio: 0 16px 40px -16px rgb(2 8 20 / .65), 0 2px 6px rgb(2 8 20 / .2);
  --margen: 0.875rem;
  max-width: 120rem; margin: 0.75rem auto 0; padding: 0 0.75rem 3rem;
}

/* ── EL ESCENARIO: el espacio, y en medio el globo ───────────────────────────────────────────────────────────────────── */
.escenario {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-modulo);
  height: clamp(34rem, calc(100vh - 7.5rem), 62rem);
  height: clamp(34rem, calc(100svh - 7.5rem), 62rem);
  background: radial-gradient(120% 95% at 50% 40%, #0d2342 0%, #07142a 52%, #030914 100%);
  box-shadow: 0 34px 80px -44px rgb(2 8 20 / .85), inset 0 0 0 1px rgb(255 255 255 / .07);
}
/* Las estrellas: puntitos fijos, sin imagen (la CSP no deja traer nada de fuera, y así no pesan). */
.escenario::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .85;
  background-image:
    radial-gradient(1.2px 1.2px at 6% 14%, #fff, transparent), radial-gradient(1px 1px at 13% 71%, #cfe3ff, transparent),
    radial-gradient(1.4px 1.4px at 21% 33%, #fff, transparent), radial-gradient(1px 1px at 27% 88%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 34% 9%, #dbeafe, transparent), radial-gradient(1px 1px at 41% 52%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 48% 94%, #fff, transparent), radial-gradient(1px 1px at 56% 21%, #cfe3ff, transparent),
    radial-gradient(1.2px 1.2px at 63% 63%, #fff, transparent), radial-gradient(1px 1px at 70% 6%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 77% 41%, #dbeafe, transparent), radial-gradient(1px 1px at 84% 82%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 91% 27%, #fff, transparent), radial-gradient(1px 1px at 96% 66%, #cfe3ff, transparent),
    radial-gradient(1px 1px at 17% 47%, #fff, transparent), radial-gradient(1.2px 1.2px at 74% 91%, #fff, transparent);
}

/* ── EL MAPA ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.mapa { position: absolute; inset: 0; z-index: 1; }
.mapa.maplibregl-map { font-family: inherit; }
.mapa .maplibregl-canvas { outline: none; }
/* El aviso sobre el mapa. `centro`: lo tapa entero (cargando, o sin mapa); sin `centro`, una tira bajo la cabecera (el mapa funciona). */
.mapa-estado {
  position: absolute; z-index: 9; margin: 0; left: 50%; bottom: calc(var(--atrib) + 4.5rem); transform: translateX(-50%); max-width: calc(100% - 2rem);
  padding: 0.4375rem 0.875rem; border-radius: 999px; background: var(--vidrio-oscuro); color: #fff; font-size: 0.8125rem; line-height: 1.4;
  pointer-events: none; text-align: center; border: 1px solid var(--filo-oscuro);
}
.mapa-estado[hidden] { display: none; }
/* Un aviso con enlace (el relieve de pago): se puede pulsar, y el enlace se lee sobre el cristal oscuro. */
.mapa-estado.con-enlace { pointer-events: auto; }
.nota-registro { display: block; margin: 0 0 0.375rem; }
/* LA FICHA AMPLIADA de la tarjeta (16-10-2026): los bloques son los del buscador (estilo.css); aqui, el hueco y el operador. */
.ficha-ampliada { display: grid; gap: 0.5rem; margin: 0.625rem 0 0; }
.ficha-ampliada:empty { display: none; }
.ficha-ampliada .operador { margin: 0; font-size: 0.875rem; line-height: 1.35; }
.ficha-ampliada .etiqueta-operador { color: var(--gris); font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; }
.ficha-ampliada .cif { color: var(--gris); }
.ficha-ampliada .datos-anuncio, .ficha-ampliada .registro-bloque { margin: 0; }
.ficha-ampliada .datos-anuncio dl { grid-template-columns: 1fr; }
.ficha-ampliada .datos-anuncio dd { margin-bottom: 0.25rem; }
.mapa-estado.con-enlace a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }
.mapa-estado.centro {
  inset: 0; transform: none; max-width: none; display: grid; place-items: center; border-radius: 0; font-size: 0.9375rem; padding: 1.5rem; border: 0;
  background: rgb(3 9 20 / .55);
}
/* LA ATRIBUCIÓN DE LA ORTOFOTO, A PIE DE MAPA Y LEGIBLE (la licencia la exige): sin el tamaño de 12 px de MapLibre, que a 375 px no se lee. */
.mapa .maplibregl-ctrl-attrib {
  background: rgb(255 255 255 / .92); font-size: 0.75rem; line-height: 1.35; color: var(--tinta); max-width: 100%; border-radius: 0.625rem; padding: 0.1875rem 0.625rem;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.mapa .maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0 var(--margen) 0.5rem 0; }
.mapa .maplibregl-ctrl-attrib a { color: var(--acento); }
.mapa .maplibregl-ctrl-bottom-right { z-index: 8; }
.mapa .maplibregl-ctrl-scale { background: rgb(255 255 255 / .85); border-radius: 0.375rem; margin: 0 0 0.625rem var(--margen); }

/* ── EL CRISTAL ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.cabecera-escena, .banda-escena .chips, .interpretado, .perfiles, .aviso-pago, .escenario .filtros, .controles, .tarjeta {
  background: var(--vidrio); border: 1px solid var(--filo-vidrio); box-shadow: var(--sombra-vidrio);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
}
.hud, .leyenda-caja, .acciones-escena .accion-escena, .linea-tiempo, .recorrido {
  background: var(--vidrio-oscuro); color: #fff; border: 1px solid var(--filo-oscuro); box-shadow: var(--sombra-vidrio);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
@media (prefers-reduced-transparency: reduce) {
  .escena { --vidrio: #fff; --vidrio-oscuro: #0a1626; }
}

/* ── LO DE ARRIBA ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.superior {
  position: absolute; z-index: 5; top: var(--margen); left: var(--margen); right: calc(var(--margen) * 2 + 2.75rem); bottom: calc(var(--atrib) + var(--margen));
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; pointer-events: none; min-height: 0;
  transition: right .35s cubic-bezier(.2, .8, .2, 1);
}
.superior > * { pointer-events: auto; max-width: 100%; }
.cabecera-escena {
  display: flex; align-items: center; gap: 0.875rem; width: min(52rem, 100%); padding: 0.4375rem 0.4375rem 0.4375rem 1.25rem; border-radius: 999px;
}
.cabecera-escena .ceja { display: contents; }   /* solo el gancho del selector de idioma: sin caja */
.cabecera-escena .idioma { flex: 0 0 auto; margin: 0; float: none; }
.cabecera-escena h1 { margin: 0; font-size: 1.0625rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; white-space: nowrap; }
.cabecera-escena .caja-busqueda { flex: 1 1 auto; min-width: 0; max-width: none; gap: 0.375rem; }
.cabecera-escena .caja-busqueda input { padding: 0.5625rem 1.125rem; font-size: 0.9375rem; background: rgb(244 247 251 / .85); }
.cabecera-escena .caja-busqueda button { padding: 0.5rem 1.25rem; }
.cabecera-escena .ver-filtros { display: inline-flex; align-items: center; width: auto; min-height: 0; border-radius: 999px; padding: 0.5rem 1.125rem; font-weight: 600; flex: 0 0 auto; }
.cabecera-escena .ver-filtros[aria-expanded="true"] { background: var(--acento-suave); color: var(--acento); border-color: transparent; }

.banda-escena { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; max-width: 100%; }
.banda-escena > * { pointer-events: auto; }
.banda-escena .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding: 0.1875rem 0.5rem; border-radius: 999px; min-height: 0; }
.banda-escena .chips::-webkit-scrollbar { display: none; }
.banda-escena .chips .chip, .banda-escena .chips .etiqueta { flex: 0 0 auto; white-space: nowrap; }
.interpretado, .perfiles { margin: 0; max-width: min(40rem, 100%); border-radius: 1.125rem; }
.interpretado { padding: 0.5rem 0.875rem; }
.perfiles { padding: 0.4375rem 0.875rem; }
.perfiles .pista { display: none; }
.aviso-pago.info { margin: 0; max-width: min(34rem, 100%); border-radius: 1.125rem; padding: 0.625rem 0.875rem; font-size: 0.8125rem; line-height: 1.45; }
.aviso-pago.info a { margin-left: 0.25rem; font-weight: 600; }

/* El panel de filtros: los de siempre, en una pieza de cristal que se abre y se cierra. */
.escenario .filtros {
  position: static; display: none; width: 21rem; max-width: 100%; flex: 0 1 auto; min-height: 0; max-height: 100%; overflow-y: auto; scrollbar-width: thin;
  border-radius: var(--r-tarjeta); padding: 1rem 0.875rem 0.5rem 1.125rem;
}
.escenario .filtros.abierto { display: block; animation: entrar-izquierda .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes entrar-izquierda { from { opacity: 0; transform: translateX(-0.75rem); } to { opacity: 1; transform: none; } }

/* ── LOS CONTROLES (a la derecha) ───────────────────────────────────────────────────────────────────────────────────── */
.controles {
  position: absolute; z-index: 5; top: var(--margen); right: var(--margen); display: flex; flex-direction: column; padding: 0.25rem; gap: 0.125rem; border-radius: 1.125rem;
}
button.ctl {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; min-width: 0; padding: 0; border: 0; border-radius: 0.8125rem; background: transparent;
  color: inherit; box-shadow: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
button.ctl svg { width: 1.3125rem; height: 1.3125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button.ctl svg .rellena, button.ctl svg .norte { fill: currentColor; stroke: none; }
button.ctl.grande { width: 2.75rem; height: 2.75rem; border-radius: 999px; }
.controles button.ctl { color: var(--tinta); }
.controles button.ctl:hover { background: var(--acento-suave); color: var(--acento); border: 0; }
.controles button.ctl[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento); }
.controles button.ctl:active { transform: scale(.94); }
button.ctl:focus-visible { outline: 2px solid var(--accion); outline-offset: 1px; }
.linea-tiempo button.ctl:hover, .recorrido button.ctl:hover { background: rgb(255 255 255 / .14); border: 0; color: #fff; }
.linea-tiempo button.ctl:focus-visible, .recorrido button.ctl:focus-visible { outline-color: #fff; }
#ctl-norte svg { transition: transform .12s linear; }

/* ── LO DE ABAJO: las dos cosas que se hacen con el mapa, la leyenda y el recuento ─────────────────────────────────────── */
.pie-escena {
  position: absolute; z-index: 4; left: var(--margen); bottom: calc(var(--atrib) + var(--margen)); display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  max-width: calc(100% - 5.75rem); pointer-events: none; transition: left .35s cubic-bezier(.2, .8, .2, 1);
}
.pie-escena > * { pointer-events: auto; }
.acciones-escena { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.acciones-escena .accion-escena {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem 0.5rem 0.75rem; border-radius: 999px; color: #fff; font-weight: 600; font-size: 0.875rem;
}
.acciones-escena .accion-escena svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acciones-escena .accion-escena:hover { background: rgb(14 30 54 / .86); border-color: rgb(255 255 255 / .3); }
.acciones-escena .accion-escena[aria-pressed="true"] { background: #1d6fe0; border-color: transparent; }
.acciones-escena .accion-escena:focus-visible { outline-color: #fff; }

.leyenda-caja { border-radius: 1.125rem; padding: 0.375rem 0.75rem 0.375rem 0.5rem; max-width: 100%; }
.ver-leyenda {
  display: inline-flex; align-items: center; gap: 0.375rem; border: 0; background: none; box-shadow: none; color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.375rem;
  letter-spacing: .02em; text-transform: uppercase;
}
.ver-leyenda::after { content: ""; width: 0.4375rem; height: 0.4375rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.ver-leyenda[aria-expanded="false"]::after { transform: rotate(-45deg); }
.ver-leyenda .muestras { display: inline-flex; }
.ver-leyenda .muestra { width: 0.6875rem; height: 0.6875rem; margin-right: -0.1875rem; border-radius: 50%; background: var(--c, #38bdf8); border: 2px solid #0b1b30; box-sizing: content-box; }
.ver-leyenda .muestras:not(:empty) { margin-right: 0.5rem; }
.ver-leyenda:hover { background: none; color: #bfdbfe; border: 0; }
.ver-leyenda:focus-visible { outline-color: #fff; }
.leyenda { display: flex; flex-wrap: wrap; gap: 0.3125rem 1rem; margin: 0.25rem 0.25rem 0.375rem; padding: 0; list-style: none; font-size: 0.8125rem; color: rgb(255 255 255 / .86); max-width: 24rem; }
.leyenda-caja .ver-leyenda[aria-expanded="false"] + .leyenda { display: none; }
.leyenda li { display: inline-flex; align-items: center; gap: 0.4375rem; }
.leyenda .n { color: rgb(255 255 255 / .55); font-variant-numeric: tabular-nums; }
.leyenda .tipo { color: #fff; }
/* La llave de cada cosa, igual que en el mapa: el punto lleno, el aro hueco, y el número de los grupos. */
.llave { flex: none; display: inline-grid; place-items: center; width: 0.875rem; height: 0.875rem; border-radius: 50%; box-sizing: border-box; --c: #38bdf8; }
.llave.punto { background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(14 26 43 / .45); }
.llave.parcela { background: var(--c); border: 2px solid #fff; border-radius: 0.1875rem; box-shadow: 0 0 0 1px rgb(14 26 43 / .45); }
.llave.centro { background: color-mix(in srgb, var(--c) 18%, transparent); border: 3px solid var(--c); box-shadow: 0 0 0 1px rgb(14 26 43 / .3); }
.llave.junto {
  width: 1.375rem; height: 1.375rem; background: linear-gradient(160deg, #2a72dc, #0f4c81); border: 2px solid #fff; color: #fff; font-size: 0.6875rem; font-weight: 700;
  box-shadow: 0 0 0 1px rgb(14 26 43 / .45);
}

.hud { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.125rem 0.875rem; padding: 0.625rem 0.875rem 0.625rem 1rem; border-radius: 1.25rem; max-width: 100%; }
.hud .recuento { grid-row: 1 / span 2; margin: 0; color: rgb(255 255 255 / .75); font-size: 0.8125rem; line-height: 1.15; }
.hud .recuento strong { display: block; color: #fff; font-size: 1.625rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hud .desglose { grid-column: 2; margin: 0; max-width: 22rem; font-size: 0.75rem; line-height: 1.4; color: rgb(255 255 255 / .72); }
.hud .desglose:empty { display: none; }
.hud .boton {
  grid-column: 1 / -1; justify-self: start; margin-top: 0.375rem; padding: 0.375rem 0.875rem; font-size: 0.8125rem; background: rgb(255 255 255 / .12); color: #fff;
  border: 1px solid rgb(255 255 255 / .22); box-shadow: none; text-decoration: none;
}
.hud .boton:hover { background: rgb(255 255 255 / .22); }
.hud .boton:focus-visible { outline-color: #fff; }

/* Con los filtros abiertos, lo de abajo se aparta a la derecha del panel; con una ficha abierta, lo de arriba se acorta (en pantallas anchas). */
.escenario[data-filtros="abierto"] .pie-escena { left: calc(var(--margen) * 2 + 21rem); }
.escenario[data-tarjeta="abierta"] .superior { right: calc(var(--margen) * 2 + 2.75rem + 25rem); }

/* ── LA FICHA DE UN PROYECTO ────────────────────────────────────────────────────────────────────────────────────────── */
.tarjeta {
  position: absolute; z-index: 6; top: var(--margen); right: calc(var(--margen) * 2 + 2.75rem); width: 24rem; max-width: calc(100% - var(--margen) * 2); max-height: calc(100% - var(--atrib) - var(--margen) * 2);
  overflow-y: auto; scrollbar-width: thin; border-radius: var(--r-tarjeta); padding: 1.125rem 1.25rem 1rem;
  animation: entrar-derecha .32s cubic-bezier(.2, .8, .2, 1);
}
.tarjeta[hidden] { display: none; }
@keyframes entrar-derecha { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } }
.cerrar-tarjeta { position: absolute; top: 0.5rem; right: 0.5rem; width: 2rem; height: 2rem; padding: 0; display: grid; place-items: center; border-radius: 999px; background: var(--superficie); color: var(--gris); box-shadow: none; }
.cerrar-tarjeta svg { width: 1.0625rem; height: 1.0625rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cerrar-tarjeta:hover { background: var(--acento-suave); color: var(--acento); }
.proyecto-mapa .cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; padding-right: 1.75rem; }
.proyecto-mapa h3 { margin: 0; font-size: 1.1875rem; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.proyecto-mapa .mw { white-space: nowrap; color: var(--gris); }
.proyecto-mapa .mw strong { display: block; font-size: 1.375rem; line-height: 1.15; color: var(--tinta); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* De qué anuncio sale la potencia cuando la dice otro del parque. Con ancho acotado y en TODOS los tamaños: la regla del teléfono de estilo.css (`.mw .origen`
   sin tope) ensancharía la cabecera de la ventana, que es una fila y no una columna. */
.proyecto-mapa .mw .origen { display: block; max-width: 11rem; margin-left: 0; white-space: normal; }
.proyecto-mapa .donde { display: flex; align-items: center; gap: 0.4375rem; margin: 0.75rem 0 0.5rem; padding: 0.4375rem 0.75rem; border-radius: 0.75rem; background: var(--superficie); font-size: 0.8125rem; color: var(--gris); }
.proyecto-mapa .pie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; font-size: 0.8125rem; color: var(--gris); }
/* Lo que dice el pie de la ficha (fase, fecha, tecnología, lugar), en etiquetas: sin los puntos de la lista, que al partirse en líneas quedaban al principio. */
.proyecto-mapa .pie > * + *:not(.insignia):not(.abrir):not(.seguir)::before { content: none; }
.proyecto-mapa .pie > span:not(.insignia) { padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--superficie); }
.proyecto-mapa .nota { margin: 0.5rem 0 0; }
.proyecto-mapa .enlaces { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.875rem 0 0; font-size: 0.8125rem; }
.proyecto-mapa .enlaces:empty { display: none; }
.proyecto-mapa .enlaces a {
  display: inline-flex; align-items: center; padding: 0.4375rem 0.9375rem; border-radius: 999px; border: 1px solid var(--filo); background: var(--papel); color: var(--tinta); font-weight: 600; text-decoration: none;
}
.proyecto-mapa .enlaces a:first-child { background: var(--boton) border-box; background-size: 100% 200%; background-position: 0 100%; color: #fff; border-color: transparent; }
.proyecto-mapa .enlaces a:hover { background-color: var(--superficie); }
.proyecto-mapa .enlaces a:first-child:hover { background-position: 0 0; }
.lista-sitio h3 { margin: 0 2rem 0.625rem 0; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.02em; }
.lista-sitio ul { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow-y: auto; display: grid; gap: 0.125rem; }
.fila-proyecto { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; gap: 0.125rem 0.75rem; text-align: left; border: 0; box-shadow: none; background: none; padding: 0.5rem 0.625rem; border-radius: 0.625rem; }
.fila-proyecto:hover { background: var(--acento-suave); }
.fila-proyecto .nombre { font-size: 0.875rem; overflow-wrap: anywhere; }
.fila-proyecto .mw { color: var(--gris); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
/* La rejilla, y no `flex-wrap`: la potencia no baja debajo de un nombre largo, y el origen ocupa la fila entera debajo de las dos columnas. */
.fila-proyecto .origen { grid-column: 1 / -1; font-size: 0.75rem; color: var(--gris-suave); }
.volver { margin: 0 0 0.5rem -0.5rem; padding: 0.125rem 0.5rem; font-size: 0.8125rem; }

/* Un anillo que late sobre el proyecto abierto (HTML sobre el mapa: no se dibuja en la capa, y así se anima sin repintar el mapa entero). */
.marca-seleccion { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid #fff; pointer-events: none; box-shadow: 0 0 0 0 rgb(255 255 255 / .7), 0 0 14px rgb(125 211 252 / .8); animation: late 1.9s ease-out infinite; }
@keyframes late { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / .7), 0 0 14px rgb(125 211 252 / .8); } 100% { box-shadow: 0 0 0 1.375rem rgb(255 255 255 / 0), 0 0 14px rgb(125 211 252 / .0); } }

/* ── LA LÍNEA DE TIEMPO y EL RECORRIDO (sustituyen a lo de abajo mientras están) ────────────────────────────────────────── */
.linea-tiempo, .recorrido {
  position: absolute; z-index: 6; left: var(--margen); right: calc(var(--margen) * 2 + 2.75rem); bottom: calc(var(--atrib) + var(--margen)); display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.625rem; border-radius: 1.5rem; animation: subir .3s cubic-bezier(.2, .8, .2, 1);
}
.recorrido { right: auto; max-width: calc(100% - 5.75rem); }
@keyframes subir { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
.tiempo-cuerpo { flex: 1 1 auto; min-width: 0; position: relative; padding-bottom: 1.125rem; }
.tiempo-cuenta { margin: 0 0 0.125rem; font-size: 0.8125rem; color: rgb(255 255 255 / .8); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiempo-cuenta strong { color: #fff; font-size: 0.9375rem; }
#tiempo-rango { width: 100%; margin: 0; padding: 0; height: 1.5rem; background: transparent; border: 0; -webkit-appearance: none; appearance: none; --p: 0%; }
#tiempo-rango::-webkit-slider-runnable-track { height: 0.3125rem; border-radius: 999px; background: linear-gradient(to right, #38bdf8 var(--p), rgb(255 255 255 / .26) var(--p)); }
#tiempo-rango::-moz-range-track { height: 0.3125rem; border-radius: 999px; background: rgb(255 255 255 / .26); }
#tiempo-rango::-moz-range-progress { height: 0.3125rem; border-radius: 999px; background: #38bdf8; }
#tiempo-rango::-webkit-slider-thumb { -webkit-appearance: none; width: 1.125rem; height: 1.125rem; margin-top: -0.4375rem; border-radius: 50%; background: #fff; border: 3px solid #38bdf8; box-shadow: 0 1px 6px rgb(0 0 0 / .5); }
#tiempo-rango::-moz-range-thumb { width: 0.9375rem; height: 0.9375rem; border-radius: 50%; background: #fff; border: 3px solid #38bdf8; box-shadow: 0 1px 6px rgb(0 0 0 / .5); }
#tiempo-rango:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 0.5rem; }
.tiempo-marcas { position: absolute; left: 0.5625rem; right: 0.5625rem; bottom: 0; height: 1rem; pointer-events: none; }
.tiempo-marcas span { position: absolute; transform: translateX(-50%); font-size: 0.6875rem; color: rgb(255 255 255 / .6); font-variant-numeric: tabular-nums; white-space: nowrap; }
.recorrido-paso { margin: 0 0.5rem; font-size: 0.8125rem; color: rgb(255 255 255 / .85); white-space: nowrap; font-variant-numeric: tabular-nums; }
.recorrido-paso strong { color: #fff; }

/* ── LOS GRUPOS (botones HTML sobre el mapa) ─────────────────────────────────────────────────────────────────────────── */
button.grupo {
  display: grid; place-items: center; padding: 0 0.25rem; min-width: 2rem; height: 2rem; border-radius: 999px; border: 2px solid #fff;
  color: #fff; font-weight: 700; font-size: 0.8125rem; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px rgb(255 255 255 / .16), 0 3px 12px rgb(2 8 20 / .55); cursor: pointer; background: linear-gradient(160deg, #2a72dc, #0f4c81);
  transition: transform .15s ease, box-shadow .15s ease;
}
button.grupo:hover { background: linear-gradient(160deg, #3b82ec, #1453b4); border-color: #fff; transform: scale(1.08); box-shadow: 0 0 0 6px rgb(255 255 255 / .22), 0 4px 16px rgb(2 8 20 / .6); }
button.grupo:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
button.grupo.cumulo { background: linear-gradient(160deg, #2a72dc, #0f4c81); }
/* Un sitio con varios proyectos: lleno si es un punto del anuncio; a trazos y casi transparente si es el centro de un municipio. */
button.grupo.hueco { background: rgb(7 16 30 / .55); border-style: dashed; box-shadow: 0 0 0 4px rgb(255 255 255 / .1), 0 3px 12px rgb(2 8 20 / .5); }
button.grupo.hueco:hover { background: rgb(7 16 30 / .8); }
/* EL BOTÓN DE UN GRUPO YA NO SE VE (11-10-2026): el círculo con su número lo dibuja el mapa (capa `grupos-simbolos`). El botón queda para el teclado y los lectores de
   pantalla, del mismo tamaño que el círculo, sin aspecto y sin ratón; al enfocarlo se le ve el aro, como al de un círculo suelto. Sin `opacity`: MapLibre la maneja él. */
button.grupo.accesible, button.grupo.accesible:hover {
  background: transparent; border-color: transparent; color: transparent; box-shadow: none; transform: none; pointer-events: none; transition: none;
}
button.grupo.accesible:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgb(14 26 43 / .7); }
button.grupo.chico { min-width: 1.75rem; height: 1.75rem; }
button.grupo.mediano { min-width: 2.25rem; height: 2.25rem; }
button.grupo.grande { min-width: 2.75rem; height: 2.75rem; font-size: 0.875rem; }
button.grupo.enorme { min-width: 3.25rem; height: 3.25rem; font-size: 0.9375rem; }

/* ── EL TECLADO ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* «Saltar el mapa»: lo primero que alcanza Tab dentro del escenario, fuera de la vista (el escenario recorta) hasta que lo enfoca; entonces, sobre el mapa. */
.saltar-mapa {
  position: absolute; z-index: 20; left: var(--margen); top: var(--margen); padding: 0.375rem 0.75rem; border-radius: 0.625rem; background: #fff; color: var(--tinta);
  font-size: 0.875rem; font-weight: 600; text-decoration: none; box-shadow: var(--sombra-alta); transform: translateY(-300%);
}
.saltar-mapa:focus { transform: none; outline: 3px solid var(--acento); outline-offset: 2px; }
/* El botón de un círculo suelto: sin aspecto y sin ratón (el clic es del círculo); solo cuando Tab lo enfoca se ve su aro. */
button.punto-teclado {
  width: 1.75rem; height: 1.75rem; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent;
  box-shadow: none; pointer-events: none;   /* sin `opacity`: MapLibre la maneja él en el estilo de cada marcador */
}
button.punto-teclado:focus-visible { outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 6px rgb(14 26 43 / .7); }
/* La nota de «hay más de los que Tab recorre»: la oye quien usa un lector de pantalla siempre, y la ve quien tiene el foco en el escenario. */
#nota-teclado {
  position: absolute; z-index: 9; left: 50%; transform: translateX(-50%); bottom: calc(var(--atrib) + 5.5rem); margin: 0; padding: 0.4375rem 0.875rem; max-width: min(34rem, calc(100% - 2rem));
  border-radius: 1rem; background: var(--vidrio-oscuro); color: #fff; font-size: 0.8125rem; text-align: center; border: 1px solid var(--filo-oscuro);
}
#nota-teclado:empty { display: none; }
.escenario:not(:focus-within) #nota-teclado { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── LOS MODOS: la línea de tiempo y el recorrido sustituyen a lo de abajo ───────────────────────────────────────────────── */
.escenario[data-modo="tiempo"] .pie-escena, .escenario[data-modo="recorrido"] .pie-escena { display: none; }
/* Los botones de reproducir/pausa llevan los dos iconos y enseñan el que toca (`data-estado`: lo que está pasando ahora). */
button.ctl[data-estado="tocando"] .icono-play, button.ctl[data-estado="pausa"] .icono-pausa { display: none; }
.tarjeta:focus { outline: none; }   /* el foco pasa a la tarjeta por programa, para el lector de pantalla: no hace falta un marco alrededor de toda ella */
/* Pantalla completa: el escenario ocupa toda la pantalla, sin esquinas. */
.escenario:fullscreen { height: 100%; border-radius: 0; }
.escenario:-webkit-full-screen { height: 100%; border-radius: 0; }

/* ── LO QUE VA DEBAJO DEL ESCENARIO ──────────────────────────────────────────────────────────────────────────────────── */
.debajo { max-width: var(--ancho); margin: 1rem auto 0; padding: 0 0.5rem; outline: none; }
.debajo .entradilla { margin: 0 0 0.75rem; max-width: 70ch; }
.debajo .pista-busqueda { margin: 0 0 0.75rem; }
.debajo .nota { margin-top: 0.5rem; }
.como-se-lee-mapa { margin-top: 1rem; background: var(--papel); border-radius: var(--r-modulo); padding: 1.25rem 1.5rem 1.375rem; }
.como-se-lee-mapa h2 { margin: 0 0 0.75rem; font-size: 1.125rem; letter-spacing: -.02em; }

/* ── PANTALLAS ESTRECHAS ─────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 80rem) {
  /* Con los filtros y la ficha abiertos a la vez no cabe el recuento entre los dos: la ficha manda (el recuento sigue al cerrarla). */
  .escenario[data-filtros="abierto"][data-tarjeta="abierta"] .hud { display: none; }
}
@media (max-width: 75rem) {
  /* Con la ficha abierta, la cabecera cede el sitio: sin el título (la caja de búsqueda y los filtros caben), y lo demás de arriba, fuera. */
  .escenario[data-tarjeta="abierta"] .superior { right: calc(var(--margen) * 2 + 2.75rem); }
  .escenario[data-tarjeta="abierta"] .banda-escena, .escenario[data-tarjeta="abierta"] .aviso-pago { display: none; }
  .escenario[data-tarjeta="abierta"] .cabecera-escena { width: min(30rem, 100%); }
  .escenario[data-tarjeta="abierta"] .cabecera-escena h1 { display: none; }
  .escenario[data-tarjeta="abierta"] .cabecera-escena .ver-filtros { white-space: nowrap; }
}
@media (max-width: 53.75rem) {
  /* SEGUNDA MANO, tras verlo en un teléfono de 390 px: el escenario ocupa lo que queda de pantalla bajo la barra del sitio (unos 11 rem), la cabecera cabe en dos filas
     y el recuento va sin la frase larga (está en «Cómo se lee», debajo). */
  .escena { --margen: 0.625rem; --atrib: 3.25rem; padding: 0 0.375rem 2rem; margin-top: 0.5rem; }
  .escenario { height: clamp(30rem, calc(100vh - 11.5rem), 56rem); height: clamp(30rem, calc(100svh - 11.5rem), 56rem); border-radius: var(--r-tarjeta); }
  .superior { right: calc(var(--margen) * 2 + 2.375rem); }
  .cabecera-escena { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.375rem 0.5rem; border-radius: 1.25rem; padding: 0.5rem 0.5rem 0.5rem 0.875rem; width: 100%; }
  .cabecera-escena h1 { grid-column: 1; grid-row: 1; font-size: 0.9375rem; white-space: normal; }
  .cabecera-escena .idioma { grid-column: 3; grid-row: 1; }
  .cabecera-escena .ver-filtros { grid-column: 2; grid-row: 1; min-height: 2.125rem; padding: 0.3125rem 0.875rem; font-size: 0.8125rem; }
  .cabecera-escena .caja-busqueda { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; }
  .cabecera-escena .caja-busqueda input { padding: 0.5rem 0.875rem; font-size: 0.9375rem; }
  .cabecera-escena .caja-busqueda button { flex: 0 0 auto; padding: 0.4375rem 1rem; }
  .perfiles { padding: 0.25rem 0.5rem 0.25rem 0.75rem; }
  .perfiles label { display: none; }
  .perfiles select { min-width: 0; min-height: 2.25rem; padding: 0.25rem 0.625rem; font-size: 0.8125rem; }
  .ver-leyenda { min-height: 2.25rem; }
  .escenario .filtros { width: 100%; }
  /* Los controles, más estrechos; la ficha, en una hoja desde abajo; y lo de abajo, sin la leyenda abierta. */
  button.ctl { width: 2.25rem; height: 2.25rem; }
  .controles { padding: 0.1875rem; }
  .tarjeta { top: auto; left: var(--margen); right: var(--margen); bottom: calc(var(--atrib) + var(--margen)); width: auto; max-height: 58%; animation-name: subir; }
  .escenario[data-tarjeta="abierta"] .pie-escena { display: none; }
  .escenario[data-filtros="abierto"] .pie-escena { display: none; }
  .escenario[data-filtros="abierto"] .controles { display: none; }
  .escenario[data-filtros="abierto"] .superior { right: var(--margen); }
  .pie-escena { max-width: calc(100% - 4.5rem); flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .hud { padding: 0.4375rem 0.75rem; border-radius: 1rem; gap: 0 0.625rem; }
  .hud .recuento strong { font-size: 1.3125rem; }
  .hud .desglose { display: none; }
  .hud .boton { grid-column: auto; margin: 0; padding: 0.3125rem 0.75rem; font-size: 0.75rem; }
  .leyenda-caja { order: 3; }
  .linea-tiempo, .recorrido { right: calc(var(--margen) * 2 + 2.25rem); border-radius: 1.25rem; padding: 0.4375rem 0.5rem; }
  .recorrido { right: auto; }
  button.punto-teclado { width: 2.25rem; height: 2.25rem; }
  button.grupo { min-width: 2.25rem; height: 2.25rem; }   /* un dedo no acierta a 28 px */
  button.grupo.grande { min-width: 2.75rem; height: 2.75rem; }
}
@media (max-width: 40rem) {
  .acciones-escena .accion-escena { padding: 0.375rem 0.75rem 0.375rem 0.5rem; font-size: 0.8125rem; }
  .leyenda { font-size: 0.75rem; }
  .como-se-lee-mapa { padding: 1.125rem 1.125rem 1.25rem; border-radius: var(--r-tarjeta); }
  .fila-proyecto { min-height: 2.75rem; align-items: center; }
  #nota-teclado { bottom: calc(var(--atrib) + 7rem); }
}
@media (prefers-reduced-motion: reduce) {
  .marca-seleccion { animation: none; }
  .escenario .filtros.abierto, .tarjeta, .linea-tiempo, .recorrido { animation: none; }
  .superior, .pie-escena { transition: none; }
}

/* ── LAS CAPAS DEL MITECO Y EL RELIEVE (11-10-2026) ──────────────────────────────────────────────────────────────────────── */
/* Sin plan, el botón de capas dice que existen (lleva un punto de color) y el panel, desde qué plan van. */
button.ctl.bloqueada { position: relative; }
button.ctl.bloqueada svg { opacity: .55; }
button.ctl.bloqueada::after {
  content: ""; position: absolute; right: 0.375rem; bottom: 0.375rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 2px var(--vidrio);
}
/* El panel ocupa el sitio de la ficha de un proyecto (a la izquierda de los controles): abrir una cierra el otro. */
.panel-capas {
  position: absolute; z-index: 6; top: var(--margen); right: calc(var(--margen) * 2 + 2.75rem); width: 21rem; max-width: calc(100% - var(--margen) * 2);
  max-height: calc(100% - var(--atrib) - var(--margen) * 2); overflow-y: auto; scrollbar-width: thin; border-radius: var(--r-tarjeta); padding: 0.875rem 1rem 0.875rem 1.125rem;
  /* CASI OPACO (retoque del 11-10: a media anchura se le veían debajo el recuento y los filtros): el desenfoque se queda, pero lo de debajo ya no se lee a su través. */
  background: rgb(255 255 255 / .97); border: 1px solid var(--filo-vidrio); box-shadow: var(--sombra-vidrio);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  animation: entrar-derecha .28s cubic-bezier(.2, .8, .2, 1);
}
.panel-capas[hidden] { display: none; }
.cabeza-capas { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.cabeza-capas h2 { margin: 0; font-size: 1rem; letter-spacing: -.01em; }
.cabeza-capas button.ctl { color: var(--tinta); }
.cabeza-capas button.ctl:hover { background: var(--acento-suave); color: var(--acento); border: 0; }
.capas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
label.capa { display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0.25rem; min-height: 2.75rem; border-radius: 0.75rem; cursor: pointer; }
label.capa:hover { background: var(--acento-suave); }
/* El interruptor: una casilla (con `role="switch"`, para el lector de pantalla) dibujada como tal. */
label.capa input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 2.5rem; height: 1.5rem; margin: 0; border-radius: 999px; background: #c5ceda;
  cursor: pointer; transition: background-color .18s ease;
}
label.capa input[type="checkbox"]::before {
  content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(2 8 20 / .35); transition: transform .18s ease;
}
label.capa input[type="checkbox"]:checked { background: var(--accion); }
label.capa input[type="checkbox"]:checked::before { transform: translateX(1rem); }
label.capa input[type="checkbox"]:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
.capa-texto { display: grid; gap: 0.0625rem; min-width: 0; }
.capa-texto strong { font-size: 0.9375rem; font-weight: 600; line-height: 1.25; }
.capa-texto small { color: var(--gris); font-size: 0.75rem; }
.capas-leyenda { display: grid; gap: 0.625rem; margin-top: 0.5rem; padding-top: 0.625rem; border-top: 1px solid var(--filo); }
.capas-leyenda:empty { display: none; }
.leyenda-capa h3 { margin: 0 0 0.375rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.leyenda-capa ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; font-size: 0.8125rem; }
.leyenda-capa li { display: inline-flex; align-items: center; gap: 0.4375rem; }
.muestra-capa { flex: none; width: 0.875rem; height: 0.875rem; border-radius: 0.25rem; background: var(--c, #9aa5b1); box-shadow: inset 0 0 0 1px rgb(2 8 20 / .25); }
.capas-aviso { margin: 0.75rem 0 0; font-size: 0.75rem; line-height: 1.45; color: var(--gris); }
.capas-texto { margin: 0 0 0.75rem; font-size: 0.875rem; line-height: 1.5; }
/* Analizar un emplazamiento (21-10-2026): el panel es el de las capas (mismo sitio; abrir uno cierra el otro), con su lista de lo que hay en el punto. */
.panel-analizar .subir-kml { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.375rem 0.875rem; margin: 0 0 0.75rem;
  border: 1px solid var(--filo); border-radius: 999px; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.panel-analizar .subir-kml:hover { background: var(--acento-suave); color: var(--acento); }
.panel-analizar .subir-kml:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
.lista-analisis { list-style: none; margin: 0.25rem 0 0.75rem; padding: 0; display: grid; gap: 0.25rem; font-size: 0.875rem; line-height: 1.45; }
.panel-analizar h3 { margin: 0.5rem 0 0.25rem; font-size: 0.875rem; }
.panel-analizar p { font-size: 0.875rem; line-height: 1.5; margin: 0.25rem 0 0.5rem; }
.escenario[data-capas="abierto"] .superior { right: calc(var(--margen) * 2 + 2.75rem + 22rem); }
/* Lo de abajo (el recuento y la leyenda) se queda a la izquierda del panel, no debajo de él. */
.escenario[data-capas="abierto"] .pie-escena { max-width: calc(100% - var(--margen) * 3 - 2.75rem - 21rem); }
@media (max-width: 75rem) {
  /* A media anchura la cabecera no cabe entera entre el borde y el panel: sin el título (la caja de búsqueda y los filtros caben) y sin la banda de debajo, como con la ficha. */
  .escenario[data-capas="abierto"] .cabecera-escena h1 { display: none; }
  .escenario[data-capas="abierto"] .banda-escena, .escenario[data-capas="abierto"] .aviso-pago { display: none; }
}
@media (max-width: 53.75rem) {
  /* En la hoja de abajo, lo que cabe sin pisar la cabecera (dos filas, unos 7 rem): el resto se desplaza dentro del panel. Y los filtros de debajo de la cabecera, fuera mientras tanto. */
  .panel-capas { top: auto; left: var(--margen); right: var(--margen); bottom: calc(var(--atrib) + var(--margen)); width: auto; animation-name: subir;
    max-height: min(76%, calc(100% - var(--atrib) - var(--margen) - 7.25rem)); padding: 0.75rem 0.875rem; }
  .escenario[data-capas="abierto"] .cabecera-escena h1 { display: block; }
  .escenario[data-capas="abierto"] .pie-escena { max-width: calc(100% - 4.5rem); }
  .capa-texto strong { font-size: 0.875rem; }
  label.capa { min-height: 2.5rem; padding-block: 0.25rem; }
  .capas-aviso { margin-top: 0.5rem; }
  .escenario[data-capas="abierto"] .pie-escena { display: none; }
  .escenario[data-capas="abierto"] .superior { right: calc(var(--margen) * 2 + 2.75rem); }
}
@media (prefers-reduced-motion: reduce) {
  .panel-capas { animation: none; }
  label.capa input[type="checkbox"], label.capa input[type="checkbox"]::before { transition: none; }
}

/* Las capas de red (19-10-2026, mapa-escena.js `leyendaDeRed`): la muestra de un punto es redonda. */
.muestra-capa.redonda { border-radius: 50%; }