/*
 * JFM Components — botones, cards, pills, inputs, qty-stepper
 * Specs: brand/DESIGN.md §4 + brand/pages/00-foundations.md
 *
 * Estrategia anti-Divi: usar selectores con .jfm-* class explícita Y selectores
 * .et_pb_button, .woocommerce a.button, etc. para sobreescribir Divi/WC sin !important
 * donde se pueda y con !important sólo en color/background donde Divi inyecta inline styles.
 */

/* ============================================
 * BUTTONS
 * ============================================ */

/* Reset común para todo lo que se vea como botón */
.jfm-btn,
body.jfm-theme .et_pb_button,
body.jfm-theme .woocommerce a.button,
body.jfm-theme .woocommerce button.button,
body.jfm-theme .woocommerce input.button,
body.jfm-theme .wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jfm-space-2);
  padding: 14px 28px;
  border-radius: var(--jfm-radius-lg);
  font-family: var(--jfm-font-body) !important;
  font-weight: 600 !important;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.1px;
  text-transform: none !important;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform var(--jfm-dur-fast) var(--jfm-ease-out),
              background var(--jfm-dur-fast) ease-out,
              box-shadow var(--jfm-dur-fast) ease-out,
              color var(--jfm-dur-fast) ease-out;
  -webkit-tap-highlight-color: transparent;
}

/* Press feedback global — Emil rule */
.jfm-btn:active,
body.jfm-theme .et_pb_button:active,
body.jfm-theme .woocommerce a.button:active,
body.jfm-theme .woocommerce button.button:active,
body.jfm-theme .woocommerce input.button:active {
  transform: scale(0.97);
}

/* PRIMARY (naranja) — variante por defecto en CTAs principales */
.jfm-btn--primary,
body.jfm-theme .et_pb_button.jfm-btn--primary,
body.jfm-theme .woocommerce .single_add_to_cart_button,
body.jfm-theme .woocommerce a.button.alt,
body.jfm-theme .woocommerce button.button.alt,
body.jfm-theme .woocommerce input.button.alt,
body.jfm-theme .woocommerce-cart-form button[name="update_cart"],
body.jfm-theme .checkout-button,
body.jfm-theme .wc-block-components-checkout-place-order-button {
  background: var(--jfm-naranja) !important;
  color: var(--jfm-blanco) !important;
  box-shadow: var(--jfm-shadow-cta);
}

.jfm-btn--primary:hover,
body.jfm-theme .et_pb_button.jfm-btn--primary:hover,
body.jfm-theme .woocommerce .single_add_to_cart_button:hover,
body.jfm-theme .woocommerce a.button.alt:hover,
body.jfm-theme .woocommerce button.button.alt:hover,
body.jfm-theme .woocommerce input.button.alt:hover,
body.jfm-theme .woocommerce-cart-form button[name="update_cart"]:hover,
body.jfm-theme .checkout-button:hover,
body.jfm-theme .wc-block-components-checkout-place-order-button:hover {
  background: var(--jfm-naranja-oscuro) !important;
  color: var(--jfm-blanco) !important;
  transform: translateY(-1px);
  box-shadow: var(--jfm-shadow-cta-hover);
}

.jfm-btn--primary:focus-visible,
body.jfm-theme .et_pb_button.jfm-btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--jfm-blanco), 0 0 0 5px var(--jfm-naranja);
}

/* SECONDARY (outline tinta) — CTAs no principales */
.jfm-btn--secondary {
  background: transparent;
  color: var(--jfm-tinta);
  padding: 13px 27px;
  border: 1.5px solid var(--jfm-gris-300);
  box-shadow: none;
}
.jfm-btn--secondary:hover {
  border-color: var(--jfm-tinta);
  background: var(--jfm-gris-50);
}

/* GHOST — links de utilidad */
.jfm-btn--ghost {
  background: transparent;
  color: var(--jfm-gris-700);
  padding: 10px 16px;
  box-shadow: none;
}
.jfm-btn--ghost:hover {
  background: var(--jfm-gris-100);
  color: var(--jfm-tinta);
}

