/* Olek AI Studio · Visor de documentos · 22-oct-2026 · Bloque V1
   Usa los colores del CRM (ds.css) y, si no están (portal), los suyos. Siempre oscuro: el documento es lo que se mira. */
.vz{
  --vz-fondo:#0c0d10; --vz-barra:rgba(22,23,28,.92); --vz-linea:rgba(255,255,255,.1); --vz-tinta:#eef0f4; --vz-tinta2:#a3a8b4;
  --vz-acento:var(--o-accent,#7c8cff); --vz-radio:10px;
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:var(--vz-fondo); color:var(--vz-tinta); font-family:var(--o-font,system-ui,-apple-system,"Segoe UI",sans-serif);
  overflow:hidden; z-index:10050;
}
.vz[open]{display:flex; flex-direction:column}
.vz::backdrop{background:rgba(0,0,0,.7)}
html.vz-abierto{overflow:hidden}
.vz-i{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* cabecera: nombre a la izquierda, acciones a la derecha */
.vz-cab{display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 8px 8px 18px; padding-top:max(8px, env(safe-area-inset-top));
  background:var(--vz-barra); border-bottom:1px solid var(--vz-linea); flex:none}
.vz-tit{display:flex; flex-direction:column; min-width:0; flex:1}
.vz-tit b{font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vz-tit small{font-size:12.5px; color:var(--vz-tinta2); font-variant-numeric:tabular-nums}
.vz-tit small:empty{display:none}
.vz-acc{display:flex; align-items:center; gap:4px; flex:none}
.vz-b{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:44px; height:44px; padding:0 10px; border:0; border-radius:var(--vz-radio);
  background:transparent; color:var(--vz-tinta); font:inherit; font-size:14px; font-weight:500; text-decoration:none; cursor:pointer}
.vz-b:hover{background:rgba(255,255,255,.08)}
.vz-b:focus-visible,.vz-nav:focus-visible,.vz-btn:focus-visible,.vz-pdf:focus-visible{outline:2px solid var(--vz-acento); outline-offset:2px}
.vz-b[hidden]{display:none}
.vz-txt{border:1px solid var(--vz-linea)}

/* lo que se mira */
.vz-cuerpo{position:relative; flex:1; min-height:0; display:flex; outline:none}
.vz-carga{margin:auto; color:var(--vz-tinta2); font-size:14px}
.vz-lienzo{position:relative; flex:1; overflow:hidden; touch-action:none; cursor:zoom-in; user-select:none}
.vz-lienzo.mueve{cursor:grab}
.vz-lienzo.mueve:active{cursor:grabbing}
.vz-img{position:absolute; left:50%; top:50%; max-width:none; transform-origin:center; will-change:transform; box-shadow:0 8px 40px rgba(0,0,0,.5); background:#fff}
.vz-pdf{flex:1; overflow:auto; touch-action:pan-x pan-y; overscroll-behavior:contain; padding:16px 12px 96px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; -webkit-overflow-scrolling:touch}
.vz-hoja{position:relative; flex:none; margin:0 auto; background:#fff; box-shadow:0 4px 24px rgba(0,0,0,.45); border-radius:2px}
.vz-hoja canvas{display:block; width:100%; height:100%}
.vz-pagina{flex:1; width:100%; border:0; background:#fff}
.vz-video{margin:auto; max-width:100%; max-height:100%}
.vz-texto{flex:1; margin:0; overscroll-behavior:contain; padding:20px; overflow:auto; font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--vz-tinta); white-space:pre-wrap; word-break:break-word; tab-size:4}
.vz-tarj{margin:auto; max-width:420px; padding:32px 24px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center}
.vz-tarj .vz-i{width:44px; height:44px; color:var(--vz-tinta2); stroke-width:1.4}
.vz-tarj b{font-size:16px; font-weight:600; word-break:break-word}
.vz-tarj p{margin:0; color:var(--vz-tinta2); font-size:14px; line-height:1.5}
.vz-tarj audio{width:min(360px, 80vw)}
.vz-btn{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:var(--vz-radio); background:var(--vz-acento); color:#fff; font-weight:600; font-size:14px; text-decoration:none}

/* anterior / siguiente (varios documentos) */
.vz-nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border:0; border-radius:50%;
  background:rgba(22,23,28,.8); color:var(--vz-tinta); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2}
.vz-nav.ant{left:12px} .vz-nav.sig{right:12px}
.vz-nav[hidden]{display:none}

/* zoom: una pastilla abajo, al alcance del pulgar */
.vz-ctl{position:absolute; left:50%; bottom:max(16px, env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; align-items:center; gap:2px; padding:4px;
  background:var(--vz-barra); border:1px solid var(--vz-linea); border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.4); z-index:2}
.vz-ctl[hidden]{display:none}
.vz-pct{min-width:64px; font-variant-numeric:tabular-nums}
.vz-pag{padding:0 10px; color:var(--vz-tinta2); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; border-right:1px solid var(--vz-linea); margin-right:2px}
.vz-pag[hidden]{display:none}
.vz-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

@media (max-width:640px){
  .vz-cab{padding-left:14px; gap:6px}
  .vz-txt span{display:none}
  .vz-txt{border:0}
  .vz-nav{width:44px; height:44px}
  .vz-nav.ant{left:6px} .vz-nav.sig{right:6px}
}
@media (prefers-reduced-motion:reduce){ .vz-img{will-change:auto} }

/* texto del PDF por encima del dibujo (transparente): seleccionar, copiar, Ctrl+F, lectores de pantalla. De pdf.js (Apache 2.0) */
.vz-hoja .textLayer{position:absolute; inset:0; overflow:clip; opacity:1; line-height:1; text-align:initial; -webkit-text-size-adjust:none; text-size-adjust:none; forced-color-adjust:none; transform-origin:0 0; z-index:0;
  --min-font-size:1; --text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv:calc(1 / var(--min-font-size))}
.vz-hoja .textLayer :is(span,br){color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0% 0%}
.vz-hoja .textLayer > :not(.markedContent), .vz-hoja .textLayer .markedContent span:not(.markedContent){z-index:1; --font-height:0; font-size:calc(var(--text-scale-factor) * var(--font-height));
  --scale-x:1; --rotate:0deg; transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv))}
.vz-hoja .textLayer .markedContent{display:contents}
.vz-hoja .textLayer ::selection{background:rgba(0,90,255,.3)}
.vz-hoja .textLayer br::selection{background:transparent}
.vz-hoja canvas{position:absolute; inset:0}