/* ============================================================
   RUNNING FEST LIVERPOOL — sistema de diseño
   Base: premium-ui-system (tokens 3-tier, motion, a11y).

   La paleta NO se inventó: se muestreó del arte del cliente.
     magenta  #DF068C  = oklch(0.594 0.244 352.5)  <- color corporativo
     negro    #130C0E  = oklch(0.165 0.013 352.5)  <- ya viene teñido al hue de marca
   Los dos colores de marca van anclados en hex porque son identidad y deben ser exactos;
   el resto de la rampa se deriva en OKLCH desde ese hue/chroma.

   Contrastes verificados (WCAG 2.2):
     blanco / magenta ........ 4.62:1  AA texto normal
     blanco / negro .......... 19.33:1
     muted  / negro .......... 10.79:1
     magenta-vivo / negro .... 6.44:1  (el magenta de marca puro da 4.18 -> solo texto grande)

   Radios: UN sistema declarado -> pill (999px) en todo lo interactivo,
   4px en superficies de media. Nada de 16px uniforme.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* ---------- TIER 1: primitivos ---------- */
  --brand-hue: 352.5;
  --brand-chroma: 0.244;

  --magenta: #df068c; /* corporativo, exacto */
  --negro: #130c0e; /* corporativo, exacto */

  /* Rampa derivada del hue/chroma de marca */
  --brand-100: oklch(0.93 0.11 var(--brand-hue));
  --brand-200: oklch(0.86 0.159 var(--brand-hue));
  --brand-300: oklch(0.75 0.207 var(--brand-hue));
  --brand-400: oklch(0.68 0.235 var(--brand-hue)); /* magenta legible como TEXTO sobre negro */
  --brand-700: oklch(0.37 0.22 var(--brand-hue));
  --brand-900: oklch(0.22 0.09 var(--brand-hue));

  /* Neutros teñidos al hue de marca (nunca gris puro) */
  --neutral-100: oklch(0.93 0.008 var(--brand-hue));
  --neutral-300: oklch(0.79 0.01 var(--brand-hue));
  --neutral-700: oklch(0.42 0.012 var(--brand-hue));
  --neutral-800: oklch(0.3 0.012 var(--brand-hue));
  --neutral-900: oklch(0.21 0.012 var(--brand-hue));

  --red-500: oklch(0.62 0.21 25);
  --green-500: oklch(0.68 0.17 150);

  /* Espaciado — base 4px, ritmo 8px */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* Tipografía fluida (Utopia 360->1240) */
  --text--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --text-0:  clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --text-1:  clamp(1.35rem, 1.2682rem + 0.3636vw, 1.5625rem);
  --text-2:  clamp(1.62rem, 1.4948rem + 0.5568vw, 1.9263rem);
  --text-3:  clamp(1.944rem, 1.7591rem + 0.8216vw, 2.3956rem);
  --text-4:  clamp(2.3328rem, 2.0662rem + 1.1848vw, 2.9843rem);
  --text-5:  clamp(2.7994rem, 2.4222rem + 1.6763vw, 3.7213rem);

  --font-body: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;

  /* Radios: pill para acciones, 4px para media */
  --radius-media: 4px;
  --radius-panel: 10px;
  --radius-full: 999px;

  /* Sombras teñidas al hue de marca, luz consistente arriba-izquierda */
  --shadow-tint: oklch(0.12 0.06 var(--brand-hue));
  --elevation-1: 0.5px 1px 1px color-mix(in oklch, var(--shadow-tint) 40%, transparent);
  --elevation-2:
    0.5px 1px 1px color-mix(in oklch, var(--shadow-tint) 26%, transparent),
    1px 2px 4px color-mix(in oklch, var(--shadow-tint) 24%, transparent),
    2px 8px 16px color-mix(in oklch, var(--shadow-tint) 22%, transparent);
  --elevation-3:
    1px 2px 4px color-mix(in oklch, var(--shadow-tint) 20%, transparent),
    2px 6px 12px color-mix(in oklch, var(--shadow-tint) 18%, transparent),
    4px 12px 24px color-mix(in oklch, var(--shadow-tint) 16%, transparent),
    8px 24px 48px color-mix(in oklch, var(--shadow-tint) 14%, transparent);

  /* Motion — valores de casa, no se inventan otros */
  --dur-instant: 120ms;
  --dur-toggle: 240ms;
  --dur-modal: 400ms;
  --dur-page: 500ms;
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* ---------- TIER 2: semánticos ---------- */
  --surface: var(--negro);
  --surface-raised: var(--neutral-900);
  --surface-sunken: oklch(0.13 0.012 var(--brand-hue));
  --text: #ffffff;
  --text-muted: var(--neutral-300);
  --text-faint: var(--neutral-700);
  --border: color-mix(in oklch, var(--neutral-800) 80%, transparent);
  --accent: var(--magenta);
  --accent-text: var(--brand-400);
  --on-accent: #ffffff;
  --danger: var(--red-500);
  --success: var(--green-500);
  --focus-ring: var(--brand-300);
}

/* ---------- reset acotado ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* El color base va en html: si el body lleva .brandbg su fondo se vuelve transparente
   para no tapar el pseudo-elemento del arte, y sin esto el canvas quedaria blanco. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--surface);
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--surface);
  color: var(--text);
  font: 400 var(--text-0) / 1.55 var(--font-body);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-media);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Grain: textura de impresión, coste cero de red */
.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ============================================================
   Tipografía de marca
   El display usa el eje de ancho de Archivo (wdth 118) + peso 800:
   es lo que le da el aire deportivo del arte sin traer otra familia.
   ============================================================ */
.display {
  font-weight: 800;
  font-variation-settings: "wdth" 118;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}

/* ============================================================
   Botones
   ============================================================ */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 64px;
  padding: var(--space-4) var(--space-6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-1);
  font-weight: 700;
  font-variation-settings: "wdth" 108;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--elevation-2);
  transition: transform var(--dur-instant) var(--ease-out),
              box-shadow var(--dur-instant) var(--ease-out),
              background-color var(--dur-instant) var(--ease-out);
}
.btn:hover { box-shadow: var(--elevation-3); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn .icon { flex: none; }

/* Secundario: contorno blanco sobre el negro de marca */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: color-mix(in oklch, #ffffff 45%, transparent);
  box-shadow: none;
}
.btn--ghost:hover {
  background: color-mix(in oklch, #ffffff 10%, transparent);
  border-color: #ffffff;
  box-shadow: none;
}

.btn--small {
  width: auto;
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text--1);
  font-weight: 600;
  gap: var(--space-2);
}

.btn--danger { --btn-bg: var(--danger); --btn-fg: #ffffff; }

.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ============================================================
   FONDO DE MARCA — compartido por la landing y la galeria
   ============================================================ */
.brandbg {
  position: relative;
  isolation: isolate;
}

/* Cuando el fondo de marca va en el propio <body>, su color solido taparia el
   pseudo-elemento del arte (que va en z-index negativo). */
body.brandbg { background: transparent; }

/* El arte del cliente. En retrato se ancla arriba-derecha para no perder el
   remolino de líneas, que es la firma gráfica de la campaña. Va fijo para que en
   la galeria no se desplace al hacer scroll por cientos de fotos. */
.brandbg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--magenta);
  background-image: image-set(url("/brand/fondo-1920.webp") 1x);
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
}

/* Velo: garantiza contraste del texto pase lo que pase con el arte. */
.brandbg::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    color-mix(in oklch, var(--negro) 18%, transparent) 0%,
    color-mix(in oklch, var(--negro) 6%, transparent) 30%,
    color-mix(in oklch, var(--negro) 74%, transparent) 74%,
    color-mix(in oklch, var(--negro) 94%, transparent) 100%
  );
}

