@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;}

/* ==========================
   Header Mobile (UX PRO)
   ========================== */
.tp-header{
  /* sombra se activa por JS al scrollear */
  box-shadow: none;
  transition: box-shadow 180ms var(--ease, ease), background 180ms var(--ease, ease);
}
.tp-header.tp-header--scrolled{
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

/* Botones del header (íconos) */
.tp-hbtn{
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  text-decoration: none;
  transition: background 180ms var(--ease, ease), transform 180ms var(--ease, ease), border-color 180ms var(--ease, ease);
}
.tp-hbtn:hover{ background: rgba(255,255,255,0.14); }
.tp-hbtn:active{ transform: translateY(1px); }
.tp-hbtn:focus{ outline: none; }
.tp-hbtn:focus-visible{ box-shadow: 0 0 0 3px rgba(255,255,255,0.25); }

.tp-hbtn--ghost{
  background: transparent;
  border-color: transparent;
}
.tp-hbtn--ghost:hover{ background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.12); }

.tp-hicon{ width: 22px; height: 22px; }

/* Avatar */
.tp-avatar-img{ background: rgba(255,255,255,0.12); }
.tp-avatar-fallback{ background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.18); }

/* Buscador header */
.tp-search-input{
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.tp-search-btn{
  width: 32px;
  height: 32px;
  border-radius: 9999px;
}
.tp-search-btn:hover{ background: rgba(0,0,0,0.04); }