:root {
  /* LE DICE AL NAVEGADOR QUE ESTE SITIO ES OSCURO, y no es cosmético: es lo
     que hace que las palabras clave del sistema —`CanvasText`, `Canvas`,
     `Field`— resuelvan en claro sobre oscuro en vez de al revés.

     🔴 SIN ESTO, TODO TEXTO ADENTRO DE UN `<dialog>` SALE NEGRO SOBRE NEGRO.
     El navegador le pone `color: CanvasText` a `<dialog>` en su hoja de estilo
     propia, así que la ventana NO hereda el color del `body`: lo pisa. Y como
     la página no decía que era oscura, `CanvasText` era **negro**.

     Medido el 14-ago-2026: `body` daba `rgb(245,245,245)` y el `<dialog>`
     `rgb(0,0,0)`, con **contraste 1.06**. Todo lo que estaba adentro de una
     ventana y no tenía color propio era invisible: los precios de cada foto del
     carrito, "Cantidad", "Total", "Tus datos", los títulos de las ventanas.
     Lo que sí tenía color explícito —como `.id`— se veía, y por eso el defecto
     parecía un espacio en blanco y no un error.

     Nació con la migración a `<dialog>` de la Fase 4C: antes eran `div` y
     heredaban. Lo encontró el dueño mirando el carrito.

     El proyecto ya había topado con esto y lo tapó en un solo lugar
     (`input[type="date"]`, más abajo). Esta línea es la causa; aquella era el
     síntoma. */
  color-scheme: dark;

  --bg: #0a0a0a;
  --bg-2: #141414;
  --bg-3: #1c1c1c;
  --line: #262626;
  --line-2: #333;
  --text: #f5f5f5;
  --text-2: #a3a3a3;
  --text-3: #6b6b6b;
  --accent: #ff5722;
  --accent-2: #ff7043;
  /* El acento con transparencia, para fondos y estados hover. Existe como
     token para que ningún componente vuelva a hardcodear el naranja: si
     algún día cambia la marca, cambia acá y no en veinte lugares. */
  --accent-soft: rgba(255, 87, 34, 0.10);
  --accent-soft-2: rgba(255, 87, 34, 0.20);
  --success: #00c853;
  --danger: #f44336;
  --warn: #ffa726;
  --radius: 6px;
  --radius-lg: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

h1, h2, h3, .display {
  font-family: 'Bebas Neue', 'Manrope', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; letter-spacing: 0.04em; }

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.85em; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

header.site {
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(10px);
  z-index: 100;
}

header.site .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: nowrap;
}
.header-tools {
  flex-wrap: nowrap;
  gap: 6px;
}
@media (max-width: 640px) {
  header.site { padding: 0.55rem 0; }
  header.site .container { gap: 0.35rem; padding: 0 0.75rem; }
  .header-tools { gap: 4px; min-width: 0; }
  .brand { font-size: 1.1rem; letter-spacing: 0.04em; min-width: 0; flex-shrink: 1; overflow: hidden; }
  .brand .brand-text { gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 380px) {
  .brand { font-size: 1rem; }
  .header-tools { gap: 2px; }
  .cart-btn { padding: 0.45rem 0.55rem; }
}

.brand {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.brand .brand-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
/* Dos colores del brand: "Fotografías" en blanco, "Deportivas" en naranja */
.brand .brand-1 { color: #fff; }
.brand .brand-2 { color: var(--accent); }

.brand-tag {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: -2px;
}

button, .btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
button:hover, .btn:hover { border-color: var(--text-2); background: var(--bg-2); }
button:active, .btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

.btn-success {
  background: #1b5e20;
  border-color: #1b5e20;
  color: #fff;
}
.btn-success:hover { background: #2e7d32; border-color: #2e7d32; }

.btn-ghost { border-color: transparent; }
.btn-ghost:hover { border-color: var(--line-2); }

.btn-danger { color: var(--danger); border-color: var(--line-2); }
.btn-danger:hover { color: #fff; background: var(--danger); border-color: var(--danger); }

input, textarea, select {
  font-family: inherit;
  /* 16px NO ES ESTÉTICA: es el umbral de iOS. Safari hace ZOOM automático al
     enfocar un campo de menos de 16px, y de ese zoom el usuario no sale solo —
     queda con la página agrandada, tocando de memoria. Estaba en 15px, o sea
     un píxel abajo del umbral, y el 80% del tráfico es celular.
     Es el punto 1 de la Fase 5, y el más barato de los tres. */
  font-size: 16px;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  width: 100%;
  transition: border-color 0.15s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}
input::placeholder { color: var(--text-3); }

label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.field { margin-bottom: 1rem; }
.field-hint {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
}

.cart-badge {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
}
.cart-empty .cart-badge {
  background: var(--bg-3);
  color: var(--text-3);
}
.cart-btn { gap: 6px; padding: 0.5rem 0.85rem; }
.cart-btn svg { color: var(--text-2); flex-shrink: 0; }
.cart-btn:hover svg { color: var(--text); }
.share-btn { gap: 6px; padding: 0.5rem 0.85rem; display: inline-flex; align-items: center; }
.share-btn svg { color: var(--text-2); flex-shrink: 0; }
.share-btn:hover svg { color: var(--text); }
@media (max-width: 640px) {
  .cart-btn .cart-btn-label { display: none; }
  .cart-btn { padding: 0.5rem 0.7rem; }
  .cart-btn .cart-badge { margin-left: 4px; }
  .share-btn .share-btn-label { display: none; }
  .share-btn { padding: 0.5rem 0.7rem; }
}
.payment-block + .payment-divider {
  height: 1px;
  background: var(--line);
  margin: 0.6rem 0;
}

.hero-event {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--line);
}
.hero-event h1 {
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.hero-event .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  color: var(--text-2);
  font-size: 14px;
}
.hero-event .meta span { display: inline-flex; align-items: center; gap: 6px; }

/* search-bar: flujo natural junto al hero, NO sticky.
   Hero + search-bar + gallery suben/bajan como un bloque al scrollear. */
.search-bar {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
@media (max-width: 640px) {
  .search-bar { padding: 0.85rem 0; }
  .search-info { font-size: 12px; }
}
/* Mobile-first: input solo en una linea, botones debajo en grid 2 cols */
.search-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.search-row input {
  width: 100%;
  font-size: 16px;
  padding: 0.85rem 1rem;
}
.search-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.search-buttons .btn {
  width: 100%;
  justify-content: center;
  padding: 0.7rem 0.5rem;
  font-size: 13px;
}
/* "Buscar con mi foto" ocupa el ancho total en mobile */
.search-buttons .face-btn {
  grid-column: 1 / -1;
}
/* Desktop: todo en una sola linea */
@media (min-width: 720px) {
  .search-row {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }
  .search-row input {
    flex: 1;
    width: auto;
  }
  .search-buttons {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
  }
  .search-buttons .face-btn {
    grid-column: auto;
  }
  .search-buttons .btn {
    width: auto;
    padding: 0.55rem 1.1rem;
    font-size: 14px;
  }
}
.search-info {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 0.6rem;
}
.search-info b { color: var(--text); font-weight: 500; }

/* Loading state de la galería (GIF + texto) — adaptable */
.gallery-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 3rem 1rem 4rem;
  min-height: 280px;
  text-align: center;
}
.gallery-loading img {
  /* Se adapta: mínimo 60px en pantallas chicas, máximo 100px, fluido */
  width: clamp(60px, 18vw, 100px);
  height: auto;
  display: block;
  border-radius: 8px;
}
.gallery-loading p {
  color: var(--text-2);
  font-size: 13px;
  margin: 0;
  letter-spacing: 0.01em;
}

/* Galería adaptativa: 2 cols en mobile chico, escala según ancho */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  padding: 1.25rem 0 4rem;
}
@media (min-width: 480px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
  }
}
@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* =========================
   PAGINACIÓN (galería) — estilo Google con números clickables
   ========================= */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 1rem 0 0.5rem;
  flex-wrap: wrap;
}
.pagination .page-nav {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  flex-shrink: 0;
}
.pagination .page-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-num {
  min-width: 38px;
  height: 40px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-num:hover {
  border-color: var(--text-3);
  color: var(--text);
  background: var(--bg-2);
}
.page-num.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  cursor: default;
}
.page-num.active:hover {
  background: var(--accent);
}
.page-ellipsis {
  color: var(--text-3);
  padding: 0 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  user-select: none;
}
.page-info-line {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-3);
  padding: 0.25rem 0 1.5rem;
  letter-spacing: 0.02em;
}
@media (max-width: 380px) {
  .pagination .page-nav { width: 36px; height: 36px; }
  .page-num { min-width: 32px; height: 36px; font-size: 12px; padding: 0 4px; }
  .page-numbers { gap: 2px; }
}

