/* Ojo de agua · una pequeña mesa de impresión */
.tirada-frame { position: relative; isolation: isolate; }
.tirada-original, .tirada-final { display: block; width: 100%; height: 100%; }
.tirada-layers { position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
.tirada-layers > picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tirada-layers picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tirada[data-stage="paper"] .tirada-layers, .tirada[data-stage="red"] .tirada-layers, .tirada[data-stage="printing"] .tirada-layers { visibility: visible; }
.tirada[data-stage="paper"] .tirada-red, .tirada[data-stage="paper"] .tirada-final, .tirada[data-stage="red"] .tirada-final { visibility: hidden; }
.tirada-register { position: absolute; z-index: 2; color: #f6e7c9; font: 15px/1 monospace; opacity: .8; pointer-events: none; mix-blend-mode: difference; }
.tirada-register-a { top: 12px; left: 12px; }.tirada-register-b { right: 12px; bottom: 12px; }
.tirada-sweep { display: none; }
html[data-motion="on"] .tirada[data-stage="printing"] .tirada-red { animation: tirada-red 3.2s cubic-bezier(.33,0,.2,1) both; }
html[data-motion="on"] .tirada[data-stage="printing"] .tirada-final { animation: tirada-final 3.2s cubic-bezier(.33,0,.2,1) both; }
html[data-motion="on"] .tirada[data-stage="printing"] .tirada-sweep { display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; animation: tirada-sweep 3.2s ease-in-out both; }
@keyframes tirada-red { 0%, 8% { clip-path: inset(0 100% 0 0); } 47%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes tirada-final { 0%, 51% { clip-path: inset(0 100% 0 0); } 92%, 100% { clip-path: inset(0 0 0 0); } }
.tirada-sweep::before { content:""; display:block; width:2px; height:100%; background:#f7e7c7; box-shadow:0 0 18px 3px #f7e7c788; }
@keyframes tirada-sweep { 0%, 8% { transform:translateX(0); opacity:0; } 12% { opacity:.8; } 46% { transform:translateX(100%); opacity:.8; } 47%,51% { transform:translateX(0); opacity:0; } 55% { opacity:.8; } 92% { transform:translateX(100%); opacity:.8; } 100% { transform:translateX(100%); opacity:0; } }
/* Pie de lámina: una acción, estado legible y muestras secundarias. */
.tirada-controls[hidden], .tirada-lens-instruction[hidden] { display: none; }
.tirada-controls { display: flex; align-items: center; justify-content: space-between; gap: 2px 20px; flex-wrap: wrap; padding-top: 8px; }
.tirada-playback { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tirada-controls button { appearance: none; border: 0; background: none; min-height: 44px; min-width: 44px; color: inherit; cursor: pointer; }
.tirada-controls button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.tirada-controls .tirada-replay { padding: 0; font: 650 14px/1.25 var(--sans, sans-serif); white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tirada-replay:hover { text-decoration-thickness: 2px; }
.tirada-status { max-width: 140px; color: var(--soft, #435651); font: 400 12px/1.35 var(--sans, sans-serif); }
.tirada-inks { display: flex; align-items: center; gap: 4px; }
.tirada-inks button { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-bottom: 2px solid transparent; font: 500 12px/1.25 var(--sans, sans-serif); white-space: nowrap; }
.tirada-inks button:hover { background: #152b2908; }
.tirada-inks button[aria-pressed="true"] { border-bottom-color: currentColor; }
.tirada-inks button i { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #435651; background: #efe0bf; }
.tirada-inks [data-ink="red"] i { background: #db4928; border-color: #db4928; }
.tirada-inks [data-ink="final"] i { background: linear-gradient(90deg, #db4928 50%, #173334 50%); border-color: #173334; }
.tirada-lens-instruction { margin: 8px 0 0; font: 400 12px/1.4 var(--sans, sans-serif); color: var(--soft, #435651); }
.tirada-touch-help { display: none; }
@media (pointer: coarse) { .tirada-touch-help { display: inline; } .tirada-pointer-help { display: none; } }
html[data-motion="off"] .tirada-replay { display: none; }
@media (prefers-reduced-motion: reduce) { .tirada-replay { display: none; } .tirada[data-stage="printing"] .tirada-red, .tirada[data-stage="printing"] .tirada-final, .tirada[data-stage="printing"] .tirada-sweep { animation: none !important; } }
@media (max-width: 650px) {
  .tirada-playback { width: 100%; justify-content: space-between; }
  .tirada-status { text-align: right; }
  .tirada-inks { justify-content: space-between; width: 100%; }
  .tirada-inks button { padding-inline: 6px; }
  .tirada-register { font-size: 12px; }
  html[data-motion="off"] .tirada-playback { width: auto; }
  html[data-motion="off"] .tirada-status { text-align: left; max-width: none; }
}
@media (max-width: 650px) and (prefers-reduced-motion: reduce) { .tirada-playback { width: auto; } .tirada-status { text-align: left; max-width: none; } }
/* A failed original leaves a compact, readable alt rather than an empty plate. */
.tirada-image-failed .tirada-frame { aspect-ratio: auto; min-height: 54px; background: #e5e9dc; }
.tirada-image-failed .tirada-original { display: none; }
.tirada-unavailable { margin: 0; padding: 16px; font: 400 13px/1.4 var(--sans, sans-serif); }
.tirada-image-failed .tirada-register { display: none; }

/* Lupa de impresión: misma imagen, ampliada ópticamente con CSS. */
.tirada-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tirada-lens-toggle[hidden], .tirada-lens[hidden] { display: none; }
.tirada-lens-toggle { position: absolute; z-index: 5; top: 8px; right: 8px; min-height: 44px; padding: 0 12px; border: 1px solid #f3e5c8; background: #173334e8; color: #fff6e2; font: 600 12px/1 var(--sans, sans-serif); letter-spacing: 0; cursor: pointer; }
.tirada-lens-toggle:hover, .tirada-lens-toggle[aria-pressed="true"] { background: #f3e5c8; color: #173334; border-color: #173334; }
.tirada-lens-toggle:focus-visible { outline: 3px solid #fff6e2; outline-offset: 3px; }
.tirada-lens { position: absolute; z-index: 4; width: clamp(100px, 20vw, 150px); aspect-ratio: 1; border: 3px solid #f3e5c8; outline: 1px solid #173334; border-radius: 50%; pointer-events: none; background-image: url("estampa.webp"); background-repeat: no-repeat; box-shadow: 0 3px 12px #17333455; }
@media (max-width: 650px) { .tirada-lens { background-image: url("estampa-compacta.webp"); } }