/* Generated sheet preview: the image always fits the stage, with a floating pager when there are several pages. */
.generator-page .result-stage { position: relative; }
.generator-page .result-stage.is-gallery { display: flex; min-height: clamp(560px, 76vh, 800px); }
.generator-page .result-stage.is-gallery .paper-wrap { flex: 1; min-height: 0; max-height: none; overflow: hidden; padding: 18px 18px 70px; display: flex; align-items: center; justify-content: center; background: #f7faff; }
.generator-page .result-stage.is-gallery #result-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; margin: 0; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(52, 80, 120, .18); }
.generator-page .result-stage.is-gallery #result-image[hidden] { display: none; }
.generator-page .result-stage.is-gallery .paper-wrap:not(:has(#result-image:not([hidden]))) { padding-bottom: 18px; }

.gallery-pager { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border: 1px solid #d9e8f5; box-shadow: 0 10px 28px rgba(40, 70, 120, .22); animation: pager-in .35s ease both; }
.gallery-pager[hidden] { display: none; }
.gallery-pager > button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #1e8bff, #1262d6); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; transition: transform .2s, opacity .2s; }
.gallery-pager > button:hover:not(:disabled) { transform: scale(1.1); }
.gallery-pager > button:disabled { opacity: .3; cursor: default; background: #8aa4c4; }
.gallery-pager button:focus-visible { outline: 3px solid #ffbf3c; outline-offset: 2px; }
.gallery-dots { display: flex; gap: 6px; align-items: center; }
.gallery-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: #c3d4e8; cursor: pointer; transition: width .25s, background .25s; }
.gallery-dot.on { width: 24px; border-radius: 6px; background: #1e8bff; }
.gallery-count { font-size: 13px; font-weight: 800; color: #345; min-width: 38px; text-align: center; }
@keyframes pager-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 640px) { .gallery-dots { display: none; } .generator-page .result-stage.is-gallery { min-height: clamp(460px, 70vh, 640px); } }
@media (prefers-reduced-motion: reduce) { .gallery-pager { animation: none; } }
@media print { .gallery-pager { display: none !important; } }

/* Loading state while the material is being created: a pencil that writes, rotating messages and a timer. */
.generator-page .generation-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 24px; }
.generator-page .generation-loading[hidden] { display: none; }
.pencil-loader { width: min(100%, 340px); }
.pl-scene { display: block; width: 100%; height: auto; overflow: visible; }
.pl-paper-bob { animation: pl-bob 3.2s ease-in-out infinite; transform-origin: 160px 100px; }
.pl-line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: pl-draw 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.pl-sparks path { transform-box: fill-box; transform-origin: center; animation: pl-twinkle 1.8s ease-in-out infinite; }
.pl-sparks path:nth-child(2) { animation-delay: .5s; }
.pl-sparks path:nth-child(3) { animation-delay: 1s; }
.generator-page .generation-loading h3 { margin: 6px 0 0; color: #123c6b; font-size: 23px; font-weight: 900; letter-spacing: -.4px; }
.pl-message { margin: 10px 0 0; min-height: 26px; color: #4c5f86; font-size: 16px; font-weight: 700; }
.pl-message.swap { animation: pl-swap .45s ease both; }
.pl-bar { width: min(280px, 80%); height: 8px; margin-top: 16px; border-radius: 999px; background: #e3ecf8; overflow: hidden; }
.pl-bar span { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff5fa0, #7a5cff, #1e8bff); animation: pl-slide 1.4s ease-in-out infinite; }
.pl-meta { margin: 14px 0 0; color: #8a90a9; font-size: 13px; }
.pl-meta b { color: #123c6b; font-variant-numeric: tabular-nums; }
.pl-tip { max-width: 340px; margin: 14px 0 0; padding: 10px 14px; border-radius: 14px; background: #fff7e0; border: 1px solid #f6e2a6; color: #7a5a00; font-size: 13.5px; font-weight: 700; line-height: 1.5; animation: pl-swap .5s ease both; }
.pl-tip[hidden] { display: none; }
@keyframes pl-draw { 0% { stroke-dashoffset: 100; opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes pl-bob { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-4px) rotate(.6deg); } }
@keyframes pl-twinkle { 0%, 100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes pl-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pl-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(270%); } }
@media (prefers-reduced-motion: reduce) { .pl-paper-bob, .pl-sparks path, .pl-bar span { animation: none; } .pl-line { animation: none; stroke-dashoffset: 0; } }

/* Back button: a compact pill with an arrow chip, same look as the checkout's "Volver". */
.generator-page .back-link { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 5px; margin: 0 0 12px; border-radius: 999px; background: #fff; border: 1px solid #d9e8f7; color: #1c64c5; font-size: 14px; font-weight: 800; line-height: 1; text-decoration: none; box-shadow: 0 3px 10px rgba(52, 100, 170, .1); transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.generator-page .back-link .back-chip { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #ff5fa0, #7a5cff 55%, #1e8bff); color: #fff; transition: transform .25s; }
.generator-page .back-link .back-chip svg { width: 14px; height: 14px; transform: rotate(180deg); stroke: currentColor; }
.generator-page .back-link:hover { background: #f1f7ff; border-color: #b9d4f5; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(52, 100, 170, .18); }
.generator-page .back-link:hover .back-chip { transform: translateX(-3px); }
.generator-page .back-link:focus-visible { outline: 3px solid #ffbf3c; outline-offset: 3px; }
@media (max-width: 640px) { .generator-page .back-link { height: 34px; font-size: 13px; margin-bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .generator-page .back-link, .generator-page .back-link .back-chip { transition: none; } }