/* ── Variables de marca ──────────────────────────────────────────────────── */
:root {
  --brand-black:      #171717;
  --brand-green:      #22c55e;
  --brand-green-dark: #16a34a;
  --brand-bg:         #FAFAFA;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: var(--brand-bg);
  color: var(--brand-black);
}

a, button { transition: color 120ms ease, background-color 120ms ease, opacity 120ms ease; }

/* ── Focus ring con color de marca ───────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-green);
  border-color: var(--brand-green) !important;
}

/* ── Navegación ──────────────────────────────────────────────────────────── */
.nav-link {
  color: #9ca3af;
  font-size: 0.875rem;
  font-weight: 500;
}
.nav-link:hover { color: #fff; }
.nav-link.active { color: var(--brand-green); }

/* Topbar (admin utilidades) */
.topbar {
  background: #262626;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar-badge {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-green);
  background: rgba(34,197,94,.12);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
}
.topbar-badge-muted { color: #a3a3a3; background: rgba(255,255,255,.06); }
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #a3a3a3;
  white-space: nowrap;
}
.topbar-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.topbar-link.active { color: var(--brand-green); background: rgba(34,197,94,.1); }
.topbar-link-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.topbar-link-account { max-width: 10rem; }
.topbar-sep {
  width: 1px;
  height: 1rem;
  background: rgba(255,255,255,.12);
  margin: 0 0.25rem;
}

/* Topbar dropdowns */
.topbar-dropdown { position: relative; }
.topbar-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #a3a3a3;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  max-width: 11rem;
}
.topbar-dropdown-trigger:hover,
.topbar-dropdown.is-open .topbar-dropdown-trigger {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.topbar-dropdown-trigger.active { color: var(--brand-green); background: rgba(34,197,94,.1); }
.topbar-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 11.5rem;
  background: #1f1f1f;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.5rem;
  padding: 0.35rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  z-index: 50;
}
.topbar-dropdown.is-open .topbar-dropdown-menu { display: block; }
.topbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #d4d4d4;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.topbar-dropdown-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.topbar-dropdown-item.active { color: var(--brand-green); background: rgba(34,197,94,.1); }
.topbar-dropdown-item-danger:hover { color: #fca5a5; background: rgba(239,68,68,.12); }
.topbar-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 0.25rem 0.35rem;
}

/* Nav dropdown (cliente) */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 10.5rem;
  background: #1f1f1f;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.5rem;
  padding: 0.35rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  z-index: 50;
}
.nav-dropdown.is-open .nav-dropdown-menu { display: block; }
.nav-dropdown-trigger { cursor: pointer; background: none; border: none; font-family: inherit; }

/* Nav principal */
.main-nav {
  background: var(--brand-black);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.brand-logo {
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brand-logo:hover { opacity: 0.85; }
.brand-logo-sub {
  margin-left: 0.35rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--brand-green);
  letter-spacing: 0.15em;
}
.nav-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.nav-scroll::-webkit-scrollbar { display: none; }
.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active {
  color: #fff;
  background: rgba(34,197,94,.15);
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.25);
}
.nav-item.active svg { color: var(--brand-green); }
.nav-item-cart {
  color: var(--brand-green);
  font-weight: 600;
}
.nav-item-cart:hover { background: rgba(34,197,94,.12); color: var(--brand-green); }
.nav-item-compact { padding: 0.45rem 0.55rem; }
.nav-item-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.lang-switch {
  display: flex;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.2);
  overflow: hidden;
}
.lang-btn {
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
  opacity: 0.35;
  transition: opacity 120ms, background 120ms;
}
.lang-btn:hover { opacity: 0.7; }
.lang-btn.active { opacity: 1; background: rgba(255,255,255,.12); }
.lang-btn + .lang-btn { border-left: 1px solid rgba(255,255,255,.15); }

/* Flash messages */
.flash {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  padding: 0.625rem 1.5rem;
  text-align: center;
}
.flash-error   { background: #450a0a; border-bottom: 1px solid #991b1b; color: #fca5a5; }
.flash-success { background: #f0fdf4; border-bottom: 1px solid #bbf7d0; color: #166534; font-weight: 500; }
.flash-info    { background: #f3f4f6; border-bottom: 1px solid #e5e7eb; color: #4b5563; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background-color: var(--brand-green);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.btn-primary:hover  { background-color: var(--brand-green-dark); }
.btn-primary:active { transform: scale(0.99); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background-color: var(--brand-black);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.btn-secondary:hover  { background-color: #333; }
.btn-secondary:active { transform: scale(0.99); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background-color: transparent;
  color: var(--brand-black);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;   /* gray-200 */
  cursor: pointer;
  white-space: nowrap;
}
.btn-ghost:hover  { border-color: #9ca3af; }
.btn-ghost:active { transform: scale(0.99); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background-color: #fff;
  border: 1px solid #f3f4f6;   /* gray-100 */
  border-radius: 0.75rem;
}

/* ── Tabla ───────────────────────────────────────────────────────────────── */
.table-row-base {
  border-bottom: 1px solid #f3f4f6;
}
.table-row-base:last-child { border-bottom: none; }

/* ── Badges de estado ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.badge-pending  { background: #fffbeb; color: #b45309; }   /* amber */
.badge-paid     { background: #f0fdf4; color: var(--brand-green-dark); }
.badge-prod     { background: #eff6ff; color: #1d4ed8; }   /* blue */
.badge-ready    { background: #f5f3ff; color: #6d28d9; }   /* violet */
.badge-shipped  { background: #f3f4f6; color: #4b5563; }   /* gray */

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #9ca3af;
}
.footer-link:hover { color: var(--brand-black); }

/* ── Ocultar flechas en inputs numéricos ─────────────────────────────────── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { display: none; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }