/* Estilos propios (antes en un <style> de index.html) */
    /* ── La hoja de muestra: una página APA real a escala, con sus guías de margen ── */
    .hoja {
      position: relative; width: 100%; max-width: 360px; margin-inline: auto;
      aspect-ratio: 21 / 29.7; background: #fff; overflow: hidden;
      box-shadow: 0 1px 2px rgba(15,27,45,.12), 0 18px 40px -18px rgba(15,27,45,.35);
      font-family: "Times New Roman", Times, serif; font-size: 9.5px; color: #111;
    }
    /* 2,54 cm de margen = 12,1 % del ancho y 8,55 % del alto de una hoja A4 */
    .hoja-guia { position: absolute; inset: 8.55% 12.1%; border: 1px dashed #E0527A; }
    .hoja-texto { position: absolute; inset: 8.55% 12.1%; line-height: 2; text-align: left; }
    .hoja-texto p { margin: 0; }
    .hoja-texto .sangria { text-indent: 8%; }           /* 1,27 cm ≈ 8 % del ancho útil */
    .hoja-numero { position: absolute; top: 4.2%; right: 12.1%; line-height: 1; }
    .hoja-medida { position: absolute; font-family: "Figtree", system-ui, sans-serif; font-size: 8px; color: #E0527A; font-weight: 600; }

    /* Referencia APA mostrada con sangría francesa */
    .ref-apa { font-family: "Times New Roman", Times, serif; font-size: 1.05rem; line-height: 1.6; padding-left: 1.27cm; text-indent: -1.27cm; }

    /* Asegura que [hidden] siempre oculte, aunque el elemento tenga una clase flex/grid de Tailwind */
    [hidden] { display: none !important; }

    /* Zona de arrastre */
    #zona.arrastrando { border-color: #2745D6; background: #EEF2FF; }

    @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }