@import url('./components/offcanvas.css');
@import url('./components/account.css');
@import url('./components/admin.css');

/* Paleta de marca */
:root{
  --mainColor: #016d6e;      /* primario */
  --secondaryColor: #ffc300; /* acento */
  --lightColor: #f2efea;     /* fondo claro */
  --darkColor: #111827;      /* gris muy oscuro para textos */
  --mutedColor: #6b7280;     /* gris medio */
}

.bg-brand{ background-color: var(--mainColor); }
.text-brand{ color: var(--mainColor); }
.border-brand{ border-color: var(--mainColor); }
.bg-accent{ background-color: var(--secondaryColor); }
.text-accent{ color: var(--secondaryColor); }
.bg-light{ background-color: var(--lightColor); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.55rem .85rem; border-radius:.85rem; border:1px solid #e5e7eb; background:#fff; transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease; }
.btn:hover{ background:#f9fafb; }
.btn:active{ transform: translateY(1px); }
.btn-outline{ background:#fff; border-color:#e5e7eb; }
.btn-outline:hover{ border-color: color-mix(in srgb, var(--mainColor) 25%, #e5e7eb); }
.btn-primary{ background: var(--mainColor); color:#fff; border-color: transparent; }
.btn-primary:hover{ filter: brightness(.95); }

/* Evita que el theme agregue íconos duplicados a los botones de cantidad */
.qty-btn::before,
.qty-btn::after {
  content: none !important;
}
.qty-btn {
  font-variant-ligatures: none;
  line-height: 1;
}

/* Oculta spinners nativos de inputs number */
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-spin {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;      /* Estándar */
}

/* VEEER ESTO, NO ESTA IMPLEMENTADO */
.badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.6rem; height:1.5rem; padding:0 .5rem;
  border-radius:9999px; font-size:12px; line-height:1;
  background: color-mix(in srgb, var(--surface), white 0%);
  border: 1px solid var(--border);
  color: var(--muted);
}
.badge--sm { height:1.25rem; font-size:11px; }
/* Checkout: ocultar link vacío 'Ver mis direcciones' en estado sin direcciones */
a[href$="/cuenta/direcciones"]:empty{display:none;}