/* "Mis fotos": formulario de código → galería en columnas con descarga por foto y .zip.
   Las fotos se muestran en su proporción natural (no en arco) porque son el producto que se entrega. */

.btn-chico { padding: 9px 16px; font-size: .9rem; }
.btn:disabled { opacity: .55; cursor: wait; transform: none; }

.acceso-centro { max-width: 460px; margin: 0 auto; justify-items: center; text-align: center; }
.acceso-centro .btn { width: 100%; justify-content: center; }
.aviso-error { color: #c62828; font-weight: 500; font-size: .95rem; }
:root[data-theme="dark"] .aviso-error { color: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aviso-error { color: #ff8a80; } }

.cargando { text-align: center; color: var(--tinta-suave); padding: 120px 16px; }

.pantalla-galeria { padding-top: clamp(32px, 5vw, 56px); }
.galeria-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.galeria-cabeza > div:first-child { display: grid; gap: 10px; min-width: 0; }
.g-datos { color: var(--tinta-suave); }
.g-datos .urgente { color: var(--rosa); font-weight: 600; }
.nota-descarga { color: var(--tinta-suave); font-size: .92rem; margin-bottom: 26px; }

.zip-estado { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; margin-bottom: 18px; display: grid; gap: 10px; }
.barra { height: 8px; border-radius: 99px; background: var(--rosa-suave); overflow: hidden; }
.barra span { display: block; height: 100%; width: 0; background: var(--rosa); transition: width .2s ease; }
.zip-partes { display: flex; flex-wrap: wrap; gap: 8px; }
.zip-partes:empty { display: none; }

.fotos-grid { columns: 4 240px; column-gap: 14px; list-style: none; margin: 0; padding: 0; }
.fotos-grid li { break-inside: avoid; margin-bottom: 14px; position: relative; border-radius: 10px; overflow: hidden; background: var(--rosa-suave); }
.foto-ver { all: unset; display: block; width: 100%; cursor: zoom-in; }
.foto-ver img { width: 100%; height: auto; transition: transform .4s ease; }
.foto-ver:hover img { transform: scale(1.03); }
.foto-ver:focus-visible { outline: 3px solid var(--rosa); outline-offset: -3px; }
.foto-ver.sin-vista { cursor: default; aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 16px; text-align: center; color: var(--tinta-suave); font-size: .9rem; overflow-wrap: anywhere; }
.foto-bajar {
  position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(20, 10, 18, .7); color: #fff;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.foto-bajar:hover { background: var(--rosa); }
.foto-bajar svg { width: 20px; height: 20px; }
@media (max-width: 560px) { .fotos-grid { columns: 2; column-gap: 8px; } .fotos-grid li { margin-bottom: 8px; } .foto-bajar { width: 34px; height: 34px; right: 6px; bottom: 6px; } }

.visor img { max-width: min(100%, 1400px); }
.visor-bajar {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px;
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 999px;
  background: var(--rosa); color: #fff; font-weight: 600; text-decoration: none;
}
.visor-bajar svg { width: 20px; height: 20px; }