/* ═══════════════════════════════════════════════════════════════════
   rwe-gallery-paged — CSS de la galería paginada con lightbox
   R1: sacado del <style> inline (#uid scope).

   NOTAS:
   - El CSS del lightbox se incluye SIEMPRE (antes iba dentro de `if lightbox`).
     No molesta si el lightbox no se usa: los elementos -lb no existen en el HTML.
   - El JS usa getElementById(uid) y getElementById(uid+'-lb') + clases fijas
     .rwgp-* (sin uid). Por eso el wrapper conserva su id y sus dos ids -lb;
     las clases pasan a colgar de .rwgp-wrap.
   - `aspect-ratio` y `object-fit` se resuelven en PHP (uno era ternario) y se
     pasan como variables ya listas.

   Variables (inyectadas en el wrapper .rwgp-wrap):
     --rwgp-cols / -cols-t / -cols-m   columnas
     --rwgp-gap        separación px
     --rwgp-radius     radio px
     --rwgp-aspect     aspect-ratio del item (o 'auto') [calculado en PHP]
     --rwgp-objfit     object-fit de la imagen
     --rwgp-count-c    color del contador
     --rwgp-btn-bg     fondo del botón "ver más"
     --rwgp-btn-col    texto del botón
     --rwgp-lb-bg      fondo del lightbox
   ═══════════════════════════════════════════════════════════════════ */

.rwgp .rwgp-grid{ display:grid; grid-template-columns:repeat(var(--rwgp-cols,3),1fr); gap:var(--rwgp-gap,16px); }
.rwgp .rwgp-item{ display:block; overflow:hidden; border-radius:var(--rwgp-radius,8px); aspect-ratio:var(--rwgp-aspect,auto); background:#16264d; cursor:pointer; position:relative; }
.rwgp .rwgp-item img{ width:100%; height:100%; object-fit:var(--rwgp-objfit,cover); display:block; transition:transform .4s ease; }
.rwgp .rwgp-item:hover img{ transform:scale(1.06); }
.rwgp .rwgp-hidden{ display:none; }
.rwgp .rwgp-more-wrap{ text-align:center; margin-top:28px; }
.rwgp .rwgp-count{ display:block; color:var(--rwgp-count-c,#8a9bc4); font-size:14px; margin-bottom:14px; font-family:sans-serif; }
.rwgp .rwgp-more{ background:var(--rwgp-btn-bg,#7ec242); color:var(--rwgp-btn-col,#0d1b3e); border:none; padding:13px 32px; border-radius:6px; font-weight:700; font-size:15px; cursor:pointer; font-family:sans-serif; transition:transform .2s, opacity .2s; }
.rwgp .rwgp-more:hover{ transform:translateY(-2px); }
.rwgp .rwgp-more:disabled{ opacity:.4; cursor:default; transform:none; }
@media(max-width:1024px){ .rwgp .rwgp-grid{ grid-template-columns:repeat(var(--rwgp-cols-t,2),1fr); } }
@media(max-width:600px){  .rwgp .rwgp-grid{ grid-template-columns:repeat(var(--rwgp-cols-m,1),1fr); } }

/* Lightbox (los ids -lb conservan el uid; el JS los usa por id) */
.rwgp .rwgp-lb{ display:none; position:fixed; inset:0; z-index:99999; background:var(--rwgp-lb-bg,rgba(10,21,48,.95)); align-items:center; justify-content:center; }
.rwgp .rwgp-lb.open{ display:flex; }
.rwgp .rwgp-lb .rwgp-lb-img{ max-width:90vw; max-height:88vh; object-fit:contain; border-radius:6px; }
.rwgp .rwgp-lb .rwgp-lb-close{ position:absolute; top:20px; right:30px; color:#fff; font-size:42px; cursor:pointer; line-height:1; }
.rwgp .rwgp-lb .rwgp-lb-prev,
.rwgp .rwgp-lb .rwgp-lb-next{ position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:60px; cursor:pointer; padding:0 24px; user-select:none; }
.rwgp .rwgp-lb .rwgp-lb-prev{ left:10px; }
.rwgp .rwgp-lb .rwgp-lb-next{ right:10px; }