/* Estilos de bin/mostrar.php — sitio 5toB */

:root { --azul:#0b3d91; --azul-suave:#4a6aa5; --menu:250px; --alto-tit:72px; --verde:#4e8a1f; --verde-osc:#2f5e10; --claro:#f4f9ea; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { font-family:"Segoe UI",Roboto,Arial,sans-serif; color:var(--azul);
       background:#eef5df url('../imagenes/Fondo.png') center/cover fixed; }

/* ---------- Menú lateral ---------- */
nav { position:fixed; top:0; left:0; bottom:0; width:var(--menu); overflow-y:auto; z-index:20;
      background:linear-gradient(180deg, rgba(47,94,16,.97), rgba(78,138,31,.95));
      color:#fff; padding:1.2rem .9rem; box-shadow:2px 0 12px rgba(0,0,0,.2); }
nav .logo { display:block; text-align:center; margin-bottom:1rem; }
nav .logo img { width:140px; max-width:100%; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
nav h3 { font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; opacity:.75; margin:1rem .5rem .4rem; }
nav ul { list-style:none; margin:0; padding:0; }
nav a { display:block; color:#fff; text-decoration:none; padding:.55rem .8rem; border-radius:8px;
        margin-bottom:2px; transition:background .15s; }
nav a:hover { background:rgba(255,255,255,.15); }
nav a.activo { background:#fff; color:var(--verde-osc); font-weight:700; }
nav .admin { margin-top:1.4rem; border-top:1px solid rgba(255,255,255,.3); padding-top:.8rem; }

/* ---------- Título fijo ---------- */
.titulo { position:fixed; top:0; left:var(--menu); right:0; height:var(--alto-tit); z-index:10;
          display:flex; align-items:center; padding:0 2rem;
          background:rgba(255,255,255,.88); backdrop-filter:blur(6px);
          border-bottom:4px solid var(--verde); box-shadow:0 2px 10px rgba(0,0,0,.08); }
.titulo h1 { margin:0; font-size:clamp(1.1rem, 2.4vw, 1.9rem); color:var(--verde-osc);
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Contenido ---------- */
main { margin-left:var(--menu); padding:calc(var(--alto-tit) + 1.5rem) 2rem 2rem; }
.galeria { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1.3rem; }
figure { margin:0; background:#fff; border-radius:10px; overflow:hidden; cursor:zoom-in;
         box-shadow:0 3px 12px rgba(0,0,0,.12); transition:transform .15s, box-shadow .15s; }
figure:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,.18); }
figure img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--claro); }
figcaption { padding:.6rem .8rem .8rem; }
.archivo { font-family:monospace; font-size:.8rem; color:var(--azul-suave); word-break:break-all; }
.tit-foto { font-weight:700; margin-top:.2rem; }
.desc { font-size:.9rem; margin-top:.2rem; color:var(--azul); }
.vacio, .bienvenida { background:rgba(255,255,255,.9); border-radius:10px; padding:2rem; text-align:center; }
.bienvenida img { max-width:100%; max-height:60vh; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.2); }

/* Bienvenidos con texto al costado de la imagen */
.bienvenida.con-texto { display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(280px, 1fr); gap:2.2rem;
                        align-items:center; text-align:left; padding:2rem 2.2rem; }
.bienvenida.con-texto .bienv-img { text-align:center; }
.bienvenida.con-texto .bienv-img img { max-height:72vh; }
.bienv-texto h2 { margin:0 0 .8rem; font-size:clamp(1.5rem, 2.4vw, 2.1rem); line-height:1.2; color:var(--verde-osc); }
.bienv-texto p { margin:0 0 1rem; font-size:1.15rem; line-height:1.7; color:var(--azul); }
.bienv-texto .boton-grande { margin-top:.6rem; }
@media (max-width:1000px) {
  .bienvenida.con-texto { grid-template-columns:1fr; gap:1.4rem; padding:1.4rem; }
}
.boton-grande { display:inline-block; margin-top:.4rem; padding:.8rem 1.6rem; border-radius:10px;
                background:var(--verde); color:#fff; font-size:1.15rem; font-weight:600; text-decoration:none;
                box-shadow:0 4px 12px rgba(0,0,0,.18); }
.boton-grande:hover { background:var(--verde-osc); }
nav .icono { display:inline-block; width:1.4em; }

