/*
 * ============================================================
 *  EL CHINO SPORTS — catalogo.css
 *  Estilos específicos de la página de catálogo (catalogo.html)
 *  Depende de: css/global.css  css/nav.css
 * ============================================================
 */


/* ============================================================
   ENCABEZADO DEL CATÁLOGO
   ============================================================ */

.catalogo-header {
  background: linear-gradient(135deg, #0a2e0d 0%, var(--color-verde) 60%, #2E7D32 100%);
  padding:    var(--espacio-xl) 0;
  position:   relative;
  overflow:   hidden;
}

/* Patrón decorativo de fondo */
.catalogo-header::before {
  content:  '';
  position: absolute;
  inset:    0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(255,255,255,.025) 40px,
    rgba(255,255,255,.025) 41px
  );
  pointer-events: none;
}

.catalogo-header__inner {
  position:        relative;
  z-index:         1;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--espacio-md);
  flex-wrap:       wrap;
}

.catalogo-header__titulo {
  font-family:    var(--fuente-titulo);
  font-size:      clamp(2.2rem, 7vw, 3.5rem);
  color:          var(--color-blanco);
  letter-spacing: .04em;
  line-height:    1;
  margin-bottom:  var(--espacio-xs);
}

.catalogo-header__subtitulo {
  font-family:   var(--fuente-cuerpo);
  font-size:     clamp(.85rem, 2vw, 1rem);
  color:         rgba(255,255,255,.72);
  font-weight:   600;
  margin-bottom: 0;
}

.catalogo-header__badge-wrap .badge {
  font-size:  .9rem;
  padding:    8px 16px;
  box-shadow: var(--sombra-media);
}

@media (min-width: 768px) {
  .catalogo-header {
    padding: var(--espacio-xxl) 0;
  }
}


/* ============================================================
   SECCIÓN DE FILTROS
   ============================================================ */

.filtros-wrap {
  background-color: var(--color-blanco);
  border-bottom:    2px solid var(--color-borde);
  position:         sticky;
  top:              64px;   /* altura del navbar */
  z-index:          800;
  padding:          var(--espacio-md) 0;
}

/* Fila superior: categorías + buscador */
.filtros__fila {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--espacio-sm);
  align-items: center;
}

.filtros__fila--top {
  margin-bottom: var(--espacio-sm);
  justify-content: space-between;
}

.filtros__fila--bottom {
  justify-content: flex-start;
  gap:             var(--espacio-md);
  flex-wrap:       wrap;
}

/* ── Categorías (pills) ── */
.filtros__categorias {
  display:  flex;
  flex-wrap: wrap;
  gap:      6px;
}

.filtro-pill {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  font-family:     var(--fuente-cuerpo);
  font-weight:     700;
  font-size:       .85rem;
  padding:         7px 16px;
  border-radius:   var(--radio-pill);
  border:          2px solid var(--color-borde);
  background-color: var(--color-fondo);
  color:           var(--color-texto-secundario);
  cursor:          pointer;
  transition:
    border-color     var(--transicion-rapida),
    background-color var(--transicion-rapida),
    color            var(--transicion-rapida),
    transform        var(--transicion-rapida);
  white-space:     nowrap;
  user-select:     none;
}

.filtro-pill i {
  font-size: .8em;
}

.filtro-pill:hover {
  border-color: var(--color-verde);
  color:        var(--color-verde);
  transform:    translateY(-1px);
}

.filtro-pill.activo {
  background-color: var(--color-verde);
  border-color:     var(--color-verde);
  color:            var(--color-blanco);
}

.filtro-pill.activo:hover {
  background-color: var(--color-verde-hover);
  border-color:     var(--color-verde-hover);
  color:            var(--color-blanco);
}

/* ── Buscador ── */
.filtros__buscador-wrap {
  position:   relative;
  flex-shrink: 0;
  width:       100%;
}

@media (min-width: 640px) {
  .filtros__buscador-wrap {
    width: 240px;
  }
}

.filtros__buscador-icono {
  position:  absolute;
  left:      12px;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--color-texto-claro);
  font-size: .85rem;
  pointer-events: none;
}

.filtros__buscador {
  width:         100%;
  padding:       9px 36px 9px 36px;
  border:        2px solid var(--color-borde);
  border-radius: var(--radio-pill);
  font-family:   var(--fuente-cuerpo);
  font-size:     .9rem;
  font-weight:   600;
  color:         var(--color-texto);
  background-color: var(--color-fondo);
  transition:    border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
  outline:       none;
  appearance:    none;
}

.filtros__buscador::placeholder {
  color: var(--color-texto-claro);
  font-weight: 400;
}

