@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Patrick+Hand&display=swap');

/* ========================================================================== 
   SISTEMA DE DISEÑO: JARDÍN ILUSTRADO
   Libro de naturaleza dibujado a mano: cálido, juguetón y legible.
   ========================================================================== */
[data-theme="natural"] {
  --garden-paper: #fff9ec;
  --garden-surface: #fffdf7;
  --garden-ink: #2f4035;
  --garden-leaf: #5d895d;
  --garden-leaf-deep: #426b49;
  --garden-sky: #80aebf;
  --garden-sun: #edc560;
  --garden-flower: #d98e9b;
  --garden-bark: #795a43;
  --garden-line: rgba(72, 111, 75, 0.3);
  --garden-line-soft: rgba(72, 111, 75, 0.17);
  --garden-muted: #657267;
  --garden-danger: #b54c4e;
  --garden-success: #4e8059;
  --garden-warning: #936515;
  --garden-heading: 'Patrick Hand', 'Comic Sans MS', cursive;
  --garden-body: 'Nunito', 'Trebuchet MS', sans-serif;
  --garden-data: 'JetBrains Mono', 'SF Mono', monospace;
  --garden-shadow: 2px 3px 0 rgba(47, 64, 53, 0.14);
  --garden-shadow-raised: 3px 4px 0 rgba(47, 64, 53, 0.18);

  --background: var(--garden-paper) !important;
  --foreground: var(--garden-ink) !important;
  --card: var(--garden-surface) !important;
  --card-foreground: var(--garden-ink) !important;
  --muted: #f1f4e7 !important;
  --muted-foreground: var(--garden-muted) !important;
  --border: var(--garden-line) !important;
  --input: var(--garden-line) !important;
  --ring: var(--garden-leaf) !important;
  --primary: var(--garden-leaf) !important;
  --primary-hover: var(--garden-leaf-deep) !important;
  --primary-foreground: #fffdf7 !important;
  --secondary: #eaf1e1 !important;
  --secondary-foreground: var(--garden-ink) !important;
  --destructive: var(--garden-danger) !important;
  --destructive-hover: #963b40 !important;
  --success: var(--garden-success) !important;

  --font-sans: var(--garden-body) !important;
  --font-heading: var(--garden-heading) !important;
  --font-mono: var(--garden-data) !important;
  --radius-sm: 7px 5px 8px 6px !important;
  --radius-md: 11px 8px 12px 9px !important;
  --radius-lg: 16px 12px 15px 11px !important;
}

/* Papel rayado con cielo, sol, nube y pequeños dibujos botánicos en los bordes. */
[data-theme="natural"] body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--garden-paper) !important;
  color: var(--garden-ink) !important;
  font-family: var(--garden-body) !important;
}

[data-theme="natural"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--garden-paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='440' viewBox='0 0 560 440' fill='none' opacity='.2' stroke='%235D895D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='484' cy='67' r='23' fill='%23EDC560' fill-opacity='.55' stroke='%23C99E43'/%3E%3Cpath d='M484 29v-11M484 116v-11M446 67h-11M533 67h-11M457 40l-8-8M519 102l-8-8M511 40l8-8M449 102l8-8' stroke='%23C99E43'/%3E%3Cpath d='M54 87c8-17 35-20 48-5 17-10 39 1 39 18 18 7 13 30-6 31H48c-21-1-23-28-4-34 1-4 5-8 10-10Z' fill='%23FFFFFF' fill-opacity='.72' stroke='%237FAEBD'/%3E%3Cpath d='M16 420c32-42 48-89 60-136 11-43 16-75 20-115M18 372c-8-17-18-24-28-28M45 321c-19-13-30-13-43-8M69 273c-2-19 4-31 17-41M83 235c-17-10-25-22-28-37' stroke='%235D895D'/%3E%3Cpath d='M8 341c-13-17-27-13-31-3 8 15 19 19 31 3ZM20 363c13-19 28-17 34-7-5 16-17 22-34 7ZM37 306c-7-19-21-22-29-13 3 17 14 25 29 13ZM60 285c-17-12-30-5-31 7 12 12 25 12 31-7ZM78 231c-1-20 11-29 21-24 2 16-5 27-21 24Z' fill='%2395B77D' fill-opacity='.4'/%3E%3Cpath d='M534 423c-18-32-28-66-34-102M519 359c15-15 29-16 37-7-6 16-18 21-37 7ZM510 337c-17-12-31-8-35 4 10 14 23 16 35-4Z' stroke='%235D895D' fill='%2395B77D' fill-opacity='.42'/%3E%3Cpath d='M466 402c-12-13-32-8-32 7 10 4 21 3 32-7ZM466 402c12-13 32-8 32 7-10 4-21 3-32-7ZM466 402v20M454 415l-9 7M478 415l9 7' stroke='%23D98E9B'/%3E%3Ccircle cx='466' cy='402' r='3' fill='%23EDC560' stroke='%23C99E43'/%3E%3Cpath d='M236 405c12-18 25-18 35-2-12 7-24 7-35 2ZM272 405c10-18 23-18 35-2-11 7-23 7-35 2Z' stroke='%235D895D' fill='%2395B77D' fill-opacity='.35'/%3E%3C/svg%3E"),
    linear-gradient(to right, transparent 55px, rgba(217, 142, 155, 0.2) 55px, rgba(217, 142, 155, 0.2) 57px, transparent 57px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(128, 174, 191, 0.16) 31px 32px),
    radial-gradient(ellipse at 80% 0%, rgba(237, 197, 96, 0.13), transparent 38%),
    linear-gradient(180deg, #f4f8ec 0%, var(--garden-paper) 72%, #edf2df 100%);
  background-size: 560px 440px, 100% 100%, 100% 32px, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, repeat, no-repeat, no-repeat;
  background-attachment: fixed;
}

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

/* Mariposa y pajarito cruzan la cotización en primer plano, sin capturar clics. */
[data-theme="natural"] #app-content::before,
[data-theme="natural"] #app-content::after {
  content: '';
  position: fixed;
  z-index: 20;
  left: 0;
  width: 44px;
  height: 32px;
  opacity: 0;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  will-change: transform, opacity;
}

[data-theme="natural"] #app-content::before {
  top: 17vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36' fill='none' stroke='%23426B49' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21c12-3 19-13 27-8 5 3 7 6 10 7 8-10 17-9 22-3-8 0-13 4-20 11-7-4-12-8-18-8-6 0-12 3-21 1Z' fill='%235D895D' fill-opacity='.84'/%3E%3Cpath d='M28 13c-3-5-7-6-10-5M40 20c3-4 7-6 11-6' stroke='%23EDC560'/%3E%3C/svg%3E");
  animation: natural-bird-flight 68s ease-in-out 5s infinite;
}

[data-theme="natural"] #app-content::after {
  top: 43vh;
  width: 38px;
  height: 31px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 44' fill='none' stroke='%235D895D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 21C14 1 2 8 8 23c5 8 13 7 20-2ZM28 21C42 1 54 8 48 23c-5 8-13 7-20-2Z' fill='%23D98E9B' fill-opacity='.84'/%3E%3Cpath d='M28 20v18M26 9c-5-7-10-6-12-3M30 9c5-7 10-6 12-3'/%3E%3Ccircle cx='28' cy='21' r='3' fill='%23EDC560' stroke='%23C99E43'/%3E%3C/svg%3E");
  animation: natural-butterfly-flight 49s ease-in-out 19s infinite;
}

[data-theme="natural"] .main-content,
[data-theme="natural"] #cotizador-view,
[data-theme="natural"] #exclusividades-view,
[data-theme="natural"] .content-section {
  background: transparent !important;
}

[data-theme="natural"] .main-content {
  width: calc(100% - 32px) !important;
  max-width: 1660px !important;
  padding: 18px 12px !important;
  margin: 0 auto !important;
}

/* Cabecera de libro ilustrado. */
/* Cabecera de libro ilustrado: borde festoneado de papel artesanal y pespunte botánico */
[data-theme="natural"] .app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 250, 238, 0.95) !important;
  border-bottom: 2px dashed rgba(93, 137, 93, 0.55) !important;
  box-shadow: 0 4px 16px rgba(55, 75, 52, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 10px 22px 14px 22px !important;
  gap: 12px !important;
}

/* Remate festoneado sutil de papel artesanal rasgado */
[data-theme="natural"] .app-header::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 5px;
  background: radial-gradient(circle at 10px -2px, transparent 8px, rgba(93, 137, 93, 0.35) 9px, transparent 10px);
  background-size: 20px 6px;
  pointer-events: none;
}

[data-theme="natural"] .header-left h1,
[data-theme="natural"] h1 {
  color: var(--garden-leaf-deep) !important;
  -webkit-text-fill-color: var(--garden-leaf-deep) !important;
  background: none !important;
  font-family: var(--garden-heading) !important;
  font-size: 1.95rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  text-shadow: 1px 1px 0 rgba(237, 197, 96, 0.42) !important;
  text-transform: none !important;
}

[data-theme="natural"] .header-left h1::after {
  content: 'JARDÍN DE IDEAS';
  display: inline-flex;
  margin-left: 10px;
  padding: 3px 9px;
  border: 1.5px dashed rgba(93, 137, 93, 0.65);
  border-radius: 12px 3px 12px 3px;
  background: rgba(237, 197, 96, 0.22);
  color: var(--garden-leaf-deep);
  font-family: var(--garden-body);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-shadow: none;
  vertical-align: middle;
}

/* Conmutador de Modo: Vaina Botánica de Doble Hoja */
[data-theme="natural"] .header-mode-switch {
  background: rgba(228, 239, 221, 0.95) !important;
  border: 1.5px solid rgba(93, 137, 93, 0.48) !important;
  border-radius: 20px 6px 20px 6px !important;
  padding: 3px 5px !important;
  gap: 4px !important;
  box-shadow: inset 0 1px 3px rgba(47, 64, 53, 0.1) !important;
}

[data-theme="natural"] .mode-btn {
  color: var(--garden-muted) !important;
  border: 1px solid transparent !important;
  border-radius: 16px 4px 16px 4px !important;
  font-family: var(--garden-body) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 6px 15px !important;
  text-transform: none !important;
  transition: all 0.2s ease !important;
}

[data-theme="natural"] .mode-btn:hover {
  background: rgba(93, 137, 93, 0.12) !important;
  color: var(--garden-leaf-deep) !important;
}

[data-theme="natural"] .mode-btn.active {
  background: var(--garden-leaf) !important;
  border-color: var(--garden-leaf-deep) !important;
  box-shadow: 2px 2px 0 rgba(47, 64, 53, 0.2) !important;
  color: #fffdf7 !important;
}

