/*
 * Layout de las piezas dinámicas (catálogo, chips) + estados hover/focus/active.
 * En el prototipo (.dc.html) estos venían de un atributo propietario
 * "style-hover" que solo funciona dentro de su propio visor. Aquí es CSS
 * real: mismo efecto visual, funciona en cualquier navegador y además
 * responde a foco por teclado, no solo al mouse.
 */

/* — chips de categoría — */
.chip {
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
  border: 1.5px solid var(--color-neutral-300);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:hover { border-color: var(--color-accent-2-600); }
.chip-activo, .chip-activo:hover {
  background: var(--color-accent-2-700);
  color: #fff;
  border-color: var(--color-accent-2-700);
}
.chip-count { font-weight: 600; opacity: 0.6; margin-left: 6px; }

/* Categoría por la que va el scroll. Se distingue del chip activo (que es un
   filtro puesto a mano) porque aquí nadie eligió nada: solo dice dónde vas. */
.chip-en-pantalla:not(.chip-activo) {
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-800);
  border-color: var(--color-accent-2-400);
}

/* — tarjeta de producto — */
.card-producto { cursor: default; transition: box-shadow 0.2s, transform 0.2s; }
.card-producto:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-inc:hover, .btn-dec:hover { background: var(--color-accent-2-200); }
.btn-inc:active, .btn-dec:active { background: var(--color-accent-2-300); }

.btn-tonalidad:hover { border-color: var(--color-accent-2-600); }

.btn-quitar-canasta:hover { filter: brightness(1.05); }
.btn-quitar-resumen:hover { color: var(--color-accent-700); }

#btnResumenSticky:hover { filter: brightness(1.12); }
#btnFab:hover { background: var(--color-accent-800); }
#btnVaciar:hover { color: var(--color-accent-800); }
#btnEnviar:hover { filter: brightness(1.08); }

#buscador:focus, #direccion:focus, #notas:focus { border-color: var(--color-accent); }
#btnLimpiarBusqueda:hover { color: var(--color-accent-700); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}

/* — responsive: el grid se adapta solo, este ajuste solo afina móviles muy angostos — */
@media (max-width: 360px) {
  .card-producto { padding: 12px 8px 10px; }
}