/* Mapa en vivo a pantalla completa: página /mapa/ y lightbox de Información
   de interés. Los dos pintan el mismo escenario (MapStage, en
   internal/ui/mapa.templ) y lo mueve el mismo motor (vlmMapInit, en vlm.js).

   Fichero aparte de styles.css a propósito: las reglas base del mapa
   (.vlm-owm-map, botones de capa, reproductor, lienzos del heatmap) siguen
   allí; aquí va solo lo nuevo (página /mapa/, capa de banderas, panel del
   punto pulsado, leyendas) y los ajustes de colocación del escenario. Se
   carga desde el propio MapStage, después de styles.css, así que a igual
   especificidad gana lo de aquí. */

/* ---------- Página /mapa/ ---------- */

/* La cabecera del sitio (franja de clima de 34 px + header) se queda
   arriba, pegada; el mapa ocupa exactamente lo que queda de ventana. dvh
   para que en móvil no baile con la barra del navegador; vh de reserva. */
.vlm-mapa-page{
  display:flex;flex-direction:column;
  height:calc(100vh - 36px - clamp(60px,7vw,76px));
  height:calc(100dvh - 36px - clamp(60px,7vw,76px));
  min-height:440px;background:#eef5f9;
}
/* En móvil hay que descontar también el menú inferior fijo, que si no
   taparía el reproductor: mide 60 px más la zona segura (medido en el
   navegador; el hueco de 54 px que le reserva #vlm-app en styles.css se
   queda 6 px corto). */
@media (max-width:640px){
  .vlm-mapa-page{
    height:calc(100vh - 36px - clamp(60px,7vw,76px) - 60px);
    height:calc(100dvh - 36px - clamp(60px,7vw,76px) - 60px - env(safe-area-inset-bottom));
    min-height:380px;
  }
}
/* En la página el escenario forma su propio contexto de apilamiento: sus
   controles (z-index 500) se quedan dentro y no tapan lo que el sitio pone
   por encima del contenido, es decir, los desplegables de la cabecera y el
   asistente flotante. El reproductor deja libre la esquina del asistente. */
.vlm-mapa-stage-page{isolation:isolate}
.vlm-mapa-stage-page .vlm-owm-timeline{right:94px}
@media (max-width:640px){
  /* La franja de deportes ya no está debajo (2026-10-08): el reproductor
     deja libre la esquina del asistente flotante. */
  .vlm-mapa-stage.vlm-mapa-stage-page .vlm-owm-timeline{right:78px}
}
.vlm-mapa-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Escenario ---------- */

.vlm-mapa-stage{position:relative;flex:1;display:flex;min-height:0;overflow:hidden}

/* Botón "Banderas": cuarta fila de la columna derecha, bajo "Negocios".
   Los controles de zoom de MapLibre bajan una fila para dejarle sitio. */
