/* mapa.css — mapa 3D de localidades (horarios.html)
   Los estilos van aquí y no en línea porque hacen falta :hover y :focus-visible,
   que no se pueden expresar con el style={{...}} de React. */

.wb-mapa { display: block; width: 100%; height: auto; overflow: visible; }

/* ─── bloques de municipio ─────────────────────────────────────────────── */
.wb-muni { cursor: pointer; }
/* sin recuadro al hacer clic; sí al navegar con el tabulador */
.wb-muni:focus { outline: none; }
.wb-muni:focus-visible .wb-top { stroke: #0E3B47; stroke-width: 3; }

.wb-top {
  fill: #EBE4CE; stroke: #BCAE86; stroke-width: 1.4;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), fill .22s;
}
.wb-wall { fill: #B0A176; transition: opacity .22s; }

/* altura en reposo: 5 capas los municipios sin grupo… */
.wb-muni .wb-wall:nth-child(n+6) { opacity: 0; }
/* …y 12 los que tienen grupo, para que el relieve ya diga dónde estamos.
   La altura no distingue entre los dos estados con grupo: eso lo hace el color,
   si no el mapa contaría dos cosas a la vez con el mismo recurso. */
.wb-muni.is-on .wb-top  { fill: #1B8FB5; stroke: #12708F; }
.wb-muni.is-on .wb-wall { fill: #0C4A5E; }
.wb-muni.is-on .wb-wall:nth-child(n+13) { opacity: 0; }

/* hay grupo pero la matrícula aún no está abierta */
.wb-muni.is-pronto .wb-top  { fill: #3CC9A2; stroke: #2AA183; }
.wb-muni.is-pronto .wb-wall { fill: #1E7A63; }

/* ratón encima: el bloque se levanta */
.wb-muni:hover .wb-top  { transform: translateY(-22px); fill: #F5C518; stroke: #C9A20F; }
.wb-muni:hover .wb-wall { opacity: 1; fill: #A87F08; }

/* fijado por clic: borde oscuro para distinguirlo del que solo tiene el ratón */
.wb-muni.is-sel .wb-top  { fill: #F5C518; stroke: #0E3B47; stroke-width: 2.6;
                           transform: translateY(-22px); }
.wb-muni.is-sel .wb-wall { opacity: 1; fill: #A87F08; }

.wb-dot { fill: #FFFFFF; stroke: #0E3B47; stroke-width: 2; pointer-events: none;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
.wb-muni:hover .wb-dot, .wb-muni.is-sel .wb-dot { transform: translateY(-22px); }

.wb-lbl {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 21px; font-weight: 600; fill: #0E3B47;
  paint-order: stroke; stroke: #F5F1E1; stroke-width: 5px; stroke-linejoin: round;
  pointer-events: none;
}

/* ─── móvil ────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* el mapa se queda pequeño: las etiquetas estorban más que ayudan.
     Abajo está la lista completa de localidades, que es la vía real en táctil. */
  .wb-lbl { display: none; }
  /* el dedo no tiene puntería para un salto de 22 px: se reduce el recorrido */
  .wb-muni:hover .wb-top, .wb-muni:hover .wb-dot { transform: none; }
  .wb-muni:hover .wb-wall { opacity: 0; }
  .wb-muni.is-on:hover .wb-wall:nth-child(-n+12) { opacity: 1; }
  .wb-muni.is-sel .wb-top, .wb-muni.is-sel .wb-dot { transform: translateY(-12px); }
  .wb-muni.is-sel .wb-wall:nth-child(n+18) { opacity: 0; }
  .wb-dot { r: 9; }
}

/* quien haya pedido menos animación en su sistema, que no vea saltos */
@media (prefers-reduced-motion: reduce) {
  .wb-top, .wb-wall, .wb-dot { transition: none !important; }
  .wb-muni:hover .wb-top, .wb-muni:hover .wb-dot,
  .wb-muni.is-sel .wb-top, .wb-muni.is-sel .wb-dot { transform: none !important; }
}