.filtros__buscador:focus {
  border-color: var(--color-verde);
  box-shadow:   0 0 0 3px rgba(27,94,32,.12);
  background-color: var(--color-blanco);
}

/* Botón limpiar búsqueda */
.filtros__buscador-limpiar {
  position:        absolute;
  right:           10px;
  top:             50%;
  transform:       translateY(-50%);
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background-color: var(--color-texto-claro);
  color:           var(--color-blanco);
  font-size:       .7rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  border:          none;
  transition:      background-color var(--transicion-rapida);
}

.filtros__buscador-limpiar:hover {
  background-color: var(--color-texto-secundario);
}

/* ── Tallas ── */
.filtros__tallas-grupo {
  display:     flex;
  align-items: center;
  gap:         var(--espacio-sm);
  flex-wrap:   wrap;
}

.filtros__tallas-label {
  font-family:  var(--fuente-cuerpo);
  font-weight:  700;
  font-size:    .85rem;
  color:        var(--color-texto-secundario);
  white-space:  nowrap;
}

.filtros__tallas {
  display:  flex;
  flex-wrap: wrap;
  gap:      4px;
}

.talla-filtro {
  font-family:     var(--fuente-cuerpo);
  font-weight:     700;
  font-size:       .78rem;
  padding:         4px 10px;
  border-radius:   var(--radio-sm);
  border:          1.5px solid var(--color-borde);
  background-color: var(--color-fondo);
  color:           var(--color-texto-secundario);
  cursor:          pointer;
  transition:
    border-color     var(--transicion-rapida),
    background-color var(--transicion-rapida),
    color            var(--transicion-rapida);
  user-select:     none;
  white-space:     nowrap;
}

.talla-filtro:hover {
  border-color: var(--color-verde);
  color:        var(--color-verde);
}

.talla-filtro.activo {
  background-color: var(--color-verde);
  border-color:     var(--color-verde);
  color:            var(--color-blanco);
}

/* ── Toggle "Solo disponibles" ── */
.filtros__toggle {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
  user-select: none;
  white-space: nowrap;
}

.filtros__toggle-input {
  /* Oculto visualmente, reemplazado por el track */
  position:  absolute;
  width:     1px;
  height:    1px;
  opacity:   0;
  overflow:  hidden;
}

.filtros__toggle-track {
  position:         relative;
  width:            40px;
  height:           22px;
  border-radius:    var(--radio-pill);
  background-color: var(--color-borde);
  border:           2px solid var(--color-borde);
  transition:       background-color var(--transicion), border-color var(--transicion);
  flex-shrink:      0;
}

.filtros__toggle-thumb {
  position:         absolute;
  top:              2px;
  left:             2px;
  width:            14px;
  height:           14px;
  border-radius:    50%;
  background-color: var(--color-blanco);
  box-shadow:       0 1px 3px rgba(0,0,0,.2);
  transition:       transform var(--transicion);
}

/* Estado activo del toggle */
.filtros__toggle-input:checked + .filtros__toggle-track {
  background-color: var(--color-verde);
  border-color:     var(--color-verde);
}

.filtros__toggle-input:checked + .filtros__toggle-track .filtros__toggle-thumb {
  transform: translateX(18px);
}

/* Focus visible en el toggle */
.filtros__toggle-input:focus-visible + .filtros__toggle-track {
  outline:        2px solid var(--color-verde);
  outline-offset: 2px;
}

.filtros__toggle-texto {
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size:   .85rem;
  color:       var(--color-texto-secundario);
}

/* ── Contador ── */
.filtros__contador {
  font-family:  var(--fuente-cuerpo);
  font-size:    .82rem;
  color:        var(--color-texto-claro);
  font-weight:  600;
  margin:       0;
  margin-left:  auto;
  white-space:  nowrap;
}

/* ── Chips de filtros activos ── */
.filtros__activos {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  padding-top: var(--espacio-sm);
  border-top:  1px solid var(--color-borde);
  margin-top:  var(--espacio-sm);
}

.filtro-chip-activo {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  font-family:     var(--fuente-cuerpo);
  font-weight:     700;
  font-size:       .78rem;
  padding:         4px 10px;
  border-radius:   var(--radio-pill);
  background-color: rgba(27, 94, 32, .1);
  color:           var(--color-verde);
  border:          1.5px solid rgba(27, 94, 32, .25);
  cursor:          pointer;
  transition:
    background-color var(--transicion-rapida),
    color            var(--transicion-rapida);
}

.filtro-chip-activo:hover {
  background-color: var(--color-verde);
  color:            var(--color-blanco);
}

.filtro-chip-activo i {
  font-size: .75em;
}