.thumb {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg-2);
  border: 2px solid transparent;
  transition: transform 0.15s, border-color 0.15s;
}
.thumb:hover { transform: translateY(-2px); }
.thumb:hover .check { display: flex; }
.thumb.selected { border-color: var(--accent); }
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb .skeleton {
  width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2));
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Skeleton DURANTE carga del thumb: visible por default,
   se oculta cuando <img> dispara onload, queda gris si falla. */
.thumb .thumb-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2));
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
  transition: opacity 0.2s;
}
.thumb .thumb-skeleton.thumb-skeleton-done {
  opacity: 0;
  animation: none;
}
.thumb .thumb-skeleton.thumb-skeleton-error {
  opacity: 1;
  animation: none;
  background: var(--bg-2);
}
.thumb img {
  position: relative;
  z-index: 2;
}

.thumb .check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;                    /* override del padding global de <button> */
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  z-index: 2;
  transition: background 0.12s, transform 0.12s;
  flex-shrink: 0;
}
.thumb .check:hover { transform: scale(1.1); }

/* EN UN CELULAR NO EXISTE EL HOVER, así que este botón no aparecía NUNCA hasta
   que la foto ya estaba elegida: la forma de seleccionar solo se descubría
   tocando a ver qué pasaba. Es el punto 1 de la Fase 5.

   `hover: none` y no un ancho de pantalla: lo que importa es si el dispositivo
   PUEDE hacer hover, no si es angosto. Una tablet con dedo y una laptop chica
   no se distinguen por el ancho.

   ⚠️ VA DESPUÉS DE `.thumb .check { display: none }`, no antes. Las dos son
   (0,2,0) y decide el orden — puesto arriba no hacía absolutamente nada, y así
   quedó en la primera versión de este arreglo. Es el mismo error de orden que
   ya se cometió hoy con el carrito y con la caja angosta del diálogo: **tres
   veces en un día**. Si volvés a agregar una variante, ponela DEBAJO de su
   base y comprobalo en el navegador, no leyendo. */
@media (hover: none) {
  .thumb .check { display: flex; }
}

.thumb.selected .check {
  display: flex;
  background: var(--accent);
  border-color: var(--accent);
}
.thumb .name {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #fff;
  font-size: 10px;
  padding: 1.5rem 6px 5px;
  font-family: 'JetBrains Mono', monospace;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
@media (min-width: 480px) {
  .thumb .name { font-size: 11px; padding: 1.5rem 8px 6px; }
}

.empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-2);
}
.empty h3 {
  color: var(--text);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}

.error-box {
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.3);
  color: #ffcdd2;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin: 1rem 0;
  font-size: 14px;
}

/* El carrito es un <dialog> desde el 05-ago-2026 (ui/dialogo.css, variante
   .dlg-lateral). Ya no necesita position/inset/z-index ni el toggle .open: el
   top layer lo pone encima por construccion y el fondo lo pinta su ::backdrop.

   QUE SE PEGUE A LA DERECHA LO PONE LA VARIANTE, no este archivo. Aca hubo un
   `.cart-overlay[open]` con `justify-content: flex-end` del 05 al 12-ago-2026 y
   NO SERVIA DE NADA: `.dlg.dlg-pleno[open]` le ganaba por especificidad (0,3,0
   contra 0,2,0) y el carrito quedaba pegado a la izquierda en escritorio. Se
   borro en vez de subirle la especificidad, porque una regla que existe y no
   se aplica es peor que ninguna: el proximo que lea este archivo va a creer que
   el costado se decide aca. */
.cart-panel {
  background: var(--bg);
  width: 100%;
  max-width: 460px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* overflow-x EXPLICITO (regla 2 del componente): con solo overflow-y el
     spec fuerza el otro eje a auto y aparece un scroller horizontal invisible
     que se roba el gesto del dedo. */
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.cart-head {
  padding: 1.25rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-head h2 {
  text-transform: uppercase;
  font-size: 1.5rem;
}
.cart-body { padding: 1.25rem; flex: 1; }
.cart-foot {
  padding: 1.25rem;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

.cart-event-group {
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.cart-event-group:last-child { border-bottom: none; }
.cart-event-group.is-current .cart-event-header h3 { color: var(--accent); }
.cart-event-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed var(--line);
}
.cart-event-header h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.cart-current-tag {
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  color: var(--text-3);
  font-weight: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cart-event-meta {
  font-size: 12px;
  color: var(--text-2);
}
.cart-event-meta b { color: var(--text); font-size: 13px; }
.cart-event-orphan { opacity: 0.6; }

/* Descuento por cantidad. Dos mensajes distintos y a propósito con peso
   distinto: el ahorro ya conseguido va en verde y discreto —es una
   confirmación—, y el "te falta poco" va con el acento, porque es el que
   puede cambiar lo que el comprador hace. */
.cart-tramo-ok {
  margin-top: 4px;
  font-size: 12px;
  color: var(--success);
}
.cart-tramo-next {
  margin-top: 4px;
  font-size: 12px;
  color: var(--accent-2);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--radius);
  padding: 4px 8px;
  display: inline-block;
}

.cart-item {
  display: flex;
  gap: 12px;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.cart-event-photos .cart-item:last-child { border-bottom: none; }

/* Acciones por foto (ojito + quitar) */
.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cart-item-actions .btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  flex-shrink: 0;
}
.cart-item-actions .btn-icon svg { display: block; }
.cart-item-actions .btn { padding: 0.45rem 0.7rem; font-size: 13px; }
@media (max-width: 380px) {
  .cart-item-actions .btn { padding: 0.4rem 0.55rem; font-size: 12px; }
  .cart-item-actions .btn-icon { width: 32px; height: 32px; }
}

/* Overlay de preview de foto desde el carrito ("ojito") */
/* Idem: <dialog> apilado sobre el carrito en el top layer. */
.cart-preview-overlay[open] {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1rem;
}
.cart-preview-stage {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
}
.cart-preview-overlay img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}
.cart-preview-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.cart-preview-close:hover { background: rgba(255,255,255,0.18); }
.cart-preview-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  text-align: center;
  padding: 0.5rem 0 0.25rem;
  flex-shrink: 0;
  word-break: break-all;
}
.cart-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--bg-2);
}
.cart-item .info { flex: 1; min-width: 0; }
.cart-item .info .id { font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item .info .price { font-size: 14px; font-weight: 500; margin-top: 2px; }

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
}
.summary-row.total {
  font-size: 18px;
  font-weight: 600;
  border-top: 1px solid var(--line);
  margin-top: 0.5rem;
  padding-top: 0.85rem;
}

.transfer-info {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin: 1rem 0;
  font-size: 13px;
  line-height: 1.7;
}
.transfer-info .label { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.transfer-info .value { font-family: 'JetBrains Mono', monospace; color: var(--text); user-select: all; }

.note-box {
  background: rgba(255, 167, 38, 0.08);
  border-left: 3px solid var(--warn);
  padding: 0.75rem 1rem;
  font-size: 13px;
  color: #ffe0b2;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding: 2rem 0 4rem;
}

.event-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.event-card:hover {
  transform: translateY(-3px);
  border-color: var(--text-3);
}
.event-card .cover {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  overflow: hidden;
}
.event-card .cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.event-card .cover-content {
  position: relative;
  z-index: 1;
}
.event-card h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.event-card .body {
  padding: 0.9rem 1.25rem 1.25rem;
}
.event-card .body .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-2);
}

.hero-home {
  padding: 4rem 0 2rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.hero-home h1 {
  text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 6rem);
  margin-bottom: 0.5rem;
}
.hero-home p {
  color: var(--text-2);
  font-size: 1.05rem;
  max-width: 540px;
  margin: 0 auto;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 2.5rem 0 0.5rem;
  border-top: none;
}
.section-head h2 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.section-head .count {
  color: var(--text-3);
  font-size: 13px;
}

/* Acá vivía un `content: '· ADMIN'` pegado a la marca. Se sacó el 04-ago-2026
   por el estándar 4.15: era una etiqueta permanente que no decía nada que la
   pantalla no dijera ya. Con las pestañas —Eventos, Pedidos, Fotógrafos,
   Configuración— y el menú de Perfil a la derecha, nadie puede confundir el
   panel con el sitio público. */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.stat-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 500;
}
.stat-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 4px 0;
}
.stat-value-money {
  font-family: 'Manrope', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin: 8px 0 6px;
  line-height: 1.3;
}
.stat-extra {
  font-size: 12px;
  color: var(--text-3);
  margin-top: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.admin-table th, .admin-table td {
  padding: 0.85rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.admin-table th {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.admin-table tr:hover td { background: var(--bg-2); }
.admin-table .actions { display: flex; gap: 6px; }
.admin-table .actions button { padding: 4px 10px; font-size: 12px; }

.copy-link {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 4px 6px 4px 12px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  max-width: 260px;
  overflow: hidden;
}
.copy-link .url {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-2);
}

.login-box {
  max-width: 400px;
  margin: 6rem auto;
  padding: 2.5rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.login-box h1 {
  text-transform: uppercase;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
}
.login-box p {
  color: var(--text-2);
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 14px;
}

.form-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin: 1.5rem 0;
}
.form-card h2 {
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  letter-spacing: 0.04em;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
}

.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--text);
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius);
  font-size: 14px;
  z-index: 500;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
.toast.success { border-color: var(--success); color: #b9f6ca; }
.toast.error { border-color: var(--danger); color: #ffcdd2; }

/* (.fab-cart removido — el cart-btn del header sticky es siempre visible) */

footer.site {
  border-top: 1px solid var(--line);
  padding: 1.5rem 0 2rem;
  margin-top: 3rem;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}
.footer-credit {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
  opacity: 0.7;
  letter-spacing: 0.02em;
}
.footer-credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 87, 34, 0.4);
  text-underline-offset: 2px;
}
.footer-credit a:hover { color: var(--accent); }
.footer-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.footer-link:hover {
  color: var(--accent);
  border-bottom-color: rgba(255, 87, 34, 0.4);
}

/* =========================
   LIGHTBOX
   ========================= */
/* El visor es un <dialog> desde el 05-ago-2026 (ver ui/dialogo.css, variante
   .dlg-pleno). Ya no necesita `position: fixed`, `inset: 0`, `z-index` ni el
   toggle `.open`: el top layer lo pone encima de todo por construcción, y el
   fondo oscuro lo pinta su `::backdrop`. Lo que queda acá es cómo se acomodan
   sus tres partes adentro. */