/* WHATSAPP */
.jfm-btn--whatsapp {
  background: #25D366;
  color: var(--jfm-blanco);
}
.jfm-btn--whatsapp:hover {
  background: #128C7E;
  color: var(--jfm-blanco);
}

/* ============================================
 * GLASS BUTTONS — efecto cristal real (DESIGN.md v1.2)
 *
 * Vidrio esmerilado: backdrop-filter: blur desenfoca el fondo (simula reflejo)
 * + highlight superior curvado (luz reflejada en el borde) + reflejo especular
 * sweep al hover. Se ven mejor sobre fondos con color o foto que sobre blanco
 * uniforme — el cristal necesita "algo que reflejar".
 *
 * Las clases legacy `.jfm-btn--gloss-orange` y `.jfm-btn--gloss-black` ahora
 * son alias de las nuevas glass para mantener compatibilidad con HTML existente.
 * ============================================ */

/* AURORA GLASS ORANGE — conic-gradient holográfico naranja + magenta */
.jfm-btn--glass-orange,
.jfm-btn--gloss-orange {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jfm-space-2);
  background:
    conic-gradient(from 90deg at 50% 50%,
      rgba(246, 146, 30, 0.62),
      rgba(255, 200, 120, 0.55),
      rgba(220, 100, 200, 0.45),
      rgba(246, 146, 30, 0.62));
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  color: #fff !important;
  font-family: var(--jfm-font-body) !important;
  font-weight: 700 !important;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.1px;
  padding: 14px 28px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  text-shadow: 0 1px 2px rgba(120, 60, 0, 0.35);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 4px 20px rgba(246, 146, 30, 0.30),
    0 8px 32px rgba(220, 100, 200, 0.18),
    0 2px 8px rgba(15, 15, 18, 0.12);
  transition: background 600ms ease,
              transform var(--jfm-dur-fast) var(--jfm-ease-out),
              box-shadow var(--jfm-dur-fast) ease-out;
}

.jfm-btn--glass-orange:hover,
.jfm-btn--gloss-orange:hover {
  background:
    conic-gradient(from 270deg at 50% 50%,
      rgba(246, 146, 30, 0.78),
      rgba(255, 200, 120, 0.70),
      rgba(220, 100, 200, 0.55),
      rgba(246, 146, 30, 0.78));
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 6px 28px rgba(246, 146, 30, 0.42),
    0 12px 40px rgba(220, 100, 200, 0.28),
    0 4px 12px rgba(15, 15, 18, 0.16);
}

.jfm-btn--glass-orange:active,
.jfm-btn--gloss-orange:active {
  transform: scale(0.97);
  background:
    conic-gradient(from 180deg at 50% 50%,
      rgba(217, 117, 9, 0.85),
      rgba(180, 70, 130, 0.65),
      rgba(217, 117, 9, 0.85));
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.20),
    0 1px 4px rgba(15, 15, 18, 0.10);
}

.jfm-btn--glass-orange:focus-visible,
.jfm-btn--gloss-orange:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 3px var(--jfm-blanco),
    0 0 0 5px var(--jfm-naranja);
}

/* AURORA GLASS BLACK — variante oscura del aurora con guiño magenta/naranja */
.jfm-btn--glass-black,
.jfm-btn--gloss-black {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jfm-space-2);
  background:
    conic-gradient(from 90deg at 50% 50%,
      rgba(15, 15, 18, 0.65),
      rgba(40, 30, 60, 0.55),
      rgba(120, 40, 80, 0.50),
      rgba(15, 15, 18, 0.65));
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  color: #fff !important;
  font-family: var(--jfm-font-body) !important;
  font-weight: 700 !important;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.1px;
  padding: 14px 28px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 6px 24px rgba(15, 15, 18, 0.40),
    0 8px 32px rgba(120, 40, 80, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background 600ms ease,
              transform var(--jfm-dur-fast) var(--jfm-ease-out),
              box-shadow var(--jfm-dur-fast) ease-out,
              border-color var(--jfm-dur-fast) ease-out;
}

