/**
 * MÓDULO: visor.css
 * Qué hace:    el aspecto del visor (el que ve el alumno y la vista previa del editor).
 *              Todo cuelga de `.vpdf` y lleva el prefijo `vpdf-`, para no chocar con el tema.
 * Recibe:      el atributo data-tema="claro|oscuro" de la raíz y la variable --lw (ancho del listado).
 * Devuelve:    estilos. Nada más.
 * Depende de:  la estructura que construye visor.js.
 *
 * Blindaje frente al tema (libreta 3.12c): el tema y Elementor dan estilo propio a
 * button, input y enlaces (también en :hover, :focus y :active). Por eso los colores se
 * repiten con selectores más específicos (`.vpdf button.vpdf-btn:hover`…).
 */

/* ===== Colores: tema CLARO (por defecto) ===== */
.vpdf{
  --v-fondo:#ffffff; --v-sup:#fafafa; --v-elev:#ffffff; --v-borde:#e2e2e2;
  --v-texto:#555555; --v-texto2:#666666; --v-acento:#ffaa00; --v-acento-txt:#966400;
  --v-aviso:#fdf2db; --v-visor:#ececec; --v-sombra:0 6px 24px rgba(0,0,0,.12);
  --v-tip-fondo:#121212; --v-tip-texto:#f5f5f5; --v-err:#b32020;
  --lw:128px;
  container-type:inline-size; /* permite medir el ancho del propio visor en @container */
}
/* ===== Tema OSCURO ===== */
.vpdf[data-tema="oscuro"]{
  --v-fondo:#0e0e0e; --v-sup:#141414; --v-elev:#1e1e1e; --v-borde:#2e2e2e;
  --v-texto:#e8e8e8; --v-texto2:#9a9a9a; --v-acento-txt:#ffaa00;
  --v-aviso:rgba(255,170,0,.08); --v-visor:#0a0a0a; --v-sombra:0 6px 24px rgba(0,0,0,.6);
  --v-tip-fondo:#f5f5f5; --v-tip-texto:#121212; --v-err:#ff4444;
}
.vpdf, .vpdf *{ box-sizing:border-box; }
.vpdf{ position:relative; background:var(--v-sup); border:1px solid var(--v-borde); border-radius:12px; box-shadow:var(--v-sombra);
  font-family:Montserrat,"Segoe UI",Arial,sans-serif; font-size:14px; line-height:1.4; color:var(--v-texto); text-align:left; margin:1em 0; outline:none; }
.vpdf:fullscreen{ border-radius:0; margin:0; display:flex; flex-direction:column; background:var(--v-sup); }
/* Pantalla completa de reserva (iPhone/iPad no dejan la oficial en elementos) */
.vpdf.vpdf-fs{ position:fixed; inset:0; z-index:999999; margin:0; border-radius:0; display:flex; flex-direction:column; }
.vpdf-aviso{ background:#fdf2db; border:1px solid #ffaa00; border-radius:6px; padding:8px 12px; font-size:13px; color:#555; }

/* ===== Barra de arriba ===== */
.vpdf .vpdf-barra{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:10px 12px; border-bottom:1px solid var(--v-borde); background:var(--v-elev); border-radius:12px 12px 0 0; }
.vpdf:fullscreen .vpdf-barra, .vpdf.vpdf-fs .vpdf-barra{ border-radius:0; }
.vpdf .vpdf-titulo{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--v-texto); min-width:0; flex:1 1 160px; }
.vpdf .vpdf-titulo svg{ flex:none; color:var(--v-acento-txt); width:20px; height:20px; }
.vpdf .vpdf-titulo span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vpdf .vpdf-grupo{ display:flex; align-items:center; gap:4px; }
.vpdf .vpdf-sep{ width:1px; height:22px; background:var(--v-borde); }

/* ===== Botones (cambian visiblemente al pasar el ratón; no se encogen) ===== */
.vpdf button.vpdf-btn{ flex:none; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:36px; height:36px; padding:0 8px; margin:0;
  border:1px solid transparent; border-radius:8px; background:transparent; color:var(--v-texto); cursor:pointer; font:600 13px Montserrat,"Segoe UI",Arial,sans-serif; text-transform:none; letter-spacing:0; box-shadow:none; text-decoration:none; transition:background .12s,border-color .12s,color .12s; }
