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

/* ==========================================
   KMMA CALC — Sistema de Diseño "Aurora"
   Vibrante · Gradientes violeta/fucsia · Layout con Sidebar
   ========================================== */

/* ===== TOKENS ===== */
:root {
  /* Marca — Kummara Shop (teal #2EB8A8 + rosa #E6607B) */
  --violet:      #2eb8a8;   /* primario (teal) */
  --violet-700:  #1fa090;
  --violet-800:  #178577;
  --indigo-900:  #0f5d54;   /* teal oscuro (footer) */
  --fuchsia:     #e6607b;   /* acento (rosa) */
  --magenta:     #d6516c;
  --pink:        #ed6c7e;

  /* Paleta del Design System de Kummara (para el loader y acentos) */
  --color-teal:  #2eb8a8;
  --color-green: #77b65d;
  --color-rose:  #e6607b;
  --color-amber: #e8b30e;

  /* Gradientes (teal) */
  --grad-brand:   linear-gradient(135deg, #2eb8a8 0%, #1fa090 100%);
  --grad-brand-2: linear-gradient(135deg, #2eb8a8 0%, #e6607b 100%);
  --grad-sidebar: linear-gradient(185deg, #178577 0%, #1fa090 50%, #2eb8a8 100%);
  --grad-hero:    linear-gradient(120deg, #1fa090 0%, #2eb8a8 55%, #83d5cf 100%);

  /* Superficies (claro) — neutras como Kummara */
  --paper:     #f4f7f7;      /* fondo de la app */
  --surface:   #ffffff;      /* tarjetas */
  --surface-2: #eef4f3;      /* paneles sutiles */
  --surface-3: #e3eeec;      /* terciario */
  --line:      #e6ecea;      /* bordes */
  --ink:       #212529;      /* texto principal */
  --ink-soft:  #495057;      /* texto secundario */
  --muted:     #606060;      /* texto atenuado / placeholders */

  --ring: rgba(46, 184, 168, 0.25);
  --shadow-color: 46, 184, 168;

  /* Tipografía */
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Sora', 'Plus Jakarta Sans', sans-serif;
  --font-brand:   'Poppins', 'Sora', system-ui, sans-serif;   /* wordmark kummara.trends */

  /* Radios */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --border-radius: var(--r-md);
  --border-radius-lg: var(--r-lg);
  --border-radius-xl: var(--r-xl);

  /* Sombras (con tinte violeta) */
  --shadow-sm: 0 2px 8px rgba(var(--shadow-color), 0.08);
  --shadow-md: 0 10px 30px rgba(var(--shadow-color), 0.12);
  --shadow-lg: 0 22px 50px rgba(var(--shadow-color), 0.18);
  --shadow-glow: 0 12px 28px rgba(var(--shadow-color), 0.40);

  --transition-fast: 0.16s ease;
  --transition-normal: 0.28s cubic-bezier(.4,0,.2,1);
  --transition-slow: 0.5s cubic-bezier(.4,0,.2,1);

  --sidebar-w: 268px;

  /* ===== Alias de compatibilidad (vistas existentes) ===== */
  --bg-color: var(--paper);
  --text-color: var(--ink);
  --card-bg: var(--surface);
  --border-color: var(--line);
  --navbar-bg: var(--surface);
  --input-bg: var(--surface);

  --primary-color: var(--violet);
  --primary-hover: var(--violet-700);
  --secondary-color: #6b6486;
  --accent-color: var(--fuchsia);
  --success-color: #16a34a;
  --warning-color: #f59e0b;
  --danger-color:  #ef4444;
  --info-color:    var(--violet);

  --bg-primary: var(--surface);
  --bg-secondary: var(--surface-2);
  --bg-tertiary: var(--surface-3);
  --bg-dark: var(--indigo-900);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--muted);
  --text-white: #ffffff;
}

/* ============================================================
   KummaraDS — capa de tokens adoptada (RFC-003 / origen CalcuMeli).
   Paleta --color-* completa + tokens --ds-*. Los --ds-* son ALIAS de
   las superficies "Aurora" de arriba, así heredan el modo oscuro de
   [data-theme="dark"] sin duplicar valores. Fuente de verdad:
   _CONSOLIDACION/tokens.css + skill /ds de KummaraShop. No inventar.
   ============================================================ */
:root {
  /* Funcionales — variantes que faltaban (base teal/green/rose/amber ya arriba) */
  --color-teal-dark:   #1c8475;  --color-teal-light:  #7ec8bc;
  --color-rose-dark:   #d03355;  --color-rose-light:   #f2a3b2;
  --color-amber-dark:  #c4960a;  --color-amber-light:  #f5d76e;
  --color-green-dark:  #459b40;  --color-green-light:  #92cc78;
  /* Funcionales nuevas */
  --color-cyan:        #83d5cf;  --color-cyan-dark:    #309c9f;  --color-cyan-light:   #b9e6df;
  --color-violet:      #9b51e0;  --color-violet-dark:  #8a3fcc;  --color-violet-light: #c9a0f0;
  --color-blue:        #4a90d9;  --color-blue-dark:    #2e6db4;  --color-blue-light:   #a3c4e9;
  --color-forest:      #4da637;  --color-forest-dark:  #3b8029;  --color-forest-light: #7bc66a;
  --color-gray:        #606060;  --color-gray-dark:    #333333;  --color-gray-light:   #bdbdbd;
  /* Decorativos */
  --color-pink: #ed6c7e;  --color-peach: #fad35c;  --color-mint: #b4e6db;
  --color-yellow: #fdd235; --color-lime: #9cc55d;

  /* Tokens de superficie/texto/sombra (--ds-*) = ALIAS a las Aurora (dark-aware) */
  --ds-surface:         var(--surface);
  --ds-surface-raised:  var(--surface);
  --ds-surface-sunken:  var(--surface-2);
  --ds-surface-overlay: var(--surface);
  --ds-border:          var(--line);
  --ds-border-strong:   var(--line);
  --ds-text:            var(--ink);
  --ds-text-muted:      var(--muted);
  --ds-text-subtle:     var(--ink-soft);
  --ds-text-inverse:    #ffffff;
  --ds-shadow:          var(--shadow-sm);
  --ds-shadow-lg:       var(--shadow-md);

  /* Tipografía DS (Open Sans, ya activa vía --font-body) */
  --font: var(--font-body);
}

/* Utilidades del DS (reemplazan style="color:..." / badges inline) */
.text-teal  { color: var(--color-teal)  !important; }
.text-green { color: var(--color-green) !important; }
.text-rose  { color: var(--color-rose)  !important; }
.text-amber { color: var(--color-amber) !important; }
.text-cyan  { color: var(--color-cyan-dark) !important; }
.text-ds-muted   { color: var(--ds-text-muted) !important; }
.text-ds-subtle  { color: var(--ds-text-subtle) !important; }
.badge-teal  { background: var(--color-teal)  !important; color: #fff !important; }
.badge-green { background: var(--color-green) !important; color: #fff !important; }
.badge-rose  { background: var(--color-rose)  !important; color: #fff !important; }
.badge-amber { background: var(--color-amber) !important; color: #1d1730 !important; }
.badge-cyan  { background: var(--color-cyan)  !important; color: #08312e !important; }

/* ===== MODO OSCURO ===== */
[data-theme="dark"] {
  --paper:     #0f1413;
  --surface:   #161d1c;
  --surface-2: #1d2625;
  --surface-3: #283330;
  --line:      #2b3433;
  --ink:       #e8edec;
  --ink-soft:  #aab4b2;
  --muted:     #7c8987;

  --ring: rgba(46, 184, 168, 0.30);
  --shadow-color: 0, 0, 0;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.30);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.40);
  --shadow-lg: 0 22px 50px rgba(0,0,0,0.55);

  --secondary-color: #9a90c0;
  --success-color: #4ade80;
  --warning-color: #fbbf24;
  --danger-color:  #f87171;
}

/* ===== BASE ===== */
* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--text-color) !important;
  background-color: var(--bg-color) !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Blobs atmosféricos de fondo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38rem 38rem at 110% -8%, rgba(46, 184, 168, 0.14), transparent 60%),
    radial-gradient(34rem 34rem at -8% 12%, rgba(131, 213, 207, 0.16), transparent 60%),
    radial-gradient(30rem 30rem at 85% 105%, rgba(230, 96, 123, 0.10), transparent 60%);
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(40rem 40rem at 110% -8%, rgba(46, 184, 168, 0.18), transparent 60%),
    radial-gradient(36rem 36rem at -8% 12%, rgba(131, 213, 207, 0.16), transparent 60%);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}
h1 { font-size: 2.3rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.12rem; }
h6 { font-size: 1rem; }

a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--magenta); }
::selection { background: var(--violet); color: #fff; }

/* Texto con gradiente (utilidad) */
.kmma-gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================
   LAYOUT CON SIDEBAR
   ========================================== */
.kmma-content {
  /* Sin z-index: un z-index acá crearía un "stacking context" que atrapa los
     modales de Bootstrap por debajo del backdrop. El fondo va en body::before (z-index:-1). */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100vh;
  transition: margin-left var(--transition-normal);
}
.has-sidebar .kmma-content { margin-left: var(--sidebar-w); }

/* ===== SIDEBAR ===== */
.kmma-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1rem 1.1rem;
  color: rgba(255, 255, 255, 0.82);
  background: var(--grad-sidebar);
  box-shadow: 4px 0 30px rgba(76, 29, 149, 0.35);
  overflow: hidden;
}
/* Brillo decorativo dentro del sidebar */
.kmma-sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(20rem 20rem at 120% 0%, rgba(255,255,255,0.16), transparent 60%),
    radial-gradient(16rem 16rem at -20% 100%, rgba(230,96,123,0.30), transparent 60%);
}
.kmma-sidebar > * { position: relative; z-index: 1; }

.kmma-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.55rem 1.1rem;
  color: #fff !important;
}
.kmma-logo-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fff;
  color: var(--violet-700);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.20);
  flex: 0 0 auto;
}
.kmma-logo-text {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: #fff;
}
.kmma-logo-text strong { font-weight: 800; }

/* Navegación */
.kmma-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-height: 0; /* permite que el nav scrollee en viewport corto y NO empuje el footer (Salir) fuera de pantalla (fix mobile) */
  overflow-y: auto;
  margin: 0.2rem -0.2rem 0.3rem;
  /* Scrollbar oculta (sigue scrolleando, pero sin barra visible) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.kmma-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

.kmma-nav-section {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding: 0.7rem 0.8rem 0.2rem;
}

.kmma-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.8rem;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  transition: var(--transition-fast);
}
.kmma-nav-link i { font-size: 0.98rem; width: 1.15rem; text-align: center; opacity: 0.95; }
.kmma-nav-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
  transform: translateX(2px);
}
.kmma-nav-link.active {
  background: rgba(255, 255, 255, 0.96);
  color: var(--violet-800) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.kmma-nav-link.active i { opacity: 1; }
.kmma-nav-badge {
  margin-left: auto;
  background: var(--pink);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
  line-height: 1.4;
}

/* Pie del sidebar */
.kmma-sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 0.9rem;
}
.kmma-user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.4rem 0.75rem;
}
.kmma-user-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1.05rem;
}
.kmma-user-info { display: flex; flex-direction: column; min-width: 0; }
.kmma-user-name {
  color: #fff;
  font-weight: 600;
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kmma-user-meta { color: rgba(255, 255, 255, 0.65); font-size: 0.76rem; }

.kmma-sidebar-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.kmma-theme-switch { display: flex; align-items: center; gap: 0.45rem; color: rgba(255,255,255,0.85); }
.kmma-theme-switch i { font-size: 0.8rem; }
.kmma-logout {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-soft) !important;
  font-weight: 600;
  font-size: 0.85rem;
  transition: var(--transition-fast);
}
.kmma-logout:hover { background: var(--surface-3); border-color: var(--color-rose); color: var(--color-rose) !important; }

