/* ============================================================
   COMPONENTES — botones, campos, chips, badges, tarjetas
   ============================================================ */

/* ── Botones ─────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--c-text);
  --btn-line: var(--c-line-strong);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;              /* objetivo táctil mínimo */
  padding: 0 var(--s-5);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-line);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition:
    background var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out),
    transform var(--d-fast) var(--e-out),
    box-shadow var(--d-base) var(--e-out);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  --btn-bg: var(--c-brand);
  --btn-fg: var(--c-ink);
  --btn-line: var(--c-brand);
  font-weight: 800;
}
.btn--primary:hover { box-shadow: var(--sh-brand); }

.btn--ghost:hover {
  --btn-bg: var(--c-surface-2);
  --btn-line: var(--c-line-strong);
}

.btn--ink {
  --btn-fg: var(--c-ink);
  --btn-line: var(--c-line-ink);
}
.btn--ink:hover { --btn-bg: var(--c-stage-2); }

.btn--wsp {
  --btn-bg: var(--c-wsp);
  --btn-fg: #04240F;
  --btn-line: var(--c-wsp);
  font-weight: 800;
}
.btn--wsp:hover { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3); }

.btn--lg { min-height: 52px; padding-inline: var(--s-6); font-size: var(--fs-base); }
.btn--sm { min-height: 36px; padding-inline: var(--s-4); font-size: var(--fs-xs); }
.btn--icon { padding: 0; width: 44px; min-height: 44px; }
.btn--icon.btn--sm { width: 36px; min-height: 36px; }
.btn--block { width: 100%; }

.btn svg { flex-shrink: 0; }

/* ── Campos ──────────────────────────────────────────────── */
.field {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding-inline: var(--s-4) var(--s-2);
  background: var(--c-surface-1);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-full);
  transition:
    border-color var(--d-base) var(--e-out),
    background var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out);
}

.field:focus-within {
  border-color: var(--c-brand-line);
  background: var(--c-surface-2);
  box-shadow: 0 0 0 4px var(--c-brand-dim);
}

.field__icon { color: var(--c-text-3); flex-shrink: 0; }

.field__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--c-text);
}
.field__input::placeholder { color: var(--c-text-3); font-weight: 400; }

/* La "x" para limpiar sólo existe cuando hay algo que limpiar. */
.field__clear {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  color: var(--c-text-3);
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.field__clear:hover { background: var(--c-surface-3); color: var(--c-text); }
.field:not(:focus-within) .field__clear[hidden] { display: none; }

/* ── Chips (filtros) ─────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 38px;
  padding: 0 var(--s-4);
  background: transparent;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text-2);
  white-space: nowrap;
  transition:
    background var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out);
}

.chip:hover { border-color: var(--c-line-strong); color: var(--c-text); }

.chip[aria-pressed='true'] {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-ink);
  font-weight: 800;
}

.chip__count {
  font-size: var(--fs-2xs);
  font-weight: 800;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* Chips sobre superficie clara */
.chip--ink { border-color: var(--c-line-ink); color: var(--c-ink-2); }
.chip--ink:hover { border-color: rgba(12, 14, 12, 0.3); color: var(--c-ink); }
.chip--ink[aria-pressed='true'] {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-stage);
}

/* ── Badges y píldoras de estado ─────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px var(--s-2);
  border-radius: var(--r-xs);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--brand { background: var(--c-brand); color: var(--c-ink); }
.badge--soft  { background: var(--c-surface-3); color: var(--c-text-2); }
.badge--ink   { background: rgba(12, 14, 12, 0.08); color: var(--c-ink-2); }
.badge--amber { background: rgba(156, 96, 0, 0.14); color: var(--c-amber-ink); }

/* Punto de marca: el color identifica la marca en el catálogo. */
.brand-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  background: var(--dot, var(--c-ink-3));
}

/* ── Stock ───────────────────────────────────────────────── */
.stock {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stock::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: currentColor;
  flex-shrink: 0;
}

.stock--ok    { color: var(--c-brand-ink); }
.stock--low   { color: var(--c-amber-ink); }
.stock--out   { color: var(--c-ink-3); }

/* ── Tarjeta base ────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--c-surface-1);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

/* ── Separador ───────────────────────────────────────────── */
.rule {
  height: 1px;
  background: var(--c-line);
  border: 0;
}

/* ── Cabecera de sección ─────────────────────────────────── */
.section-head {
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-8);
}

.section-head__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 900;
  line-height: var(--lh-tight);
}

.section-head__sub {
  color: var(--c-text-3);
  font-size: var(--fs-base);
  max-width: var(--w-prose);
}

.section-head__aside { margin-left: auto; }

/* Variante sobre superficie clara */
.section--stage .section-head__title { color: var(--c-ink); }
.section--stage .section-head__sub { color: var(--c-ink-2); }

/* ── Estado vacío ────────────────────────────────────────── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-16) var(--s-6);
  text-align: center;
}

.empty__icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--r-full);
  background: var(--c-stage-2);
  color: var(--c-ink-3);
}

.empty__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; color: var(--c-ink); }
.empty__text  { color: var(--c-ink-2); max-width: 46ch; font-size: var(--fs-base); }
.empty__text strong { color: var(--c-ink); }

.empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

/* En el drawer el vacío vive sobre fondo oscuro. */
.drawer .empty__title { color: var(--c-text); }
.drawer .empty__text { color: var(--c-text-2); }
.drawer .empty__icon { background: var(--c-surface-3); color: var(--c-text-3); }

/* ── Segmentos de la barra del catálogo ──────────────────── */
/* Los `.view-toggle` son cuadrados por defecto (sólo íconos).
   Cuando llevan texto hay que liberar el ancho. */
.view-toggle .seg {
  width: auto;
  min-width: max-content;
  padding-inline: var(--s-4);
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* ── Skeleton ────────────────────────────────────────────── */
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--c-stage-3) 25%,
    var(--c-stage-2) 50%,
    var(--c-stage-3) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s-6) + var(--bottom-offset, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: min(92vw, 420px);
  padding: var(--s-3) var(--s-5);
  background: var(--c-surface-3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-full);
  box-shadow: var(--sh-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  transform: translate(-50%, calc(100% + var(--s-8)));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--d-slow) var(--e-spring),
    opacity var(--d-base) var(--e-out),
    bottom var(--d-base) var(--e-out);
}

/* Si la barra del pedido está en pantalla, el toast sube. */
body.has-mobile-bar { --bottom-offset: 76px; }

.toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.toast__icon { color: var(--c-brand); flex-shrink: 0; }