/**
 * CatalogoCode — Parche temporal de transición (hasta el Design System v2).
 *
 * IMPORTANTE: este archivo ya NO impone colores en el catálogo público.
 * Cada tienda se ve con el tema que eligió el comerciante. Aquí solo quedan
 * correcciones NEUTRAS que funcionan en cualquier tema (claro u oscuro):
 *   - el catálogo deja espacio para la barra flotante,
 *   - contraste del banner,
 *   - una sola barra de scroll en el modal de producto,
 *   - casilla de consentimiento alineada.
 * Se elimina cuando el catálogo v2 (css/ds/) quede activo para todas las tiendas.
 */

:root {
  --cc-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cc-radius-sm: 8px;
  --cc-radius-lg: 16px;
  --cc-radius-pill: 9999px;
  --cc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   SECCIÓN 1: CATÁLOGO PÚBLICO — correcciones neutras (sin colores de tema)
   ========================================================================== */

/* 1. La barra flotante nunca tapa la última fila de productos */
.store-page .catalog {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

/* 2. Banner de tienda: fondo visual absoluto con overlay de contraste y contenido legible */
.store-header {
  position: relative !important;
  overflow: hidden !important;
}

.store-header__banner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.store-header__carousel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}

.store-header__overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.store-header__content {
  position: relative !important;
  z-index: 2 !important;
}

/* Fallback de contraste para contenedores de banner genéricos si existen */
.store-banner,
.header__banner {
  position: relative;
  overflow: hidden;
}
.store-banner::after,
.header__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 100%);
  pointer-events: none;
  z-index: 1;
}
.store-banner > *,
.header__banner > * {
  position: relative;
  z-index: 2;
}

/* 3. Modal de producto: el <dialog> no hace scroll; solo el cuerpo (una barra) */
dialog.pmodal {
  overflow: hidden !important;
  padding: 0 !important;
}
.pmodal__body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}

/* 4. Consentimiento de WhatsApp: casilla a la izquierda del texto, con el color del tema */
.store-page .cart-optin {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  text-align: left !important;
  background: color-mix(in srgb, currentColor 5%, transparent) !important;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  color: inherit !important;
  cursor: pointer;
}
.store-page .cart-optin input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent, #eab308);
}
.store-page .cart-optin span { color: inherit !important; font-size: 13px; line-height: 1.45; }
.store-page .cart-optin small { display: block; opacity: .7; margin-top: 4px; }

/* ==========================================================================
   SECCIÓN 2: DASHBOARD DE COMERCIANTE (BENTO & TECH ELEVATION)
   ========================================================================== */

/* 1. Contenedor de contenido con margen de respiro */
.dash-content {
  padding-bottom: 3.5rem !important;
}

/* 2. Tarjetas Bento de Métricas e Información */
.dash-card,
.mk-card,
.mk-stat,
.quota-card,
.mk .card,
.mk .metric {
  border-radius: var(--cc-radius-lg, 16px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  transition: transform 200ms var(--cc-ease-out),
              box-shadow 200ms var(--cc-ease-out),
              border-color 200ms var(--cc-ease-out) !important;
}

.dash-card:hover,
.mk-stat:hover,
.quota-card:hover,
.mk .metric:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
}

/* Números tabulares para métricas */
.mk .metric__value,
.quota-card__value,
.mk-stat__num {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
  font-weight: 750 !important;
}

/* 3. Barras de Cupo (Progress Bars) suaves y modernas */
.quota-bar {
  background: #f1f5f9 !important;
  border-radius: var(--cc-radius-pill, 9999px) !important;
  height: 8px !important;
  overflow: hidden !important;
}

.quota-bar__fill {
  border-radius: var(--cc-radius-pill, 9999px) !important;
  transition: width 400ms var(--cc-ease-out) !important;
}

/* 4. Tarjetas de Addons y Selectores Limpios */
.addons-grid {
  gap: 16px !important;
}

.addon-card {
  border-radius: var(--cc-radius-lg, 16px) !important;
  border: 1px solid #e2e8f0 !important;
  padding: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  transition: transform 200ms var(--cc-ease-out),
              box-shadow 200ms var(--cc-ease-out),
              border-color 200ms var(--cc-ease-out) !important;
}

.addon-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  border-color: #cbd5e1 !important;
}

/* Modernización de Selectores toscos en Formularios y Addons */
.addon-card__form select,
.addon-card select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #f8fafc !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--cc-radius-sm, 8px) !important;
  padding: 10px 36px 10px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  cursor: pointer !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

.addon-card__form select:focus,
.addon-card select:focus {
  border-color: #2563eb !important;
  outline: 3px solid rgba(37, 99, 235, 0.18) !important;
}

