/* Visor de vista previa · estilos compartidos (ver visor-previa.js)
   ─────────────────────────────────────────────────────────────────
   El look es el de la App de Carlos: una ventana SOBRE la página, con velo borroso, cabecera con
   título y ✕, el documento en grande, y abajo ◀ ▶ + contador + salto + acciones.

   Los colores salen de --vp-c-*; cada sistema los apunta a los suyos con unas pocas líneas en su
   propia hoja, por ejemplo (Actas):
       :root{ --vp-c-panel:var(--panel); --vp-c-texto:var(--txt); --vp-c-tenue:var(--muted);
              --vp-c-borde:var(--line);  --vp-c-acento:var(--accent); }
   Sin ellos, el visor sale claro y legible. Los botones usan las clases del sistema (b-ghost,
   b-primary); la regla :where(.vp-btn) solo los viste si el sistema no tiene esas clases.
   El documento (el PDF y la «hoja») se queda BLANCO a propósito: es un documento oficial y así
   se imprimirá, sea cual sea el tema de la pantalla (también en Halloween). */

.vp-overlay{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:100000;
  background:rgba(3,6,13,.76);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:26px 14px; overflow:auto;
  animation:vp-entra .16s ease-out;
}
.vp-overlay[hidden], .vp-carga[hidden], .vp-error[hidden], .vp-nav[hidden],
.vp-marco[hidden], .vp-papel[hidden], .vp-pestana[hidden], .vp-sub[hidden]{ display:none !important; }
html.vp-abierto{ overflow:hidden; }
/* El botón y el panel de paletas del tema cómic (comic-tema.js) flotan con un z-index de 2147483000, por
   encima de cualquier ventana, y tapaban «Cerrar»: se esconden mientras el visor está abierto. */
html.vp-abierto #comicTemaBtn, html.vp-abierto #comicTemaPanel{ display:none; }

.vp-card{
  background:var(--vp-c-panel,#ffffff); color:var(--vp-c-texto,#182233);
  border:1px solid var(--vp-c-borde,#d6dbe6); border-radius:var(--vp-radio,16px);
  width:100%; max-width:1180px; height:calc(100vh - 52px); height:calc(100dvh - 52px);
  display:flex; flex-direction:column; box-shadow:0 24px 64px rgba(0,0,0,.5);
  outline:none; animation:vp-sube .2s cubic-bezier(.2,.7,.3,1);
}
.vp-cab{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--vp-c-borde,#d6dbe6);
}
.vp-textos{ min-width:0; }
.vp-titulo{ margin:0; font-size:15px; font-weight:650; letter-spacing:-.015em; color:var(--vp-c-texto,#182233); }
.vp-sub{ margin:2px 0 0; font-size:12.5px; color:var(--vp-c-tenue,#5b6b84); overflow-wrap:anywhere; }

.vp-cuerpo{ flex:1; min-height:0; position:relative; display:flex; padding:14px 16px; }
.vp-marco{
  width:100%; height:100%; border:1px solid var(--vp-c-borde,#d6dbe6); border-radius:10px;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.18);
}
/* La «mesa» donde descansan las hojas es SIEMPRE clara y con tinta oscura (documento oficial): no sigue
   el tema, o un fondo oscuro dejaría ilegible el texto de una hoja que no pinte el suyo. */
.vp-papel{
  width:100%; height:100%; overflow:auto; border:1px solid var(--vp-c-borde,#d6dbe6); border-radius:10px;
  background:#e9edf3; padding:10px; color:#111;
}
.vp-carga{
  position:absolute; top:14px; right:16px; bottom:14px; left:16px; display:flex; align-items:center; justify-content:center;
  background:rgba(6,10,19,.72); border-radius:10px; color:#e8eefc; font-size:13px;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.vp-error{
  position:absolute; top:14px; right:16px; bottom:14px; left:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:var(--vp-c-panel,#fff); border:1px dashed var(--vp-c-borde,#d6dbe6); border-radius:10px;
  color:var(--vp-c-texto,#182233); text-align:center; padding:20px; font-size:13.5px;
}
.vp-error p{ margin:0; max-width:56ch; }

.vp-pie{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end;
  padding:12px 18px; border-top:1px solid var(--vp-c-borde,#d6dbe6);
}
.vp-nav{ display:flex; align-items:center; gap:10px; margin-right:auto; flex-wrap:wrap; }
.vp-contador{ font-size:12.5px; color:var(--vp-c-tenue,#5b6b84); white-space:nowrap; }
/* width:auto y background-color (no el atajo «background»): una página con select{width:100%} o con una
   flecha propia dibujada en el fondo de sus <select> no debe descomponer el selector de salto. */
.vp-salto{
  width:auto; max-width:300px; padding:7px 10px; border-radius:8px; font:inherit; font-size:12.5px;
  background-color:var(--vp-c-panel,#fff); color:var(--vp-c-texto,#182233); border:1px solid var(--vp-c-borde,#d6dbe6);
}
.vp-acciones{ display:flex; gap:10px; flex-wrap:wrap; }

/* Si el sistema no trae sus clases de botón, el visor se ve igual de bien. */
:where(.vp-btn){
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:8px 14px; border-radius:10px;
  background:transparent; color:var(--vp-c-texto,#182233); border:1px solid var(--vp-c-borde,#d6dbe6);
}
:where(.vp-btn.b-primary){ background:var(--vp-c-acento,#0e7c72); color:#fff; border-color:transparent; }
:where(.vp-btn):disabled{ opacity:.45; cursor:not-allowed; }
:where(.vp-btn):focus-visible, .vp-salto:focus-visible, .vp-card:focus-visible{ outline:2px solid var(--vp-c-acento,#0e7c72); outline-offset:2px; }

@media (max-width:640px){
  .vp-overlay{ padding:10px; }
  .vp-card{ height:calc(100vh - 20px); height:calc(100dvh - 20px); border-radius:14px; }
  .vp-cab{ padding:12px 14px; }
  .vp-cuerpo{ padding:10px; }
  .vp-carga, .vp-error{ top:10px; right:10px; bottom:10px; left:10px; }
  .vp-pie{ padding:10px 12px; justify-content:space-between; }
  .vp-nav{ width:100%; }
  .vp-salto{ max-width:100%; flex:1 1 100%; }
}
@keyframes vp-entra{ from{ opacity:0 } to{ opacity:1 } }
@keyframes vp-sube{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .vp-overlay, .vp-card{ animation:none; } }
@media print{ .vp-overlay{ display:none !important; } }