/* ---------- Botonera de álbumes (vista "Nuestras Fotos") ---------- */
.indicacion { margin:0 0 1rem; font-size:1.1rem; font-weight:600; color:var(--verde-osc); }
.albumes-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1.2rem; }
.alb-boton { position:relative; display:block; border-radius:14px; overflow:hidden; text-decoration:none; color:#fff;
             aspect-ratio:4/3; background:var(--verde); box-shadow:0 4px 14px rgba(0,0,0,.18);
             transition:transform .15s, box-shadow .15s; }
.alb-boton:hover, .alb-boton:focus-visible { transform:translateY(-4px) scale(1.02); box-shadow:0 10px 24px rgba(0,0,0,.25); }
.alb-boton .portada, .alb-boton .portada img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.alb-boton .sin-portada { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
                          font-size:3.5rem; padding-bottom:3.2rem; background:linear-gradient(135deg, #3f7a17, #8bc34a); }
.alb-boton::after { content:""; position:absolute; inset:0;
                    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(20,40,5,.85) 100%); }
.alb-nombre { position:absolute; left:1rem; right:1rem; bottom:2.1rem; z-index:1;
              font-size:1.6rem; font-weight:800; text-shadow:0 2px 6px rgba(0,0,0,.5);
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alb-total { position:absolute; left:1rem; bottom:.8rem; z-index:1; font-size:.9rem; opacity:.9; }

/* Barra compacta de álbumes sobre la galería */
.albumes-barra { position:sticky; top:calc(var(--alto-tit) + .5rem); z-index:5;
                 display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.3rem; padding:.6rem;
                 background:rgba(255,255,255,.9); backdrop-filter:blur(6px); border-radius:12px;
                 box-shadow:0 3px 12px rgba(0,0,0,.1); }
.pill { padding:.45rem 1rem; border-radius:999px; text-decoration:none; font-weight:600;
        color:var(--verde-osc); background:var(--claro); border:1px solid #cfe3a9; transition:background .15s; }
.pill:hover { background:#e2f0c8; }
.pill.activo { background:var(--verde); border-color:var(--verde); color:#fff; }
.pill.volver { background:var(--verde-osc); border-color:var(--verde-osc); color:#fff; }

/* ---------- Visor ampliado ---------- */
.visor { position:fixed; inset:0; z-index:100; background:rgba(10,18,4,.93); display:none;
         flex-direction:column; align-items:center; justify-content:center; padding:1rem 4.5rem; }
.visor.abierto { display:flex; }
.visor img { max-width:100%; max-height:calc(100vh - 170px); object-fit:contain; border-radius:6px;
             box-shadow:0 10px 40px rgba(0,0,0,.6); }
.visor .pie { color:#fff; text-align:center; margin-top:.9rem; max-width:900px; }
.visor .pie .archivo { color:#c8dcae; }
.visor .pie .desc { color:#e9f2dc; }
.visor .contador { color:#c8dcae; font-size:.85rem; margin-top:.3rem; }
.visor button { position:absolute; background:rgba(255,255,255,.12); color:#fff; border:0; cursor:pointer;
                font-size:2rem; width:3.2rem; height:3.2rem; border-radius:50%; transition:background .15s; }
.visor button:hover { background:rgba(255,255,255,.3); }
.visor .ant { left:1rem; top:50%; transform:translateY(-50%); }
.visor .sig { right:1rem; top:50%; transform:translateY(-50%); }
.visor .cerrar { top:1rem; right:1rem; font-size:1.6rem; }

/* ---------- Móvil ---------- */
.menu-btn { display:none; }
@media (max-width:760px) {
  :root { --menu:0px; }
  nav { width:250px; transform:translateX(-100%); transition:transform .2s; }
  nav.abierto { transform:none; }
  .menu-btn { display:block; position:fixed; top:14px; left:10px; z-index:30; font-size:1.5rem;
              background:var(--verde); color:#fff; border:0; border-radius:6px; padding:.2rem .6rem; }
  .titulo { padding-left:3.6rem; }
  main { padding:calc(var(--alto-tit) + 1rem) 1rem 1rem; }
  .albumes-grid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.8rem; }
  .alb-nombre { font-size:1.25rem; }
  .albumes-barra { flex-wrap:nowrap; overflow-x:auto; }
  .pill { white-space:nowrap; }
  .visor { padding:1rem; }
  .visor .ant, .visor .sig { top:auto; bottom:1rem; transform:none; }
}

/* Bloquea el scroll de fondo mientras el visor está abierto */
body.sin-scroll { overflow:hidden; }