/* =====================================================================
   css/visor.css — Llanes 360°: página anfitriona de los dos visores
   (costa.html = visor costero · llanes.html = visor de todo el concejo)

   Qué cubre
     1. Fichas de diseño (radios, sombras y los dos colores de capa)
     2. Barra superior con las cuatro secciones
     3. Mapa, tira de capas y panel lateral (lista de playas o de zonas)
     4. Galería «desde el aire», pines y tarjeta al pasar el ratón
        (lo que en Bareyo ponía el puente del kit; aquí va junto)
     5. Visor a pie de calle (Street View incrustado)
     6. Avisos, móvil y movimiento reducido

   Colores de capa (los mismos que usa la app Descubre Llanes):
     dron  → violeta  --vl-dron
     calle → cian     --vl-calle
   El resto sale del tema de Llanes (css/tema-llanes.css, generado por
   Clotitec Design OS): no se inventan colores aquí.
   ===================================================================== */

:root {
    --vl-dron: #6D28D9;
    --vl-dron-oscuro: #5B21B6;
    --vl-dron-tinte: #EDE9FE;
    --vl-calle: #0E7490;
    --vl-calle-oscuro: #155E75;
    --vl-calle-tinte: #CFFAFE;
    --vl-barra-h: 56px;
    --vl-panel-w: 348px;
    --g3-radio-pildora: 999px;
    --g3-radio-tarjeta: 18px;
    --g3-radio-hoja: 22px;
    --g3-radio-boton: 14px;
    --g3-radio-fila: 12px;
    --g3-sombra: 0 3px 12px rgba(var(--g3-sombra-rgb, 6,61,51), .2), 0 1px 3px rgba(var(--g3-sombra-rgb, 6,61,51), .12);
    --g3-sombra-compacta: 0 3px 12px rgba(var(--g3-sombra-rgb, 6,61,51), .2), 0 1px 3px rgba(var(--g3-sombra-rgb, 6,61,51), .12);
    --g3-sombra-hoja-centrada: 0 10px 30px rgba(var(--g3-sombra-rgb, 6,61,51), .28), 0 2px 6px rgba(var(--g3-sombra-rgb, 6,61,51), .16);
    --g3-velo: rgba(var(--g3-velo-rgb, 4,42,35), .5);
    --aereo-color: var(--vl-dron);
    --aereo-color-oscuro: var(--vl-dron-oscuro);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: var(--g3-fuente-texto, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
    color: var(--g3-texto, #14231a); background: var(--g3-fondo, #fcfaf6);
    -webkit-font-smoothing: antialiased; overflow: hidden;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--g3-foco, #E2211C); outline-offset: 2px; }
.vl-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── 2. Barra superior ─────────────────────────────────────────────────── */
.vl-barra {
    position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: var(--vl-barra-h);
    display: flex; align-items: center; gap: 16px; padding: 0 16px;
    background: var(--g3-marca, #0a6355); color: #fff;
}
.vl-marca { display: flex; align-items: baseline; gap: 8px; flex: none; color: #fff; text-decoration: none; }
.vl-marca b { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.vl-marca span { font-size: 12.5px; opacity: .85; }
.vl-secciones { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.vl-secciones::-webkit-scrollbar { display: none; }
.vl-secciones a {
    flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border-radius: var(--g3-radio-pildora); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px;
}
.vl-secciones a:hover { background: rgba(255,255,255,.14); }
.vl-secciones a[aria-current="page"] { background: #fff; color: var(--g3-marca, #0a6355); }

/* ── 3. Mapa, capas y panel ────────────────────────────────────────────── */
#map { position: fixed; top: var(--vl-barra-h); left: var(--vl-panel-w); right: 0; bottom: 0; background: var(--g3-tinte, #e2f2ee); }

.vl-panel {
    position: fixed; z-index: 30; top: var(--vl-barra-h); left: 0; bottom: 0; width: var(--vl-panel-w);
    display: flex; flex-direction: column; background: var(--g3-superficie, #fff);
    border-right: 1px solid var(--g3-linea, #dcebe7);
}
.vl-panel-cab { padding: 18px 18px 12px; border-bottom: 1px solid var(--g3-linea, #dcebe7); }
.vl-panel-cab h1 { margin: 0 0 6px; font-size: 21px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.vl-panel-cab p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--g3-texto-suave, #5b6b60); }
.vl-cifras { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.vl-cifra { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--g3-radio-pildora); font-size: 12.5px; font-weight: 700; }
.vl-cifra[data-capa="dron"] { background: var(--vl-dron-tinte); color: var(--vl-dron-oscuro); }
.vl-cifra[data-capa="calle"] { background: var(--vl-calle-tinte); color: var(--vl-calle-oscuro); }
.vl-cifra svg { width: 14px; height: 14px; }
.vl-lista { flex: 1 1 auto; overflow-y: auto; padding: 8px; margin: 0; list-style: none; overscroll-behavior: contain; }
.vl-lista-titulo { padding: 12px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g3-texto-suave, #5b6b60); }
.vl-fila {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 6px 8px;
    border: 0; border-radius: var(--g3-radio-fila); background: none; text-align: left; cursor: pointer;
}
.vl-fila:hover { background: var(--g3-tinte, #e2f2ee); }
.vl-fila.is-activa { background: var(--g3-tinte-activo, #c3e3db); }
.vl-fila img { flex: none; width: 76px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--vl-dron-tinte); }
.vl-fila-txt { min-width: 0; flex: 1 1 auto; }
.vl-fila-txt b { display: block; font-size: 14.5px; line-height: 1.25; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-fila-txt small { display: block; margin-top: 2px; font-size: 12px; color: var(--g3-texto-suave, #5b6b60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-fila-n { flex: none; min-width: 30px; padding: 4px 8px; border-radius: var(--g3-radio-pildora); background: var(--vl-dron-tinte); color: var(--vl-dron-oscuro); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.vl-panel-pie { padding: 10px 18px 12px; border-top: 1px solid var(--g3-linea, #dcebe7); font-size: 11.5px; line-height: 1.4; color: var(--g3-texto-suave, #5b6b60); }
.vl-panel-pie a { color: var(--g3-marca-2, #0a7560); }

/* Tira de capas, sobre el mapa */
.floating-overlays {
    position: fixed; z-index: 28; top: calc(var(--vl-barra-h) + 12px); left: calc(var(--vl-panel-w) + 12px); right: 64px;
    display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none;
}
.floating-pill {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
    border: 0; border-radius: var(--g3-radio-pildora); cursor: pointer;
    background: var(--g3-superficie, #fff); color: var(--g3-texto, #14231a); font-weight: 700; font-size: 14px;
    box-shadow: var(--g3-sombra);
}
.floating-pill svg { width: 18px; height: 18px; flex: none; }
.floating-pill-count { font-variant-numeric: tabular-nums; font-weight: 700; opacity: .8; }
.floating-pill[aria-busy="true"] { opacity: .7; }
.floating-pill-aereo.active { background: var(--vl-dron); color: #fff; }
.floating-pill-calle.active { background: var(--vl-calle); color: #fff; }
.floating-pill-base.active { background: var(--g3-marca, #0a6355); color: #fff; }
.vl-boton-lista { display: none; }

/* ── 4. Galería, pines y tarjeta al pasar ──────────────────────────────── */
.aereo-galeria {
    position: fixed; z-index: 29; left: calc(var(--vl-panel-w) + 16px); right: 16px; bottom: max(28px, var(--aereo-sobre-dock, 0px));
    display: none; flex-direction: column; gap: 8px; pointer-events: none;
}
.aereo-galeria.active { display: flex; }
.aereo-galeria-cab {
    align-self: flex-start; pointer-events: auto;
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px 0 14px;
    border-radius: var(--g3-radio-pildora); background: var(--vl-dron); color: #fff;
    font-weight: 700; font-size: 13px; line-height: 1; box-shadow: var(--g3-sombra);
}
.aereo-galeria-cab svg { width: 16px; height: 16px; }
.aereo-galeria-cab b { font-variant-numeric: tabular-nums; opacity: .85; font-weight: 700; }
.aereo-galeria-cerrar { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; display: grid; place-items: center; position: relative; }
.aereo-galeria-cerrar::before { content: ""; position: absolute; inset: -8px; }
.aereo-galeria-cerrar svg { width: 14px; height: 14px; }
.aereo-galeria-tira {
    pointer-events: auto; display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.aereo-galeria-tira::-webkit-scrollbar { display: none; }
.aereo-item {
    flex: 0 0 auto; width: 208px; padding: 0; border: 0; cursor: pointer; text-align: left;
    border-radius: var(--g3-radio-tarjeta); overflow: hidden; background: var(--g3-superficie, #fff); scroll-snap-align: start;
    box-shadow: var(--g3-sombra);
}
.aereo-item img { display: block; width: 100%; height: 117px; object-fit: cover; background: var(--vl-dron-tinte); }
.aereo-item span { display: block; padding: 8px 12px 0; font-weight: 700; font-size: 12.5px; line-height: 1.25; color: var(--g3-texto, #14231a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aereo-item small { display: block; padding: 2px 12px 10px; font-size: 11.5px; color: var(--g3-texto-suave, #5b6b60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aereo-item span:last-child { padding-bottom: 10px; }
.aereo-item:hover img, .aereo-item:focus-visible img { filter: saturate(1.1) brightness(1.04); }
.aereo-item.is-activa { box-shadow: 0 0 0 3px var(--vl-dron), var(--g3-sombra); }

.aereo-pin { width: 54px; height: 54px; cursor: pointer; border: 0; padding: 0; background: none; }
.aereo-pin-img {
    display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    border: 3px solid #fff; background: var(--vl-dron-tinte);
    box-shadow: 0 0 0 2px var(--vl-dron), 0 6px 16px rgba(var(--g3-sombra-rgb, 6,61,51), .32);
}
.aereo-pin:hover .aereo-pin-img, .aereo-pin:focus-visible .aereo-pin-img, .aereo-pin.is-activa .aereo-pin-img { box-shadow: 0 0 0 4px var(--vl-dron), 0 6px 16px rgba(var(--g3-sombra-rgb, 6,61,51), .38); }
/* Nombre bajo el pin (js/aereo.js: rotulaPines). Se ve a partir de un zoom, si no pisa a otro, y siempre con el ratón o el foco encima. */
.aereo-pin-rotulo {
    display: none; position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); z-index: 1;
    max-width: 200px; padding: 3px 9px; border-radius: var(--g3-radio-pildora); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: rgba(255,255,255,.95); color: var(--g3-texto, #14231a); font: 700 12px/1.25 var(--g3-fuente-titulo, 'Inter', system-ui, sans-serif);
    box-shadow: 0 1px 5px rgba(var(--g3-sombra-rgb, 6,61,51), .35); pointer-events: none;
}
body.aereo-rotulos .aereo-pin:not(.is-sin-rotulo) .aereo-pin-rotulo, .aereo-pin:hover .aereo-pin-rotulo, .aereo-pin:focus-visible .aereo-pin-rotulo { display: block; }
.aereo-pin:hover, .aereo-pin:focus-visible { z-index: 2; }
body.aereo-pin-grande .aereo-pin { width: 68px; height: 68px; }
body.aereo-pin-grande.aereo-lejos .aereo-pin { width: 54px; height: 54px; }

.f360-viewer-tipo {
    display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding: 5px 10px;
    border-radius: var(--g3-radio-pildora); background: var(--g3-tinte, #e2f2ee); color: var(--g3-marca, #0a6355);
    font-weight: 700; font-size: 10.5px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px;
}
.f360-viewer-tipo[data-tipo="aereo"] { background: var(--vl-dron-tinte); color: var(--vl-dron-oscuro); }
.f360-viewer-tipo[data-tipo="calle"] { background: var(--vl-calle-tinte); color: var(--vl-calle-oscuro); }
.f360-viewer-tipo svg { width: 13px; height: 13px; }
.f360-hover .maplibregl-popup-content { padding: 0; overflow: hidden; border-radius: var(--g3-radio-fila); box-shadow: var(--g3-sombra); background: var(--g3-superficie, #fff); }
.f360-hover .maplibregl-popup-tip { border-top-color: var(--g3-superficie, #fff); border-bottom-color: var(--g3-superficie, #fff); }
.f360-hover-img { display: block; width: 220px; height: 124px; object-fit: cover; background: var(--g3-tinte, #e2f2ee); }
.f360-hover-pie { display: flex; align-items: center; gap: 6px; padding: 7px 10px 8px; font-weight: 700; font-size: 10.5px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--g3-marca, #0a6355); }
.f360-hover-pie[data-tipo="aereo"] { color: var(--vl-dron-oscuro); }
.f360-hover-pie svg { width: 13px; height: 13px; flex: none; }

/* Botón «Capturar esta vista» del visor (lo añade js/visor.js a las herramientas) */
.aereo-captura svg { width: 20px; height: 20px; }

/* ── 5. Visor a pie de calle ───────────────────────────────────────────── */
.calle-visor {
    position: fixed; inset: 0; z-index: 64; display: none; padding: 24px;
    background: var(--g3-velo);
}
.calle-visor.active { display: flex; }
.calle-hoja {
    position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--g3-radio-hoja); background: var(--g3-superficie, #fff); box-shadow: var(--g3-sombra-hoja-centrada);
}
.calle-cab { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 8px 8px 18px; }
.calle-cab h2 { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calle-cab small { display: block; font-size: 12px; font-weight: 500; color: var(--g3-texto-suave, #5b6b60); }
.calle-btn {
    flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
    background: var(--g3-tinte, #e2f2ee); color: var(--g3-marca, #0a6355);
}
.calle-btn:hover { background: var(--g3-tinte-hover, #d3ebe5); }
.calle-btn svg { width: 20px; height: 20px; }
.calle-marco { flex: 1 1 auto; width: 100%; border: 0; background: var(--g3-marca-oscura, #042a23); }
.calle-pie { padding: 8px 18px 10px; font-size: 11.5px; color: var(--g3-texto-suave, #5b6b60); }

/* ── 6. Avisos, móvil y movimiento reducido ────────────────────────────── */
.vl-aviso {
    position: fixed; z-index: 120; left: 50%; bottom: 28px; transform: translateX(-50%);
    max-width: min(92vw, 460px); padding: 12px 18px; border-radius: var(--g3-radio-boton);
    background: var(--g3-texto, #14231a); color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--g3-sombra);
}
.vl-aviso[hidden] { display: none; }

@media (max-width: 900px) {
    :root { --vl-panel-w: 0px; }
    .vl-marca span { display: none; }
    .vl-barra { gap: 8px; padding: 0 8px 0 12px; }
    .vl-secciones a { padding: 0 11px; font-size: 13.5px; }
    .vl-panel {
        width: auto; right: 0; top: auto; bottom: 0; max-height: 62vh; border-right: 0;
        border-radius: var(--g3-radio-hoja) var(--g3-radio-hoja) 0 0; box-shadow: var(--g3-sombra-hoja-centrada);
        transform: translateY(100%); visibility: hidden; transition: transform .22s ease, visibility 0s .22s;
        z-index: 45; padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    body.vl-lista-abierta .vl-panel { transform: none; visibility: visible; transition: transform .22s ease; }
    .floating-overlays { left: 8px; right: 56px; top: calc(var(--vl-barra-h) + 8px); gap: 6px; }
    .floating-pill { padding: 0 12px; font-size: 13px; }
    .vl-boton-lista { display: inline-flex; }
    .aereo-galeria { left: 8px; right: 8px; bottom: 18px; }
    .aereo-item { width: 150px; }
    .aereo-item img { height: 84px; }
    .calle-visor { padding: 0; }
    .calle-hoja { border-radius: 0; }
}
@media (max-width: 420px) {
    .floating-pill-label-larga { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .vl-panel { transition: none; }
}