[data-theme="natural"] .mode-btn.active svg {
  stroke: #fffdf7 !important;
}

[data-theme="natural"] .header-right {
  gap: 8px !important;
}

[data-theme="natural"] .header-separator {
  background: none !important;
  border-left: 2px dotted rgba(93, 137, 93, 0.45) !important;
  height: 24px !important;
  margin: 0 4px !important;
}

/* Botones: Silueta de Etiqueta de Vivero (Asimétrica 16px 4px) */
[data-theme="natural"] .btn-primary,
[data-theme="natural"] #btn-guardar {
  background: linear-gradient(135deg, #f7d268, #e5b842) !important;
  border: 1.5px solid #c89c32 !important;
  border-radius: 18px 4px 18px 4px !important;
  box-shadow: 2px 3px 0 rgba(92, 75, 38, 0.22) !important;
  color: var(--garden-ink) !important;
  font-family: var(--garden-body) !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  text-transform: none !important;
  min-height: 38px;
  padding: 8px 18px !important;
  transition: all 0.18s ease !important;
}

[data-theme="natural"] .btn-primary:hover,
[data-theme="natural"] #btn-guardar:hover {
  background: #fae188 !important;
  border-color: #ba8c28 !important;
  box-shadow: 2px 4px 0 rgba(92, 75, 38, 0.26) !important;
  transform: translateY(-1px) !important;
}

[data-theme="natural"] .btn-add-card,
[data-theme="natural"] .btn-webhook-action {
  background: rgba(234, 242, 226, 0.95) !important;
  border: 1.5px solid rgba(93, 137, 93, 0.52) !important;
  border-radius: 16px 4px 16px 4px !important;
  box-shadow: 1px 2px 0 rgba(55, 75, 52, 0.12) !important;
  color: var(--garden-leaf-deep) !important;
  font-family: var(--garden-body) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  min-height: 38px;
  padding: 8px 16px !important;
  transition: all 0.18s ease !important;
}

[data-theme="natural"] .btn-add-card:hover,
[data-theme="natural"] .btn-webhook-action:hover {
  background: #e3eed9 !important;
  border-color: var(--garden-leaf) !important;
  box-shadow: 2px 3px 0 rgba(55, 75, 52, 0.18) !important;
  transform: translateY(-1px) !important;
}

[data-theme="natural"] .btn-webhook-action.status-success {
  background: rgba(78, 128, 89, 0.14) !important;
  border-color: var(--garden-success) !important;
  color: var(--garden-leaf-deep) !important;
  box-shadow: none !important;
}

[data-theme="natural"] .btn-webhook-action.status-error {
  background: rgba(181, 76, 78, 0.12) !important;
  border-color: var(--garden-danger) !important;
  color: var(--garden-danger) !important;
  box-shadow: none !important;
}

/* Toolbar Botánica */
[data-theme="natural"] .header-toolbar {
  background: rgba(234, 242, 226, 0.88) !important;
  border: 1.5px solid var(--garden-line-soft) !important;
  border-radius: 18px 6px 18px 6px !important;
  padding: 3px 5px !important;
}

[data-theme="natural"] .btn-ghost,
[data-theme="natural"] .btn-outline,
[data-theme="natural"] .toolbar-btn {
  background: rgba(255, 253, 247, 0.85) !important;
  border: 1px solid var(--garden-line) !important;
  border-radius: 15px 4px 15px 4px !important;
  box-shadow: 1px 1px 0 rgba(55, 75, 52, 0.08) !important;
  color: var(--garden-ink) !important;
  font-family: var(--garden-body) !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
  text-transform: none !important;
  transition: all 0.18s ease !important;
}

[data-theme="natural"] .btn-ghost:hover,
[data-theme="natural"] .btn-outline:hover,
[data-theme="natural"] .toolbar-btn:hover {
  background: #eff5e7 !important;
  border-color: var(--garden-leaf) !important;
  color: var(--garden-leaf-deep) !important;
}

[data-theme="natural"] .theme-selector-box {
  background: rgba(255, 253, 247, 0.95) !important;
  border: 1.5px solid rgba(93, 137, 93, 0.48) !important;
  border-radius: 16px 5px 16px 5px !important;
  box-shadow: 1px 2px 0 rgba(55, 75, 52, 0.1) !important;
  padding: 4px 12px !important;
}

[data-theme="natural"] .theme-selector-box:hover {
  border-color: var(--garden-leaf) !important;
  box-shadow: var(--garden-shadow) !important;
}

[data-theme="natural"] .theme-selector-box .theme-icon,
[data-theme="natural"] .theme-selector-box .theme-chevron {
  color: var(--garden-leaf) !important;
}

[data-theme="natural"] .theme-select-native,
[data-theme="natural"] .theme-select-native option {
  background: var(--garden-surface) !important;
  color: var(--garden-ink) !important;
  font-family: var(--garden-body) !important;
}

/* Placa del proyecto con una línea de tallo dibujada. */
[data-theme="natural"] .project-info-bar {
  background: rgba(255, 253, 247, 0.94) !important;
  border: 1px solid rgba(72, 111, 75, 0.36) !important;
  border-radius: 12px 9px 13px 10px !important;
  box-shadow: var(--garden-shadow) !important;
  padding: 13px 17px !important;
  margin-bottom: 18px !important;
  overflow: visible !important;
}

[data-theme="natural"] .project-info-bar::before {
  display: none !important;
}