.vlm-owm-flags-toggle{position:absolute;top:142px;right:14px;z-index:500;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;padding:8px 14px;font-family:inherit;font-weight:700;font-size:12.5px;letter-spacing:.02em;background:rgba(247,242,232,.92);color:#243746;cursor:pointer;box-shadow:0 2px 10px rgba(36,55,70,.18)}
.vlm-owm-flags-toggle[aria-pressed="true"]{background:#DBC27A;color:#243746}
.vlm-owm-map .maplibregl-ctrl-top-right{top:186px}
/* La atribución (arriba a la izquierda en styles.css) quedaba debajo de los
   botones de capa. En el escenario baja a la franja libre sobre el
   reproductor, a la derecha de la columna izquierda. */
.vlm-mapa-stage .vlm-owm-map .maplibregl-ctrl-top-left{top:auto;bottom:98px;left:358px}

/* Marcadores, pin y popups son elementos HTML de MapLibre: tienen que ir por
   encima de los lienzos del heatmap (440) y las partículas (450) y por
   debajo de los controles propios (500). */
.vlm-owm-map .maplibregl-marker.vlm-flag-marker{z-index:460 !important}
.vlm-owm-map .maplibregl-marker.vlm-owm-pin{z-index:465 !important}
.vlm-owm-map .maplibregl-popup{z-index:470}

/* ---------- Capa de banderas ---------- */

/* Bandera oficial: mástil y paño del color izado (lo dibuja flagSvg). */
.vlm-flag-marker{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;margin:0;cursor:pointer;line-height:0;filter:drop-shadow(0 2px 3px rgba(15,25,32,.5))}
.vlm-flag-marker:focus-visible{outline:3px solid #DBC27A;outline-offset:3px;border-radius:8px}
.vlm-flag-marker:hover{filter:drop-shadow(0 3px 6px rgba(15,25,32,.7))}

/* Sin bandera oficial: círculo de borde DISCONTINUO con una ola, del color
   de la estimación. Forma y colores distintos de los de las banderas
   (turquesa, naranja, magenta: ni verde, ni amarillo, ni rojo) para que
   nadie lo lea como una bandera izada. Gris si ni siquiera hay estimación. */
.vlm-flag-est{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;box-sizing:border-box;border:2px dashed #F7F2E8;background:#9AA3A8;color:#0F1920;font-size:12px;font-weight:800;line-height:1}
.vlm-flag-marker[data-nivel="tranquilo"] .vlm-flag-est,.vlm-owm-est-dot[data-nivel="tranquilo"]{background:#4FC3C8}
.vlm-flag-marker[data-nivel="movido"] .vlm-flag-est,.vlm-owm-est-dot[data-nivel="movido"]{background:#F28C38}
.vlm-flag-marker[data-nivel="fuerte"] .vlm-flag-est,.vlm-owm-est-dot[data-nivel="fuerte"]{background:#C2378E}
.vlm-flag-marker[data-bandera="cerrada"] .vlm-flag-est{background:#3D4852;color:#F7F2E8}
.vlm-owm-est-dot{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;box-sizing:border-box;border:1.5px dashed #F7F2E8;background:#9AA3A8;margin-right:6px;vertical-align:-1px}

/* Mapa alejado (clase que pone sizeFlags por debajo de zoom 11,3): los
   marcadores se quedan en miniatura para no pisarse. */
.vlm-flags-compact .vlm-flag-marker>svg{width:16px;height:18px}
.vlm-flags-compact .vlm-flag-est{width:13px;height:13px;border-width:1.5px}
.vlm-flags-compact .vlm-flag-est>*{display:none}
.vlm-flags-compact .vlm-flag-est{font-size:0}

/* Popup de una playa. */
.vlm-flag-popup{font-family:'Poppins',system-ui,sans-serif;font-size:13px;line-height:1.4}
.vlm-flag-popup .maplibregl-popup-content{padding:0;border-radius:14px;background:#16242E;color:#F7F2E8;box-shadow:0 14px 34px rgba(0,0,0,.42);font-family:inherit}
.vlm-flag-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.vlm-flag-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.vlm-flag-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-top-color:#16242E}
.vlm-flag-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.vlm-flag-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.vlm-flag-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-bottom-color:#16242E}
.vlm-flag-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:#16242E}
.vlm-flag-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:#16242E}
.vlm-flag-popup .maplibregl-popup-close-button{color:#F7F2E8;font-size:18px;width:30px;height:30px;right:2px;top:2px;border-radius:8px}
.vlm-flag-popup .maplibregl-popup-close-button:hover{background:rgba(247,242,232,.14)}
.vlm-flag-pop{padding:14px 16px 13px;min-width:210px}
.vlm-flag-pop p{margin:0}
.vlm-flag-pop-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#DBC27A;padding-right:22px}
.vlm-flag-pop-name{margin-top:3px !important;font-size:16.5px;font-weight:700;line-height:1.2}
.vlm-flag-pop-flag{display:flex;align-items:center;gap:8px;margin-top:10px !important;font-size:14px;font-weight:700}
.vlm-flag-pop-swatch{flex:none;width:14px;height:14px;border-radius:3px;border:1.5px solid #F7F2E8}
.vlm-flag-pop-tag{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 6px;border-radius:5px;background:#F7F2E8;color:#16242E}
.vlm-flag-pop-none{margin-top:10px !important;font-size:13px;font-weight:600;line-height:1.4}
.vlm-flag-pop-line{margin-top:5px !important;font-size:12.5px;line-height:1.45;color:rgba(247,242,232,.86)}
.vlm-flag-pop-upd{margin-top:6px !important;font-size:11px;line-height:1.4;color:rgba(247,242,232,.6)}
.vlm-flag-pop-est{margin-top:11px;padding:10px 11px 9px;border-radius:10px;border:1px dashed rgba(247,242,232,.42);background:rgba(247,242,232,.06)}
.vlm-flag-pop-est-tag{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(247,242,232,.72)}
.vlm-flag-pop-est-title{margin-top:4px !important;font-size:13.5px;font-weight:700}

/* ---------- Columna izquierda: resumen, aviso de banderas y panel ---------- */

.vlm-owm-leftcol{position:absolute;left:14px;top:66px;bottom:102px;z-index:500;width:min(336px,calc(100% - 28px));display:flex;flex-direction:column;gap:8px;pointer-events:none}
.vlm-owm-leftcol>*{pointer-events:auto}

.vlm-owm-head{padding:13px 16px 12px;border-radius:16px;background:rgba(15,25,32,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#F7F2E8}
.vlm-owm-head p{margin:0}
.vlm-owm-head-eyebrow{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#DBC27A}
.vlm-owm-head-main{margin-top:4px !important;font-size:17px;font-weight:700;line-height:1.25}
.vlm-owm-head-txt{margin-top:4px !important;font-size:12.5px;line-height:1.45;color:rgba(247,242,232,.84)}
.vlm-owm-head-txt:empty{display:none}
.vlm-owm-head-hint{margin-top:7px !important;font-size:11.5px;color:rgba(247,242,232,.6)}
/* Con un punto fijado manda el panel: el resumen se aparta. */
.vlm-panel-open .vlm-owm-head{display:none}

.vlm-owm-flags-note{display:flex;align-items:flex-start;gap:10px;padding:10px 10px 10px 14px;border-radius:14px;background:rgba(15,25,32,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-left:4px solid #9AA3A8;color:#F7F2E8;font-size:12px;line-height:1.45}
.vlm-owm-flags-note[data-oficial="1"]{border-left-color:#3FA66B}
.vlm-owm-flags-note[hidden]{display:none}
.vlm-owm-flags-note-txt{flex:1;min-width:0}
.vlm-owm-flags-note-close{flex:none;appearance:none;border:0;background:transparent;color:rgba(247,242,232,.7);font-size:13px;line-height:1;width:24px;height:24px;border-radius:7px;cursor:pointer}
.vlm-owm-flags-note-close:hover{background:rgba(247,242,232,.14);color:#F7F2E8}

.vlm-owm-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-radius:16px;background:rgba(15,25,32,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#F7F2E8;overflow:hidden}
.vlm-owm-panel[hidden]{display:none}
.vlm-owm-panel p{margin:0}
.vlm-owm-panel-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:13px 12px 11px 16px;border-bottom:1px solid rgba(247,242,232,.12)}
.vlm-owm-panel-eyebrow{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#DBC27A}
.vlm-owm-panel-place{margin-top:3px !important;font-size:15px;font-weight:700;line-height:1.25}
.vlm-owm-panel-when{margin-top:2px !important;font-size:11.5px;color:rgba(247,242,232,.66);font-variant-numeric:tabular-nums}
.vlm-owm-panel-close{flex:none;appearance:none;border:0;background:rgba(247,242,232,.1);color:#F7F2E8;font-size:14px;line-height:1;width:30px;height:30px;border-radius:9px;cursor:pointer}
.vlm-owm-panel-close:hover{background:#DBC27A;color:#243746}
.vlm-owm-panel-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 10px;scrollbar-width:thin;scrollbar-color:rgba(247,242,232,.3) transparent}
.vlm-owm-panel-foot{flex:none;display:flex;align-items:center;gap:12px;padding:9px 14px 10px 16px;border-top:1px solid rgba(247,242,232,.12)}
.vlm-owm-panel-note{flex:1;font-size:10.5px;line-height:1.35;color:rgba(247,242,232,.56)}
.vlm-owm-panel-note a{color:#DBC27A;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.vlm-owm-units{flex:none;display:flex;gap:2px;padding:2px;border-radius:8px;background:rgba(247,242,232,.1)}
.vlm-owm-unit-btn{appearance:none;border:0;border-radius:6px;padding:4px 8px;font-family:inherit;font-size:11px;font-weight:700;background:transparent;color:rgba(247,242,232,.8);cursor:pointer}
.vlm-owm-unit-btn[aria-pressed="true"]{background:#DBC27A;color:#243746}

/* Bloques del panel (los escribe paintPanel). */
.vlm-pd-block{padding:11px 0 10px;border-bottom:1px solid rgba(247,242,232,.1)}
.vlm-pd-block:last-child{border-bottom:0}
.vlm-pd-block h4{margin:0 0 7px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(247,242,232,.6)}
.vlm-pd-main{display:flex;align-items:center;gap:12px}
.vlm-pd-arrow{flex:none;color:#DBC27A}
.vlm-pd-big{display:block;font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.vlm-pd-name{display:block;margin-top:2px;font-size:13.5px;font-weight:600;color:#DBC27A}
.vlm-pd-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;margin:9px 0 0}
.vlm-pd-dl dt{font-size:10.5px;color:rgba(247,242,232,.58)}
.vlm-pd-dl dd{margin:1px 0 0;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.vlm-pd-none{font-size:12.5px;line-height:1.45;color:rgba(247,242,232,.74)}
.vlm-pd-table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.vlm-pd-table th,.vlm-pd-table td{padding:4px 0;text-align:left;white-space:nowrap}
.vlm-pd-table thead th{font-size:10.5px;font-weight:600;color:rgba(247,242,232,.58)}
.vlm-pd-table tbody th{font-weight:600;color:rgba(247,242,232,.82)}
.vlm-pd-table tbody tr+tr th,.vlm-pd-table tbody tr+tr td{border-top:1px solid rgba(247,242,232,.08)}
.vlm-pd-table .vlm-pd-arrow{vertical-align:-2px}

/* Pin del punto fijado, con el dato de la capa activa en un rótulo. */
.vlm-owm-pin{display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none;transform-origin:center}
.vlm-owm-pin-dot{width:14px;height:14px;border-radius:50%;box-sizing:border-box;background:#DBC27A;border:3px solid #16242E;box-shadow:0 0 0 2px #F7F2E8,0 2px 6px rgba(0,0,0,.4)}
/* El rótulo va en posición absoluta sobre el punto para que el centro del
   marcador (el ancla) siga siendo el punto, no el conjunto. */
.vlm-owm-pin-label{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:5px 10px;border-radius:10px;background:#16242E;color:#F7F2E8;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.vlm-owm-pin-label:empty{display:none}

.vlm-owm-cursor-hint{margin:7px 0 0;font-size:10.5px;color:rgba(247,242,232,.55)}

/* ---------- Leyendas (abajo a la derecha) ---------- */

.vlm-owm-dock{position:absolute;right:14px;bottom:102px;z-index:500;width:236px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.vlm-owm-dock>*{pointer-events:auto}
/* La escala base (styles.css) va posicionada sola a la izquierda y se
   esconde en táctil; dentro del muelle va en flujo y se ve siempre. */
.vlm-owm-dock .vlm-owm-scale{position:static;display:block;width:auto;box-sizing:border-box}
.vlm-owm-scale-note{margin:7px 0 0;font-size:10.5px;line-height:1.4;color:rgba(247,242,232,.7)}
.vlm-owm-scale-note[hidden]{display:none}
.vlm-owm-flags-legend{padding:10px 14px;border-radius:14px;background:rgba(15,25,32,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#F7F2E8}
.vlm-owm-flags-legend[hidden]{display:none}
.vlm-owm-flags-legend-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px 12px;font-size:11.5px}
.vlm-owm-flags-legend-list li{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.vlm-owm-flags-legend-list .vlm-owm-est-dot{margin-right:2px}

/* ---------- Reproductor ---------- */

.vlm-owm-now-btn{flex:none;appearance:none;border:1px solid rgba(247,242,232,.4);border-radius:999px;padding:5px 12px;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:transparent;color:#F7F2E8;cursor:pointer}
.vlm-owm-now-btn:hover{background:#DBC27A;border-color:#DBC27A;color:#243746}

/* ---------- Pantallas bajas (portátil con el lightbox, móvil apaisado) ---------- */

@media (max-height:700px) and (min-width:641px){
  .vlm-owm-scale-note{display:none}
  .vlm-owm-head-hint{display:none}
}

/* ---------- Móvil ---------- */
/* Solo dentro del escenario a pantalla completa: la miniatura de
   Información de interés conserva su colocación de siempre. */
@media (max-width:640px){
  /* Capas: las siete en una fila a todo el ancho y sin desplazamiento
     lateral, cada una con su icono encima del nombre (18-oct-2026). */
  .vlm-mapa-stage .vlm-owm-layers{top:10px;left:10px;right:10px;flex-wrap:nowrap;gap:2px;padding:4px}
  .vlm-mapa-stage .vlm-owm-layer-btn{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:3px;padding:7px 0 6px;font-size:10px;letter-spacing:0;line-height:1.1}
  .vlm-mapa-stage .vlm-owm-layer-btn span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vlm-mapa-stage .vlm-owm-layer-ic{width:18px;height:18px}
  /* Vista 3D, Negocios y Banderas: columna en el lateral derecho, bajo las
     capas, como botones cuadrados con el icono encima. El selector de mapa
     base y el zoom con botones se quitan: en táctil se hace zoom con dos
     dedos, y así queda sitio para el mapa. */
  .vlm-mapa-stage .vlm-owm-3d-toggle,
  .vlm-mapa-stage .vlm-owm-biz-toggle,
  .vlm-mapa-stage .vlm-owm-flags-toggle{right:10px;width:58px;flex-direction:column;justify-content:center;gap:4px;padding:8px 2px 7px;border-radius:12px;font-size:9.5px;letter-spacing:0;line-height:1.1;text-align:center}
  .vlm-mapa-stage .vlm-owm-3d-toggle svg,
  .vlm-mapa-stage .vlm-owm-biz-toggle svg,
  .vlm-mapa-stage .vlm-owm-flags-toggle svg{width:19px;height:19px}
  .vlm-mapa-stage .vlm-owm-3d-toggle{top:76px}
  .vlm-mapa-stage .vlm-owm-biz-toggle{top:138px}
  .vlm-mapa-stage .vlm-owm-flags-toggle{top:200px}
  .vlm-mapa-stage .vlm-owm-style-toggle{display:none}
  .vlm-mapa-stage .vlm-owm-map .maplibregl-ctrl-top-right{display:none}
  .vlm-mapa-stage .vlm-owm-map .maplibregl-ctrl-top-left{top:auto;bottom:104px;left:auto;right:6px}

  /* Columna izquierda: resumen y aviso arriba (sin pisar los botones de la
     derecha); el panel baja y se convierte en hoja inferior. */
  /* El resumen va a la izquierda de la columna de botones. */
  .vlm-owm-leftcol{left:10px;right:76px;top:76px;bottom:104px;width:auto;gap:6px}
  .vlm-owm-head{padding:8px 12px}
  /* En móvil el resumen se queda en dos líneas. */
  .vlm-owm-head-eyebrow,.vlm-owm-head-hint{display:none}
  .vlm-owm-head-main{margin-top:0 !important;font-size:13.5px}
  .vlm-owm-head-txt{margin-top:2px !important;font-size:11.5px;line-height:1.35}
  .vlm-owm-flags-note{font-size:11px;line-height:1.38;padding:7px 6px 7px 10px;gap:4px}
  .vlm-owm-panel{flex:0 1 auto;margin-top:auto;max-height:86%}
  .vlm-panel-open .vlm-owm-flags-note{display:none}
  /* Marcadores algo más pequeños: en 390 px la franja entera mide menos de
     300 px de alto y a 26 px se tapaban unos a otros. */
  .vlm-mapa-stage .vlm-flag-est{width:20px;height:20px;border-width:1.5px}
  .vlm-mapa-stage .vlm-flag-est svg{width:10px;height:10px}
  .vlm-mapa-stage .vlm-flag-marker>svg{width:24px;height:27px}
  .vlm-mapa-stage .vlm-flags-compact .vlm-flag-est{width:12px;height:12px}
  .vlm-mapa-stage .vlm-flags-compact .vlm-flag-marker>svg{width:15px;height:17px}

  /* Leyendas: solo la escala, compacta, abajo a la izquierda; con el panel
     abierto se quita (el panel ya da los números). */
  .vlm-owm-dock{left:10px;right:auto;bottom:104px;width:176px}
  .vlm-owm-dock .vlm-owm-scale{padding:8px 11px}
  .vlm-owm-scale-note,.vlm-owm-flags-legend{display:none !important}
  .vlm-panel-open .vlm-owm-dock{display:none}

  /* Reproductor en dos filas: play y barra arriba; hora y "Ahora" debajo. */
  .vlm-mapa-stage .vlm-owm-timeline{left:10px;right:10px;bottom:10px;flex-wrap:wrap;gap:4px 10px;padding:8px 12px 7px}
  .vlm-mapa-stage .vlm-owm-time-track{flex:1 1 calc(100% - 50px)}
  .vlm-mapa-stage .vlm-owm-time-label{flex:1 1 auto;min-width:0;text-align:left;font-size:12px}
  .vlm-mapa-stage .vlm-owm-now-btn{padding:3px 10px}
  .vlm-mapa-stage .vlm-owm-tick{font-size:8.5px}
  /* Una marca cada 12 h en vez de cada 6: en 390 px se pisaban. */
  .vlm-mapa-stage .vlm-owm-tick:nth-child(even){display:none}

  .vlm-pd-big{font-size:21px}
}

@media (prefers-reduced-motion:reduce){
  .vlm-flag-marker,.vlm-owm-pin{transition:none}
}

/* ==========================================================================
   Deportes de viento y agua (solo en /mapa/)
   Franja con el semáforo bajo el mapa, bloque con una ficha por deporte y
   tabla de mejores horas. El HTML lo ponen mapaDeportesFranja y mapaDeportes
   (mapa.templ); la tabla la pinta mapa-deportes.js con /api/deportes.json.
   ========================================================================== */

/* Punto del semáforo. El color nunca va solo: siempre lo acompaña un texto
   («Bueno», «Con cuidado», «No recomendable»). */
.vlm-dep-dot{display:inline-block;flex:none;width:11px;height:11px;border-radius:50%;box-sizing:border-box;background:#9AA3A8}
.vlm-dep-dot[data-nivel="verde"]{background:#2E9E5B}
.vlm-dep-dot[data-nivel="ambar"]{background:#E8A21C}
.vlm-dep-dot[data-nivel="rojo"]{background:#D3453A}
.vlm-dep-dot[data-nivel="na"]{background:transparent;border:2px dashed #9AA3A8}

/* ---------- Franja sobre el mapa ---------- */
/* Va dentro de .vlm-mapa-page, que tiene la altura de la ventana: el mapa
   cede su alto y la franja queda siempre a la vista sin tapar nada. A la
   Desde el 2026-10-08 va encima del mapa, no debajo. */
.vlm-dep-strip{flex:none;display:flex;align-items:center;gap:14px;min-height:54px;box-sizing:border-box;padding:8px 16px;background:#0F1920;color:#F7F2E8;font-family:'Poppins',system-ui,sans-serif}
.vlm-dep-strip-title{flex:none;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#DBC27A;text-decoration:none;white-space:nowrap}
.vlm-dep-strip-title:hover{color:#F7F2E8}
.vlm-dep-strip-list{flex:1;min-width:0;display:flex;gap:8px;list-style:none;margin:0;padding:3px;overflow-x:auto;scrollbar-width:none}
.vlm-dep-strip-list::-webkit-scrollbar{display:none}
.vlm-dep-strip-list li{flex:none}
.vlm-dep-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgba(247,242,232,.09);color:#F7F2E8;text-decoration:none;white-space:nowrap;font-size:12.5px;line-height:1.2}
/* El color se repite: la regla general a:hover (styles.css) lo ponía azul
   oscuro, y en el móvil el chip tocado se queda en hover y no se leía. */
.vlm-dep-chip:hover,.vlm-dep-chip:active,.vlm-dep-chip:focus{background:rgba(247,242,232,.18);color:#F7F2E8}
.vlm-dep-chip:focus-visible,.vlm-dep-strip-title:focus-visible{outline:3px solid #DBC27A;outline-offset:2px}
.vlm-dep-chip-name{font-weight:700}
.vlm-dep-chip-txt{color:rgba(247,242,232,.74);font-variant-numeric:tabular-nums}
.vlm-dep-strip-none{margin:0;font-size:12.5px;color:rgba(247,242,232,.74)}
.vlm-dep-chip-mini{display:none}
@media (max-width:640px){
  /* Los siete deportes en una sola fila, sin desplazamiento lateral
     (18-oct-2026): icono encima, nombre corto debajo y el semáforo como
     punto en la esquina y borde de color; el «hoy no» queda en el título
     de cada uno y en el bloque de abajo. */
  .vlm-dep-strip{gap:0;min-height:0;padding:6px 6px}
  .vlm-dep-strip-title{display:none}
  .vlm-dep-strip-list{overflow:visible;gap:4px;padding:0}
  .vlm-dep-strip-list li{flex:1 1 0;min-width:0}
  .vlm-dep-chip{position:relative;width:100%;box-sizing:border-box;flex-direction:column;justify-content:center;gap:0;padding:7px 2px 6px;border-radius:12px;font-size:10px;white-space:normal}
  .vlm-dep-chip-name{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;line-height:1.1}
  .vlm-dep-chip-name svg{width:20px;height:20px}
  .vlm-dep-chip-full,.vlm-dep-chip-txt{display:none}
  .vlm-dep-chip-mini{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vlm-dep-chip .vlm-dep-dot{position:absolute;top:5px;right:5px;width:8px;height:8px}
  .vlm-dep-chip[data-nivel="verde"]{box-shadow:inset 0 0 0 1.5px #2E9E5B}
  .vlm-dep-chip[data-nivel="ambar"]{box-shadow:inset 0 0 0 1.5px #E8A21C}
}

/* ---------- Bloque bajo el mapa ---------- */
.vlm-dep{background:#F7F2E8;color:#243746;font-family:'Poppins',system-ui,sans-serif;padding:clamp(26px,4.5vw,52px) 0 clamp(30px,5vw,60px);scroll-margin-top:calc(34px + clamp(60px,7vw,76px))}
.vlm-dep-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.vlm-dep h2{margin:0;font-size:clamp(21px,2.6vw,28px);font-weight:800;line-height:1.2;color:#243746}
.vlm-dep p{margin:0}
.vlm-dep-head{position:relative}
.vlm-dep-eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#47637A;margin-bottom:5px !important}
.vlm-dep-lead{margin-top:7px !important;max-width:70ch;font-size:14.5px;line-height:1.55;color:#3D5261}
.vlm-dep-medido{display:inline-block;margin-top:12px !important;padding:8px 13px;border-radius:10px;background:#243746;color:#F7F2E8;font-size:13.5px;font-weight:600;line-height:1.4}
.vlm-dep-medido[hidden]{display:none}
.vlm-dep-aviso{margin-top:12px !important;padding:10px 14px;border-radius:10px;border-left:5px solid #E8A21C;background:#FFF3D6;font-size:13.5px;line-height:1.5}
.vlm-dep-aviso a{text-decoration:underline;font-weight:600}
.vlm-dep-up{position:absolute;right:0;top:0;font-size:12.5px;font-weight:600;color:#47637A;text-decoration:underline;text-underline-offset:2px}

.vlm-dep-fold{margin-top:20px}
.vlm-dep-fold>summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#47637A;padding:6px 0}
.vlm-dep-fold>summary::-webkit-details-marker{display:none}
.vlm-dep-fold>summary::after{content:"";width:8px;height:8px;margin-left:auto;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.vlm-dep-fold[open]>summary::after{transform:rotate(-135deg)}
.vlm-dep-fold>summary:focus-visible{outline:3px solid #6B8FA8;outline-offset:3px;border-radius:6px}
.vlm-dep-fold-dots{display:inline-flex;gap:5px}
.vlm-dep-fold[open] .vlm-dep-fold-dots{display:none}

.vlm-dep-cards{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.vlm-dep-card{display:flex;flex-direction:column;gap:9px;padding:16px 18px 14px;border-radius:14px;background:#fff;border:1px solid rgba(36,55,70,.12);border-left:6px solid #9AA3A8;scroll-margin-top:calc(34px + clamp(60px,7vw,76px) + 14px)}
.vlm-dep-card[data-nivel="verde"]{border-left-color:#2E9E5B}
.vlm-dep-card[data-nivel="ambar"]{border-left-color:#E8A21C}
.vlm-dep-card[data-nivel="rojo"]{border-left-color:#D3453A}
.vlm-dep-card.is-foco{box-shadow:0 0 0 3px #DBC27A}
.vlm-dep-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vlm-dep-card h3{margin:0;font-size:17px;font-weight:800;line-height:1.2;color:#243746}
.vlm-dep-badge{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#EEF1F3;font-size:12px;font-weight:700;white-space:nowrap}
.vlm-dep-badge[data-nivel="verde"]{background:#DDF3E5;color:#145C33}
.vlm-dep-badge[data-nivel="ambar"]{background:#FFF0CC;color:#7A5200}
.vlm-dep-badge[data-nivel="rojo"]{background:#FBE1DE;color:#8F2219}
.vlm-dep-frase{font-size:15px;font-weight:600;line-height:1.45;color:#243746}
.vlm-dep-orillas{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;line-height:1.45;color:#3D5261}
.vlm-dep-orillas li{position:relative;padding-left:17px}
.vlm-dep-orillas .vlm-dep-dot{position:absolute;left:0;top:6px;width:9px;height:9px}
.vlm-dep-orillas strong{font-weight:700;color:#243746;white-space:nowrap}
.vlm-dep-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:auto;padding-top:9px;border-top:1px solid rgba(36,55,70,.1)}
.vlm-dep-ver{appearance:none;border:1px solid #243746;border-radius:999px;background:transparent;color:#243746;font:700 12px/1 'Poppins',system-ui,sans-serif;padding:7px 12px;cursor:pointer}
.vlm-dep-ver:hover{background:#243746;color:#F7F2E8}
.vlm-dep-link{font-size:12.5px;font-weight:600;color:#47637A;text-decoration:underline;text-underline-offset:2px}
.vlm-dep-link:hover{color:#243746}
.vlm-dep-nota{margin-top:14px !important;max-width:86ch;font-size:12.5px;line-height:1.55;color:#5A6E7D}
.vlm-dep-none{font-size:14.5px;line-height:1.55;color:#3D5261}
.vlm-dep-sin{margin-top:18px !important;padding:16px 18px;border-radius:14px;background:#fff;border:1px dashed rgba(36,55,70,.3);max-width:70ch}
.vlm-dep-sin a{text-decoration:underline;font-weight:600}

/* ---------- Mejores horas ---------- */
.vlm-dep-horas{margin-top:clamp(30px,5vw,48px);scroll-margin-top:calc(34px + clamp(60px,7vw,76px) + 14px)}
.vlm-dep-ctrl{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin-top:16px}
.vlm-dep-field{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#47637A}
.vlm-dep-field select{appearance:auto;min-width:210px;padding:9px 12px;border-radius:10px;border:1px solid rgba(36,55,70,.3);background:#fff;color:#243746;font:600 14px/1.2 'Poppins',system-ui,sans-serif;text-transform:none;letter-spacing:0}
.vlm-dep-seg{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:rgba(36,55,70,.1)}
.vlm-dep-seg button{appearance:none;border:0;border-radius:8px;padding:8px 13px;background:transparent;color:#243746;font:600 13.5px/1 'Poppins',system-ui,sans-serif;text-transform:none;letter-spacing:0;cursor:pointer;white-space:nowrap}
.vlm-dep-seg button[aria-pressed="true"]{background:#243746;color:#F7F2E8}
.vlm-dep-seg button:disabled{opacity:.4;cursor:not-allowed}
.vlm-dep-field select:focus-visible,.vlm-dep-seg button:focus-visible,.vlm-dep-dia:focus-visible,.vlm-dep-ver:focus-visible{outline:3px solid #6B8FA8;outline-offset:2px}

.vlm-dep-dias{display:flex;gap:8px;margin-top:18px;padding:2px 2px 6px;overflow-x:auto;scrollbar-width:thin}
.vlm-dep-dia{flex:1 0 108px;max-width:190px;appearance:none;display:flex;flex-direction:column;gap:7px;padding:9px 10px 10px;border-radius:12px;border:1px solid rgba(36,55,70,.16);background:#fff;color:#243746;font:700 13px/1.1 'Poppins',system-ui,sans-serif;text-align:left;cursor:pointer}
.vlm-dep-dia[aria-pressed="true"]{border-color:#243746;box-shadow:inset 0 0 0 1px #243746;background:#FCFAF5}
/* Tira del día: una celda por hora con luz, del color de esa hora. */
.vlm-dep-tira{display:flex;gap:1px;height:12px;border-radius:4px;overflow:hidden;background:#E3E7EA}
.vlm-dep-tira i{flex:1;background:#C9CFD3}
.vlm-dep-tira i[data-n="v"]{background:#2E9E5B}
.vlm-dep-tira i[data-n="a"]{background:#E8A21C}
.vlm-dep-tira i[data-n="r"]{background:#E7B5B0}
.vlm-dep-resumen{margin-top:14px !important;font-size:15px;font-weight:600;line-height:1.45}
.vlm-dep-resumen:empty{display:none}

.vlm-dep-tabla-wrap{margin-top:10px;overflow-x:auto;border-radius:14px;border:1px solid rgba(36,55,70,.14);background:#fff}
.vlm-dep-tabla-wrap>.vlm-dep-none{padding:16px 18px}
.vlm-dep-tabla{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.vlm-dep-tabla th,.vlm-dep-tabla td{padding:9px 12px;text-align:left;white-space:nowrap}
.vlm-dep-tabla thead th{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#5A6E7D;background:#F2EDE1;border-bottom:1px solid rgba(36,55,70,.14)}
.vlm-dep-tabla tbody th{font-weight:700;position:sticky;left:0;background:inherit}
.vlm-dep-tabla tbody tr{background:#fff}
.vlm-dep-tabla tbody tr+tr th,.vlm-dep-tabla tbody tr+tr td{border-top:1px solid rgba(36,55,70,.08)}
.vlm-dep-tabla tbody tr[data-n="v"]{background:#E4F5EA}
.vlm-dep-tabla tbody tr[data-n="a"]{background:#FFF5DC}
.vlm-dep-tabla tbody tr[data-n="r"]{background:#FCF1EF}
.vlm-dep-tabla .vlm-dep-hora{display:inline-flex;align-items:center;gap:8px}
.vlm-dep-tabla .vlm-dep-f{margin-left:5px;font-size:11px;font-weight:700;color:#5A6E7D}
.vlm-dep-tabla .vlm-dep-flecha{vertical-align:-3px;margin-right:5px;color:#47637A}
.vlm-dep-tabla td.vlm-dep-val{white-space:normal;min-width:190px;font-weight:600}
.vlm-dep-tabla tr[data-n="v"] td.vlm-dep-val{color:#145C33}
.vlm-dep-tabla tr[data-n="a"] td.vlm-dep-val{color:#7A5200}
.vlm-dep-tabla tr[data-n="r"] td.vlm-dep-val{color:#8F2219}
.vlm-dep-leyenda{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:#3D5261}
.vlm-dep-leyenda li{display:inline-flex;align-items:center;gap:6px}

/* ---------- Beaufort en la leyenda del mapa ---------- */
/* La pone mapa-deportes.js bajo la escala de viento: el mismo tramo que la
   barra de color, partido por fuerza. */
.vlm-dep-bft{margin-top:7px}
.vlm-dep-bft[hidden]{display:none}
.vlm-dep-bft-row{display:flex;gap:1px;border-radius:4px;overflow:hidden}
.vlm-dep-bft-row span{display:block;padding:2px 0;background:rgba(247,242,232,.14);color:#F7F2E8;font-size:9.5px;font-weight:700;line-height:1.2;text-align:center;font-variant-numeric:tabular-nums;overflow:hidden}
.vlm-dep-bft-title{margin:0 0 3px;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(247,242,232,.6)}

@media (max-width:640px){
  /* Dos líneas por deporte y más alto, para que el asistente flotante (que
     en móvil se sienta encima del menú inferior) quepa en el hueco de la
     derecha sin pisar el reproductor del mapa. */
  .vlm-dep-strip{min-height:64px;gap:8px;padding:6px 10px}
  .vlm-dep-strip-title{font-size:10px;line-height:1.3;white-space:normal;width:58px}
  .vlm-dep-chip{flex-direction:column;align-items:flex-start;gap:2px;padding:7px 11px 7px 24px;border-radius:12px;position:relative;font-size:12px}
  .vlm-dep-chip .vlm-dep-dot{position:absolute;left:9px;top:10px;width:9px;height:9px}
  .vlm-dep-chip-txt{font-size:10.5px}
  .vlm-dep-up{position:static;display:inline-block;margin-top:12px}
  .vlm-dep-cards{grid-template-columns:1fr;gap:10px}
  .vlm-dep-card{padding:14px 14px 12px}
  .vlm-dep-field{flex:1 1 100%}
  .vlm-dep-field select{width:100%}
  .vlm-dep-seg{display:flex}
  .vlm-dep-seg button{flex:1}
  .vlm-dep-dia{flex:0 0 96px}
  .vlm-dep-tabla th,.vlm-dep-tabla td{padding:8px 9px}
  .vlm-dep-tabla{font-size:13px}
  /* En móvil la tabla ya se desplaza de lado: la valoración en una línea
     para que las filas no doblen de alto. */
  .vlm-dep-tabla td.vlm-dep-val{white-space:nowrap;min-width:0}
}
/* En el mapa el globo de saludo de Hipo tapaba el final de la franja de
   deportes: aquí no sale (el botón del asistente sigue en su sitio). */
.vlm-asis-globo{display:none !important}


/* ---------- Tabla de previsión hora a hora (bloque #prevision) ---------- */
.vlm-prev{background:#fff;border-bottom:1px solid rgba(36,55,70,.12)}
.vlm-prev-modelo-nota{margin-top:8px !important;font-size:12.5px;line-height:1.5;color:#5A6E7D}
.vlm-prev-modelo-nota:empty{display:none}
.vlm-prev-ahora{margin-top:14px !important;padding:10px 14px;border-radius:10px;background:#243746;color:#F7F2E8;font-size:14px;font-weight:600;line-height:1.5}
.vlm-prev-ahora[hidden]{display:none}
.vlm-prev-scroll{margin-top:12px;overflow-x:auto;border-radius:14px;border:1px solid rgba(36,55,70,.16);background:#fff;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.vlm-prev-scroll:focus-visible{outline:3px solid #6B8FA8;outline-offset:2px}
.vlm-prev-scroll>.vlm-dep-none{padding:16px 18px}
.vlm-prev-tabla{border-collapse:separate;border-spacing:0;font-size:12.5px;font-variant-numeric:tabular-nums;color:#16242E}
.vlm-prev-tabla th,.vlm-prev-tabla td{box-sizing:border-box;min-width:32px;height:30px;padding:0 3px;text-align:center;white-space:nowrap;border-bottom:1px solid rgba(36,55,70,.07)}
.vlm-prev-tabla td{font-weight:600}
.vlm-prev-tabla .vlm-prev-rot{position:sticky;left:0;z-index:2;min-width:104px;padding:0 10px;text-align:left;background:#F2EDE1;color:#243746;font-size:12px;font-weight:700;border-right:1px solid rgba(36,55,70,.16)}
.vlm-prev-tabla .vlm-prev-rot small{font-size:10.5px;font-weight:600;color:#5A6E7D}
.vlm-prev-dia{padding:0 !important;text-align:left !important;background:#243746;color:#F7F2E8;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-left:2px solid #fff}
.vlm-prev-dia span{position:sticky;left:114px;display:inline-block;padding:0 10px}
.vlm-prev-hora{background:#FBF8F1;color:#3D5261;font-size:11.5px;font-weight:700}
.vlm-prev-hora.es-noche,.vlm-prev-marca.es-noche{background:#DDE2E6;color:#5A6E7D}
.vlm-prev-hora.es-ahora{background:#DBC27A;color:#243746}
.vlm-prev-hora.es-corte{border-left:2px solid #243746}
.vlm-prev-fuerte td{font-size:13.5px;font-weight:800}
.vlm-prev-dir svg{vertical-align:-3px;color:#243746}
.vlm-prev-tierra{background:#FFE2A8;color:#7A4A00;font-weight:800}
.vlm-prev-lluvia{color:#1F5FA8}
.vlm-prev-tenue{color:#8A99A5;font-weight:500 !important}
.vlm-prev-vacio{color:#C3CCD3;font-weight:400 !important}
.vlm-prev-leyenda{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12.5px;color:#3D5261}
.vlm-prev-leyenda li{display:inline-flex;align-items:center;gap:7px}
.vlm-prev-escala{display:inline-block;width:92px;height:12px;border-radius:4px;border:1px solid rgba(36,55,70,.18);background:linear-gradient(90deg,#fff 0%,#AAE0EE 16%,#80D8AC 24%,#98D862 32%,#EEDE54 40%,#F5A846 50%,#EA644C 60%,#C6428E 76%,#843E98 100%)}
.vlm-prev-marca{display:inline-grid;place-items:center;min-width:24px;height:22px;border-radius:5px;font-size:11.5px;font-weight:700}
.vlm-prev.sin-datos .vlm-dep-ctrl,.vlm-prev.sin-datos .vlm-prev-leyenda{display:none}
@media (max-width:640px){
  .vlm-prev-tabla .vlm-prev-rot{min-width:84px;padding:0 7px;font-size:11.5px}
  .vlm-prev-dia span{left:92px}
  .vlm-prev-ahora{font-size:13.5px}
}

/* Dibujo de cada deporte (deporteIcono), en la franja y en las tarjetas. */
.vlm-dep-ico{flex:none}
.vlm-dep-chip-name{display:inline-flex;align-items:center;gap:6px}
.vlm-dep-chip-name .vlm-dep-ico{color:#DBC27A}
.vlm-dep-card h3{display:flex;align-items:center;gap:9px}
.vlm-dep-card h3 .vlm-dep-ico{color:#47637A}
/* El texto solo para lectores de pantalla de cada chip es absoluto: sin esto
   se salía del carril deslizable y ensanchaba la página. */
.vlm-dep-chip{position:relative}

/* Franja de deportes en el móvil (19-oct-2026): en cada chip, el punto del
   semáforo arriba y centrado, debajo el dibujo y debajo el nombre. Va al
   final porque dos reglas anteriores (el bloque «Dos líneas por deporte» y
   .vlm-dep-chip-name en fila) lo deshacían y el chip se desbordaba. */
@media (max-width:640px){
  .vlm-dep-strip-list .vlm-dep-chip{flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding:6px 2px 7px;font-size:10px}
  .vlm-dep-strip-list .vlm-dep-chip .vlm-dep-dot{position:static;flex:none;width:7px;height:7px;margin:0}
  .vlm-dep-strip-list .vlm-dep-chip-name{display:flex;flex-direction:column;align-items:center;gap:3px;max-width:100%;font-size:10px;line-height:1.1}
  .vlm-dep-strip-list .vlm-dep-chip-name svg{width:19px;height:19px}
}