/* ==========================================================================
   FUTMODA SPORTS — hoja de estilos unica del sistema
   Mobile-first: todo esta pensado primero para celular.
   ========================================================================== */

/* Montserrat servida desde este mismo servidor (no desde un CDN externo).
   Es un archivo variable: un solo woff2 de 37 KB con todos los pesos. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat.woff2') format('woff2');
}

:root {
  /* ---- Paleta oficial de Futmoda Sports (manual de marca) ---- */
  --azul-electrico: #0A00FF;
  --purpura:        #8A00FF;
  --magenta:        #D300D6;
  --celeste:        #66CFFF;
  --azul-oscuro:    #0B0B2D;
  --lavanda:        #D9C8FF;

  /* ---- Degradados oficiales ---- */
  --grad-principal:  linear-gradient(135deg, #0A00FF 0%, #D300D6 100%);
  --grad-secundario: linear-gradient(135deg, #8A00FF 0%, #66CFFF 100%);
  --grad-oscuro:     linear-gradient(135deg, #0B0B2D 0%, #8A00FF 100%);

  /* Degradado para botones: se detiene antes del celeste para que el texto
     blanco siga siendo legible de punta a punta. */
  --grad-boton:      linear-gradient(135deg, #8A00FF 0%, #C200D8 100%);

  /* Nombres que usa el resto de la hoja */
  --violeta:      var(--azul-electrico);
  --morado:       var(--purpura);
  --morado-fuerte:#6E00CC;
  --degradado:    var(--grad-principal);

  --negro:        #0B0B2D;
  --carbon:       #16163C;
  --gris-borde:   #DFDCF2;
  --gris-suave:   #F5F4FC;
  --gris-texto:   #5A5878;
  --blanco:       #ffffff;

  /* Colores de estado: no son de marca, avisan cosas distintas */
  --verde:        #0ea25e;
  --verde-oscuro: #0b8049;
  --ambar:        #e08a00;
  --rojo:         #dc2626;
  --azul-wsp:     #25d366;

  --radio:        12px;
  --sombra:       0 1px 3px rgba(18,11,30,.10), 0 6px 20px rgba(18,11,30,.07);
  --ancho:        1100px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--negro);
  background: var(--gris-suave);
}

/* height:auto evita que el atributo height del HTML estire la imagen
   cuando el ancho se reduce en pantallas chicas. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* ------------------------------ Estructura ------------------------------ */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 16px;
}

.seccion { padding-block: 20px; }

/* ------------------------------ Barra superior -------------------------- */

.topbar {
  background: var(--negro);
  color: var(--blanco);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.topbar__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 10px 16px;
}

.logo {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo__marca { color: var(--blanco); }
.logo__acento { color: var(--celeste); }

.logo__imagen {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  object-fit: cover;
  flex: 0 0 auto;
}

.topbar__usuario {
  font-size: .8rem;
  text-align: right;
  line-height: 1.25;
  color: #c9d1dc;
}

.topbar__usuario strong { color: var(--blanco); display: block; font-size: .95rem; }

/* Navegacion del panel / admin */
.nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 16px;
  background: var(--carbon);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  flex: 0 0 auto;
  color: #c9d1dc;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.nav a.activo,
.nav a:hover { background: var(--morado); color: var(--blanco); }

/* ------------------------------ Titulos --------------------------------- */

/* Montserrat Black para títulos, Bold para subtítulos (manual de marca) */
h1, h2, h3 { line-height: 1.18; letter-spacing: -.02em; margin: 0 0 12px; }
h1 { font-size: 1.55rem; font-weight: 900; }
h2 { font-size: 1.2rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }

.subtitulo { color: var(--gris-texto); font-size: .9rem; margin: -6px 0 16px; }

/* ------------------------------ Botones --------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 18px;
  border: none;
  border-radius: var(--radio);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease;
}

.boton:active { transform: scale(.98); }

.boton--principal { background: var(--grad-boton); color: var(--blanco); }
.boton--principal:hover { background: var(--morado-fuerte); color: var(--blanco); }

.boton--oscuro { background: var(--negro); color: var(--blanco); }

.boton--secundario {
  background: var(--blanco);
  color: var(--negro);
  border: 2px solid var(--gris-borde);
}

.boton--peligro { background: var(--rojo); color: var(--blanco); }

.boton--wsp { background: var(--azul-wsp); color: #06331a; }

.boton--bloque { width: 100%; }

/* ---- El color reservado para la accion ----
   Este verde aparece SOLO donde el cliente puede hacer algo: tocar una talla,
   encargar una camiseta o escribirnos. En ningun otro sitio de la pagina.
   Por eso resalta: no compite con el morado de la marca, lo acompana.
   El resplandor alrededor es lo que hace que el ojo lo encuentre primero. */
.boton--accion {
  background: var(--azul-wsp);
  color: #06331a;
  box-shadow: 0 0 26px -4px rgba(37, 211, 102, .85),
              0 14px 34px -10px rgba(37, 211, 102, .65);
}

.boton--accion:hover,
.boton--accion:focus { background: #1fbb5b; color: #06331a; }

/* Si el cliente pidio menos animacion, el boton se queda quieto pero igual brilla. */
@media (prefers-reduced-motion: reduce) {
  .boton--accion { transition: none; }
}

.boton[disabled],
.boton--inactivo {
  background: var(--gris-borde);
  color: var(--gris-texto);
  cursor: not-allowed;
  pointer-events: none;
}

/* ------------------------------ Formularios ----------------------------- */

.campo { margin-bottom: 14px; }

.campo label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris-texto);
  margin-bottom: 6px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--negro);
  background: var(--blanco);
  border: 2px solid var(--gris-borde);
  border-radius: var(--radio);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--morado);
  box-shadow: 0 0 0 3px rgba(124,31,212,.20);
}