.vpdf .vpdf-btn svg{ width:18px; height:18px; flex:none; }
.vpdf button.vpdf-btn:hover:not(:disabled), .vpdf button.vpdf-btn:focus-visible:not(:disabled){ background:color-mix(in srgb,#ffaa00 18%,var(--v-elev)); border-color:var(--v-acento); color:var(--v-texto); }
.vpdf button.vpdf-btn:active:not(:disabled){ background:color-mix(in srgb,#ffaa00 30%,var(--v-elev)); color:var(--v-texto); }
.vpdf button.vpdf-btn:focus-visible, .vpdf input.vpdf-num:focus-visible, .vpdf .vpdf-divisor:focus-visible, .vpdf button.vpdf-mini:focus-visible{ outline:2px solid var(--v-acento-txt); outline-offset:2px; }
.vpdf button.vpdf-btn:disabled{ color:var(--v-texto2); background:color-mix(in srgb,var(--v-texto2) 14%,var(--v-elev)); border-color:var(--v-borde); cursor:not-allowed; }
.vpdf button.vpdf-btn.activo{ background:var(--v-acento); color:#121212; }
.vpdf button.vpdf-btn.principal{ background:linear-gradient(to bottom,#ffaa0d 0%,#fff1cc 48%,#ffaa0d 100%); color:#141414; border-color:#cc8800; padding:0 12px; }
.vpdf button.vpdf-btn.principal:hover:not(:disabled), .vpdf button.vpdf-btn.principal:focus-visible:not(:disabled){ background:linear-gradient(to bottom,#ffc04d 0%,#fffaf0 48%,#ffc04d 100%); border-color:#ffaa00; color:#141414; }
.vpdf button.vpdf-btn.contorno{ border-color:var(--v-borde); background:var(--v-elev); }

/* ===== Etiquetas propias: ENCIMA del control, con flechita ===== */
.vpdf [data-tip]::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%); background:var(--v-tip-fondo); color:var(--v-tip-texto);
  font:600 12px Montserrat,"Segoe UI",Arial,sans-serif; padding:5px 9px; border-radius:5px; white-space:nowrap; pointer-events:none; opacity:0; visibility:hidden; z-index:20; transition:opacity .12s; }
.vpdf [data-tip]::before{ content:""; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--v-tip-fondo); border-bottom-width:0; pointer-events:none; opacity:0; visibility:hidden; z-index:20; transition:opacity .12s; }
.vpdf [data-tip]:hover::after, .vpdf [data-tip]:hover::before, .vpdf [data-tip]:focus-visible::after, .vpdf [data-tip]:focus-visible::before{ opacity:1; visibility:visible; }
/* En pantalla completa la barra toca el borde de arriba: la etiqueta sale debajo, con la flecha hacia arriba */
.vpdf:fullscreen .vpdf-barra [data-tip]::after, .vpdf.vpdf-fs .vpdf-barra [data-tip]::after{ bottom:auto; top:calc(100% + 9px); }
.vpdf:fullscreen .vpdf-barra [data-tip]::before, .vpdf.vpdf-fs .vpdf-barra [data-tip]::before{ bottom:auto; top:calc(100% + 3px); border-top-width:0; border-top-color:transparent; border-bottom-width:6px; border-bottom-color:var(--v-tip-fondo); }

/* ===== Página N de M y zoom ===== */
.vpdf .vpdf-paginas{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--v-texto2); }
.vpdf input.vpdf-num{ width:52px; height:36px; padding:0 4px; margin:0; text-align:center; border:1px solid var(--v-borde); border-radius:8px; background:var(--v-elev); color:var(--v-texto); font:700 14px Montserrat,"Segoe UI",Arial,sans-serif; box-shadow:none; transition:border-color .12s,background .12s; }
.vpdf input.vpdf-num:hover, .vpdf input.vpdf-num:focus{ border-color:var(--v-acento); background:color-mix(in srgb,#ffaa00 10%,var(--v-elev)); color:var(--v-texto); }
.vpdf input.vpdf-zoomin{ width:56px; }
.vpdf .vpdf-zpc{ font-weight:700; font-size:13px; color:var(--v-texto2); margin-left:-2px; }

/* ===== Cuerpo: listado + barra arrastrable + zona de la hoja ===== */
.vpdf .vpdf-cuerpo{ position:relative; display:flex; }
.vpdf:fullscreen .vpdf-cuerpo, .vpdf.vpdf-fs .vpdf-cuerpo{ flex:1; min-height:0; }
.vpdf .vpdf-zona{ position:relative; flex:1; min-width:0; }
.vpdf:fullscreen .vpdf-zona, .vpdf.vpdf-fs .vpdf-zona{ display:flex; flex-direction:column; }
.vpdf:fullscreen .vpdf-lienzo, .vpdf.vpdf-fs .vpdf-lienzo{ height:auto!important; flex:1; }

/* Listado de páginas: tiene su propia barra y no estira la altura del visor */
.vpdf .vpdf-lista{ position:relative; flex:none; width:var(--lw); background:var(--v-elev); transition:width .15s; }
.vpdf .vpdf-lista.oculta{ width:0; overflow:hidden; }
.vpdf.vpdf-arrastrando .vpdf-lista{ transition:none; }
.vpdf .vpdf-lista-in{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; padding:12px 10px; display:flex; flex-direction:column; gap:12px; width:var(--lw); }
.vpdf button.vpdf-mini{ flex:none; display:flex; flex-direction:column; align-items:center; gap:5px; padding:7px 6px 6px; margin:0; border:2px solid transparent; border-radius:8px; background:transparent; cursor:pointer; color:var(--v-texto2); font:700 12px Montserrat,"Segoe UI",Arial,sans-serif; box-shadow:none; transition:background .12s,border-color .12s,color .12s; }
.vpdf button.vpdf-mini:hover, .vpdf button.vpdf-mini:focus-visible{ background:color-mix(in srgb,#ffaa00 18%,var(--v-elev)); border-color:var(--v-acento); color:var(--v-texto); }
.vpdf button.vpdf-mini.actual{ border-color:var(--v-acento); background:var(--v-aviso); color:var(--v-acento-txt); }
.vpdf .vpdf-mini .m{ display:block; width:calc(var(--lw) - 56px); background:#fff; border-radius:2px; box-shadow:0 1px 5px rgba(0,0,0,.28); overflow:hidden; }
.vpdf .vpdf-mini .m canvas{ display:block; width:100%; height:100%; }

/* Barra de separación arrastrable */
.vpdf .vpdf-divisor{ flex:none; width:12px; display:flex; align-items:center; justify-content:center; cursor:col-resize; touch-action:none;
  background:var(--v-elev); border-left:1px solid var(--v-borde); border-right:1px solid var(--v-borde); transition:background .12s; }
.vpdf .vpdf-divisor span{ display:block; width:4px; height:44px; border-radius:2px; background:var(--v-texto2); opacity:.55; transition:background .12s,height .12s,opacity .12s; }
.vpdf .vpdf-divisor:hover, .vpdf .vpdf-divisor:focus-visible{ background:color-mix(in srgb,#ffaa00 18%,var(--v-elev)); }
.vpdf .vpdf-divisor:hover span, .vpdf .vpdf-divisor:focus-visible span{ background:var(--v-acento); opacity:1; height:64px; }
.vpdf.vpdf-arrastrando .vpdf-divisor{ background:color-mix(in srgb,#ffaa00 32%,var(--v-elev)); }
.vpdf.vpdf-arrastrando .vpdf-divisor span{ background:var(--v-acento); opacity:1; height:80px; }
.vpdf.vpdf-arrastrando, .vpdf.vpdf-arrastrando *{ cursor:col-resize!important; user-select:none; }
.vpdf .vpdf-lista.oculta + .vpdf-divisor{ display:none; }

/* ===== Lienzo con la hoja ===== */
.vpdf .vpdf-lienzo{ position:relative; overflow:auto; overflow-anchor:none; background:var(--v-visor); padding:22px 12px; scroll-behavior:smooth; }
/* Desplazamiento continuo: todas las hojas una debajo de otra y centradas */
.vpdf .vpdf-hojacaja{ display:flex; flex-direction:column; align-items:center; min-width:min-content; }
.vpdf .vpdf-pag{ background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.25); flex:none; line-height:0; margin:0 0 14px; }
.vpdf .vpdf-pag canvas{ display:block; max-width:none; }
.vpdf .vpdf-estado{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; color:var(--v-texto2); font-weight:600; pointer-events:none; z-index:3; }
.vpdf .vpdf-estado.err{ color:var(--v-err); pointer-events:auto; }
.vpdf .vpdf-estado a{ color:var(--v-acento-txt); text-decoration:underline; }

/* ===== Botones flotantes de página anterior / siguiente ===== */
.vpdf button.vpdf-flota{ position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:48px; height:48px; padding:0; margin:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--v-elev); color:var(--v-texto); border:2px solid var(--v-acento); box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:background .12s,border-color .12s,color .12s; }
.vpdf .vpdf-flota svg{ width:22px; height:22px; }
.vpdf button.vpdf-flota:hover:not(:disabled), .vpdf button.vpdf-flota:focus-visible:not(:disabled){ background:var(--v-acento); color:#121212; border-color:#cc8800; }
.vpdf button.vpdf-flota:disabled{ color:var(--v-texto2); background:color-mix(in srgb,var(--v-texto2) 14%,var(--v-elev)); border-color:var(--v-borde); cursor:not-allowed; box-shadow:none; }
.vpdf .vpdf-flota.izq{ left:14px; } .vpdf .vpdf-flota.der{ left:calc(100% - 74px); } /* el JS las pega a la hoja */

/* ===== Logotipo fijo en una esquina de la vista ===== */
.vpdf img.vpdf-logo{ position:absolute; z-index:5; pointer-events:none; user-select:none; height:auto; max-width:40%; object-fit:contain; margin:0; padding:0; border:0; box-shadow:none; border-radius:0; --m:14px; }
.vpdf img.vpdf-logo[data-esq="si"]{ top:var(--m); left:var(--m); }
.vpdf img.vpdf-logo[data-esq="sd"]{ top:var(--m); right:calc(var(--m) + 16px); }
.vpdf img.vpdf-logo[data-esq="ii"]{ bottom:calc(var(--m) + 16px); left:var(--m); }
.vpdf img.vpdf-logo[data-esq="id"]{ bottom:calc(var(--m) + 16px); right:calc(var(--m) + 16px); }

/* ===== Barra de abajo ===== */
.vpdf .vpdf-pie{ display:flex; align-items:center; gap:12px; padding:8px 14px; border-top:1px solid var(--v-borde); background:var(--v-elev); border-radius:0 0 12px 12px; font-size:12px; color:var(--v-texto2); }
.vpdf:fullscreen .vpdf-pie, .vpdf.vpdf-fs .vpdf-pie{ border-radius:0; }
.vpdf .vpdf-progreso{ flex:1; height:6px; background:var(--v-borde); border-radius:3px; overflow:hidden; }
.vpdf .vpdf-progreso i{ display:block; height:100%; width:0; background:var(--v-acento); transition:width .2s; }
.vpdf .vpdf-atajos{ white-space:nowrap; }

/* ===== Táctil: controles de 44 px y letra ≥ 13 px ===== */
@media (any-pointer:coarse){
  .vpdf button.vpdf-btn{ min-width:44px; height:44px; }
  .vpdf input.vpdf-num{ height:44px; width:60px; font-size:15px; }
  .vpdf button.vpdf-flota{ width:52px; height:52px; }
  .vpdf button.vpdf-mini{ min-height:44px; }
  .vpdf .vpdf-divisor{ width:24px; }
  .vpdf .vpdf-pie{ font-size:13px; }
}
/* Visor estrecho (se mide el ancho del PROPIO visor, no el de la pantalla, porque las plantillas
   de la web suelen meterlo en una columna): botones solo con icono; sin atajos de teclado */
@container (max-width:760px){
  .vpdf .vpdf-btn .txt{ display:none; }
  .vpdf button.vpdf-btn.principal{ padding:0 8px; }
  .vpdf .vpdf-sep{ display:none; }
  .vpdf .vpdf-atajos{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .vpdf, .vpdf *{ transition:none!important; scroll-behavior:auto!important; } }