/* ============================================================
   STOREFRONT V2 — COMPONENTES REUSABLES (Sprint UX-1, §4.3)
   ------------------------------------------------------------
   Componentes nuevos / complementarios al set ya cargado por
   tailwind.css (sf-btn / sf-btn-primary / sf-card / sf-skip-link
   ya viven ahi via @apply).

   Este archivo NO redefine clases existentes — solo agrega
   variantes V2 que dependen exclusivamente de los design tokens
   de `_design_tokens.css` (CSS vars `--sf-*`).  Es seguro
   incluirlo despues de tailwind.css sin colisiones.

   Convenciones:
   - Nuevas variantes V2: sufijo descriptivo (sf-btn-danger,
     sf-badge-discount, sf-card-elevated).
   - Componentes nuevos: prefijo sf-v2- evitable solo si NO
     colisiona (sf-skeleton, sf-toast-v2, sf-modal, ...).
   - Si una clase ya esta definida en tailwind.src.css, NO se
     redefine aqui para evitar especificidad rara.
   ============================================================ */

/* ============================================================
   BUTTONS — variantes V2
   ============================================================ */
.sf-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sf-space-2);
  padding: var(--sf-space-2) var(--sf-space-4);
  border-radius: var(--sf-radius-md);
  font-weight: 600;
  font-size: var(--sf-font-body-sm);
  background: var(--sf-color-danger);
  color: #ffffff;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter var(--sf-motion-fast) var(--sf-ease-out),
              transform var(--sf-motion-fast) var(--sf-ease-out),
              box-shadow var(--sf-motion-fast) var(--sf-ease-out);
}
.sf-btn-danger:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--sf-shadow-md);
}
.sf-btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.sf-btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sf-space-2);
  padding: var(--sf-space-2) var(--sf-space-4);
  border-radius: var(--sf-radius-md);
  font-weight: 600;
  font-size: var(--sf-font-body-sm);
  background: var(--sf-color-success);
  color: #ffffff;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter var(--sf-motion-fast) var(--sf-ease-out),
              transform var(--sf-motion-fast) var(--sf-ease-out),
              box-shadow var(--sf-motion-fast) var(--sf-ease-out);
}
.sf-btn-success:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--sf-shadow-md);
}

/* Tamano extra-small / extra-large (complementan sf-btn-lg ya existente) */
.sf-btn-xs {
  padding: var(--sf-space-1) var(--sf-space-2);
  font-size: var(--sf-font-caption);
}
.sf-btn-sm {
  padding: var(--sf-space-1) var(--sf-space-3);
  font-size: var(--sf-font-body-sm);
}
.sf-btn-xl {
  padding: var(--sf-space-4) var(--sf-space-8);
  font-size: var(--sf-font-body-lg);
}

/* ============================================================
   CARDS — variantes V2
   ============================================================ */
.sf-card-elevated {
  background: var(--sf-color-bg-elevated);
  border: 1px solid var(--sf-color-border);
  border-radius: var(--sf-radius-lg);
  padding: var(--sf-space-4);
  box-shadow: var(--sf-shadow-sm);
  transition: box-shadow var(--sf-motion-standard) var(--sf-ease-out),
              transform var(--sf-motion-standard) var(--sf-ease-out);
}
.sf-card-elevated:hover {
  box-shadow: var(--sf-shadow-lg);
  transform: translateY(-2px);
}

.sf-card-flat {
  background: var(--sf-color-bg);
  border: 1px solid var(--sf-color-border);
  border-radius: var(--sf-radius-md);
  padding: var(--sf-space-4);
}

/* ============================================================
   BADGES — variantes semanticas V2
   (sf-badge ya NO esta en tailwind.src.css, definicion completa)
   ============================================================ */