/* ------------------------------ Avisos ---------------------------------- */

.aviso {
  padding: 12px 14px;
  border-radius: var(--radio);
  margin-bottom: 14px;
  font-size: .95rem;
  border-left: 5px solid;
}

.aviso--error   { background: #fdeaea; border-color: var(--rojo);   color: #7f1d1d; }
.aviso--exito   { background: #e6f8ed; border-color: var(--verde);  color: #065f33; }
.aviso--alerta  { background: #fef5e2; border-color: var(--ambar);  color: #7c4a03; }
.aviso--info    { background: #eaf1fb; border-color: #2563eb;       color: #1e3a8a; }

/* ------------------------------ Login ----------------------------------- */

.login-pantalla {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
  background: var(--degradado);
}

.login-caja .logo__imagen { width: 76px; height: 76px; border-radius: 16px; }

.login-caja {
  width: 100%;
  max-width: 400px;
  background: var(--blanco);
  border-radius: 16px;
  padding: 28px 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.login-caja .logo {
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 4px;
  color: var(--negro);
}
.login-caja .logo__marca { color: var(--negro); }
.login-caja .logo__acento { color: var(--morado); }

.login-caja .subtitulo { text-align: center; margin-bottom: 22px; }

/* ------------------------------ Tarjetas de producto -------------------- */

.grid-productos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.producto {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.producto__equipo { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }

.producto__jugador { color: var(--gris-texto); font-size: .9rem; margin-top: -6px; }

.producto__precio { font-size: 1.3rem; font-weight: 800; color: var(--negro); }

.producto__pie { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.producto__diseno { font-size: .85rem; color: var(--gris-texto); }

.producto__foto {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gris-suave);
}

.producto__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Cuando el producto todavia no tiene foto: fondo deportivo con el dorsal */
.producto__sinfoto {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.92);
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -.04em;
  /* Mismo fondo "vitrina" que las fotos, para que las tarjetas sin foto combinen */
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,0) 14px 28px),
    radial-gradient(ellipse 70% 62% at 50% 50%, #6B2FD8 0%, #0B0B2D 100%);
}

/* La foto de la tarjeta es un botón que abre la galería */
.producto__abrir {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.producto__contador {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(11, 11, 45, .72);
  color: var(--blanco);
  font-size: .75rem;
  font-weight: 700;
}

/* ------------------------------ Preventa -------------------------------- */

/* Doble clase a propósito: los estilos base de .etiqueta, .talla-boton y .fila
   están más abajo en este archivo y, con la misma fuerza, les ganarían. */
.etiqueta.etiqueta--camino {
  background: var(--grad-boton);
  border-color: transparent;
  color: var(--blanco);
}

.producto--preventa { box-shadow: 0 0 0 2px var(--purpura), var(--sombra); }

/* La talla que todavia no llego se reserva: borde punteado morado y fondo
   lila, para que se distinga de un vistazo de la verde, que esa si esta aqui. */
.talla-boton.talla-boton--reserva {
  border-style: dashed;
  border-color: var(--purpura);
  background: #f6f3ff;
  color: var(--purpura);
}

.tallas__nota { font-size: .75rem; color: var(--gris-texto); margin: 8px 0 0; }

.fila.fila--camino { border-left-color: var(--purpura); }

.pedido-camino {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.pedido-camino form { margin: 0; }

/* ------------------------------ Galería --------------------------------- */

.galeria {
  width: min(94vw, 720px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--azul-oscuro);
  color: var(--blanco);
  overflow: hidden;
}

.galeria::backdrop { background: rgba(11, 11, 45, .88); }

.galeria__barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
}

.galeria__titulo { flex: 1; font-weight: 700; font-size: .95rem; }
.galeria__cuenta { font-size: .8rem; color: var(--lavanda); font-variant-numeric: tabular-nums; }

.galeria__cerrar {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  color: var(--blanco);
  font-size: 1.1rem;
  cursor: pointer;
}

.galeria__visor { position: relative; }

.galeria__carril {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.galeria__carril::-webkit-scrollbar { display: none; }

.galeria__carril img {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  max-height: calc(94vh - 70px);
  object-fit: contain;
  scroll-snap-align: center;
}

/* Flechas para pasar las fotos con el mouse (en el celular se desliza con el dedo) */
.galeria__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 11, 45, .62);
  color: var(--blanco);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
}

.galeria__flecha:hover { background: var(--purpura); }
.galeria__flecha--atras    { left: 10px; }
.galeria__flecha--adelante { right: 10px; }
.galeria__flecha[hidden]   { display: none; }

/* ------------------------------ Fotos (admin) --------------------------- */

.fotos-grilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.foto-tarjeta { margin: 0; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.foto-tarjeta img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.foto-tarjeta figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; }
.foto-tarjeta form { margin: 0; }

.modelo-foto { text-decoration: none; color: inherit; }

.compartir {
  border: 2px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 10px 14px 12px;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compartir legend { padding: 0 6px; font-weight: 700; font-size: .9rem; }
.compartir label { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.compartir input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--morado); }
.compartir__tallas { color: var(--gris-texto); font-weight: 400; font-size: .85rem; }

.modelo-foto__miniatura {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--grad-oscuro);
}
.modelo-foto__miniatura img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 640px) {
  .fotos-grilla { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------ Tallas ---------------------------------- */

.tallas__titulo {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris-texto);
  margin: 0 0 8px;
}

.tallas { display: flex; flex-wrap: wrap; gap: 8px; }

/* El boton de talla es EL boton del negocio: abre WhatsApp y hace la venta.
   Va en verde para que se vea de una que lleva a escribirnos. Antes era
   blanco con borde negro y solo se ponia verde al pasar el mouse, algo que
   en un celular no pasa nunca. */
.talla-boton {
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid var(--azul-wsp);
  border-radius: 10px;
  background: #eafaf0;
  color: var(--verde-oscuro);
  font-weight: 800;
  font-size: .95rem;
  text-decoration: none;
}

.talla-boton:hover,
.talla-boton:focus { background: var(--azul-wsp); border-color: var(--azul-wsp); color: #06331a; }

/* ------------------------------ Etiquetas ------------------------------- */

.etiqueta {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--gris-suave);
  border: 1px solid var(--gris-borde);
  color: var(--gris-texto);
}

.etiqueta--talla   { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.etiqueta--stock   { background: #e6f8ed; color: #065f33; border-color: #9fe3bd; }
.etiqueta--ultima  { background: #fef5e2; color: #7c4a03; border-color: #f5cf85; }
.etiqueta--agotado { background: #fdeaea; color: #7f1d1d; border-color: #f3b4b4; }

/* ------------------------------ Buscador y filtros ---------------------- */

.buscador { position: relative; margin-bottom: 12px; }

.filtros {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }

.filtros a {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--blanco);
  border: 2px solid var(--gris-borde);
  color: var(--gris-texto);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
}

.filtros a.activo {
  background: var(--morado);
  border-color: var(--morado);
  color: var(--blanco);
}

/* ------------------------------ Filas del panel ------------------------- */

.fila {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px;
  margin-bottom: 10px;
  border-left: 5px solid var(--verde);
}

.fila--agotada { border-left-color: var(--rojo); opacity: .72; }

.fila__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.fila__codigo {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gris-texto);
}

.fila__equipo  { font-weight: 800; font-size: 1.05rem; }
.fila__detalle { font-size: .9rem; color: var(--negro); }
.fila__diseno  { font-size: .82rem; color: var(--gris-texto); margin-top: 2px; }

.fila__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.fila__precio { font-size: 1.15rem; font-weight: 800; }

.fila__form { margin: 0; flex: 0 0 auto; }

/* El botón cambia de color mientras espera el segundo toque */
.boton--confirmando { background: var(--ambar); color: var(--negro); }

.fila-propia { background: #f1e9fd; font-weight: 700; }

/* ------------------------------ Tablas ---------------------------------- */

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  font-size: .9rem;
}

table.tabla th,
table.tabla td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--gris-borde); }

table.tabla th {
  background: var(--negro);
  color: var(--blanco);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

table.tabla tr:last-child td { border-bottom: none; }

/* ------------------------------ Grupos de botones ----------------------- */

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.acciones--compactas { margin-bottom: 0; justify-content: flex-end; }

.boton--chico {
  min-height: 40px;
  padding: 8px 14px;
  font-size: .85rem;
}

/* ------------------------------ Tarjetas de dato ------------------------ */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 14px;
  box-shadow: var(--sombra);
}

.tarjeta__numero { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.tarjeta__texto  { font-size: .78rem; color: var(--gris-texto); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }

/* ------------------------------ Banda de marca -------------------------- */

.banda {
  background: var(--degradado);
  color: var(--blanco);
  padding-block: 22px;
}

.banda__interior {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: 16px;
}

.banda__lema {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0 0 14px;
  max-width: 40ch;
}

.banda__datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.dato {
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  padding: 10px 12px;
}

.dato__numero {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.dato__texto {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: rgba(255,255,255,.85);
}

/* ------------------------------ Envios ---------------------------------- */

.envios {
  background: var(--degradado);
  color: var(--blanco);
  padding-block: 32px;
  margin-top: 36px;
}

.envios__interior {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: 16px;
  display: grid;
  gap: 22px;
  align-items: center;
}

.envios h2 { color: var(--blanco); margin-bottom: 8px; }
.envios p  { color: rgba(255,255,255,.9); margin: 0 0 12px; max-width: 46ch; }

.envios__mapa {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.28));
}

.envios__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.envios__lista li {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: .85rem;
  font-weight: 600;
}

@media (min-width: 760px) {
  .envios__interior { grid-template-columns: 1.1fr .9fr; gap: 36px; }
}

/* ------------------------------ Lista de compras ------------------------ */

.bloque-compra { margin-top: 30px; }

.bloque-compra h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.bloque-compra__cuenta {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gris-texto);
  letter-spacing: 0;
}

.fila--falta { border-left-color: var(--rojo); }

/* La regla de tallas: 10 casillas, de la 6 a la XL */
.regla-tallas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 12px 0;
}

.celda-talla {
  border: 2px solid;
  border-radius: 10px;
  padding: 8px 2px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.celda-talla__talla { display: block; font-weight: 900; font-size: 1.05rem; line-height: 1.2; }
.celda-talla__stock { display: block; font-size: .7rem; font-weight: 600; }

.celda-talla--falta { background: #fdeaea; border-color: #f0a9a9; color: #7f1d1d; }
.celda-talla--una   { background: #fef5e2; border-color: #f2c878; color: #7c4a03; }
.celda-talla--ok    { background: #e6f8ed; border-color: #9fe3bd; color: #065f33; }

.compra-resumen { margin: 0; font-size: .95rem; }

.compras {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 12px 14px;
}

.compra__etiqueta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.compra__check {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: var(--morado);
}

.compra__texto    { min-width: 0; }
.compra__equipo   { display: block; font-weight: 700; }
.compra__detalle  { display: block; font-size: .85rem; color: var(--gris-texto); }
.compra__vendidas { display: block; font-size: .75rem; font-weight: 700; color: var(--morado); margin-top: 2px; }

.compra__tallas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  flex: 0 0 auto;
  max-width: 42%;
}

/* Lo que ya compraste se tacha */
.compra:has(.compra__check:checked) { opacity: .5; }
.compra:has(.compra__check:checked) .compra__equipo { text-decoration: line-through; }

@media (min-width: 640px) {
  .regla-tallas { grid-template-columns: repeat(10, 1fr); }
}

/* Al imprimir o guardar en PDF: sin menús ni botones */
@media print {
  .topbar, .nav, .pie, .no-imprimir { display: none !important; }
  body { background: #fff; }
  .compra, .fila, .tarjeta { box-shadow: none; border: 1px solid #d6d2e6; }
  .compra, .fila { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ------------------------------ Vacio / pie ----------------------------- */

.vacio {
  text-align: center;
  padding: 40px 16px;
  color: var(--gris-texto);
}

.pie {
  text-align: center;
  padding: 26px 16px 34px;
  color: var(--gris-texto);
  font-size: .82rem;
}

/* ------------------------------ Pantallas grandes ----------------------- */

@media (min-width: 640px) {
  .grid-productos { grid-template-columns: repeat(2, 1fr); }
  .tarjetas { grid-template-columns: repeat(4, 1fr); }
  h1 { font-size: 1.9rem; }
}

@media (min-width: 980px) {
  .grid-productos { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   GUÍA DE TALLAS Y CALCULADORA
   Estilo limpio: títulos en mayúsculas, bordes finos y botón oscuro grande.
   Mobile-first: en el celular el panel ocupa toda la pantalla; en pantallas
   grandes se abre como panel lateral a la derecha.
   ========================================================================== */

/* ------------------------------ Banner de sección ----------------------- */

.guia-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 14px;
  padding: 14px 16px;
  text-align: left;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  color: var(--negro);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s ease;
}

.guia-banner:hover,
.guia-banner:focus-visible { border-color: var(--negro); }

.guia-banner__icono { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }

.guia-banner__texto { flex: 1; min-width: 0; }

.guia-banner__titulo {
  display: block;
  font-size: .85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.guia-banner__ayuda {
  display: block;
  font-size: .78rem;
  color: var(--gris-texto);
  margin-top: 2px;
}

.guia-banner__flecha { font-size: 1.5rem; line-height: 1; color: var(--gris-texto); }

/* La guía como una categoría más dentro de la barra de filtros.
   .filtro-info es para las próximas "categorías" de información
   (envíos, reseñas...): van en negro para que se distingan de los
   filtros de categoría, que son los blancos. */
.filtro-guia,
.filtros .filtro-info {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--negro);
  border: 2px solid var(--negro);
  color: var(--blanco);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.filtro-guia:hover,
.filtros .filtro-info:hover { background: var(--morado); border-color: var(--morado); color: var(--blanco); }

/* Cuando el chip de información es un enlace y no un botón */
.filtros a.filtro-info { display: inline-flex; align-items: center; text-decoration: none; }

/* ------------------------------ El panel -------------------------------- */

.guia {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--blanco);
  color: var(--negro);
  overflow: hidden;
}

.guia[open] { display: flex; flex-direction: column; }

.guia::backdrop { background: rgba(11, 11, 45, .62); }

body.con-guia-abierta { overflow: hidden; }

.guia__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 8px 12px 16px;
  border-bottom: 1px solid var(--gris-borde);
  flex: 0 0 auto;
}

.guia__marca {
  font-size: .9rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.guia__cerrar {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--negro);
  font-size: 1.1rem;
  cursor: pointer;
}

.guia__cerrar:hover { background: var(--gris-suave); }

.guia__tabs {
  display: flex;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--gris-borde);
}

.guia__tab {
  flex: 1;
  min-height: 48px;
  padding: 12px 6px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--gris-texto);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
}

.guia__tab.activo { color: var(--negro); border-bottom-color: var(--negro); }

.guia__cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px 40px;
}

.guia__panel:focus { outline: none; }

.guia__h2 {
  font-size: 1.15rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 6px;
}

.guia__h3 {
  font-size: .88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 18px 0 8px;
}

.guia__texto { font-size: .9rem; color: var(--gris-texto); margin: 0 0 18px; }

/* ------------------------------ Calculadora ----------------------------- */

.guia-campo { margin-bottom: 14px; }

.guia-campo label {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--negro);
  margin-bottom: 6px;
}

.guia-campo__opcional {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gris-texto);
}

/* Borde fino, estilo minimalista */
.guia input[type="number"],
.guia select {
  border-width: 1px;
  border-radius: 6px;
}

.guia input:focus,
.guia select:focus { border-color: var(--negro); box-shadow: 0 0 0 2px rgba(11, 11, 45, .12); }

.guia-medida { display: flex; gap: 8px; }
.guia-medida input  { flex: 1 1 auto; min-width: 0; }
.guia-medida select { flex: 0 0 116px; }

.guia-calc__error {
  margin: 0 0 12px;
  padding: 11px 13px;
  border-radius: 6px;
  background: #fef5e2;
  border-left: 4px solid var(--ambar);
  color: #7c4a03;
  font-size: .85rem;
}

.guia-calc__error[hidden] { display: none; }

.guia .boton--oscuro {
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
  font-weight: 800;
}

.guia-resultado {
  border: 1px solid var(--negro);
  border-radius: 6px;
  padding: 22px 18px;
  text-align: center;
}

.guia-resultado[hidden] { display: none; }

.guia-resultado__rotulo {
  margin: 0;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris-texto);
}

.guia-resultado__talla {
  margin: 4px 0 6px;
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
}

.guia-resultado__alternativas { margin: 0 0 14px; font-size: .85rem; color: var(--gris-texto); }

.guia-resultado__aviso {
  margin: 0 0 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gris-borde);
  font-size: .82rem;
  color: var(--negro);
}

.guia-resultado .boton--secundario {
  border-width: 1px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .8rem;
  font-weight: 800;
}

/* ------------------------------ Tablas de medidas ----------------------- */

.guia-subtabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

.guia-subtab {
  flex: 1 1 auto;
  min-height: 42px;
  padding: 9px 12px;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 6px;
  color: var(--gris-texto);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
}

.guia-subtab.activo { background: var(--negro); border-color: var(--negro); color: var(--blanco); }

.guia-unidades {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.guia-unidades__rotulo {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gris-texto);
}

.guia-unidades__botones {
  display: flex;
  border: 1px solid var(--gris-borde);
  border-radius: 6px;
  overflow: hidden;
}

.guia-unidad {
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  background: var(--blanco);
  color: var(--gris-texto);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.guia-unidad.activo { background: var(--negro); color: var(--blanco); }

.guia-tabla[hidden] { display: none; }

.guia-tabla__desliza {
  margin: 0 0 8px;
  font-size: .75rem;
  color: var(--gris-texto);
}

/* table.tabla ya trae sombra y bordes redondeados: hay que ganarle con
   la misma etiqueta delante, si no el .tabla de arriba manda. */
table.tabla.guia-tabla__datos {
  font-size: .82rem;
  box-shadow: none;
  border: 1px solid var(--gris-borde);
}

table.tabla.guia-tabla__datos td { white-space: nowrap; font-variant-numeric: tabular-nums; }

table.tabla.guia-tabla__datos tbody th {
  background: var(--gris-suave);
  color: var(--negro);
  font-size: .72rem;
  white-space: nowrap;
}

.guia-tabla__nota { font-size: .75rem; color: var(--gris-texto); margin: 10px 0 0; }

/* En pantallas anchas ya se ve completa: el aviso de deslizar sobra */
@media (min-width: 640px) {
  .guia-tabla__desliza { display: none; }
}

/* ------------------------------ Cómo medir ------------------------------ */

.guia-figura {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
  color: var(--negro);
}

.guia-figura svg { width: 100%; max-width: 300px; height: auto; }

.guia-figura__lineas,
.guia-figura__guias { color: var(--morado); opacity: .85; }

.guia-figura__flechas { color: var(--morado); }

.guia-figura__numeros circle { fill: var(--negro); }
.guia-figura__numeros text   { fill: var(--blanco); }

.guia-pasos {
  margin: 14px 0 0;
  padding-left: 22px;
  font-size: .88rem;
  line-height: 1.6;
}

.guia-pasos li { margin-bottom: 6px; }
.guia-pasos strong { text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; }

/* ------------------------------ Devoluciones ---------------------------- */

.guia-devoluciones {
  margin-top: 26px;
  padding: 16px;
  background: var(--gris-suave);
  border: 1px solid var(--gris-borde);
  border-left: 5px solid var(--negro);
  border-radius: 6px;
}

.guia-devoluciones__titulo {
  margin: 0 0 8px;
  font-size: .84rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.35;
}

.guia-devoluciones__texto { margin: 0 0 8px; font-size: .84rem; color: var(--gris-texto); }

.guia-devoluciones__ninos { margin: 0 0 10px; font-size: .84rem; font-weight: 700; }

.guia-devoluciones__enlace {
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: underline;
}

/* Fuera del panel (pie de sección) el bloque va dentro del contenedor */
.seccion .guia-devoluciones { margin-top: 24px; }

/* ------------------------------ Pantallas grandes ----------------------- */

@media (min-width: 760px) {
  .guia {
    width: min(480px, 100vw);
    margin: 0 0 0 auto;
    border-left: 1px solid var(--gris-borde);
  }

  .guia-banner { padding: 16px 20px; }
  .guia-banner__titulo { font-size: .92rem; }
}

@media print {
  .guia, .guia-banner, .filtro-guia { display: none !important; }
}

/* ------------------------------ Página de envíos ------------------------ */

.envios-pagina { max-width: 980px; }

.zonas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 8px 0 26px;
}

.zona {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  border-top: 4px solid #3a45bd;
}
.zona--gratis { border-top-color: var(--magenta); }

.zona__rotulo {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #3a45bd;
}
.zona--gratis .zona__rotulo { color: var(--magenta); }

.zona h2 { margin: 6px 0; font-size: 1.15rem; }
.zona p  { margin: 0; color: var(--gris-texto); font-size: .95rem; }

.mapas-envio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

.mapa-envio { margin: 0; }
.mapa-envio img { width: 100%; border-radius: 16px; box-shadow: 0 10px 30px rgba(11, 11, 45, .25); }
.mapa-envio figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-texto);
}

