/* =============================================================================
   Etapa 3 · visor del PDF que arma PDFreactor (antes de descargarlo)
   Mismo fondo oscuro que la vista previa: lo que manda es el libro.
   ============================================================================= */

.visor-pdf { position: fixed; inset: 0; z-index: 150; background: #1c1c1c; color: #fff; display: flex; flex-direction: column; animation: aparecer var(--motion-duration-medium) var(--motion-easing-decelerate); }
.visor-barra { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; flex-shrink: 0; min-width: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.visor-barra .relleno { flex: 1; }
.visor-titulo { display: flex; flex-direction: column; min-width: 0; }
.visor-titulo b { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor-dato { font-size: 12px; color: #9a9a9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor-calidad { display: none; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #cfd9ff; background: rgba(110,149,245,.18); padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap; }
.visor-calidad:not(:empty) { display: inline-block; }
.visor-pdf .btn-icono { color: #fff; }
.visor-pdf .btn-icono:hover { background: rgba(255,255,255,.1); }
.chip-visor { height: 32px; padding: 0 12px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,.22); background: none; color: #e6e6e6; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.chip-visor .ms { font-size: 18px; }
.chip-visor.activo { background: #fff; color: #141414; border-color: #fff; }
.chip-visor span:not(.ms) { display: none; }

.visor-cuerpo { flex: 1; min-height: 0; overflow: auto; position: relative; overscroll-behavior: contain; }
.visor-hojas { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 16px 12px 32px; }
.visor-fila { display: flex; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.visor-hoja { position: relative; overflow: hidden; background: #fff; flex-shrink: 0; }
.visor-hoja canvas { position: absolute; display: block; }
/* Pliego de dos páginas: la sombra del lomo en el medio */
.visor-fila.doble { position: relative; }
.visor-fila.doble::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 40px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0,0,0,.08) 45%, rgba(0,0,0,.14) 50%, rgba(0,0,0,.08) 55%, transparent); }

.visor-estado { position: absolute; inset: 0; margin: auto; height: max-content; width: min(440px, calc(100% - 32px)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 24px; border-radius: var(--radius-xl); background: #262626; }
.visor-estado h3 { font: 600 20px/28px var(--font-sans); margin: 4px 0 0; }
.visor-estado p { margin: 0; color: #c9c9c9; font-size: 14px; line-height: 21px; }
.visor-estado .nota { color: #8f8f8f; }
.visor-estado-icono { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(110,149,245,.18); color: #b9c9ff; }
.visor-estado-icono .ms { font-size: 30px; }
.visor-estado-icono.girando .ms { animation: girar 1s linear infinite; }
.visor-estado-icono.error { background: rgba(229,72,77,.18); color: #ff9a9d; }
.visor-barra-avance { width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; margin: 6px 0 2px; }
.visor-barra-avance i { display: block; height: 100%; background: #6e95f5; border-radius: 3px; transition: width .3s var(--motion-easing-standard); }
.visor-estado .btn-texto { color: #b9c9ff; }

.visor-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.visor-pie .relleno { flex: 1; }
.visor-pie .btn { flex: 1 1 auto; }
.visor-pie .btn-tonal { background: rgba(110,149,245,.2); color: #dbe4ff; }
.visor-pie .btn-contorno { color: #dbe4ff; border-color: rgba(255,255,255,.25); }
.visor-pie .btn-texto { color: #dbe4ff; }
.visor-nota { margin: 0; font-size: 12px; color: #8f8f8f; flex-basis: 100%; }
.visor-aviso { flex-basis: 100%; display: flex; align-items: center; gap: 8px; border: none; background: rgba(229,72,77,.16); color: #ffb3b5; font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.visor-aviso .ms { font-size: 18px; }

@media (min-width: 861px) {
    .visor-barra { height: 64px; padding: 0 16px 0 24px; gap: 14px; }
    .visor-titulo { flex-direction: row; align-items: baseline; gap: 14px; }
    .visor-titulo b { font-size: 16px; }
    .visor-dato { font-size: 13px; }
    .chip-visor span:not(.ms) { display: inline; }
    .visor-hojas { gap: 28px; padding: 32px 48px 48px; }
    .visor-pie { flex-wrap: nowrap; padding: 14px 24px; gap: 10px; }
    .visor-pie .btn { flex: 0 0 auto; }
    .visor-nota, .visor-aviso { flex-basis: auto; }
}