/* ================================================================
   Prensa Arcana — la hoja maquetada.
   Este archivo define la linea editorial de Grimorio Labs y es lo
   unico que llega al PDF. Nada de aca depende del cromo del editor,
   asi que la misma hoja se puede incrustar en otro contexto.

   Regla innegociable del estudio: la prosa NUNCA va en cursiva.
   `em` se re-define abajo como peso + color, no como italica.
   ================================================================ */
.vista{
  --hoja-ancho:210mm;
  --hoja-alto:297mm;
  --hoja-margen:19mm 17mm 15mm;

  --p-fondo:#efe6ce;
  --p-fondo-hondo:#e5d9ba;
  --p-texto:#241c14;
  --p-texto-tenue:#5a4a37;
  --p-titulo:#3d2764;
  --p-titulo-alt:#5a3f24;
  --p-acento:#6f5423;
  --p-oro:#a9843e;
  --p-linea:#c3ab7e;
  --p-aviso:#8c3622;
  --p-secreto-fondo:#2a1f3d;
  --p-secreto-texto:#e9dfc6;

  display:flex;flex-direction:column;align-items:center;gap:22px;
  counter-reset:pagina paso;
  font-family:var(--fuente-cuerpo,"EB Garamond",Georgia,serif);
}

/* ---------------- La hoja ---------------- */
.hoja{
  counter-increment:pagina;
  position:relative;
  width:var(--hoja-ancho);
  min-height:var(--hoja-alto);
  padding:var(--hoja-margen);
  background:
    radial-gradient(ellipse at 12% 4%,rgba(169,132,62,.10),transparent 42%),
    radial-gradient(ellipse at 88% 96%,rgba(61,39,100,.08),transparent 45%),
    var(--p-fondo);
  color:var(--p-texto);
  font-size:11.2pt;line-height:1.52;
  text-align:justify;hyphens:auto;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  overflow-wrap:break-word;
  /* flow-root contiene los flotantes de las figuras: sin esto una
     imagen con pos=der se sale por el pie de la hoja. */
  display:flow-root;
  /* Sin esto el navegador imprime la hoja en blanco: por defecto
     descarta fondos e imagenes de fondo al imprimir. */
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.hoja::before{  /* filete de canto, marca de la casa */
  content:"";position:absolute;inset:7mm 6mm;
  border:1px solid var(--p-linea);
  border-radius:2px;pointer-events:none;
}
.hoja::after{   /* folio */
  content:counter(pagina);
  position:absolute;left:0;right:0;bottom:8.5mm;
  text-align:center;font-family:var(--fuente-display,"Cinzel",serif);
  font-size:8.5pt;font-weight:600;color:var(--p-acento);letter-spacing:.12em;
}
.hoja > *{position:relative;}

/* ---------------- Jerarquia ---------------- */
.hoja h1,.hoja h2,.hoja h3,.hoja h4,.hoja h5,.hoja h6{
  font-family:var(--fuente-display,"Cinzel",serif);
  text-align:left;hyphens:none;
  line-height:1.24;text-wrap:balance;
  break-after:avoid;
  /* Un titulo nuevo arranca siempre con el ancho completo, aunque
     quede una imagen flotante sin terminar arriba. Sin esto el titulo
     empieza al lado de la imagen y su filete inferior le pasa por
     abajo: medido, un h2 con el texto invadido y un hr de 228 px
     donde el contenedor daba 396. Que quede un hueco es preferible a
     que una seccion nueva arranque pegada a una ilustracion. */
  clear:both;
}
.hoja h1{
  font-size:23pt;font-weight:700;color:var(--p-titulo);
  margin:0 0 14pt;padding-bottom:6pt;letter-spacing:.01em;
  border-bottom:2.5px solid var(--p-oro);
}
.hoja h2{
  font-size:16pt;font-weight:600;color:var(--p-titulo);
  margin:20pt 0 8pt;padding-bottom:3pt;
  border-bottom:1px solid var(--p-linea);
}
.hoja h3{font-size:13pt;font-weight:600;color:var(--p-titulo-alt);margin:16pt 0 5pt;}
.hoja h4{font-size:11.5pt;font-weight:600;color:var(--p-acento);margin:13pt 0 4pt;letter-spacing:.03em;text-transform:uppercase;}
.hoja h5,.hoja h6{font-size:11pt;font-weight:600;color:var(--p-acento);margin:12pt 0 4pt;}
.hoja > :first-child{margin-top:0;}

.hoja p{margin:0 0 8pt;}
.hoja p:last-child{margin-bottom:0;}

/* Legibilidad: el enfasis se marca con peso y color, nunca inclinando
   la letra. Si el autor escribe *asi*, igual sale recto. */
.hoja em,.hoja i,.hoja cite{font-style:normal;font-weight:600;color:var(--p-acento);}
.hoja strong,.hoja b{font-weight:700;color:var(--p-titulo);}
.hoja em strong,.hoja strong em{color:var(--p-titulo);font-weight:700;}
.hoja a{color:var(--p-titulo);text-decoration:underline;text-decoration-color:var(--p-oro);text-underline-offset:2px;}
.hoja del{color:var(--p-texto-tenue);}
.hoja mark{background:rgba(169,132,62,.28);color:inherit;padding:0 .15em;}

/* ---------------- Listas ---------------- */
.hoja ul,.hoja ol{margin:0 0 9pt;padding-left:1.35em;text-align:left;}
.hoja li{margin:0 0 3pt;}
.hoja li > ul,.hoja li > ol{margin:3pt 0 0;}
.hoja ul{list-style:none;padding-left:1.15em;}
.hoja ul > li{position:relative;}
.hoja ul > li::before{
  content:"\25C6";position:absolute;left:-1.15em;top:0;
  color:var(--p-oro);font-size:.72em;line-height:1.9;
}
.hoja ol{list-style:decimal;}
.hoja ol > li::marker{color:var(--p-acento);font-weight:700;}

/* ---------------- Citas y reglas ---------------- */
.hoja blockquote{
  margin:10pt 0;padding:2pt 0 2pt 12pt;
  border-left:3px solid var(--p-oro);
  color:var(--p-texto-tenue);
}
.hoja hr{
  border:0;height:9pt;margin:14pt 0;clear:both;
  background:linear-gradient(var(--p-linea),var(--p-linea)) center/100% 1px no-repeat;
  position:relative;
}
.hoja hr::after{
  content:"\2756";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--p-fondo);padding:0 8px;color:var(--p-oro);font-size:9pt;
}