/* 5. Barra Lateral del Dashboard: Tipografía y Pesos Estandarizados */
.dash-sidebar {
  font-family: var(--cc-font-sans) !important;
}

.dash-nav__link {
  font-weight: 600 !important;
  border-radius: 10px !important;
  color: #1e293b !important;
  transition: background 150ms ease, color 150ms ease !important;
}

.dash-nav__link.is-active {
  font-weight: 700 !important;
  background: #dbeafe !important;
  color: #1d4ed8 !important;
}
.dash-nav__link.is-active::before,
.dash-nav__link::before {
  display: none !important;
  content: none !important;
}

.dash-nav__group {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #475569 !important;
  opacity: 1 !important;
}

/* 6. Buscador de la barra lateral: integrado al sidebar oscuro según target_redesign_reference.png */
.dash-sidebar .dash-nav-search { 
  background: transparent !important; 
  position: relative !important;
  margin: 0.5rem 0.75rem 0.85rem !important;
}
.dash-sidebar .dash-nav-search input {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 10px 8px 34px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all .2s ease !important;
}
.dash-sidebar .dash-nav-search input:focus {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: #ff5745 !important;
  box-shadow: 0 0 0 3px rgba(255, 87, 69, 0.2) !important;
  outline: none !important;
}
.dash-sidebar .dash-nav-search input::placeholder { 
  color: #94a3b8 !important; 
  opacity: 1 !important;
}
.dash-sidebar .dash-nav-search svg { 
  color: #94a3b8 !important; 
  opacity: 1 !important;
}

/* ==========================================================================
   SECCIÓN 3: TOKENS DE DISEÑO ELAYADESIGN & BENTO HIGH-CONVERSION
   ========================================================================== */

:root {
  --cc-ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);
  --cc-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --cc-font-editorial: 'Geist', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  
  /* Paleta Obsidiana & Lujo */
  --cc-obsidian: #000000;
  --cc-dark-surface: #09090b;
  --cc-dark-card: #121214;
  --cc-dark-card-hover: #18181b;
  --cc-dark-border: rgba(255, 255, 255, 0.08);
  --cc-dark-border-light: rgba(255, 255, 255, 0.16);
  
  /* Gradientes de Texto Editorial (ElayaDesign rule) */
  --cc-text-gradient-dark: linear-gradient(180deg, #FFFFFF 0%, #9B9B9B 100%);
  --cc-text-gradient-light: linear-gradient(180deg, #0F172A 0%, #475569 100%);
  
  /* Verde Esmeralda WhatsApp & Acento de Conversión */
  --cc-emerald: #10b981;
  --cc-emerald-light: #22c55e;
  --cc-emerald-glow: rgba(16, 185, 129, 0.35);
  
  /* Fórmulas de Radio Anidado (inner = outer - padding) */
  --cc-radius-outer-xl: 24px;
  --cc-radius-inner-lg: 16px;
  --cc-radius-inner-md: 10px;

  /* Paleta Corporativa Referencia (target_redesign_reference.png) */
  --cc-petrol-dark: #0c2226;
  --cc-petrol-surface: #102a2f;
  --cc-petrol-hover: rgba(255, 255, 255, 0.08);
  --cc-petrol-active: rgba(255, 255, 255, 0.14);
  --cc-coral: #ff5745;
  --cc-coral-hover: #e04433;
  --cc-coral-soft: #fff1ef;
  --cc-green-soft: #edfcf5;
  --cc-blue-soft: #eff6ff;
  --cc-amber-soft: #fffbeb;
}

/* Microinteracción Táctil Háptica con Respuesta Física */
.touch-spring {
  transition: transform 200ms var(--cc-ease-fluid), box-shadow 200ms var(--cc-ease-fluid) !important;
}
.touch-spring:active {
  transform: scale(0.98) translateY(1px) !important;
}

/* Efectos de Cristal Desacoplado (Floating Island Glass) */
.glass-pill {
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5) !important;
}
[data-theme-mode="light"] .glass-pill {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.1) !important;
}

/* Elevación Bento y Microinteracción Háptica en Catálogo Público */
.store-page .product-card {
  transition: transform 200ms var(--cc-ease-fluid, cubic-bezier(0.32, 0.72, 0, 1)),
              box-shadow 200ms var(--cc-ease-fluid, cubic-bezier(0.32, 0.72, 0, 1)),
              border-color 200ms ease !important;
}
.store-page .product-card:hover {
  transform: translateY(-3px) !important;
}
.store-page .product-card:active {
  transform: scale(0.98) translateY(1px) !important;
}