.jfm-btn--glass-black:hover,
.jfm-btn--gloss-black:hover {
  background:
    conic-gradient(from 270deg at 50% 50%,
      rgba(20, 18, 28, 0.78),
      rgba(60, 35, 70, 0.65),
      rgba(180, 70, 110, 0.55),
      rgba(246, 146, 30, 0.30),
      rgba(20, 18, 28, 0.78));
  border-color: rgba(246, 146, 30, 0.45);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 0 0 1px rgba(246, 146, 30, 0.30),
    0 8px 32px rgba(15, 15, 18, 0.50),
    0 0 40px rgba(220, 100, 200, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.20);
}

.jfm-btn--glass-black:active,
.jfm-btn--gloss-black:active {
  transform: scale(0.97);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.45),
    0 1px 4px rgba(0, 0, 0, 0.20);
}

.jfm-btn--glass-black:focus-visible,
.jfm-btn--gloss-black:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 0 0 3px var(--jfm-blanco),
    0 0 0 5px var(--jfm-naranja);
}

/* Tamaños */
.jfm-btn--glass-orange.jfm-btn--sm,
.jfm-btn--glass-black.jfm-btn--sm,
.jfm-btn--gloss-orange.jfm-btn--sm,
.jfm-btn--gloss-black.jfm-btn--sm {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: var(--jfm-radius-md);
}
.jfm-btn--glass-orange.jfm-btn--lg,
.jfm-btn--glass-black.jfm-btn--lg,
.jfm-btn--gloss-orange.jfm-btn--lg,
.jfm-btn--gloss-black.jfm-btn--lg {
  padding: 18px 36px;
  font-size: 18px;
  border-radius: 18px;
}

/* Fallback si no hay backdrop-filter (Firefox antiguo, etc.) — gradient sólido */
@supports not (backdrop-filter: blur(1px)) {
  .jfm-btn--glass-orange,
  .jfm-btn--gloss-orange {
    background: linear-gradient(135deg, #F89C3A 0%, #F6921E 60%, #C95F8A 100%) !important;
  }
  .jfm-btn--glass-black,
  .jfm-btn--gloss-black {
    background: linear-gradient(135deg, #1A1A20 0%, #2A1A2E 60%, #4A1F35 100%) !important;
  }
}

/* Reduced motion: desactivar transición lenta del background, mantener resto */
@media (prefers-reduced-motion: reduce) {
  .jfm-btn--glass-orange,
  .jfm-btn--gloss-orange,
  .jfm-btn--glass-black,
  .jfm-btn--gloss-black {
    transition-duration: 0.01ms !important;
  }
}

/* Disabled state */
.jfm-btn:disabled,
body.jfm-theme .et_pb_button:disabled,
body.jfm-theme .woocommerce a.button:disabled,
body.jfm-theme .woocommerce button.button:disabled {
  background: var(--jfm-gris-300) !important;
  color: var(--jfm-gris-500) !important;
  box-shadow: none;
  cursor: not-allowed;
  transform: none !important;
}

/* ============================================
 * PILLS / BADGES
 * ============================================ */
.jfm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--jfm-radius-pill);
  font-family: var(--jfm-font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.33;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.jfm-pill--nuevo     { background: var(--jfm-naranja-20); color: var(--jfm-naranja-oscuro); }
.jfm-pill--oferta    { background: var(--jfm-naranja); color: var(--jfm-blanco); }
.jfm-pill--stock-ok  { background: rgba(31,157,85,0.12); color: var(--jfm-success); }
.jfm-pill--stock-low { background: rgba(232,154,26,0.14); color: #9C6A00; }
.jfm-pill--agotado   { background: rgba(209,60,45,0.10); color: var(--jfm-error); }
.jfm-pill--garantia  { background: rgba(46,107,210,0.10); color: var(--jfm-info); }

/* ============================================
 * CARDS — sombra 3-layer signature JFM
 * ============================================ */
.jfm-card {
  background: var(--jfm-blanco);
  border-radius: var(--jfm-radius-xl);
  overflow: hidden;
  position: relative;
  box-shadow: var(--jfm-shadow-card);
  transition: transform var(--jfm-dur-medium) var(--jfm-ease-out),
              box-shadow var(--jfm-dur-medium) var(--jfm-ease-out);
}
.jfm-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--jfm-shadow-hover);
}

/* WooCommerce product card override — el grid de la tienda usa li.product */
body.jfm-theme .woocommerce ul.products li.product {
  background: var(--jfm-blanco);
  border-radius: var(--jfm-radius-xl);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--jfm-shadow-card);
  transition: transform var(--jfm-dur-medium) var(--jfm-ease-out),
              box-shadow var(--jfm-dur-medium) var(--jfm-ease-out);
}
body.jfm-theme .woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: var(--jfm-shadow-hover);
}
body.jfm-theme .woocommerce ul.products li.product img {
  border-radius: 0;
  transition: transform var(--jfm-dur-slow) var(--jfm-ease-out);
}
body.jfm-theme .woocommerce ul.products li.product:hover img {
  transform: scale(1.04);
}

