/* =================================================================
   lamosquita-lightbox · aspecto
   -----------------------------------------------------------------
   AJUSTES: las variables de abajo. Se pueden cambiar por web desde el
   CSS del theme sin tocar este fichero:
       .lmq-lb { --lmq-lb-fondo: rgb(20 20 20 / .95); }
   ================================================================= */

.lmq-lb {
    /* ── AJUSTES ─────────────────────────────────────────────── */
    --lmq-lb-fondo:    rgb(0 0 0 / .9);     /* detrás de la foto */
    --lmq-lb-color:    #fff;                /* botones, contador y pie */
    --lmq-lb-margen:   20px;                /* de la foto al borde */
    --lmq-lb-duracion: .3s;                 /* al pasar de foto */
    --lmq-lb-boton:    48px;                /* zona que se puede tocar */
    /* el pie */
    --lmq-lb-pie-color:  #f2f2f2;           /* título */
    --lmq-lb-pie-suave:  #b5b5b5;           /* descripción */
    --lmq-lb-pie-datos:  #8a8a8a;           /* datos de la toma */
    --lmq-lb-pie-alto:   33vh;              /* como mucho; si no cabe, se desplaza */
    /* el paspartú (Ajustes › Visor y ventanas › «en un paspartú blanco») */
    --lmq-lb-paspartu:        #fff;
    --lmq-lb-paspartu-borde:  14px;
    --lmq-lb-paspartu-color:  #222;
    --lmq-lb-paspartu-suave:  #555;
    --lmq-lb-paspartu-datos:  #888;
    /* ── fin de AJUSTES ──────────────────────────────────────── */
}

/* --- La capa: toda la pantalla ----------------------------------- */
.lmq-lb {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--lmq-lb-fondo);
    color: var(--lmq-lb-color);
    font: 14px/1.4 system-ui, sans-serif;
    -webkit-user-select: none;
    user-select: none;
}
.lmq-lb::backdrop { background: transparent; }
.lmq-lb:not([open]) { display: none; }

/* --- Tres fotos en fila: la anterior, la actual y la siguiente --- */
.lmq-lb__pista {
    position: absolute;
    inset: 0;
    touch-action: none;           /* el dedo lo gestiona el JS: pasar, pellizcar, mover */
}
.lmq-lb__pista.es-animando { transition: transform var(--lmq-lb-duracion) ease-out; }
.lmq-lb__foto {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--lmq-lb-margen);
    box-sizing: border-box;
    overflow: hidden;
}
.lmq-lb__foto:nth-child(1) { transform: translateX(-100%); }
.lmq-lb__foto:nth-child(3) { transform: translateX(100%); }
/* Foto y pie juntos; el JS da a la foto el tamaño para que quepan los dos */
.lmq-lb__marco {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}
.lmq-lb__foto img {
    display: block;
    max-width: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .2s;
    transform-origin: 50% 50%;
    will-change: transform;
    -webkit-user-drag: none;
}
.lmq-lb__foto img.es-cargada { opacity: 1; }
.lmq-lb__foto img.es-zoom { cursor: grab; }
.lmq-lb__foto img.es-animando { transition: opacity .2s, transform .25s ease-out; }

/* --- Botones, contador y pie ------------------------------------- */
.lmq-lb button {
    position: absolute;
    z-index: 1;
    width: var(--lmq-lb-boton);
    height: var(--lmq-lb-boton);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: 300 32px/1 system-ui, sans-serif;
    text-shadow: 0 1px 4px rgb(0 0 0 / .6);
    cursor: pointer;
    opacity: .8;
}
.lmq-lb button:hover, .lmq-lb button:focus-visible { opacity: 1; }
.lmq-lb button:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.lmq-lb button[disabled], .lmq-lb button[hidden] { display: none; }
.lmq-lb__cerrar    { top: 0; right: 0; }
.lmq-lb__anterior  { left: 0; top: calc(50% - var(--lmq-lb-boton) / 2); }
.lmq-lb__siguiente { right: 0; top: calc(50% - var(--lmq-lb-boton) / 2); }

.lmq-lb__contador {
    position: absolute;
    top: 0;
    left: 0;
    padding: 14px 16px;
    opacity: .8;
    font-variant-numeric: tabular-nums;
}
/* --- El pie, debajo de la foto y de su mismo ancho ---------------- */
.lmq-lb__pie {
    width: 0;
    min-width: 100%;          /* tan ancho como la foto, ni más */
    box-sizing: border-box;
    max-height: var(--lmq-lb-pie-alto);
    flex-shrink: 0;           /* el sitio se lo quita la foto, no el pie */
    overflow: auto;
    padding-top: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--lmq-lb-pie-color);
    -webkit-user-select: text;
    user-select: text;
}
.lmq-lb__pie:empty { display: none; }
.lmq-lb__titulo      { display: block; font-weight: 600; }
.lmq-lb__descripcion { display: block; color: var(--lmq-lb-pie-suave); font-size: 13px; white-space: pre-line; }
.lmq-lb__datos       { display: block; color: var(--lmq-lb-pie-datos); font-size: 12px; margin-top: 2px; }

/* Paspartú: foto y pie en un recuadro blanco */
.lmq-lb--paspartu .lmq-lb__marco { background: var(--lmq-lb-paspartu); padding: var(--lmq-lb-paspartu-borde); }
.lmq-lb--paspartu .lmq-lb__pie { color: var(--lmq-lb-paspartu-color); }
.lmq-lb--paspartu .lmq-lb__descripcion { color: var(--lmq-lb-paspartu-suave); }
.lmq-lb--paspartu .lmq-lb__datos { color: var(--lmq-lb-paspartu-datos); }
.lmq-lb--paspartu.es-zoom .lmq-lb__foto:nth-child(2) .lmq-lb__marco { background: transparent; }

/* Con zoom, sólo la foto y el botón de cerrar */
.lmq-lb.es-zoom .lmq-lb__pie,
.lmq-lb.es-zoom .lmq-lb__anterior,
.lmq-lb.es-zoom .lmq-lb__siguiente { visibility: hidden; }

/* En pantallas táctiles se pasa con el dedo: fuera las flechas */
@media (hover: none) and (pointer: coarse) {
    .lmq-lb__anterior, .lmq-lb__siguiente { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lmq-lb { --lmq-lb-duracion: 0s; }
    .lmq-lb__foto img { transition: none; }
}