/* En la galeria las fotos mandan: el arte se atenua hasta quedar como textura de marca.
   Sin bajarle la opacidad, el remolino blanco se ve como una mancha gris sucia detras
   del titulo — oscurecerlo con el velo no basta, hay que quitarle presencia. */
.brandbg--deep::before { opacity: 0.4; }
.brandbg--deep::after {
  background:
    radial-gradient(120% 60% at 70% 0%, transparent 0%, color-mix(in oklch, var(--negro) 70%, transparent) 100%),
    linear-gradient(
      to bottom,
      color-mix(in oklch, var(--negro) 62%, transparent) 0%,
      color-mix(in oklch, var(--negro) 90%, transparent) 38%,
      color-mix(in oklch, var(--negro) 96%, transparent) 100%
    );
}

/* ============================================================
   LANDING
   Orden en pantalla: botones al centro, logo al pie.
   ============================================================ */
/* Los botones se centran respecto a LA PANTALLA, no respecto al espacio que deja el
   logo: por eso el logo sale del flujo (absolute) y no desplaza el centro. */
.landing {
  min-height: 100svh;
  display: grid;
  place-items: center;
  /* Padding vertical simetrico: con arriba y abajo distintos, el centro del contenido
     se desplaza respecto al centro real de la pantalla. */
  padding: var(--space-7) var(--space-5);
}

.landing__actions {
  display: grid;
  gap: var(--space-3);
  width: min(440px, 100%);
}

.landing__note {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text--1);
  color: color-mix(in oklch, #ffffff 62%, transparent);
}

/* El logo ES el titulo de la pagina: por eso vive en un <h1>, aunque este al pie.
   Va generoso para que ancle la composicion: con los botones arriba, un logo pequeño
   dejaria el pie de la pantalla flotando. */
.landing__logo {
  position: absolute;
  left: 50%;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  translate: -50% 0;
  /* La mitad del tamaño anterior (era 440px / 80vw). */
  width: min(220px, 40vw);
  margin: 0;
}
.landing__logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 18px color-mix(in oklch, var(--negro) 60%, transparent));
}

/* Entrada escalonada. Solo transform + opacity.
   Los retardos van en clases, no en style="" inline: la CSP de la pagina es estricta
   (style-src 'self', sin unsafe-inline) y un atributo style seria bloqueado. */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise var(--dur-page) var(--ease-out-strong) backwards;
  }
  .rise--2 { animation-delay: 60ms; }
  .rise--3 { animation-delay: 110ms; }
  .rise--4 { animation-delay: 170ms; }
  .rise--5 { animation-delay: 240ms; }
  .rise--6 { animation-delay: 300ms; }
  .rise--7 { animation-delay: 360ms; }
  @keyframes rise {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: none; }
  }
}

/* Aviso de tope de galeria */
.tope {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text--1);
  color: var(--text-faint);
}

.gate__icon { color: var(--accent-text); }
.gate__title { font-size: var(--text-3); }

/* ============================================================
   HEADER (galería y subida)
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  padding-top: calc(var(--space-3) + env(safe-area-inset-top));
  background: color-mix(in oklch, var(--negro) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar__logo { width: 132px; height: auto; }
.topbar__spacer { margin-left: auto; }

.topbar__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text--1);
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: color var(--dur-instant) var(--ease-out);
}
.topbar__back:hover { color: var(--text); }

/* Variante centrada: el logo queda al eje de la pantalla y el boton de volver flota
   a la izquierda, para que nada rompa la simetria en una pantalla vertical grande. */
.topbar--center {
  position: sticky;
  justify-content: center;
  padding-inline: var(--space-6);
}
.topbar--center .topbar__logo { width: clamp(150px, 20vw, 220px); }