/* ============================================
 * PRICE
 * ============================================ */
body.jfm-theme .price,
body.jfm-theme .woocommerce-Price-amount {
  font-family: var(--jfm-font-body);
  font-weight: 700;
  color: var(--jfm-tinta);
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}
body.jfm-theme del .woocommerce-Price-amount {
  color: var(--jfm-gris-500);
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--jfm-gris-400);
}
body.jfm-theme ins {
  text-decoration: none;
}

/* Single product price grande */
body.jfm-theme .single-product .summary > .price,
body.jfm-theme .single-product .summary .price .woocommerce-Price-amount {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1;
}

/* ============================================
 * INPUTS / FORMS
 * ============================================ */
body.jfm-theme input[type="text"],
body.jfm-theme input[type="email"],
body.jfm-theme input[type="password"],
body.jfm-theme input[type="tel"],
body.jfm-theme input[type="number"],
body.jfm-theme input[type="search"],
body.jfm-theme input[type="url"],
body.jfm-theme select,
body.jfm-theme textarea,
body.jfm-theme .form-control {
  background: var(--jfm-blanco);
  border: 1.5px solid var(--jfm-gris-200);
  border-radius: var(--jfm-radius-md);
  padding: 12px 14px;
  font-family: var(--jfm-font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--jfm-tinta);
  transition: border-color var(--jfm-dur-fast) var(--jfm-ease-out),
              box-shadow var(--jfm-dur-fast) var(--jfm-ease-out);
}
body.jfm-theme input:hover,
body.jfm-theme select:hover,
body.jfm-theme textarea:hover {
  border-color: var(--jfm-gris-300);
}
body.jfm-theme input:focus-visible,
body.jfm-theme select:focus-visible,
body.jfm-theme textarea:focus-visible {
  outline: none;
  border-color: var(--jfm-naranja);
  box-shadow: 0 0 0 4px var(--jfm-naranja-12);
}
body.jfm-theme input::placeholder,
body.jfm-theme textarea::placeholder {
  color: var(--jfm-gris-400);
}

/* Quantity stepper (cart) */
body.jfm-theme .quantity {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--jfm-gris-200);
  border-radius: var(--jfm-radius-md);
  overflow: hidden;
}
body.jfm-theme .quantity input[type="number"] {
  border: none;
  width: 56px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
body.jfm-theme .quantity input[type="number"]::-webkit-outer-spin-button,
body.jfm-theme .quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================
 * LINKS
 * ============================================ */
body.jfm-theme a {
  color: var(--jfm-naranja-oscuro);
  text-decoration: none;
  transition: color var(--jfm-dur-fast) ease-out;
}
body.jfm-theme a:hover {
  color: var(--jfm-naranja);
}

/* ============================================
 * SECTIONS & CONTAINERS
 * ============================================ */
body.jfm-theme .container,
body.jfm-theme .et_pb_row {
  max-width: var(--jfm-container);
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}

/* ============================================
 * SELECTION
 * ============================================ */
body.jfm-theme ::selection {
  background: var(--jfm-naranja-20);
  color: var(--jfm-tinta);
}