/* ============================================
   PDF VIEWER — scope: el modal que abre `assets/js/pdf-viewer.js`.
   Nadie más usa estas clases. Va en archivo propio y no en pages.css porque
   sólo lo carga la página que abre condicionados.
   ============================================ */

/* 1400px y no 1100: a 200% —el zoom con el que estos condicionados se leen
   cómodos— una carta mide 1224px, y con el modal viejo el escenario daba
   1090. La hoja se cortaba y había que scrollear de lado para leer un
   renglón. 1400 deja 1340 de escenario: entra entera. */
.pdfv {
  width: min(1400px, 96vw);
  height: min(92vh, 1000px);
  max-width: none;
  max-height: none;
  padding: 0;
  /* El reset de base.css (`*, *::before, *::after { margin: 0 }`) pisa el
     `margin: auto` con que el navegador centra un <dialog> modal, y el visor
     quedaba pegado arriba a la izquierda. */
  margin: auto;
  border: none;
  border-radius: var(--radius-lg);
  /* El modal baja a #0d0d0d para que la barra flotante (#1a1a1a) se separe
     por TONO y no por una línea. Es la regla de apilado del sistema
     editorial: un elemento está «más arriba» si es más claro que su fondo. */
  background: var(--color-darker);
  color: var(--color-text-inverse);
  overflow: hidden;
}

.pdfv::backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
}

/* Áreas NOMBRADAS, no posicionales. `.pdfv__status:empty` se va a
   `display: none` y desaparece del grid: con filas por orden, todo se corría
   un lugar y la barra caía en la fila `1fr`, que la estiraba a 285px y abría
   un hueco negro entre la hoja y los controles.
   `minmax(0, 1fr)` en vez de `1fr` para que el escenario pueda encogerse y
   scrollear: un `1fr` pelado no baja de su min-content y desborda.
   La barra ya NO es fila del grid: flota sobre el escenario. */
.pdfv[open] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: 'head' 'estado' 'stage';
}

.pdfv__head { grid-area: head; }
.pdfv__status { grid-area: estado; }
.pdfv__stage { grid-area: stage; }

/* El fondo de la página no debe scrollear detrás del modal abierto. */
body.pdfv-abierto {
  overflow: hidden;
}

/* ---- Cabecera ---- */

.pdfv__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}

.pdfv__brand {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pdfv__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* base.css pinta los headings con --color-text (#1a1a1a) y eso pisa la
     herencia del modal: el título quedaba negro sobre negro. */
  color: rgba(255, 255, 255, 0.65);
}

.pdfv__download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.pdfv__download:hover {
  filter: brightness(1.08);
}

.pdfv__close {
  display: inline-flex;
  padding: 6px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.pdfv__close:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* ---- Escenario ---- */

/* Sin fondo propio: con un gris distinto el escenario se leía como una
   ventana dentro del modal en vez de ser el modal. */
.pdfv__stage {
  display: flex;
  overflow: auto;
  /* El hueco de abajo es el que ocupa la barra flotante, y no es decorativo:
     `escala()` LEE este padding para calcular «Ajustar», así que la hoja
     entera queda por encima de la barra en vez de esconderse debajo.
     `--pdfv-bar-h` lo publica el JS con el alto medido: una fila en
     escritorio y dos en móvil no son el mismo hueco, y un número fijo acá se
     desincroniza en silencio — medido, la hoja montaba 24px sobre la barra. */
  padding: var(--space-lg) var(--space-lg)
           calc(var(--pdfv-bar-h, 52px) + 2 * var(--space-lg));
  /* Reserva el canal de la barra de scroll desde el principio. Sin esto la
     escala «ajustar al ancho» se calcula con el clientWidth de ANTES de que
     aparezca la barra vertical, la hoja queda ~15px más ancha que el hueco
     y sale una barra horizontal encima. */
  scrollbar-gutter: stable;
  /* La barra nativa es clara y con flechas: sobre el modal oscuro dibujaba un
     marco y el documento se leía como una ventana dentro de otra. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.pdfv__stage::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.pdfv__stage::-webkit-scrollbar-track {
  background: transparent;
}

.pdfv__stage::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.22);
  background-clip: content-box;
}

.pdfv__stage::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
  background-clip: content-box;
}

.pdfv__stage::-webkit-scrollbar-corner {
  background: transparent;
}

/* `margin: auto` centra en los dos ejes y, a diferencia de `align-items:
   center`, no deja inalcanzable el borde de arriba cuando la hoja es más
   alta que el escenario y hay que scrollear. */
.pdfv__page {
  position: relative;
  flex: none;
  margin: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  background: var(--color-white);
  overflow: hidden;
}

.pdfv__canvas {
  display: block;
}

/* ---- Capa de texto ----
   Transparente sobre el canvas: hace el documento seleccionable y le da a la
   búsqueda dónde resaltar. La geometría de los spans la calcula PDF.js con
   `--scale-factor`, que el JS fija en este contenedor. */

.pdfv__text {
  position: absolute;
  inset: 0;
  overflow: hidden;
  line-height: 1;
  text-align: initial;
  transform-origin: 0 0;
  forced-color-adjust: none;
}

.pdfv__text span {
  position: absolute;
  white-space: pre;
  color: transparent;
  transform-origin: 0 0;
  cursor: text;
}

.pdfv__text ::selection {
  background: var(--color-primary-20);
}

.pdfv__mark {
  background: #ffd54a;
  border-radius: 2px;
  /* mix-blend-mode deja ver el texto del canvas por debajo del resaltado. */
  mix-blend-mode: multiply;
}

/* ---- Barra de controles ---- */

.pdfv__bar {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  /* Sin ancho propio la caja absoluta se encoge al ancho preferido de sus
     hijos y partía los controles en dos filas a mitad del escenario. */
  width: max-content;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  max-width: calc(100% - 2 * var(--space-lg));
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-2xl);
  /* Un tono por encima del modal. La sombra sólo acompaña: cuando la barra
     monta sobre la hoja blanca, quien separa es el color. */
  background: var(--color-dark);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.pdfv__group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pdfv__group--find {
  flex: 1;
  min-width: 200px;
  max-width: 420px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-dark-surface);
}

/* Trazo INTERIOR: un borde real corre 1px el contenido al enfocar y la
   píldora pega un salto. */
.pdfv__group--find:focus-within {
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.pdfv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-inverse);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.pdfv__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
}

.pdfv__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pdfv__page-input {
  width: 56px;
  padding: 6px 8px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-darker);
  color: var(--color-text-inverse);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  text-align: center;
}