.pasos-envio {
  max-width: 60ch;
  margin: 0 0 28px;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cta-envio {
  background: var(--grad-principal);
  color: var(--blanco);
  border-radius: 18px;
  padding: 26px 22px;
  margin-bottom: 22px;
  text-align: center;
}
.cta-envio h2 { color: var(--blanco); margin-bottom: 6px; }
.cta-envio p  { margin: 0 0 16px; opacity: .92; }
.cta-envio__boton { font-size: 1.05rem; padding: 14px 26px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }

.envios__enlace { display: inline-block; margin-top: 6px; color: var(--blanco); font-weight: 700; }

@media (min-width: 760px) {
  .zonas       { grid-template-columns: repeat(3, 1fr); }
  .mapas-envio { grid-template-columns: repeat(2, 1fr); }
}

/* Títulos de equipo dentro de la lista de compras (una tarjeta por equipación) */
.equipo-kits {
  margin: 24px 0 10px;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--morado);
}

/* ------------------------------ Apartados ------------------------------- */

.fila.fila--mio { border-left-color: var(--magenta); }

.apartar-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 12px 0 0;
}

/* Rejilla de la vista previa al pegar una lista de pedido */
.rejilla-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.rejilla-lista label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris-texto);
}

.rejilla-lista input,
.rejilla-lista select {
  margin-top: 4px;
  min-height: 42px;
  padding: 8px 10px;
  font-size: .95rem;
}
.apartar-form input[type="text"] {
  flex: 1;
  min-width: 150px;
  min-height: 42px;
  padding: 8px 12px;
  font-size: .95rem;
}

/* ==========================================================================
   CAMISETAS POR ENCARGO
   Página pública (encargos.php) y su bandeja en administración.
   ========================================================================== */

/* ------------------------------ Chip del catálogo ----------------------- */

.filtros a.filtro-info--encargo {
  background: var(--grad-boton);
  border-color: transparent;
}

.filtros a.filtro-info--encargo:hover {
  background: var(--grad-principal);
  border-color: transparent;
}

/* ------------------------------ Banda del catálogo ---------------------- */

.banner-encargo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border-radius: 18px;
  background: var(--grad-oscuro);
  color: var(--blanco);
  text-decoration: none;
  box-shadow: var(--sombra);
}

.banner-encargo__rotulo {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.banner-encargo h2 { margin: 0 0 6px; color: var(--blanco); font-size: 1.3rem; }
.banner-encargo p  { margin: 0; color: rgba(255,255,255,.88); max-width: 52ch; font-size: .95rem; }

.banner-encargo__boton {
  flex: 0 0 auto;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--azul-wsp);
  color: #06331a;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 0 26px -4px rgba(37, 211, 102, .85),
              0 14px 34px -10px rgba(37, 211, 102, .6);
}

/* ------------------------------ Portada de la página -------------------- */

.encargo-pagina { max-width: 980px; }