.lightbox[open] {
  /* El display y la dirección los pone la variante `.dlg-pleno`; acá solo
     queda que ocupe la pantalla y su aparición. */
  width: 100%;
  height: 100%;
  animation: lbFadeIn 0.15s ease-out;
}
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }

.lb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  color: #fff;
  font-size: 13px;
  background: linear-gradient(rgba(0,0,0,0.5), transparent);
  z-index: 5;
  flex-shrink: 0;
}
.lb-head .lb-title {
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255,255,255,0.8);
}
.lb-head .lb-counter {
  color: rgba(255,255,255,0.6);
  margin-left: 12px;
}
.lb-close {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lb-close:hover { background: rgba(255,255,255,0.18); }

/* Mientras carga la foto siguiente.
   El <img> del visor es UNO SOLO y se le cambia el `src`, así que el navegador
   sigue pintando la foto anterior hasta que la nueva decodifica: al abrir una
   foto se veía un segundo LA QUE HABÍAS MIRADO ANTES y después saltaba a la
   correcta. Lo reportó el dueño el 14-ago-2026.
   Se oculta la imagen vieja y se muestra el indicador que la galería ya usaba
   —el mismo `loading.gif`, para que sea la misma señal en todo el sitio—. */
.lb-image.cargando { opacity: 0; }

.lb-cargando {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;   /* que no tape las flechas de navegar */
}
.lb-cargando[hidden] { display: none; }
.lb-cargando img { width: clamp(48px, 12vw, 80px); height: auto; }

.lb-stage {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 4rem;
  overflow: hidden;
}
@media (max-width: 700px) {
  .lb-stage { padding: 0.5rem 0.5rem; }
}

/* LA FOTO ENTRA YA DEL TAMAÑO FINAL, y por eso hay `height: 100%` acá.
   Sin eso la regla era `max-width/max-height: 100%` y nada más, o sea que cada
   imagen se dibujaba en su TAMAÑO NATURAL mientras entrara en el escenario. La
   miniatura y la foto grande son la misma foto en dos tamaños distintos, así que
   se dibujaban distinto: medido en producción el 14-ago-2026 sobre `desfile-2026`
   a 1280×720 —escenario de 1265×575, interior 1145×560—, la de 400 ocupaba
   225×400 y la de 2000 pasaba a 315×560. La foto crecía un 40% delante del
   comprador cuando llegaba la grande.

   Con `height: 100%` la altura la manda el escenario y `width: auto` saca el
   ancho del aspecto, así que las dos fases miden 315×560 y lo único que cambia
   al llegar la grande es la NITIDEZ, que es lo que se quería.

   `max-width: 100%` es para la foto más ancha que el escenario (una panorámica,
   o cualquier foto en un celular angosto): sin él, `height: 100%` la desbordaría
   a lo ancho. Cuando entra, `object-fit: contain` mantiene la proporción.

   POR QUÉ NO `width: 100%` ADEMÁS: se midieron las dos. Con ancho y alto al
   100% la caja del `<img>` pasa a ser el escenario entero —1145×560— y la foto
   queda flotando adentro: `box-shadow`, `border-radius` y `cursor: zoom-out`
   dejan de seguir a la foto, y la sombra encima se la come el `overflow: hidden`
   del escenario. Con `width: auto` la caja ES la foto (315×560 medidos) y los
   tres siguen sirviendo. Las dos matan el salto igual; esta no cobra nada. */
.lb-image {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  cursor: zoom-out;
}

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  backdrop-filter: blur(4px);
}
.lb-nav:hover { background: rgba(0,0,0,0.85); }
.lb-nav.prev { left: 1rem; }
.lb-nav.next { right: 1rem; }
.lb-nav:disabled { opacity: 0.25; cursor: not-allowed; }
@media (max-width: 700px) {
  .lb-nav { width: 40px; height: 40px; font-size: 20px; }
  .lb-nav.prev { left: 0.5rem; }
  .lb-nav.next { right: 0.5rem; }
}

.lb-foot {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.25rem 1.5rem;
  z-index: 5;
  flex-shrink: 0;
}
.lb-select-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 0.85rem 2rem;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  transition: background 0.15s;
}
.lb-select-btn:hover { background: var(--accent-2); }
.lb-select-btn.selected {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}
.lb-select-btn.selected:hover { background: rgba(255,255,255,0.1); }

.lb-share-btn {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  padding: 0.7rem 1.25rem;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.lb-share-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}
.lb-share-btn svg { color: currentColor; }
@media (max-width: 480px) {
  .lb-share-btn { padding: 0.6rem 0.85rem; }
  .lb-share-btn #lbShareLabel { display: none; }
}

/* =========================
   LANGUAGE SWITCHER (ES / PT)
   ========================= */
.header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lang-switcher {
  display: inline-flex;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.lang-switcher .lang-btn {
  background: transparent;
  border: none;
  color: var(--text-2);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .lang-switcher { padding: 1px; }
  .lang-switcher .lang-btn { padding: 3px 7px; font-size: 11px; }
}
.lang-switcher .lang-btn:hover { color: var(--text); background: var(--bg-3); }
.lang-switcher .lang-btn.active {
  background: var(--accent);
  color: #fff;
}
.lang-switcher .lang-btn .flag { font-size: 13px; }

/* =========================
   USER BADGE (admin)
   ========================= */
.user-badge {
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
   PAYMENT INFO (cart)
   ========================= */
.payment-method-tag {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(74, 144, 226, 0.12);
  border: 1px solid rgba(74, 144, 226, 0.3);
  color: #cfe2ff;
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 6px;
}
.payment-rows {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.payment-row {
  font-size: 13px;
  line-height: 1.6;
}
.payment-row .label {
  color: var(--text-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.payment-row .value {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  user-select: all;
}
.payment-row.payment-extra {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-2);
  font-style: italic;
}

/* =========================
   PAYMENT METHOD SELECTOR (cart)
   ========================= */
.payment-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 1.25rem 0 0.5rem;
}
.pay-selector-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 600;
}
.pay-selector-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.pay-option {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}
.pay-option:hover {
  border-color: var(--text-3);
  background: var(--bg-3);
}
.pay-option .pay-currency {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1;
}
.pay-option .pay-method {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.pay-option.active {
  background: rgba(255, 87, 34, 0.12);
  border-color: var(--accent);
}
.pay-option.active .pay-currency { color: var(--accent); }
.pay-option.active .pay-method { color: var(--accent-2); }

/* =========================
   FACE SEARCH (modal + buttons)
   ========================= */
.btn-face {
  background: rgba(74, 144, 226, 0.12);
  border: 1px solid rgba(74, 144, 226, 0.5);
  color: #cfe2ff;
}
.btn-face:hover {
  background: rgba(74, 144, 226, 0.2);
  border-color: #4a90e2;
  color: #fff;
}
.search-row .btn-face { white-space: nowrap; }

/* .face-modal, .face-panel, .face-head y .face-body se borraron el
   05-ago-2026: eran el modal propio de la busqueda por selfie y del indexador,
   y los dos pasaron a ser <dialog> (ver ui/dialogo.css). Verificado que no
   quedaba ni una referencia en los HTML ni en el JS antes de sacarlas. */
.face-consent {
  background: rgba(74, 144, 226, 0.08);
  border: 1px solid rgba(74, 144, 226, 0.3);
  color: #cfe2ff;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
}
.face-preview {
  text-align: center;
}
.face-preview img {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.face-status {
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
  min-height: 1.4em;
}
.face-status .progress-bar {
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.face-status .progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.2s;
}
.face-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
/* Buscar y Cancelar pesan distinto: el primario es ancho, cancelar es compacto */
.face-actions .btn { padding: 0.7rem 1rem; font-size: 14px; }
.face-actions #faceSearchGoBtn { flex: 1; gap: 6px; }
.face-actions #faceCancelBtn { flex: 0 0 auto; }

/* Indicador de match (chip que aparece sobre el thumbnail si fue por face search) */
.thumb .match-chip {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 200, 83, 0.92);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 2;
}

/* =========================
   ADMIN: indexer column
   ========================= */
.index-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.index-status.idx-none { background: rgba(244, 67, 54, 0.1); color: #ffcdd2; border: 1px solid rgba(244, 67, 54, 0.3); }
.index-status.idx-ok { background: rgba(0, 200, 83, 0.1); color: #b9f6ca; border: 1px solid rgba(0, 200, 83, 0.3); }
.index-status.idx-stale { background: rgba(255, 167, 38, 0.1); color: #ffe0b2; border: 1px solid rgba(255, 167, 38, 0.3); }

.indexer-log {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* Masked field con botón mostrar/ocultar */
.masked-field {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.masked-field input { flex: 1; }
.masked-field button { white-space: nowrap; }

/* Disclaimer y match score en búsqueda facial pública */
.face-disclaimer {
  background: rgba(255, 167, 38, 0.06);
  border: 1px solid rgba(255, 167, 38, 0.25);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 13px;
  line-height: 1.5;
  color: #ffe0b2;
  margin: 0.75rem 0;
}
.face-disclaimer b { color: #fff; }
.face-results-tip {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 0.5rem;
  line-height: 1.5;
}

.thumb .match-score {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 999px;
  z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.thumb .match-score.score-high { background: rgba(0, 200, 83, 0.85); }
.thumb .match-score.score-mid { background: rgba(255, 167, 38, 0.85); }
.thumb .match-score.score-low { background: rgba(255, 87, 34, 0.85); }

.thumb .dismiss-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 2;
  display: inline-block;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.thumb .dismiss-btn:hover { background: rgba(244, 67, 54, 0.95); }

/* =========================
   MULTI-SELFIE EN MODAL FACIAL
   ========================= */
.face-thumbnails {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 0.5rem 0;
}
/* En teléfono van 3 + 2, no 5 en fila. Medido: a 375px los 5 en fila dan
   cuadraditos de 55px donde "Izquierda" se corta, y a 320px quedan en 44px,
   que es justo el mínimo para tocar con el dedo. Con 3 columnas pasan a 97px
   y 78px respectivamente, y ninguna etiqueta se corta.
   El corte va en 480px y no en el ancho exacto donde empieza a cortarse a
   propósito: ese ancho depende de las métricas de la tipografía, y si
   'JetBrains Mono' no llega a cargar, el respaldo del sistema es más ancho y
   volvería a cortar. */
@media (max-width: 480px) {
  .face-thumbnails {
    grid-template-columns: repeat(3, 1fr);
  }
}
.selfie-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--line);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: default;
  transition: border-color 0.15s, background 0.15s;
}
.selfie-slot.filled {
  border-color: var(--accent);
  border-style: solid;
}
.selfie-slot.filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.selfie-slot.empty {
  border-style: dashed;
  gap: 2px;
}
.selfie-slot.empty .slot-icon {
  color: inherit;
  opacity: 0.85;
  display: inline-flex;
}
/* La etiqueta del ángulo. Corta a propósito ("Frente", "Izquierda"): en un
   celular de 320px cada slot mide ~56px y un texto largo se parte en dos
   líneas o se corta. */
.selfie-slot .slot-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
  padding: 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.8;
}
.selfie-slot.empty.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-2);
  cursor: pointer;
}
.selfie-slot.empty.active:hover {
  background: var(--accent-soft-2);
  border-color: var(--accent-2);
  color: var(--text);
}
.selfie-slot.empty.disabled {
  border-color: var(--line);
  color: var(--text-3);
  opacity: 0.4;
  cursor: not-allowed;
}
/* Slot lleno: la etiqueta va encima de la foto, abajo, para que se siga
   sabiendo qué ángulo era ese. */
.selfie-slot.filled .slot-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 2px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  color: var(--text);
  opacity: 1;
}
/* Sin cara detectada. Antes esto pasaba en silencio: la búsqueda seguía con
   las que servían y la persona nunca se enteraba de que faltaban. */
.selfie-slot.filled.failed {
  border-color: var(--danger);
}
.selfie-slot.filled.failed img {
  opacity: 0.35;
}
.selfie-slot.filled.failed .slot-label {
  color: var(--danger);
}
.selfie-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  flex-shrink: 0;
}
.selfie-remove:hover { background: rgba(244, 67, 54, 0.9); }
.selfie-remove svg { display: block; }

/* Iconos inline (en texto y badges) */
.banner-icon, .inline-icon, .meta-icon, .status-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: -3px;
  margin-right: 4px;
}
.banner-icon { color: var(--success); }
.inline-icon { color: var(--text-2); }
.meta-icon { color: var(--text-3); }
.status-icon { color: inherit; }
.lang-switcher .lang-btn svg, .btn svg, .check svg { display: inline-block; vertical-align: middle; }
.btn svg { margin-right: 0; }
.dismiss-btn { gap: 4px; display: inline-flex; align-items: center; }
.dismiss-btn svg { flex-shrink: 0; }
.thumb .check svg { color: #fff; }

/* =========================
   PROTECCIÓN ANTI-DESCARGA (gallery + lightbox)
   ========================= */
/* Bloquear arrastrar imágenes y selección de texto sobre ellas */
.gallery img,
.lb-image,
.cart-item img,
.face-preview img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none; /* iOS: bloquea el menu "Guardar imagen" del long-press */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}
/* En el lightbox sí necesitamos pointer-events para que el click cierre */
.lb-image {
  pointer-events: auto;
}
/* Bloquear context menu visualmente sobre las áreas con fotos */
.gallery, .lightbox, .cart-overlay {
  -webkit-touch-callout: none;
}

/* Bloquear vista impresa (Ctrl+P) — si alguien intenta imprimir, no ve nada útil */
@media print {
  body * { visibility: hidden !important; }
  body::after {
    content: 'Vista de impresión no disponible. Las fotos se entregan tras la compra.';
    visibility: visible !important;
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 18px; color: #000;
  }
}

/* =========================
   BOOT SCREEN (admin)
   ========================= */
#bootScreen .login-box p {
  color: var(--text-2);
}

/* =========================
   DATE PICKER (dark mode)
   ========================= */
.date-wrapper {
  display: flex;
  align-items: stretch;
  gap: 8px;
  position: relative;
}
.date-wrapper input[type="date"] {
  flex: 1;
  cursor: pointer;
  color-scheme: dark;
}
.date-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.9) brightness(1.1);
  cursor: pointer;
  opacity: 0.85;
  padding: 4px;
}
.date-wrapper input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
.date-icon-btn {
  width: 44px;
  flex-shrink: 0;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius);
}
.date-icon-btn:hover { background: var(--line); }

/* =========================
   VALIDACIÓN EN VIVO
   ========================= */
.field-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 4px;
  min-height: 1em;
  line-height: 1.3;
}
input.input-invalid,
input.input-invalid:focus {
  border-color: var(--danger) !important;
  background: rgba(244, 67, 54, 0.05);
}
input.input-valid {
  border-color: rgba(0, 200, 83, 0.5);
}
input.input-valid:focus {
  border-color: var(--success);
}

/* =========================
   INPUT NUMÉRICO CON STEPPER (+/-)
   ========================= */
.stepper {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
}
.stepper input {
  border: none;
  text-align: center;
  background: transparent;
  font-family: 'JetBrains Mono', monospace;
  /* 16px por el umbral de zoom de iOS — ver la nota en `input, textarea,
     select`. Este es el contador de cantidad DEL CARRITO: lo toca el comprador
     justo antes de pagar, que es el peor momento para que la pantalla se le
     agrande sola. */
  font-size: 16px;
  flex: 1;
  min-width: 0;
}
.stepper input:focus { background: var(--bg-3); }
.stepper button {
  background: var(--bg-3);
  border: none;
  border-radius: 0;
  color: var(--text);
  width: 42px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
}
.stepper button:hover { background: var(--line); }
.stepper button:first-child { border-right: 1px solid var(--line); }
.stepper button:last-child { border-left: 1px solid var(--line); }
.stepper-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.85rem;
  background: var(--bg-3);
  border-left: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-2);
}

/* =============================================================
   Modal de pedidos (admin) — reusa .face-modal/.face-panel/.face-head
   ============================================================= */
.orders-panel {
  max-width: 960px;
}
.orders-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.orders-stats .stat-card { padding: 0.85rem 1rem; }
.orders-stats .stat-value { font-size: 1.75rem; margin: 2px 0; }
.orders-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.25rem 0 0.5rem;
  flex-wrap: wrap;
}
.orders-info {
  color: var(--text-2);
  font-size: 13px;
}
.orders-table-wrap {
  overflow-x: auto;
  margin: 0 -0.25rem;
}
.orders-table {
  margin-top: 0;
}
.orders-table th,
.orders-table td {
  font-size: 13px;
  padding: 0.65rem 0.5rem;
}
.orders-empty {
  padding: 1.5rem 0.5rem;
  color: var(--text-2);
  text-align: center;
  line-height: 1.6;
}
.orders-empty p { margin-bottom: 0.5rem; }
.orders-setup {
  text-align: left;
  font-size: 13px;
}
.orders-setup ol {
  margin: 0.75rem 0 0.25rem 1.25rem;
  padding: 0;
  color: var(--text-2);
}
.orders-setup ol li {
  margin-bottom: 0.5rem;
  line-height: 1.55;
}
/* Las fotos de un pedido, en la ventana.
 *
 * ACÁ VIVÍA `.orders-photos-summary` + `.orders-photos-list`, el `<details>`
 * que se abría ADENTRO de la celda: al desplegarlo la fila crecía y **se movían
 * todas las columnas** de la tabla. El dueño lo reportó así, y por eso ahora es
 * una ventana. De paso se fue uno de los cinco scrollers de un solo eje que
 * quedaban abiertos (la lista tenía `overflow-y` sin declarar el otro, #65).
 *
 * `auto-fill` y no un número de columnas: a 320 px entran 2 y en escritorio
 * entran 5, sin declarar un solo breakpoint. Es el mismo patrón que la grilla
 * de portada, que ya funciona. */
.pedido-fotos-quien {
  color: var(--text-2);
  font-size: 13px;
  margin: 0 0 0.85rem;
}
.pedido-fotos-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
}
.pedido-foto {
  margin: 0;
}
.pedido-foto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  background: var(--bg-3);
}
/* El nombre del archivo es la mitad del trabajo: es lo que el fotógrafo copia
   para buscar la foto en su carpeta. Por eso va visible y seleccionable, no en
   un tooltip. `break-all` porque un DSC07444.jpg no tiene dónde cortarse. */
.pedido-foto figcaption {
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-2);
  word-break: break-all;
  user-select: all;
}
.lang-pill,
.country-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--bg-3);
  color: var(--text-2);
  border: 1px solid var(--line);
}
.country-pill { background: rgba(74, 144, 226, 0.12); color: #cfe2ff; border-color: rgba(74, 144, 226, 0.3); }

.kind-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.kind-badge.kind-sport {
  background: rgba(0, 200, 83, 0.12);
  color: #b9f6ca;
  border-color: rgba(0, 200, 83, 0.3);
}
.kind-badge.kind-general {
  background: rgba(255, 167, 38, 0.12);
  color: #ffe0b2;
  border-color: rgba(255, 167, 38, 0.3);
}
.kind-badge.kind-archived {
  background: rgba(150, 150, 150, 0.12);
  color: #a3a3a3;
  border-color: rgba(150, 150, 150, 0.3);
}
.admin-table tr.row-archived td {
  opacity: 0.6;
}
.admin-table tr.row-archived:hover td {
  opacity: 1;
}

/* Toolbar arriba de la tabla de eventos del admin */
.events-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0;
  flex-wrap: wrap;
}
.events-toolbar input[type="search"] {
  flex: 1;
  min-width: 200px;
  padding: 0.5rem 0.75rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius);
  /* 16px por el umbral de zoom de iOS. Este es el buscador de eventos del
     panel: lo usa el fotógrafo desde el teléfono. */
  font-size: 16px;
}
.events-toolbar input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
}
.events-toolbar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.events-toolbar-toggle input[type="checkbox"] {
  width: auto;
  margin: 0;
}
.events-toolbar-count {
  color: var(--text-3);
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .events-toolbar { flex-direction: column; align-items: stretch; }
  .events-toolbar input[type="search"] { width: 100%; }
  .events-toolbar-count { text-align: right; }
}

/* =============================================================
   Dashboard global del admin: gráfico de pedidos por día + top eventos
   ============================================================= */
.orders-chart-wrap { margin: 1.5rem 0; }
.orders-chart-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 0.5rem;
}
.orders-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 80px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.orders-chart-col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  cursor: default;
  min-width: 3px;
}
.orders-chart-bar {
  width: 100%;
  min-height: 1px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  transition: opacity 0.15s;
}
.orders-chart-col:hover .orders-chart-bar { opacity: 0.65; }
.orders-chart-xaxis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-3);
  margin-top: 6px;
  letter-spacing: 0.04em;
}

.top-events-wrap { margin: 1.5rem 0; }
.top-events-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.top-event-row {
  display: grid;
  grid-template-columns: minmax(150px, 2fr) 3fr minmax(140px, auto);
  gap: 0.75rem;
  align-items: center;
  font-size: 13px;
}
.top-event-name { color: var(--text); }
.top-event-bar-wrap {
  background: var(--bg-2);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.top-event-bar {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s;
}
.top-event-stats {
  color: var(--text-3);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}
/* ---- La columna Acceso de la tabla de fotógrafos ----
   Va acá, pegada a `.admin-table`, porque es una celda de esa tabla y no un
   componente aparte. La regla de sacar el CSS a `ui/` es para sistemas. */
.acceso-cuenta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  /* El email parte en dos renglones antes que ensanchar la tabla. Sin esto la
     página se arrastraba de costado a 375px: medida, la tabla pasaba de 339 a
     527 dentro de una pantalla de 375. Es el mismo bug que ya había costado la
     tabla de eventos —el comentario de más abajo lo cuenta— y por el mismo
     motivo: una columna con texto largo que no se puede encoger. */
  flex-wrap: wrap;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-2);
  line-height: 1.6;
}
/* `min-width: 0` es obligatorio: un hijo de flex no se encoge por debajo de su
   contenido sin esto, y `overflow-wrap` solo no alcanza. Un email no tiene
   espacios, así que hay que dejarlo partir por cualquier lado. */
.acceso-email {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Una cuenta suspendida se ve APAGADA, no escondida: el dueño tiene que poder
   ver que existe para reactivarla. Y no alcanza con el gris —quien no
   distingue bien los tonos no vería diferencia—, por eso además lleva la
   palabra. */
.acceso-cuenta.acceso-suspendida .acceso-email {
  color: var(--text-3);
  text-decoration: line-through;
}
.acceso-etiqueta {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: 3px;
  padding: 0 4px;
  white-space: nowrap;
}
.acceso-sin {
  font-size: 12px;
  color: var(--text-3);
}

/* En el teléfono la columna se esconde y las acciones siguen en el menú de la
   fila, donde ya estaban "Editar" y "Borrar".
   Se midió: con esta columna la tabla pasaba de 339px a 527px dentro de una
   pantalla de 375 y la página se arrastraba de costado. Y NO se puede arreglar
   con `overflow-x` en la tabla: el menú de "⋮" se sale 75px del contenedor y
   quedaría recortado — con "Borrar" adentro, que es el estándar 4.6. */
@media (max-width: 700px) {
  .admin-table th.col-acceso,
  .admin-table td.col-acceso { display: none; }
}
/* El error del formulario de acceso. Vacío no ocupa lugar: un hueco reservado
   debajo del campo se lee como que falta algo. */
.acceso-error {
  margin: 0.75rem 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--danger);
}
.acceso-error:empty { display: none; }

/* La aclaración del desglose por fotógrafo. Va acá, pegada a `.top-event-*`,
   porque es el pie de ESA lista y no un componente nuevo — la regla de sacar el
   CSS a `ui/` es para sistemas, no para un retoque de algo que ya vive acá. */
.desglose-nota {
  margin: 0.75rem 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-3);
}
@media (max-width: 700px) {
  .top-event-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .top-event-stats { text-align: left; }
}

/* =============================================================
   FAQ page
   ============================================================= */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.faq-item {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item > summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 500;
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
  user-select: none;
  font-size: 15px;
  color: var(--text);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '+';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--text-3);
  font-weight: 400;
  transition: transform 0.2s;
  line-height: 1;
}
.faq-item[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item[open] > summary { border-bottom: 1px solid var(--line); }
.faq-item:hover > summary { color: var(--accent-2); }
.faq-answer {
  padding: 1rem 1.25rem 1.25rem;
  color: var(--text-2);
  line-height: 1.65;
  font-size: 14px;
}
.faq-answer b { color: var(--text); }
.faq-cta { margin-top: 2rem; }

@media (max-width: 600px) {
  .orders-panel { max-width: 100%; }
  .orders-stats { grid-template-columns: repeat(2, 1fr); }
  .orders-stats .stat-value { font-size: 1.4rem; }
  .orders-table th, .orders-table td { font-size: 12px; padding: 0.5rem 0.35rem; }
}


/* =============================================================
   Editor de categorías de evento (Config avanzada del admin)
   ============================================================= */
.cat-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  background: var(--bg-2);
}
.cat-row-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.cat-row-head .cat-id {
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 8px;
}
.cat-usage {
  font-size: 11px;
  color: var(--warn);
  border: 1px solid rgba(255, 167, 38, 0.3);
  background: rgba(255, 167, 38, 0.1);
  border-radius: 4px;
  padding: 1px 7px;
}
.cat-usage.cat-usage-free {
  color: var(--text-3);
  border-color: var(--line);
  background: transparent;
}
.cat-row-head .cat-del {
  margin-left: auto;
  font-size: 12px;
  padding: 3px 10px;
}