.pdfv__page-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.pdfv__total,
.pdfv__find-count {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}

/* Sin búsqueda activa no hay nada que contar. Lo decide el contenido y no un
   atributo que alguien tenga que acordarse de actualizar. */
.pdfv__find-count:empty {
  display: none;
}

.pdfv__find-count:not(:empty) {
  padding: 0 var(--space-xs);
}

.pdfv__find-icon {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.65);
}

.pdfv__find-input {
  flex: 1;
  min-width: 0;
  padding: 7px 4px;
  border: none;
  background: transparent;
  color: var(--color-text-inverse);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}

.pdfv__find-input:focus {
  outline: none;
}

.pdfv__find-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

/* Marcador, no botón: antes el mismo control mostraba «100%» o «Ajustar»
   según el modo, así que el porcentaje desaparecía justo cuando la hoja
   estaba ajustada — el dato que más se mira. Ahora el nivel SIEMPRE se lee y
   «Ajustar» es su propio botón. */
.pdfv__zoom-level {
  min-width: 52px;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.pdfv__fit {
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.pdfv__fit:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
}

.pdfv__fit:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---- Estado ---- */

.pdfv__status {
  margin: 0;
  padding: 0 var(--space-lg);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
}

.pdfv__status:empty {
  display: none;
}

.pdfv__status--error {
  padding: var(--space-md) var(--space-lg);
  color: #ffb4a2;
}

/* ---- Móvil ----
   A pantalla completa: un documento de 170 páginas en una ventanita no se lee.
   La barra pasa a dos filas porque el buscador no comparte renglón con el
   paginador en 390px. */

@media (max-width: 768px) {
  .pdfv {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    border-radius: 0;
  }

  .pdfv__stage {
    padding: var(--space-md) 8px
             calc(var(--pdfv-bar-h, 116px) + 2 * var(--space-md));
  }

  /* Sin marca en 390px: el nombre del documento es lo que hay que leer. */
  .pdfv__brand {
    display: none;
  }

  .pdfv__title {
    color: var(--color-text-inverse);
  }

  .pdfv__bar {
    left: var(--space-md);
    right: var(--space-md);
    bottom: var(--space-md);
    transform: none;
    width: auto;
    max-width: none;
    flex-wrap: wrap;
    padding: var(--space-md);
  }

  .pdfv__group--find {
    order: -1;
    flex-basis: 100%;
    max-width: none;
  }

  .pdfv__download {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
  }

  .pdfv__download span {
    display: none;
  }
}