[data-theme="natural"] .project-info-bar::after {
  content: '✿';
  position: absolute;
  top: 7px;
  right: 15px;
  color: rgba(217, 142, 155, 0.68);
  font-family: var(--garden-heading);
  font-size: 1.15rem;
  pointer-events: none;
}

[data-theme="natural"] .project-info-bar > * {
  position: relative;
  z-index: 1;
}

[data-theme="natural"] .project-info-header {
  border-bottom: 1px dashed var(--garden-line-soft) !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
}

[data-theme="natural"] .project-info-pill {
  background: rgba(237, 197, 96, 0.24) !important;
  border: 1px solid rgba(201, 158, 67, 0.5) !important;
  border-radius: 7px 5px 8px 6px !important;
  box-shadow: none !important;
  color: var(--garden-bark) !important;
  font-family: var(--garden-heading) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

[data-theme="natural"] .project-info-desc {
  color: var(--garden-muted) !important;
  font-family: var(--garden-body) !important;
}

[data-theme="natural"] .project-info-grid {
  gap: 11px 13px !important;
}

[data-theme="natural"] .project-info-item label,
[data-theme="natural"] label {
  color: var(--garden-leaf-deep) !important;
  font-family: var(--garden-body) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.045em !important;
}

[data-theme="natural"] .project-info-item label svg,
[data-theme="natural"] label svg {
  color: var(--garden-leaf) !important;
  stroke: var(--garden-leaf) !important;
}

/* Secciones como fichas de campo con acentos por familia. */
[data-theme="natural"] .granel-card {
  --garden-card-accent: var(--garden-leaf);
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  background: rgba(255, 253, 247, 0.96) !important;
  border: 1.5px solid rgba(72, 111, 75, 0.38) !important;
  border-left: 4px solid var(--garden-card-accent) !important;
  border-radius: 14px 10px 15px 11px !important;
  box-shadow: var(--garden-shadow) !important;
  padding: 23px 16px 15px !important;
  margin: 17px 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

[data-theme="natural"] .granel-card.card-purple {
  --garden-card-accent: #669268;
}

[data-theme="natural"] .granel-card.card-blue {
  --garden-card-accent: #78aebf;
}

[data-theme="natural"] .granel-card.card-teal {
  --garden-card-accent: #d2aa50;
}

[data-theme="natural"] .granel-card:hover {
  border-color: var(--garden-card-accent) !important;
  box-shadow: var(--garden-shadow-raised) !important;
  transform: translateY(-2px) rotate(-0.05deg) !important;
}

[data-theme="natural"] .granel-label {
  background: var(--garden-card-accent) !important;
  border: 1px solid var(--garden-leaf-deep) !important;
  border-radius: 8px 5px 8px 6px !important;
  box-shadow: 1px 2px 0 rgba(47, 64, 53, 0.18) !important;
  color: #fffdf7 !important;
  font-family: var(--garden-heading) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 4px 12px !important;
  text-transform: none !important;
}

/* Distinciones de pestañas acordes a la temática Natural (colores botánicos claros) */
[data-theme="natural"] .granel-card.card-purple .granel-label {
  background: rgba(72, 111, 75, 0.9) !important;
  border-color: #233b26 !important;
  color: #fffdf7 !important;
}

[data-theme="natural"] .granel-card.card-blue .granel-label {
  background: rgba(93, 137, 93, 0.9) !important;
  border-color: #2e5231 !important;
  color: #fffdf7 !important;
}

[data-theme="natural"] .granel-card.card-teal .granel-label {
  background: rgba(184, 115, 51, 0.9) !important;
  border-color: #613612 !important;
  color: #fffdf7 !important;
}

[data-theme="natural"] .granel-card .card-header,
[data-theme="natural"] .granel-card .mo-card-header {
  border-bottom: 1px dashed var(--garden-line-soft) !important;
}

[data-theme="natural"] .card-title,
[data-theme="natural"] .summary-title {
  color: var(--garden-leaf-deep) !important;
  font-family: var(--garden-heading) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

[data-theme="natural"] .section-badge,
[data-theme="natural"] .badge {
  background: rgba(237, 197, 96, 0.2) !important;
  border: 1px solid rgba(201, 158, 67, 0.42) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  color: var(--garden-bark) !important;
}

/* Tabla de ingredientes: líneas botánicas finas y buena lectura de cifras. */
[data-theme="natural"] .formulacion-layout,
[data-theme="natural"] .formulacion-layout > div,
[data-theme="natural"] .unified-right-grid,
[data-theme="natural"] .unified-right-grid > * {
  min-width: 0 !important;
}

[data-theme="natural"] .formulacion-layout {
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.9fr) !important;
  align-items: start !important;
  gap: 14px !important;
  width: 100% !important;
}

[data-theme="natural"] .table-container {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid var(--garden-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 253, 247, 0.92) !important;
  box-shadow: none !important;
}

[data-theme="natural"] .formulacion-table {
  font-family: var(--garden-data) !important;
}

[data-theme="natural"] .formulacion-table th,
[data-theme="natural"] .exc-table th {
  background: #e4eedb !important;
  border-bottom: 1.5px solid var(--garden-leaf) !important;
  border-right: 1px solid rgba(72, 111, 75, 0.18) !important;
  color: var(--garden-leaf-deep) !important;
  font-family: var(--garden-body) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.045em !important;
  padding: 8px 9px !important;
  text-transform: uppercase !important;
}

[data-theme="natural"] .formulacion-table td,
[data-theme="natural"] .exc-table td {
  background: rgba(255, 253, 247, 0.96) !important;
  border-bottom: 1px dashed rgba(72, 111, 75, 0.18) !important;
  border-right: 1px solid rgba(72, 111, 75, 0.11) !important;
  color: var(--garden-ink) !important;
  padding: 5px 7px !important;
}

[data-theme="natural"] .formulacion-table tbody tr:hover > td,
[data-theme="natural"] .exc-table tbody tr:hover > td {
  background: #eaf3e3 !important;
  color: var(--garden-ink) !important;
}

[data-theme="natural"] .formulacion-table tbody tr:hover > td:first-child,
[data-theme="natural"] .exc-table tbody tr:hover > td:first-child {
  box-shadow: inset 2px 0 0 var(--garden-leaf) !important;
}

[data-theme="natural"] .formulacion-table input,
[data-theme="natural"] .exc-table input {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-bottom-color: rgba(72, 111, 75, 0.25) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: var(--garden-ink) !important;
  font-family: var(--garden-data) !important;
  min-height: 30px !important;
}

[data-theme="natural"] .formulacion-table input:focus,
[data-theme="natural"] .exc-table input:focus {
  background: #fffef9 !important;
  border-color: var(--garden-leaf) !important;
  box-shadow: 0 0 0 2px rgba(93, 137, 93, 0.12) !important;
}

[data-theme="natural"] .formulacion-table .cell-total,
[data-theme="natural"] .formulacion-table .cell-subtotal,
[data-theme="natural"] .formulacion-table .subtotal-val {
  color: var(--garden-leaf-deep) !important;
  font-family: var(--garden-data) !important;
  font-weight: 700 !important;
}

[data-theme="natural"] .granel-card.card-purple .formulacion-table {
  min-width: 1010px !important;
}

[data-theme="natural"] .granel-card.card-blue .formulacion-table,
[data-theme="natural"] .granel-card.card-teal .formulacion-table {
  min-width: 640px !important;
}

/* Inputs redondeados como etiquetas de cuaderno. */
[data-theme="natural"] .info-input,
[data-theme="natural"] .input-field,
[data-theme="natural"] .search-box,
[data-theme="natural"] .exc-search-input,
[data-theme="natural"] .exc-table-search {
  background: #fffef9 !important;
  border: 1px solid rgba(72, 111, 75, 0.34) !important;
  border-radius: 7px 5px 8px 6px !important;
  box-shadow: 1px 2px 0 rgba(47, 64, 53, 0.1) !important;
  color: var(--garden-ink) !important;
  font-family: var(--garden-body) !important;
}

[data-theme="natural"] .info-input::placeholder,
[data-theme="natural"] .input-field::placeholder,
[data-theme="natural"] .search-input::placeholder,
[data-theme="natural"] .exc-search-input::placeholder {
  color: rgba(101, 114, 103, 0.7) !important;
}

[data-theme="natural"] .info-input:focus,
[data-theme="natural"] .input-field:focus,
[data-theme="natural"] .search-box:focus-within,
[data-theme="natural"] .exc-search-input:focus,
[data-theme="natural"] .exc-table-search:focus {
  background: #fffef9 !important;
  border-color: var(--garden-leaf) !important;
  box-shadow: 0 0 0 2px rgba(93, 137, 93, 0.14), 1px 2px 0 rgba(47, 64, 53, 0.1) !important;
  outline: none !important;
}

[data-theme="natural"] .search-input {
  color: var(--garden-ink) !important;
  font-family: var(--garden-body) !important;
}

[data-theme="natural"] .input-unit-badge {
  background: rgba(237, 197, 96, 0.28) !important;
  border: 1px solid rgba(201, 158, 67, 0.45) !important;
  border-radius: 5px !important;
  color: var(--garden-bark) !important;
}

/* Resumen de costos y llamada principal con acento de sol. */
[data-theme="natural"] .granel-card .resumen-card,
[data-theme="natural"] .exc-hero-card,
[data-theme="natural"] .exc-summary-card,
[data-theme="natural"] .exc-table-section,
[data-theme="natural"] .summary-section,
[data-theme="natural"] .mo-breakdown,
[data-theme="natural"] .exc-modal-card,
[data-theme="natural"] .modal-card {
  background: rgba(255, 253, 247, 0.97) !important;
  border: 1px solid var(--garden-line) !important;
  border-radius: 10px 8px 11px 8px !important;
  box-shadow: var(--garden-shadow) !important;
}

[data-theme="natural"] .granel-card .resumen-card {
  position: relative !important;
  top: auto !important;
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 11px !important;
  margin: 0 !important;
}

[data-theme="natural"] .granel-card .resumen-card > .card-content,
[data-theme="natural"] .granel-card .unified-right-grid {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: start !important;
}

[data-theme="natural"] .granel-card .resumen-card > .card-content {
  align-items: stretch !important;
}

[data-theme="natural"] .granel-card .unified-right-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 9px !important;
}

[data-theme="natural"] .granel-card .unified-right-grid > * {
  min-width: 0 !important;
}

[data-theme="natural"] .granel-card .unified-col-summary {
  border-left: 1px dashed var(--garden-line) !important;
  padding-left: 9px !important;
}

[data-theme="natural"] .granel-card .summary-section {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px dashed var(--garden-line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 8px !important;
  margin: 0 0 8px !important;
}

[data-theme="natural"] .granel-card .summary-title {
  color: var(--garden-leaf-deep) !important;
  font-family: var(--garden-heading) !important;
  font-size: 1.16rem !important;
}

[data-theme="natural"] .granel-card .summary-title::before {
  content: '✿' !important;
  color: var(--garden-flower) !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

[data-theme="natural"] .granel-card .summary-item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px dashed rgba(72, 111, 75, 0.17) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
}

[data-theme="natural"] .granel-card .summary-value {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--garden-leaf-deep) !important;
  font-family: var(--garden-data) !important;
  padding: 2px 4px !important;
}

[data-theme="natural"] .granel-card .kpi-highlight {
  display: block !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  background: linear-gradient(120deg, #f7efd5, #fff9e8) !important;
  border: 1.5px solid rgba(201, 158, 67, 0.62) !important;
  border-left: 4px solid var(--garden-sun) !important;
  border-radius: 9px 7px 10px 7px !important;
  box-shadow: 1px 3px 0 rgba(109, 87, 42, 0.14) !important;
  color: var(--garden-ink) !important;
  margin-top: 10px !important;
  padding: 13px 18px !important;
}

[data-theme="natural"] .kpi-label {
  color: var(--garden-bark) !important;
  font-family: var(--garden-heading) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

[data-theme="natural"] .kpi-dual-label {
  color: var(--garden-muted) !important;
  font-family: var(--garden-body) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

[data-theme="natural"] .kpi-value {
  color: var(--garden-ink) !important;
  font-family: var(--garden-data) !important;
  font-size: clamp(1.5rem, 2vw, 1.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

[data-theme="natural"] .kpi-dual {
  width: 100% !important;
  justify-content: space-evenly !important;
  gap: 12px !important;
}

[data-theme="natural"] .kpi-dual-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  gap: 4px !important;
}

[data-theme="natural"] .granel-card .kpi-highlight {
  --garden-kpi-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 82' fill='none' stroke='%235D895D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M118 4C92 10 99 26 78 33 57 40 66 54 48 61 30 68 23 74 4 80'/%3E%3Cpath d='M98 11C89 4 81 8 83 18 91 21 97 18 98 11ZM79 33C89 25 98 29 96 38 88 42 81 40 79 33ZM55 55C47 46 39 49 41 59 48 62 54 60 55 55ZM31 68C22 61 15 65 17 74 24 77 29 74 31 68Z' fill='%2395B77D' fill-opacity='.48'/%3E%3Cpath d='M17 24c-6-8-16-5-15 3 5 3 10 2 15-3ZM17 24c6-8 16-5 15 3-5 3-10 2-15-3Z' stroke='%23D98E9B'/%3E%3Ccircle cx='17' cy='24' r='2.3' fill='%23EDC560' stroke='%23C99E43'/%3E%3C/svg%3E");
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

/* Adornos de esquinas ocultos para evitar sobreposición con números y etiquetas */
[data-theme="natural"] .granel-card .kpi-highlight::before,
[data-theme="natural"] .granel-card .kpi-highlight::after {
  display: none !important;
}

[data-theme="natural"] .side-panel-section {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px dashed var(--garden-line-soft) !important;
  border-radius: 0 !important;
  padding: 0 0 14px 0 !important;
  box-shadow: none !important;
}

[data-theme="natural"] .side-panel-section:last-of-type,
[data-theme="natural"] .side-panel-section.side-panel-financial {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

[data-theme="natural"] .fin-margen-box {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 0 0 !important;
  box-shadow: none !important;
}

[data-theme="natural"] .fin-input-badge-wrap input,
[data-theme="natural"] .fin-num-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="natural"] .kpi-dual-divider {
  background: var(--garden-line) !important;
}

[data-theme="natural"] .mo-data-card {
  background: rgba(234, 242, 226, 0.7) !important;
  border: 1px solid var(--garden-line-soft) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 10px !important;
}

[data-theme="natural"] .mo-card-center {
  background: rgba(93, 137, 93, 0.1) !important;
  border: 1px solid var(--garden-line-soft) !important;
  border-radius: 6px !important;
  color: var(--garden-leaf-deep) !important;
}

[data-theme="natural"] .mo-breakdown-title,
[data-theme="natural"] .mo-breakdown-total {
  border-color: var(--garden-line) !important;
}

[data-theme="natural"] .mo-breakdown-total span:last-child {
  color: var(--garden-leaf-deep) !important;
}

[data-theme="natural"] .btn-add-mo,
[data-theme="natural"] .btn-add-row {
  background: rgba(234, 242, 226, 0.78) !important;
  border: 1px dashed rgba(93, 137, 93, 0.5) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  color: var(--garden-leaf-deep) !important;
  font-family: var(--garden-body) !important;
  font-weight: 800 !important;
  min-height: 36px;
  padding: 6px 9px !important;
}

[data-theme="natural"] .btn-add-mo:hover,
[data-theme="natural"] .btn-add-row:hover {
  background: rgba(237, 197, 96, 0.24) !important;
  border-color: var(--garden-leaf) !important;
  color: var(--garden-leaf-deep) !important;
}

/* Distintivos vivos para sin cotización y en proceso. */
[data-theme="natural"] .quote-status {
  border-radius: 6px !important;
  font-family: var(--garden-body) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

[data-theme="natural"] .quote-status--unquoted {
  background: rgba(217, 142, 155, 0.2) !important;
  border-color: rgba(181, 76, 78, 0.52) !important;
  color: #963f49 !important;
}

[data-theme="natural"] .quote-status--quoting {
  background: rgba(237, 197, 96, 0.25) !important;
  border-color: rgba(201, 158, 67, 0.52) !important;
  color: #785616 !important;
}

/* Exclusividades y estados del validador en tonos de hoja, flor y sol. */
[data-theme="natural"] #exclusividades-view,
[data-theme="natural"] .exclusividades-container {
  color: var(--garden-ink) !important;
  font-family: var(--garden-body) !important;
}

[data-theme="natural"] #exclusividades-view h1,
[data-theme="natural"] #exclusividades-view h2,
[data-theme="natural"] #exclusividades-view h3,
[data-theme="natural"] #exclusividades-view h4 {
  color: var(--garden-leaf-deep) !important;
  font-family: var(--garden-heading) !important;
}

[data-theme="natural"] .exc-hero-title-group h2 svg,
[data-theme="natural"] .exc-hero-title-group h2 i {
  color: var(--garden-leaf) !important;
}

[data-theme="natural"] .exc-empty-icon {
  background: rgba(237, 197, 96, 0.22) !important;
  color: var(--garden-leaf-deep) !important;
}

[data-theme="natural"] .exc-mp-code,
[data-theme="natural"] .exc-search-item-ref {
  color: var(--garden-leaf-deep) !important;
}

[data-theme="natural"] .exc-status-badge.is-exclusive,
[data-theme="natural"] .exc-tag-exclusive,
[data-theme="natural"] .badge-exclusive {
  background: rgba(217, 142, 155, 0.16) !important;
  border: 1px solid rgba(217, 142, 155, 0.38) !important;
  color: #934b58 !important;
}

[data-theme="natural"] .exc-status-badge.is-standard,
[data-theme="natural"] .exc-tag-shared,
[data-theme="natural"] .badge-standard {
  background: rgba(93, 137, 93, 0.1) !important;
  border: 1px solid rgba(93, 137, 93, 0.28) !important;
  color: var(--garden-leaf-deep) !important;
}

[data-theme="natural"] .exc-stock-delta.is-sobra,
[data-theme="natural"] .exc-stock-pill.sobra,
[data-theme="natural"] .badge-active-granel {
  background: rgba(78, 128, 89, 0.12) !important;
  border-color: rgba(78, 128, 89, 0.34) !important;
  color: var(--garden-success) !important;
}

[data-theme="natural"] .exc-stock-delta.is-falta,
[data-theme="natural"] .exc-stock-pill.falta {
  background: rgba(181, 76, 78, 0.11) !important;
  border-color: rgba(181, 76, 78, 0.32) !important;
  color: var(--garden-danger) !important;
}

[data-theme="natural"] .exc-stock-delta.is-balance,
[data-theme="natural"] .exc-stock-pill.neutro,
[data-theme="natural"] .badge-inactive-granel {
  background: rgba(72, 111, 75, 0.08) !important;
  border-color: var(--garden-line-soft) !important;
  color: var(--garden-muted) !important;
}

/* Controles eliminados, resultados y modales. */
[data-theme="natural"] .btn-remove-row,
[data-theme="natural"] .btn-remove-card,
[data-theme="natural"] .mo-card-remove {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: var(--garden-muted) !important;
  transform: none !important;
}

[data-theme="natural"] .btn-remove-row:hover,
[data-theme="natural"] .btn-remove-card:hover,
[data-theme="natural"] .mo-card-remove:hover {
  background: rgba(181, 76, 78, 0.12) !important;
  border-color: rgba(181, 76, 78, 0.36) !important;
  color: var(--garden-danger) !important;
}

[data-theme="natural"] .search-results,
[data-theme="natural"] .ref-autocomplete-list,
[data-theme="natural"] .add-card-menu,
[data-theme="natural"] .drawer-panel {
  background: var(--garden-surface) !important;
  border: 1px solid var(--garden-line) !important;
  border-radius: 9px !important;
  box-shadow: 0 8px 22px rgba(47, 64, 53, 0.16) !important;
}

[data-theme="natural"] .search-result-item:hover,
[data-theme="natural"] .ref-autocomplete-item:hover {
  background: rgba(234, 242, 226, 0.9) !important;
}

[data-theme="natural"] .modal-overlay,
[data-theme="natural"] .exc-modal-overlay,
[data-theme="natural"] .drawer-overlay {
  background: rgba(43, 56, 45, 0.34) !important;
  backdrop-filter: blur(2px) !important;
}

[data-theme="natural"] .modal-card,
[data-theme="natural"] .exc-modal-card {
  background: var(--garden-surface) !important;
  border-color: var(--garden-line) !important;
  box-shadow: 4px 6px 0 rgba(47, 64, 53, 0.14) !important;
}

[data-theme="natural"] .modal-header,
[data-theme="natural"] .exc-modal-header,
[data-theme="natural"] .modal-footer,
[data-theme="natural"] .exc-modal-footer {
  background: rgba(234, 242, 226, 0.62) !important;
  border-color: var(--garden-line-soft) !important;
}

/* Microinteracciones: pequeñas respuestas, sin mover datos ni controles. */
@keyframes natural-paper-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes natural-butterfly-flight {
  0%, 7%, 100% { opacity: 0; transform: translate(-8vw, 1vh) rotate(-8deg) scale(0.82); }
  10% { opacity: 0.76; }
  16% { opacity: 0.86; transform: translate(28vw, -3vh) rotate(8deg) scale(1); }
  22% { opacity: 0.8; transform: translate(64vw, 2vh) rotate(-5deg) scale(0.94); }
  27% { opacity: 0; transform: translate(108vw, -2vh) rotate(8deg) scale(0.82); }
}

@keyframes natural-bird-flight {
  0%, 6%, 100% { opacity: 0; transform: translate(108vw, 1vh) rotate(3deg) scale(0.82); }
  9% { opacity: 0.72; }
  16% { opacity: 0.8; transform: translate(55vw, -2vh) rotate(-2deg) scale(1); }
  22% { opacity: 0.68; transform: translate(8vw, 2vh) rotate(3deg) scale(0.94); }
  25% { opacity: 0; transform: translate(-12vw, 0) rotate(-3deg) scale(0.82); }
}

[data-theme="natural"] .project-info-bar {
  animation: natural-paper-arrive 280ms ease-out both;
}

[data-theme="natural"] .granel-card {
  animation: natural-paper-arrive 260ms ease-out both;
}

[data-theme="natural"] button:focus-visible,
[data-theme="natural"] a:focus-visible,
[data-theme="natural"] input:focus-visible,
[data-theme="natural"] select:focus-visible,
[data-theme="natural"] [tabindex]:focus-visible {
  outline: 2px solid var(--garden-leaf) !important;
  outline-offset: 2px !important;
}

@media screen and (max-width: 1400px) {
  [data-theme="natural"] .formulacion-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  [data-theme="natural"] .unified-right-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  [data-theme="natural"] .unified-col-summary {
    border-left: 1px dashed var(--garden-line) !important;
    border-top: none !important;
    padding: 0 0 0 9px !important;
  }
}

@media screen and (max-width: 1100px) {
  [data-theme="natural"] .app-header {
    height: auto !important;
    padding: 9px 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  [data-theme="natural"] .header-left,
  [data-theme="natural"] .header-right {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  [data-theme="natural"] .header-actions-group {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
  }

  [data-theme="natural"] .header-separator {
    display: none !important;
  }

  [data-theme="natural"] .main-content {
    width: calc(100% - 20px) !important;
    padding: 12px 6px !important;
  }
}

@media screen and (max-width: 600px) {
  [data-theme="natural"] .app-header {
    position: relative !important;
    padding: 8px 10px !important;
  }

  [data-theme="natural"] .header-left h1::after {
    display: none !important;
  }

  [data-theme="natural"] .header-mode-switch {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  [data-theme="natural"] .header-right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  [data-theme="natural"] .header-actions-group,
  [data-theme="natural"] .header-toolbar,
  [data-theme="natural"] #btn-guardar,
  [data-theme="natural"] .theme-selector-box {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  [data-theme="natural"] .header-actions-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  [data-theme="natural"] .header-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [data-theme="natural"] .project-info-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-theme="natural"] .unified-right-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-theme="natural"] .unified-col-summary {
    border-left: none !important;
    border-top: 1px dashed var(--garden-line) !important;
    padding: 8px 0 0 !important;
  }

  [data-theme="natural"] body,
  [data-theme="natural"] body::before {
    background-attachment: scroll !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="natural"] #app-content::before,
  [data-theme="natural"] #app-content::after {
    display: none !important;
    animation: none !important;
  }

  [data-theme="natural"] *,
  [data-theme="natural"] *::before,
  [data-theme="natural"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   ADAPTACIONES DE TEMÁTICA NATURAL: DISTINCIONES CLARAS Y BOTÁNICAS
   ========================================================================== */
/* Píldoras e indicadores en la barra de navegación rápida Natural */
[data-theme="natural"] .pill-purple .quick-nav-pill-dot {
  background: #486f4b !important;
  box-shadow: 0 0 5px rgba(72, 111, 75, 0.4) !important;
}
[data-theme="natural"] .pill-blue .quick-nav-pill-dot {
  background: #5d895d !important;
  box-shadow: 0 0 5px rgba(93, 137, 93, 0.4) !important;
}
[data-theme="natural"] .pill-teal .quick-nav-pill-dot {
  background: #b87333 !important;
  box-shadow: 0 0 5px rgba(184, 115, 51, 0.4) !important;
}

[data-theme="natural"] .pill-purple:hover { border-color: rgba(72, 111, 75, 0.5) !important; }
[data-theme="natural"] .pill-blue:hover { border-color: rgba(93, 137, 93, 0.6) !important; }
[data-theme="natural"] .pill-teal:hover { border-color: rgba(184, 115, 51, 0.6) !important; }

/* Botones de acción Mano de Obra acordes a la paleta Natural */
[data-theme="natural"] .btn-mo-predict {
  background: rgba(72, 111, 75, 0.1) !important;
  color: #2e5231 !important;
  border-color: rgba(72, 111, 75, 0.3) !important;
}
[data-theme="natural"] .btn-mo-predict:hover {
  background: rgba(72, 111, 75, 0.2) !important;
  border-color: #2e5231 !important;
  color: #2e5231 !important;
}
[data-theme="natural"] .btn-mo-escalera {
  background: rgba(184, 115, 51, 0.1) !important;
  color: #7a461b !important;
  border-color: rgba(184, 115, 51, 0.3) !important;
}
[data-theme="natural"] .btn-mo-escalera:hover {
  background: rgba(184, 115, 51, 0.2) !important;
  border-color: #7a461b !important;
  color: #7a461b !important;
}