/* Botón "Limpiar todo" entre los chips */
.filtro-chip-limpiar {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  font-family:     var(--fuente-cuerpo);
  font-weight:     700;
  font-size:       .78rem;
  padding:         4px 10px;
  border-radius:   var(--radio-pill);
  background-color: transparent;
  color:           var(--color-texto-claro);
  border:          1.5px solid var(--color-borde);
  cursor:          pointer;
  transition:      color var(--transicion-rapida), border-color var(--transicion-rapida);
}

.filtro-chip-limpiar:hover {
  color:        var(--color-rojo);
  border-color: var(--color-rojo);
}

/* ── Responsive filtros ── */
@media (max-width: 767px) {
  .filtros-wrap {
    top:     64px;
    padding: var(--espacio-sm) 0;
  }

  .filtros__fila--top {
    flex-direction: column;
    align-items:    stretch;
  }

  .filtros__buscador-wrap {
    width: 100%;
  }

  .filtros__fila--bottom {
    gap: var(--espacio-sm);
  }

  .filtros__contador {
    margin-left: 0;
    width:       100%;
  }
}


/* ============================================================
   GRID DE PRODUCTOS (CATÁLOGO)
   ============================================================ */

.catalogo-grid-wrap {
  padding: var(--espacio-xl) 0;
  background-color: var(--color-fondo);
  min-height: 400px;
}

.catalogo-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--espacio-md);
}

@media (min-width: 480px) {
  .catalogo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .catalogo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--espacio-lg);
  }
}

/* Spinner de carga inicial */
.catalogo-cargando {
  padding: var(--espacio-xxl) var(--espacio-md);
}

/* ── Tarjeta de producto del catálogo ── */
/* Reutiliza .producto-card de global/home con variaciones */

.catalogo-grid .producto-card {
  /* Animación de entrada */
  animation: entrar-tarjeta .3s ease both;
}

@keyframes entrar-tarjeta {
  from {
    opacity:   0;
    transform: translateY(12px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* Stagger de animación (solo primeras 12 tarjetas) */
.catalogo-grid .producto-card:nth-child(1)  { animation-delay: .04s; }
.catalogo-grid .producto-card:nth-child(2)  { animation-delay: .08s; }
.catalogo-grid .producto-card:nth-child(3)  { animation-delay: .12s; }
.catalogo-grid .producto-card:nth-child(4)  { animation-delay: .16s; }
.catalogo-grid .producto-card:nth-child(5)  { animation-delay: .20s; }
.catalogo-grid .producto-card:nth-child(6)  { animation-delay: .24s; }
.catalogo-grid .producto-card:nth-child(7)  { animation-delay: .04s; }
.catalogo-grid .producto-card:nth-child(8)  { animation-delay: .08s; }
.catalogo-grid .producto-card:nth-child(9)  { animation-delay: .12s; }
.catalogo-grid .producto-card:nth-child(10) { animation-delay: .16s; }
.catalogo-grid .producto-card:nth-child(11) { animation-delay: .20s; }
.catalogo-grid .producto-card:nth-child(12) { animation-delay: .24s; }

/* Tarjeta agotada: va al final del grid visualmente */
.producto-card--agotado {
  order: 99;
}

/* Precio del catálogo: incluye "MXN" */
.producto-card__precio-wrap {
  display:     flex;
  align-items: baseline;
  gap:         5px;
  flex-wrap:   wrap;
}

.producto-card__precio-moneda {
  font-family:  var(--fuente-cuerpo);
  font-size:    .75rem;
  font-weight:  700;
  color:        var(--color-texto-secundario);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Botón "Avisar cuando llegue" para agotados */
.producto-card__cta--avisar {
  background-color: transparent;
  color:            var(--color-texto-secundario);
  border:           2px solid var(--color-borde);
  font-size:        .8rem;
}

.producto-card__cta--avisar:hover {
  background-color: var(--color-whatsapp);
  border-color:     var(--color-whatsapp);
  color:            var(--color-blanco);
}

/* ── Estado vacío ── */
.catalogo-vacio {
  text-align:  center;
  padding:     var(--espacio-xxl) var(--espacio-md);
  max-width:   400px;
  margin:      0 auto;
}

.catalogo-vacio__icono {
  font-size:    3.5rem;
  color:        var(--color-borde);
  margin-bottom: var(--espacio-md);
  line-height:  1;
}

.catalogo-vacio__titulo {
  font-family:   var(--fuente-titulo);
  font-size:     1.8rem;
  color:         var(--color-texto-secundario);
  margin-bottom: var(--espacio-sm);
}

.catalogo-vacio__texto {
  font-size:     .95rem;
  color:         var(--color-texto-claro);
  line-height:   1.6;
  margin-bottom: var(--espacio-xl);
}

.catalogo-vacio__acciones {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--espacio-md);
  justify-content: center;
}