/* Overlay y topbar móvil */
.kmma-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 1035;
  background: rgba(30, 12, 60, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal);
}
.kmma-sidebar-overlay.is-visible { opacity: 1; visibility: visible; }

.kmma-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  background: var(--grad-sidebar);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.kmma-burger {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: none;
  border-radius: 11px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  font-size: 1.35rem;
  cursor: pointer;
}
.kmma-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
}
.kmma-topbar-brand .kmma-logo-mark { width: 30px; height: 30px; font-size: 1rem; border-radius: 9px; }
.kmma-pill-credits {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  color: var(--color-amber);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}
.kmma-pill-credits i { font-size: 1.05em; }

/* Topbar de invitado (login/registro) */
.kmma-guest-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--grad-sidebar);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.kmma-guest-nav { display: flex; align-items: center; gap: 0.6rem; }
.kmma-guest-nav a {
  color: rgba(255,255,255,0.9) !important;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 99px;
  transition: var(--transition-fast);
}
.kmma-guest-nav a:hover { background: rgba(255,255,255,0.15); }
.kmma-guest-nav .kmma-guest-cta { background: #fff; color: var(--violet-700) !important; }
.kmma-guest-nav .kmma-guest-cta:hover { background: rgba(255,255,255,0.88); }

/* ==========================================
   TÍTULO / HERO DE PÁGINA
   ========================================== */
.kmma-page-title {
  position: relative;
  overflow: hidden;
  background: var(--grad-hero);
  color: #fff;
  padding: 1.1rem 1.5rem;
  border-radius: var(--r-lg);
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.kmma-page-title::before {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 24rem; height: 24rem;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 65%);
  border-radius: 50%;
}
.kmma-page-title::after {
  content: "";
  position: absolute;
  bottom: -55%; left: -5%;
  width: 20rem; height: 20rem;
  background: radial-gradient(circle, rgba(230,96,123,0.45), transparent 65%);
  border-radius: 50%;
}
.kmma-page-title h1 {
  position: relative;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.kmma-page-title p {
  position: relative;
  margin: 0.15rem 0 0 0;
  opacity: 0.9;
  font-size: 0.86rem;
  max-width: 42rem;
}

/* ==========================================
   TARJETAS
   ========================================== */
.kmma-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  overflow: hidden;
}
.kmma-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.kmma-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 1.4rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.kmma-card .card-header i { color: var(--violet); }
.kmma-card .card-body { padding: 1.5rem; }

/* ==========================================
   BOTONES
   ========================================== */
.kmma-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  padding: 0.7rem 1.5rem;
  transition: var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.kmma-btn:hover { transform: translateY(-2px); }
.kmma-btn:active { transform: translateY(0); }

.kmma-btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-glow); }
.kmma-btn-primary:hover { color: #fff; filter: brightness(1.05); }
.kmma-btn-secondary { background: var(--surface); color: var(--color-teal); border-color: var(--line); }
.kmma-btn-secondary:hover { background: var(--surface-2); color: var(--color-teal); border-color: var(--color-teal); }
.kmma-btn-success { background: var(--color-green-dark); color: #fff; }
.kmma-btn-success:hover { color: #fff; filter: brightness(1.08); }
.kmma-btn-danger { background: var(--color-rose-dark); color: #fff; }
.kmma-btn-danger:hover { color: #fff; filter: brightness(1.08); }
.kmma-btn-warning { background: var(--color-amber); color: #1d1730; }
.kmma-btn-warning:hover { color: #1d1730; filter: brightness(0.96); }
.kmma-btn-outline { background: transparent; border: 1.5px solid var(--color-teal); color: var(--color-teal); }
.kmma-btn-outline:hover { background: var(--color-teal); color: #fff; }
/* Variante chica (acciones secundarias en headers/filas) — reemplaza btn-sm de Bootstrap */
.kmma-btn-sm { padding: .4rem .9rem; font-size: .82rem; }

/* Casilla de consentimiento (clickwrap) en páginas de auth/consent */
.kmma-form-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; color: var(--ink-soft); line-height: 1.45; cursor: pointer; }
.kmma-form-check input[type="checkbox"] { margin-top: .15rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: var(--color-teal); cursor: pointer; }
.kmma-form-check a { color: var(--color-teal); font-weight: 600; }
.kmma-auth-legal-note { font-size: .8rem; color: var(--muted); text-align: center; margin: .55rem 0 0; }
.kmma-auth-legal-note a { color: var(--color-teal); font-weight: 600; }

/* Acciones rápidas como tiles (ícono en cuadrado teal + label) — identidad propia, no botones genéricos. */
.kmma-quickactions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.kmma-quickactions-3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 576px) { .kmma-quickactions:not(.kmma-quickactions-3) { grid-template-columns: repeat(4, 1fr); } }
.kmma-quickaction { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .9rem .5rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; text-align: center; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.kmma-quickaction:hover { border-color: var(--color-teal); background: color-mix(in srgb, var(--color-teal) 8%, var(--surface)); transform: translateY(-1px); }
.kmma-quickaction-ico { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-teal) 14%, transparent); color: var(--color-teal); font-size: 1.25rem; }
.kmma-quickaction-label { font-size: .8rem; font-weight: 600; line-height: 1.2; }

/* Botón de acción icon-only para tablas (modelo: Ventas ML) */
.kmma-act { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--color-teal); text-decoration: none; transition: all .15s ease; }
.kmma-act:hover { background: var(--color-teal); border-color: var(--color-teal); color: #fff; transform: translateY(-1px); }
.kmma-act i { font-size: 1rem; line-height: 1; }
button.kmma-act { cursor: pointer; font: inherit; }
/* Fila de acciones icon-only (varias por celda, alineadas, una sola línea) */
.kmma-acts { display: inline-flex; flex-wrap: nowrap; gap: .35rem; }
/* Variantes semánticas del botón de acción (color del ícono, se rellena en hover) */
.kmma-act.is-warning { color: var(--color-amber); }
.kmma-act.is-warning:hover { background: var(--color-amber); border-color: var(--color-amber); color: #1d1730; }
.kmma-act.is-success { color: var(--color-green-dark); }
.kmma-act.is-success:hover { background: var(--color-green-dark); border-color: var(--color-green-dark); color: #fff; }
.kmma-act.is-danger { color: var(--color-rose-dark); }
.kmma-act.is-danger:hover { background: var(--color-rose-dark); border-color: var(--color-rose-dark); color: #fff; }
/* Paginación DS (personalizada, oscura como el shop DTS): separada, redondeada, activo negro */
.pagination {
  --bs-pagination-color: var(--ink);
  --bs-pagination-bg: var(--surface);
  --bs-pagination-border-color: var(--line);
  --bs-pagination-hover-color: var(--ink);
  --bs-pagination-hover-bg: var(--surface-2);
  --bs-pagination-hover-border-color: var(--ink);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #1f2937;
  --bs-pagination-active-border-color: #1f2937;
  --bs-pagination-disabled-color: var(--muted);
  --bs-pagination-focus-box-shadow: 0 0 0 3px var(--ring);
  gap: .3rem;
}
.pagination .page-link { border-radius: 9px !important; margin: 0; min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }

/* ==========================================
   FORMULARIOS
   ========================================== */
.kmma-form-group { margin-bottom: 1.25rem; }
.kmma-form-label {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.45rem;
  display: block;
}
.kmma-form-control {
  width: 100%;
  padding: 0.72rem 0.95rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 1rem;
  font-family: var(--font-body);
  transition: var(--transition-fast);
  background: var(--surface);
  color: var(--ink);
}
.kmma-form-control:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px var(--ring);
}
/* Solo marcar en rojo DESPUÉS de que el usuario interactúa (no en campos requeridos vacíos al cargar). */
.kmma-form-control:user-invalid { border-color: var(--danger-color); }

/* input-group de Bootstrap */
.input-group .kmma-form-control,
.input-group .form-control { width: auto !important; flex: 1 1 auto !important; }
.input-group .btn { white-space: nowrap; flex: 0 0 auto; }
.input-group > .btn:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px !important; }
.input-group .form-control { border-right: none !important; }
.input-group .btn:first-of-type { margin-left: 8px !important; border-radius: var(--r-sm) !important; }

/* ==========================================
   ALERTAS
   ========================================== */
.kmma-alert {
  padding: 1rem 1.2rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  border-left: 4px solid var(--violet);
  background: var(--surface-2);
  color: var(--text-color);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.kmma-alert-success { border-left-color: #22c55e; }
.kmma-alert-danger  { border-left-color: #f43f5e; }
.kmma-alert-warning { border-left-color: #f59e0b; }
.kmma-alert-info    { border-left-color: var(--violet); }

/* ==========================================
   INDICADOR DE RENTABILIDAD
   ========================================== */
.rentabilidad-container {
  width: 100%;
  background-color: var(--surface-3);
  border-radius: 99px;
  position: relative;
  height: 26px;
  overflow: hidden;
}
.rentabilidad-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, #f43f5e, #f59e0b, #22c55e);
  transition: width 1s ease-in-out;
}
.rentabilidad-text {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #1d1730;
  line-height: 26px;
  text-shadow: 0 0 4px rgba(255,255,255,0.85);
}

/* Ficha / progreso */
.progress { height: 8px; background: var(--surface-3); border-radius: 99px; }
.progress-bar { background: var(--grad-brand) !important; }
.alert-sm { font-size: 0.8rem; padding: 0.25rem 0.5rem; }
.chart-container canvas { max-height: 200px !important; }
.border-end { border-right: 1px solid var(--line) !important; }
.kmma-card .card-body .row .col-6:first-child .border-end { padding-right: 1rem; }
.kmma-card .card-body .row .col-6:last-child { padding-left: 1rem; }
.btn-sm { font-size: 0.8rem; padding: 0.4rem 0.85rem; }
hr { border-color: var(--line); opacity: 1; }

@media print {
  .no-print, .kmma-sidebar, .kmma-topbar, .kmma-sidebar-overlay { display: none !important; }
  body::before { display: none !important; }
  .has-sidebar .kmma-content { margin-left: 0; }
  .kmma-card { box-shadow: none !important; border: 1px solid #ddd !important; }
  .chart-container { page-break-inside: avoid; }
}

/* ==========================================
   FOOTER
   ========================================== */
.kmma-footer {
  background: var(--surface-2);
  color: var(--muted);
  padding: 0.85rem 0;
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.kmma-footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  text-align: center;
}
.kmma-footer-brand {
  font-family: var(--font-display);
  color: var(--color-teal);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0;
}
.kmma-footer-text { font-size: 0.78rem; margin: 0; color: var(--muted); }
.kmma-footer-links { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; }
.kmma-footer-link { color: var(--ink-soft); text-decoration: none; font-size: 0.78rem; transition: var(--transition-fast); }
.kmma-footer-link:hover { color: var(--color-teal); }

/* ==========================================
   TABLAS
   ========================================== */
.kmma-table { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.kmma-table table { width: 100%; margin: 0; }
.kmma-table th {
  background: var(--surface-2);
  color: var(--text-color);
  font-weight: 700;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--line);
}
.kmma-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.kmma-table tbody tr:hover { background: var(--surface-2); }

/* ==========================================
   BADGES
   ========================================== */
/* Badges: planos (sin gradiente), radio sutil (no pill), colores del DS elegidos por contraste */
.kmma-badge { padding: 0.26rem 0.6rem; border-radius: var(--r-xs); font-size: 0.72rem; font-weight: 700; display: inline-block; line-height: 1.25; }
.kmma-badge-success { background: var(--color-green-dark); color: #fff; }
.kmma-badge-danger { background: var(--color-rose-dark); color: #fff; }
.kmma-badge-warning { background: var(--color-amber); color: #1d1730; }
.kmma-badge-secondary { background: var(--surface-3); color: var(--ink); }
.kmma-badge-teal { background: var(--color-teal-dark); color: #fff; }
.kmma-badge-blue { background: var(--color-blue-dark); color: #fff; }
.kmma-badge-cyan { background: var(--color-cyan); color: #08312e; }

/* Ícono de stat-card (Publicidad y afines) */
.kds-stat-ico { font-size: 2rem; line-height: 1; }
/* Valor de stat-card: tipografía responsiva para que montos largos NO se escapen de la card angosta (col-lg-3). */
.kds-stat-text { min-width: 0; }
.kds-stat-val { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.45vw, 1.5rem); line-height: 1.15; margin: 0; }
/* Mobile: stat-cards 2 por fila. El ícono+texto en fila quedan apretados en una card al 50%
   (label a 3 líneas, valor chico). En mobile apilamos: ícono accent arriba, label full-width,
   valor prominente debajo → la info importante se lee clara. */
@media (max-width: 575.98px) {
  .kds-stat-card .card-body { padding: .85rem .8rem; }
  /* Cards con ícono EN GRILLA 2-por-fila (.col-6): apilan (ícono arriba, label/valor full-width) para no
     aplastarse. Las cards full-width (col-md-4, etc.) mantienen ícono-izquierda (tienen ancho de sobra). */
  .col-6 .kds-stat-card .card-body > .d-flex.align-items-center { flex-direction: column; align-items: flex-start !important; gap: .2rem; }
  .col-6 .kds-stat-card .card-body > .d-flex.align-items-center > .flex-grow-1 { margin-left: 0 !important; width: 100%; min-width: 0; }
  .kds-stat-card .kds-stat-ico { font-size: 1.5rem; }
  .kds-stat-card .kds-stat-val { font-size: 1.2rem; }
  .kds-stat-card small { line-height: 1.3; }
  .kmma-home-tools .kmma-btn { flex: 1 1 calc(50% - .3rem); min-width: 0; justify-content: center; padding: .5rem .5rem; font-size: .72rem; }
  .kmma-home-tools .kmma-btn i { display: none; }
}

/* Cuadrante de métricas 2×2 (ej. Análisis de Rentabilidad): divisores en cruz consistentes + padding
   para que los números no se peguen a la línea. */
.kmma-metricgrid { display: grid; grid-template-columns: 1fr 1fr; }
.kmma-metricgrid > div { padding: .85rem .9rem; text-align: center; min-width: 0; }
.kmma-metricgrid > div:nth-child(odd) { border-right: 1px solid var(--line); }
.kmma-metricgrid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.kmma-metricgrid .kds-stat-val { margin-bottom: .15rem; }

/* Barra de atribución (split directas / indirectas) — DS tokens, dark-safe */
.kmma-attrbar { display: flex; height: 22px; border-radius: var(--r-xs); overflow: hidden; background: var(--surface-3); }
.kmma-attrbar-seg { display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.kmma-attrbar-seg.is-direct { background: var(--color-green-dark); color: #fff; }
.kmma-attrbar-seg.is-indirect { background: var(--color-cyan); color: #08312e; }
.kmma-attrbar-seg.is-success { background: var(--color-green-dark); color: #fff; }
.kmma-attrbar-seg.is-warning { background: var(--color-amber); color: #1d1730; }
.kmma-attrbar-seg.is-danger { background: var(--color-rose-dark); color: #fff; }
.kmma-attrbar--thin { height: 8px; }

/* Callout / nota contextual (reemplaza alert-* de Bootstrap; dark-safe vía tokens + color-mix) */
.kmma-note { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .9rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: .9rem; }
.kmma-note > i { font-size: 1.05rem; line-height: 1.4; flex-shrink: 0; }
.kmma-note-success { background: color-mix(in srgb, var(--color-green) 12%, var(--surface)); border-color: color-mix(in srgb, var(--color-green) 32%, var(--line)); }
.kmma-note-danger  { background: color-mix(in srgb, var(--color-rose) 12%, var(--surface)); border-color: color-mix(in srgb, var(--color-rose) 32%, var(--line)); }
.kmma-note-warning { background: color-mix(in srgb, var(--color-amber) 14%, var(--surface)); border-color: color-mix(in srgb, var(--color-amber) 36%, var(--line)); }

/* Estado sutil: punto de color + texto muted (en vez de apilar pills llenos → menos "genérico").
   Reusable: metadatos de estado en cards/listas donde el badge lleno es demasiado peso visual. */
.kmma-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); }
.kmma-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.kmma-status-dot.is-success { background: var(--color-green); }
.kmma-status-dot.is-danger  { background: var(--color-rose); }
.kmma-status-dot.is-warning { background: var(--color-amber); }
.kmma-status-dot.is-secondary { background: var(--muted); }
/* Valor de categoría (Plan, Rol…): texto + ícono muted, SIN pill de color → el color queda reservado para estados. */
.kmma-meta { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--ink); }
.kmma-meta > i { color: var(--muted); }

/* Lista de palabras/tendencias rankeadas — el número ES el ranking (marker teal). Reusada por Mercado + detalle de categoría. */
.kmma-trends-list { padding-left: 1.6rem; margin-bottom: 0; }
.kmma-trends-list li { padding: .32rem 0; line-height: 1.3; }
.kmma-trends-list li::marker { color: var(--color-teal); font-weight: 700; }
.kmma-trends-list a { color: var(--ink); text-decoration: none; }
.kmma-trends-list a:hover { color: var(--color-teal); text-decoration: underline; }

/* Ranking de publicaciones — item propio compacto (NO tabla genérica label:valor), responsive. */
.kmma-rank { display: flex; flex-direction: column; }
.kmma-rank-item { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1.4rem; border-top: 1px solid var(--line); }
.kmma-rank-item:first-child { border-top: none; }
.kmma-rank-pos { flex: 0 0 auto; margin-top: .15rem; }
.kmma-rank-thumb { flex: 0 0 auto; }
.kmma-rank-body { flex: 1 1 auto; min-width: 0; }
.kmma-rank-title { font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.3; }
a.kmma-rank-title:hover { color: var(--color-teal); text-decoration: underline; }
.kmma-rank-seller { color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.kmma-rank-meta { display: flex; flex-wrap: wrap; gap: .2rem .85rem; margin-top: .4rem; }
.kmma-rank-stats { display: flex; flex-wrap: wrap; gap: .15rem 1.1rem; margin-top: .5rem; font-size: .85rem; }
.kmma-rank-stats .lbl { color: var(--muted); margin-right: .25rem; }
.kmma-rank-stats .val { font-weight: 700; }
/* Mobile: ocultar miniatura (da ancho al cuerpo → meta y stats en menos líneas) + padding más justo. */
@media (max-width: 600px) {
  .kmma-rank-thumb { display: none; }
  .kmma-rank-item { padding: .85rem 1rem; }
}

/* Item de lista de conversaciones (Mensajería) — jerarquía clara, una sola superficie, sin badge-soup */
.kmma-conv-list { display: flex; flex-direction: column; gap: .7rem; }
.kmma-conv { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.kmma-conv:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--color-teal) 35%, var(--line)); transform: translateY(-1px); }
.kmma-conv.is-unread { border-left: 3px solid var(--color-teal); background: color-mix(in srgb, var(--color-teal) 5%, var(--surface)); }
.kmma-conv-thumb { width: 52px; height: 52px; flex-shrink: 0; object-fit: cover; border-radius: var(--r-sm); }
.kmma-conv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.kmma-conv-row1 { display: flex; align-items: flex-start; gap: .6rem; }
.kmma-conv-title { flex: 1; min-width: 0; margin: 0; font-size: .92rem; font-weight: 600; line-height: 1.3; color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kmma-conv.is-unread .kmma-conv-title { font-weight: 700; }
.kmma-conv-time { flex-shrink: 0; font-size: .74rem; color: var(--muted); }
.kmma-conv-buyer { font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; }
.kmma-conv-msg { margin: 0; font-size: .84rem; color: var(--muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Form de envío de mensaje (conversación): textarea + Enviar con aire. Fila en desktop, apila en mobile. */
.kmma-msg-form { display: flex; gap: .6rem; align-items: stretch; }
.kmma-msg-form textarea { flex: 1; resize: vertical; min-height: 48px; }
@media (max-width: 575.98px) { .kmma-msg-form { flex-direction: column; } .kmma-msg-form .kmma-btn { align-self: flex-end; } }

/* Item de orden (detalle de venta): thumb + info + precio. En mobile el precio baja a fila completa (separador) */
.kmma-orderitem { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .9rem; }
.kmma-orderitem-thumb { width: 64px; height: 64px; flex-shrink: 0; }
.kmma-orderitem-info { flex: 1; min-width: 130px; }
.kmma-orderitem-price { text-align: right; margin-left: auto; }
@media (max-width: 575.98px) {
  .kmma-orderitem-price { flex-basis: 100%; margin-left: 0; padding-top: .5rem; border-top: 1px dashed var(--line); }
}

/* Header de herramientas: envolver en tablets cuando hay buscador + varias acciones */
@media (max-width: 900px) { .kmma-home-tools { flex-wrap: wrap; } }

/* Integraciones — grilla de tiles de conectores (logo gris = sin conectar, a color = conectado) */
.kmma-int-tiles { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.4rem; }
.kmma-int-tile { width: 165px; min-height: 112px; background: var(--surface, #fff); border: 1.5px solid var(--line); border-radius: 14px; padding: 1rem .9rem; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; }
.kmma-int-tile:hover { border-color: var(--color-teal); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.kmma-int-tile-logo { height: 30px; width: auto; max-width: 126px; object-fit: contain; }
.kmma-int-tile-ico { font-size: 1.85rem; color: var(--color-teal); line-height: 1; }
.kmma-int-tile-name { font-weight: 700; font-size: .88rem; color: var(--ink); }
.kmma-int-tile-status { font-size: .73rem; font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; }
.kmma-int-tile.is-on { border-color: var(--color-teal); }
.kmma-int-tile.is-on .kmma-int-tile-status { color: var(--color-teal); }
.kmma-int-tile.is-off { border-style: dashed; }
.kmma-int-tile.is-off .kmma-int-tile-logo, .kmma-int-tile.is-off .kmma-int-tile-ico { filter: grayscale(1); opacity: .4; }
.kmma-int-tile.is-off .kmma-int-tile-name, .kmma-int-tile.is-off .kmma-int-tile-status { color: var(--muted); }

/* Integraciones — diagrama tipo árbol: kummara.trends al centro, conexiones como ramas */
.kmma-tree { position: relative; width: 100%; max-width: 740px; margin: .5rem auto 1.5rem; aspect-ratio: 16 / 11; overflow: visible; }
.kmma-tree-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.kmma-tree-lines line { stroke: var(--color-teal); stroke-width: .35; stroke-dasharray: 1.4 1.4; }
.kmma-tree-lines line.is-off { stroke: #c9d0d8; }
/* Rama conectada: los puntos "fluyen" hacia el centro (conexión viva). */
.kmma-tree-lines line.is-on { stroke: var(--color-teal); animation: kmmaTreeFlow 1.1s linear infinite; }
.kmma-tree-lines line.connecting { stroke: var(--color-teal); stroke-width: .55; animation: kmmaTreeFlow .55s linear infinite; }
@keyframes kmmaTreeFlow { to { stroke-dashoffset: -2.8; } }
.kmma-tree-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 118px; height: 118px; border-radius: 50%; background: #fff; border: 2px solid var(--color-teal);
  box-shadow: 0 6px 22px rgba(46,184,168,.28); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; text-align: center; }
.kmma-tree-center img { height: 34px; width: auto; }
.kmma-tree-center span { font-size: .7rem; color: var(--color-teal); font-weight: 700; }
.kmma-tree-label { position: absolute; left: 50%; transform: translateX(-50%); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; z-index: 1; }
.kmma-tree-label.top { top: -2px; }
.kmma-tree-label.bottom { bottom: -2px; }
.kmma-tree-node { position: absolute; transform: translate(-50%, -50%); z-index: 2;
  width: 122px; min-height: 58px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: .55rem .55rem; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .28rem; text-align: center; }
.kmma-tree-node:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: var(--shadow-md); border-color: var(--color-teal); z-index: 4; }
.kmma-tree-node.is-popped { z-index: 50; }   /* con el flotante abierto, por encima del centro */
.kmma-tree-node img { height: 22px; width: auto; max-width: 104px; object-fit: contain; }
.kmma-tree-node > i { font-size: 1.35rem; color: var(--color-teal); line-height: 1; }
.kmma-tree-node .nm { font-size: .73rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.kmma-tree-node .stt { font-size: .63rem; font-weight: 700; display: inline-flex; align-items: center; gap: .2rem; }
.kmma-tree-node.is-on { border-color: var(--color-teal); }
.kmma-tree-node.is-on .stt { color: var(--color-teal); }
.kmma-tree-node.is-off { border-style: dashed; }
.kmma-tree-node.is-off img, .kmma-tree-node.is-off > i { filter: grayscale(1); opacity: .42; }
.kmma-tree-node.is-off .nm, .kmma-tree-node.is-off .stt { color: var(--muted); }
.kmma-tree-node.connecting { border-color: var(--color-teal); border-style: solid; box-shadow: 0 0 0 3px rgba(46,184,168,.18); }
.kmma-tree-node.connecting img, .kmma-tree-node.connecting > i { filter: none; opacity: 1; }
.kmma-tree-node.connecting .nm, .kmma-tree-node.connecting .stt { color: var(--color-teal); }
/* Flotante de opciones del nodo (se abre al clickearlo) */
.kmma-tree-pop { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  width: 190px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: .8rem .8rem .55rem; z-index: 30; display: none; text-align: center; cursor: default; }
.kmma-tree-pop.above { top: auto; bottom: calc(100% + 9px); }
.kmma-tree-pop.is-open { display: block; animation: kmmaConnFade .18s ease; }
.kmma-tree-pop::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%) rotate(45deg); width: 11px; height: 11px; background: #fff; border: 1px solid var(--line); }
.kmma-tree-pop:not(.above)::before { top: -6px; border-right: 0; border-bottom: 0; }
.kmma-tree-pop.above::before { bottom: -6px; border-left: 0; border-top: 0; }
.kmma-tree-pop .pop-detail { font-size: .76rem; color: var(--ink-soft, #5a6b68); font-weight: 600; margin-bottom: .6rem; }
.kmma-tree-pop .kmma-btn { width: 100%; margin-bottom: .4rem; justify-content: center; }
/* Modal de configuración (fuente de productos) — abierto desde el nodo del árbol */
@keyframes kmmaModalFade { from { opacity: 0 } to { opacity: 1 } }
.kmma-modal-ov { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(6,16,15,.55); backdrop-filter: blur(3px); z-index: 10500; padding: 1rem; }
.kmma-modal-ov.is-on { display: flex; animation: kmmaModalFade .2s ease; }
.kmma-modal { background: #fff; border-radius: 16px; width: 100%; max-width: 560px; max-height: 86vh; overflow: auto; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.kmma-modal-head { display: flex; align-items: center; gap: .55rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 1; }
.kmma-modal-head .kmma-modal-title { font-weight: 700; font-size: 1.02rem; margin: 0; }
.kmma-modal-head .kmma-modal-title i { color: var(--color-teal); }
.kmma-modal-close { margin-left: auto; background: none; border: 0; font-size: 1.4rem; color: var(--muted); cursor: pointer; line-height: 1; padding: 0 .2rem; }
.kmma-modal-close:hover { color: var(--ink); }
.kmma-modal-body { padding: 1.2rem 1.3rem; }
@media (max-width: 640px) {
  .kmma-tree { aspect-ratio: 3 / 4; max-width: 380px; }
  .kmma-tree-node { width: 92px; padding: .4rem; }
  .kmma-tree-node img { height: 18px; }
  .kmma-tree-center { width: 86px; height: 86px; }
}

/* Utilidades */
.kmma-text-center { text-align: center; } .kmma-text-left { text-align: left; } .kmma-text-right { text-align: right; }
.kmma-mb-0{margin-bottom:0}.kmma-mb-1{margin-bottom:.5rem}.kmma-mb-2{margin-bottom:1rem}.kmma-mb-3{margin-bottom:1.5rem}.kmma-mb-4{margin-bottom:2rem}
.kmma-mt-0{margin-top:0}.kmma-mt-1{margin-top:.5rem}.kmma-mt-2{margin-top:1rem}.kmma-mt-3{margin-top:1.5rem}.kmma-mt-4{margin-top:2rem}
.kmma-p-2{padding:1rem}.kmma-p-3{padding:1.5rem}.kmma-p-4{padding:2rem}

/* ==========================================
   ANIMACIONES
   ========================================== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.kmma-fade-in { animation: fadeInUp 0.6s cubic-bezier(.4,0,.2,1) both; }

/* ==========================================
   ESTÉTICA KUMMARA — Loader de puntos + Alerts
   ========================================== */
.ds-loader-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; }
.ds-loader-wrap p { margin-top: 1rem; color: var(--muted); font-size: .9rem; }
.ds-loader { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ds-loader span { width: 12px; height: 12px; border-radius: 50%; animation: ds-dot-bounce 1.4s ease-in-out infinite; }
.ds-loader span:nth-child(1) { background-color: var(--color-teal);  animation-delay: 0s; }
.ds-loader span:nth-child(2) { background-color: var(--color-green); animation-delay: 0.15s; }
.ds-loader span:nth-child(3) { background-color: var(--color-rose);  animation-delay: 0.3s; }
.ds-loader span:nth-child(4) { background-color: var(--color-amber); animation-delay: 0.45s; }
@keyframes ds-dot-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1.2); opacity: 1; } }

/* AppSwal Loading — spinner dentro del SweetAlert (igual al ERP) */
.ds-loading-popup {
    max-width: 320px !important;
    border-radius: 16px !important;
    padding: 2rem 1.5rem 1.5rem !important;
}
.ds-loading-popup .swal2-html-container { margin: 0 !important; padding: 0 !important; overflow: visible !important; }
.ds-loader-swal { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 0; }
.ds-loader-swal span { width: 14px; height: 14px; border-radius: 50%; animation: ds-dot-bounce 1.4s ease-in-out infinite; }
.ds-loader-swal span:nth-child(1) { background: var(--color-teal, #2eb8a8);  animation-delay: 0s; }
.ds-loader-swal span:nth-child(2) { background: var(--color-green, #22c55e); animation-delay: .15s; }
.ds-loader-swal span:nth-child(3) { background: var(--color-rose, #e6607b);  animation-delay: .3s; }
.ds-loader-swal span:nth-child(4) { background: var(--color-amber, #f59e0b); animation-delay: .45s; }
.ds-loader-msg { margin: .9rem 0 0; color: var(--text, #333); font-size: 1rem; font-weight: 600; }
.ds-loader-sub2 { margin: .35rem 0 0; color: var(--muted, #888); font-size: .82rem; }
/* SweetAlert en modo oscuro */
[data-theme="dark"] .swal2-popup { background: #1e242b; color: #e6e6e6; }
[data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container { color: #e6e6e6; }
[data-theme="dark"] .ds-loader-msg { color: #e6e6e6; }

/* Alerts estilo Kummara (slide-in + sombra) */
.alert { animation: slideInDown 0.3s ease-out; box-shadow: 0 4px 6px rgba(0,0,0,0.08); }
@keyframes slideInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

/* Spinners de Bootstrap en color de marca */
.spinner-border, .spinner-grow { color: var(--color-teal) !important; }

/* ==========================================
   SKIN KUMMARA — igualar al ERP (sidebar blanca, plano, Open Sans)
   ========================================== */
:root {
  --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Open Sans', system-ui, sans-serif;
  --color-teal-dark: #1fa090;
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px;
  --grad-brand: var(--color-teal);
  --grad-hero: var(--color-teal);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
  --shadow-md: 0 8px 25px rgba(0,0,0,0.10);
  --shadow-glow: 0 2px 8px rgba(0,0,0,0.08);
}
h1, h2, h3, h4, h5, h6 { letter-spacing: normal; font-weight: 600; }

/* ---- Sidebar BLANCA ---- */
.kmma-sidebar { background: #ffffff !important; color: #333 !important; border-right: 1px solid #eee; box-shadow: 0 2px 5px rgba(0,0,0,.05); }
.kmma-sidebar::after { display: none !important; }
.kmma-sidebar-brand, .kmma-logo-text, .kmma-logo-text strong { color: var(--color-teal) !important; }
.kmma-logo-mark { background: var(--color-teal); color: #fff; box-shadow: none; }

/* Isotipo kummara.trends como logo */
.kmma-logo-img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.kmma-topbar-brand .kmma-logo-img { width: 28px; height: 28px; }
.kmma-nav-section { color: #9ca3af; font-size: 10px; letter-spacing: 1.2px; }
.kmma-nav-link { color: #333 !important; border-left: 3px solid transparent; border-radius: 6px; font-weight: 500; }
.kmma-nav-link i { color: #606060; opacity: 1; }
.kmma-nav-link:hover { background: rgba(100,100,100,.05); color: #333 !important; transform: none; }
.kmma-nav-link.active { background: rgba(100,100,100,.06) !important; color: var(--color-teal) !important; box-shadow: none; font-weight: 600; }
.kmma-nav-link.active i { color: var(--color-teal); }
.kmma-nav-link:nth-of-type(6n+1):hover { border-left-color: #a8e6cf; }
.kmma-nav-link:nth-of-type(6n+2):hover { border-left-color: #88d8f5; }
.kmma-nav-link:nth-of-type(6n+3):hover { border-left-color: #ffd3b6; }
.kmma-nav-link:nth-of-type(6n+4):hover { border-left-color: #ffaaa5; }
.kmma-nav-link:nth-of-type(6n+5):hover { border-left-color: #d4a5ff; }
.kmma-nav-link:nth-of-type(6n+6):hover { border-left-color: #fff5ba; }
.kmma-sidebar-footer { border-top-color: #eee; }
.kmma-user-avatar { background: rgba(46,184,168,.12); color: var(--color-teal); }
.kmma-user-name { color: #333; }
.kmma-user-meta { color: #888; }
.kmma-theme-switch { color: #888; }
.kmma-theme-switch i { color: #888; }
/* .kmma-logout: estilo unificado con tokens arriba (visible y legible en claro y oscuro) */
.kmma-nav-badge { background: var(--color-rose); }
.theme-toggle { background: #e9ecef; border: 1px solid #dee2e6; }
.theme-toggle[data-enabled="true"] { background: var(--color-teal); border-color: var(--color-teal); }

/* Topbar móvil / guest blancas */
.kmma-topbar, .kmma-guest-topbar { background: #fff !important; color: #333; border-bottom: 1px solid #eee; box-shadow: 0 2px 5px rgba(0,0,0,.05); }
.kmma-topbar-brand { color: var(--color-teal) !important; }
.kmma-burger { background: rgba(46,184,168,.12); color: var(--color-teal); }
/* Créditos: sin pill. Claro = texto oscuro (legible sobre topbar blanca); oscuro = ámbar/oro (regla [data-theme=dark] abajo). */
.kmma-pill-credits { background: none; color: var(--ink); }
.kmma-guest-nav a { color: #555 !important; }
.kmma-guest-nav .kmma-guest-cta { background: var(--color-teal); color: #fff !important; }

/* Cards planas como el ERP */
.kmma-card { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.05); border-color: #eee; }
.kmma-card:hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,.05); border-color: #eee; }
.kmma-card .card-header, .card-header { background: #f8f9fa !important; border-bottom: 1px solid #ddd !important; }
.kmma-card-title i { color: var(--color-teal); }

/* Hero/title planos (sin gradiente) */
.kmma-page-title, .kmma-res-hero, .result-hero { background: var(--color-teal) !important; }
.kmma-page-title::before, .kmma-page-title::after, .kmma-res-hero::before { display: none !important; }

/* Botones sólidos teal */
.btn-primary, .kmma-btn-primary { background: var(--color-teal) !important; border-color: var(--color-teal) !important; box-shadow: none !important; }
.btn-primary:hover, .kmma-btn-primary:hover { background: var(--color-teal-dark) !important; border-color: var(--color-teal-dark) !important; filter: none; }
.btn-primary:focus, .btn:focus, .btn:focus-visible { box-shadow: 0 0 0 3px var(--ring) !important; }

/* Dashboard / acentos planos */
.kmma-stat-ico { background: var(--color-teal); }
.kmma-quick-btn i, .kmma-nav-link.active i { color: var(--color-teal); }

/* ---- Modo oscuro: sidebar oscura (no blanca) ---- */
[data-theme="dark"] .kmma-sidebar { background: var(--surface) !important; color: var(--ink) !important; border-right-color: var(--line); }
[data-theme="dark"] .kmma-nav-link { color: var(--ink-soft) !important; }
[data-theme="dark"] .kmma-nav-link i { color: var(--muted); }
[data-theme="dark"] .kmma-nav-link:hover { background: rgba(255,255,255,.06); color: var(--ink) !important; }
[data-theme="dark"] .kmma-nav-link.active { background: rgba(46,184,168,.14) !important; color: var(--color-teal) !important; }
[data-theme="dark"] .kmma-user-name { color: var(--ink); }
[data-theme="dark"] .kmma-card .card-header, [data-theme="dark"] .card-header { background: var(--surface-2) !important; border-bottom-color: var(--line) !important; }
[data-theme="dark"] .kmma-topbar { background: var(--surface) !important; color: var(--ink); border-bottom-color: var(--line); }
[data-theme="dark"] .kmma-pill-credits { color: var(--color-amber); }

/* ==========================================
   SOBRESCRITURA DE BOOTSTRAP
   ========================================== */
/* Capa puente DS↔Bootstrap: cualquier .btn/.badge/.bg-*/.text-* de Bootstrap que quede
   en una vista sin migrar hereda la paleta plana del DS (mismo look que .kmma-*): SIN
   gradientes, SIN glow, SIN pill, colores exactos --color-*, dark-safe. (Regla #5, ERP plano.) */
.btn { border-radius: var(--r-md); font-weight: 600; }
.btn-lg { padding: 0.8rem 1.8rem; }
.btn-primary { background: var(--color-teal) !important; border: none !important; color: #fff !important; box-shadow: none !important; }
.btn-primary:hover { background: var(--color-teal-dark) !important; color: #fff !important; filter: none; }
.btn-success { background: var(--color-green-dark) !important; border: none !important; color: #fff !important; }
.btn-success:hover { filter: brightness(1.06); color: #fff !important; }
.btn-danger { background: var(--color-rose-dark) !important; border: none !important; color: #fff !important; }
.btn-danger:hover { filter: brightness(1.06); color: #fff !important; }
.btn-warning { background: var(--color-amber) !important; border: none !important; color: #1d1730 !important; }
.btn-warning:hover { filter: brightness(0.96); color: #1d1730 !important; }
.btn-info { background: var(--color-cyan) !important; border: none !important; color: #08312e !important; }
.btn-info:hover { filter: brightness(0.96); color: #08312e !important; }
.btn-secondary { background: var(--surface) !important; border: 1.5px solid var(--line) !important; color: var(--color-teal) !important; }
.btn-secondary:hover { background: var(--surface-2) !important; color: var(--color-teal-dark) !important; }
.btn-outline-secondary { border: 1.5px solid var(--line) !important; color: var(--ink) !important; }
.btn-outline-secondary:hover { background: var(--color-teal) !important; border-color: var(--color-teal) !important; color: #fff !important; }
.btn-outline-danger { border: 1.5px solid var(--color-rose) !important; color: var(--color-rose-dark) !important; }
.btn-outline-danger:hover { background: var(--color-rose-dark) !important; border-color: var(--color-rose-dark) !important; color: #fff !important; }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 3px var(--ring) !important; }

.text-primary { color: var(--color-teal) !important; }
.bg-primary { background: var(--color-teal) !important; color: #fff !important; }
.badge { border-radius: var(--r-xs); padding: 0.4rem 0.7rem; font-weight: 700; }
.badge.bg-primary   { background: var(--color-teal) !important; color: #fff !important; }
.badge.bg-success   { background: var(--color-green-dark) !important; color: #fff !important; }
.badge.bg-danger    { background: var(--color-rose-dark) !important; color: #fff !important; }
.badge.bg-warning   { background: var(--color-amber) !important; color: #1d1730 !important; }
.badge.bg-secondary { background: var(--surface-3) !important; color: var(--ink) !important; }
.badge.bg-info      { background: var(--color-cyan) !important; color: #08312e !important; }
.badge.bg-light     { background: var(--surface-2) !important; color: var(--ink) !important; border: 1px solid var(--line); }
.badge.bg-dark      { background: var(--ink) !important; color: #fff !important; }
.w-fit { width: fit-content !important; max-width: 100%; }   /* badge que abraza su contenido (no se estira en flex-column) */
.text-success { color: var(--color-green-dark) !important; }
.text-danger  { color: var(--color-rose-dark) !important; }
.text-warning { color: var(--color-amber-dark, #b45309) !important; }
.text-info    { color: var(--color-cyan-dark, #0e7490) !important; }
/* Rellenos de progress-bar semánticos → paleta DS (scoped a .progress-bar para no pisar tarjetas tintadas .bg-*) */
.progress-bar.bg-success { background-color: var(--color-green) !important; }
.progress-bar.bg-warning { background-color: var(--color-amber) !important; }
.progress-bar.bg-danger  { background-color: var(--color-rose) !important; }
.btn.btn-primary:hover, .btn.btn-success:hover, .btn.btn-danger:hover { filter: brightness(1.06); color: #fff; }
.btn.btn-warning:hover { filter: brightness(1.04); color: #1d1730; }
.btn.btn-info:hover    { filter: brightness(1.04); color: #08312e; }
.btn.btn-outline-primary { color: var(--color-teal); border-color: var(--color-teal); }
.btn.btn-outline-primary:hover { background: var(--color-teal); border-color: var(--color-teal); color: #fff; }
.btn.btn-outline-success { color: var(--color-green); border-color: var(--color-green); }
.btn.btn-outline-success:hover { background: var(--color-green); border-color: var(--color-green); color: #fff; }
.btn.btn-outline-danger { color: var(--color-rose); border-color: var(--color-rose); }
.btn.btn-outline-danger:hover { background: var(--color-rose); border-color: var(--color-rose); color: #fff; }
.btn.btn-outline-secondary { color: var(--muted); border-color: var(--line); }
.btn.btn-outline-secondary:hover { background: var(--surface-2); border-color: var(--ink); color: var(--ink); }
.btn.btn-outline-info { color: #2a9d94; border-color: #83d5cf; }
.btn.btn-outline-info:hover { background: #83d5cf; border-color: #83d5cf; color: #08312e; }
.spinner-border { color: var(--violet) !important; }

/* ==========================================
   THEME TOGGLE
   ========================================== */
.theme-toggle {
  position: relative;
  width: 44px; height: 24px;
  background: rgba(255,255,255,0.25);
  border: none;
  border-radius: 99px;
  cursor: pointer;
  transition: background var(--transition-fast);
  outline: none;
}
.theme-toggle[data-enabled="true"] { background: rgba(0,0,0,0.35); }
.theme-toggle-button {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.theme-toggle[data-enabled="true"] .theme-toggle-button { transform: translateX(20px); }

/* ==========================================
   COMPONENTES BOOTSTRAP + MODO OSCURO
   ========================================== */
.card {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--r-lg) !important;
  color: var(--text-color) !important;
}
.card-header, .card-body, .card-footer { background-color: transparent !important; color: var(--text-color) !important; }
.card-header, .card-footer { border-color: var(--border-color) !important; }
.navbar { background-color: var(--navbar-bg) !important; }

.form-control, .form-select {
  background-color: var(--input-bg) !important;
  border: 1.5px solid var(--border-color) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-color) !important;
  transition: var(--transition-fast);
}
.form-control:focus, .form-select:focus {
  background-color: var(--input-bg) !important;
  border-color: var(--violet) !important;
  color: var(--text-color) !important;
  box-shadow: 0 0 0 4px var(--ring) !important;
}
.form-control::placeholder { color: var(--muted) !important; opacity: 1; }

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus { border-color: var(--violet) !important; box-shadow: 0 0 0 4px var(--ring) !important; }
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--muted) !important; opacity: 1; }

.form-check-input { border-color: var(--line); }
.form-check-input:checked { background-color: var(--violet) !important; border-color: var(--violet) !important; }
.form-check-input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px var(--ring); }
[data-theme="dark"] .form-check-input { background-color: var(--surface-2) !important; border-color: var(--line) !important; }
[data-theme="dark"] .form-check-input:checked { background-color: var(--violet) !important; border-color: var(--violet) !important; }

/* Acordeón */
.accordion { --bs-accordion-border-color: var(--line); }
.accordion-item { background-color: var(--surface) !important; border-color: var(--line) !important; }
.accordion-item:first-of-type { border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }
.accordion-button {
  background-color: var(--surface) !important;
  color: var(--text-color) !important;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
  background-color: var(--surface-2) !important;
  color: var(--violet-700) !important;
  box-shadow: inset 0 -1px 0 var(--line) !important;
}
.accordion-button:focus { border-color: var(--line) !important; box-shadow: 0 0 0 4px var(--ring) !important; }
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237c3aed' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
[data-theme="dark"] .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a78bfa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-body { background-color: var(--surface) !important; color: var(--text-color) !important; }

.form-label, label { color: var(--text-color) !important; font-weight: 600; }
.text-muted, [data-theme="dark"] .text-muted { color: var(--muted) !important; }

[data-theme="dark"] .kmma-card,
[data-theme="dark"] .kmma-card-modern { background-color: var(--surface) !important; border-color: var(--line) !important; color: var(--text-color) !important; }

/* Tabs */
.nav-tabs { border-color: var(--line) !important; }
.nav-tabs .nav-link { background: transparent !important; color: var(--text-secondary) !important; border: none !important; font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--violet) !important; }
.nav-tabs .nav-link.active { color: var(--violet-700) !important; font-weight: 700; border: none !important; border-bottom: 2.5px solid var(--violet) !important; }

.bg-light { background-color: var(--surface-2) !important; color: var(--text-color) !important; }
[data-theme="dark"] .bg-light { background-color: var(--surface-2) !important; color: var(--text-color) !important; }
[data-theme="dark"] .bg-white { background-color: var(--surface) !important; color: var(--text-color) !important; }
[data-theme="dark"] .footer { background-color: var(--indigo-900) !important; color: var(--text-color) !important; }

/* Alertas Bootstrap */
.alert { border-radius: var(--r-md); border: 1px solid var(--line); border-left-width: 4px; }
.alert-info { background: var(--surface-2) !important; border-left-color: var(--violet) !important; color: var(--text-color) !important; }
.alert-success { background: var(--surface-2) !important; border-left-color: #22c55e !important; color: var(--text-color) !important; }
.alert-warning { background: var(--surface-2) !important; border-left-color: #f59e0b !important; color: var(--text-color) !important; }
.alert-danger { background: var(--surface-2) !important; border-left-color: #f43f5e !important; color: var(--text-color) !important; }

/* Input-group */
.input-group-text { background-color: var(--surface-2) !important; border-color: var(--line) !important; color: var(--text-color) !important; }
[data-theme="dark"] .input-group .btn { border-color: var(--line) !important; }

/* Modales */
.modal-content { background-color: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important; color: var(--text-color) !important; box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { background-color: transparent !important; border-color: var(--line) !important; color: var(--text-color) !important; }
.modal-body { background-color: transparent !important; color: var(--text-color) !important; }
.modal-title { color: var(--text-color) !important; font-family: var(--font-display); font-weight: 700; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

/* Listas */
.list-group-item { background-color: var(--surface) !important; border-color: var(--line) !important; color: var(--text-color) !important; }
.list-group-item:hover { background-color: var(--surface-2) !important; }

/* Tablas Bootstrap — respetan el tema (claro/oscuro) y letra compacta */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-color);
  --bs-table-striped-bg: var(--surface-2);
  --bs-table-striped-color: var(--text-color);
  --bs-table-hover-bg: rgba(46,184,168,0.10);
  --bs-table-hover-color: var(--text-color);
  --bs-table-border-color: var(--line);
  color: var(--text-color) !important;
  font-size: 0.82rem;
}
.table td, .table th { border-color: var(--line) !important; padding: 0.5rem 0.6rem; vertical-align: middle; }
.table thead th {
  background-color: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--text-color) !important;
  font-weight: 700;
  font-size: 0.72rem;
}
.table-hover > tbody > tr:hover > * { background-color: var(--bs-table-hover-bg) !important; color: var(--text-color) !important; }
.table a:not(.kmma-act) { color: var(--color-teal) !important; }
.table a:hover:not(.kmma-act) { color: var(--color-teal-dark) !important; }

/* Modo oscuro: forzar fondo transparente (heredar la card) y texto claro */
[data-theme="dark"] .table,
[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent !important; color: var(--ink) !important; }
[data-theme="dark"] .table thead th { background-color: var(--surface-2) !important; }
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.03) !important; }
/* Hover neutro (lift), NO teal: el fondo teal chocaba con valores text-teal/-green/-amber → ilegible. Mantiene el color natural de cada celda. */
[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,0.07) !important; }

/* Filas con énfasis → tintes violeta/verde */
.table tr.table-warning, .table tr.table-warning > * { background-color: rgba(245,158,11,0.14) !important; }
.table tr.table-success, .table tr.table-success > * { background-color: rgba(34,197,94,0.14) !important; }
.table tr.table-primary, .table tr.table-primary > * { background-color: rgba(46,184,168,0.12) !important; }
/* Claro: el valor/ícono coloreado de filas tintadas necesita variante -dark (ámbar/verde sobre su propio tinte claro = bajo contraste, "no se lee"). */
:root:not([data-theme="dark"]) .table tr.table-warning .text-amber { color: var(--color-amber-dark) !important; }
:root:not([data-theme="dark"]) .table tr.table-success .text-green { color: var(--color-green-dark) !important; }
[data-theme="dark"] .table tr.table-warning, [data-theme="dark"] .table tr.table-warning > * { background-color: rgba(245,158,11,0.16) !important; color: var(--ink) !important; }
[data-theme="dark"] .table tr.table-success, [data-theme="dark"] .table tr.table-success > * { background-color: rgba(34,197,94,0.16) !important; color: var(--ink) !important; }
[data-theme="dark"] .table tr.table-primary, [data-theme="dark"] .table tr.table-primary > * { background-color: rgba(46,184,168,0.18) !important; color: var(--ink) !important; }

/* ==========================================
   RESPONSIVO — Sidebar off-canvas en móvil
   ========================================== */
@media (max-width: 991.98px) {
  .has-sidebar .kmma-content { margin-left: 0; }
  .kmma-sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
  }
  .kmma-sidebar.is-open { transform: translateX(0); }
}

@media (min-width: 992px) {
  .kmma-topbar { display: none !important; }
}

@media (max-width: 768px) {
  .kmma-page-title { padding: 0.9rem 1.1rem; }
  .kmma-page-title h1 { font-size: 1.9rem; }
  .kmma-footer-links { gap: 1rem; }
}

/* ==========================================
   HOME — Calculadora compacta (form + resultado)
   ========================================== */
.kmma-home { width: 100%; max-width: 1600px; margin: 0 auto; padding: 1.7rem 1.6rem 2.2rem; }

.kmma-home-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.kmma-home-title h1 {
  font-size: 1.55rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.25;
}
.kmma-home-title p { color: var(--muted); font-size: .88rem; margin: .4rem 0 0; line-height: 1.5; }
.kmma-home-tools { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.kmma-mlsearch {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: .4rem .95rem;
  box-shadow: var(--shadow-sm);
  min-width: 240px;
}
.kmma-mlsearch i { color: var(--violet); font-size: .9rem; }
.kmma-mlsearch input {
  border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: .85rem; color: var(--ink);
  flex: 1; min-width: 0;
}

/* Zona de trabajo: 2 columnas */
.kmma-work {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 1rem;
  align-items: start;
}

.kmma-form-card { display: flex; flex-direction: column; }
.kmma-form-card .card-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.kmma-card-title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; }
.kmma-card-title i { color: var(--color-teal); margin-right: .15rem; }
.kmma-config { margin-left: auto; display: flex; gap: .4rem; }
.kmma-config .form-select-sm, .kmma-config .form-control-sm { max-width: 165px; font-size: .78rem; }

/* Pestañas */
.kmma-tabs {
  display: flex;
  gap: .3rem;
  padding: .75rem 1.1rem 0;
}
.kmma-tab {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .84rem;
  color: var(--muted);
  padding: .45rem .9rem;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--transition-fast);
}
.kmma-tab:hover:not(.active) { color: var(--ink); }
.kmma-tab.active { background: var(--surface-2); color: var(--violet-700); }

.kmma-tab-body { padding: .9rem 1.1rem .4rem; min-height: 232px; }
.kmma-tab-panel { display: none; animation: fadeInUp .3s ease both; }
.kmma-tab-panel.active { display: block; }

/* ===== Patrón de filtros de lista (Preguntas = referencia) ===== */
.kmma-listfilters { margin-bottom: 1.1rem; }
.kmma-tabs-status { padding: 0; gap: .25rem; flex-wrap: wrap; align-items: center; }
a.kmma-tab { text-decoration: none; }
.kmma-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 .35rem; margin-left: .35rem; background: var(--line); color: var(--ink-soft); border-radius: 99px; font-size: .7rem; font-weight: 700; }
.kmma-tab.active .kmma-tab-count { background: var(--color-teal); color: #fff; }
.kmma-morefilters-btn { border: none; background: transparent; color: var(--muted); font-family: var(--font-body); font-weight: 700; font-size: .82rem; padding: .45rem .8rem; border-radius: var(--r-md); cursor: pointer; margin-left: auto; transition: var(--transition-fast); display: inline-flex; align-items: center; }
.kmma-morefilters-btn:hover, .kmma-morefilters-btn.active { color: var(--color-teal); background: var(--surface-2); }
.kmma-morefilters { margin-top: .7rem; padding: .9rem 1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.kmma-morefilters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem .9rem; align-items: end; }
.kmma-mf-field label { margin-bottom: .25rem; color: var(--muted); font-weight: 600; }
.kmma-mf-apply { align-self: end; }
.kmma-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .7rem; }
.kmma-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft); font-size: .76rem; font-weight: 600; padding: .22rem .3rem .22rem .65rem; border-radius: 99px; }
.kmma-chip i { color: var(--color-teal); font-size: .8rem; }
.kmma-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--line); color: var(--ink-soft); text-decoration: none; font-size: 1rem; line-height: 1; transition: var(--transition-fast); }
.kmma-chip-x:hover { background: var(--color-rose); color: #fff; }
.kmma-chips-clear { font-size: .76rem; font-weight: 700; color: var(--color-rose); text-decoration: none; margin-left: .25rem; }
.kmma-chips-clear:hover { text-decoration: underline; }
.kmma-listfilters-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kmma-listfilters-bar .kmma-morefilters-btn { margin-left: 0; }
.kmma-lastsync { margin-top: .7rem; color: var(--muted); font-size: .78rem; }
.kmma-lastsync i { color: var(--color-teal); }
/* ===== Cards de preguntas (rediseño + Kummi) ===== */
.kmma-questions { display: flex; flex-direction: column; }
.kmma-question-card { position: relative; padding: 1.25rem 1.35rem; transition: border-color .15s, box-shadow .15s; }
.kmma-question-card:hover { box-shadow: var(--shadow-sm); }
.kmma-question-card.is-unanswered { border-left: 3px solid var(--color-teal); }

/* Producto — fila liviana, sin caja gris */
.kds-qproduct { display: flex; align-items: center; gap: .85rem; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); }
.kds-qproduct-thumb { width: 52px; height: 52px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
.kds-qproduct-thumb--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); border: 1px solid var(--line); font-size: 1.1rem; }
.kds-qproduct-info { min-width: 0; flex: 1; }
.kds-qproduct-title { font-weight: 600; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.kds-qproduct-title i { font-size: .78rem; color: var(--muted); }
.kds-qproduct-title:hover, .kds-qproduct-title:hover i { color: var(--color-teal); }
.kds-qproduct-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; margin-top: .2rem; font-size: .8rem; }
.kds-qproduct-price { font-weight: 700; color: var(--ink); }
.kds-meta-dim { color: var(--muted); }

/* Bloque de la pregunta */
.kds-qhead { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; }
.kds-qbuyer { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: .9rem; }
.kds-qbuyer i { color: var(--color-teal); }
.kds-qbuyer-name { color: var(--color-teal); font-weight: 700; }
.kds-qtime { color: var(--muted); font-size: .8rem; }
.kds-qtext { margin: 0; color: var(--ink); font-size: .98rem; line-height: 1.5; }

/* Respuesta ya enviada */
.kds-answer { margin-top: .9rem; padding: .8rem .95rem; background: var(--surface-2); border-radius: var(--r-md); border-left: 3px solid var(--color-teal); }
.kds-answer-label { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-teal); font-weight: 700; font-size: .82rem; margin-bottom: .25rem; }

/* ===== Mascota Kummi (cara de la IA) ===== */
.kds-kummi { display: inline-block; line-height: 0; flex-shrink: 0; }
.kds-kummi img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kds-kummi--bob { animation: kdsKummiBob 3.2s ease-in-out infinite; }
@keyframes kdsKummiBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Sprite animado (4 frames) — una sola instancia (empty states / loaders) */
.kds-kummi-sprite { position: relative; display: block; animation: kdsKummiBounce .7s ease-in-out infinite; }
.kds-kummi-sprite img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; animation: kdsKummiCycle 1.6s steps(1) infinite; }
.kds-kummi-sprite img:nth-child(1) { animation-delay: 0s; }
.kds-kummi-sprite img:nth-child(2) { animation-delay: -1.2s; }
.kds-kummi-sprite img:nth-child(3) { animation-delay: -0.8s; }
.kds-kummi-sprite img:nth-child(4) { animation-delay: -0.4s; }
@keyframes kdsKummiCycle { 0%, 25% { opacity: 1; } 25.01%, 100% { opacity: 0; } }
@keyframes kdsKummiBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.kds-kummi-empty { width: 92px; height: 92px; margin: 0 auto; }

/* ===== Kummi sugiere (respuestas IA) ===== */
.kds-suggest { margin-top: 1rem; padding: .9rem 1rem 1rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--color-teal) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--color-teal) 20%, var(--surface)); }
.kds-suggest-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.kds-suggest-head .kds-kummi { width: 40px; height: 40px; }
.kds-suggest-title { font-weight: 700; color: var(--color-teal); font-size: .92rem; line-height: 1.15; }
.kds-suggest-title small { display: block; font-weight: 500; color: var(--muted); font-size: .75rem; margin-top: .1rem; }
.kds-suggest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.kds-suggest-card { display: flex; flex-direction: column; gap: .5rem; padding: .7rem .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; transition: var(--transition-fast); }
.kds-suggest-card:hover { border-color: var(--color-teal); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kds-suggest-card p { margin: 0; font-size: .85rem; color: var(--ink); line-height: 1.4; }
.kds-suggest-conf { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; color: var(--muted); font-size: .74rem; }
.kds-suggest-conf .kds-kummi { width: 20px; height: 20px; }

/* Miniatura de listado (44px) + placeholder sin imagen (dark-safe, reusable) */
.kds-thumb { width: 44px; height: 44px; object-fit: contain; border-radius: var(--r-sm); flex-shrink: 0; }
/* Sin imagen: SOLO el ícono (sin borde ni fondo — el recuadro robaba espacio/peso visual). */
.kds-thumb-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.6rem; background: none; border: none; }

/* Acción "volver" al pie de página: full-width en mobile (no queda huérfana a la izquierda) */
@media (max-width: 600px) { .kmma-btn-back-m { display: flex; width: 100%; justify-content: center; } }

/* Grid de campos */
.kmma-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem; }
.kmma-grid.three { grid-template-columns: 1fr 1fr 1fr; margin-top: .4rem; }
.kmma-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.kmma-field.full { grid-column: 1 / -1; }
.kmma-field > label {
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0;
}
.kmma-field .hint { color: var(--muted); font-weight: 500; }
.kmma-check { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; }
.kmma-check .form-check-input { margin: 0; float: none; }
.kmma-check label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin: 0; }
.kmma-subtitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  color: var(--violet-700);
  padding-top: .5rem;
  border-top: 1px dashed var(--line);
}

.kmma-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .9rem 1.1rem 1.1rem;
  border-top: 1px solid var(--line);
}

/* Cuerpo de formularios de configuración (Fiscal, Integraciones) con márgenes cómodos */
/* Layout 2 columnas (form + aside) que apila en mobile — reemplaza el inline grid que no apilaba */
.kmma-2col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.4rem; align-items: start; }
@media (max-width: 900px) { .kmma-2col { grid-template-columns: 1fr; } }

.kmma-settings-body { padding: 1.4rem 1.6rem 1rem; }
.kmma-settings-body .kmma-grid { gap: .85rem 1.1rem; }
.kmma-settings-body .kmma-subtitle { margin-top: 1rem; padding-top: .9rem; }
.kmma-settings-body > .kmma-grid + .kmma-grid { margin-top: .6rem; }
/* Alinea los inputs aunque el label ocupe 1 o 2 líneas (evita el desnivel del hint) */
.kmma-settings-body .kmma-field > label {
  min-height: 2.6em;
  line-height: 1.2;
}
.kmma-settings-body .kmma-field.full > label { min-height: 0; }

/* Columna de resultado */
.kmma-result-col {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  scrollbar-width: thin;
}
.kmma-result-col::-webkit-scrollbar { width: 6px; }
.kmma-result-col::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; }
/* Compactar las tarjetas que inyecta el JS en el resultado */
.kmma-result-col .card { margin-bottom: .8rem !important; }
.kmma-result-col .card-header h4 { font-size: .95rem; margin: 0; }
.kmma-result-col .list-group-item { padding: .5rem .9rem; font-size: .85rem; }

.kmma-result-empty {
  background: var(--surface);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
  text-align: center;
  padding: 2.2rem 1.4rem;
  color: var(--muted);
}
.kmma-result-ico {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--violet);
  font-size: 1.5rem;
  margin-bottom: .8rem;
}
.kmma-result-empty h3 { font-size: 1.05rem; color: var(--ink); margin-bottom: .35rem; }
.kmma-result-empty p { font-size: .85rem; margin: 0; }

/* Hero del resultado (estilo mockup) */
.kmma-res-summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: .85rem;
  animation: fadeInUp .4s ease both;
}
.kmma-res-hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-hero);
  color: #fff;
  padding: 1.1rem 1.2rem;
}
.kmma-res-hero::before {
  content: "";
  position: absolute;
  top: -50%; right: -10%;
  width: 13rem; height: 13rem;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%);
  border-radius: 50%;
}
.kmma-res-lbl {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  opacity: .88;
}
.kmma-res-big {
  position: relative;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.kmma-res-big.neg { color: #ffe1e1; }
.kmma-res-sub { font-size: .78rem; opacity: .9; }
.kmma-res-tags { position: relative; margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.kmma-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .7rem; font-weight: 700;
  padding: .25rem .6rem; border-radius: 99px;
  background: rgba(255,255,255,.18); color: #fff;
  backdrop-filter: blur(2px);
}
.kmma-tag.ok { background: rgba(34,197,94,.92); }
.kmma-tag.cal { background: rgba(46,184,168,.95); }
.kmma-tag.warn { background: rgba(245,158,11,.92); color: #1d1730; }
.kmma-res-rent { padding: .85rem 1.2rem 1rem; }
.kmma-res-rent-top {
  display: flex; justify-content: space-between;
  font-size: .74rem; font-weight: 700;
  color: var(--ink-soft); margin-bottom: .4rem;
}
.kmma-res-bar {
  height: 24px;
  background: var(--surface-3);
  border-radius: 99px;
  position: relative;
  overflow: hidden;
}
.kmma-res-fill {
  height: 100%;
  background: linear-gradient(to right, #f43f5e, #f59e0b, #22c55e);
  transition: width 1s ease-in-out;
}
.kmma-res-pct {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  line-height: 24px;
  font-size: .76rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #1d1730;
  text-shadow: 0 0 4px rgba(255,255,255,.85);
}

/* Resultados ML bajo el buscador */
#ml_results:not(:empty) { margin-bottom: .9rem; }

/* ===== DASHBOARD ===== */
.kmma-dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.kmma-stat { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; }
.kmma-stat-ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--grad-brand); color: #fff; font-size: 1.25rem;
}
.kmma-stat-lbl { display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.kmma-stat-val { display: block; font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.kmma-stat-val small { font-size: .7rem; color: var(--muted); font-weight: 600; }
.kmma-stat-sub { display: block; font-size: .76rem; color: var(--ink-soft); }

.kmma-quick { padding-bottom: .4rem; }
.kmma-quick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem; padding: 1rem 1.2rem 1.2rem; }
.kmma-quick-btn {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1.1rem .6rem; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer;
  font-weight: 600; font-size: .82rem; text-align: center; transition: var(--transition-fast);
}
.kmma-quick-btn i { font-size: 1.4rem; color: var(--violet); }
.kmma-quick-btn:hover { transform: translateY(-2px); border-color: var(--violet); box-shadow: var(--shadow-sm); color: var(--ink); }

@media (max-width: 1100px) { .kmma-dash-grid { grid-template-columns: repeat(2, 1fr); } .kmma-quick-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .kmma-dash-grid { grid-template-columns: 1fr; } .kmma-quick-grid { grid-template-columns: repeat(2, 1fr); } }

/* Celda de precio: ícono calculadora + input alineados */
.kmma-price-cell { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; }

/* Ícono calculadora (sin círculo, teal) */
.kmma-calc-dot {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: auto; height: auto; padding: 2px; margin: 0;
  border: none; background: transparent; color: var(--color-teal);
  cursor: pointer; font-size: 1.05rem; line-height: 1; transition: var(--transition-fast);
}
.kmma-calc-dot:hover { color: var(--color-teal-dark); transform: scale(1.18); }

/* Precio clickeable en el resultado de la calculadora */
.kmma-price-pick {
  cursor: pointer; border-bottom: 1.5px dashed var(--violet); color: var(--violet-700);
  font-weight: 800; transition: var(--transition-fast); border-radius: 4px; padding: 0 .15rem;
}
.kmma-price-pick:hover { background: rgba(46,184,168,.12); }

/* Resaltado de fila al aplicar un precio */
.kmma-row-updated > * { background: rgba(34,197,94,.16) !important; transition: background .4s ease; }

/* Tags de publicaciones (descuento / cuotas / envío) */
.kmma-pub-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .35rem; }
.kmma-pub-tags .kmma-badge { font-size: .68rem; padding: .18rem .5rem; }

/* Foto + datos de la publicación */
.kmma-pub-cell { display: flex; align-items: center; gap: .85rem; }
.kmma-pub-thumb {
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: var(--r-sm); object-fit: cover;
  border: 1px solid var(--line); background: var(--surface-2);
}
.kmma-pub-thumb-empty { display: grid; place-items: center; color: var(--muted); font-size: 1.1rem; }
.kmma-pub-info { min-width: 0; }

/* Tabla de publicaciones — con aire (filas cómodas, datos respirando) */
.kmma-pubs-table td, .kmma-pubs-table th { padding: .8rem .7rem; vertical-align: middle; }
.kmma-pubs-table th { font-size: .74rem; }
.kmma-pub-title { font-size: .9rem; font-weight: 600; line-height: 1.3; margin-bottom: .15rem; }
.kmma-pub-meta { font-size: .76rem; }
.kmma-pub-erp { display: flex; align-items: center; gap: .55rem; }
.kmma-pub-erp-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; gap: .1rem; }
.kmma-pub-auto { font-size: .66rem; font-weight: 700; color: var(--color-amber); text-transform: uppercase; letter-spacing: .03em; display: inline-flex; align-items: center; gap: .2rem; }
.kmma-pub-flag { font-size: .74rem; font-weight: 700; color: var(--color-rose); display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.kmma-pub-tags { margin-top: .45rem; gap: .4rem; }
.kmma-pub-tags .kmma-badge { font-size: .66rem; padding: .16rem .45rem; }
.kmma-pubs-table .form-control-sm { font-size: .82rem; padding: .35rem .55rem; }
.kmma-pubs-table .btn-sm { font-size: .76rem; padding: .4rem .7rem; }

/* Paginación */
.kmma-pub-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.kmma-pagination { display: flex; gap: .3rem; }
.kmma-page-btn {
  display: inline-grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 .55rem;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: .85rem; text-decoration: none;
  transition: var(--transition-fast);
}
.kmma-page-btn:hover { background: var(--surface-2); border-color: var(--violet); }
.kmma-page-btn.active { background: var(--grad-brand); color: #fff; border-color: transparent; }
.kmma-page-btn.disabled { opacity: .4; pointer-events: none; }

/* Reconciliación */
.kmma-recon-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.kmma-recon-stat { padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .25rem; }
.kmma-recon-stat .lbl { font-size: .76rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kmma-recon-stat .val { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--ink); }
.kmma-recon-stat .val.pos { color: #16a34a; }
.kmma-recon-stat .val.neg { color: #e11d48; }
.kmma-recon-title { font-weight: 600; }
@media (max-width: 760px) { .kmma-recon-cards { grid-template-columns: 1fr; } }

/* Reclamos (Claims) */
.kmma-claims-filters { display: flex; gap: .4rem; margin: 0 0 1rem; flex-wrap: wrap; }
.kmma-claims-filters .kmma-tab { text-decoration: none; }
.kmma-claims-list { display: flex; flex-direction: column; gap: .8rem; }
.kmma-claim { padding: 1rem 1.2rem; }
.kmma-claim-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.kmma-claim-id { font-family: var(--font-display); font-weight: 800; margin-right: .4rem; }
.kmma-claim-meta { color: var(--muted); font-size: .8rem; margin-left: .35rem; }
.kmma-claim-date { color: var(--muted); font-size: .76rem; }
.kmma-claim-msg {
  background: var(--surface-2);
  border-left: 3px solid var(--violet);
  border-radius: 8px;
  padding: .65rem .85rem;
  margin-top: .7rem;
  font-size: .88rem;
}
.kmma-claim-answer {
  background: rgba(34,197,94,.10);
  border-left: 3px solid #22c55e;
  border-radius: 8px;
  padding: .65rem .85rem;
  margin-top: .7rem;
  font-size: .86rem;
}
.kmma-claim-form { margin-top: .7rem; display: flex; flex-direction: column; gap: .5rem; }
.kmma-claim-form-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.kmma-claim-form-actions .form-select-sm { max-width: 160px; }

/* Responsivo: una sola columna */
@media (max-width: 1100px) {
  .kmma-work { grid-template-columns: 1fr; }
  .kmma-result-col { position: static; max-height: none; }
}
@media (max-width: 600px) {
  .kmma-grid, .kmma-grid.three { grid-template-columns: 1fr; }
  .kmma-home-tools { width: 100%; flex-wrap: wrap; }
  .kmma-home-tools > form { flex: 1 1 100%; display: flex; }
  .kmma-mlsearch { flex: 1 1 100%; min-width: 0; }
}

/* Tablas → cards en mobile (mejor UX que el scroll horizontal) */
@media (max-width: 600px) {
  table.kmma-cards-sm, table.kmma-cards-sm tbody, table.kmma-cards-sm tr, table.kmma-cards-sm td { display: block; width: 100%; }
  table.kmma-cards-sm thead { display: none; }
  table.kmma-cards-sm tr { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: .7rem .85rem; margin-bottom: .7rem; box-shadow: var(--shadow-sm); }
  table.kmma-cards-sm td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .34rem 0; border: none !important; text-align: right; }
  table.kmma-cards-sm td::before { content: attr(data-label); font-weight: 600; color: var(--muted); font-size: .74rem; text-align: left; white-space: nowrap; flex: 0 0 auto; }
  table.kmma-cards-sm td:not([data-label])::before { content: none; }
  table.kmma-cards-sm td.kmma-cards-head { display: block; text-align: left; padding: 0 0 .5rem; margin-bottom: .4rem; border-bottom: 1px solid var(--line) !important; }
  table.kmma-cards-sm td.kmma-cards-head::before { content: none; }
  table.kmma-cards-sm td.kmma-cards-hide { display: none; }
  table.kmma-cards-sm td:empty { display: none; }
  /* Grupos de chips en celda: alinear a la derecha en card mobile (consistente con los demás valores) */
  table.kmma-cards-sm td .kmma-oportunidades { justify-content: flex-end; }
}

/* ==========================================
   LOGIN — fondo con imagen + íconos en input + ojo de contraseña + Google
   (estilo tomado de todocontador como referencia)
   ========================================== */
/* Fondo: imagen difuminada + overlay SUAVE (la imagen tiene que verse) */
.kmma-auth-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--indigo-900); }
.kmma-auth-bg::before { content: ""; position: absolute; inset: -24px; background: url(/img/auth-bg.jpg) center/cover no-repeat; filter: blur(5px) brightness(.92); }
.kmma-auth-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(13,40,36,.26) 0%, rgba(15,23,42,.40) 100%); }

/* Card de auth LIMPIA (una sola superficie blanca, título arriba — formato todocontador, sin franja gris de header) */
.kmma-auth-card { background: var(--surface); border-radius: var(--r-md); box-shadow: 0 24px 60px rgba(0,0,0,.40); padding: 34px 30px; }
.kmma-auth-title { font-size: 1.5rem; font-weight: 700; text-align: center; margin: 0 0 6px; color: var(--ink); }
.kmma-auth-subtitle { color: var(--muted); text-align: center; margin: 0 0 22px; font-size: .9rem; }
.kmma-auth-footer { text-align: center; margin-top: 18px; color: var(--ink-soft); font-size: .9rem; }
.kmma-auth-footer p { margin: 0 0 6px; }
.kmma-auth-footer a { color: var(--color-teal); font-weight: 600; }

/* Ícono dentro del input (izquierda) */
.kmma-input-icon { position: relative; }
.kmma-input-icon > .bi:first-child { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1rem; line-height: 1; pointer-events: none; z-index: 2; }
.kmma-input-icon .kmma-form-control { padding-left: 40px; }

/* Ojo mostrar/ocultar contraseña, integrado dentro del input (derecha) */
.kmma-input-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; padding: 0; transition: all .12s ease; }
.kmma-input-toggle:hover { color: var(--color-teal); background: var(--surface-2); }
.kmma-input-icon.has-toggle .kmma-form-control { padding-right: 44px; }

/* Radio sutil del proyecto (NO pill): card/botón = --r-md (8px), input = --r-sm (6px, base). Texto de botón centrado. */
.kmma-auth-card .kmma-btn { justify-content: center; border-radius: var(--r-md); }

/* Logo (isotipo K + wordmark "kummara.trends") arriba de la card, sobre el fondo oscuro */
.kmma-auth-logo { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 22px; text-decoration: none; }
.kmma-auth-logo .kmma-logo-img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,.40)); }
.kmma-auth-logo .kmma-logo-text { font-size: 1.55rem; color: #fff !important; }
.kmma-auth-logo .kmma-logo-text strong { color: #fff !important; }

/* Botón "Continuar con Google" + separador */
.kmma-btn-google { width: 100%; gap: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); font-weight: 600; }
.kmma-btn-google:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.kmma-auth-sep { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--muted); font-size: .8rem; }
.kmma-auth-sep::before, .kmma-auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }