@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   SISTEMA DE DISEÑO: SLUSH // INFLATABLE STICKER UNIVERSE ON PASTEL PAPER
   Basado en la especificación DESIGN (2).md:
   - Lienzo de papel pastel (Sky Wash #dceeff, Lavender #e9ccff, Paper White #ffffff)
   - Contornos hand-cut negros de 1.5px (#000000) en todos los elementos interactivos
   - Geometría ultra-redondeada: 1600px en botones/pills y 24px-36px en tarjetas
   - Paleta de stickers: Carbon, Paper White, Sky Wash, Electric Blue, Mint Pop,
     Lavender, Ember, Sunburst y Voltage Violet.
   - BOTONES CON VIDA Y PERSONALIDAD: Física inflable con rebote elástico (spring),
     inclinaciones lúdicas al flotar (micro-tilt), efecto squish al presionar,
     destellos reflectantes de vinilo y micro-animaciones dinámicas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEYFRAMES DE VIDA Y FÍSICA INFLABLE PARA BOTONES Y STICKERS
   -------------------------------------------------------------------------- */
@keyframes slush-spring-bounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.08) translateY(-4px); }
  65% { transform: scale(0.97) translateY(1px); }
  100% { transform: scale(1.02) translateY(-2px); }
}

@keyframes slush-wiggle {
  0% { transform: rotate(0deg) translateY(-2px); }
  25% { transform: rotate(-3deg) translateY(-3px) scale(1.04); }
  50% { transform: rotate(3deg) translateY(-3px) scale(1.04); }
  75% { transform: rotate(-2deg) translateY(-2px) scale(1.03); }
  100% { transform: rotate(0deg) translateY(-2px) scale(1.03); }
}

@keyframes slush-pulse-glow {
  0%, 100% {
    box-shadow: 0 4px 0 #000000, 0 0 0 0 rgba(77, 162, 255, 0.6);
  }
  50% {
    box-shadow: 0 4px 0 #000000, 0 0 0 6px rgba(77, 162, 255, 0);
  }
}

@keyframes slush-sheen {
  0% { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(220%) skewX(-20deg); }
}

@keyframes slush-float-badge {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(1deg); }
}

@keyframes slush-float-rocket {
  0%, 100% {
    transform: translateY(0) rotate(16deg) scale(1);
  }
  50% {
    transform: translateY(-11px) rotate(21deg) scale(1.03);
  }
}

@keyframes slush-float-coin {
  0%, 100% {
    transform: translateY(0) rotate(-14deg) scale(1);
  }
  50% {
    transform: translateY(-8px) rotate(-8deg) scale(1.03);
  }
}

@keyframes slush-float-flower {
  0%, 100% {
    transform: translateY(0) rotate(-6deg) scale(1);
  }
  50% {
    transform: translateY(-10px) rotate(4deg) scale(1.04);
  }
}

@keyframes slush-float-planet {
  0%, 100% {
    transform: translateY(0) rotate(-10deg) scale(1);
  }
  50% {
    transform: translateY(-9px) rotate(-16deg) scale(1.03);
  }
}

@keyframes slush-float-sparkle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.15) rotate(18deg);
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   2. VARIABLES DE DISEÑO (TOTALMENTE AISLADAS EN [data-theme="slush"])
   -------------------------------------------------------------------------- */
