:root{
  /* Colores de marca (ajustables) */
  --primary-50:#F1ECFF;
  --primary-100:#E6DEFF;
  --primary-200:#CFC0FF;
  --primary-300:#B39AFF;
  --primary-400:#8F68F7;
  --primary-500:#6D28D9; /* base */
  --primary-600:#5B21B6;
  --accent-500:#F59E0B;
  --success-500:#10B981;
  --danger-500:#EF4444;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.07);
  --shadow-md: 0 8px 24px rgba(17,24,39,.08);
  --radius-lg: 0.8rem;
  --radius-xl: 1rem;

  --focus-ring: 0 0 0 4px rgba(109,40,217,.2);
  --tap-size: 44px;

  --transition-fast: 150ms;
  --transition-med: 200ms;
}

/* Accesibilidad */
:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
  border-radius: 0.6rem;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Componentes reutilizables */
.card{
  background: #fff;
  border: 1px solid #F3F4F6;
  border-radius: var(--radius-xl);
  padding: 0.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.card:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }

.badge{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.25rem .5rem; border-radius:999px; font-size:.75rem; font-weight:600;
  box-shadow: var(--shadow-sm); background:#fff;
}
.badge-nuevo{ color:#065F46; background: #ECFDF5; border:1px solid #D1FAE5;}
.badge-oferta{ color:#7C2D12; background:#FFFBEB; border:1px solid #FEF3C7;}
.badge-sinstock{ color:#991B1B; background:#FEF2F2; border:1px solid #FEE2E2;}

.pill{
  min-width: var(--tap-size);
  padding: .4rem .65rem;
  border:1px solid #E5E7EB;
  border-radius: 999px;
  background:#fff;
  font-size:.9rem;
  line-height:1;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.pill[aria-pressed="true"]{ border-color: var(--primary-300); background: var(--primary-50); }

.btn-primary{
  display:inline-flex; justify-content:center; align-items:center;
  gap:.5rem; padding:.65rem .9rem; min-height:var(--tap-size);
  border-radius: .9rem; background: var(--primary-500); color:#fff; font-weight:700;
  transition: filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 6px 14px rgba(109, 40, 217, .18);
}
.btn-primary:hover{ filter:brightness(1.03); transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); }

.btn-whatsapp{
  composes: btn-primary;
  background:#25D366; box-shadow: 0 6px 14px rgba(37, 211, 102, .25);
}

.icon-btn{
  width: var(--tap-size); height: var(--tap-size);
  display:grid; place-items:center;
  border-radius: 999px;
  transition: background var(--transition-fast);
}
.icon-btn:hover{ background:#F3F4F6; }

.chip, .chip-active{
  padding:.45rem .8rem; border-radius:999px; font-weight:600; font-size:.9rem;
  border:1px solid #E5E7EB; white-space:nowrap; transition: all var(--transition-fast);
}
.chip{ background:#fff; color:#374151; }
.chip-active{ color:#4C1D95; background:var(--primary-50); border-color:var(--primary-200); }

/* oculta scrollbars (webkit) en contenedores horizontales */
/* Ocultar scrollbars en thumbs (ya usas .no-scrollbar en más sitios) */
.no-scrollbar {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none;   /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Botón primario deshabilitado coherente */
.btn-primary:disabled,
.btn-primary[disabled] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Miniaturas – tamaño compacto en móvil */
.pm-thumb { width: 4rem; height: 4rem; }
@media (min-width: 640px){ .pm-thumb { width: 4.5rem; height: 4.5rem; } }
@media (min-width: 768px){ .pm-thumb { width: 5rem; height: 5rem; } }

#pm-thumbs > * { scroll-snap-align: start; }
#pm-thumbs { overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x; }

/* Flechas del carril */
.thumb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width: 2.25rem; height: 2.25rem;
  display:grid; place-items:center;
  border-radius:999px;
  background: rgba(255,255,255,.9);
  border:1px solid #E5E7EB;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
  font-size:1.15rem; line-height:1; font-weight:700;
  transition: opacity .15s ease, filter .15s ease, transform .15s ease;
  z-index: 10;
}
@media (min-width:768px){ .thumb-nav{ width:2.5rem; height:2.5rem; } }
.thumb-nav:hover{ filter:brightness(1.03); }
.thumb-nav:disabled{ opacity:.35; pointer-events:none; }

/* Fades laterales para indicar overflow */
#pm-thumbs-wrap::before,
#pm-thumbs-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:20px; z-index:9; pointer-events:none;
}
#pm-thumbs-wrap::before{ left:0;  background:linear-gradient(to right, #fff, rgba(255,255,255,0)); }
#pm-thumbs-wrap::after { right:0; background:linear-gradient(to left,  #fff, rgba(255,255,255,0)); }

/* Evitar que el carril fuerce el ancho de su columna */
#pm-thumbs-wrap, #pm-thumbs { min-width: 0; max-width: 100%; }

/* CTA WhatsApp bonito */
.btn-whatsapp{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%;
  min-height: var(--tap-size);
  padding: .8rem 1rem;
  border-radius: 1rem;
  color: #fff; font-weight: 800; letter-spacing:.2px;
  background: linear-gradient(180deg,#27d467 0%,#1ebe5d 100%);
  border: 1px solid #1bb653;
  box-shadow:
    0 10px 24px rgba(37,211,102,.28),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform var(--transition-fast),
             filter var(--transition-fast),
             box-shadow var(--transition-fast);
}
.btn-whatsapp:hover{ filter:brightness(1.03); transform: translateY(-1px); }
.btn-whatsapp:active{ transform: translateY(0); }
.btn-whatsapp:focus-visible{
  outline:0;
  box-shadow: var(--focus-ring), 0 10px 24px rgba(37,211,102,.26);
}

/* burbuja con el ícono */
.btn-whatsapp .wa-bubble{
  width:1.6rem; height:1.6rem;
  display:grid; place-items:center;
  border-radius:999px;
  background:#fff;
  color:#25D366;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}

/* texto para asegurar truncado si es necesario */
.btn-whatsapp .wa-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* deshabilitado */
.btn-whatsapp:disabled{
  opacity:.55; cursor:not-allowed; filter:none; transform:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

/* opcional: variación ocupando todo el ancho en móviles pegado al borde inferior del drawer */
@media (max-width: 640px){
  .btn-whatsapp{ border-radius: 1rem; }
}

/* Solo los productos scrollean dentro del drawer */
.drawer-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* inercia iOS */
}

/* Fade sutil arriba del footer para indicar que hay más contenido */
.cart-footer::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-18px; height:18px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events:none;
}

/* Respeta la zona segura en móviles con notch */
.cart-footer{ padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }

/* --- Splash Intro --- */
.splash{
  position: fixed; inset: 0; z-index: 70; /* > z del modal */
  background: #fff;
  display: grid; place-items: center;
  opacity: 1; transition: opacity 480ms ease, visibility 0s linear 480ms;
  visibility: visible;
  will-change: opacity;
}
.splash.hide{
  opacity: 0; visibility: hidden; transition: opacity 480ms ease, visibility 0s linear 480ms;
}
.splash__logo{
  width: clamp(120px, 28vw, 220px);
  height: auto;
  animation: splash-pop 700ms ease both;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.06));
}
@keyframes splash-pop{
  from{ transform: scale(.92); opacity: .7; }
  to  { transform: scale(1);   opacity: 1;  }
}
/* Respeto accesibilidad */
@media (prefers-reduced-motion: reduce){
  .splash, .splash__logo{ animation: none !important; transition: none !important; }
}

/* --- Cart badge --- */
.cart-badge{
  transform-origin: 100% 0%;
  transition: transform .18s ease, opacity .18s ease;
}
.cart-badge.is-hidden{
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
}

@keyframes badge-bump{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.22); }
  100%{ transform: scale(1); }
}

/* --- Tailwind shims para tokens "primary" (CDN sin config) --- */
.bg-primary-600 { background-color: var(--primary-600) !important; }
.text-primary-600 { color: var(--primary-600) !important; }
.border-primary-300 { border-color: var(--primary-300) !important; }
.border-primary-400 { border-color: var(--primary-400) !important; }
.ring-primary-200 { --tw-ring-color: var(--primary-200) !important; }
.focus\:ring-primary-100:focus { --tw-ring-color: var(--primary-100) !important; }
.focus\:border-primary-300:focus { border-color: var(--primary-300) !important; }

/* por si acaso: aseguremos opacidad normal cuando no está oculto */
.cart-badge { opacity: 1; transform: scale(1); }

/* --- Footer de aplicación compartido --- */
.app-footer{
  background: #F9FAFB;              /* gris muy claro */
  border-top: 1px solid #F3F4F6;    /* separador sutil */
  color: #374151;
}
@media (prefers-color-scheme: dark){
  .app-footer{
    background: #0B1220;
    border-top-color: #1F2937;
    color: #9CA3AF;
  }
}

/* --- Sticky footer global (público + admin) --- */
html, body { height: 100%; }

body{
  /* usar svh para móviles + fallback */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* Asegura que <main> crece para empujar el footer hacia abajo */
main{ flex: 1 0 auto; }

/* El footer se queda al fondo sin position fixed */
.app-footer{
  margin-top: auto;   /* <- clave */
}

[x-cloak]{ display:none !important; }

/* Resaltado suave cuando se selecciona una talla existente */
.panel-glow{
  background: var(--primary-50);
  border-color: var(--primary-300) !important;
  box-shadow: 0 0 0 3px rgba(109,40,217,.16);
  transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

/* --- Estado variante (toggle) --- */
.btn-state{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.45rem .9rem; border-radius: .7rem;
  font-weight:800; font-size:.8rem; min-height: 36px;
  border:1px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  user-select:none;
}
.btn-state .hover-alt{ display:none; }
.btn-state:hover .hover-alt{ display:inline; }
.btn-state:hover .hover-base{ display:none; }

/* activa → morado; hover → rojo */
.btn-state.on{
  background: var(--primary-500); color:#fff; border-color: rgba(109,40,217,.35);
  box-shadow: 0 6px 14px rgba(109,40,217,.18);
}
.btn-state.on:hover{
  background: var(--danger-500); border-color: rgba(239,68,68,.35);
}

/* inactiva → gris; hover → morado */
.btn-state.off{
  background: #E5E7EB; color:#374151; border-color: #E5E7EB;
}
.btn-state.off:hover{
  background: var(--primary-500); color:#fff; border-color: rgba(109,40,217,.35);
  box-shadow: 0 6px 14px rgba(109,40,217,.18);
}

/* deshabilitado (mientras se hace la petición) */
.btn-state[disabled]{ opacity:.55; pointer-events:none; }

/* Botón outline simple que combinamos para "Actualizar producto variante" */
.btn-outline{
  padding:.45rem .9rem; border-radius:.7rem; border:1px solid #E5E7EB;
  background:#fff; font-weight:700; font-size:.8rem;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-outline:hover{ background:#F9FAFB; border-color:#E5E7EB; }