.topbar__back--float {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  background: color-mix(in oklch, #ffffff 8%, transparent);
}
.topbar__back--float:hover { background: color-mix(in oklch, #ffffff 18%, transparent); }

/* Franja de marca bajo el header: magenta limpio, sin adornos. Un intento previo de
   recrear las lineas del arte aqui salia como bloques cuadrados y ensuciaba el header. */
.brandstrip { height: 5px; background: var(--magenta); }

.page {
  max-width: 1320px;
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
}

.page__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.page__title { font-size: var(--text-3); }

/* Variante centrada de la galeria: pensada para una pantalla vertical grande
   (tipo 1080-1800 de ancho por 1920 de alto), donde todo tiene que caer al eje. */
.page--center {
  max-width: 1600px;
  text-align: center;
}
.page--center .page__head {
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.page--center .page__title { font-size: var(--text-4); }
.page--center .tope { text-align: center; }
/* Sin cabecera, el grid necesita su propio aire arriba para no pegarse al borde
   ni quedar debajo del boton flotante de volver. */
.page--center { padding-top: var(--space-8); }
/* El grid se centra como bloque y ademas centra sus columnas, para que una ultima
   fila incompleta no quede colgando a la izquierda. */
.page--center .grid { justify-content: center; }
.page--center .empty { margin-inline: auto; }

.count {
  font-family: var(--font-mono);
  font-size: var(--text--1);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   GRID DE FOTOS
   Fila explícita (no auto) y sin place-items: en booths anteriores eso
   recortó la foto y rompió el height:100% de la celda.
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  grid-auto-rows: auto;
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }
}
/* Pantalla vertical grande (1080-1800 de ancho): sin esto salen ocho columnas
   diminutas y las caras no se distinguen a distancia. */
@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
}

/* Oculto de verdad: una clase con display ganaría al atributo hidden. */
.grid[hidden], .empty[hidden], [hidden] { display: none !important; }

.tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--surface-raised);
  cursor: pointer;
  /* No renderiza lo que está fuera del viewport: crítico con cientos de fotos. */
  content-visibility: auto;
  contain-intrinsic-size: 230px;
  transition: transform var(--dur-instant) var(--ease-out);
}
.tile:hover { transform: scale(1.02); z-index: 1; }
.tile:active { transform: scale(0.99); }

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-toggle) var(--ease-out);
}
.tile img.is-loaded { opacity: 1; }

/* Estado vacío: la galeria sin fotos es solo el icono y la frase, centrados en la
   pantalla. Sin cabecera, sin titulo y sin contador — se quitaron a proposito. */
/* Fijo a la pantalla: es el unico contenido cuando no hay fotos, y asi queda centrado
   exacto sin que el padding de la pagina lo desplace. */
.empty {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
}
.empty__icon { color: var(--accent-text); opacity: 0.9; }
.empty__title {
  margin: 0;
  max-width: 18ch;
  font-size: var(--text-2);
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}

/* Volver al inicio: se conserva para no dejar sin salida a quien llega desde la landing. */
.backfloat {
  position: fixed;
  top: calc(var(--space-4) + env(safe-area-inset-top));
  left: var(--space-4);
  z-index: 20;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--negro) 55%, transparent);
  backdrop-filter: blur(8px);
  text-decoration: none;
  transition: color var(--dur-instant) var(--ease-out),
              background-color var(--dur-instant) var(--ease-out);
}
.backfloat:hover {
  color: var(--text);
  background: color-mix(in oklch, var(--negro) 80%, transparent);
}

/* ============================================================
   LIGHTBOX (<dialog>: focus trap y Esc de gratis)
   ============================================================ */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100svh;
  max-height: 100svh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  overflow: hidden;
}
.lightbox::backdrop { background: color-mix(in oklch, var(--negro) 94%, transparent); }

.lightbox__inner {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  background: color-mix(in oklch, var(--negro) 92%, transparent);
}

.lightbox__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-top: calc(var(--space-3) + env(safe-area-inset-top));
}

