/* Recuerdi · "Prueba con tus propias fotos" in the example gallery (WED-253): the sheet (e-mail, code, photos), the
   panel "Sus fotos" above the tabs and its viewer. Colours from the gallery theme ([data-theme] in viewer.css).
   Rules (design/DESIGN-RULES.md): no one-sided borders on rounded elements, no native browser controls visible
   (the file input stays hidden behind our button, the checkbox gets its box from /assets/shared/controls.css). */

/* ---- sheet ---- */
.dm-sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--ink) 45%, transparent); animation: dm-fade .16s ease-out; }
.dm-sheet__card { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px 22px 22px;
  border-radius: var(--gv-r-card, 18px); background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .22); }
.dm-sheet__t { margin: 0 34px 8px 0; font-family: var(--gv-meta-font); font-weight: 400; font-size: 25px; line-height: 1.2; text-wrap: balance; hyphens: manual; }
.dm-sheet__lede { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.dm-sheet__note { margin: 14px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.45; text-wrap: pretty; }
.dm-sheet__left { margin: 0; color: var(--ink-2); font-size: 14px; }
.dm-sheet__x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent;
  color: var(--ink-2); font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.dm-sheet__x:hover { background: var(--paper-2); color: var(--ink); }
.dm-sheet__x:focus-visible, .dm-tile:focus-visible, .dm-link:focus-visible { outline: 2px solid var(--ring, var(--accent)); outline-offset: 2px; }

.dm-form { display: grid; gap: 14px; }
.dm-field { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.dm-input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--rule-strong);
  background: var(--ivory, var(--paper)); color: var(--ink); font: inherit; font-size: 16px; }
.dm-input:focus { outline: 2px solid var(--ring, var(--accent)); outline-offset: 1px; border-color: var(--accent); }
.dm-input[aria-invalid="true"] { border-color: #a3332d; }
.dm-input--code { font-size: 26px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.dm-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; cursor: pointer; }
.dm-check input { margin-top: 2px; }
.dm-check a { color: var(--ink); }
.dm-hint { margin: -6px 0 0 30px; color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.dm-hint[hidden] { display: none; }
.dm-hint.is-err { color: #a3332d; }
.dm-primary.is-off { opacity: .55; cursor: not-allowed; }
.dm-err { margin: 0; min-height: 0; color: #a3332d; font-size: 14px; }
.dm-err:empty { display: none; }
.dm-primary { width: 100%; min-height: 48px; }
.dm-primary.is-busy { opacity: .7; cursor: progress; }
.dm-link { justify-self: center; border: 0; background: none; color: var(--ink-2); text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; padding: 6px; }

/* ---- panel "Sus fotos" ---- */
.dm-trial { max-width: 760px; margin: 6px auto 14px; padding: 16px; border-radius: var(--gv-r-card, 18px); background: var(--paper-2); color: var(--ink); }
.dm-trial__t { margin: 0; font-family: var(--gv-meta-font); font-weight: 400; font-size: 22px; }
.dm-trial__note { margin: 4px 0 12px; font-size: 13px; color: var(--ink-2); text-wrap: pretty; }
.dm-trial__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dm-tile { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--paper); cursor: zoom-in; }
.dm-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-tile--wait { cursor: default; display: grid; place-items: center; border: 1px dashed var(--rule-strong);
  background: repeating-linear-gradient(135deg, var(--paper) 0 10px, var(--paper-2) 10px 20px); }
.dm-tile__l { font-size: 11.5px; letter-spacing: .04em; color: var(--ink-2); text-align: center; padding: 0 6px; animation: dm-pulse 1.6s ease-in-out infinite; }
.dm-trial__msg { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--paper); font-size: 13.5px; color: var(--ink-2); }
.dm-trial__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---- viewer ---- */
.dm-lb { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(12, 10, 8, .92); }
.dm-lb img { max-width: 100%; max-height: calc(100dvh - 32px); border-radius: 8px; }
.dm-lb__x { color: #fff; background: rgba(255, 255, 255, .12); }
.dm-lb__x:hover { background: rgba(255, 255, 255, .22); color: #fff; }

@keyframes dm-fade { from { opacity: 0; } }
@keyframes dm-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .dm-sheet, .dm-tile__l { animation: none; } }

@media (max-width: 560px) {
  .dm-sheet { place-items: end stretch; padding: 0; }
  .dm-sheet__card { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .dm-trial { margin: 6px 12px 14px; padding: 14px 12px; }
  .dm-trial__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dm-trial__acts .gv-btn { flex: 1 1 auto; }
}