[data-theme="slush"] {
  /* --- PALETA SLUSH (DESIGN.MD TOKENS) --- */
  --color-carbon: #000000;
  --color-paper-white: #ffffff;
  --color-sky-wash: #dceeff;
  --color-concrete-gray: #cccccc;
  --color-soft-mist: #f0f4f8;
  --color-electric-blue: #4da2ff;
  --color-mint-pop: #55db9c;
  --color-lavender: #e9ccff;
  --color-ember: #fb4903;
  --color-sunburst: #ffd731;
  --color-voltage-violet: #5c4ade;

  /* --- SUPERFICIES Y ROLES SEMÁNTICOS --- */
  --color-canvas: #dceeff;             /* Fondo papel pastel azul cielo */
  --color-canvas-alt: #eef6ff;         /* Banda clara suave */
  --color-paper: #ffffff;              /* Blanco puro de tarjetas y stickers */
  --color-surface-muted: #f4f8fc;      /* Gris azulado ultra-suave */
  --color-ink: #000000;                /* Negro tinta pura para textos y bordes */
  --color-ink-soft: #1a1a1a;
  --color-mid-gray: #4a5568;
  --color-border: #000000;             /* Borde sticker hand-cut de 1.5px */

  /* Neutralización de escalas nativas hacia la paleta Slush */
  --purple-50: #faf5ff !important;
  --purple-100: #e9ccff !important;
  --purple-200: #d8b4fe !important;
  --purple-500: #5c4ade !important;
  --purple-600: #5c4ade !important;
  --purple-700: #000000 !important;

  --blue-50: #eff6ff !important;
  --blue-100: #dceeff !important;
  --blue-200: #bfdbfe !important;
  --blue-400: #4da2ff !important;
  --blue-500: #4da2ff !important;
  --blue-600: #2563eb !important;

  --teal-50: #ecfdf5 !important;
  --teal-100: #d1fae5 !important;
  --teal-400: #55db9c !important;
  --teal-500: #55db9c !important;
  --teal-600: #059669 !important;

  /* --- TIPOGRAFÍA (OUTFIT DISPLAY & PLUS JAKARTA SANS) --- */
  --font-display: 'Outfit', 'Inter', -apple-system, sans-serif;
  --font-ui: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --font-sans: var(--font-ui) !important;
  --font-heading: var(--font-display) !important;
  --font-mono: var(--font-mono) !important;

  /* --- RADIOS DE BORDE (SISTEMA INFLABLE) --- */
  --radius-pills: 1600px;
  --radius-buttons: 1600px;
  --radius-cards: 26px;
  --radius-cards-elevated: 38px;
  --radius-inputs: 18px;
  --radius-badges: 1600px;

  --radius-sm: 12px !important;
  --radius-md: 18px !important;
  --radius-lg: 26px !important;
  --radius-xl: 38px !important;

  /* --- SOMBRAS TÁCTILES ESTILO STICKER (CRISP PHYSICAL OFFSET) --- */
  --shadow-sticker-xs: 0 2px 0 #000000 !important;
  --shadow-sticker-sm: 0 3px 0 #000000 !important;
  --shadow-sticker: 0 4px 0 #000000 !important;
  --shadow-sticker-lg: 0 6px 0 #000000 !important;
  --shadow-sticker-pressed: 0 1px 0 #000000 !important;

  --shadow-card: 0 5px 0 rgba(0, 0, 0, 0.12), 0 0 0 1.5px #000000 !important;
  --shadow-card-hover: 0 8px 0 rgba(0, 0, 0, 0.16), 0 0 0 1.5px #000000 !important;
  --shadow-dropdown: 0 8px 0 #000000, 0 0 0 1.5px #000000 !important;

  /* --- MAPEO DE VARIABLES NATIVAS --- */
  --background: var(--color-canvas) !important;
  --foreground: var(--color-ink) !important;
  --card: var(--color-paper) !important;
  --card-foreground: var(--color-ink) !important;
  --muted: var(--color-surface-muted) !important;
  --muted-foreground: var(--color-mid-gray) !important;
  --border: var(--color-border) !important;
  --input: var(--color-paper) !important;
  --ring: var(--color-electric-blue) !important;

  --primary: var(--color-carbon) !important;
  --primary-hover: var(--color-ink-soft) !important;
  --primary-foreground: #ffffff !important;

  --secondary: var(--color-paper) !important;
  --secondary-foreground: var(--color-ink) !important;
  --destructive: var(--color-ember) !important;
  --destructive-hover: #d83d00 !important;
  --success: var(--color-mint-pop) !important;
}

/* --------------------------------------------------------------------------
   3. LIENZO Y FONDO GLOBAL: COLLAGE DE STICKERS Y CINTAS INFLABLES 3D
   -------------------------------------------------------------------------- */
[data-theme="slush"] body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background-color: var(--color-canvas) !important;
  color: var(--color-ink) !important;
  font-family: var(--font-ui) !important;
  -webkit-font-smoothing: antialiased;
}

/* Lienzo fijo con letras escultóricas de agua, cintas 3D azul eléctrico, stickers ilustrados, washi tape y acuarelas pastel */
[data-theme="slush"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Tipografía escultórica de agua gigante en el fondo (SLUSH / COTIZADOR) */
    url("letras_escultoricas.svg"),
    /* Cintas inflables 3D azul eléctrico envolviendo los márgenes */
    url("cinta_inflable_azul.svg"),
    url("cinta_inflable_loop.svg"),
    /* Pegatinas técnicas: Barcode y Sello de Calidad */
    url("sticker_barcode.svg"),
    url("sticker_sello.svg"),
    /* Tiras de cinta washi tape translúcida pegadas al papel */
    url("sticker_tape.svg"),
    url("sticker_tape.svg"),
    /* Stickers y globos cómic fijos */
    url("sticker_burbuja_pop.svg"),
    url("sticker_billetera.svg"),
    url("sticker_check.svg"),
    url("sticker_estrellas.svg"),
    url("sticker_estrellas.svg"),
    /* Halos de color pastel ambiental de papel Slush */
    radial-gradient(circle at 10% 15%, rgba(233, 204, 255, 0.6) 0%, transparent 35%),
    radial-gradient(circle at 92% 75%, rgba(85, 219, 156, 0.38) 0%, transparent 38%),
    radial-gradient(circle at 86% 18%, rgba(77, 162, 255, 0.42) 0%, transparent 34%),
    radial-gradient(circle at 48% 6%, rgba(255, 215, 49, 0.28) 0%, transparent 30%),
    /* Micro-retícula técnica de papel milimetrado */
    linear-gradient(to right, rgba(0, 0, 0, 0.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.038) 1px, transparent 1px);
  background-size:
    1100px 550px,
    460px 620px,
    430px 520px,
    110px 62px,
    88px 88px,
    130px 48px,
    140px 52px,
    88px 66px,
    88px 76px,
    68px 68px,
    180px 180px,
    150px 150px,
    auto, auto, auto, auto,
    30px 30px,
    30px 30px;
  background-position:
    center top 140px,
    right -70px top 50px,
    left -80px bottom 10px,
    left 2.5% top 480px,
    right 2.8% top 320px,
    left 70px top 75px,
    right 80px top 680px,
    left 1.8% top 720px,
    right 2% top 760px,
    left 1.5% top 600px,
    right 3.5% top 420px,
    left 2.5% top 230px,
    center, center, center, center,
    0 0,
    0 0;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat,
    repeat,
    repeat;
  background-attachment: fixed;
}

[data-theme="slush"] .app-content {
  position: relative;
  z-index: 1;
  isolation: isolate;
  min-height: 100vh;
  background: transparent !important;
}

/* 1. Sticker flotante animado: Cohete espacial en el margen superior derecho */
[data-theme="slush"] #app-content::before {
  content: '';
  position: fixed;
  z-index: 2;
  top: 96px;
  right: 24px;
  width: 86px;
  height: 86px;
  pointer-events: none;
  background-image: url("sticker_cohete.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.2));
  animation: slush-float-rocket 8.5s ease-in-out infinite;
  will-change: transform;
}

/* 2. Sticker flotante animado: Moneda dorada en el margen izquierdo */
[data-theme="slush"] #app-content::after {
  content: '';
  position: fixed;
  z-index: 2;
  top: 360px;
  left: 20px;
  width: 74px;
  height: 74px;
  pointer-events: none;
  background-image: url("sticker_moneda.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.2));
  animation: slush-float-coin 7.6s ease-in-out infinite;
  will-change: transform;
}

/* 3. Sticker flotante animado: Flor inflable sonriente en el margen superior izquierdo */
[data-theme="slush"] .main-content::before {
  content: '';
  position: fixed;
  z-index: 2;
  top: 105px;
  left: 22px;
  width: 84px;
  height: 84px;
  pointer-events: none;
  background-image: url("sticker_flor_inflable.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.2));
  animation: slush-float-flower 9.2s ease-in-out infinite;
  will-change: transform;
}

/* 4. Sticker flotante animado: Planeta con anillo inflable en el margen derecho medio */
[data-theme="slush"] .main-content::after {
  content: '';
  position: fixed;
  z-index: 2;
  top: 560px;
  right: 20px;
  width: 90px;
  height: 72px;
  pointer-events: none;
  background-image: url("sticker_planeta.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.2));
  animation: slush-float-planet 10.8s ease-in-out infinite;
  will-change: transform;
}

@media (max-width: 1200px) {
  [data-theme="slush"] #app-content::before,
  [data-theme="slush"] #app-content::after,
  [data-theme="slush"] .main-content::before,
  [data-theme="slush"] .main-content::after {
    display: none !important;
  }
}

[data-theme="slush"] .main-content {
  width: calc(100% - 140px) !important;
  max-width: 1540px !important;
  margin: 0 auto !important;
  padding: 24px 20px 80px !important;
  position: relative !important;
  z-index: 3 !important;
}

/* Banner Marquee estilo Slush al pie del cotizador */
[data-theme="slush"] #cotizador-view::after {
  content: '★ SLUSH UNIVERSE ★ SEMCO COSMÉTICA ★ CONTROL DE COSTOS EN TIEMPO REAL ★ FÓRMULAS & MATERIAS PRIMAS ★ M.O.D. ★ 100% VERIFICADO ★' !important;
  display: block !important;
  margin: 48px auto 16px auto !important;
  max-width: 100% !important;
  background: var(--color-carbon) !important;
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 13px 26px !important;
  border-radius: var(--radius-pills) !important;
  border: 2px solid var(--color-carbon) !important;
  box-shadow: 0 5px 0 var(--color-carbon), 0 0 20px rgba(77, 162, 255, 0.25) !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   4. CABECERA PRINCIPAL (APP-HEADER) — ESTILO STICKER BAR
   -------------------------------------------------------------------------- */
[data-theme="slush"] .app-header {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 2px solid var(--color-carbon) !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08) !important;
  padding: 12px 28px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

[data-theme="slush"] .header-left h1,
[data-theme="slush"] .header-brand-title {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--color-carbon) !important;
  color: var(--color-carbon) !important;
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

[data-theme="slush"] .header-brand-title::before {
  content: '⚡' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background: var(--color-sunburst) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: 999px !important;
  font-size: 0.85rem !important;
  box-shadow: 0 2px 0 var(--color-carbon) !important;
}

/* Selector de Modos (Cotizador / Validador / Bandeja) */
[data-theme="slush"] .header-mode-switch {
  background: var(--color-paper-white) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  padding: 4px !important;
  gap: 4px !important;
  box-shadow: 0 3px 0 var(--color-carbon) !important;
}

/* ==========================================================================
   5. BOTONES CON VIDA Y PERSONALIDAD (EL NÚCLEO DEL PEDIDO)
   ========================================================================== */

/* Regla base de física elástica inflable para TODOS los botones */
[data-theme="slush"] button,
[data-theme="slush"] .btn,
[data-theme="slush"] .mode-btn,
[data-theme="slush"] .granel-toggle-btn,
[data-theme="slush"] .quick-nav-pill,
[data-theme="slush"] .btn-add-card,
[data-theme="slush"] .btn-header-save,
[data-theme="slush"] .btn-guardar,
[data-theme="slush"] .btn-add-row,
[data-theme="slush"] .btn-add-mo,
[data-theme="slush"] .btn-quick-action,
[data-theme="slush"] .toolbar-btn,
[data-theme="slush"] .header-more-btn,
[data-theme="slush"] .btn-theme-trigger {
  position: relative !important;
  cursor: pointer !important;
  font-family: var(--font-ui) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease !important;
  will-change: transform, box-shadow !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Efecto squish inflable al hacer click en cualquier botón */
[data-theme="slush"] button:active,
[data-theme="slush"] .btn:active,
[data-theme="slush"] .mode-btn:active,
[data-theme="slush"] .btn-add-card:active,
[data-theme="slush"] .btn-header-save:active,
[data-theme="slush"] .btn-guardar:active,
[data-theme="slush"] .btn-add-row:active,
[data-theme="slush"] .btn-add-mo:active {
  transform: translateY(3px) scale(0.96) !important;
  box-shadow: 0 1px 0 var(--color-carbon) !important;
  transition-duration: 0.08s !important;
}

/* --- A. BOTONES DE MODO (Cotizador / Validador / Bandeja) --- */
[data-theme="slush"] .mode-btn {
  border-radius: var(--radius-pills) !important;
  color: var(--color-carbon) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 6px 16px !important;
  border: 1.5px solid transparent !important;
  background: transparent !important;
}

[data-theme="slush"] .mode-btn:hover {
  background: var(--color-sky-wash) !important;
  border-color: var(--color-carbon) !important;
  color: var(--color-carbon) !important;
  transform: translateY(-2px) rotate(-1deg) scale(1.03) !important;
  box-shadow: 0 3px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .mode-btn.active {
  background: var(--color-carbon) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--color-carbon) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3) !important;
  transform: scale(1.02) !important;
}

[data-theme="slush"] .mode-btn.active:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 4px 0 var(--color-electric-blue) !important;
}

[data-theme="slush"] .badge-alerta-solicitudes {
  background: var(--color-ember) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  box-shadow: 0 2px 0 var(--color-carbon) !important;
  animation: slush-float-badge 2s ease-in-out infinite !important;
}

/* --- B. BOTÓN PRIMARIO DE ACCIÓN: GUARDAR / LAUNCH CTA --- */
/* Personalidad: Inflatable vinyl pill negro con destello reflectante y rebote elástico */
[data-theme="slush"] .btn-header-save,
[data-theme="slush"] .btn-guardar,
[data-theme="slush"] .btn-primary,
[data-theme="slush"] .swal2-confirm {
  background: var(--color-carbon) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  padding: 8px 20px !important;
  box-shadow: 0 4px 0 var(--color-carbon), inset 0 2px 0 rgba(255, 255, 255, 0.35) !important;
  overflow: hidden !important;
}

/* Destello sutil de vinilo inflable al pasar el cursor */
[data-theme="slush"] .btn-header-save::after,
[data-theme="slush"] .btn-guardar::after,
[data-theme="slush"] .btn-primary::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent) !important;
  transform: translateX(-150%) skewX(-25deg) !important;
  pointer-events: none !important;
}

