/* =====================================================================
   css/ver.css — Llanes 360°: lo que hace de esto un «alojamiento de 360°»
   Se carga después de css/visor.css (fichas de diseño) y css/aereo.css.

   Qué cubre
     1. Hoja «Compartir»: enlace y código para insertar (js/compartir.js)
     2. ver.html: el visor a pantalla completa, también dentro de un iframe
     3. galeria.html: todas las panorámicas en una rejilla con buscador

   Colores: los del tema de Llanes (--g3-*) y el violeta de la capa de dron
   (--vl-dron). No se inventa ninguno.
   ===================================================================== */

/* ── 1. Hoja «Compartir» ───────────────────────────────────────────────── */
.vl-compartir {
    width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); margin: auto; padding: 20px 20px 18px;
    border: 0; border-radius: var(--g3-radio-hoja, 22px); overflow: auto;
    background: var(--g3-superficie, #fff); color: var(--g3-texto, #14231a); box-shadow: var(--g3-sombra-hoja-centrada);
    font-family: var(--g3-fuente-texto, 'Inter', system-ui, sans-serif);
}
.vl-compartir::backdrop { background: var(--g3-velo, rgba(4, 42, 35, .5)); }
.vl-comp-cab { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.vl-comp-cab h2 { flex: 1 1 auto; margin: 0; font-size: 20px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.vl-comp-cerrar {
    flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
    border-radius: var(--g3-radio-pildora, 999px); background: var(--g3-tinte, #e2f2ee); color: var(--g3-marca, #0a6355);
}
.vl-comp-cerrar svg { width: 18px; height: 18px; }
.vl-comp-que { margin: 0 0 14px; font-size: 14px; color: var(--g3-texto-suave, #5b6b60); }
.vl-comp-casilla { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 8px; font-size: 14.5px; cursor: pointer; }
.vl-comp-casilla input { width: 20px; height: 20px; margin: 0; accent-color: var(--vl-dron, #6D28D9); }
.vl-comp-rotulo { display: block; margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g3-texto-suave, #5b6b60); }
.vl-comp-fila { display: flex; align-items: stretch; gap: 8px; }
.vl-comp-fila input, .vl-comp-fila textarea {
    flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 11px 12px; resize: none;
    border: 1px solid var(--g3-borde, #cfe3dd); border-radius: var(--g3-radio-fila, 12px);
    background: var(--g3-campo, #f6faf9); color: var(--g3-texto, #14231a);
    font: 500 13px/1.45 ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
}
.vl-comp-copiar {
    flex: none; min-width: 88px; min-height: 46px; padding: 0 16px; border: 0; cursor: pointer;
    border-radius: var(--g3-radio-boton, 14px); background: var(--vl-dron, #6D28D9); color: #fff; font-weight: 700; font-size: 14px;
}
.vl-comp-copiar:hover { background: var(--vl-dron-oscuro, #5B21B6); }
.vl-comp-qr { display: flex; align-items: center; gap: 14px; }
.vl-comp-qr canvas {
    flex: none; width: 132px; height: 132px; border: 1px solid var(--g3-borde, #cfe3dd); border-radius: var(--g3-radio-fila, 12px);
    background: #fff; image-rendering: pixelated;
}
.vl-comp-qr canvas[hidden], .vl-comp-qr button[hidden] { display: none; }
.vl-comp-qr-lado { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.vl-comp-qr-que { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--g3-texto-suave, #5b6b60); }
.vl-comp-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.vl-comp-pie a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; font-weight: 700; color: var(--g3-marca-2, #0a7560); }
.vl-comp-pie [hidden] { display: none; }
.vl-comp-ok { min-height: 20px; margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--g3-marca-2, #0a7560); }
@media (max-width: 480px) {
    .vl-comp-fila { flex-direction: column; }
    .vl-comp-copiar { width: 100%; }
    .vl-comp-qr canvas { width: 108px; height: 108px; }
}

/* ── 2. ver.html: solo el visor ────────────────────────────────────────── */
html[data-modo="ver"] body { background: #1b2b14; }
html[data-modo="ver"] .aereo-visor {
    padding: 0; background: #1b2b14;
    --av-seg-t: env(safe-area-inset-top, 0px); --av-seg-r: env(safe-area-inset-right, 0px);
    --av-seg-b0: env(safe-area-inset-bottom, 0px); --av-seg-l: env(safe-area-inset-left, 0px);
}
html[data-modo="ver"] .aereo-visor-hoja { border-radius: 0; box-shadow: none; }
.ver-fondo { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #fff; }
.ver-fondo p { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.5; }
.ver-fondo a { color: #fff; font-weight: 700; }
/* Incrustada en otra web no hay a dónde «cerrar»: en su sitio va el enlace a la panorámica en grande */
html[data-incrustada="1"] .aereo-visor-cerrar { display: none; }
.ver-fuera { position: absolute; z-index: 7; top: calc(var(--av-borde) + var(--av-seg-t)); right: calc(var(--av-borde) + var(--av-seg-r)); text-decoration: none; }
/* En un hueco pequeño (un iframe de 300 px de alto) la cabecera se queda en el título */
@media (max-height: 380px) {
    html[data-modo="ver"] .aereo-visor-meta, html[data-modo="ver"] .aereo-visor-cab .f360-viewer-tipo { display: none; }
}

/* ── 3. galeria.html ───────────────────────────────────────────────────── */
.ga-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.ga-grupos { display: flex; flex-wrap: wrap; gap: 8px; }
.ga-campo { flex: 1 1 220px; min-width: 0; max-width: 360px; }
.ga-campo input, .ga-campo select {
    width: 100%; min-height: 44px; padding: 0 14px; font: inherit; font-size: 15px;
    border: 1px solid var(--g3-borde, #cfe3dd); border-radius: var(--g3-radio-boton, 14px);
    background: var(--g3-superficie, #fff); color: var(--g3-texto, #14231a);
}
.ga-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 14px 0 40px; padding: 0; list-style: none; }
.ga-rejilla li[hidden] { display: none; }
.ga-rejilla .fi-tarjeta { position: relative; }
.ga-rejilla .fi-tarjeta:hover img, .ga-rejilla .fi-tarjeta:focus-visible img { filter: saturate(1.08) brightness(1.05); }
.ga-360 {
    position: absolute; top: 8px; left: 8px; padding: 4px 9px; border-radius: var(--g3-radio-pildora, 999px);
    background: var(--vl-dron, #6D28D9); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.ga-vacia { margin: 24px 0 60px; font-size: 15px; color: var(--g3-texto-suave, #5b6b60); }
.ga-mas { display: flex; justify-content: center; margin: 0 0 48px; }
@media (max-width: 480px) {
    .ga-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ga-campo { max-width: none; }
}