.sf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-1);
  padding: 0 var(--sf-space-2);
  height: 1.5rem;
  border-radius: var(--sf-radius-full);
  font-size: var(--sf-font-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--sf-tracking-wide);
  white-space: nowrap;
}
.sf-badge-success {
  background: rgb(22 163 74 / 0.1);
  color: var(--sf-color-success);
}
.sf-badge-warning {
  background: rgb(245 158 11 / 0.1);
  color: var(--sf-color-warning);
}
.sf-badge-danger {
  background: rgb(225 29 72 / 0.1);
  color: var(--sf-color-danger);
}
.sf-badge-info {
  background: rgb(37 99 235 / 0.1);
  color: var(--sf-color-info);
}
.sf-badge-neutral {
  background: var(--sf-color-bg-subtle);
  color: var(--sf-color-text-muted);
}
.sf-badge-discount {
  background: var(--sf-color-danger);
  color: #ffffff;
  animation: sf-pulse 2s ease-in-out infinite;
}
.sf-badge-new {
  background: var(--sf-color-primary);
  color: var(--sf-color-primary-fg);
}

/* ============================================================
   FORM INPUTS — extension V2
   (sf-input ya existe via tailwind.src.css con @apply, no se
   redefine; solo se agregan utilidades complementarias)
   ============================================================ */
.sf-input-error {
  border-color: var(--sf-color-danger) !important;
  box-shadow: 0 0 0 3px rgb(225 29 72 / 0.15);
}
.sf-input-error:focus {
  outline-color: var(--sf-color-danger);
}
.sf-form-helper {
  display: block;
  margin-top: var(--sf-space-1);
  font-size: var(--sf-font-caption);
  color: var(--sf-color-text-muted);
}
.sf-form-error {
  display: block;
  margin-top: var(--sf-space-1);
  font-size: var(--sf-font-caption);
  color: var(--sf-color-danger);
  font-weight: 600;
}

/* ============================================================
   SKELETONS — loaders durante HTMX swap / SSR pendiente
   ============================================================ */
.sf-skeleton {
  background: linear-gradient(
    90deg,
    var(--sf-color-bg-elevated) 25%,
    var(--sf-color-border) 50%,
    var(--sf-color-bg-elevated) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--sf-radius-md);
  animation: sf-skeleton-loading 1.5s ease-in-out infinite;
}
.sf-skeleton-text {
  height: 1rem;
  margin-bottom: var(--sf-space-2);
}
.sf-skeleton-title {
  height: 1.5rem;
  width: 60%;
  margin-bottom: var(--sf-space-3);
}
.sf-skeleton-img {
  width: 100%;
  aspect-ratio: 1 / 1;
}
.sf-skeleton-circle {
  border-radius: var(--sf-radius-full);
}

/* ============================================================
   TYPOGRAPHY — V2 (complementan sf-display / sf-h1 / sf-h2 /
   sf-eyebrow ya en tailwind.src.css)
   ============================================================ */
.sf-h3 {
  font-size: var(--sf-font-h3);
  font-weight: 700;
  line-height: var(--sf-leading-snug);
  letter-spacing: var(--sf-tracking-tight);
  color: var(--sf-color-text);
}
.sf-h4 {
  font-size: var(--sf-font-h4);
  font-weight: 600;
  line-height: var(--sf-leading-snug);
  color: var(--sf-color-text);
}
.sf-h5 {
  font-size: var(--sf-font-h5);
  font-weight: 600;
  line-height: var(--sf-leading-snug);
  color: var(--sf-color-text);
}
.sf-h6 {
  font-size: var(--sf-font-h6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--sf-tracking-wide);
  color: var(--sf-color-text);
}
.sf-body-lg {
  font-size: var(--sf-font-body-lg);
  line-height: var(--sf-leading-relaxed);
  color: var(--sf-color-text);
}
.sf-body {
  font-size: var(--sf-font-body);
  line-height: var(--sf-leading-normal);
  color: var(--sf-color-text);
}
.sf-body-sm {
  font-size: var(--sf-font-body-sm);
  line-height: var(--sf-leading-normal);
  color: var(--sf-color-text);
}
.sf-caption {
  font-size: var(--sf-font-caption);
  line-height: var(--sf-leading-normal);
  color: var(--sf-color-text-muted);
}
.sf-overline {
  font-size: var(--sf-font-overline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--sf-tracking-wider);
  color: var(--sf-color-text-muted);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes sf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes sf-skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes sf-slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes sf-slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes sf-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes sf-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sf-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Utility classes para aplicar las animaciones */
.sf-anim-slide-in-right {
  animation: sf-slide-in-right var(--sf-motion-standard) var(--sf-ease-out);
}
.sf-anim-slide-in-left {
  animation: sf-slide-in-left var(--sf-motion-standard) var(--sf-ease-out);
}
.sf-anim-slide-up {
  animation: sf-slide-up var(--sf-motion-standard) var(--sf-ease-out);
}
.sf-anim-fade-in {
  animation: sf-fade-in var(--sf-motion-standard) var(--sf-ease-out);
}
.sf-anim-scale-in {
  animation: sf-scale-in var(--sf-motion-fast) var(--sf-ease-bounce);
}

/* ============================================================
   SURFACES — utilidades cross-cutting
   ============================================================ */
.sf-surface {
  background: var(--sf-color-bg);
  color: var(--sf-color-text);
}
.sf-surface-elevated {
  background: var(--sf-color-bg-elevated);
  color: var(--sf-color-text);
}
.sf-surface-subtle {
  background: var(--sf-color-bg-subtle);
  color: var(--sf-color-text);
}
.sf-divider {
  height: 1px;
  background: var(--sf-color-border);
  border: 0;
  margin: var(--sf-space-4) 0;
}

/* ============================================================
 * Stat card KPI premium (_widgets/_stat_card.html) — S25 kernel
 * ============================================================ */
.sf-stat-card {
    position: relative;
    overflow: hidden;
    background: var(--sf-color-bg-elevated, #fff);
    border: 1px solid var(--sf-color-border, #e2e8f0);
    border-radius: var(--sf-radius-xl, 16px);
    padding: 1.1rem 1.15rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow .2s ease, transform .2s ease;
}
.sf-stat-card:hover {
    box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.18);
    transform: translateY(-2px);
}
.sf-stat-card__accent {
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--sf-color-primary, #0ea5e9);
}
.sf-stat-card--emerald .sf-stat-card__accent { background: #10b981; }
.sf-stat-card--blue    .sf-stat-card__accent { background: #3b82f6; }
.sf-stat-card--amber   .sf-stat-card__accent { background: #f59e0b; }
.sf-stat-card--rose    .sf-stat-card__accent { background: #f43f5e; }
.sf-stat-card--indigo  .sf-stat-card__accent { background: #6366f1; }
.sf-stat-card--slate   .sf-stat-card__accent { background: #94a3b8; }
.sf-stat-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
}
.sf-stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .75rem;
    font-size: .95rem;
    color: #fff;
}
.sf-stat-card--emerald .sf-stat-card__icon { background: linear-gradient(135deg,#10b981,#059669); }
.sf-stat-card--blue    .sf-stat-card__icon { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.sf-stat-card--amber   .sf-stat-card__icon { background: linear-gradient(135deg,#f59e0b,#d97706); }
.sf-stat-card--rose    .sf-stat-card__icon { background: linear-gradient(135deg,#f43f5e,#e11d48); }
.sf-stat-card--indigo  .sf-stat-card__icon { background: linear-gradient(135deg,#6366f1,#4f46e5); }
.sf-stat-card--slate   .sf-stat-card__icon { background: linear-gradient(135deg,#94a3b8,#64748b); }
.sf-stat-card__trend {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .68rem;
    font-weight: 700;
    padding: .18rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.sf-stat-card__trend--up   { color: #047857; background: rgba(16,185,129,.12); }
.sf-stat-card__trend--down { color: #be123c; background: rgba(244,63,94,.12); }
.sf-stat-card__trend--flat { color: var(--sf-color-text-muted,#64748b); background: rgba(148,163,184,.14); }
.sf-stat-card__label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sf-color-text-muted, #64748b);
}
.sf-stat-card__value {
    margin-top: .1rem;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--sf-color-text, #0f172a);
}
.sf-stat-card__meta {
    margin-top: .2rem;
    font-size: .74rem;
    color: var(--sf-color-text-muted, #64748b);
}