/* Photo viewers share the existing paper, ink and original crayon artwork. */
dialog{scrollbar-width:thin;scrollbar-color:#183c6059 transparent;overscroll-behavior:contain}
dialog::-webkit-scrollbar{width:6px;height:6px}
dialog::-webkit-scrollbar-track{background:transparent;margin-block:18px}
dialog::-webkit-scrollbar-thumb{background:#183c6059;border-radius:8px}
dialog::-webkit-scrollbar-button{display:none;width:0;height:0}
.detail-media{background:var(--cream)}
.detail-media>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.photo-controls{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 16px 12px}
.photo-controls>span{min-width:46px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
.photo-arrow{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #c7d5df;background:var(--paper);color:var(--blue);border-radius:50%;font-size:20px;cursor:pointer}
.photo-arrow:hover{background:#edf3f7}
.polaroid-button{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
.polaroid-button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.polaroid-dialog{width:fit-content;max-width:calc(100vw - 40px);max-height:calc(100dvh - 40px);overflow:visible;background:var(--paper);border-radius:2px;padding:12px 12px 0}
.polaroid-dialog>figure{margin:0;max-width:min(800px,calc(100vw - 64px))}
.polaroid-dialog figure>img{display:block;max-width:100%;max-height:calc(100dvh - 230px);width:auto;height:auto;object-fit:contain;margin-inline:auto}
.polaroid-dialog figcaption{max-width:65ch;text-align:center;font:400 clamp(21px,3vw,29px)/1.2 var(--display);color:var(--blue);padding:20px 14px 24px;overflow-wrap:anywhere;max-height:100px;overflow-y:auto}
.polaroid-dialog .dialog-close{right:18px;top:18px}
@media(max-width:639px){.polaroid-dialog{max-width:calc(100vw - 24px);padding:8px 8px 0}.polaroid-dialog>figure{max-width:calc(100vw - 40px)}.polaroid-dialog figcaption{padding:16px 8px 20px}}
/* Keep scrolling native; avoid animating a full-screen blur or the photo itself. */
dialog{scroll-behavior:auto}
dialog[open]{animation:viewer-open .12s ease-out}
dialog[open]::backdrop{animation:none;backdrop-filter:blur(2px);background-color:#122e4a99;background-image:none}
@keyframes viewer-open{from{opacity:0}to{opacity:1}}
.photo-controls[hidden],.photo-message[hidden]{display:none}
.photo-message{font-size:13px;text-align:center;color:var(--ink);padding:0 16px 12px;margin:0}
.polaroid-dialog>.photo-controls{padding-top:0;padding-bottom:12px}
.creative-card::before,.creative-card:nth-child(even)::before{background-image:var(--card-decoration,url('../images/decoraciones/02_remolino_azul.png'))}
.card-preview::after{background-image:var(--card-mark,url('../images/decoraciones/gotas_pintura.png'))}
@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}}