/* ===========================================================
   DEPORTES JIMMY — CALZADO / la tabla de tallas
   -----------------------------------------------------------
   Se carga SOLO en la ficha de un zapato con tallas. Una camiseta
   no pide este archivo ni una vez.
   =========================================================== */

.dj-tallas {
  margin: 0 0 18px;
  max-width: 340px;
}

/* El desplegable de siempre se esconde en cuanto el JavaScript montó
   la tabla — no antes. La clase la pone `tallas.js` al terminar, así
   que si el JavaScript falla o tarda, lo que se ve es el desplegable
   funcionando, nunca un hueco. */
.variations_form.dj-tallas-on table.variations { display: none; }


.dj-tallas__tit {
  margin: 0 0 8px;
  font-family: var(--dj-font-body, sans-serif);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dj-black-soft, #111);
}


/* -----------------------------------------------------------
   LA TABLA
   ----------------------------------------------------------- */
.dj-tallas__tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e3e3e9;
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--dj-font-body, sans-serif);
  font-variant-numeric: tabular-nums;   /* los números alineados en columna */
}

.dj-tallas__tabla th {
  padding: 9px 10px;
  background: var(--dj-red, #FF0000);
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}

.dj-tallas__tabla td {
  padding: 10px;
  border-top: 1px solid #eeeef3;
  font-size: .88rem;
  text-align: center;
  color: #2a2a31;
}

.dj-tallas__us { font-weight: 700; color: #111; }


/* -----------------------------------------------------------
   LA FILA
   -----------------------------------------------------------
   Se pulsa la fila ENTERA, no un botoncito dentro. En un celular
   es la diferencia entre acertar a la primera y darle tres veces
   al número equivocado.
   ----------------------------------------------------------- */
.dj-tallas__fila {
  cursor: pointer;
  transition: background .14s ease;
}

.dj-tallas__fila:hover  { background: #fff4f4; }
.dj-tallas__fila:focus-visible {
  outline: 2px solid var(--dj-red, #FF0000);
  outline-offset: -2px;
}

/* La talla elegida: la fila entera en rojo. Se ve de un vistazo
   desde cualquier punto de la tabla, que es justo lo que se pidió. */
.dj-tallas__fila.is-puesta { background: var(--dj-red, #FF0000); }
.dj-tallas__fila.is-puesta td,
.dj-tallas__fila.is-puesta .dj-tallas__us {
  color: #fff;
  font-weight: 700;
}


/* -----------------------------------------------------------
   AGOTADA
   -----------------------------------------------------------
   Tachada, apagada y con una X delante. Tres señales para lo
   mismo a propósito: el color solo no vale para quien no
   distingue el gris del negro, y el tachado solo se pierde en una
   pantalla pequeña.
   ----------------------------------------------------------- */
.dj-tallas__fila.is-agotada {
  cursor: not-allowed;
  background: #fafafb;
}
.dj-tallas__fila.is-agotada td {
  color: #b6b6c0;
  text-decoration: line-through;
}
.dj-tallas__fila.is-agotada:hover { background: #fafafb; }

.dj-tallas__fila.is-agotada .dj-tallas__us::before {
  content: "✕ ";
  text-decoration: none;
  display: inline-block;
  color: #d0d0d8;
  font-weight: 700;
}


.dj-tallas__ayuda {
  margin: 8px 0 0;
  font-size: .76rem;
  line-height: 1.5;
  color: #77777f;
}


/* -----------------------------------------------------------
   CELULAR
   ----------------------------------------------------------- */
@media (max-width: 600px) {
  .dj-tallas { max-width: 100%; }

  /* Filas más altas: se pulsan con el pulgar, no con un ratón. */
  .dj-tallas__tabla td { padding: 13px 8px; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dj-tallas__fila { transition: none; }
}