/* =========================================================================
   TIME MASTER · Página Colección (catálogo)
   Solo lo exclusivo de esta página. Header, footer, tarjeta, botones,
   formulario y bloque final vienen de base.css y components.css.
   Requiere tokens.css → base.css → components.css antes.
   ========================================================================= */

/* ---- 1. CABECERA DE PÁGINA -------------------------------------------- */
/* Cabecera elevada: .tm-page-head--lit (components.css), compartida con
   Cómo funciona y Confianza desde 2026-11-09. Aquí solo el ancho del lead. */
.tm-page-head--catalog .tm-lead { max-width: 58ch; }

/* ---- 2. BARRA DE FILTROS ---------------------------------------------- */
/* DS v2: barra sin caja, separada de la grilla por una línea; filtros en
   una fila en desktop, 2 columnas en tablet y 1 en móvil. */

/* Elevación 2026-11-09: la línea inferior es un filete que se desvanece en
   los extremos (como el horizonte del hero); filtros con superficie elevada,
   hover más luminoso y estado activo en plata sin relleno de color. */
/* Pulido 2026-11-09: la barra pasa a ser un panel propio (como el panel CTA
   de la Ficha): superficie Grafito con degradado, borde fino, radio 20 y
   un filo de luz arriba que se dibuja al cargar. Los selectores van un
   tono más hondos dentro del panel, para leerse "engastados". */
.tm-filters {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--tm-s-2) var(--tm-s-3);
  padding: 20px 24px 24px;
  border: 1px solid var(--tm-line);
  border-radius: 20px;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(250, 250, 250, 0.04), rgba(250, 250, 250, 0)),
    linear-gradient(180deg, var(--tm-graphite-2), var(--tm-graphite) 70%);
}
.tm-filters::after {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.24) 50%, rgba(250, 250, 250, 0));
  pointer-events: none;
}
.tm-filters__slot {
  flex: 1 1 640px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--tm-s-2);
  min-width: 0;
}
.tm-filter { display: grid; gap: 8px; min-width: 0; }
.tm-filter__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--tm-fs-eyebrow); font-weight: 500;
  letter-spacing: var(--tm-tracking-eyebrow); text-transform: uppercase;
  color: var(--tm-text-muted);
  transition: color var(--tm-dur) var(--tm-ease);
}
/* Punto de "filtro aplicado" junto a la etiqueta (aparece con escala) */
.tm-filter__label::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--tm-text);
  opacity: 0; transform: scale(0);
  transition: opacity var(--tm-dur) var(--tm-ease), transform var(--tm-dur) var(--tm-ease);
}
.tm-filter__control { position: relative; }
.tm-filter select {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  height: var(--tm-input-h); /* misma altura que los campos del formulario (DS: 52px) */
  padding: 0 44px 0 20px;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-pill); /* filtros como chips (DS v2 §7) */
  background: var(--tm-night);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  color: var(--tm-text);
  font-size: 15px;
  cursor: pointer;
  outline: none;
  text-overflow: ellipsis;
  transition: border-color var(--tm-dur) var(--tm-ease), box-shadow var(--tm-dur) var(--tm-ease), background-color var(--tm-dur) var(--tm-ease);
}
.tm-filter select:hover { border-color: var(--tm-border-strong); }
.tm-filter select:focus-visible { outline: none; border-color: var(--tm-champagne); box-shadow: var(--tm-focus-ring); }
/* Filtro aplicado: borde plata, fondo con un velo blanco al 6 % y la
   etiqueta se enciende con su punto. Sin relleno de color (paleta neutra). */
.tm-filter select:has(option:checked:not([value=""])) {
  border-color: rgba(214, 214, 214, 0.55);
  background: rgba(250, 250, 250, 0.06);
}
.tm-filter:has(option:checked:not([value=""])) .tm-filter__label { color: var(--tm-text); }
.tm-filter:has(option:checked:not([value=""])) .tm-filter__label::after { opacity: 1; transform: none; }
.tm-filter:has(option:checked:not([value=""])) .tm-filter__control svg { color: var(--tm-text); }
.tm-filter select option { background: var(--tm-graphite); color: var(--tm-text); }
.tm-filter__control svg {
  position: absolute; right: 18px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  pointer-events: none; color: var(--tm-text-muted);
  transition: color var(--tm-dur) var(--tm-ease), transform var(--tm-dur) var(--tm-ease);
}
/* Microinteracción: el chevrón baja 2 px al pasar el cursor */
.tm-filter__control:hover svg { color: var(--tm-text); transform: translateY(2px); }
.tm-filters__actions {
  display: flex; align-items: center; gap: var(--tm-s-3);
  min-height: var(--tm-input-h);
}

/* Chip de búsqueda de texto (?q= desde el buscador del header) */
.tm-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 6px 0 16px;
  border: 1px solid rgba(214, 214, 214, 0.55);
  border-radius: var(--tm-radius-pill);
  background: rgba(250, 250, 250, 0.06);
  font-size: 14px;
  max-width: 100%;
}
.tm-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-chip button {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; color: var(--tm-text-muted);
  transition: background-color var(--tm-dur) var(--tm-ease), color var(--tm-dur) var(--tm-ease), transform var(--tm-dur) var(--tm-ease);
}
.tm-chip button:hover { background: rgba(250, 250, 250, 0.10); color: var(--tm-text); transform: rotate(90deg); }
.tm-chip button:focus-visible { outline: none; box-shadow: var(--tm-focus-ring); }
.tm-chip svg { width: 14px; height: 14px; }