[data-theme="slush"] .btn-header-save:hover,
[data-theme="slush"] .btn-guardar:hover,
[data-theme="slush"] .btn-primary:hover,
[data-theme="slush"] .swal2-confirm:hover {
  background: #111111 !important;
  color: var(--color-sunburst) !important;
  transform: translateY(-3px) scale(1.04) rotate(-0.8deg) !important;
  box-shadow: 0 6px 0 var(--color-carbon), 0 0 12px rgba(77, 162, 255, 0.35) !important;
}

[data-theme="slush"] .btn-header-save:hover::after,
[data-theme="slush"] .btn-guardar:hover::after,
[data-theme="slush"] .btn-primary:hover::after {
  animation: slush-sheen 0.85s ease-out !important;
}

/* --- C. BOTONES DE AGREGAR / CREAR (+ AGREGAR FORMULACIÓN, FILA, MOD) --- */
/* Personalidad: Sticker vivaz amarillo Sunburst o menta con icono rotatorio */
[data-theme="slush"] .btn-add-card {
  background: var(--color-sunburst) !important;
  color: var(--color-carbon) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  padding: 8px 18px !important;
  box-shadow: 0 4px 0 var(--color-carbon) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

[data-theme="slush"] .btn-add-card i,
[data-theme="slush"] .btn-add-card svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="slush"] .btn-add-card:hover {
  background: #ffe04d !important;
  color: var(--color-carbon) !important;
  transform: translateY(-3px) rotate(1.2deg) scale(1.04) !important;
  box-shadow: 0 6px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .btn-add-card:hover i,
[data-theme="slush"] .btn-add-card:hover svg {
  transform: rotate(90deg) scale(1.2) !important;
}

/* Botón Agregar Fila en la tabla */
[data-theme="slush"] .btn-add-row {
  background: var(--color-paper-white) !important;
  border: 1.5px dashed var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  color: var(--color-carbon) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08) !important;
}