.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 var(--space-2);
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-media);
}

.lightbox__foot {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
}

.iconbtn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: color-mix(in oklch, #ffffff 8%, transparent);
  cursor: pointer;
  transition: background-color var(--dur-instant) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.iconbtn:hover { background: color-mix(in oklch, #ffffff 18%, transparent); }
.iconbtn:active { transform: scale(0.94); }
.iconbtn[disabled] { opacity: 0.3; pointer-events: none; }

/* Flechas laterales: en escritorio flotan sobre la foto */
.lightbox__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
}
.lightbox__nav--prev { left: var(--space-3); }
.lightbox__nav--next { right: var(--space-3); }
@media (max-width: 599px) {
  .lightbox__nav { display: none; } /* en móvil se navega con swipe */
}

.lightbox__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text--1);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lbIn var(--dur-modal) var(--ease-out-strong); }
  @keyframes lbIn {
    from { opacity: 0; transform: scale(0.985); }
    to { opacity: 1; transform: none; }
  }
}

/* ============================================================
   SUBIDA (pantalla del operador)
   ============================================================ */
.gate {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-5);
  min-height: 72svh;
  padding: var(--space-5);
  text-align: center;
}
.gate__form { display: grid; gap: var(--space-3); width: min(360px, 100%); }

.field {
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) var(--space-5);
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font: 500 var(--text-0) / 1.2 var(--font-body);
  text-align: center;
}
.field::placeholder { color: var(--text-faint); }
.field:focus { border-color: var(--accent); outline: none; }

.msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 24px;
  margin: 0;
  font-size: var(--text--1);
  color: var(--text-muted);
}
.msg--error { color: var(--danger); }
.msg--ok { color: var(--success); }

.dropzone {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  border: 2px dashed var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface-sunken);
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--dur-instant) var(--ease-out),
              background-color var(--dur-instant) var(--ease-out);
}
.dropzone:hover, .dropzone.is-over {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--magenta) 10%, var(--surface-sunken));
}
.dropzone__icon { color: var(--accent-text); }
.dropzone__title { margin: 0; font-size: var(--text-1); font-weight: 700; color: var(--text); }
.dropzone p { margin: 0; font-size: var(--text--1); }

.queue { display: grid; gap: var(--space-2); margin-top: var(--space-5); }

.qrow {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border-radius: var(--radius-panel);
  font-size: var(--text--1);
}
.qrow__thumb {
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: var(--radius-media);
  background: var(--surface-sunken);
}
.qrow__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}
.qrow__bar {
  height: 4px;
  margin-top: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  overflow: hidden;
}
.qrow__fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--accent);
  transform-origin: left;
  transition: width var(--dur-toggle) var(--ease-out);
}
.qrow__state { font-family: var(--font-mono); color: var(--text-faint); }
.qrow.is-done .qrow__state { color: var(--success); }
.qrow.is-error .qrow__state { color: var(--danger); }

/* Panel de administración de fotos ya publicadas */
.admin { margin-top: var(--space-8); }

.admin__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--space-2);
}

.acard { position: relative; aspect-ratio: 1; }
.acard img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-media);
  background: var(--surface-raised);
}
.acard__del {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--negro) 78%, transparent);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--dur-instant) var(--ease-out);
}
.acard__del:hover { background: var(--danger); }
/* Segundo toque = confirmar. Borrar es irreversible y se hace con el dedo, apurado. */
.acard.is-confirming .acard__del { background: var(--danger); width: auto; padding: 0 var(--space-3); }
.acard.is-confirming::after {
  content: "Toca de nuevo para borrar";
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-1) var(--space-2);
  background: color-mix(in oklch, var(--negro) 85%, transparent);
  border-radius: 0 0 var(--radius-media) var(--radius-media);
  font-size: 11px;
  text-align: center;
  color: #ffffff;
}

.section-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-2);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}