.encargo-hero {
  background: var(--grad-principal);
  color: var(--blanco);
  padding: 34px 0 38px;
}

.encargo-hero__interior {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

.encargo-hero__rotulo {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.encargo-hero h1 {
  margin: 14px 0 6px;
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--blanco);
}

.encargo-hero__lema { margin: 0 0 12px; font-size: 1.15rem; font-weight: 700; }
.encargo-hero p { color: rgba(255,255,255,.93); max-width: 60ch; }

.encargo-hero__elige {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 22px;
  padding: 0;
}

.encargo-hero__elige li {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-size: .9rem;
  font-weight: 600;
}

.encargo-hero__boton {
  background: var(--azul-wsp);
  color: #06331a;
  box-shadow: 0 0 26px -4px rgba(37, 211, 102, .85),
              0 14px 34px -10px rgba(37, 211, 102, .6);
}
.encargo-hero__boton:hover { background: #1fbb5b; color: #06331a; }

/* ------------------------------ Beneficios ------------------------------ */

.beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 22px 0 10px;
}

.beneficio {
  background: var(--blanco);
  border: 2px solid var(--gris-borde);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--sombra);
}

.beneficio__icono { font-size: 1.6rem; }
.beneficio h2 { margin: 6px 0 8px; font-size: 1.05rem; }
.beneficio p  { margin: 0 0 6px; font-size: .92rem; color: var(--gris-texto); }

.beneficio--precio { border-color: var(--magenta); }

.precio-comparado {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0;
}

.precio-viejo  { text-decoration: line-through; color: var(--gris-texto); font-weight: 600; }
.precio-flecha { color: var(--magenta); font-weight: 800; }
.precio-nuevo  { font-size: 1.6rem; font-weight: 900; color: var(--purpura); }

.beneficio p.beneficio__ahorro {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e6f8ed;
  color: #065f33;
  font-weight: 800;
  font-size: .85rem;
}

.beneficio p.beneficio__ejemplos { font-weight: 700; color: var(--azul-oscuro); font-size: .82rem; }
.beneficio p.beneficio__nota { font-size: .8rem; }

/* ------------------------------ Cómo funciona --------------------------- */

.encargo-titulo { margin: 30px 0 12px; font-size: 1.35rem; }

.pasos-encargo {
  list-style: none;
  counter-reset: paso;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
}

.pasos-encargo li {
  counter-increment: paso;
  position: relative;
  background: var(--blanco);
  border: 2px solid var(--gris-borde);
  border-radius: 14px;
  padding: 16px 16px 16px 54px;
}

.pasos-encargo li::before {
  content: counter(paso);
  position: absolute;
  left: 14px;
  top: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad-boton);
  color: var(--blanco);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pasos-encargo strong { display: block; margin-bottom: 2px; }
.pasos-encargo span   { font-size: .88rem; color: var(--gris-texto); }

/* ------------------------------ Formulario ------------------------------ */

.form-encargo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.grupo {
  border: 2px solid var(--gris-borde);
  border-radius: 16px;
  padding: 16px;
  margin: 0 0 14px;
  background: var(--blanco);
}

.grupo legend {
  padding: 0 8px;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--purpura);
}

.campo__ayuda { margin: 6px 0 0; font-size: .8rem; color: var(--gris-texto); }
.campo__error { margin: 6px 0 0; font-size: .82rem; font-weight: 700; color: var(--rojo); }

/* Tallas y sí/no como botones grandes, cómodos en el celular */

.tallas-encargo,
.si-no {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.talla-opcion { position: relative; }

.talla-opcion input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.talla-opcion span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 46px;
  padding: 0 14px;
  border: 2px solid var(--gris-borde);
  border-radius: 12px;
  background: var(--blanco);
  font-weight: 700;
}

.talla-opcion input:checked + span {
  background: var(--grad-boton);
  border-color: transparent;
  color: var(--blanco);
}

.talla-opcion input:focus-visible + span {
  outline: 3px solid rgba(124,31,212,.35);
  outline-offset: 2px;
}

/* ------------------------------ Resumen --------------------------------- */

.resumen-encargo {
  background: var(--blanco);
  border: 2px solid var(--purpura);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--sombra);
}

.resumen-encargo h2 { margin: 0 0 10px; font-size: 1.1rem; }
.resumen-encargo h3 { margin: 18px 0 8px; font-size: .95rem; }

.resumen-lista { margin: 0; }

.resumen-lista > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--gris-borde);
}

.resumen-lista > div:last-child { border-bottom: none; }

.resumen-lista dt {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--gris-texto);
}

.resumen-lista dd { margin: 0; text-align: right; font-weight: 600; word-break: break-word; }

.resumen-lista--precio dd { font-variant-numeric: tabular-nums; }

.resumen-ahorro dt, .resumen-ahorro dd { color: var(--verde-oscuro); font-weight: 800; }

.resumen-encargo__nota { margin: 10px 0 0; font-size: .8rem; color: var(--gris-texto); text-align: center; }

/* ------------------------------ Políticas ------------------------------- */

.politicas {
  margin: 16px 0 12px;
  border: 2px solid var(--gris-borde);
  border-radius: 12px;
  background: var(--gris-suave);
}

.politicas summary {
  padding: 12px 14px;
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
}

.politicas ol { margin: 0; padding: 0 18px 14px 34px; }
.politicas li { font-size: .84rem; color: var(--gris-texto); margin-bottom: 6px; }

.acepto {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid var(--gris-borde);
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}

.acepto input {
  width: auto;
  min-height: auto;
  margin-top: 2px;
  flex: 0 0 auto;
}

.acepto--error { border-color: var(--rojo); background: #fdeaea; }

/* Campo trampa para robots: fuera de la pantalla, nadie lo ve ni lo tabula */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------ Solicitud enviada ----------------------- */

.encargo-listo {
  background: var(--blanco);
  border: 2px solid var(--gris-borde);
  border-radius: 18px;
  padding: 26px 20px;
  text-align: center;
  box-shadow: var(--sombra);
}

.encargo-listo__icono { font-size: 2.6rem; }
.encargo-listo h1 { margin: 6px 0 4px; font-size: 1.6rem; }

.encargo-listo__codigo {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--gris-suave);
  font-size: .85rem;
}

.encargo-listo__resumen { text-align: left; margin: 18px 0; }
.encargo-listo__resumen h2 { font-size: 1.05rem; margin: 0 0 8px; }

/* ------------------------------ Administración -------------------------- */

.estados-encargo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ------------------------------ Reloj de camisetas vendidas ------------- */

/* El número cambia de ancho mientras rueda; con esto no salta el bloque. */
.dato__numero { transition: color .3s ease, transform .3s ease; }