[data-theme="slush"] .btn-add-row i,
[data-theme="slush"] .btn-add-row svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="slush"] .btn-add-row:hover {
  background: var(--color-mint-pop) !important;
  border-style: solid !important;
  color: var(--color-carbon) !important;
  transform: translateY(-2.5px) scale(1.02) !important;
  box-shadow: 0 5px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .btn-add-row:hover i,
[data-theme="slush"] .btn-add-row:hover svg {
  transform: rotate(90deg) scale(1.2) !important;
}

/* Botón Agregar MOD en el panel lateral */
[data-theme="slush"] .btn-add-mo,
[data-theme="slush"] .quick-nav-add-btn,
[data-theme="slush"] .btn-add-section-nav {
  background: var(--color-lavender) !important;
  color: var(--color-carbon) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  box-shadow: 0 3px 0 var(--color-carbon) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

[data-theme="slush"] .btn-add-mo:hover,
[data-theme="slush"] .quick-nav-add-btn:hover,
[data-theme="slush"] .btn-add-section-nav:hover {
  background: var(--color-electric-blue) !important;
  color: #ffffff !important;
  transform: translateY(-2.5px) rotate(-1.5deg) scale(1.04) !important;
  box-shadow: 0 5px 0 var(--color-carbon) !important;
}

/* --- D. BOTONES DE ACCIÓN SECUNDARIA / GHOST / HERRAMIENTAS --- */
/* Personalidad: Hand-cut white sticker con contorno negro nítido */
[data-theme="slush"] .header-more-btn,
[data-theme="slush"] .toolbar-btn,
[data-theme="slush"] .btn-secondary,
[data-theme="slush"] .btn-outline,
[data-theme="slush"] .btn-quick-action,
[data-theme="slush"] .swal2-cancel {
  background: var(--color-paper-white) !important;
  color: var(--color-carbon) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 7px 14px !important;
  box-shadow: 0 3px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .header-more-btn:hover,
[data-theme="slush"] .toolbar-btn:hover,
[data-theme="slush"] .btn-secondary:hover,
[data-theme="slush"] .btn-outline:hover,
[data-theme="slush"] .btn-quick-action:hover,
[data-theme="slush"] .swal2-cancel:hover {
  background: var(--color-sky-wash) !important;
  color: var(--color-carbon) !important;
  transform: translateY(-2.5px) rotate(1deg) scale(1.03) !important;
  box-shadow: 0 5px 0 var(--color-carbon) !important;
}

/* --- E. BOTONES DE PELIGRO / ELIMINAR --- */
/* Personalidad: Hot Ember #fb4903 sticker de alerta con wiggle warning */
[data-theme="slush"] .btn-remove-row,
[data-theme="slush"] .btn-delete-card,
[data-theme="slush"] .btn-danger {
  background: var(--color-paper-white) !important;
  color: var(--color-ember) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  box-shadow: 0 2.5px 0 var(--color-carbon) !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="slush"] .btn-remove-row:hover,
[data-theme="slush"] .btn-delete-card:hover,
[data-theme="slush"] .btn-danger:hover {
  background: var(--color-ember) !important;
  color: #ffffff !important;
  border-color: var(--color-carbon) !important;
  box-shadow: 0 4px 0 var(--color-carbon) !important;
  animation: slush-wiggle 0.4s ease-in-out !important;
  transform: translateY(-2px) scale(1.06) !important;
}

/* --- F. BOTÓN TRIGGER DEL SELECTOR DE TEMAS --- */
[data-theme="slush"] .btn-theme-trigger {
  background: var(--color-paper-white) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  box-shadow: 0 3px 0 var(--color-carbon) !important;
  padding: 6px 14px !important;
}

[data-theme="slush"] .btn-theme-trigger:hover {
  background: var(--color-lavender) !important;
  transform: translateY(-2px) rotate(-1deg) scale(1.03) !important;
  box-shadow: 0 5px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .theme-trigger-swatch {
  border: 1.5px solid var(--color-carbon) !important;
  box-shadow: 0 2px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .theme-trigger-name {
  font-family: var(--font-display) !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  color: var(--color-carbon) !important;
}

[data-theme="slush"] .theme-trigger-tag {
  background: var(--color-electric-blue) !important;
  color: #ffffff !important;
  border: 1px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.04em !important;
}

/* --- G. ACCIONES DE MANO DE OBRA Y HERRAMIENTAS LATERALES --- */
[data-theme="slush"] .btn-mo-action,
[data-theme="slush"] .btn-mo-predict,
[data-theme="slush"] .btn-mo-escalera,
[data-theme="slush"] .mo-action-btn {
  background: var(--color-paper-white) !important;
  color: var(--color-carbon) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  box-shadow: 0 3px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .btn-mo-action:hover,
[data-theme="slush"] .btn-mo-predict:hover,
[data-theme="slush"] .btn-mo-escalera:hover,
[data-theme="slush"] .mo-action-btn:hover {
  background: var(--color-sunburst) !important;
  color: var(--color-carbon) !important;
  transform: translateY(-2px) scale(1.04) rotate(1deg) !important;
  box-shadow: 0 4.5px 0 var(--color-carbon) !important;
}

/* --- H. BOTONES DE HERRAMIENTAS DE TARJETA Y FORMULACIÓN --- */
[data-theme="slush"] .btn-card-tool {
  background: var(--color-paper-white) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  color: var(--color-carbon) !important;
  box-shadow: 0 2px 0 var(--color-carbon) !important;
  padding: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="slush"] .btn-card-tool:hover {
  background: var(--color-sunburst) !important;
  transform: translateY(-2px) scale(1.1) rotate(4deg) !important;
  box-shadow: 0 4px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .btn-card-tool.btn-remove-card:hover {
  background: var(--color-ember) !important;
  color: #ffffff !important;
  animation: slush-wiggle 0.35s ease-in-out !important;
}

[data-theme="slush"] .btn-clear-table {
  background: var(--color-paper-white) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  color: var(--color-mid-gray) !important;
  box-shadow: 0 2.5px 0 var(--color-carbon) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 6px 14px !important;
}

[data-theme="slush"] .btn-clear-table:hover {
  background: var(--color-ember) !important;
  color: #ffffff !important;
  border-color: var(--color-carbon) !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 4.5px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .btn-cotizar-faltantes {
  background: var(--color-voltage-violet) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  box-shadow: 0 3px 0 var(--color-carbon) !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
}

[data-theme="slush"] .btn-cotizar-faltantes:hover {
  background: var(--color-electric-blue) !important;
  color: #ffffff !important;
  transform: translateY(-2.5px) scale(1.04) !important;
  box-shadow: 0 5px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .add-card-option {
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-inputs) !important;
  box-shadow: 0 3px 0 var(--color-carbon) !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="slush"] .add-card-option:hover {
  transform: translateX(4px) scale(1.02) !important;
  box-shadow: 0 5px 0 var(--color-carbon) !important;
}

/* --------------------------------------------------------------------------
   6. BARRA QUICK-NAV (STICKER STRIP HORIZONTAL)
   -------------------------------------------------------------------------- */
[data-theme="slush"] .quick-nav-bar,
[data-theme="slush"] .sections-nav-bar,
[data-theme="slush"] .sections-pill-bar {
  background: var(--color-paper-white) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-cards) !important;
  padding: 8px 16px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 4px 0 var(--color-carbon) !important;
  overflow-x: auto !important;
}

[data-theme="slush"] .quick-nav-label,
[data-theme="slush"] .sections-nav-label {
  color: var(--color-carbon) !important;
  font-family: var(--font-display) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

[data-theme="slush"] .quick-nav-pill,
[data-theme="slush"] .sections-pill {
  background: var(--color-surface-muted) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  color: var(--color-carbon) !important;
  padding: 5px 14px !important;
  box-shadow: 0 2.5px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .quick-nav-pill:hover,
[data-theme="slush"] .sections-pill:hover {
  background: var(--color-sunburst) !important;
  transform: translateY(-2px) rotate(-1deg) scale(1.03) !important;
  box-shadow: 0 4.5px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .quick-nav-pill-dot {
  background: var(--color-electric-blue) !important;
  border: 1px solid var(--color-carbon) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
}

[data-theme="slush"] .quick-nav-pill-val {
  background: var(--color-paper-white) !important;
  color: var(--color-carbon) !important;
  border: 1px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
}

/* --------------------------------------------------------------------------
   7. BARRA DE DATOS DEL PROYECTO (PROJECT INFO BAR)
   -------------------------------------------------------------------------- */
[data-theme="slush"] .project-info-bar {
  background: var(--color-paper-white) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-cards) !important;
  box-shadow: 0 5px 0 var(--color-carbon) !important;
  padding: 22px 26px !important;
  margin-bottom: 26px !important;
}

[data-theme="slush"] .project-info-pill {
  background: var(--color-voltage-violet) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  padding: 4px 12px !important;
  box-shadow: 0 2.5px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .project-info-item label {
  color: var(--color-carbon) !important;
  font-family: var(--font-display) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

[data-theme="slush"] .info-input,
[data-theme="slush"] .table-search-input,
[data-theme="slush"] .ref-search-input {
  background: var(--color-paper-white) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-inputs) !important;
  color: var(--color-carbon) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
}

[data-theme="slush"] .info-input:focus,
[data-theme="slush"] .table-search-input:focus,
[data-theme="slush"] .ref-search-input:focus {
  background: #ffffff !important;
  border-color: var(--color-electric-blue) !important;
  box-shadow: 0 0 0 3px rgba(77, 162, 255, 0.35), 0 2px 0 var(--color-carbon) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   8. TARJETAS DE SECCIÓN (GRANEL, ETIQUETADO, PRODUCTO TERMINADO)
   -------------------------------------------------------------------------- */
[data-theme="slush"] .granel-card {
  background: var(--color-paper-white) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-cards) !important;
  box-shadow: 0 6px 0 var(--color-carbon) !important;
  padding: 24px 26px !important;
  margin-bottom: 28px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

[data-theme="slush"] .granel-card:hover {
  box-shadow: 0 8px 0 var(--color-carbon) !important;
}

/* Bordes superiores o identificadores de tipo con la paleta de stickers */
[data-theme="slush"] .granel-card.card-blue {
  border-top: 5px solid var(--color-electric-blue) !important;
}

[data-theme="slush"] .granel-card.card-teal {
  border-top: 5px solid var(--color-mint-pop) !important;
}

/* Cabecera de la Sección */
[data-theme="slush"] .granel-header {
  border-bottom: 1.5px solid var(--color-carbon) !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
}

/* Badges de Sección: Stickers físicos con contorno */
[data-theme="slush"] .section-type-badge,
[data-theme="slush"] .section-type-badge.badge-pill-purple {
  background: var(--color-lavender) !important;
  color: var(--color-carbon) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  font-family: var(--font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  padding: 4px 12px !important;
  box-shadow: 0 2px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .section-type-badge.badge-pill-blue {
  background: var(--color-electric-blue) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--color-carbon) !important;
  box-shadow: 0 2px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .section-type-badge.badge-pill-teal {
  background: var(--color-mint-pop) !important;
  color: var(--color-carbon) !important;
  border: 1.5px solid var(--color-carbon) !important;
  box-shadow: 0 2px 0 var(--color-carbon) !important;
}

/* Título Editable */
[data-theme="slush"] .granel-label {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--color-carbon) !important;
  border-radius: var(--radius-inputs) !important;
  padding: 4px 8px !important;
}

[data-theme="slush"] .granel-label:hover {
  background: var(--color-sky-wash) !important;
}

/* Segmented Toggle (Etiquetado / Impresión) */
[data-theme="slush"] .granel-toggle {
  background: var(--color-surface-muted) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  padding: 2px !important;
  box-shadow: 0 2px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .granel-toggle-btn {
  border-radius: var(--radius-pills) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--color-mid-gray) !important;
  padding: 4px 12px !important;
  border: none !important;
  background: transparent !important;
}

[data-theme="slush"] .granel-toggle-btn.active {
  background: var(--color-carbon) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25) !important;
}

/* Chips colapsados */
[data-theme="slush"] .collapsed-chip {
  background: var(--color-paper-white) !important;
  color: var(--color-carbon) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  box-shadow: 0 2px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .collapsed-chip-highlight {
  background: var(--color-sunburst) !important;
  font-family: var(--font-mono) !important;
}

/* --------------------------------------------------------------------------
   9. TABLA DE FORMULACIÓN
   -------------------------------------------------------------------------- */
[data-theme="slush"] .formulacion-table-wrap {
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: var(--color-paper-white) !important;
  margin-bottom: 16px !important;
  box-shadow: 0 3px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .formulacion-table thead th {
  background: var(--color-soft-mist) !important;
  border-bottom: 1.5px solid var(--color-carbon) !important;
  color: var(--color-carbon) !important;
  font-family: var(--font-display) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 12px !important;
}

[data-theme="slush"] .formulacion-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
  transition: background 0.15s ease !important;
}

[data-theme="slush"] .formulacion-table tbody tr:hover {
  background: #f7faff !important;
}

[data-theme="slush"] .formulacion-table td {
  padding: 8px 10px !important;
  color: var(--color-carbon) !important;
  font-size: 0.85rem !important;
}

/* Inputs de celda como mini-stickers */
[data-theme="slush"] .cell-input,
[data-theme="slush"] .input-field,
[data-theme="slush"] .input-number {
  background: var(--color-paper-white) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-inputs) !important;
  color: var(--color-carbon) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s ease !important;
}

[data-theme="slush"] .cell-input:focus,
[data-theme="slush"] .input-field:focus,
[data-theme="slush"] .input-number:focus {
  background: #ffffff !important;
  border-color: var(--color-electric-blue) !important;
  box-shadow: 0 0 0 2.5px rgba(77, 162, 255, 0.35) !important;
  outline: none !important;
}

[data-theme="slush"] .cell-total {
  font-family: var(--font-mono) !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  color: var(--color-carbon) !important;
}

/* --------------------------------------------------------------------------
   10. PANEL LATERAL: MANO DE OBRA Y RESUMEN FINANCIERO
   -------------------------------------------------------------------------- */
[data-theme="slush"] .side-panel-card {
  background: var(--color-paper-white) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-cards) !important;
  box-shadow: 0 6px 0 var(--color-carbon) !important;
  padding: 24px !important;
}

[data-theme="slush"] .side-panel-section {
  border-bottom: 1.5px dashed rgba(0, 0, 0, 0.2) !important;
  padding-bottom: 18px !important;
  margin-bottom: 18px !important;
}

[data-theme="slush"] .side-section-title {
  color: var(--color-carbon) !important;
  font-family: var(--font-display) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

[data-theme="slush"] .side-mo-badge {
  background: var(--color-mint-pop) !important;
  color: var(--color-carbon) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  padding: 2px 10px !important;
  box-shadow: 0 2px 0 var(--color-carbon) !important;
}

/* Filas Financieras */
[data-theme="slush"] .fin-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 0 !important;
}

[data-theme="slush"] .fin-label {
  color: var(--color-mid-gray) !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
}

[data-theme="slush"] .fin-val {
  color: var(--color-carbon) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

[data-theme="slush"] .fin-divider {
  background: var(--color-carbon) !important;
  height: 1.5px !important;
  margin: 8px 0 !important;
}

[data-theme="slush"] .fin-val-highlight {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: var(--color-voltage-violet) !important;
}

/* Margen Comercial Selector Toggle */
[data-theme="slush"] .pt-calc-mode-toggle {
  background: var(--color-surface-muted) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  padding: 2px !important;
  box-shadow: 0 2px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .pt-mode-btn {
  border-radius: var(--radius-pills) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: var(--color-mid-gray) !important;
  padding: 3px 10px !important;
  border: none !important;
  background: transparent !important;
}

[data-theme="slush"] .pt-mode-btn.active {
  background: var(--color-carbon) !important;
  color: #ffffff !important;
  box-shadow: 0 1.5px 0 rgba(0, 0, 0, 0.25) !important;
}

/* --------------------------------------------------------------------------
   11. TARJETA KPI HIGHLIGHT DUAL (INFLATABLE SCOREBOARD)
   -------------------------------------------------------------------------- */
[data-theme="slush"] .side-kpi-card,
[data-theme="slush"] .kpi-highlight {
  background: var(--color-sky-wash) !important;
  border: 2px solid var(--color-carbon) !important;
  border-radius: var(--radius-cards) !important;
  box-shadow: 0 6px 0 var(--color-carbon) !important;
  padding: 18px 22px !important;
  position: relative !important;
  overflow: hidden !important;
}

[data-theme="slush"] .kpi-label {
  text-align: center !important;
  color: var(--color-carbon) !important;
  font-family: var(--font-display) !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 12px !important;
}

[data-theme="slush"] .kpi-value {
  color: var(--color-carbon) !important;
  font-family: var(--font-display) !important;
  font-size: 1.85rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
}

[data-theme="slush"] .kpi-dual-divider {
  background: var(--color-carbon) !important;
  width: 2px !important;
  height: 42px !important;
}

/* --------------------------------------------------------------------------
   12. DROPDOWNS Y MENÚS FLOTANTES
   -------------------------------------------------------------------------- */
[data-theme="slush"] .header-dropdown-menu {
  background: var(--color-paper-white) !important;
  border: 2px solid var(--color-carbon) !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 0 var(--color-carbon) !important;
  padding: 14px !important;
  width: 350px !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 90px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

[data-theme="slush"] .dropdown-group-title {
  color: var(--color-carbon) !important;
  font-family: var(--font-display) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

[data-theme="slush"] .dropdown-action-btn {
  border-radius: var(--radius-inputs) !important;
  border: 1.5px solid transparent !important;
  padding: 8px 12px !important;
}

[data-theme="slush"] .dropdown-action-btn:hover {
  background: var(--color-sky-wash) !important;
  border-color: var(--color-carbon) !important;
  transform: translateX(4px) !important;
}

[data-theme="slush"] .dropdown-theme-section {
  margin-top: 4px !important;
}

[data-theme="slush"] .theme-options-grid {
  background: #f1f8fe !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: 16px !important;
  padding: 8px !important;
  gap: 7px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="slush"] .theme-card-mini {
  background: var(--color-paper-white) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 0 var(--color-carbon) !important;
  padding: 5px 3px 5px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

[data-theme="slush"] .theme-card-mini:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 4px 0 var(--color-carbon) !important;
  border-color: var(--color-carbon) !important;
}

[data-theme="slush"] .theme-card-mini.active {
  background: #dbeafe !important;
  border-color: var(--color-carbon) !important;
  box-shadow: 0 3px 0 var(--color-carbon) !important;
}

[data-theme="slush"] .theme-card-mini.active::after {
  background: var(--color-carbon) !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  width: 13px !important;
  height: 13px !important;
  top: 2px !important;
  right: 2px !important;
}

[data-theme="slush"] .theme-card-mini .mini-title {
  color: var(--color-carbon) !important;
  font-family: var(--font-display) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

[data-theme="slush"] .theme-card-mini .mini-tag {
  color: #475569 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.56rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

[data-theme="slush"] .mini-swatch {
  border-radius: 6px !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  height: 22px !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   13. MODALES Y SWEETALERT2
   -------------------------------------------------------------------------- */
[data-theme="slush"] .swal2-popup {
  background: var(--color-paper-white) !important;
  border: 2px solid var(--color-carbon) !important;
  border-radius: var(--radius-cards-elevated) !important;
  box-shadow: 0 10px 0 var(--color-carbon) !important;
  font-family: var(--font-ui) !important;
  padding: 24px !important;
}

[data-theme="slush"] .swal2-title {
  color: var(--color-carbon) !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 1.5rem !important;
}

/* --------------------------------------------------------------------------
   14. COMPONENTES EXTRA: SOLICITUDES Y EXCLUSIVIDADES
   -------------------------------------------------------------------------- */
[data-theme="slush"] .solicitud-card,
[data-theme="slush"] .exclusividad-card {
  background: var(--color-paper-white) !important;
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-cards) !important;
  box-shadow: 0 5px 0 var(--color-carbon) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

[data-theme="slush"] .badge-estado {
  border: 1.5px solid var(--color-carbon) !important;
  border-radius: var(--radius-pills) !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  box-shadow: 0 2px 0 var(--color-carbon) !important;
}