/* Ventana para hojear un PDF antes de descargarlo (sitio/_visor_documento.html).
   El marco (fondo oscuro, caja blanca, botón de cerrar) es el de .modal-sitio,
   en distribuidor.css; esto la agranda casi a pantalla completa y arma las hojas. */

.visor{width:min(1100px,calc(100vw - 2rem));height:calc(100vh - 2rem);height:calc(100dvh - 2rem);max-height:none}
.visor-caja{height:100%;max-height:none}

.visor-cab{align-items:center;padding:16px 20px}
.visor-nombre{min-width:0;flex:1}
.visor-nombre h2{
  font-size:1.15rem;margin:.15rem 0 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.visor-bajar{padding:.65rem 1.2rem;margin-left:auto}
.visor-cab .modal-sitio-cerrar{margin-left:.4rem}

/* Las hojas, una debajo de otra, sobre gris para que se distinga el borde. */
.visor-hojas{
  flex:1;overflow:auto;background:#e9eaec;padding:18px;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  overscroll-behavior:contain;
}
.visor-hojas:focus{outline:none}
.visor-hoja{
  /* Centrada con margen y no con align-items: al acercar, una hoja más ancha
     que la ventana quedaría con el borde izquierdo fuera de alcance. */
  position:relative;flex:0 0 auto;margin:0 auto;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.14);
}
.visor-hoja canvas{display:block;width:100%;height:100%}
.visor-aviso{margin:auto;align-self:center;text-align:center;color:#3a3c42;max-width:420px}
.visor-aviso:empty{display:none}

.visor-pie{
  display:flex;justify-content:space-between;gap:1rem;
  padding:10px 20px;border-top:1px solid #e6e7ea;background:#fafafb;
}
.visor-grupo{display:flex;align-items:center;gap:.4rem}
.visor-pagina{min-width:5.5rem;text-align:center;font-size:.9rem;font-weight:600;color:#3a3c42}
.visor-boton{
  width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  background:#fff;border:1px solid #d3d5d9;border-radius:50%;color:#000;
  transition:.18s ease;
}
.visor-boton:hover:not(:disabled){background:#000;color:#fff;border-color:#000}
.visor-boton:disabled{opacity:.35;cursor:default}

/* Con la ventana abierta, la página de atrás no se mueve. */
html.visor-abierto{overflow:hidden}

@media (max-width:600px){
  .visor{width:100vw;height:100%;max-width:none}
  .visor-caja{border-radius:0}
  .visor-cab{padding:12px 14px;gap:.6rem}
  .visor-nombre h2{font-size:1rem}
  .visor-nombre .eyebrow{display:none}
  .visor-bajar{padding:.55rem .9rem;font-size:.88rem}
  .visor-hojas{padding:10px}
  .visor-pie{padding:8px 12px}
  .visor-pagina{min-width:4.2rem}
}