/* ---- 3. RESULTADOS ----------------------------------------------------- */
/* Contador integrado (2026-11-09): la cifra en serif, como una pieza más de
   la jerarquía; "relojes" en eyebrow. A la derecha, la nota con un filete. */
.tm-results-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--tm-s-1) var(--tm-s-3);
  margin-block: var(--tm-s-5) var(--tm-s-4);
}
.tm-results-bar__count {
  display: inline-flex; align-items: baseline; gap: 12px;
  font-family: var(--tm-font-body);
  font-size: var(--tm-fs-eyebrow); font-weight: 500;
  letter-spacing: var(--tm-tracking-eyebrow); text-transform: uppercase;
  color: var(--tm-text-muted);
}
.tm-count__num {
  display: inline-block;
  font-family: var(--tm-font-display);
  font-size: 48px; line-height: 0.9; font-weight: 500; /* pulido: la cifra manda (34 → 48) */
  letter-spacing: 0; text-transform: none;
  color: var(--tm-text);
  font-variant-numeric: lining-nums tabular-nums;
}
.tm-results-bar__note {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--tm-text-muted);
}
.tm-results-bar__note::before { content: ""; width: 24px; height: 1px; background: var(--tm-line-strong); }

/* Grilla: .tm-grid vive en base.css (4 / 3 / 2 columnas según ancho). */

/* Pieza reservada: se indica con el badge "Reservada" (product-card.js) */

/* ---- 4. ESTADO VACÍO: .tm-empty vive en components.css (lo usa también
   la ficha cuando la pieza no existe). Aquí solo el aire sobre él. */
.tm-empty { margin-top: var(--tm-s-2); }

/* ---- 5. CARGAR MÁS ----------------------------------------------------- */
/* "Mostrando 24 de 111" + filete de avance (se llena con --tm-progress,
   0 → 1, desde catalog.js) + botón secundario. */
.tm-more {
  display: grid; gap: var(--tm-s-2); justify-items: center;
  margin-top: var(--tm-s-6);
}
.tm-more__progress {
  font-size: var(--tm-fs-eyebrow); font-weight: 500;
  letter-spacing: var(--tm-tracking-eyebrow); text-transform: uppercase;
  color: var(--tm-text-muted); font-variant-numeric: tabular-nums;
}
.tm-more__track {
  position: relative; display: block;
  width: 160px; height: 1px; margin-bottom: var(--tm-s-1);
  background: var(--tm-line-strong);
  overflow: hidden;
}
.tm-more__track > span {
  position: absolute; inset: 0;
  background: var(--tm-text);
  transform-origin: left;
  transform: scaleX(var(--tm-progress, 0));
  transition: transform 700ms var(--tm-ease);
}
.tm-more[hidden] { display: none; }

.tm-catalog__note {
  margin-top: var(--tm-s-3);
  font-size: 14px; color: var(--tm-text-muted); text-align: center;
}
/* La nota vive entre filtros y resultados: el contador se acerca un poco */
.tm-catalog__note + .tm-results-bar { margin-top: var(--tm-s-4); }

@media (max-width: 599px) {
  .tm-filters { padding: 16px 16px 18px; border-radius: 18px; }
  .tm-filters__slot { grid-template-columns: minmax(0, 1fr); }
  .tm-filters__actions { min-height: 0; }
  .tm-count__num { font-size: 36px; }
  .tm-more { margin-top: var(--tm-s-5); }
}

/* Sin búsqueda ni filtros activos, la zona de acciones no ocupa espacio */
.tm-filters__actions:not(:has(> :not([hidden]))) { display: none; }

/* ---- 6. MOVIMIENTO (2026-11-09) ---------------------------------------- */
/* Mismas reglas que la Home (components.css, "Movimiento compartido"):
   solo opacity/transform, 200–400 ms en microinteracciones y 700 ms en
   entradas; nada se anima con movimiento reducido (sin .tm-motion).
   - Cabecera y filtros entran al cargar, escalonados 90 ms (como el hero).
   - Tarjetas: motion.js las hace aparecer al entrar en pantalla, 70 ms de
     desfase entre las que entran juntas; al filtrar y con "Cargar más"
     (solo las nuevas) se repite.
   - Contador: la cifra sube 6 px y aparece (400 ms) cuando cambia.
   - Chip de búsqueda, "Limpiar filtros" y estado vacío aparecen suaves. */
@keyframes tm-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Entrada de la cabecera: .tm-page-head--lit en components.css */
.tm-motion .tm-filters { animation: tm-rise 700ms var(--tm-ease) 330ms both; }
.tm-motion .tm-filters::after { transform-origin: left; animation: tm-draw 900ms var(--tm-ease) 420ms both; }
.tm-motion .tm-catalog__note { animation: tm-fade 700ms var(--tm-ease) 420ms both; }
.tm-motion .tm-results-bar { animation: tm-fade 700ms var(--tm-ease) 420ms both; }
.tm-motion .tm-results-bar__count.is-updated .tm-count__num { animation: tm-pop 400ms var(--tm-ease) both; }
.tm-motion .tm-chip:not([hidden]),
.tm-motion #tm-clear:not([hidden]) { animation: tm-pop 300ms var(--tm-ease) both; }
.tm-motion .tm-empty:not([hidden]) { animation: tm-rise 700ms var(--tm-ease) both; }
.tm-motion .tm-more:not([hidden]) { animation: tm-fade 700ms var(--tm-ease) both; }