/* ==========================================================================
   Estilos propios del catálogo de productos
   Spec: figma/spec/02-catalogo.md
   ========================================================================== */

/* --- Cabecera de la página ------------------------------------------------
   No se usa .seccion: su espaciado estándar (104 px arriba) es el doble del
   que pide esta pantalla. En el spec la barra verde acaba en y=93 y el título
   arranca en 146 → 53 px. Abajo, la última tarjeta acaba en 1347 y el frame
   en 1470 → 123 px. */

.catalogo {
  padding-block: clamp(2rem, 2.76vw, 53px) clamp(3rem, 6.4vw, 123px);
}

/* Sangría de 120 px, la de las páginas interiores: el .contenedor estándar
   más --margen-interior. Va con calc porque este elemento ES el .contenedor:
   un padding-inline suelto sustituiría al suyo en lugar de sumarse. Mismo
   patrón que .cabecera__interior en componentes.css. */
.catalogo__interior {
  padding-inline: calc(var(--margen) + var(--margen-interior));
}

/* 28 px 600 #333333 en el spec. 28 es justo el máximo de --t-h3. */
.catalogo__titulo {
  font-size: var(--t-h3);
  font-weight: var(--peso-fuerte);
  color: var(--gris-texto);
}

.catalogo__bajada {
  /* 6 px: el título ocupa 146→180 y la bajada arranca en 186. */
  margin-top: 0.375rem;
  font-size: var(--t-sm);
  color: var(--gris-texto);
}

/* --- Cuerpo: filtros + rejilla -------------------------------------------
   El diseño reparte el ancho así: barra de filtros de 290 px en x=120, hueco
   de 110 y rejilla de 1200 que acaba en 1720. Eso deja 200 px de margen
   derecho frente a los 120 de la izquierda.

   Se reproduce tal cual limitando el cuerpo a 1600 px y dejándolo pegado a la
   izquierda: es la única lectura con la que las tarjetas salen a los 378 px
   del spec. Con el hueco de rejilla estándar (--gap-rejilla, 32 px; en Figma
   33) las tres columnas miden 378,67 → menos de 1 px de desvío. */

.catalogo__cuerpo {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr); /* 290 = ancho de la barra en el spec */
  column-gap: clamp(2rem, 5.73vw, 110px);      /* 110 px: de 410 a 520 en el spec */
  row-gap: var(--gap-rejilla);
  max-width: 1600px;                            /* de x=120 a x=1720 en el spec */
  /* 33 px: la bajada acaba en 203 y el bloque arranca en 236. */
  margin-top: 2rem;
}

/* --- Barra de filtros -----------------------------------------------------
   Rectángulo de 290×700, radio 15 y borde de 1 px. El relleno es #204019,
   uno de los dos verdes oscuros que DECISIONES.md unifica en --verde-oscuro. */

.filtros {
  align-self: start;
  min-height: 700px; /* alto exacto de la barra en el spec */
  padding: 1.25rem;  /* 20 px: el texto arranca en x=140 y el rectángulo en 120 */
  background: var(--verde-oscuro);
  border: 1px solid var(--gris-borde);
  border-radius: 15px; /* radio del spec; no hay token para 15 */
  color: var(--blanco);
}

.filtros__grupo {
  min-width: 0; /* fieldset trae min-inline-size: min-content y desborda */
  padding: 0;
  border: 0;
}

/* 48 px: el último ☐ del primer bloque acaba en 440 y «Filtrar por
   industria:» arranca en 488. */
.filtros__grupo + .filtros__grupo {
  margin-top: 3rem;
}

.filtros__titulo {
  padding: 0;
  font-size: var(--t-sm);
  font-weight: var(--peso-fuerte);
  line-height: var(--lh-texto);
  /* En el spec el hueco entre el rótulo y la primera casilla es de 23 px en
     un bloque y de 16 en el otro. Se normaliza a 20. */
  margin-bottom: 1.25rem;
}

.filtros__lista {
  display: grid;
  /* 16 px: las casillas van cada 32 y cada línea ocupa 16. */
  gap: 1rem;
}

.filtros__opcion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* En Figma las casillas son el carácter «☐» dentro del propio texto. Aquí son
   checkboxes de verdad —un filtro tiene que poder marcarse— dibujados para
   que se parezcan al glifo: cuadrado con contorno blanco. Mejora deliberada
   sobre el diseño. */
.filtros__casilla {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 14px; /* el ☐ a cuerpo 13 mide unos 13 px de ancho */
  height: 14px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--blanco);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion);
}