/* Cuando entra una venta nueva, el número da un saltito y se pone celeste */
.dato__numero--subiendo {
  color: var(--celeste);
  transform: scale(1.12);
}

.dato__vivo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  padding: 1px 7px 1px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  font-size: .62rem;
  letter-spacing: .06em;
  vertical-align: middle;
}

.dato__punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6ef7a3;
  box-shadow: 0 0 0 0 rgba(110,247,163,.75);
  animation: latido 2.2s ease-out infinite;
}

@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(110,247,163,.75); }
  70%  { box-shadow: 0 0 0 7px rgba(110,247,163,0); }
  100% { box-shadow: 0 0 0 0 rgba(110,247,163,0); }
}

/* Si el cliente pidió menos animación en su teléfono, se la respetamos. */
@media (prefers-reduced-motion: reduce) {
  .dato__punto { animation: none; }
  .dato__numero { transition: none; }
}

/* ==========================================================================
   LA CINTA — dos filas de fotos que corren solas, una hacia cada lado.

   Cómo funciona, por si hay que tocarlo: el mismo grupo de fotos está dos
   veces dentro de la pista. La pista se mueve de 0 a -50% de su ancho, o sea
   justo lo que mide un grupo. Cuando termina, el segundo grupo quedó
   exactamente donde estaba el primero, así que el salto no se ve.
   ========================================================================== */

.muro { padding: 26px 0 10px; overflow: hidden; }

.muro__cabecera { text-align: center; margin-bottom: 16px; }
.muro__cabecera h2 { margin: 0 0 4px; font-size: 1.35rem; }
.muro__cabecera p  { margin: 0; color: var(--gris-texto); font-size: .92rem; }

.cinta {
  overflow: hidden;
  padding: 6px 0;
  /* Los bordes se desvanecen: da la sensación de que la fila no se acaba. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.cinta__pista {
  display: flex;
  width: max-content;
  will-change: transform;
}

.cinta__pista--izquierda { animation: cinta-izquierda 45s linear infinite; }
.cinta__pista--derecha   { animation: cinta-derecha   50s linear infinite; }

@keyframes cinta-izquierda {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes cinta-derecha {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* En computadora, si pones el mouse encima la fila se detiene para mirar bien. */
.cinta:hover .cinta__pista { animation-play-state: paused; }

.cinta__grupo {
  display: flex;
  gap: 12px;
  padding-right: 12px;
}

.cinta__pieza {
  flex: 0 0 auto;
  width: 150px;
  margin: 0;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--azul-oscuro);
  box-shadow: var(--sombra);
}

.cinta__pieza img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  display: block;
}

.cinta__pieza figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 10px 7px;
  background: linear-gradient(to top, rgba(11,11,45,.92), rgba(11,11,45,0));
  color: var(--blanco);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Si el teléfono pidió menos animación, la cinta se queda quieta y se
   desliza con el dedo. Nadie se queda sin ver las fotos. */
@media (prefers-reduced-motion: reduce) {
  .cinta__pista { animation: none; }
  .cinta { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cinta__pista > .cinta__grupo:nth-child(2) { display: none; }
}

@media (min-width: 760px) {
  .muro { padding: 34px 0 16px; }
  .muro__cabecera h2 { font-size: 1.6rem; }
  .cinta__pieza, .cinta__pieza img { width: 190px; }
  .cinta__pieza img { height: 190px; }
}

/* ---- El muro visto desde administración ---- */

.muro-admin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.muro-admin__pieza {
  margin: 0;
  background: var(--blanco);
  border: 2px solid var(--gris-borde);
  border-radius: 14px;
  overflow: hidden;
}

.muro-admin__pieza img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

.muro-admin__pieza figcaption {
  padding: 9px 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: .85rem;
}

/* Las ocultas se ven apagadas, para distinguirlas de un vistazo. */
.muro-admin__pieza--oculta { border-color: var(--gris-borde); opacity: .55; }
.muro-admin__pieza--oculta img { filter: grayscale(1); }

/* ------------------------------ Búsqueda sin resultados ----------------- */

.sin-resultados {
  text-align: center;
  padding: 30px 20px;
  margin: 10px 0 6px;
  border: 2px dashed var(--purpura);
  border-radius: 18px;
  background: var(--blanco);
}

.sin-resultados h2 { margin: 0 0 8px; font-size: 1.25rem; }
.sin-resultados h2 span { color: var(--purpura); }
.sin-resultados p { margin: 0 0 16px; color: var(--gris-texto); }
.sin-resultados__nota { margin: 12px 0 0 !important; font-size: .85rem; }

/* ------------------------------ Apodos del buscador --------------------- */

.apodos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.apodo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  border: 2px solid var(--gris-borde);
  border-radius: 999px;
  background: var(--gris-suave);
  font-size: .88rem;
  font-weight: 700;
}

.apodo__quitar {
  border: 0;
  background: transparent;
  color: var(--gris-texto);
  font-size: .85rem;
  font-weight: 800;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 50%;
  cursor: pointer;
}

.apodo__quitar:hover { background: var(--rojo); color: var(--blanco); }

/* ------------------------------ Pantallas grandes ----------------------- */

@media (min-width: 860px) {
  .encargo-hero h1 { font-size: 2.4rem; }

  .form-encargo {
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
  }

  .resumen-encargo {
    position: sticky;
    top: 90px;
  }
}