/* =============================================================
   La tira de resumen del panel
   =============================================================
   Reemplaza cinco tarjetas de 237x128 que se comían 221px de alto para
   mostrar cinco números. Medido a 1366x720: de la tabla de eventos —donde
   se trabaja— quedaban visibles 162px, o sea dos filas.

   La regla que lo ordena es el estándar 4.4 (EUP) del PLAN, que hasta ahora
   solo se aplicaba al sitio público: antes de proponer un layout hay que
   poder responder cuánto espacio desperdicia. */

.resumen-tira {
  display: flex;
  flex-wrap: wrap;          /* que se acomode, nunca que se encoja y parta el texto */
  align-items: baseline;
  gap: 0 1.4rem;
  padding: 0.7rem 0 0.5rem;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
}
.resumen-dato {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  cursor: default;          /* tiene title, pero no es clickeable */
}
.resumen-dato b {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.resumen-plata b {
  color: var(--accent-2);
}
.resumen-sep {
  margin: 0 5px;
  opacity: 0.4;
}

/* =============================================================
   Barra de secciones del panel
   ============================================================= */

/* En el panel, las herramientas del header NO se parten en dos renglones.
   Hay dos reglas `.header-tools` en este archivo —línea 75 y línea 1226— y la
   segunda gana con `flex-wrap: wrap`, así que el header terminaba en 107px con
   los botones apilados. Esta va acotada a `.admin-page` para no tocar el sitio
   público, donde el wrap sí conviene. */
.admin-page .header-tools {
  flex-wrap: nowrap;
  flex: 0 0 auto;
}

/* La barra vive DENTRO del header, no debajo. Antes eran dos filas —las
   herramientas arriba y las pestañas abajo— y se leían como dos navegaciones
   distintas. Ahora hay una sola: marca · secciones · cuenta. */
.admin-tabs {
  display: flex;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;             /* sin esto no se encoge y empuja las herramientas fuera */
  margin: 0 1.5rem;
  /* En pantallas angostas la barra se desliza en vez de partirse en dos filas:
     una segunda fila de pestañas regala alto en la parte de arriba, que es el
     espacio más caro de la pantalla. */
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius);
  background: transparent;
  border: 0;
  color: var(--text-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.admin-tab:hover {
  color: var(--text);
  background: var(--accent-soft);
}
.admin-tab.activa {
  color: var(--text);
  background: var(--accent-soft-2);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.admin-tab-icono {
  display: inline-flex;
  opacity: 0.9;
}

/* =============================================================
   La fila de evento y su menú de "⋮"
   =============================================================
   La tabla tenía 8 columnas y medía 1169px dentro de un contenedor de 914: la
   página se arrastraba de costado en cualquier pantalla menor a ~1200px. Entre
   "Acciones" (343px, cinco botones sueltos) y "Link público" (283px) se
   llevaban el 54%.

   El fix NO es más padding: con overflow-x el padding del último td cae en la
   zona scrolleada y no se ve. Es achicar lo que menos importa — el link entero
   escrito en pantalla y los cinco botones siempre visibles. */

.ev-nombre {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;          /* nunca se encogen y parten su texto */
}
.ev-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.ev-ventas {
  margin-top: 5px;
  font-size: 12px;
}

.col-menu {
  width: 1%;                /* la columna se achica a su contenido */
  text-align: right;
  white-space: nowrap;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.fila-menu {
  position: relative;
  display: inline-block;
}
.fila-menu-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-2);
  cursor: pointer;
}
.fila-menu-boton:hover,
.fila-menu.abierto .fila-menu-boton {
  background: var(--bg-3);
  border-color: var(--line-2);
  color: var(--text);
}
.fila-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  padding: 5px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  z-index: 50;
  text-align: left;
  /* Se OCULTA, no se desmonta (estándar 4.6). Adentro vive "Borrar", que abre
     una confirmación: si el nodo desapareciera mientras se espera la respuesta,
     la acción no se ejecutaría y no habría ningún error que lo delate. */
  display: none;
}
.fila-menu.abierto .fila-menu-panel {
  display: block;
}
.fila-menu-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.fila-menu-item:hover {
  background: var(--accent-soft-2);
}
.fila-menu-peligro {
  color: var(--danger);
}
.fila-menu-peligro:hover {
  background: rgba(244, 67, 54, 0.14);
}
.fila-menu-sep {
  height: 1px;
  background: var(--line);
  margin: 5px 4px;
}

/* Los pedidos de un evento, dentro de la pestaña. Antes era un modal que se
   abría desde el "⋮" de cada fila. */
.pedidos-evento {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.pedidos-evento-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;          /* nunca se encogen y parten su texto */
  margin-bottom: 1rem;
}

/* =============================================================
   Menú de perfil
   =============================================================
   El email vivía suelto en el header, visible en todas las pantallas. Estándar
   4.15: lo que se consulta va donde uno lo buscaría, no permanentemente arriba.

   Se OCULTA con una clase, nunca se desmonta (estándar 4.6): adentro hay un
   botón de acción, y un nodo que desaparece del DOM mientras hay algo en curso
   deja la acción sin ejecutar y sin error. */

.perfil {
  position: relative;
  display: inline-flex;
}
.perfil-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  padding: 0.9rem 1rem;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  z-index: 200;
  display: none;
}
.perfil.abierto .perfil-panel {
  display: block;
}
.perfil.abierto .perfil-boton {
  background: var(--accent-soft-2);
  color: var(--text);
}
.perfil-dato {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 0.8rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.perfil-etiqueta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.perfil-dato .user-badge {
  font-size: 13px;
  color: var(--text);
  word-break: break-all;   /* un email largo no ensancha el panel */
}
.perfil-salir {
  width: 100%;
  justify-content: center;
  color: var(--danger);
  border-color: var(--danger);
}

/* Un bloque de Configuración: título, nota y sus acciones. */
.bloque-config {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
  background: var(--bg-2);
}
.bloque-config h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
}
.bloque-config-nota {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 0.9rem;
  max-width: 60ch;
}
.bloque-config-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* La sección que no es la activa se OCULTA, no se desmonta (estándar 4.6).
   El !important es a propósito y no es pereza: los formularios de evento y de
   cliente manejan su propio `display` en línea para abrirse y cerrarse. Sin
   esto, un formulario abierto seguiría visible al cambiar de pestaña. */
.seccion-oculta {
  display: none !important;
}