.filtros__casilla:checked {
  background: var(--verde-lima);
  border-color: var(--verde-lima);
}

/* La marca de verificación: dos lados de un rectángulo girados 45°. */
.filtros__casilla:checked::after {
  content: '';
  width: 4px;
  height: 8px;
  border: solid var(--verde-oscuro);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
  translate: 0 -1px;
}

.filtros__etiqueta {
  font-size: 0.8125rem; /* 13 px del spec; no hay token para este tamaño */
  line-height: var(--lh-texto);
  cursor: pointer;
}

/* --- Tarjetas del catálogo ------------------------------------------------
   Variante de .tarjeta: 378×349, radio 15 en lugar de 24, y rótulo pequeño
   abajo a la izquierda en vez de título grande más botón. */

.tarjeta--catalogo {
  --alto-tarjeta: 349px; /* alto de tarjeta en el spec */
  border-radius: 15px;   /* radio del spec; no hay token para 15 */
}

/* En Figma cada tarjeta lleva su propia sombra interior: todas negras al
   25 %, todas por el borde inferior y todas distintas (desplazamientos de −33
   a −41 px, desenfoques de 4 a 41). Se unifican en un único degradado
   inferior, que además garantiza el contraste del rótulo blanco. Sustituye al
   velo uniforme que .tarjeta pone en la portada. */
.tarjeta--catalogo::before {
  background: linear-gradient(to top, var(--velo-fuerte) 0, transparent 96px);
}

/* El rótulo del catálogo es cuerpo 12 en peso normal, no el título de 22 en
   peso 600 de las tarjetas de portada. */
.tarjeta--catalogo .tarjeta__titulo {
  font-size: var(--t-xs);
  font-weight: var(--peso-normal);
}

.tarjeta--catalogo .tarjeta__enlace {
  transition: color var(--transicion);
}

.tarjeta--catalogo .tarjeta__enlace:hover {
  color: var(--verde-lima);
}

/* --- Responsive -----------------------------------------------------------
   No hay diseño móvil. Mismo criterio que la portada: por debajo de 1000 px
   —el punto en el que la navegación ya pasa a menú desplegable— los filtros
   dejan de ser barra lateral y se colocan encima de la rejilla, en varias
   columnas para no convertirse en una tira vertical de 700 px. */

@media (max-width: 1000px) {
  .catalogo__cuerpo {
    grid-template-columns: 1fr;
  }

  .filtros {
    min-height: 0;
  }

  .filtros__lista {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* ── El pie de los filtros: cuántos quedan y cómo quitarlos ─────────── */

.filtros__pie {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--gris-linea, #e0e0e0);
}

.filtros__cuenta {
  display: block;
  color: var(--gris-suave, #6b6b6b);
  font-size: var(--t-pequeno, 0.9rem);
}

.filtros__quitar {
  margin-top: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--verde-oscuro);
  border-radius: var(--radio-boton);
  background: transparent;
  color: var(--verde-oscuro);
  font-size: var(--t-pequeno, 0.9rem);
  cursor: pointer;
}

.filtros__quitar:hover {
  background: var(--verde-oscuro);
  color: var(--blanco);
}

/* Cuando ningún producto cumple lo marcado. No se deja la rejilla vacía y
   ya: una rejilla vacía sin explicación se lee como un error de la web. */
.catalogo__vacio {
  grid-column: 1 / -1;
  margin: 2rem 0;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--gris-linea, #e0e0e0);
  border-radius: var(--radio-boton);
  color: var(--gris-suave, #6b6b6b);
  text-align: center;
}

/* Las tarjetas NO se estiran al filtrar.
 *
 * El catálogo es una rejilla de dos columnas: los filtros a la izquierda y
 * los productos a la derecha. La columna de filtros mide 700 px de alto, y
 * la de productos se estira para igualarla —eso está bien—. Lo que no está
 * bien es lo de dentro: la rejilla de productos reparte ESE alto entre sus
 * filas, y con una sola fila visible esa fila se lo queda todo.
 *
 * Sin filtro no se nota, porque tres filas de 349 px ya suman más de 700.
 * Al filtrar y quedar una, las tarjetas pasaban de 349 a 700 px de alto:
 * la foto estirada y el botón perdido en medio de la nada.
 *
 * Medido en el navegador antes y después:
 *   sin filtro   349px 349px 349px   →  igual
 *   una fila     700px               →  349px
 *
 * `align-content` y no `align-items`: lo que se estira son las FILAS de la
 * rejilla, no las tarjetas dentro de su fila. */
.catalogo__cuerpo .rejilla {
  align-content: start;
}