/* ---------------- Tablas ---------------- */
.hoja table{
  width:100%;border-collapse:collapse;margin:10pt 0 12pt;clear:both;
  font-size:10.2pt;text-align:left;hyphens:none;
  break-inside:avoid;
}
.hoja thead th{
  background:var(--p-titulo);color:#f2ecdd;
  font-family:var(--fuente-display,"Cinzel",serif);font-weight:600;
  font-size:9.5pt;letter-spacing:.03em;
  padding:5pt 7pt;border:1px solid var(--p-titulo);
}
.hoja tbody td{padding:4.5pt 7pt;border:1px solid var(--p-linea);vertical-align:top;}
.hoja tbody tr:nth-child(even) td{background:var(--p-fondo-hondo);}

/* ---------------- Tabla de tirada ----------------
   `:::encuentros`. No es una ficha con marco: en un manual una tabla
   aleatoria es una tabla con su titulo encima, no un panel. Lo unico
   que suma sobre una tabla normal es ese titulo y la primera columna
   angosta y centrada, que es donde va la tirada. */
.hoja .tabla-tirada{
  margin:11pt 0;
  break-inside:avoid;
  clear:both;
}
.hoja .tabla-tirada > .caja-titulo{
  display:block;margin:0 0 4pt;
  font-family:var(--fuente-display,"Cinzel",serif);
  font-weight:600;font-size:10.5pt;letter-spacing:.04em;
  color:var(--p-titulo);text-align:left;
  padding-bottom:2pt;
  border-bottom:1px solid var(--p-oro);
}
.hoja .tabla-tirada table{margin:0;}
/* La columna de la tirada: angosta, centrada y sin partir el rango. */
.hoja .tabla-tirada thead th:first-child,
.hoja .tabla-tirada tbody td:first-child{
  width:4.5em;text-align:center;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* Tesoro: la misma tabla con acento de oro, el mismo que llevan los
   objetos magicos. Y las columnas de cantidad a la derecha, para que
   los montos se comparen de un vistazo; que columna lo es lo decide el
   plugin mirando el contenido, no una marca en el texto. */
.hoja .tabla-tesoro > .caja-titulo{
  color:var(--p-titulo-alt);
  border-bottom-color:var(--p-oro);
  border-bottom-width:2px;
}
.hoja .tabla-tesoro thead th{background:var(--p-titulo-alt);border-color:var(--p-titulo-alt);}
.hoja .tabla-tirada td.cantidad,
.hoja .tabla-tirada th.cantidad{
  text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ---------------- Codigo ---------------- */
.hoja code{
  font-family:var(--fuente-mono,ui-monospace,monospace);font-size:.88em;
  background:rgba(169,132,62,.16);border:1px solid var(--p-linea);
  border-radius:3px;padding:.05em .3em;
}
.hoja pre{
  margin:9pt 0;padding:8pt 10pt;overflow:auto;
  background:var(--p-fondo-hondo);border:1px solid var(--p-linea);border-radius:4px;
  text-align:left;hyphens:none;break-inside:avoid;
}
.hoja pre code{background:none;border:0;padding:0;font-size:9.4pt;line-height:1.45;}

/* ---------------- Cajas (:::nota, :::aviso, ...) ---------------- */
.hoja .caja{
  margin:11pt 0;padding:9pt 12pt;border-radius:4px;
  border:1px solid var(--p-linea);
  background:var(--p-fondo-hondo);
  break-inside:avoid;
}
.hoja .caja > :last-child{margin-bottom:0;}
.hoja .caja-titulo{
  display:block;margin:0 0 5pt;
  font-family:var(--fuente-display,"Cinzel",serif);font-weight:600;
  font-size:10.5pt;letter-spacing:.04em;text-align:left;
}

.hoja .caja-nota{
  background:rgba(61,39,100,.09);
  border-color:var(--p-titulo);border-left-width:4px;
}
.hoja .caja-nota .caja-titulo{color:var(--p-titulo);}

.hoja .caja-aviso{
  background:rgba(140,54,34,.09);
  border-color:var(--p-aviso);border-left-width:4px;
}
.hoja .caja-aviso .caja-titulo{color:var(--p-aviso);}

.hoja .caja-destacado{
  background:rgba(169,132,62,.16);
  border-color:var(--p-oro);border-width:2px;
}
.hoja .caja-destacado .caja-titulo{color:var(--p-acento);}

.hoja .caja-secreto{
  background:var(--p-secreto-fondo);border-color:#1b1329;
  color:var(--p-secreto-texto);
}
.hoja .caja-secreto .caja-titulo{color:#d9bd7d;}
.hoja .caja-secreto em{color:#d9bd7d;}
.hoja .caja-secreto strong{color:#fff;}
.hoja .caja-secreto ul > li::before{color:#d9bd7d;}

/* Paso: pensado para instructivos de plegado */
.hoja .caja-paso{
  background:transparent;border:0;border-top:1px solid var(--p-linea);
  border-radius:0;padding:8pt 0 0;
}
.hoja .caja-paso .caja-titulo{color:var(--p-titulo);font-size:11.5pt;}
.hoja .caja-paso .caja-titulo::before{
  counter-increment:paso;
  content:"Paso " counter(paso) ". ";
  color:var(--p-oro);
}

/* ---------------- Fichas: monstruo y objeto ----------------
   El aspecto sale de la linea editorial de Grimorio Labs y NO imita la
   ficha de ningun manual publicado. La estructura (defensa, golpes,
   atributos, rasgos, acciones) es de uso comun y no es lo que se
   protege; el aspecto si, y por eso es propio.

   Las dos fichas comparten la caja y se distinguen por el color del
   filete: violeta arcano para lo vivo, oro para el tesoro. Asi se
   reconocen de un vistazo al hojear sin leer el titulo. */
.hoja .ficha{
  margin:12pt 0;padding:9pt 12pt 10pt;
  background:linear-gradient(180deg,#eadec0,#e2d2a9);
  /* Los cuatro bordes van por separado a proposito. Con el atajo
     `border:1px solid var(--p-linea)` seguido de un `border-top`, el
     atajo con var() queda pendiente de sustitucion y se lleva puestos
     los otros dos: medido, los cuatro lados terminaban en 1px y los
     filetes de color —que son la firma de la ficha— no aparecian. */
  border-left:1px solid var(--p-linea);
  border-right:1px solid var(--p-linea);
  border-radius:2px;
  break-inside:avoid;
  /* Contiene los flotantes: un retrato con `pos=der` dentro de una
     ficha de PNJ se saldria por el pie de la caja sin esto, igual que
     pasaba en la hoja antes de ponerselo. */
  display:flow-root;
}
.hoja .ficha > :last-child{margin-bottom:0;}
.hoja .ficha .caja-titulo{
  font-size:15pt;letter-spacing:.01em;margin-bottom:1pt;
}
.hoja .ficha-tipo{
  margin:0 0 7pt;font-size:10pt;color:var(--p-acento);
  font-weight:600;text-align:left;hyphens:none;
}
.hoja .ficha-datos{
  margin:0 0 7pt;text-align:left;hyphens:none;line-height:1.45;
}
.hoja .ficha-datos strong{color:var(--p-titulo);}
.hoja .ficha p{margin:0 0 5pt;}

/* Las secciones de adentro (Rasgos, Acciones, Propiedades) */
.hoja .ficha h1,.hoja .ficha h2,.hoja .ficha h3,
.hoja .ficha h4,.hoja .ficha h5,.hoja .ficha h6{
  font-size:11.5pt;font-weight:600;
  margin:9pt 0 5pt;padding-bottom:2pt;
  border-bottom:1px solid var(--p-oro);
  text-transform:none;letter-spacing:0;
}

/* Monstruo: violeta arcano */
.hoja .ficha-monstruo{
  border-top:3px solid var(--p-titulo);
  border-bottom:3px solid var(--p-titulo);
}
.hoja .ficha-monstruo .caja-titulo,
.hoja .ficha-monstruo h1,.hoja .ficha-monstruo h2,.hoja .ficha-monstruo h3,
.hoja .ficha-monstruo h4,.hoja .ficha-monstruo h5,.hoja .ficha-monstruo h6{
  color:var(--p-titulo);
}

/* Objeto magico: oro */
.hoja .ficha-objeto{
  border-top:3px solid var(--p-oro);
  border-bottom:3px solid var(--p-oro);
}
.hoja .ficha-objeto .caja-titulo,
.hoja .ficha-objeto h1,.hoja .ficha-objeto h2,.hoja .ficha-objeto h3,
.hoja .ficha-objeto h4,.hoja .ficha-objeto h5,.hoja .ficha-objeto h6{
  color:var(--p-titulo-alt);
}

/* Conjuro: azul arcano */
.hoja .ficha-hechizo{
  border-top:3px solid #24466f;
  border-bottom:3px solid #24466f;
}
.hoja .ficha-hechizo .caja-titulo,
.hoja .ficha-hechizo h1,.hoja .ficha-hechizo h2,.hoja .ficha-hechizo h3,
.hoja .ficha-hechizo h4,.hoja .ficha-hechizo h5,.hoja .ficha-hechizo h6{
  color:#24466f;                           /* 6.43:1 sobre la ficha */
}

/* Rasgo de clase: verde */
.hoja .ficha-rasgo{
  border-top:3px solid #33563a;
  border-bottom:3px solid #33563a;
}
.hoja .ficha-rasgo .caja-titulo,
.hoja .ficha-rasgo h1,.hoja .ficha-rasgo h2,.hoja .ficha-rasgo h3,
.hoja .ficha-rasgo h4,.hoja .ficha-rasgo h5,.hoja .ficha-rasgo h6{
  color:#33563a;                           /* 5.54:1 sobre la ficha */
}

/* PNJ: sepia, que es el color de un retrato viejo */
.hoja .ficha-pnj{
  border-top:3px solid #6b4423;
  border-bottom:3px solid #6b4423;
}
.hoja .ficha-pnj .caja-titulo,
.hoja .ficha-pnj h1,.hoja .ficha-pnj h2,.hoja .ficha-pnj h3,
.hoja .ficha-pnj h4,.hoja .ficha-pnj h5,.hoja .ficha-pnj h6{
  color:#6b4423;                           /* 5.66:1 sobre la ficha */
}

/* Lugar: verde azulado, de piedra y agua */
.hoja .ficha-lugar{
  border-top:3px solid #1f5757;
  border-bottom:3px solid #1f5757;
}
.hoja .ficha-lugar .caja-titulo,
.hoja .ficha-lugar h1,.hoja .ficha-lugar h2,.hoja .ficha-lugar h3,
.hoja .ficha-lugar h4,.hoja .ficha-lugar h5,.hoja .ficha-lugar h6{
  color:#1f5757;                           /* 5.48:1 sobre la ficha */
}

/* Trampa: el rojo de peligro que ya usa la caja de aviso. No se
   invento un color nuevo a proposito: en la hoja el rojo ya significa
   "cuidado con esto", y una trampa es exactamente eso. */
.hoja .ficha-trampa{
  border-top:3px solid var(--p-aviso);
  border-bottom:3px solid var(--p-aviso);
}
.hoja .ficha-trampa .caja-titulo,
.hoja .ficha-trampa h1,.hoja .ficha-trampa h2,.hoja .ficha-trampa h3,
.hoja .ficha-trampa h4,.hoja .ficha-trampa h5,.hoja .ficha-trampa h6{
  color:var(--p-aviso);                    /* 5.26:1 sobre la ficha */
}

/* Rareza del objeto. Colores propios, elegidos midiendo el contraste
   contra el extremo mas oscuro del degradado de la ficha (#e2d2a9),
   que es el caso peor. Ninguno baja de 5:1. El dorado de legendaria
   arranco en #8a5a10 y daba 3.95:1, bajo el minimo AA: se oscurecio
   hasta #78490c, que es el primero de esa familia que pasa comodo. */
.hoja .rareza{font-weight:700;}
.hoja .rareza-comun{color:#4a4038;}        /* 6.74:1 */
.hoja .rareza-poco-comun{color:#2f5d3a;}   /* 5.10:1 */
.hoja .rareza-rara{color:#1f4a75;}         /* 6.11:1 */
.hoja .rareza-muy-rara{color:#5a2a80;}     /* 6.75:1 */
.hoja .rareza-legendaria{color:#78490c;}   /* 5.09:1 */
.hoja .rareza-artefacto{color:#7a2617;}    /* 6.62:1 */

/* Fila de atributos (solo la ficha de monstruo la usa) */
.hoja .ficha-atributos{
  /* Una sola fila siempre. Con un ancho base distinto de cero, dentro
     de una columna angosta los seis atributos se partian en 5 + 1 y
     el ultimo quedaba solo abajo, que parece un error de maquetado.
     Con base 0 se reparten el ancho que haya y entran igual. */
  display:flex;gap:3pt;
  margin:8pt 0;padding:6pt 0;
  border-top:1px solid var(--p-oro);
  border-bottom:1px solid var(--p-oro);
  text-align:center;
}
.hoja .atributo{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;gap:1pt;
}
.hoja .atributo-nombre{
  font-family:var(--fuente-display,"Cinzel",serif);
  font-size:8.5pt;font-weight:600;letter-spacing:.06em;
  color:var(--p-titulo);
}
.hoja .atributo-valor{font-size:12pt;font-weight:600;color:var(--p-texto);}
.hoja .atributo-mod{font-size:9pt;font-weight:600;color:var(--p-acento);}

/* ---------------- Columnas ----------------
   `:::columnas` reparte el texto igual que la doble columna de un
   manual impreso. Va como bloque y no como propiedad de la hoja
   entera a proposito: en un manual el titulo cruza el ancho completo y
   solo el cuerpo se reparte, asi que quien escribe elige que tramo
   entra en columnas y cual no. Una tabla ancha o una ilustracion a
   sangre se dejan afuera del bloque y salen enteras.

   El reparto queda equilibrado (`column-fill` por defecto): las
   columnas terminan a la misma altura, que es lo que se espera de un
   bloque suelto dentro de la hoja. */
.hoja .columnas{
  columns:var(--columnas,2);
  column-gap:7mm;
  column-rule:1px solid var(--p-linea);
  margin:0 0 10pt;
}
.hoja .columnas > :first-child{margin-top:0;}

/* `:::ancho` — cruza las columnas de lado a lado. Es para lo que no
   entra en media pagina: la tabla de progresion de una clase, una
   ilustracion grande, un titulo de capitulo. El texto de arriba
   termina de repartirse, el bloque cruza, y las columnas siguen
   despues. Fuera de `:::columnas` no hace nada, asi que se puede
   dejar escrito aunque el tramo todavia no este en columnas. */
.hoja .ancho{
  column-span:all;
  margin:10pt 0;
}
.hoja .ancho > :first-child{margin-top:0;}
.hoja .ancho > :last-child{margin-bottom:0;}
/* Un titulo no puede quedar solo al pie de una columna con su texto
   arrancando en la de al lado. */
.hoja .columnas h1,.hoja .columnas h2,.hoja .columnas h3,
.hoja .columnas h4,.hoja .columnas h5,.hoja .columnas h6{
  break-after:avoid;
}

/* ---------------- Imagenes ---------------- */
.hoja figure{margin:11pt 0;text-align:center;break-inside:avoid;}
.hoja figure img{
  display:block;max-width:100%;height:auto;margin:0 auto;
  border:1px solid var(--p-linea);border-radius:3px;
  background:#fff;
}
.hoja figcaption{
  margin-top:4pt;font-size:9.2pt;color:var(--p-texto-tenue);
  text-align:center;hyphens:none;
}
.hoja figure.pos-izq{float:left;margin:4pt 12pt 8pt 0;max-width:48%;}
.hoja figure.pos-der{float:right;margin:4pt 0 8pt 12pt;max-width:48%;}
.hoja figure.pos-izq img,.hoja figure.pos-der img{width:100%;}
/* Un ancho puesto a mano manda sobre el tope del 48%: si no, estirar
   una figura flotante no se veria y pareceria que el tirador no anda. */
.hoja figure.pos-izq.con-ancho,.hoja figure.pos-der.con-ancho{max-width:none;}
.hoja figure.pos-centro{margin-inline:auto;}
/* `:::despejar` — corta el rodeo a mano cuando el texto tiene que
   seguir por debajo de la imagen y todavia no toca ningun titulo. */
.hoja .despejar{clear:both;height:0;margin:0;font-size:0;}
.hoja figure img.limpio{border:0;background:none;}
.hoja .imagen-rota{
  display:block;margin:11pt 0;padding:8pt 10pt;
  border:1px dashed var(--p-aviso);border-radius:4px;
  color:var(--p-aviso);font-size:9.5pt;text-align:left;
}

/* ---------------- Redimensionar a mano (solo pantalla) ----------------
   El tirador lo agrega el JS despues de maquetar, nunca el render: asi
   no existe en el HTML del documento y no hay forma de que se cuele en
   el PDF. Igual se esconde explicitamente al imprimir, por las dudas. */
.hoja figure,.hoja .imagen-suelta{position:relative;}
.hoja .imagen-suelta{display:inline-block;line-height:0;max-width:100%;}

@media screen{
  .tirador{
    position:absolute;right:-13px;bottom:-13px;z-index:3;
    display:flex;align-items:center;justify-content:center;
    min-width:30px;height:30px;padding:0 9px;
    border:2px solid #efe6ce;border-radius:15px;
    background:#3d2764;color:#f4ead2;
    font-family:var(--fuente-ui,system-ui,sans-serif);
    font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
    letter-spacing:.02em;line-height:1;
    cursor:ew-resize;
    /* Se contra-escala contra el zoom de la hoja para conservar su
       tamano real en pantalla. Va con `transform` y no con `zoom`
       porque transform no afecta al layout: asi la esquina donde se
       ancla no se mueve al cambiar el encaje de la vista. */
    transform:scale(var(--contra-zoom,1));transform-origin:center;
    box-shadow:0 2px 7px rgba(0,0,0,.45);
    opacity:0;transition:opacity .12s;
  }
  .hoja figure:hover > .tirador,
  .hoja .imagen-suelta:hover > .tirador,
  .tirador:focus-visible,
  body.estirando .tirador{opacity:1;}
  .tirador:focus-visible{outline:3px solid #a9843e;outline-offset:2px;}
  .hoja figure:hover img,
  .hoja .imagen-suelta:hover img{outline:2px solid rgba(61,39,100,.55);outline-offset:2px;}
  body.estirando{cursor:ew-resize;user-select:none;}
}

/* ---------------- Aviso de desborde (solo pantalla) ---------------- */
@media screen{
  .hoja.desborde{outline:2px solid #b5482f;outline-offset:3px;}
  .hoja.desborde::before{border-color:#b5482f;}
  .marca-desborde{
    position:absolute;left:0;right:0;top:297mm;
    border-top:2px dashed #b5482f;pointer-events:none;
  }
  .marca-desborde span{
    position:absolute;right:0;top:2px;
    background:#b5482f;color:#fff;font-family:var(--fuente-ui,sans-serif);
    font-size:9px;font-weight:700;letter-spacing:.05em;
    padding:2px 7px;border-radius:0 0 4px 4px;
  }
}

/* ---------------- Impresion ---------------- */
@page{size:A4;margin:0;}
@media print{
  .vista{gap:0;zoom:1 !important;display:block;}
  .hoja{
    width:210mm;height:297mm;min-height:0;
    margin:0;box-shadow:none;overflow:hidden;
    break-after:page;break-inside:avoid;
  }
  .hoja:last-child{break-after:auto;}
  .hoja.desborde{outline:0;}
  .marca-desborde{display:none;}
  .tirador{display:none !important;}
  .hoja figure img,.hoja .imagen-suelta img{outline:0 !important;}
}