/* ═══════════════════════════════════════════════════════════
   NUDI WORKSPACE — Centro de Operaciones & CRM WhatsApp AI
   Design System: Dark Cyber-SaaS · OLED Dark · Liquid Glass
   Typography: Outfit (Headings/KPIs) · Inter (Chat/Body) · JetBrains Mono (Code/Numbers)
   ═══════════════════════════════════════════════════════════ */

/* ── Variables del Design System ──────────────────────────── */
:root {
  /* ── 1. Paleta de Fondo Cyber-SaaS (OLED Dark & Titanio) ── */
  --bg-space:             #020617;
  --bg-titanium:          #0F172A;
  --bg-titanium-elevated: #1E293B;
  --bg-card-glass:        rgba(15, 23, 42, 0.72);
  --bg-card-hover:        rgba(30, 41, 59, 0.85);

  /* ── 2. Acentos Primarios & Auras Cibernéticas ── */
  --cyan-oled:            #22D3EE;
  --cyan-light:           #67E8F9;
  --cyan-dark:            #0891B2;
  --cyan-glow:            rgba(34, 211, 238, 0.25);
  --cyan-glow-intense:    rgba(34, 211, 238, 0.45);

  --amber-glow:           #F59E0B;
  --amber-bg:             rgba(245, 158, 11, 0.12);
  --emerald-status:       #10B981;
  --emerald-glow:         rgba(16, 185, 129, 0.2);

  /* ── 3. Tipografía & Jerarquía ── */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --font:         var(--font-body);

  /* ── 4. Refracción Liquid Glass & Sombras ── */
  --border-glass:         rgba(255, 255, 255, 0.08);
  --border-glass-bright:  rgba(34, 211, 238, 0.35);
  --border-glass-hover:   rgba(255, 255, 255, 0.18);
  --shadow-liquid-glass:  inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 40px rgba(0, 0, 0, 0.5);
  --shadow-cyan-glow:     0 0 25px var(--cyan-glow);
  --shadow-cyan-glow-lg:  0 0 50px var(--cyan-glow-intense);

  /* ── Mapeo de compatibilidad con selectores heredados ── */
  --clr-bg-0:             var(--bg-space);
  --clr-bg-1:             var(--bg-space);
  --clr-bg-2:             var(--bg-titanium);
  --clr-bg-3:             var(--bg-titanium-elevated);
  --clr-bg-hover:         var(--bg-card-hover);

  --clr-accent:           #0891B2;
  --clr-accent-light:     var(--cyan-oled);
  --clr-accent-dim:       rgba(34, 211, 238, 0.12);
  --clr-accent-glow:      var(--cyan-glow);
  --clr-accent-border:    rgba(34, 211, 238, 0.25);

  --clr-cyan:             var(--cyan-oled);
  --clr-cyan-dim:         rgba(34, 211, 238, 0.12);

  --clr-active:           var(--emerald-status);
  --clr-active-dim:       var(--emerald-glow);
  --clr-active-glow:      rgba(16, 185, 129, 0.4);

  --clr-inactive:         #EF4444;
  --clr-inactive-dim:     rgba(239, 68, 68, 0.12);

  --clr-agent:            #0EA5E9;
  --clr-agent-dim:        rgba(14, 165, 233, 0.12);

  --clr-text-1:           #F8FAFC;
  --clr-text-2:           #94A3B8;
  --clr-text-3:           #64748B;

  --clr-warning:          var(--amber-glow);
  --clr-warning-dim:      var(--amber-bg);
  --clr-danger:           #EF4444;
  --clr-danger-dim:       rgba(239, 68, 68, 0.1);

  --clr-border:           var(--border-glass);
  --clr-border-hover:     var(--border-glass-hover);

  --glass-bg:             var(--bg-card-glass);
  --glass-border:         var(--border-glass);

  --shadow-sm:            0 1px 4px rgba(0, 0, 0, 0.4);
  --shadow-md:            0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:            var(--shadow-liquid-glass);
  --shadow-accent:        var(--shadow-cyan-glow);
  --shadow-active:        0 0 16px var(--clr-active-glow);

  --sat:                  env(safe-area-inset-top, 0px);
  --sab:                  env(safe-area-inset-bottom, 0px);
  --sal:                  env(safe-area-inset-left, 0px);
  --sar:                  env(safe-area-inset-right, 0px);
  --header-h:             calc(56px + var(--sat));
  --sidebar-w:            320px;
  --config-w:             390px;

  --ease:                 cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:               160ms;
  --t-base:               240ms;
  --t-slow:               380ms;

  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;
}

/* ════════════════════════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
  color-scheme: dark;
  background-color: var(--bg-space);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--bg-space);
  color: var(--clr-text-1);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  line-height: 1.6;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--clr-text-1);
  letter-spacing: -0.025em;
}

.mono {
  font-family: var(--font-mono);
}

.highlight {
  color: var(--cyan-oled);
}

/* ── Utilidades ── */
.hidden           { display: none !important; }
.visually-hidden  {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Scrollbar global personalizado ── */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-titanium-elevated) transparent;
}
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bg-titanium-elevated);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--clr-text-3); }

/* ── Imagotipo Oficial Nudi & Pulso Cuántico ── */
.brand-imagotype {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--t-base) var(--ease);
}

.brand-imagotype svg {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  flex: 0 0 100%;
  display: block;
}

.login-brand-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  filter: drop-shadow(0 0 16px var(--cyan-glow));
}

/* Imagotipo de la cabecera: pastilla neutra en lugar del halo.
   36x36 (w-9 h-9), radio pequeno y cian tenue, el mismo lenguaje que
   `.header-badge`, de modo que marca y badge comparten familia visual.
   El padding mete al robot dentro de la pastilla: el SVG hereda el 100 %
   de la caja de contenido, asi que 4 px por lado lo dejan en 26x26. */
.header-brand-logo {
  width: 36px;
  height: 36px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: var(--r-sm);
  background: var(--clr-cyan-dim);
  border: 1px solid rgba(34, 211, 238, 0.2);
  filter: none;
}

@keyframes nudiPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.3));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.65));
  }
}

.nudi-logo-pulse {
  animation: nudiPulse 4s ease-in-out infinite;
  will-change: transform, filter;
}

.brand-imagotype:hover {
  transform: scale(1.08);
}

/* El latido queda para el logo grande del login, donde si es un adorno.
   Dentro de una pastilla con borde, escalar el contenedor se leia como un
   temblor del marco y el halo volvia a asomar por los bordes. */
.header-brand-logo.nudi-logo-pulse {
  animation: none;
}

.header-brand-logo:hover {
  transform: none;
  background: rgba(34, 211, 238, 0.18);
  border-color: rgba(34, 211, 238, 0.34);
}

/* ════════════════════════════════════════════════════════════
   PANTALLA DE LOGIN
════════════════════════════════════════════════════════════ */
/* El contenedor es una columna centrada CON scroll propio. Sin overflow, un
   telefono corto recortaba la tarjeta por arriba y por abajo (se comia el
   enlace del pie) y no habia forma de desplazarse hasta ella: align-items
   centrado deja el desborde fuera del area alcanzable. El padding usa las
   franjas seguras porque app.html declara viewport-fit=cover, asi que en un
   movil con muesca el inset no es cero. overflow-x va explicito en hidden: si
   solo se declara overflow-y, el eje horizontal pasa de visible a auto y el
   halo de fondo estrenaria barra lateral. */
#login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Sin justify-content: center a proposito. Centrar por el eje principal y
     desbordar son incompatibles: cuando la tarjeta es mas alta que la pantalla,
     los margenes automaticos se resuelven a 0 y el centrado reparte el desborde
     por ARRIBA y por abajo; la mitad de arriba queda antes del origen del
     scroll y no hay gesto que la alcance. Medido en el banco: a 320x480 la
     tarjeta empezaba en -118px y a 360x560 en -52px con scrollTop en 0.
     El centrado lo hace el margin:auto de .login-card, que cede al origen del
     scroll en cuanto no hay hueco libre: con hueco centra, sin hueco alinea
     arriba y todo el contenido es alcanzable. */
  /* min-h-screen. Con inset:0 la caja ya mide la pantalla, asi que el minimo
     se declara en 100% (que resuelve contra el viewport) y no en 100vh: en
     iOS 100vh es el viewport GRANDE, sin barra de URL, y estirar la caja por
     encima de lo visible devolveria el recorte del pie que se corrige aqui.
     Donde exista dvh se usa, que es la medida que sigue a la barra. */
  min-height: 100%;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(ellipse 70% 60% at 20% 45%, rgba(34, 211, 238, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 80% 55%, rgba(245, 158, 11, 0.08) 0%, transparent 65%),
    var(--bg-space);
  z-index: 1000;
  transition: opacity var(--t-fast) var(--ease);
}

@supports (min-height: 100dvh) {
  #login-screen { min-height: 100dvh; }
}

/* Estado de resolución de sesión silenciosa (Zero-Flicker) */
#login-screen.auth-loading {
  background: var(--bg-space);
}

#login-screen.auth-loading .login-card,
#login-screen.auth-loading .login-bg-glow {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

/* Halo de fondo animado. Va en position:fixed y centrado con inset+margin, no
   con transform: la animacion glow-pulse escribe transform: scale() y habria
   pisado cualquier translate de centrado. El fijo es lo que importa aqui: al
   volverse #login-screen un area con scroll, un absoluto de 620px sumaba
   altura desplazable por si mismo y aparecia scroll fantasma mas alla de la
   tarjeta. Un fijo no entra en el desborde desplazable del ancestro. */
.login-bg-glow {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 620px;
  height: 620px;
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.09) 0%, transparent 70%);
  animation: glow-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

.login-card {
  position: relative;
  background: var(--bg-card-glass);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-xl);
  padding: 48px 40px 36px;
  width: 100%;
  max-width: 420px;
  /* mx-auto + my-auto. El margen automatico es el que salva el recorte: en un
     contenedor flex, un item mas alto que la caja se corta por ambos extremos
     y el de arriba queda inalcanzable; con margin auto el desborde se reparte
     como scroll de verdad. */
  margin: auto;
  text-align: center;
  box-shadow: var(--shadow-liquid-glass), 0 0 0 1px rgba(34, 211, 238, 0.15) inset;
  animation: slide-up 0.5s var(--ease-spring) both;
}

.login-logo-area { margin-bottom: 28px; }

.login-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--clr-text-1);
  margin-bottom: 6px;
}

.login-subtitle {
  color: var(--clr-text-2);
  font-size: 13px;
  font-weight: 400;
}

.login-divider {
  height: 1px;
  background: var(--border-glass);
  margin: 0 0 26px;
}

/* ── Acceso con email y contraseña ──
   .login-card es text-align:center, así que las etiquetas se alinean a la
   izquierda explícitamente o quedan flotando sobre sus campos. */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  margin-bottom: 4px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--clr-text-2);
}

.login-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--clr-bg-2);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-md);
  color: var(--clr-text-1);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.login-input::placeholder {
  color: var(--clr-text-3);
}

.login-input:focus {
  outline: none;
  border-color: var(--clr-accent-bright, #22D3EE);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

.login-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-password-wrap .login-input {
  padding-right: 44px;
}

.login-eye {
  position: absolute;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--clr-text-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--t-fast) var(--ease);
}

.login-eye:hover { opacity: 1; }

.btn-login-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  padding: 13px 24px;
  background: linear-gradient(135deg, #0891B2 0%, #22D3EE 100%);
  border: none;
  border-radius: var(--r-md);
  color: #04202b;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(8, 145, 178, 0.35);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}

.btn-login-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.4);
}

.btn-login-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

.btn-login-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

.login-link-btn {
  align-self: center;
  padding: 4px 2px;
  background: none;
  border: none;
  color: var(--clr-text-2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}

.login-link-btn:hover { color: #22D3EE; }

.login-link-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  text-decoration: none;
}

/* «O continúa con Google»: rótulo entre dos líneas.
   Las líneas son hermanas flexibles, no un ::before absoluto tapado por un
   fondo opaco: la tarjeta es cristal translucido y ese fondo se vería como
   un parche sólido sobre el desenfoque. */
.login-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
}

.login-separator::before,
.login-separator::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--border-glass);
}

.login-separator span {
  flex: 0 0 auto;
  color: var(--clr-text-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 24px;
  background: var(--bg-titanium-elevated);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-md);
  color: var(--clr-text-1);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    background var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-base) var(--ease);
  margin-bottom: 20px;
}

.btn-google:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-glass-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 15px rgba(34, 211, 238, 0.2);
}
.btn-google:active { transform: translateY(0); box-shadow: none; }

.google-icon { flex-shrink: 0; }

/* El mismo hueco sirve para el aviso de «te hemos enviado el correo»: con
   .ok cambia de rojo a verde en lugar de añadir otro nodo al diálogo. */
.login-error.ok {
  color: var(--clr-active);
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  animation: slide-up 0.3s var(--ease);
}

.login-error {
  color: var(--clr-inactive);
  font-size: 12.5px;
  font-weight: 500;
  padding: 10px 14px;
  background: var(--clr-inactive-dim);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--r-md);
  margin-bottom: 16px;
  animation: shake 0.4s ease;
}

.login-disclaimer {
  color: var(--clr-text-3);
  font-size: 11.5px;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL
════════════════════════════════════════════════════════════ */
#main-app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  box-sizing: border-box;
  animation: fade-in 0.3s var(--ease);
}

/* ── Header global ─────────────────────────────────────────── */
/* 3 zonas con reparto equilibrado: izquierda (marca + selectores),
   centro (vistas) y derecha (landing + Entrenar IA + cuenta).
   Alturas homogéneas de 36px para que no queden huecos muertos. */
.app-header {
  height: auto;
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  padding-bottom: 8px;
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--clr-bg-2);
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
  z-index: 50;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
}

/* La marca no se parte: en las capturas "Nudi WorkSpace" y el badge
   "WHATSAPP AI" caían en dos líneas cada uno. */
.header-brand {
  flex-shrink: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.header-title,
.header-badge {
  white-space: nowrap;
}

.app-header > .view-mode-nav {
  flex: 0 0 auto;
  margin-inline: auto;
}

.app-header > .header-actions {
  flex: 0 0 auto;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-icon {
  font-size: 22px;
  filter: drop-shadow(0 0 10px rgba(124,58,237,0.7));
  animation: icon-glow 3s ease-in-out infinite;
}

.header-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.header-badge {
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: var(--r-full);
  background: var(--clr-accent-dim);
  color: #c4b5fd;
  border: 1px solid var(--clr-accent-border);
}

/* Variante accionable de la insignia: es un <button>, no un <span>, porque
   abre el modal de canales. Hereda .header-badge para que la cabecera no
   cambie de alto al aparecer, y solo se le anade el color de aviso y el
   cursor. El latido es lento (2.4s) y se desactiva con prefers-reduced-motion:
   es un recordatorio permanente, no una alarma. */
.header-badge-warn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--clr-warning-dim);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.45);
  cursor: pointer;
  font-family: inherit;
  animation: headerBadgeWarnPulse 2.4s ease-in-out infinite;
}

.header-badge-warn:hover,
.header-badge-warn:focus-visible {
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(245, 158, 11, 0.75);
  color: #fde68a;
  animation: none;
}

@keyframes headerBadgeWarnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14); }
}

@media (prefers-reduced-motion: reduce) {
  .header-badge-warn { animation: none; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  border: 2px solid var(--clr-accent);
  object-fit: cover;
  transition: border-color var(--t-base) var(--ease);
  flex-shrink: 0;
}

.user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text-2);
  white-space: nowrap;
}

.header-actions .btn-pwa-install,
.header-actions .btn-ghost,
.header-actions .btn-primary,
.header-actions .btn-icon {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

.header-actions .btn-pwa-install {
  padding: 0 12px;
  font-size: 12px;
  gap: 6px;
  border-radius: 8px;
}

/* ── Enlace sutil a la Landing (icono de enlace externo) ───── */
.btn-header-landing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--border-glass);
  border-radius: var(--r-sm);
  background: rgba(15, 23, 42, 0.6);
  color: var(--clr-text-3);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}

.btn-header-landing:hover {
  color: var(--clr-text-1);
  border-color: var(--clr-accent-border);
  background: rgba(30, 41, 59, 0.85);
}

/* ── Menú de cuenta del header ──────────────────────────────── */
.header-user-menu { position: relative; flex-shrink: 0; }

.header-user-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 8px 0 4px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-full);
  color: var(--clr-text-2);
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.header-user-trigger:hover {
  color: var(--clr-text-1);
  border-color: var(--border-glass-hover, var(--clr-accent-border));
  background: rgba(30, 41, 59, 0.85);
}

.header-user-chevron {
  flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease);
}

.header-user-menu.open .header-user-chevron { transform: rotate(180deg); }

.header-user-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  min-width: 214px;
  padding: 6px;
  background: var(--bg-titanium-elevated, var(--clr-bg-3));
  border: 1px solid var(--border-glass-bright, var(--clr-border));
  border-radius: var(--r-md);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.6);
}

.header-user-menu.open .header-user-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: qa-menu-in var(--t-fast) var(--ease);
}

.header-user-panel .header-user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: auto;
  padding: 9px 10px;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--clr-text-2);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.header-user-panel .header-user-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--clr-text-1);
}

.header-user-panel .header-user-item.danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #FCA5A5;
}

.header-user-panel .header-user-item.hidden { display: none; }

.header-user-divider {
  height: 1px;
  margin: 4px 2px;
  background: var(--clr-border);
}

.header-actions .btn-ghost {
  padding: 0 12px;
  font-size: 12px;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid var(--border-glass);
  background: rgba(15, 23, 42, 0.6);
  color: var(--clr-text-2);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}

.header-actions .btn-ghost:hover {
  color: var(--clr-text-1);
  background: rgba(30, 41, 59, 0.8);
  border-color: var(--border-glass-hover);
}

.header-actions .btn-primary {
  height: 36px;
  width: auto !important;
  max-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #020617;
  background: linear-gradient(135deg, var(--cyan-light), var(--cyan-oled));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 12px var(--cyan-glow);
  transition: all var(--t-fast) var(--ease);
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
}

.header-actions .btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px var(--cyan-glow);
}

/* ── Botón «Entrenar IA» del topbar ──────────────────────────────────────
   Es producto, no facturación: se le retiró el signo de dólar y pasó al
   degradado cyan-500 → blue-600 con texto blanco. El plan, el consumo de
   tokens y el portal de pagos se abren desde el menú del avatar o desde el
   enlace del strip de Ajustes, nunca desde aquí. */
.btn-train-header {
  height: 36px;
  width: auto !important;
  max-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  background: linear-gradient(90deg, #06b6d4 0%, #2563eb 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Un degradado no interpola en transiciones, así que el hover mueve el halo
   y el brillo en lugar de las paradas de color. */
.btn-train-header:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.2);
}

/* El pulsado reemplaza el translateY del hover: transform no es acumulativo,
   y esta regla va después, así que gana con hover+active simultáneos. */
.btn-train-header:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-train-spark {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
}

.btn-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid var(--clr-border);
  color: var(--clr-text-2);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.btn-icon:hover {
  background: var(--clr-inactive-dim);
  color: var(--clr-inactive);
  border-color: rgba(239,68,68,0.3);
}

/* ── Workspace: 3 columnas con CSS Grid ── */
.workspace {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--config-w);
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR — Lista de Chats
════════════════════════════════════════════════════════════ */
.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--clr-bg-2);
  border-right: 1px solid var(--clr-border);
  overflow: hidden;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}

.sidebar-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--clr-text-1);
  letter-spacing: -0.2px;
}

.chats-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-full);
  background: var(--clr-accent);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-base) var(--ease);
}

.sidebar-search {
  padding: 10px 10px 6px;
  flex-shrink: 0;
}

.search-wrapper {
  position: relative;
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-text-3);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 8px 12px 8px 30px;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  color: var(--clr-text-1);
  font-family: var(--font);
  font-size: 12.5px;
  outline: none;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.search-input::placeholder { color: var(--clr-text-3); }
.search-input:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px var(--clr-accent-dim);
}

/* Lista de chats */
.chats-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Skeleton loader */
.skeleton-item {
  height: 68px;
  border-radius: var(--r-md);
  background: linear-gradient(
    90deg,
    var(--clr-bg-3) 0%,
    var(--clr-bg-hover) 50%,
    var(--clr-bg-3) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s var(--ease) infinite;
}

/* Item individual de chat */
.chat-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: var(--r-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
  user-select: none;
}

.chat-item:hover {
  background: var(--bg-titanium-elevated);
  border-color: var(--border-glass-hover);
}

.chat-item.active {
  background: rgba(34, 211, 238, 0.1);
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow: inset 0 0 14px rgba(34, 211, 238, 0.06);
}

.chat-item:active { transform: scale(0.99); }

/* Avatar del chat en lista */
.chat-item-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, #0891b2, #0284c7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);
}

.chat-item-bot-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 13px;
  height: 13px;
  border-radius: var(--r-full);
  border: 2px solid var(--bg-titanium);
  transition: background var(--t-base) var(--ease);
}

.chat-item-bot-dot.active {
  background: var(--emerald-status);
  box-shadow: 0 0 8px var(--emerald-status);
}

.chat-item-bot-dot.inactive { background: var(--clr-inactive); }

.chat-item-info {
  flex: 1;
  min-width: 0;
}

/* Fila del nombre en la lista de chats. Es un flex a propósito: así las
   pastillas (lead, cita, nota de voz) conservan su sitio y es el nombre el
   que se recorta. Cuando era un bloque con `overflow: hidden`, un nombre
   largo empujaba los badges fuera de la caja y desaparecían sin rastro. */
.chat-item-name {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text-1);
  white-space: nowrap;
  overflow: hidden;
}

/* El único elemento de la fila que cede ancho. */
.chat-item-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item-preview {
  font-size: 11.5px;
  color: var(--clr-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.chat-item-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--clr-text-3);
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 1px;
}

/* Mensaje de estado vacío en lista */
.chats-empty-msg {
  padding: 32px 16px;
  text-align: center;
  color: var(--clr-text-3);
  font-size: 13px;
}

/* ════════════════════════════════════════════════════════════
   ÁREA PRINCIPAL — Conversación
════════════════════════════════════════════════════════════ */
.chat-area {
  display: flex;
  flex-direction: column;
  background: var(--clr-bg-1);
  overflow: hidden;
  position: relative;
}

/* ── Estado vacío ── */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  gap: 10px;
  animation: fade-in 0.4s var(--ease);
}

.empty-icon {
  font-size: 56px;
  opacity: 0.2;
  animation: float 3.5s ease-in-out infinite;
  margin-bottom: 6px;
}

.empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--clr-text-2);
  letter-spacing: -0.3px;
}

.empty-subtitle {
  font-size: 13px;
  color: var(--clr-text-3);
  margin-bottom: 24px;
}

.empty-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
  width: 100%;
}

.empty-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--glass-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--clr-text-2);
}

/* ── Vista de chat activo ── */
.chat-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  animation: fade-in 0.25s var(--ease);
}

/* Encabezado del chat seleccionado */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--clr-bg-2);
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
  gap: 12px;
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Avatar del chat activo */
.chat-avatar-wrapper { position: relative; flex-shrink: 0; }

.chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: white;
}

.bot-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-radius: var(--r-full);
  border: 2.5px solid var(--clr-bg-2);
  transition: all var(--t-base) var(--ease);
}

.bot-status-dot.active {
  background: var(--clr-active);
  animation: dot-pulse 2s ease-in-out infinite;
}

.bot-status-dot.inactive { background: var(--clr-inactive); }

.chat-header-info { min-width: 0; }

.chat-name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--clr-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-phone {
  font-size: 11.5px;
  color: var(--clr-text-2);
  font-family: 'Courier New', monospace;
}

/* Toggle de bot */
.chat-header-right { flex-shrink: 0; }

.bot-toggle-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bot-toggle-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--clr-text-2);
}

.toggle-switch {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.toggle-track {
  position: relative;
  display: block;
  width: 44px;
  height: 24px;
  border-radius: var(--r-full);
  background: var(--clr-inactive);
  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.toggle-switch[aria-checked="true"] .toggle-track {
  background: var(--clr-active);
  box-shadow: var(--shadow-active);
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: transform var(--t-base) var(--ease-spring);
}

.toggle-switch[aria-checked="true"] .toggle-thumb {
  transform: translateX(20px);
}

.bot-toggle-state {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-full);
}

.bot-toggle-state.active {
  background: var(--clr-active-dim);
  color: var(--clr-active);
  border: 1px solid rgba(34,197,94,0.25);
}

.bot-toggle-state.inactive {
  background: var(--clr-inactive-dim);
  color: var(--clr-inactive);
  border: 1px solid rgba(239,68,68,0.25);
}

/* ════════════════════════════════════════════════════════════
   FASE 1: LEAD SCORING & HANDOFF SUMMARY CARDS
════════════════════════════════════════════════════════════ */

/* ── Tarjeta de Calificación de Lead (Lead Score Bar) ── */
.lead-score-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px;
  background: var(--bg-titanium);
  border-bottom: 1px solid var(--border-glass);
  flex-shrink: 0;
  animation: slide-down 0.22s var(--ease);
  position: relative;
  z-index: 5;
  overflow-x: auto;
  backdrop-filter: blur(12px);
}

.lead-score-card::-webkit-scrollbar {
  height: 3px;
}

/* Badge del Nivel de Lead */
.lead-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--t-base) var(--ease);
}

.lead-score-badge.hot {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}

.lead-score-badge.warm {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.18);
}

.lead-score-badge.cold {
  background: rgba(34, 211, 238, 0.12);
  color: var(--cyan-oled);
  border: 1px solid rgba(34, 211, 238, 0.35);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.15);
}

.lead-badge-icon {
  font-size: 13px;
  line-height: 1;
}

/* Métricas del Lead */
.lead-score-metrics {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.lead-metric-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  white-space: nowrap;
}

.lead-metric-icon {
  font-size: 12px;
  opacity: 0.85;
}

.lead-metric-label {
  color: var(--clr-text-3);
  font-weight: 500;
}

.lead-metric-value {
  color: var(--clr-text-1);
  font-weight: 600;
  background: var(--bg-titanium-elevated);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border-glass);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.lead-metric-divider {
  width: 1px;
  height: 14px;
  background: var(--border-glass);
  flex-shrink: 0;
}

/* Badge en la lista lateral */
.chat-item-lead-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}
.chat-item-lead-tag.hot { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.25); }
.chat-item-lead-tag.warm { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.25); }
.chat-item-lead-tag.cold { background: rgba(34, 211, 238, 0.12); color: var(--cyan-oled); border: 1px solid rgba(34, 211, 238, 0.25); }
.chat-item-lead-tag.booking { background: rgba(16, 185, 129, 0.15); color: var(--emerald-status); border: 1px solid rgba(16, 185, 129, 0.3); }
/* Nota de voz sin transcribir esperando oído humano. Violeta del sistema:
   no compite con el rojo del lead caliente ni con el ámbar del tibio, que
   son señales comerciales; esta es operativa. */
.chat-item-lead-tag.audio { background: rgba(167, 139, 250, 0.15); color: #c4b5fd; border: 1px solid rgba(167, 139, 250, 0.3); }

/* ── Tarjeta Destacada de Cita / Soporte Técnico Coordinado ── */
.appointment-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, var(--bg-titanium) 100%);
  border-bottom: 1px solid rgba(16, 185, 129, 0.25);
  border-left: 3.5px solid var(--emerald-status);
  padding: 10px 18px;
  flex-shrink: 0;
  animation: slide-down 0.22s var(--ease);
  position: relative;
  z-index: 4;
  backdrop-filter: blur(12px);
}

.appointment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.appointment-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.appointment-icon {
  font-size: 15px;
}

.appointment-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--emerald-status);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.appointment-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-full);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.appointment-status-badge.confirmed {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.appointment-status-badge.completed {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.appointment-status-badge.cancelled {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.appointment-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.appointment-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  border: 1px solid transparent;
}

.appointment-btn-action.complete {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.3);
}
.appointment-btn-action.complete:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: #4ade80;
}

.appointment-btn-action.cancel {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.25);
}
.appointment-btn-action.cancel:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: #ef4444;
}

.appointment-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.appointment-detail-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.appointment-detail-icon {
  font-size: 12px;
}

.appointment-detail-label {
  color: var(--clr-text-3);
  font-weight: 500;
}

.appointment-detail-value {
  color: var(--clr-text-1);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.appointment-detail-value.highlight {
  color: #a7f3d0;
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.1);
}

.appointment-detail-value.datetime {
  color: #fde047;
  border-color: rgba(234, 179, 8, 0.3);
  background: rgba(234, 179, 8, 0.1);
}

/* ── Panel lateral de Citas ── */
.appointments-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--clr-border);
  gap: 8px;
  flex-wrap: wrap;
}

.appointments-panel-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.appointments-panel-title h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-text-1);
  margin: 0;
}

.appointments-total-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--clr-bg-3);
  color: var(--clr-text-2);
  border: 1px solid var(--clr-border);
}

.appointments-list-container {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: calc(100dvh - 200px);
}

.appointment-item-card {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all var(--t-base) var(--ease);
}

.appointment-item-card:hover {
  border-color: var(--clr-border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.appointment-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.appointment-item-client {
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-text-1);
}

.appointment-item-service {
  font-size: 12px;
  color: #86efac;
  font-weight: 600;
}

.appointment-item-time {
  font-size: 11.5px;
  color: #fde047;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.appointment-item-notes {
  font-size: 11px;
  color: var(--clr-text-3);
  background: var(--clr-bg-3);
  padding: 6px 8px;
  border-radius: 4px;
  line-height: 1.4;
}

.appointment-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}

/* ── Tarjeta Destacada de Resumen de Handoff (Traspaso a Humano) ── */
.handoff-summary-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, var(--bg-titanium) 100%);
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
  border-left: 3.5px solid var(--amber-glow);
  padding: 12px 18px;
  flex-shrink: 0;
  animation: slide-down 0.25s var(--ease);
  position: relative;
  z-index: 4;
  backdrop-filter: blur(12px);
}

.handoff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.handoff-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.handoff-icon {
  font-size: 15px;
}

.handoff-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--amber-glow);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.handoff-alert-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
  animation: attention-pulse 2s infinite;
}

.handoff-btn-dismiss {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-sm);
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
  border: 1px solid rgba(245, 158, 11, 0.3);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.handoff-btn-dismiss:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.5);
  color: #ffffff;
  transform: translateY(-1px);
}

.handoff-btn-dismiss:active {
  transform: translateY(0);
}

.handoff-body {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--clr-text-1);
  background: rgba(2, 6, 23, 0.65);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  white-space: pre-line;
  word-break: break-word;
}

/* ── Contenedor de mensajes ── */
.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
}

/* Separador de fecha */
.date-separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 4px;
  color: var(--clr-text-3);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.date-separator::before,
.date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--clr-border);
}

/* Mensajes: wrapper que controla la alineación */
.msg-wrapper {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 72%;
  animation: msg-appear 0.22s var(--ease-spring) both;
}

.msg-wrapper.user      { align-self: flex-end;  align-items: flex-end; }
.msg-wrapper.assistant { align-self: flex-start; align-items: flex-start; }
.msg-wrapper.agent     { align-self: flex-start; align-items: flex-start; }

/* Burbuja del mensaje */
.msg-bubble {
  width: fit-content;
  max-width: 100%;
  padding: 8px 13px;
  border-radius: var(--r-lg);
  font-size: 13.5px;
  line-height: 1.48;
  word-break: break-word;
  white-space: pre-wrap;
  box-sizing: border-box;
}

/* Optimización de imágenes dentro del chat */
.msg-bubble img {
  max-width: 100%;
  max-height: 250px;
  border-radius: 6px;
  object-fit: contain;
  margin-top: 6px;
  display: block;
}

/* Cliente → WhatsApp (burbuja derecha, degradado cian OLED) */
.msg-wrapper.user .msg-bubble {
  background: linear-gradient(135deg, #0891b2 0%, #0284c7 100%);
  color: #ffffff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 3px 12px rgba(8, 145, 178, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Bot IA (burbuja izquierda, chasis titanio con refracción cian) */
.msg-wrapper.assistant .msg-bubble {
  background: var(--bg-titanium);
  color: var(--clr-text-1);
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-bottom-left-radius: 4px;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Agente humano (burbuja izquierda, azul cielo translúcido) */
.msg-wrapper.agent .msg-bubble {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, var(--bg-titanium) 100%);
  color: #ffffff;
  border: 1px solid rgba(14, 165, 233, 0.35);
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.15);
}

/* Metadatos del mensaje: badge + hora */
.msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  padding: 0 3px;
}

.msg-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--clr-text-3);
}

.msg-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-full);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.msg-badge.assistant {
  background: rgba(34, 211, 238, 0.12);
  color: var(--cyan-oled);
  border: 1px solid rgba(34, 211, 238, 0.25);
}

.msg-badge.agent {
  background: rgba(14, 165, 233, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

/* Estado de carga de mensajes */
.msgs-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--clr-text-3);
  font-size: 13px;
  gap: 8px;
}

.msgs-loading-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clr-accent);
  animation: dot-bounce 1.4s ease-in-out infinite;
}
.msgs-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.msgs-loading-dot:nth-child(3) { animation-delay: 0.4s; }

/* ════════════════════════════════════════════════════════════
   COPILOTO ASISTENTE PARA AGENTE HUMANO (Módulo 2.4 — Fase 2)
════════════════════════════════════════════════════════════ */

/* ── Contenedor Colapsable de Sugerencias del Copiloto ── */
.copilot-suggestions-container {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.12) 0%, rgba(34, 211, 238, 0.04) 50%, var(--bg-titanium) 100%);
  border-top: 1px solid rgba(34, 211, 238, 0.25);
  border-bottom: 1px solid var(--border-glass);
  border-left: 3.5px solid var(--cyan-oled);
  padding: 10px 16px 12px;
  flex-shrink: 0;
  animation: slide-up 0.22s var(--ease);
  position: relative;
  z-index: 5;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}

.copilot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.copilot-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.copilot-icon {
  font-size: 15px;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.6));
}

.copilot-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan-oled);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.copilot-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: rgba(34, 211, 238, 0.15);
  color: #a5f3fc;
  border: 1px solid rgba(34, 211, 238, 0.35);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.copilot-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.copilot-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-sm);
  background: var(--bg-titanium-elevated);
  border: 1px solid var(--border-glass);
  color: var(--clr-text-2);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.copilot-btn-action:hover {
  background: rgba(34, 211, 238, 0.15);
  border-color: var(--cyan-oled);
  color: var(--clr-text-1);
}

.copilot-btn-action.icon-only {
  padding: 3px 6px;
  font-size: 11px;
  color: var(--clr-text-3);
}
.copilot-btn-action.icon-only:hover {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
}

/* ── Estado de Carga del Copiloto ── */
.copilot-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  font-size: 12.5px;
  color: var(--clr-text-2);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--r-md);
  border: 1px dashed rgba(34, 211, 238, 0.3);
}

.copilot-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(34, 211, 238, 0.3);
  border-top-color: var(--cyan-oled);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Lista de Tarjetas / Chips de Sugerencias ── */
.copilot-chips-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.copilot-card {
  background: var(--bg-titanium-elevated);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-md);
  padding: 10px 12px;
  cursor: pointer;
  transition:
    transform var(--t-fast) var(--ease),
    border-color var(--t-base) var(--ease),
    background var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.copilot-card:hover {
  transform: translateY(-2px);
  border-color: var(--cyan-oled);
  background: rgba(34, 211, 238, 0.08);
  box-shadow: 0 4px 16px rgba(34, 211, 238, 0.2);
}

.copilot-card:active {
  transform: translateY(0);
}

.copilot-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}

.copilot-card-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cyan-oled);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.copilot-insert-hint {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cyan-oled);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

.copilot-card:hover .copilot-insert-hint {
  opacity: 1;
}

.copilot-card-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--clr-text-1);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
}

/* ── Barra de Herramientas del Chat Input (Botón Copiloto) ── */
.copilot-toolbar {
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-copilot-suggest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.25) 0%, rgba(34, 211, 238, 0.15) 100%);
  border: 1px solid rgba(34, 211, 238, 0.4);
  border-radius: var(--r-full);
  color: #e0f2fe;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(34, 211, 238, 0.15);
  transition:
    transform var(--t-fast) var(--ease),
    background var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    color var(--t-fast) var(--ease);
}

.btn-copilot-suggest:hover {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.4) 0%, rgba(34, 211, 238, 0.3) 100%);
  border-color: var(--cyan-oled);
  color: white;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.35);
}

.btn-copilot-suggest:active {
  transform: translateY(0);
}

.btn-copilot-icon {
  font-size: 13px;
}

.btn-copilot-sparkle {
  font-size: 12px;
  color: #fde047;
  animation: pulse-glow 2s infinite;
}

/* ── Área de input ── */
.chat-input-area {
  padding: 10px 14px 14px;
  background: var(--clr-bg-2);
  border-top: 1px solid var(--clr-border);
  flex-shrink: 0;
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.msg-input {
  flex: 1;
  padding: 9px 13px;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  color: var(--clr-text-1);
  font-family: var(--font);
  font-size: 13.5px;
  resize: none;
  outline: none;
  transition:
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
}

.msg-input::placeholder { color: var(--clr-text-3); }

.msg-input:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px var(--clr-accent-dim);
}

.btn-send {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--clr-accent);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease);
}

.btn-send:hover:not(:disabled) {
  background: var(--clr-accent-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.btn-send:active:not(:disabled) { transform: translateY(0); box-shadow: none; }

.btn-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 0 2px;
}

.input-hint {
  font-size: 11px;
  color: var(--clr-text-3);
  display: flex;
  align-items: center;
  gap: 4px;
}

.bot-status-chip {
  font-weight: 600;
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: var(--r-full);
}

.bot-status-chip.active  { color: var(--clr-active);   background: var(--clr-active-dim); }
.bot-status-chip.inactive{ color: var(--clr-inactive); background: var(--clr-inactive-dim); }

.char-count {
  font-size: 10.5px;
  color: var(--clr-text-3);
  transition: color var(--t-base) var(--ease);
}

.char-count.near-limit { color: var(--clr-inactive); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   PANEL DERECHO: INFO & CONFIG (Tabs)
════════════════════════════════════════════════════════════ */
.config-panel {
  background: var(--clr-bg-2);
  border-left: 1px solid var(--clr-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Tabs Superiores ── */
.panel-tabs {
  display: flex;
  align-items: center;
  padding: 6px 8px 0;
  background: var(--clr-bg-2);
  border-bottom: 1px solid var(--clr-border);
  gap: 4px;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
  -webkit-overflow-scrolling: touch;
}

.panel-tabs::-webkit-scrollbar {
  height: 3px;
}

.panel-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.panel-tabs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--r-full);
}

.panel-tabs::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.panel-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  background: transparent;
  border: none;
  color: var(--clr-text-2);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--r-sm) var(--r-sm) 0 0;  border-bottom: 2px solid transparent;
  transition: all var(--t-fast) var(--ease);
}

.panel-tab svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

.panel-tab:hover {
  color: var(--clr-text-1);
  background: rgba(255, 255, 255, 0.05);
}

.panel-tab.active {
  color: var(--clr-text-1);
  background: rgba(124, 58, 237, 0.1);
  border-bottom-color: var(--clr-accent);
}

/* Solo la pestaña activa muestra texto: las 7 pestañas dejan de desbordar y
   "Sistema" ya no aparece cortada. El resto conserva su tooltip nativo (title). */
.panel-tab-label { display: none; }
.panel-tab.active .panel-tab-label { display: inline; }
.panel-tab:not(.active) { padding: 7px 9px; }


/* ── Contenedor de paneles ── */
.panel-content {
  display: none;
  flex: 1;
  overflow-y: auto;
  flex-direction: column;
  animation: fade-in 0.25s var(--ease);
}

.panel-content.active {
  display: flex;
}

/* ── Elementos Comunes ── */
.config-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-text-2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

.config-section-desc {
  font-size: 12px;
  color: var(--clr-text-3);
  line-height: 1.5;
}

/* ── Panel Stats: Tarjeta IA ── */
.ai-status-card {
  margin: 12px 14px 8px;
  padding: 12px 14px;
  background: linear-gradient(145deg, rgba(30,30,40,0.8) 0%, rgba(20,20,25,0.9) 100%);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: var(--r-md);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.ai-status-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-accent), transparent);
  opacity: 0.5;
}

.ai-status-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ai-status-icon {
  font-size: 20px;
  filter: drop-shadow(0 0 6px rgba(124,58,237,0.6));
}

.ai-status-title {
  font-size: 13.5px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.2px;
}

.ai-status-sub {
  font-size: 10.5px;
  color: #a78bfa;
  font-weight: 500;
}

.ai-status-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  background: rgba(34,197,94,0.15);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: var(--r-full);
  letter-spacing: 0.5px;
  animation: dot-pulse 2s infinite;
}

.ai-provider-chain {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.provider-pill {
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.provider-pill.nexrouter { background: rgba(59,130,246,0.15); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.provider-pill.groq { background: var(--clr-warning-dim); color: var(--clr-warning); border: 1px solid rgba(249,115,22,0.3); }
.provider-pill.gemini { background: rgba(6,182,212,0.15); color: #67e8f9; border: 1px solid rgba(6,182,212,0.3); }
.provider-pill.fallback { background: rgba(14,165,233,0.15); color: #7dd3fc; border: 1px solid rgba(14,165,233,0.3); }

.provider-arrow { color: var(--clr-text-3); font-size: 12px; }

/* ── Panel Stats: Grid ── */
.stats-section-title {
  padding: 0 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-text-2);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px;
}

.stat-card {
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--clr-border-hover);
}

.stat-icon {
  font-size: 16px;
  margin-bottom: 8px;
  opacity: 0.8;
}

.stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--clr-text-1);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.stat-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--clr-text-3);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Panel Stats: Acciones Rápidas agrupadas ── */
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 16px;
}

/* Grupo plegable: cabecera + cuerpo colapsable */
.qa-group {
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
}

/* Un grupo cuyas acciones están todas bloqueadas por el plan se oculta entero */
.qa-group.qa-group-empty { display: none; }

.qa-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  color: var(--clr-text-2);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.qa-group-header:hover {
  background: var(--clr-bg-hover);
  color: var(--clr-text-1);
}

.qa-group-title { flex: 1; text-align: left; }

.qa-group-count {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: var(--r-full);
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  font-size: 10px;
  font-weight: 700;
  color: var(--clr-text-3);
  text-align: center;
}
.qa-chevron {
  flex-shrink: 0;
  color: var(--clr-text-3);
  transform: rotate(-90deg);
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.qa-group.open > .qa-group-header { color: var(--clr-text-1); }

.qa-group.open > .qa-group-header .qa-chevron {
  transform: rotate(0deg);
  color: var(--clr-accent-light);
}

/* Colapso sin altura fija: la fila del grid pasa de 0fr a 1fr */
.qa-group-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease);
}

.qa-group.open > .qa-group-body { grid-template-rows: 1fr; }

.qa-group-items {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 8px;
}

.qa-group.open > .qa-group-body > .qa-group-items { padding-bottom: 8px; }

/* Botón de acción (base + realce premium, antes duplicado más abajo) */
.quick-action-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  color: var(--clr-text-1);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  text-align: left;
}

.quick-action-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--clr-accent-dim), transparent);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  pointer-events: none;
}

.quick-action-btn:hover {
  background: var(--clr-bg-hover);
  border-color: var(--clr-accent-border);
  transform: translateX(3px);
  box-shadow: -3px 0 0 var(--clr-accent);
}

.quick-action-btn:hover::after { opacity: 1; }

.quick-action-btn span:first-child { font-size: 15px; }

/* ── Panel System: Textarea ── */
.config-textarea, .config-input {
  width: 100%;
  padding: 12px;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  color: var(--clr-text-1);
  font-family: var(--font);
  font-size: 12.5px;
  line-height: 1.6;
  outline: none;
  margin-bottom: 12px;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.config-textarea {
  resize: vertical;
  min-height: 200px;
}
.config-input {
  resize: none;
  min-height: auto;
}
.config-textarea:focus, .config-input:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px var(--clr-accent-dim);
}

.btn-primary {
  width: 100%;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--clr-accent);
  border: none;
  border-radius: var(--r-md);
  color: white;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.btn-primary:hover {
  background: var(--clr-accent-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}

/* .btn-secondary se usaba en 18 sitios del panel sin tener ni una regla propia:
   el navegador pintaba su boton por defecto (el gris del sistema) justo al lado
   de un .btn-primary con la identidad de Nudi. De ahi los «fondos grises rotos»
   del «← Anterior» del asistente y del wizard de WhatsApp. Esta base le da la
   misma geometria que .btn-primary con color neutro. Va deliberadamente antes
   de .btn-xs para que los botones que llevan ambas clases sigan siendo chicos,
   y .wa-nav-buttons .btn-secondary la sobreescribe con !important como ya hacia. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  color: var(--clr-text-1);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(148, 163, 184, 0.18);
  border-color: var(--clr-accent);
  color: #fff;
}
.btn-secondary:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}
.btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.prompt-feedback {
  margin-top: 12px;
  padding: 10px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 500;
}
.prompt-feedback.success { background: var(--clr-active-dim); color: var(--clr-active); border: 1px solid rgba(34,197,94,0.25); }
.prompt-feedback.error   { background: var(--clr-inactive-dim); color: var(--clr-inactive); border: 1px solid rgba(239,68,68,0.25); }

/* ── Panel Guía ── */
.guide-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-text-1);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--clr-border);
}

.legend-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}

.legend-dot.user      { background: linear-gradient(135deg, var(--clr-accent), #9333ea); }
.legend-dot.assistant { background: var(--clr-bg-hover); border: 1px solid var(--clr-border); }
.legend-dot.agent     { background: linear-gradient(135deg, #0284c7, var(--clr-agent)); }

.shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--clr-text-2);
}

kbd {
  background: var(--clr-bg-1);
  border: 1px solid var(--clr-border);
  border-bottom-width: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--clr-text-1);
}


/* ════════════════════════════════════════════════════════════
   ANIMACIONES
════════════════════════════════════════════════════════════ */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes glow-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%       { transform: scale(1.1); opacity: 1;   }
}

@keyframes icon-glow {
  0%, 100% { filter: drop-shadow(0 0  6px rgba(124,58,237,0.5)); }
  50%       { filter: drop-shadow(0 0 20px rgba(124,58,237,0.9)); }
}

@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes msg-appear {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

@keyframes float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-12px); }
}

@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0  4px var(--clr-active-glow); }
  50%       { box-shadow: 0 0 14px var(--clr-active-glow), 0 0 28px rgba(34,197,94,0.2); }
}

@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1;   }
}

@keyframes shake {
  0%, 100% { transform: translateX(0);    }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px);  }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px);  }
}

/* ── Estilos para elementos generados dinámicamente ──────── */
.msg-image-bubble {
  padding: 4px;
  background: transparent;
  border: none;
}

.msg-image {
  max-width: 100%;
  border-radius: 8px;
  cursor: pointer;
  display: block;
}

.msg-image-caption {
  padding: 6px 4px 0;
  font-size: 13px;
  color: var(--clr-text-2);
}

.quick-reply-btn {
  display: inline-block;
  padding: 4px 12px;
  margin: 3px 3px 0 0;
  border: 1.5px solid var(--clr-accent);
  border-radius: 16px;
  font-size: 12px;
  color: var(--clr-accent);
  background: transparent;
  cursor: default;
  white-space: nowrap;
}

.quick-reply-container {
  padding: 4px 0 2px;
  display: flex;
  flex-wrap: wrap;
}

.msgs-empty {
  text-align: center;
  color: var(--clr-text-3);
  padding: 40px;
  font-size: 13px;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  :root {
    --sidebar-w: 290px;
    --config-w:  360px;
  }
}

@media (max-width: 1000px) {
  :root {
    --sidebar-w: 260px;
    --config-w:  330px;
  }
}

/* ── Modal de Entrenamiento IA ── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(2, 6, 23, 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.modal-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.modal-content {
  background: var(--bg-titanium);
  border: 1px solid var(--border-glass-bright);
  border-radius: var(--r-xl, 16px);
  width: 95%;
  max-width: 672px;
  max-height: 85dvh;
  margin: auto;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-liquid-glass), 0 20px 50px rgba(0, 0, 0, 0.8);
  animation: modal-enter 150ms var(--ease) both;
  overflow: hidden;
}

/* Entrada suave: fade + escala ligera en 150ms */
@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* Se conserva el nombre anterior por si alguna vista aún lo referencia */
@keyframes modal-slide-up {
  from { transform: translateY(20px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.modal-header h2, .modal-header h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  min-width: 0;
  color: var(--clr-text-1);
  letter-spacing: -0.02em;
}
.modal-body {
  padding: 24px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modal-desc {
  font-size: 13.5px;
  color: var(--clr-text-2);
  margin-top: 0;
  margin-bottom: 8px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text-1);
}
.form-group textarea,
.config-textarea {
  background: var(--bg-titanium-elevated);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-md);
  padding: 12px;
  color: var(--clr-text-1);
  font-family: var(--font-body);
  font-size: 13.5px;
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-group textarea:focus,
.config-textarea:focus {
  border-color: var(--cyan-oled);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
}
.modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  flex-shrink: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--border-glass);
  background: var(--bg-titanium);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Modal Tabs: los menus por tema mas el enlace de facturacion. Envuelve en
   dos filas en lugar de recortarse: el strip pide 846px y el modal solo mide
   672px. NO se usa overflow-x, que recortaria los desplegables abiertos. */
.modal-tabs {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-glass);
  background: var(--bg-titanium);
}

.modal-menu { position: relative; }

.modal-menu-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  color: var(--clr-text-2);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease);
}

.modal-menu-trigger:hover {
  color: var(--clr-text-1);
  border-color: var(--clr-accent-border);
  background: rgba(255, 255, 255, 0.06);
}

.modal-menu-icon { font-size: 14px; }

/* Nombre de la sección abierta: se rellena desde app.js */
.modal-menu-hint {
  display: none;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cyan-oled);
  font-weight: 700;
}

.modal-menu.has-active .modal-menu-hint { display: inline; }
.modal-menu.has-active .modal-menu-hint::before { content: '· '; color: var(--clr-text-3); }

.modal-menu.has-active > .modal-menu-trigger {
  color: var(--clr-text-1);
  border-color: var(--clr-accent-border);
  background: rgba(34, 211, 238, 0.08);
}

.modal-menu-chevron {
  flex-shrink: 0;
  color: var(--clr-text-3);
  transition: transform var(--t-fast) var(--ease);
}

.modal-menu.open > .modal-menu-trigger .modal-menu-chevron { transform: rotate(180deg); }
/* Panel desplegable con las secciones del tema */
.modal-menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  min-width: 208px;
  padding: 6px;
  background: var(--bg-titanium-elevated, var(--clr-bg-3));
  border: 1px solid var(--border-glass-bright, var(--clr-border));
  border-radius: var(--r-md);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

.modal-menu.open > .modal-menu-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: qa-menu-in var(--t-fast) var(--ease);
}

@keyframes qa-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Las pestañas pasan a ser filas del menú (conservan clase, data-tab y listeners) */
.modal-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-left: 2px solid transparent;
  background: none;
  color: var(--clr-text-2);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
}

.modal-tab:hover {
  color: var(--clr-text-1);
  background: rgba(255, 255, 255, 0.06);
}

.modal-tab.active {
  color: var(--cyan-oled);
  border-left-color: var(--cyan-oled);
  background: rgba(34, 211, 238, 0.1);
}

.modal-tab-panel { display: none; }
.modal-tab-panel.active { display: block; }

/* ── Catálogo Visual ─────────────────────────────────────────── */
.catalog-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 12px 0 8px;
}
.catalog-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--clr-text-2);
  font-size: 14px;
}
.catalog-empty .catalog-empty-icon { font-size: 40px; margin-bottom: 12px; }

/* Categoría */
.cat-card {
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.cat-card:hover { border-color: var(--clr-border-hover); }
.cat-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--clr-border);
  gap: 8px;
}
.cat-icon-input {
  width: 36px;
  text-align: center;
  background: transparent;
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  padding: 4px;
  color: var(--clr-text-1);
  font-size: 18px;
}
.cat-name-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--clr-text-1);
  font-size: 14px;
  font-weight: 600;
  outline: none;
}
.cat-name-input:focus {
  border-bottom: 1px solid var(--clr-accent);
}
.cat-actions { display: flex; gap: 4px; margin-left: auto; }

/* Producto */
.products-list { padding: 10px 14px 4px; }
.product-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--clr-border);
}
.product-item:last-of-type { border-bottom: none; }
.product-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--clr-bg-2);
  flex-shrink: 0;
}
.product-thumb-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--clr-bg-2);
  border: 1px dashed var(--clr-border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.product-info { flex: 1; min-width: 0; }
.product-name { font-size: 13px; font-weight: 600; color: var(--clr-text-1); }
.product-price { font-size: 12px; color: var(--clr-accent); margin-top: 1px; }
.product-desc { font-size: 11px; color: var(--clr-text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-disponible-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--clr-active-dim);
  color: var(--clr-active);
  font-weight: 600;
}
.product-disponible-badge.agotado {
  background: var(--clr-inactive-dim);
  color: var(--clr-inactive);
}
.product-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Formulario de producto (mini inline) */
.product-form {
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid var(--clr-accent-border);
  border-radius: 8px;
  padding: 12px;
  margin: 8px 14px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.product-form .full { grid-column: 1 / -1; }
.product-form label { font-size: 11px; color: var(--clr-text-2); display: block; margin-bottom: 3px; }
.product-form input[type="text"],
.product-form input[type="number"],
.product-form input[type="url"],
.product-form select {
  width: 100%;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--clr-text-1);
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}
.product-form input:focus,
.product-form select:focus { border-color: var(--clr-accent); }
.product-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}
.btn-add-product {
  padding: 8px;
  margin: 4px 14px 12px;
  width: calc(100% - 28px);
  background: transparent;
  border: 1px dashed var(--clr-border-hover);
  border-radius: 6px;
  color: var(--clr-text-2);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-add-product:hover {
  border-color: var(--clr-accent);
  color: var(--clr-accent);
  background: var(--clr-accent-dim);
}
.btn-xs {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 5px;
  border: 1px solid var(--clr-border);
  background: transparent;
  color: var(--clr-text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-xs:hover { border-color: var(--clr-accent); color: var(--clr-accent); }
.btn-xs.danger:hover { border-color: var(--clr-inactive); color: var(--clr-inactive); }
.btn-xs.primary {
  background: var(--clr-accent);
  color: white;
  border-color: var(--clr-accent);
}
.btn-xs.primary:hover { background: var(--clr-accent-light); }


.requires-attention {
  border-left: 4px solid var(--clr-danger) !important;
  background-color: var(--clr-danger-dim) !important;
}
.requires-attention:hover {
  background-color: var(--clr-danger-dim) !important;
}

.image-preview-container {
  position: relative;
  margin-top: 10px;
  display: inline-block;
}
#image-preview-img {
  max-width: 150px;
  max-height: 150px;
  border-radius: 8px;
  border: 1px solid var(--clr-border);
}
#btn-remove-image {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--clr-bg-3);
  color: var(--clr-text-1);
  border: 1px solid var(--clr-border);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
#btn-remove-image:hover {
  background: var(--clr-danger);
  color: white;
}

/* -- EMULADOR IA -- */
.emulator-container {
  display: flex;
  flex-direction: column;
  height: 400px;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  overflow: hidden;
}
.emulator-chat {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.emulator-input-area {
  display: flex;
  padding: 10px;
  background: var(--clr-bg-2);
  border-top: 1px solid var(--clr-border);
  gap: 10px;
}
.emulator-input-area input {
  flex: 1;
  background: var(--clr-bg-1);
  border: 1px solid var(--clr-border);
  border-radius: 20px;
  padding: 8px 16px;
  color: var(--clr-text-1);
  outline: none;
}
.emulator-input-area input:focus {
  border-color: var(--clr-accent);
}
.emulator-status {
  padding: 6px 12px;
  font-size: 0.8rem;
  color: var(--clr-accent);
  background: var(--clr-bg-1);
  text-align: center;
  display: none;
}
.emulator-chat .msg-wrapper.user { justify-content: flex-end; }
.emulator-chat .msg-wrapper.user .msg-bubble { 
  background: var(--clr-accent); 
  color: white; 
}
.emulator-chat .msg-wrapper.assistant { justify-content: flex-start; }
.emulator-chat .msg-wrapper.assistant .msg-bubble { 
  background: var(--clr-bg-1); 
  border: 1px solid var(--clr-border);
}


@keyframes spin {
  to { transform: rotate(360deg); }
}


/* Multi-plan Styles */
.product-planes-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.plan-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--clr-bg-2);
  color: var(--clr-accent);
  border: 1px solid var(--clr-border);
}
.plans-form-section {
  background: var(--clr-bg-1);
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--clr-border);
  margin-top: 6px;
}
.plan-row input {
  font-size: 0.85rem;
  padding: 6px 8px;
}


/* ═══════════════════════════════════════════════════════════
   VISUAL ENHANCEMENT LAYER — Premium UI Overrides
   ═══════════════════════════════════════════════════════════ */

/* ── Stat Cards: Gradient borders + colored accents ────── */
.stat-card {
  background: linear-gradient(160deg, var(--clr-bg-3) 0%, rgba(22, 27, 34, 0.6) 100%);
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  opacity: 0.7;
  transition: opacity var(--t-base) var(--ease);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.stat-card:hover::before {
  opacity: 1;
}

/* Colored top borders per card */
.stat-card:nth-child(1)::before { background: linear-gradient(90deg, var(--clr-accent), var(--clr-cyan)); }
.stat-card:nth-child(2)::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
.stat-card:nth-child(3)::before { background: linear-gradient(90deg, var(--clr-agent), #38bdf8); }
.stat-card:nth-child(4)::before { background: linear-gradient(90deg, var(--clr-accent-light), #c084fc); }

/* Gradient text for stat values */
.stat-card:nth-child(1) .stat-value { background: linear-gradient(135deg, #e0e7ff, var(--clr-text-1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-card:nth-child(2) .stat-value { background: linear-gradient(135deg, #86efac, #4ade80); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-card:nth-child(3) .stat-value { background: linear-gradient(135deg, #7dd3fc, #38bdf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-card:nth-child(4) .stat-value { background: linear-gradient(135deg, #c4b5fd, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── AI Status Card: Enhanced glow ───────────────────── */
.ai-status-card {
  background: linear-gradient(145deg, rgba(30,30,50,0.9) 0%, rgba(15,15,25,0.95) 100%);
  border: 1px solid rgba(124,58,237,0.25);
  box-shadow: 0 4px 20px rgba(124,58,237,0.08), 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: box-shadow var(--t-base) var(--ease);
}

.ai-status-card:hover {
  box-shadow: 0 4px 28px rgba(124,58,237,0.15), 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}

.ai-status-badge {
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}

/* ── Empty State: Enhanced glow ──────────────────────── */
.empty-state .empty-icon {
  filter: drop-shadow(0 0 20px rgba(124,58,237,0.3));
  font-size: 64px;
  opacity: 0.25;
}

.empty-state .empty-title {
  background: linear-gradient(135deg, var(--clr-text-1), var(--clr-text-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 20px;
}

.empty-feature {
  transition: all var(--t-base) var(--ease);
}

.empty-feature:hover {
  background: rgba(124,58,237,0.06);
  border-color: var(--clr-accent-border);
  transform: translateY(-1px);
}

/* ── Chat Items: Smoother transitions + active indicator ── */
.chat-item {
  transition: all var(--t-base) var(--ease);
  position: relative;
}

.chat-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, var(--clr-accent), var(--clr-cyan));
  border-radius: 0 3px 3px 0;
  transition: transform var(--t-base) var(--ease-spring);
}

.chat-item.active::before {
  transform: translateY(-50%) scaleY(1);
}

.chat-item:hover {
  background: rgba(124,58,237,0.05);
}

.chat-item.active {
  background: var(--clr-accent-dim);
  box-shadow: inset 0 0 0 1px var(--clr-accent-border);
}

/* ── Chat Item Avatar: Subtle glow on active ── */
.chat-item.active .chat-item-avatar {
  box-shadow: 0 0 0 2px var(--clr-bg-2), 0 0 0 3px var(--clr-accent);
}

/* ── Message Bubbles: Enhanced depth ─────────────────── */
.msg-wrapper.user .msg-bubble {
  box-shadow: 0 2px 12px rgba(124,58,237,0.2);
}

.msg-wrapper.assistant .msg-bubble {
  box-shadow: 0 1px 8px rgba(0,0,0,0.15);
}

.msg-wrapper.agent .msg-bubble {
  box-shadow: 0 2px 12px rgba(14,165,233,0.2);
}

/* ── Toast Notification System ───────────────────────── */
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--clr-text-1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--clr-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0,0,0,0.2);
  pointer-events: auto;
  max-width: 340px;
  word-break: break-word;
  margin-bottom: 8px;
  animation: toast-in 0.35s var(--ease-spring) forwards;
  opacity: 0;
  transform: translateX(40px);
}

.toast.toast-exit {
  animation: toast-out 0.25s var(--ease) forwards;
}

.toast-success {
  background: rgba(22,101,52,0.85);
  border-color: rgba(34,197,94,0.35);
}

.toast-error {
  background: rgba(127,29,29,0.85);
  border-color: rgba(239,68,68,0.35);
}

.toast-warning {
  background: rgba(120,53,15,0.85);
  border-color: rgba(245,158,11,0.35);
}

.toast-info {
  background: rgba(30,58,138,0.85);
  border-color: rgba(99,102,241,0.35);
}

.toast-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.toast-message {
  flex: 1;
}

.toast-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-size: 16px;
  padding: 0 2px;
  line-height: 1;
  transition: color var(--t-fast) var(--ease);
}

.toast-close:hover {
  color: white;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(60px) scale(0.9);
  }
}

/* ── Modal Tabs: realce de la sección activa dentro del menú ── */
.modal-tab.active {
  position: relative;
  box-shadow: inset 0 0 12px rgba(34, 211, 238, 0.12);
}

/* ── Panel Tabs: Active glow ─────────────────────────── */
.panel-tab.active {
  position: relative;
}

.panel-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 6px;
  right: 6px;
  height: 2px;
  background: var(--clr-accent);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--clr-accent-glow);
}

/* ── Button Primary: Gradient + glow hover ───────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: all var(--t-base) var(--ease);
}

.btn-primary:hover {
  box-shadow: 0 4px 20px rgba(124,58,237,0.3);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(124,58,237,0.2);
}

/* ── Header Brand: Subtle accent glow ────────────────── */
.header-icon {
  filter: drop-shadow(0 0 8px rgba(124,58,237,0.4));
}

.header-title {
  background: linear-gradient(135deg, var(--clr-text-1), #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Scrollbar Enhancement ───────────────────────────── */
.chats-list::-webkit-scrollbar-thumb:hover,
.messages-container::-webkit-scrollbar-thumb:hover,
.panel-content::-webkit-scrollbar-thumb:hover {
  background: var(--clr-accent);
}

/* ── Bot Status Dot: Breathing animation ─────────────── */
.chat-item-bot-dot.active {
  animation: breathe 2.5s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { box-shadow: 0 0 0 3px rgba(34,197,94,0); }
}

/* ── Requires Attention: Pulsing border ──────────────── */
.requires-attention {
  animation: attention-pulse 2s ease-in-out infinite;
}

@keyframes attention-pulse {
  0%, 100% { border-left-color: var(--clr-danger); }
  50% { border-left-color: rgba(239,68,68,0.4); }
}

/* ── Módulo Toggle Card & Switch UI ───────────────────── */
.module-toggle-card {
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.module-toggle-card:hover {
  border-color: var(--clr-border-hover);
}

.module-status-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-full);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  transition: all var(--t-base) var(--ease);
}

.module-status-badge.active {
  background: var(--clr-active-dim);
  color: var(--clr-active);
  border: 1px solid rgba(34,197,94,0.3);
}

.module-status-badge.inactive {
  background: var(--clr-bg-2);
  color: var(--clr-text-3);
  border: 1px solid var(--clr-border);
}

.switch-ui {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.switch-ui input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-full);
  transition: all var(--t-base) var(--ease);
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--clr-text-2);
  border-radius: 50%;
  transition: all var(--t-base) var(--ease-spring);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.switch-ui input:checked + .switch-slider {
  background-color: var(--clr-active-dim);
  border-color: var(--clr-active);
  box-shadow: 0 0 10px rgba(34,197,94,0.25);
}

.switch-ui input:checked + .switch-slider:before {
  transform: translateX(20px);
  background-color: var(--clr-active);
}

/* CRM Test Result Styles */
.crm-test-success {
  color: #22c55e;
  font-weight: 600;
}
.crm-test-error {
  color: #ef4444;
  font-weight: 600;
}

/* Multimodal Audio Player & Badges */
.audio-bubble {
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  width: 100%;
  max-width: 270px;
  box-sizing: border-box;
}

.audio-bubble-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cyan-oled);
  margin-bottom: 4px;
}

.msg-audio-player {
  width: 100%;
  height: 32px;
  border-radius: 16px;
  outline: none;
  filter: invert(0.88) hue-rotate(180deg);
  opacity: 0.92;
}

.audio-transcription-box {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  line-height: 1.35;
}

.audio-transcription-tag {
  font-size: 9.5px;
  color: var(--clr-text-3);
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.audio-transcription-text {
  color: var(--clr-text-2);
}

.msg-wrapper.user .audio-bubble {
  background: rgba(8, 145, 178, 0.2);
  border-color: rgba(34, 211, 238, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   BROADCASTING & CAMPAÑAS HSM (MÓDULO 2.3)
   ═══════════════════════════════════════════════════════════ */

.broadcast-segment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
}

.broadcast-segment-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  color: var(--clr-text-2);
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  text-align: center;
}

.broadcast-segment-chip:hover {
  background: var(--clr-bg-hover);
  border-color: var(--clr-border-hover);
  color: var(--clr-text-1);
  transform: translateY(-1px);
}

.broadcast-segment-chip.active {
  background: rgba(124, 58, 237, 0.15);
  border-color: var(--clr-accent);
  color: var(--clr-text-1);
  box-shadow: 0 0 12px var(--clr-accent-dim);
}

.broadcast-segment-chip .chip-icon {
  font-size: 14px;
  margin-bottom: 2px;
}

.broadcast-segment-chip .chip-title {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
}

.broadcast-segment-chip .chip-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--r-full);
  background: var(--clr-bg-2);
  color: var(--clr-text-3);
  margin-top: 4px;
}

.broadcast-segment-chip.active .chip-badge {
  background: var(--clr-accent);
  color: #ffffff;
}

/* Progress bar */
.broadcast-progress-bar-bg {
  width: 100%;
  height: 6px;
  background: var(--clr-bg-2);
  border-radius: var(--r-full);
  overflow: hidden;
}

.broadcast-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-cyan));
  border-radius: var(--r-full);
  transition: width 0.4s ease;
  box-shadow: 0 0 8px var(--clr-accent-glow);
}

/* Preview bubble */
.broadcast-preview-bubble {
  background: #005c4b;
  color: #e9edef;
  padding: 10px 14px;
  border-radius: 8px 8px 8px 0;
  font-size: 12px;
  line-height: 1.45;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-sm);
  word-break: break-word;
}

/* Campaign History Item */
.broadcast-history-item {
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--t-base) var(--ease);
}

.broadcast-history-item:hover {
  border-color: var(--clr-border-hover);
}

.broadcast-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.broadcast-history-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-text-1);
}

.broadcast-status-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.broadcast-status-badge.completed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.broadcast-status-badge.in_progress {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(124, 58, 237, 0.3);
}

.broadcast-status-badge.failed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.broadcast-status-badge.queued {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   MÓDULO 3.1: ANALÍTICA COMERCIAL Y BI (Fase 3)
   ═══════════════════════════════════════════════════════════ */

/* ── Selector de Rango Temporal ── */
.analytics-range-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.analytics-range-chip {
  flex: 1;
  min-width: 50px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-bg-3);
  color: var(--clr-text-2);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  font-family: var(--font);
}

.analytics-range-chip:hover {
  background: var(--bg-titanium-elevated);
  color: var(--clr-text-1);
  border-color: var(--border-glass-hover);
}

.analytics-range-chip.active {
  background: linear-gradient(135deg, #0891b2, #0284c7);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(34, 211, 238, 0.3);
}

/* ── Grid de KPIs Ejecutivos ── */
.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.analytics-kpi-card {
  position: relative;
  background: var(--bg-titanium-elevated);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.analytics-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.9;
}

.analytics-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-glass-bright);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 16px var(--cyan-glow);
}

.analytics-kpi-card.highlight-conversion::before {
  background: linear-gradient(90deg, #38bdf8, #818cf8);
}
.analytics-kpi-card.highlight-revenue::before {
  background: linear-gradient(90deg, #10b981, #22d3ee);
}
.analytics-kpi-card.highlight-pipeline::before {
  background: linear-gradient(90deg, #22d3ee, #38bdf8);
}
.analytics-kpi-card.highlight-drip::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.analytics-kpi-card.highlight-leads::before {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}
.analytics-kpi-card.highlight-citas::before {
  background: linear-gradient(90deg, #0891b2, #a78bfa);
}

.analytics-kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.analytics-kpi-icon {
  font-size: 1.15rem;
}

.analytics-kpi-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  color: var(--clr-text-2);
}

.analytics-kpi-value {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--clr-text-1);
  margin-top: 2px;
  line-height: 1.2;
}

.analytics-kpi-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-text-2);
}

.analytics-kpi-sub {
  font-size: 10px;
  color: var(--clr-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tarjetas de Sección ── */
.analytics-section-card {
  background: var(--bg-titanium);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analytics-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.analytics-section-icon {
  font-size: 1.1rem;
}

.analytics-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-text-1);
}

.analytics-section-desc {
  margin: 0;
  font-size: 10.5px;
  color: var(--clr-text-3);
  line-height: 1.4;
}

/* ── Embudo de Ventas (Sales Funnel) ── */
.analytics-funnel-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.analytics-funnel-step {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: transform var(--t-fast) var(--ease);
}

.analytics-funnel-step:hover {
  border-color: var(--clr-border-hover);
  transform: translateX(2px);
}

.funnel-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.funnel-step-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.funnel-step-icon {
  font-size: 12px;
}

.funnel-step-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--clr-text-1);
}

.funnel-step-right {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.funnel-step-count {
  font-size: 12.5px;
  font-weight: 700;
}

.funnel-step-pct {
  font-size: 10px;
  color: var(--clr-text-3);
}

.funnel-bar-wrapper {
  height: 5px;
  background: var(--clr-bg-0);
  border-radius: var(--r-full);
  overflow: hidden;
}

.funnel-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.funnel-step-sublabel {
  font-size: 10px;
  color: var(--clr-text-3);
}

/* ── Distribución de Lead Scoring ── */
.analytics-bars-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.analytics-bar-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.analytics-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--clr-text-2);
}

.analytics-bar-label strong {
  color: var(--clr-text-1);
  font-weight: 600;
}

.analytics-bar-label small {
  color: var(--clr-text-3);
  font-weight: 400;
}

.analytics-bar-track {
  height: 6px;
  background: var(--clr-bg-2);
  border-radius: var(--r-full);
  overflow: hidden;
}

.analytics-bar-progress {
  height: 100%;
  border-radius: var(--r-full);
  transition: width 500ms ease;
}

/* ── Ratios de Rendimiento ── */
.analytics-ratios-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.analytics-ratio-item {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.analytics-ratio-label {
  font-size: 10.5px;
  color: var(--clr-text-3);
}

.analytics-ratio-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-cyan);
}

.analytics-ratio-bar-bg {
  height: 4px;
  background: var(--clr-bg-0);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-top: 2px;
}

.analytics-ratio-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--clr-cyan), #38bdf8);
  border-radius: var(--r-full);
  transition: width 500ms ease;
}

.analytics-ratio-bar-fill.broadcast {
  background: linear-gradient(90deg, var(--clr-accent), #a78bfa);
}

/* ── Top Servicios ── */
.analytics-services-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.analytics-service-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
}

.service-rank-medal {
  font-size: 13px;
  flex-shrink: 0;
}

.service-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.service-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-title-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-count-text {
  font-size: 10px;
  color: var(--clr-text-2);
  white-space: nowrap;
}

.service-bar-track {
  height: 4px;
  background: var(--clr-bg-0);
  border-radius: var(--r-full);
  overflow: hidden;
}

.service-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--clr-warning), #f97316);
  border-radius: var(--r-full);
  transition: width 500ms ease;
}

.service-bar-fill.product {
  background: linear-gradient(90deg, var(--clr-accent), #38bdf8);
}

.stage-bar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  transition: border-color var(--t-fast) var(--ease);
}

.stage-bar-item:hover {
  border-color: var(--clr-border-hover);
}

.stage-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stage-bar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--clr-text-1);
}

.stage-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stage-value-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--clr-success);
  background: rgba(34, 197, 94, 0.12);
  padding: 1px 6px;
  border-radius: var(--r-full);
}

.stage-count-text {
  font-size: 10px;
  color: var(--clr-text-3);
}

.analytics-empty-hint {
  text-align: center;
  padding: 12px;
  font-size: 11px;
  color: var(--clr-text-3);
}

.analytics-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ═══════════════════════════════════════════════════════════
   MÓDULO 3.2: RESILIENCIA MULTI-MODELO Y HEALTH MONITOR
   ═══════════════════════════════════════════════════════════ */

/* ── Badges de Proveedor de IA en Mensajes ── */
.msg-provider-tag {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.2px;
}

.msg-provider-tag.nexrouter {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.msg-provider-tag.groq {
  background: rgba(249, 115, 22, 0.15);
  color: #fdba74;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.msg-provider-tag.gemini {
  background: rgba(6, 182, 212, 0.15);
  color: #67e8f9;
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.msg-provider-tag.fallback {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ── Panel Sistema: Monitor de Salud Multi-Modelo y Cascada ── */
.llm-cascade-card {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}

.llm-cascade-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0;
}

.llm-flow-node {
  flex: 1;
  min-width: 85px;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.llm-flow-node.nexrouter { border-top: 2px solid #3b82f6; }
.llm-flow-node.groq { border-top: 2px solid #f97316; }
.llm-flow-node.gemini { border-top: 2px solid #06b6d4; }
.llm-flow-node.fallback { border-top: 2px solid #a855f7; }

.llm-flow-step {
  font-size: 9px;
  font-weight: 800;
  color: var(--clr-text-3);
  text-transform: uppercase;
}

.llm-flow-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-text-1);
  margin: 1px 0;
  white-space: nowrap;
}

.llm-flow-sub {
  font-size: 9.5px;
  color: var(--clr-text-2);
  white-space: nowrap;
}

.llm-flow-arrow {
  color: var(--clr-text-3);
  font-size: 11px;
  flex-shrink: 0;
}

.llm-health-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.llm-provider-card {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  transition: all var(--t-fast) var(--ease);
}

.llm-provider-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.llm-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.llm-provider-icon {
  font-size: 16px;
}

.llm-provider-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--clr-text-1);
  margin: 0;
}

.llm-provider-model {
  font-size: 10.5px;
  color: var(--clr-text-3);
}

.llm-cb-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--r-full);
  letter-spacing: 0.3px;
}

.llm-cb-badge.healthy {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.llm-cb-badge.degraded {
  background: rgba(245, 158, 11, 0.15);
  color: #fde047;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.llm-cb-badge.down {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.llm-card-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--clr-bg-3);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: 11px;
}

.llm-metric {
  display: flex;
  align-items: center;
  gap: 4px;
}

.llm-metric-label {
  color: var(--clr-text-3);
}

.llm-metric-value {
  color: var(--clr-text-1);
  font-weight: 600;
}

.llm-ping-results-box {
  background: rgba(13, 17, 23, 0.95);
  border: 1px solid var(--clr-accent-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 11.5px;
  animation: slide-down 0.2s var(--ease);
}

.llm-ping-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.llm-ping-row:last-child {
  border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════
   MÓDULO 3.3: RECORDATORIOS Y DRIP CAMPAIGNS (BADGES)
   ═══════════════════════════════════════════════════════════ */
.appointment-reminder-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.appointment-reminder-badge.scheduled {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.appointment-reminder-badge.sent {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.appointment-reminder-badge.post {
  background: rgba(245, 158, 11, 0.15);
  color: #fde047;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.appointment-reminder-badge.cancelled {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

/* ═══════════════════════════════════════════════════════════
   ACCESIBILIDAD: Movimiento Reducido
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SUB-FASE 4.3: TENANT SWITCHER & CONSOLA SUPERADMIN
   ═══════════════════════════════════════════════════════════ */

/* ── Header Tenant Switcher ── */
.tenant-switcher-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.3);
  padding: 4px 12px;
  border-radius: var(--r-full);
  backdrop-filter: blur(10px);
  transition: all var(--t-base) var(--ease);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tenant-switcher-container:hover {
  border-color: rgba(124, 58, 237, 0.55);
  background: rgba(124, 58, 237, 0.18);
  box-shadow: 0 0 12px var(--clr-accent-glow);
}

.tenant-switcher-icon {
  font-size: 14px;
}

.tenant-switcher-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--clr-text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tenant-select {
  background: var(--clr-bg-2);
  color: var(--clr-text-1);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  outline: none;
  transition: border-color var(--t-fast);
}

.tenant-select:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 2px var(--clr-accent-dim);
}

.tenant-static-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-cyan);
  padding: 2px 8px;
}

/* ── Banner de Estatus Superadmin ── */
.superadmin-status-banner {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.12), rgba(124, 58, 237, 0.12));
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.superadmin-status-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.superadmin-badge-crown {
  font-size: 11px;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.6px;
}

.superadmin-status-sub {
  font-size: 11.5px;
  color: var(--clr-text-2);
}

/* ── Semáforo de Conectividad Meta ── */
.superadmin-meta-semaphore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.superadmin-meta-semaphore.online {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.superadmin-meta-semaphore.degraded {
  background: rgba(245, 158, 11, 0.15);
  color: #fde047;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.superadmin-meta-semaphore.offline {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.semaphore-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* ── KPI Cards Highlights de Superadmin ── */
.highlight-tenants .analytics-kpi-badge {
  background: rgba(234, 179, 8, 0.18);
  color: #fbbf24;
}

.highlight-messages .analytics-kpi-badge {
  background: rgba(6, 182, 212, 0.18);
  color: #67e8f9;
}

.highlight-tokens .analytics-kpi-badge {
  background: rgba(124, 58, 237, 0.18);
  color: #c084fc;
}

.highlight-numbers .analytics-kpi-badge {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

/* ── Lista y Tarjetas de Inquilinos ── */
.superadmin-tenants-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.superadmin-tenant-card {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all var(--t-base) var(--ease);
}

.superadmin-tenant-card:hover {
  border-color: rgba(124, 58, 237, 0.35);
  background: rgba(22, 27, 34, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.superadmin-tenant-card.active-tenant {
  border-color: var(--clr-accent);
  box-shadow: 0 0 14px var(--clr-accent-dim);
}

.superadmin-tenant-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.superadmin-tenant-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--clr-text-1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.superadmin-tenant-slug {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--clr-text-3);
  background: var(--clr-bg-3);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

.superadmin-plan-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: var(--r-full);
  white-space: nowrap;
}

.superadmin-plan-badge.enterprise {
  background: rgba(234, 179, 8, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(234, 179, 8, 0.35);
}

.superadmin-plan-badge.pro {
  background: rgba(124, 58, 237, 0.15);
  color: #c084fc;
  border: 1px solid rgba(124, 58, 237, 0.35);
}

.superadmin-plan-badge.starter {
  background: rgba(6, 182, 212, 0.15);
  color: #67e8f9;
  border: 1px solid rgba(6, 182, 212, 0.35);
}

.superadmin-tenant-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 11.5px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.superadmin-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.superadmin-detail-label {
  color: var(--clr-text-3);
  font-size: 10.5px;
}

.superadmin-detail-value {
  color: var(--clr-text-1);
  font-weight: 600;
  font-size: 11.5px;
}

.superadmin-tenant-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.btn-audit-tenant {
  background: var(--clr-bg-3);
  color: var(--clr-text-1);
  border: 1px solid var(--clr-border);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--t-fast);
}

.btn-audit-tenant:hover {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: #fff;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   SUB-FASE 5.2: ASISTENTE DE CONFIGURACIÓN WHATSAPP (UI WIZARD)
   ═══════════════════════════════════════════════════════════════ */

.wa-wizard-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}

/* Banner de Estado de WhatsApp */
.wa-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  gap: 12px;
  transition: all var(--t-base) var(--ease);
}

.wa-status-banner.connected {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.35);
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.1);
}

.wa-status-banner.pending {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.35);
}

.wa-status-banner.not-configured {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--clr-border);
}

.wa-status-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wa-status-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--clr-text-3);
}

.wa-status-dot.connected {
  background: var(--clr-active);
  box-shadow: 0 0 8px var(--clr-active);
  animation: pulse-dot 2s infinite;
}

.wa-status-dot.pending {
  background: var(--clr-warning);
  box-shadow: 0 0 8px var(--clr-warning);
}

.wa-status-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--clr-text-1);
}

.wa-status-desc {
  font-size: 0.76rem;
  color: var(--clr-text-2);
}

/* Stepper Horizontal */
.wa-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 8px 0 16px 0;
  padding: 0 12px;
}

.wa-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

.wa-step-circle {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--clr-bg-2);
  border: 2px solid var(--clr-border);
  color: var(--clr-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.88rem;
  transition: all var(--t-base) var(--ease);
}

.wa-step-item.active .wa-step-circle {
  background: var(--clr-accent);
  border-color: var(--clr-accent-light);
  color: #fff;
  box-shadow: 0 0 14px var(--clr-accent-glow);
  transform: scale(1.08);
}

.wa-step-item.completed .wa-step-circle {
  background: var(--clr-active);
  border-color: var(--clr-active);
  color: #fff;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

/* El navegador pinta su propio anillo de foco sobre el <button>, que es
   rectangular y mide 76x53 porque abarca el círculo Y la etiqueta: sobre el
   panel oscuro sale como un recuadro blanco desalineado alrededor del círculo
   azul y encima cruza el texto «1. Credenciales». Se retira ese anillo y el
   indicador se traslada al propio círculo —redondo y concéntrico, vía
   box-shadow, que sí respeta el border-radius— para no perder el foco visible
   del teclado (misma intención que .modal-tab-link:focus-visible).
   Va DESPUÉS de .active/.completed a propósito: la especificidad empata (0,3,0)
   y en un empate gana la última regla declarada. */
.wa-step-item:focus,
.wa-step-item:focus-visible {
  outline: none;
}

.wa-step-item:focus-visible .wa-step-circle {
  border-color: var(--clr-accent-light);
  box-shadow: 0 0 0 3px var(--cyan-glow-intense), 0 0 14px var(--clr-accent-glow);
}

.wa-step-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--clr-text-2);
  transition: color var(--t-fast);
  white-space: nowrap;
}

.wa-step-item.active .wa-step-label {
  color: var(--clr-text-1);
  font-weight: 700;
}

.wa-step-item.completed .wa-step-label {
  color: var(--clr-active);
}

.wa-step-connector {
  flex: 1;
  height: 2px;
  background: var(--clr-border);
  margin: 0 8px;
  margin-bottom: 22px;
  transition: background var(--t-base);
  z-index: 1;
}

.wa-step-connector.completed {
  background: var(--clr-active);
}

/* Paneles de Pasos */
.wa-step-panel {
  display: none;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 18px;
  animation: fade-in 0.25s var(--ease);
}

.wa-step-panel.active {
  display: block;
}

.wa-panel-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.wa-panel-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--clr-text-1);
  margin: 0;
}

.wa-panel-desc {
  font-size: 0.8rem;
  color: var(--clr-text-2);
  margin-bottom: 16px;
  line-height: 1.45;
}

/* Inputs con Copiado y Toggle de Password */
.wa-input-copy-group {
  position: relative;
  display: flex;
  align-items: center;
}

.wa-input-copy-group input {
  padding-right: 70px !important;
}

.wa-btn-copy-inline {
  position: absolute;
  right: 6px;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-2);
  font-size: 0.74rem;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all var(--t-fast);
}

.wa-btn-copy-inline:hover {
  background: var(--clr-bg-hover);
  color: var(--clr-text-1);
  border-color: var(--clr-border-hover);
}

.wa-btn-copy-inline.copied {
  background: rgba(34, 197, 94, 0.15);
  color: var(--clr-active);
  border-color: var(--clr-active);
}

.wa-input-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.wa-input-password-wrapper input {
  padding-right: 44px !important;
  width: 100%;
}

.wa-btn-toggle-pw {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--clr-text-2);
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.75;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.wa-btn-toggle-pw:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.wa-btn-toggle-pw:hover {
  color: var(--clr-text-1);
}

/* Guía de Instrucciones en el Paso 2 */
.wa-guide-box {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-top: 14px;
}

.wa-guide-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--clr-accent-light);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wa-guide-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.78rem;
  color: var(--clr-text-2);
  line-height: 1.6;
}

.wa-guide-list li {
  margin-bottom: 4px;
}

.wa-guide-list code {
  background: var(--clr-bg-1);
  color: var(--clr-cyan);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.74rem;
  font-family: monospace;
}

/* Grid de Verificación Paso 3 */
.wa-verify-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 600px) {
  .wa-verify-grid {
    grid-template-columns: 1fr;
  }
}

.wa-verify-card {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: all var(--t-base) var(--ease);
}

.wa-verify-card.passed {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.04);
}

.wa-verify-card.failed {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.04);
}

.wa-verify-card.running {
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.04);
}

.wa-verify-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.wa-verify-details {
  flex: 1;
}

.wa-verify-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-text-1);
  margin-bottom: 2px;
}

.wa-verify-desc {
  font-size: 0.74rem;
  color: var(--clr-text-2);
}

/* Badges de Calidad del Número */
.wa-quality-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.wa-quality-badge.green {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.wa-quality-badge.yellow {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.wa-quality-badge.red {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Tarjeta de Troubleshooting */
.wa-trouble-card {
  display: none;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--r-md);
  padding: 14px;
  margin-top: 14px;
}

.wa-trouble-card.active {
  display: block;
  animation: slide-up 0.3s var(--ease);
}

.wa-trouble-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clr-warning);
  margin-bottom: 8px;
}

.wa-trouble-msg {
  font-size: 0.78rem;
  color: var(--clr-text-2);
  margin-bottom: 10px;
  line-height: 1.4;
}

.wa-trouble-steps {
  font-size: 0.76rem;
  color: var(--clr-text-1);
  line-height: 1.5;
  background: var(--clr-bg-2);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-border);
}

/* ── Diagnóstico en vivo: ⚡ Probar Conexión (solo lectura) ──
   El botón de diagnóstico y el de guardado comparten fila. .wa-probe-btn se
   define aquí en lugar de reutilizar .btn-secondary porque esa clase solo
   existe anidada bajo .wa-nav-buttons: suelta no pinta nada. */
.wa-verify-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.wa-probe-btn {
  flex: 1 1 0;
  min-width: 170px;
  padding: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  color: var(--clr-text-1);
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}

.wa-probe-btn:hover:not(:disabled) {
  border-color: var(--clr-accent);
  color: var(--clr-accent);
  background: var(--clr-bg-3);
}

.wa-probe-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wa-probe-hint {
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--clr-text-2);
  margin: 8px 0 0;
}

.wa-probe-hint strong {
  color: var(--clr-text-1);
  font-weight: 700;
}

.wa-probe-result {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--clr-border);
  background: var(--clr-bg-2);
  animation: slide-up 0.3s var(--ease);
}

.wa-probe-result.ok {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.4);
}

.wa-probe-result.fail {
  background: var(--clr-danger-dim);
  border-color: rgba(239, 68, 68, 0.4);
}

.wa-probe-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.wa-probe-dot {
  font-size: 1rem;
  line-height: 1;
}

.wa-probe-title {
  font-size: 0.9rem;
  font-weight: 800;
}

.wa-probe-result.ok .wa-probe-title {
  color: var(--clr-active);
}

.wa-probe-result.fail .wa-probe-title {
  color: var(--clr-danger);
}

.wa-probe-msg {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--clr-text-2);
  margin: 0;
}

.wa-probe-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 10px 0 0;
  font-size: 0.76rem;
}

.wa-probe-grid:empty {
  display: none;
}

.wa-probe-grid dt {
  color: var(--clr-text-2);
  font-weight: 600;
  white-space: nowrap;
}

.wa-probe-grid dd {
  margin: 0;
  color: var(--clr-text-1);
  font-weight: 700;
  word-break: break-word;
}

@media (max-width: 560px) {
  .wa-verify-actions { flex-direction: column; }
  .wa-probe-btn { min-width: 0; }
}
/* Tarjeta de Éxito Final */
.wa-success-card {
  display: none;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: var(--r-md);
  padding: 16px;
  text-align: center;
  margin-top: 14px;
}

.wa-success-card.active {
  display: block;
  animation: slide-up 0.3s var(--ease);
}

.wa-success-icon {
  font-size: 2rem;
  margin-bottom: 6px;
}

.wa-success-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--clr-active);
  margin-bottom: 4px;
}

.wa-success-desc {
  font-size: 0.8rem;
  color: var(--clr-text-2);
  margin-bottom: 10px;
}

/* Botones de Navegación del Wizard */
.wa-nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--clr-border);
  gap: 12px;
}

.wa-nav-buttons .btn-primary,
.wa-nav-buttons .btn-secondary {
  width: auto !important;
  min-width: 130px;
  padding: 9px 20px !important;
  font-size: 0.86rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--r-md) !important;
}

#wa-btn-next {
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════
   INGESTA MASIVA CSV / XLSX — CATÁLOGO
   ════════════════════════════════════════════════════════════ */

.catalog-bulk-wrapper {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 18px;
  animation: fadeInDown 0.25s ease-out;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Zona Drag & Drop */
.catalog-dropzone {
  border: 2px dashed var(--clr-border-hover);
  border-radius: var(--r-md);
  padding: 28px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all var(--t-base) var(--ease);
  outline: none;
}

.catalog-dropzone:hover,
.catalog-dropzone:focus-visible {
  border-color: var(--clr-accent);
  background: rgba(124, 58, 237, 0.04);
  box-shadow: 0 0 16px var(--clr-accent-dim);
}

.catalog-dropzone.dragover {
  border-color: var(--clr-cyan);
  background: rgba(6, 182, 212, 0.08);
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.25);
  transform: scale(1.008);
}

.dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.dropzone-icon {
  font-size: 36px;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.dropzone-text-main {
  font-size: 13px;
  color: var(--clr-text-1);
}

.dropzone-browse-link {
  color: var(--clr-accent-light);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dropzone-hints {
  font-size: 11px;
  color: var(--clr-text-2);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.badge-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  font-size: 10px;
  font-weight: 700;
  color: var(--clr-cyan);
  font-family: var(--font-mono);
}

/* Panel de Previsualización */
.catalog-preview-panel {
  margin-top: 16px;
  border-top: 1px solid var(--clr-border);
  padding-top: 16px;
  animation: fadeInDown 0.2s ease-out;
}

.catalog-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.preview-title-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.preview-icon {
  font-size: 22px;
}

.preview-filename {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-text-1);
  margin-bottom: 2px;
}

.preview-subtitle {
  font-size: 11px;
  color: var(--clr-text-2);
}

.preview-summary-badges {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.stat-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stat-badge.total {
  background: rgba(255, 255, 255, 0.05);
  color: var(--clr-text-2);
  border: 1px solid var(--clr-border);
}

.stat-badge.valid {
  background: var(--clr-active-dim);
  color: var(--clr-active);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.stat-badge.error {
  background: var(--clr-danger-dim);
  color: var(--clr-danger);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Selector de Modo */
.import-mode-selector {
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mode-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mode-option {
  font-size: 11.5px;
  color: var(--clr-text-1);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.mode-option input[type="radio"] {
  accent-color: var(--clr-accent);
  cursor: pointer;
}

/* Tabla de Previsualización */
.catalog-preview-table-wrapper {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  background: var(--clr-bg-1);
  margin-bottom: 14px;
}

.catalog-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  text-align: left;
}

.catalog-preview-table thead {
  position: sticky;
  top: 0;
  background: var(--clr-bg-3);
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.catalog-preview-table th {
  padding: 8px 10px;
  color: var(--clr-text-2);
  font-weight: 600;
  font-size: 11px;
  border-bottom: 1px solid var(--clr-border);
  white-space: nowrap;
}

.catalog-preview-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--clr-border);
  color: var(--clr-text-1);
  vertical-align: middle;
}

.catalog-preview-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

.catalog-preview-table tr.row-err {
  background: rgba(239, 68, 68, 0.06);
}

.catalog-preview-table tr.row-err td {
  color: #fca5a5;
}

.status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.status-pill.ok {
  background: var(--clr-active-dim);
  color: var(--clr-active);
}

.status-pill.warn {
  background: var(--clr-warning-dim);
  color: var(--clr-warning);
}

.status-pill.err {
  background: var(--clr-danger-dim);
  color: var(--clr-danger);
}

.cell-thumb-preview {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  display: block;
  margin: 0 auto;
}

/* Barra de Progreso */
.catalog-progress-container {
  margin-bottom: 14px;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 10px 14px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--clr-text-2);
  margin-bottom: 6px;
  font-weight: 600;
}

.progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-cyan));
  border-radius: var(--r-full);
  transition: width 0.3s ease;
}

/* Acciones de Previsualización */
.catalog-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════
   MÓDULO 7.1: PIPELINE VISUAL DE VENTAS & TABLERO KANBAN CRM
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Selector de Vista Principal en Header ── */
.view-mode-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--clr-bg-3);
  padding: 3px 4px;
  border-radius: var(--r-md);
  border: 1px solid var(--clr-border);
  margin: 0 12px;
}

@media (min-width: 769px) {
  /* En PC mostramos solo las dos vistas principales: Chats y Pipeline */
  #btn-view-analytics,
  #btn-view-settings {
    display: none !important;
  }
}

.kanban-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid var(--cyan-oled);
  color: var(--cyan-light);
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.kanban-back-btn:hover {
  background: var(--cyan-oled);
  color: #020617;
  box-shadow: 0 2px 12px var(--cyan-glow);
  transform: translateY(-1px);
}

.view-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--clr-text-2);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.view-mode-tab:hover {
  color: var(--clr-text-1);
  background: rgba(255, 255, 255, 0.05);
}

.view-mode-tab.active {
  background: var(--clr-accent);
  color: #ffffff;
  box-shadow: 0 2px 8px var(--clr-accent-glow);
}

.view-mode-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 1px 6px;
  border-radius: var(--r-full);
}

/* ── 2. Barra de Pipeline en el Visor de Chat Activo ── */
.chat-pipeline-bar {
  background: linear-gradient(180deg, rgba(22, 27, 34, 0.8) 0%, rgba(13, 17, 23, 0.95) 100%);
  border-bottom: 1px solid var(--clr-border);
  padding: 8px 16px;
  backdrop-filter: blur(10px);
}

.chat-pipeline-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.chat-pipeline-stage-area,
.chat-pipeline-deal-area,
.chat-pipeline-agent-area {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-pipeline-label,
.chat-deal-label,
.chat-agent-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-text-2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.chat-stage-select-wrapper {
  position: relative;
}

.chat-stage-select {
  background: var(--clr-bg-3);
  color: var(--clr-text-1);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color var(--t-fast);
}

.chat-stage-select:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 2px var(--clr-accent-dim);
}

.chat-deal-input-wrapper {
  display: flex;
  align-items: center;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  padding: 2px 6px;
}

.chat-deal-currency {
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-warning);
  margin-right: 4px;
}

.chat-deal-input {
  background: transparent;
  border: none;
  color: var(--clr-text-1);
  font-size: 12px;
  font-weight: 600;
  width: 70px;
  outline: none;
}

.btn-chat-deal-save,
.btn-chat-agent-save {
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  color: var(--clr-active);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}

.btn-chat-deal-save:hover,
.btn-chat-agent-save:hover {
  background: var(--clr-active-dim);
  border-color: var(--clr-active);
}

.chat-assigned-agent-input {
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  color: var(--clr-text-1);
  padding: 4px 8px;
  font-size: 11.5px;
  width: 120px;
  outline: none;
}

.chat-assigned-agent-input:focus {
  border-color: var(--clr-accent);
}

.chat-stage-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--clr-accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

/* ── 3. Contenedor Principal del Tablero Kanban ── */
.kanban-view {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--header-h));
  background: var(--clr-bg-1);
  overflow: hidden;
}

.kanban-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 20px;
  background: var(--clr-bg-2);
  border-bottom: 1px solid var(--clr-border);
}

.kanban-toolbar-left,
.kanban-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kanban-title-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kanban-icon {
  font-size: 18px;
}

.kanban-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-text-1);
  margin: 0;
}

.kanban-search-wrapper {
  position: relative;
  width: 240px;
}

.kanban-search-input {
  width: 100%;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  padding: 6px 10px 6px 30px;
  color: var(--clr-text-1);
  font-size: 12px;
  outline: none;
  transition: border-color var(--t-fast);
}

.kanban-search-input:focus {
  border-color: var(--clr-accent);
}

.kanban-select-filter {
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  color: var(--clr-text-1);
  font-size: 12px;
  padding: 6px 10px;
  outline: none;
  cursor: pointer;
}

.kanban-metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  padding: 6px 12px;
  border-radius: var(--r-full);
}

.kanban-metric-pill.total-pipeline {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.08);
}

.kanban-metric-pill.total-pipeline .kanban-metric-value {
  color: var(--clr-warning);
  font-weight: 700;
}

.kanban-metric-label {
  font-size: 11px;
  color: var(--clr-text-2);
}

.kanban-metric-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-text-1);
}

.btn-icon-labeled {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-1);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}

.btn-icon-labeled:hover {
  background: var(--clr-bg-hover);
  border-color: var(--clr-border-hover);
}

/* ── 4. Grid / Columnas del Tablero Kanban ── */
.kanban-board-container {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
  align-items: flex-start;
}

.kanban-column {
  flex: 0 0 280px;
  width: 280px;
  max-height: calc(100dvh - var(--header-h) - 80px);
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.kanban-col-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kanban-col-header.lead_nuevo {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, transparent 100%);
  border-top: 3px solid var(--clr-cyan);
}

.kanban-col-header.cotizando {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, transparent 100%);
  border-top: 3px solid var(--clr-warning);
}

.kanban-col-header.cita_programada {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, transparent 100%);
  border-top: 3px solid var(--clr-accent);
}

.kanban-col-header.ganado {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, transparent 100%);
  border-top: 3px solid var(--clr-active);
}

.kanban-col-header.perdido {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.12) 0%, transparent 100%);
  border-top: 3px solid var(--clr-inactive);
}

.kanban-col-title-area {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kanban-col-icon {
  font-size: 15px;
}

.kanban-col-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-text-1);
  margin: 0;
}

.kanban-col-count {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--clr-bg-3);
  color: var(--clr-text-2);
  border: 1px solid var(--clr-border);
}

.kanban-col-amount {
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-text-2);
}

.kanban-cards-container {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-height: 180px;
  flex: 1;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}

.kanban-cards-container.drag-over {
  background: rgba(124, 58, 237, 0.08);
  border: 2px dashed var(--clr-accent);
  border-radius: var(--r-md);
}

.kanban-empty-col {
  text-align: center;
  padding: 30px 10px;
  color: var(--clr-text-3);
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.kanban-empty-icon {
  font-size: 20px;
  opacity: 0.5;
}

/* ── 5. Tarjeta de Oportunidad (Kanban Card) ── */
.kanban-card {
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: grab;
  user-select: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.kanban-card:hover {
  transform: translateY(-2px);
  border-color: var(--clr-border-hover);
  box-shadow: var(--shadow-md);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card.is-dragging {
  opacity: 0.4;
  border: 2px dashed var(--clr-accent);
  transform: scale(0.98);
}

.kanban-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kanban-card-user {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.kanban-card-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--clr-bg-hover);
  color: var(--clr-text-1);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.kanban-card-avatar.bot-on::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  background: var(--clr-active);
  border-radius: 50%;
  border: 2px solid var(--clr-bg-3);
}

.kanban-card-avatar.bot-off::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  background: var(--clr-inactive);
  border-radius: 50%;
  border: 2px solid var(--clr-bg-3);
}

.kanban-card-user-info {
  overflow: hidden;
}

.kanban-card-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--clr-text-1);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-card-phone {
  font-size: 10.5px;
  color: var(--clr-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.kanban-lead-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--r-full);
  white-space: nowrap;
}

.kanban-lead-pill.hot {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.kanban-lead-pill.warm {
  background: rgba(245, 158, 11, 0.15);
  color: #fde68a;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.kanban-lead-pill.cold {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.kanban-card-interest {
  font-size: 11px;
  color: var(--clr-cyan);
  background: var(--clr-cyan-dim);
  padding: 3px 6px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-card-appt {
  font-size: 11px;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.12);
  padding: 3px 6px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-card-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
}

.kanban-deal-badge {
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

.kanban-deal-badge.has-value {
  background: rgba(245, 158, 11, 0.15);
  color: var(--clr-warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.kanban-deal-badge.no-value {
  background: var(--clr-bg-2);
  color: var(--clr-text-3);
}

.kanban-agent-badge {
  color: var(--clr-text-2);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

.kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.kanban-bot-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-full);
}

.kanban-bot-pill.active {
  background: var(--clr-active-dim);
  color: var(--clr-active);
}

.kanban-bot-pill.manual {
  background: var(--clr-agent-dim);
  color: var(--clr-agent);
}

.kanban-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-kanban-action {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-2);
  font-size: 11px;
  padding: 3px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}

.btn-kanban-action:hover {
  background: var(--clr-bg-hover);
  color: var(--clr-text-1);
  border-color: var(--clr-border-hover);
}

.btn-kanban-action.btn-open-chat:hover {
  background: var(--clr-accent);
  color: #ffffff;
  border-color: var(--clr-accent);
}

/* ═══════════════════════════════════════════════════════════
   DISEÑO GLASSMORPHISM PREMIUM: MODALES CRM & GESTIÓN DE EQUIPO
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Contenedor y Tarjeta de Modal CRM ── */
.crm-modal-card {
  width: 100%;
  max-width: 480px;
  background: rgba(18, 22, 34, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 24px;
  color: var(--clr-text-1);
  position: relative;
  animation: modalScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.crm-modal-card.crm-specialists-modal {
  max-width: 580px;
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.crm-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
}

.crm-modal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crm-modal-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--clr-accent);
  flex-shrink: 0;
}

.crm-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.2px;
}

.crm-modal-subtitle {
  font-size: 12px;
  color: var(--clr-text-2);
  margin: 3px 0 0 0;
  line-height: 1.4;
}

.crm-modal-client-info {
  margin-top: 4px;
}

.crm-client-name {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-cyan);
  background: rgba(6, 182, 212, 0.12);
  padding: 2px 10px;
  border-radius: var(--r-full);
  border: 1px solid rgba(6, 182, 212, 0.25);
}

.crm-btn-close {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--clr-text-3);
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: all var(--t-fast);
}

.crm-btn-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ── 2. Formularios e Inputs del Modal CRM ── */
.crm-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.crm-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crm-form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--clr-text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.crm-label-icon {
  font-size: 14px;
}

.crm-label-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crm-link-action {
  background: transparent;
  border: none;
  color: var(--clr-cyan);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
}

.crm-link-action:hover {
  background: rgba(6, 182, 212, 0.15);
  color: #ffffff;
}

/* ── 3. Monto / Precio Pixel-Perfect con Alineación Vertical Centrada ── */
.crm-price-input-box {
  display: flex;
  align-items: center;
  height: 42px;
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all var(--t-fast);
}

.crm-price-input-box:focus-within {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
  background: #090d13;
}

.crm-price-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--clr-warning);
  font-size: 13.5px;
  font-weight: 700;
  user-select: none;
  font-family: var(--font-mono, monospace);
  flex-shrink: 0;
}

.crm-price-field {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  margin: 0;
  line-height: 42px;
}

.crm-price-field::placeholder {
  color: var(--clr-text-3);
  font-weight: 400;
}

/* ── 4. Selectores Personalizados Dark Glassmorphism ── */
.crm-custom-select-wrapper {
  position: relative;
  width: 100%;
}

.crm-custom-select {
  width: 100%;
  height: 42px;
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  padding: 0 36px 0 12px;
  color: #f0f6fc;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: all var(--t-fast);
}

.crm-custom-select:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
  background: #090d13;
}

.crm-custom-select option {
  background: #161b22;
  color: #f0f6fc;
  padding: 10px 12px;
}

.crm-custom-select-wrapper::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--clr-text-3);
  font-size: 13px;
}

.crm-custom-textarea {
  width: 100%;
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  padding: 10px 12px;
  color: #ffffff;
  font-size: 12.5px;
  outline: none;
  resize: vertical;
  min-height: 72px;
  box-sizing: border-box;
  transition: all var(--t-fast);
}

.crm-custom-textarea:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
  background: #090d13;
}

/* ── 5. Botones de Acción del Modal ── */
.crm-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
  padding-top: 8px;
}

.btn-crm-cancel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--clr-text-2);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
}

.btn-crm-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-crm-save {
  background: linear-gradient(135deg, var(--clr-accent) 0%, #6366f1 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 22px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px var(--clr-accent-glow);
}

.btn-crm-save:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--clr-accent-glow);
}

.btn-crm-save:active {
  transform: translateY(0);
}

.btn-crm-save.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}

/* ── 6. Modal de Gestión de Especialistas ── */
.crm-specialist-add-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.crm-section-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.crm-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.crm-mini-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--clr-text-2);
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.crm-modal-input {
  width: 100%;
  height: 36px;
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-sm);
  padding: 0 10px;
  color: #ffffff;
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
  transition: all var(--t-fast);
}

.crm-modal-input:focus {
  border-color: var(--clr-cyan);
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.25);
  background: #090d13;
}

.crm-specialists-list-section {
  margin-top: 10px;
}

.crm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.crm-count-badge {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: var(--clr-cyan);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--r-full);
}

.crm-specialists-items-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.crm-specialist-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  padding: 10px 14px;
  transition: border-color var(--t-fast);
}

.crm-specialist-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.crm-specialist-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crm-specialist-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-cyan));
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.crm-specialist-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.crm-specialist-meta {
  font-size: 11px;
  color: var(--clr-text-2);
  margin: 2px 0 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-specialist-role-pill {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.3);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 600;
}

.crm-specialist-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-delete-specialist {
  background: transparent;
  border: 1px solid transparent;
  color: var(--clr-inactive);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
}

.btn-delete-specialist:hover {
  background: rgba(244, 63, 94, 0.15);
  border-color: rgba(244, 63, 94, 0.3);
  color: #fca5a5;
}

/* ── 7. Controles Compactos en Chat Pipeline Bar ── */
.crm-select-compact {
  background: #0d1117;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  height: 30px;
}

.crm-deal-badge-input {
  display: flex;
  align-items: center;
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--r-sm);
  height: 30px;
  overflow: hidden;
}

.crm-currency-symbol {
  padding: 0 6px;
  color: var(--clr-warning);
  font-weight: 700;
  font-size: 11px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.crm-mini-input {
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  width: 65px;
  padding: 0 6px;
  outline: none;
  height: 100%;
}

.btn-mini-save {
  background: rgba(16, 185, 129, 0.15);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--clr-active);
  font-size: 11px;
  font-weight: 700;
  padding: 0 8px;
  height: 100%;
  cursor: pointer;
  transition: background var(--t-fast);
}

.btn-mini-save:hover {
  background: var(--clr-active);
  color: #ffffff;
}

.crm-agent-select-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-mini-manage {
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--clr-text-2);
  padding: 0 7px;
  height: 30px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 12px;
  transition: all var(--t-fast);
}

.btn-mini-manage:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* ── 8. Badges de Asesor en Tarjetas Kanban ── */
.kanban-agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  transition: all var(--t-fast);
}

.kanban-agent-badge.assigned {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.3);
  font-weight: 600;
}

.kanban-agent-badge.unassigned {
  background: rgba(255, 255, 255, 0.04);
  color: var(--clr-text-3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   SUB-FASE 8.1: WEBHOOKS SALIENTES & INTEGRACIONES (MAKE/ZAPIER)
   ═══════════════════════════════════════════════════════════ */
.webhook-event-checkbox-card {
  transition: all var(--t-fast);
  user-select: none;
}

.webhook-event-checkbox-card:hover {
  border-color: var(--clr-accent) !important;
  background: rgba(124, 58, 237, 0.08) !important;
}

.webhook-event-checkbox-card input[type="checkbox"]:checked + div > div:first-child {
  color: var(--clr-accent-light) !important;
}

#btn-test-webhook-live:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

#webhook-test-result-card {
  animation: fadeInDown 0.25s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════
   SUB-FASE 8.2: ALERTAS INTERNAS & HANDOFF HUMANO (PROACTIVE NOTIFICATIONS)
   ═══════════════════════════════════════════════════════════ */
#tab-notifications {
  padding-bottom: 24px;
}

/* Switch Toggle Universal Compatibility */
.switch-toggle,
.switch-ui {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.switch-toggle input,
.switch-ui input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch-toggle .slider,
.switch-toggle .switch-slider,
.switch-ui .slider,
.switch-ui .switch-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-full);
  transition: all var(--t-base) var(--ease);
}

.switch-toggle .slider:before,
.switch-toggle .switch-slider:before,
.switch-ui .slider:before,
.switch-ui .switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--clr-text-2);
  border-radius: 50%;
  transition: all var(--t-base) var(--ease-spring);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.switch-toggle input:checked + .slider,
.switch-toggle input:checked + .switch-slider,
.switch-ui input:checked + .slider,
.switch-ui input:checked + .switch-slider {
  background-color: var(--clr-active-dim);
  border-color: var(--clr-active);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.25);
}

.switch-toggle input:checked + .slider:before,
.switch-toggle input:checked + .switch-slider:before,
.switch-ui input:checked + .slider:before,
.switch-ui input:checked + .switch-slider:before {
  transform: translateX(20px);
  background-color: var(--clr-active);
}

/* Tarjetas de Canal */
.channel-config-card {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.channel-config-card:hover {
  border-color: var(--clr-border-hover);
  background: var(--clr-bg-3) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* Tarjetas de Disparadores de Alerta (Checkboxes) */
.notification-trigger-card {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  user-select: none;
}

.notification-trigger-card:hover {
  border-color: var(--clr-accent) !important;
  background: rgba(124, 58, 237, 0.08) !important;
  transform: translateY(-1px);
}

.notification-trigger-card input[type="checkbox"]:checked + div > div:first-child {
  color: var(--clr-accent-light) !important;
}

/* Consola de Pruebas de Notificación */
.notification-test-console {
  background: rgba(6, 182, 212, 0.05);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: var(--r-md);
  padding: 16px;
  margin-top: 14px;
  margin-bottom: 16px;
}

#btn-test-notification-live {
  width: 100%;
  padding: 11px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  color: #ffffff;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

#btn-test-notification-live:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
}

#btn-test-notification-live:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

#notification-test-result-card {
  animation: fadeInDown 0.25s ease-out;
}

/* ═══════════════════════════════════════════════════════════
   MÓDULO 8.3: EXPORTACIÓN DE REPORTES COMERCIALES Y EJECUTIVOS
   ═══════════════════════════════════════════════════════════ */

/* ── Botones de Exportación en Cabecera de Analytics ── */
.analytics-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.btn-export-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3.5px 7.5px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-border);
  background: var(--clr-bg-3);
  color: var(--clr-text-1);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-export-action:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.btn-export-action.excel {
  color: #34d399;
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

.btn-export-action.excel:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #6ee7b7;
}

.btn-export-action.pdf {
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.3);
}

.btn-export-action.pdf:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  color: #c4b5fd;
}

.btn-export-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── Botones de Exportación en Toolbar de Kanban ── */
.kanban-export-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 6px;
  border-right: 1px solid var(--clr-border);
}

.btn-export-excel {
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  background: rgba(16, 185, 129, 0.06) !important;
}

.btn-export-excel:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: #10b981 !important;
  color: #6ee7b7 !important;
}

.btn-export-pdf {
  color: #a78bfa !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
  background: rgba(139, 92, 246, 0.06) !important;
}

.btn-export-pdf:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.18) !important;
  border-color: #8b5cf6 !important;
  color: #c4b5fd !important;
}

.export-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ═══════════════════════════════════════════════════════════
   ADAPTACIONES RESPONSIVAS MÓVILES & PWA STANDALONE (MÓDULO 10)
   ═══════════════════════════════════════════════════════════ */

/* Botón Volver a Chats (Oculto en Desktop por defecto) */
.mobile-back-btn {
  display: none;
}

@media (max-width: 900px) {
  html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
  }

  #main-app {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    height: 100dvh;
  }

  /* ── Header Móvil Limpio y Compacto (0% Desborde) ── */
  .app-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
    min-height: auto;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .header-brand {
    gap: 6px;
    flex-shrink: 0;
  }

  /* Antes esta regla apuntaba a `.header-icon`, una clase que no aparece
     en ningun HTML del proyecto, asi que en movil el logo se quedaba en
     los 36 px de escritorio. */
  .header-brand-logo {
    width: 32px;
    height: 32px;
    padding: 3px;
  }

  .header-title {
    font-size: 14px;
    white-space: nowrap;
  }

  .header-badge {
    display: none !important;
  }

  .tenant-switcher-container {
    padding: 2px 8px;
    max-width: 125px;
    gap: 4px;
    margin: 0;
  }

  .tenant-switcher-label {
    display: none !important;
  }

  .tenant-select {
    max-width: 85px;
    font-size: 11px;
    padding: 2px 4px;
    text-overflow: ellipsis;
  }

  .header-actions {
    margin-left: auto;
    gap: 6px;
    align-items: center;
  }

  .header-user .user-name {
    display: none !important;
  }

  #btn-train-ai,
  .btn-train-header,
  #btn-pwa-install-header,
  .header-actions .btn-primary,
  .header-actions .btn-pwa-install,
  .header-actions .btn-ghost,
  .header-actions a {
    display: none !important;
  }

  /* ── Selector de Vistas Principal (4 Pestañas Táctiles Móviles) ── */
  .view-mode-nav {
    width: 100%;
    margin: 4px 0 0 0;
    display: flex;
    justify-content: space-between;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    border-radius: var(--r-md);
    padding: 3px;
    box-sizing: border-box;
    order: 10;
  }

  .view-mode-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 2px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--r-sm);
    min-width: 0;
  }

  .view-mode-tab svg {
    width: 13px;
    height: 13px;
    min-width: 13px;
    min-height: 13px;
    flex-shrink: 0;
  }

  .view-mode-tab span {
    white-space: nowrap;
  }

  /* ── Workspace Móvil: Vistas Condicionales (Chats vs Chat Activo vs Métricas) ── */
  .workspace {
    display: flex;
    flex-direction: column;
    flex: 1; min-height: 0;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    position: relative;
  }

  .sidebar {
    width: 100% !important;
    flex: 1;
    border-right: none;
    display: flex;
    height: 100%;
  }

  .chat-area {
    width: 100% !important;
    flex: 1;
    display: none;
    height: 100%;
  }

  .config-panel {
    display: none !important;
  }

  /* Vista: Chat Seleccionado Activo */
  .workspace.mobile-chat-active:not(.mobile-show-analytics) .sidebar {
    display: none !important;
  }

  .workspace.mobile-chat-active:not(.mobile-show-analytics) .chat-area {
    display: flex !important;
    flex-direction: column;
    height: 100%;
  }

  /* Vista: Métricas & KPIs (Panel Completo Scrollable) */
  .workspace.mobile-show-analytics .sidebar {
    display: none !important;
  }

  .workspace.mobile-show-analytics .chat-area {
    display: none !important;
  }

  .workspace.mobile-show-analytics .config-panel {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    flex: 1;
    height: 100%;
    overflow-y: auto;
    background: var(--clr-bg-1);
    padding: 12px;
    box-sizing: border-box;
  }

  .panel-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    width: 100%;
  }

  .panel-tabs::-webkit-scrollbar {
    display: none;
  }

  .panel-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 11.5px;
  }

  /* ── Header de Chat Activo Móvil: Ocultar App Header para vista Full-Screen WhatsApp ── */
  body.mobile-chat-active .app-header {
    display: none !important;
  }

  body.mobile-chat-active .workspace-chats {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.mobile-chat-active .chat-area {
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .chat-header {
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px 10px !important;
    gap: 8px;
    background: var(--clr-bg-2);
    border-bottom: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-shrink: 0;
    position: relative;
    z-index: 50;
  }

  .mobile-back-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    color: #f8fafc;
    margin-right: 4px;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    transition: all var(--t-fast);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-back-btn:active {
    background: rgba(34, 211, 238, 0.25);
    color: var(--cyan-oled);
    transform: scale(0.94);
  }

  .chat-header-left {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
  }

  .chat-avatar-wrapper {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 14px;
    flex-shrink: 0;
  }

  .chat-header-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .chat-name {
    font-size: 14px;
    font-weight: 700;
    color: #f8fafc;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
  }

  .chat-phone {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
  }

  .chat-header-right {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
  }

  .bot-toggle-group {
    padding: 2px 5px;
    gap: 3px;
    border-radius: var(--r-sm);
  }

  .bot-toggle-label {
    font-size: 9.5px;
  }

  #bot-toggle-state {
    display: none !important;
  }

  .btn-reset-chat {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    margin-left: 2px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  .btn-reset-text {
    display: none !important;
  }

  /* ── Barra de Pipeline y Tags de Lead Móvil ── */
  .chat-pipeline-bar {
    padding: 4px 10px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.7);
    border-bottom: 1px solid var(--clr-border);
    flex-shrink: 0;
  }

  .chat-pipeline-inner {
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
  }

  .chat-pipeline-deal-area,
  .chat-pipeline-agent-area {
    display: none !important;
  }

  .chat-stage-select {
    padding: 2px 6px;
    font-size: 10.5px;
    height: 24px;
    max-width: 120px;
  }

  /* Barra de métricas y tags de lead deslizable horizontalmente */
  .chat-metrics-bar {
    display: flex !important;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 3px 10px 5px;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: var(--clr-bg-2);
    flex-shrink: 0;
  }

  .chat-metrics-bar::-webkit-scrollbar {
    display: none;
  }

  .chat-metric-item {
    flex-shrink: 0;
    font-size: 10px;
    padding: 2px 6px;
  }

  /* ── Mensajes WhatsApp Móvil: Proporción Adaptable Inteligente ── */
  .messages-container {
    padding: 10px 8px;
    gap: 6px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .msg-wrapper {
    width: fit-content;
    max-width: 82%;
  }

  .msg-bubble {
    width: fit-content;
    max-width: 100%;
    padding: 7px 11px;
    font-size: 13px;
    line-height: 1.42;
  }

  .audio-bubble {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(34, 211, 238, 0.3) !important;
    border-radius: 12px !important;
    padding: 6px 8px !important;
    width: fit-content !important;
    max-width: 250px !important;
    box-sizing: border-box !important;
  }

  .msg-audio-player {
    width: 230px !important;
    max-width: 100% !important;
    height: 30px !important;
    border-radius: 15px !important;
    outline: none !important;
  }

  .audio-transcription-box {
    margin-top: 4px !important;
    padding-top: 4px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  .audio-transcription-tag {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: var(--cyan-oled) !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
    display: block !important;
  }

  .audio-transcription-text {
    color: #cbd5e1 !important;
  }

  /* ── Área de Input Móvil Estilo WhatsApp ── */
  .chat-input-area {
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--clr-bg-2);
    border-top: 1px solid var(--clr-border);
    flex-shrink: 0;
  }

  .input-wrapper {
    gap: 6px;
    align-items: center;
  }

  .msg-input {
    padding: 7px 12px;
    font-size: 13px;
    min-height: 36px;
    height: 36px;
    line-height: 1.3;
    border-radius: 18px;
  }

  .btn-send {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
  }

  .input-footer {
    margin-top: 2px;
    padding: 0 4px;
    font-size: 9.5px;
  }

  .input-hint {
    font-size: 9.5px;
  }

  .char-count {
    font-size: 9px;
  }

  /* ── Tablero Kanban Móvil (Pipeline de Ventas) ────────────
     Pipeline móvil: reparto de alto por flex. #main-app es un flex
     column de 100dvh, así que la vista toma solo el hueco libre
     (banner de demo incluido), la barra de herramientas se compacta
     a dos filas y el scroll vertical vive donde debe: en la lista de
     tarjetas de la columna activa. Antes esta regla apuntaba a
     `.kanban-board`, una clase que no existe en el DOM (el nodo real
     es `.kanban-board-container`), por lo que el móvil se quedaba con
     los valores de escritorio y recortaba las tarjetas de abajo. */
  .kanban-view {
    flex: 1; min-height: 0;
    height: auto;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }

  .kanban-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    flex-shrink: 0;
  }

  /* Fila 1: volver + título + buscador y filtro (nunca más de 2 líneas) */
  .kanban-toolbar-left {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }

  .kanban-toolbar-left .kanban-search-wrapper {
    flex: 1 1 55%;
    width: auto;
    min-width: 148px;
  }

  .kanban-toolbar-left .kanban-filter-group {
    flex: 1 1 28%;
    min-width: 0;
  }

  .kanban-select-filter {
    width: 100%;
    min-width: 0;
    text-overflow: ellipsis;
  }

  .kanban-title { font-size: 14px; }
  .kanban-icon { font-size: 16px; }

  /* Fila 2: métricas y acciones en una sola tira deslizable en X.
     Nada se oculta: todos los botones siguen alcanzables con el dedo. */
  .kanban-toolbar-right {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .kanban-toolbar-right::-webkit-scrollbar { height: 0; }

  .kanban-toolbar-right > * { flex: 0 0 auto; }

  /* Carril horizontal de columnas: ocupa el resto del alto y estira las
     columnas a ese alto, en vez de dejarlas crecer y quedar recortadas. */
  .kanban-board-container {
    padding: 10px;
    gap: 12px;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  .kanban-column {
    min-width: 270px;
    max-width: 280px;
    max-height: 100%;
    min-height: 0;
    scroll-snap-align: start;
  }

  /* La columna activa es la que hace scroll vertical: min-height:0 libera
     el mínimo de 180px que el flex imponía y desbloquea el desplazamiento. */
  .kanban-cards-container {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* Sección de Pagos Manuales y QR en Móvil (Micro-Fase 10.5.2) */
  .payment-qr-upload-section {
    padding: 12px !important;
  }

  .payment-qr-upload-btn {
    min-height: 44px !important;
    font-size: 13px !important;
  }

  #payment-qr-preview-card {
    flex-direction: column !important;
    text-align: center;
    align-items: center !important;
    gap: 8px !important;
  }

  #payment-qr-preview-img {
    max-height: 120px !important;
    max-width: 120px !important;
  }

  /* ── Modal de Ajustes & Entrenamiento Móvil (PWA) ── */
  .modal-content {
    width: 95% !important;
    max-width: 95vw !important;
    max-height: 90dvh !important;
    height: 90dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Los 4 menús de sección se envuelven en 2 filas. NO se usa overflow-x:
     un contenedor con overflow recorta los desplegables y en móvil el menú
     abierto quedaba invisible. */
  .modal-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding: 10px 12px !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--border-glass) !important;
  }

  .modal-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .modal-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  .modal-body {
    flex: 1 1 auto !important;
    max-height: calc(90dvh - 125px) !important;
    height: calc(90dvh - 125px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .modal-tab-panel {
    display: none !important;
    width: 100% !important;
  }

  .modal-tab-panel.active {
    display: block !important;
    animation: fadeIn 0.2s ease;
  }
}

/* ════════════════════════════════════════════════════════════
   MICRO-FASE 10.5.2: GESTOR DE CÓDIGO QR VISUAL Y PAGOS
   ════════════════════════════════════════════════════════════ */
.payment-qr-upload-section {
  background: var(--clr-bg-2);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-md);
  padding: 16px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.payment-qr-upload-section:hover {
  border-color: var(--border-glass-hover);
}

.payment-qr-upload-btn {
  background: linear-gradient(135deg, var(--cyan-dark), #7c3aed);
  border: none;
  border-radius: var(--r-sm);
  color: #ffffff;
  font-weight: 600;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
  box-shadow: 0 4px 14px rgba(8, 145, 178, 0.25);
}

.payment-qr-upload-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(8, 145, 178, 0.4);
}

.payment-qr-upload-btn:active {
  transform: translateY(0);
}

#payment-qr-preview-card {
  border: 1px solid var(--border-glass-bright);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 15px rgba(34, 211, 238, 0.08);
  animation: slide-up 0.25s var(--ease-spring) both;
}

#payment-qr-preview-img {
  border-radius: var(--r-sm);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ════════════════════════════════════════════════════════════
   FASE 10.6: ONBOARDING INICIAL & WIZARD DE CONOCIMIENTO UI
   ════════════════════════════════════════════════════════════ */

/* Botón píldora en la cabecera del modal de Entrenamiento */
.btn-wizard-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: var(--r-full, 20px);
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
  white-space: nowrap;
}

.btn-wizard-action-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45);
  filter: brightness(1.08);
}

.btn-wizard-action-pill:active {
  transform: translateY(0);
}

/* ── Banner de Recordatorio de Onboarding ── */
.onboarding-reminder-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.12) 100%);
  border-bottom: 1px solid rgba(99, 102, 241, 0.35);
  gap: 12px;
  flex-shrink: 0;
  animation: bannerSlideDown 0.3s ease-out;
}

.onboarding-reminder-banner.hidden {
  display: none !important;
}

@keyframes bannerSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.onboarding-banner-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.onboarding-banner-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.onboarding-banner-text {
  font-size: 0.82rem;
  color: var(--clr-text-1);
  line-height: 1.4;
}

.onboarding-banner-text strong {
  color: #c7d2fe;
}

.onboarding-banner-text span {
  color: var(--clr-text-2);
  margin-left: 4px;
}

.onboarding-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-banner-wizard {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: var(--r-full, 20px);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-banner-wizard:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.5);
}

.btn-banner-close {
  background: transparent;
  border: none;
  color: var(--clr-text-3);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}

.btn-banner-close:hover {
  color: var(--clr-text-1);
  background: rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════
   MICRO-FASE 11.4.1: BANNER PERSISTENTE DE MODO ESPECTADOR
   ═══════════════════════════════════════════════════════════ */
.spectator-mode-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 18px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.18) 0%, rgba(168, 85, 247, 0.18) 100%);
  border-bottom: 1px solid rgba(234, 179, 8, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  gap: 12px;
  flex-shrink: 0;
  animation: bannerSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 90;
}

.spectator-mode-banner.hidden {
  display: none !important;
}

.spectator-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
}

.spectator-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(234, 179, 8, 0.22);
  border: 1px solid rgba(234, 179, 8, 0.5);
  border-radius: var(--r-full, 20px);
  color: #fef08a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.spectator-eye-icon {
  font-size: 0.95rem;
  line-height: 1;
  animation: spectatorEyeGlow 2s infinite ease-in-out;
}

@keyframes spectatorEyeGlow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

.spectator-tenant-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--clr-text-1, #f1f5f9);
}

.spectator-explaining {
  color: var(--clr-text-2, #94a3b8);
  font-size: 0.8rem;
}

.spectator-tenant-name {
  color: #38bdf8;
  font-weight: 700;
}

.spectator-tenant-slug {
  color: var(--clr-text-3, #64748b);
  font-size: 0.75rem;
  font-family: var(--font-mono, monospace);
}

.spectator-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-exit-spectator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.25), rgba(217, 119, 6, 0.35));
  border: 1px solid rgba(234, 179, 8, 0.6);
  border-radius: var(--r-full, 20px);
  color: #fef08a;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(234, 179, 8, 0.2);
  transition: all 0.2s ease;
}

.btn-exit-spectator:hover {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.4), rgba(217, 119, 6, 0.5));
  border-color: #facc15;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.35);
}

.btn-exit-spectator:active {
  transform: translateY(0);
}

/* Tarjetas de la Hoja de Ruta (Roadmap) */
.roadmap-item-card {
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.roadmap-item-card:hover {
  border-color: rgba(99, 102, 241, 0.4) !important;
  transform: translateY(-1px);
}

/* Refinamiento visual para contenedores de modales y botones secundarios */
#modal-onboarding-welcome .modal-content,
#modal-wizard-success-roadmap .modal-content,
#modal-knowledge-wizard .modal-content {
  border-radius: 16px !important;
  overflow: hidden !important;
}

#btn-skip-onboarding-welcome {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: var(--clr-text-2) !important;
  border-radius: var(--r-md, 8px) !important;
  font-weight: 500 !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

#btn-skip-onboarding-welcome:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--clr-text-1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MÓDULO DE FACTURACIÓN SAAS & SUSCRIPCIONES (Sub-Fase 11.1)
   ═══════════════════════════════════════════════════════════════ */
.billing-panel-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0 20px 0;
}

/* 1. Alerta de Estado / Gracia */
.billing-alert-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(245, 158, 11, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--r-lg, 12px);
}

.billing-alert-icon {
  font-size: 24px;
}

.billing-alert-content {
  flex: 1;
}

.billing-alert-title {
  margin: 0 0 2px 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fca5a5;
}

.billing-alert-desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--clr-text-2);
}

.btn-billing-alert-cta {
  padding: 6px 14px;
  background: var(--clr-red, #ef4444);
  color: #fff;
  border: none;
  border-radius: var(--r-md, 8px);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.btn-billing-alert-cta:hover {
  opacity: 0.9;
}

/* 2. Tarjeta Hero de Estado Actual */
.billing-hero-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.6), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: var(--r-lg, 12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.billing-hero-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.billing-plan-badge-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.billing-plan-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.3);
}

.billing-hero-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.billing-hero-subtitle {
  margin: 2px 0 0 0;
  font-size: 0.78rem;
  color: var(--clr-text-3);
}

.billing-status-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.billing-status-badge.active {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.billing-status-badge.past_due {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.billing-status-badge.canceled {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.billing-status-badge.trialing {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.billing-meta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.billing-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
}

.billing-meta-label {
  color: var(--clr-text-3);
}

.billing-meta-value {
  color: var(--clr-text-1);
  font-weight: 600;
}

.billing-hero-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-billing-portal {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  border: none;
  border-radius: var(--r-md, 8px);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-billing-portal:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);
}

.btn-billing-refresh {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-2);
  border-radius: var(--r-md, 8px);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-billing-refresh:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--clr-text-1);
}

/* 3. Títulos de Sección */
.billing-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.billing-section-title span {
  font-size: 1rem;
}

.billing-section-title h4 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--clr-text-1);
}

.billing-section-tag {
  font-size: 0.7rem;
  color: var(--clr-text-3);
  margin-left: auto;
}

/* 4. Medidores de Consumo (Usage Meters) */
.billing-meters-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 640px) {
  .billing-meters-grid {
    grid-template-columns: 1fr;
  }
}

.billing-meter-card {
  padding: 14px 16px;
  background: var(--clr-bg-2, #1e1e2d);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md, 8px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.billing-meter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.billing-meter-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.billing-meter-icon {
  font-size: 14px;
}

.billing-meter-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-text-1);
}

.billing-meter-count {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-text-1);
  font-family: monospace;
}

.billing-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.billing-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease-out;
}

.billing-progress-fill.green {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.billing-progress-fill.amber {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.billing-progress-fill.red {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.billing-progress-fill.cyan {
  background: linear-gradient(90deg, #06b6d4, #22d3ee);
}

.billing-progress-fill.purple {
  background: linear-gradient(90deg, #8b5cf6, #a855f7);
}

.billing-meter-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--clr-text-3);
}

.billing-meter-pct {
  font-weight: 600;
  color: var(--clr-text-2);
}

/* 5. Toggle Ciclo Facturación */
.billing-cycle-toggle-wrapper {
  display: flex;
  align-self: center;
  background: var(--clr-bg-2, #1e1e2d);
  padding: 4px;
  border-radius: 30px;
  border: 1px solid var(--clr-border);
  gap: 4px;
  margin: 6px auto 14px auto;
}

.billing-toggle-btn {
  padding: 7px 18px;
  border: none;
  background: transparent;
  color: var(--clr-text-3);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

.billing-toggle-btn.active {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.billing-badge-discount {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 6px;
  background: #10b981;
  color: #fff;
  border-radius: 10px;
}

/* 6. Grid de Tarjetas de Precios */
.billing-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 768px) {
  .billing-pricing-grid {
    grid-template-columns: 1fr;
  }
}

.billing-plan-card {
  background: var(--clr-bg-2, #1e1e2d);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg, 12px);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.billing-plan-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.billing-plan-card.featured {
  border-color: #6366f1;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, var(--clr-bg-2) 100%);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
}

.billing-plan-featured-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 10px;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.billing-plan-header {
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.billing-plan-tier-name {
  margin: 0 0 4px 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

.billing-plan-tagline {
  margin: 0 0 12px 0;
  font-size: 0.72rem;
  color: var(--clr-text-3);
  min-height: 28px;
}

.billing-plan-price-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.billing-plan-currency {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-text-2);
}

.billing-plan-amount {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}

.billing-plan-interval {
  font-size: 0.75rem;
  color: var(--clr-text-3);
  margin-left: 2px;
}

.billing-plan-annual-sub {
  font-size: 0.68rem;
  color: #34d399;
  font-weight: 600;
  margin-top: 2px;
  display: block;
}

.billing-plan-features {
  list-style: none;
  padding: 14px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.billing-plan-features li {
  font-size: 0.76rem;
  color: var(--clr-text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.billing-plan-features li span {
  color: #10b981;
  font-weight: bold;
  font-size: 0.75rem;
}

.billing-plan-features li.disabled {
  color: var(--clr-text-3);
  opacity: 0.6;
}

.billing-plan-features li.disabled span {
  color: var(--clr-text-3);
}

.btn-billing-plan-action {
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--clr-border);
  color: #fff;
  border-radius: var(--r-md, 8px);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 10px;
}

.btn-billing-plan-action:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-billing-plan-action.featured-btn {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: none;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-billing-plan-action.featured-btn:hover {
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);
}

.btn-billing-plan-action.current-plan-btn {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  cursor: default;
}

/* 7. Tabla de Facturas */
.billing-invoices-card {
  background: var(--clr-bg-2, #1e1e2d);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
}

.billing-invoices-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.billing-invoices-table th {
  background: var(--clr-bg-3, #151521);
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--clr-text-2);
  border-bottom: 1px solid var(--clr-border);
}

.billing-invoices-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--clr-text-1);
}

.billing-invoices-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.billing-invoices-empty {
  padding: 24px;
  text-align: center;
  color: var(--clr-text-3);
  font-size: 0.8rem;
}

.billing-invoice-link {
  color: var(--clr-cyan, #06b6d4);
  text-decoration: underline;
  cursor: pointer;
}

/* 8. Footer Informativo */
.billing-security-footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-md, 8px);
  margin-top: 8px;
}

.billing-security-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--clr-text-3);
}

/* 9. Enlaces legales (punto 5). Táctiles antes que decorativos: 44px de alto
   mínimo porque se pulsan con el pulgar dentro de un modal que ya scrollea, y
   ahí un enlace de texto de 20px se falla más veces de las que se acierta. */
.billing-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.billing-legal-links a {
  flex: 1 1 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-md, 8px);
  background: rgba(255, 255, 255, 0.02);
  color: var(--clr-text-2);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.billing-legal-links a:hover,
.billing-legal-links a:focus-visible {
  color: var(--clr-text-1);
  border-color: rgba(6, 182, 212, 0.35);
  background: rgba(6, 182, 212, 0.07);
}

.billing-legal-note {
  margin: 8px 0 0;
  /* styles.css fija el root en 14px: 0.68rem eran 9,52px reales. */
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--clr-text-3);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   SUB-FASE 11.2: CENTRO VISUAL DE PLANTILLAS HSM META
   ═══════════════════════════════════════════════════════════ */

.hsm-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 6px 0;
}

/* 1. Barra Superior */
.hsm-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.6) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 14px;
  padding: 16px 20px;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.hsm-top-bar-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hsm-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
  flex-shrink: 0;
}

.hsm-title {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.2px;
}

.hsm-subtitle {
  margin: 3px 0 0 0;
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.4;
}

.hsm-top-bar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-hsm-sync {
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #22d3ee;
  border-radius: 10px;
  padding: 9px 15px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hsm-sync:hover {
  background: rgba(6, 182, 212, 0.22);
  border-color: #22d3ee;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
  transform: translateY(-1px);
}

.btn-hsm-new {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
  border: none;
  color: #ffffff;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.35);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hsm-new:hover {
  box-shadow: 0 6px 22px rgba(6, 182, 212, 0.5);
  transform: translateY(-1px);
}

/* 2. Banner / Guía Visual Zero-Reject */
.hsm-guidelines-banner {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.hsm-guidelines-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  user-select: none;
  gap: 12px;
}

.hsm-guidelines-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hsm-guide-icon {
  font-size: 20px;
}

.hsm-guide-headline {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fbbf24;
  display: block;
}

.hsm-guide-subline {
  font-size: 0.74rem;
  color: #cbd5e1;
  display: block;
}

.hsm-guide-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fbbf24;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.hsm-guide-toggle-btn.collapsed {
  transform: rotate(-90deg);
}

.hsm-guidelines-body {
  padding: 14px 18px 16px;
  transition: all 0.3s ease;
}

.hsm-guidelines-body.collapsed {
  display: none;
}

.hsm-guide-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.hsm-guide-card {
  background: rgba(13, 17, 23, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  backdrop-filter: blur(8px);
}

.hsm-guide-card-icon {
  font-size: 18px;
  line-height: 1;
  padding: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  flex-shrink: 0;
}

.hsm-guide-card-text {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.45;
}

.hsm-guide-card-text strong {
  display: block;
  color: #f1f5f9;
  font-size: 0.78rem;
  margin-bottom: 2px;
}

.hsm-guide-card-text code {
  background: rgba(99, 102, 241, 0.2);
  color: #c7d2fe;
  padding: 1px 4px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.74rem;
}

/* 3. Grid de Trabajo: Diseñador + Simulador */
.hsm-workspace-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 980px) {
  .hsm-workspace-grid {
    grid-template-columns: 1fr;
  }
}

.hsm-form-card,
.hsm-simulator-card,
.hsm-catalog-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
}

.hsm-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
}

.hsm-card-header h4 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: #f1f5f9;
}

.hsm-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.hsm-badge-category {
  background: rgba(99, 102, 241, 0.18);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.35);
}

.hsm-form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.flex-1 { flex: 1; min-width: 130px; }
.flex-2 { flex: 2; min-width: 200px; }

/* Custom Form Controls con bordes redondeados y glassmorphism */
.hsm-custom-input,
.hsm-custom-select,
.hsm-custom-textarea {
  width: 100%;
  background: rgba(13, 17, 23, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9px !important;
  padding: 9px 12px !important;
  color: #f1f5f9 !important;
  font-size: 0.84rem !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box;
}

.hsm-custom-input:focus,
.hsm-custom-select:focus,
.hsm-custom-textarea:focus {
  outline: none !important;
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25) !important;
  background: rgba(15, 23, 42, 0.95) !important;
}

.hsm-custom-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px !important;
}

.hsm-input-hint {
  display: block;
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 4px;
}

.hsm-section-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  padding: 14px;
  margin-bottom: 14px;
}

.hsm-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.hsm-section-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: #f1f5f9;
}

.hsm-mini-select {
  padding: 6px 10px !important;
  font-size: 0.78rem !important;
  border-radius: 8px !important;
  max-width: 240px;
}

.hsm-input-with-counter {
  position: relative;
}

.hsm-char-counter {
  font-size: 0.7rem;
  color: #94a3b8;
  font-family: monospace;
}

.hsm-textarea-wrapper {
  position: relative;
}

.hsm-textarea-wrapper textarea {
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
}

.hsm-textarea-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

.btn-hsm-var {
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
  border: 1px solid rgba(99, 102, 241, 0.4);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.btn-hsm-var:hover {
  background: rgba(99, 102, 241, 0.35);
  border-color: #818cf8;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
  transform: translateY(-1px);
}

.btn-hsm-add-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.btn-hsm-add-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: translateY(-1px);
}

/* Muestras de Variables */
.hsm-samples-wrapper {
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 12px;
}

.hsm-samples-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.76rem;
  color: #a5b4fc;
  font-weight: 600;
}

.hsm-samples-title small {
  color: #94a3b8;
  font-weight: normal;
}

.hsm-samples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.hsm-sample-input-item label {
  font-size: 0.72rem;
  color: #cbd5e1;
  margin-bottom: 3px;
  display: block;
}

.hsm-sample-input-item input {
  font-size: 0.8rem;
  padding: 6px 10px;
  border-radius: 7px;
}

/* Lista de Botones */
.hsm-buttons-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.hsm-btn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  flex-wrap: wrap;
}

.hsm-btn-del {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 7px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.74rem;
  transition: all 0.2s ease;
}

.hsm-btn-del:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
}

.hsm-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-hsm-reset {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #94a3b8;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-hsm-reset:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}

.btn-hsm-primary {
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #6366f1 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  box-shadow: 0 4px 18px rgba(6, 182, 212, 0.4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hsm-primary:hover {
  box-shadow: 0 6px 24px rgba(6, 182, 212, 0.6);
  transform: translateY(-1px);
}

/* 4. Simulador Smartphone Cyber-SaaS */
.hsm-phone-frame {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  background: #0b141a;
  border: 4px solid #2a3942;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(6, 182, 212, 0.12);
}

.hsm-phone-notch {
  height: 26px;
  background: #020617;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.hsm-phone-speaker {
  width: 48px;
  height: 4px;
  background: #334155;
  border-radius: 3px;
}

.hsm-phone-camera {
  width: 7px;
  height: 7px;
  background: #1e293b;
  border-radius: 50%;
}

.hsm-wa-header {
  background: #202c33;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #111b21;
}

.hsm-wa-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #00a884;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.hsm-wa-contact-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #e9edef;
}

.hsm-wa-verified-badge {
  width: 14px;
  height: 14px;
  background: #00a884;
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hsm-wa-contact-status {
  font-size: 0.68rem;
  color: #8696a0;
}

.hsm-wa-chat-body {
  padding: 18px 14px;
  min-height: 300px;
  background: #0b141a;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 16px 16px;
}

.hsm-wa-bubble {
  background: #202c33;
  color: #e9edef;
  border-radius: 0 14px 14px 14px;
  padding: 11px 14px;
  font-size: 0.85rem;
  line-height: 1.48;
  position: relative;
  max-width: 96%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hsm-wa-header-render {
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
}

.hsm-wa-media-preview {
  width: 100%;
  height: 140px;
  border-radius: 8px;
  background: #111b21;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #8696a0;
  font-size: 0.76rem;
  border: 1px dashed #2a3942;
  margin-bottom: 8px;
}

.hsm-wa-body-render {
  word-break: break-word;
  white-space: pre-wrap;
}

.hsm-var-chip {
  background: rgba(99, 102, 241, 0.28);
  border: 1px solid #818cf8;
  color: #e0e7ff;
  border-radius: 5px;
  padding: 1px 6px;
  font-family: monospace;
  font-size: 0.8rem;
  font-weight: 700;
}

.hsm-wa-footer-render {
  font-size: 0.72rem;
  color: #8696a0;
  margin-top: 8px;
}

.hsm-wa-time-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: #8696a0;
  margin-top: 6px;
}

.hsm-wa-check {
  color: #53bdeb;
}

.hsm-wa-buttons-stack {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hsm-wa-btn-preview {
  background: transparent;
  border: none;
  color: #00a884;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 9px 6px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hsm-wa-btn-preview:last-child {
  border-bottom: none;
}

.hsm-simulator-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 14px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 10px;
  margin-top: 14px;
  font-size: 0.76rem;
  color: #cbd5e1;
  line-height: 1.45;
}

.hsm-sim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.hsm-sim-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
}

.hsm-simulator-status {
  flex-shrink: 0;
}

.hsm-sim-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.hsm-sim-badge-pending {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

/* 5. Catálogo de Plantillas y Estados */
.hsm-catalog-card {
  margin-top: 4px;
}

.hsm-catalog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.hsm-catalog-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hsm-catalog-title-group h4 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: #f1f5f9;
}

.hsm-catalog-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.hsm-filter-search {
  padding: 7px 12px;
  font-size: 0.8rem;
  border-radius: 8px;
  background: rgba(13, 17, 23, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  min-width: 180px;
}

.hsm-filter-search:focus {
  outline: none;
  border-color: #06b6d4;
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.25);
}

.hsm-filter-select {
  padding: 7px 12px;
  font-size: 0.8rem;
  border-radius: 8px;
  background: rgba(13, 17, 23, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  cursor: pointer;
}

.hsm-filter-select:focus {
  outline: none;
  border-color: #06b6d4;
}

.hsm-table-container {
  overflow-x: auto;
}

.hsm-templates-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.hsm-templates-table th {
  text-align: left;
  padding: 10px 14px;
  background: rgba(13, 17, 23, 0.6);
  color: #94a3b8;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hsm-templates-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #f1f5f9;
  vertical-align: middle;
}

.hsm-templates-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.hsm-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.status-approved {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.status-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.status-rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.status-paused {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.35);
}

.hsm-actions-cell {
  display: flex;
  gap: 6px;
}

.hsm-action-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 600;
  transition: all 0.15s ease;
}

.hsm-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: translateY(-1px);
}

.hsm-action-btn.btn-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  border-color: #f87171;
}

.hsm-catalog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.85rem;
}

/* ════════════════════════════════════════════════════════════
   SUB-FASE 11.3: TELEMETRÍA FINANCIERA & MARGEN OPERATIVO SAAS
   ════════════════════════════════════════════════════════════ */

.superadmin-financial-section {
  background: var(--clr-bg-2, #161b22);
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-radius: var(--r-md, 8px);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.financial-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 360px) {
  .financial-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.financial-kpi-card {
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--clr-bg-3, #0d1117);
  border: 1px solid var(--clr-border, #30363d);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.financial-kpi-card.fin-revenue {
  border-left: 3px solid #3b82f6;
}

.financial-kpi-card.fin-ai-cost {
  border-left: 3px solid #06b6d4;
}

.financial-kpi-card.fin-meta-cost {
  border-left: 3px solid #a855f7;
}

.financial-kpi-card.fin-margin {
  border-left: 3px solid #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(6, 182, 212, 0.04));
}

.financial-kpi-label {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--clr-text-3, #8b949e);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.financial-kpi-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-text-1, #f0f6fc);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.financial-kpi-card.fin-margin .financial-kpi-val {
  color: #34d399;
}

.financial-kpi-sub {
  font-size: 0.68rem;
  color: var(--clr-text-3, #8b949e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badges de Unit Economics */
.unit-economics-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.unit-economics-badge.healthy {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.unit-economics-badge.moderate {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.unit-economics-badge.at_risk {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.35);
}

.unit-economics-badge.deficit {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

/* Tarjeta de Telemetría Financiera en Pestaña Facturación (Tenant) */
.tenant-financial-telemetry-card {
  background: var(--clr-bg-2, #1e1e2d);
  border: 1px solid var(--clr-border, #30363d);
  border-radius: var(--r-md, 8px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tenant-fin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .tenant-fin-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .tenant-fin-grid {
    grid-template-columns: 1fr;
  }
}

.tenant-fin-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.tenant-fin-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--clr-text-3, #8b949e);
}

.tenant-fin-val {
  font-size: 1.02rem;
  font-weight: 700;
  font-family: monospace;
}

.tenant-fin-val.highlight-blue {
  color: #60a5fa;
}

.tenant-fin-val.highlight-cyan {
  color: #22d3ee;
}

.tenant-fin-val.highlight-purple {
  color: #c084fc;
}

.tenant-fin-val.highlight-green {
  color: #34d399;
}

.tenant-fin-sub {
  font-size: 0.68rem;
  color: var(--clr-text-3, #8b949e);
}

.tenant-fin-efficiency-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.tenant-fin-eff-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
}

.tenant-fin-eff-item .eff-icon {
  font-size: 13px;
}

.tenant-fin-eff-item .eff-label {
  color: var(--clr-text-2, #c9d1d9);
}

.tenant-fin-eff-item .eff-value {
  font-weight: 700;
  color: var(--clr-text-1, #f0f6fc);
  font-family: monospace;
}

/* ═════════════════════════════════════════════════════════════
   SUB-FASE 11.4.4: FEATURE GATING, CANDADOS VISUALES & UPGRADE MODAL (LIQUID GLASS)
   ═════════════════════════════════════════════════════════════ */

/* Modal Backdrop & Liquid Glass Card */
.upgrade-prompt-glass {
  background: radial-gradient(circle at 50% -15%, rgba(34, 211, 238, 0.18), rgba(15, 23, 42, 0.94) 75%) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75), 0 0 45px rgba(34, 211, 238, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  max-width: 530px !important;
  width: 92% !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 24px !important;
  animation: upgrade-glass-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes upgrade-glass-pop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Resplandor ambiental de fondo */
.upgrade-glass-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 140px;
  background: radial-gradient(ellipse, rgba(34, 211, 238, 0.4) 0%, rgba(124, 58, 237, 0.2) 50%, transparent 80%);
  filter: blur(40px);
  pointer-events: none;
}

/* Header del Modal */
.upgrade-prompt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}

/* Pill / Badge del Plan Requerido */
.upgrade-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}

.upgrade-badge-pill.pro {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.25);
}

.upgrade-badge-pill.enterprise {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.4);
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.25);
}

.upgrade-lock-icon {
  font-size: 0.8rem;
}

/* Icono central de la feature */
.upgrade-feature-icon-box {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(124, 58, 237, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 6px auto 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  position: relative;
  z-index: 2;
}

/* Títulos y Descripciones */
.upgrade-prompt-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #f8fafc;
  text-align: center;
  margin: 0 0 4px;
  line-height: 1.25;
  position: relative;
  z-index: 2;
}

.upgrade-prompt-tagline {
  font-size: 0.82rem;
  color: #94a3b8;
  text-align: center;
  margin: 0 0 12px;
  position: relative;
  z-index: 2;
}

.upgrade-prompt-description {
  font-size: 0.86rem;
  color: #cbd5e1;
  line-height: 1.5;
  text-align: center;
  margin: 0 0 16px;
  padding: 0 6px;
  position: relative;
  z-index: 2;
}

/* Tarjeta de Beneficios Incluidos */
.upgrade-benefits-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}

.upgrade-benefits-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.upgrade-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.82rem;
  color: #e2e8f0;
}

.upgrade-benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.35;
}

.upgrade-benefits-list li span {
  color: #34d399;
  font-weight: bold;
  flex-shrink: 0;
}

/* Acciones y Botones */
.upgrade-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.btn-upgrade-cta {
  width: 100%;
  padding: 13px 20px;
  border-radius: 10px;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: 0.96rem;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(135deg, #059669, #0891b2);
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-upgrade-cta.enterprise {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-upgrade-cta:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(5, 150, 105, 0.55);
}

.btn-upgrade-cta.enterprise:hover {
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.55);
}

.btn-upgrade-cta:active {
  transform: scale(0.98);
}

.btn-upgrade-secondary {
  width: 100%;
  padding: 9px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-upgrade-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.25);
}

.upgrade-prompt-footer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 14px;
  position: relative;
  z-index: 2;
}

/* ── Badges de Candado en la UI (🔒 PRO / 🔒 ENTERPRISE) ── */
.gate-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
  margin-left: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
  transition: transform 0.2s ease;
  line-height: 1.2;
}

.gate-lock-badge.pro {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.45);
}

.gate-lock-badge.enterprise {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.48);
}

.gate-lock-badge.tab-pill {
  margin-left: auto;
  font-size: 0.58rem;
  padding: 1px 5px;
}

/* ── Indicador de Elemento Bloqueado (Gated Lock Cue) ── */
.gated-locked {
  position: relative !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.gated-locked:hover {
  filter: brightness(1.1);
}

.gated-locked .gate-lock-badge {
  animation: gate-lock-pulse 2.5s infinite;
}

@keyframes gate-lock-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
  }
}

/* Ajuste fino en pestañas y botones de acción rápida con candado */
.modal-tab.gated-locked {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

.view-mode-tab .gate-lock-badge {
  font-size: 0.58rem;
  padding: 1px 5px;
  margin-left: 4px;
  border-radius: 6px;
}

.panel-tab .gate-lock-badge {
  font-size: 0.54rem;
  padding: 1px 4px;
  margin-left: 3px;
  border-radius: 6px;
}

.quick-action-btn.gated-locked {
  border-color: rgba(16, 185, 129, 0.22) !important;
}

.quick-action-btn .gate-lock-badge {
  font-size: 0.58rem;
  padding: 1px 5px;
  margin-left: auto;
  border-radius: 6px;
}

.quick-action-btn.gated-locked:hover {
  border-color: rgba(16, 185, 129, 0.45) !important;
  background: rgba(16, 185, 129, 0.05) !important;
}

/* Responsividad para móviles */
@media (max-width: 600px) {
  .upgrade-prompt-glass {
    padding: 18px !important;
    width: 95% !important;
  }
  .upgrade-prompt-heading {
    font-size: 1.15rem;
  }
  .upgrade-prompt-description {
    font-size: 0.8rem;
  }
  .btn-upgrade-cta {
    font-size: 0.88rem;
    padding: 11px 16px;
  }
}

/* ═══════════════════════════════════════════════════════════
   ADAPTABILIDAD DE LOS BLOQUES REDISEÑADOS
   ═══════════════════════════════════════════════════════════ */

/* Tablet horizontal y ventanas estrechas de escritorio: 2 columnas.
   El panel derecho deja de competir por ancho y se abre desde la vista
   "Métricas" de la cabecera, reutilizando el mecanismo ya existente. */
@media (min-width: 901px) and (max-width: 1024px) {
  .workspace {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }

  .config-panel { display: none; }

  .workspace.mobile-show-analytics {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace.mobile-show-analytics .sidebar,
  .workspace.mobile-show-analytics .chat-area {
    display: none !important;
  }

  .workspace.mobile-show-analytics .config-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: auto;
  }
}

/* Pantallas medianas: la cabecera vuelve a flex (bloque de 900px) y la zona
   izquierda necesita poder envolver sus selectores. */
@media (max-width: 900px) {
  .header-left {
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
  }

  /* Los 4 menús del modal ocupan 2 filas en lugar de scrollear: un contenedor
     con overflow recortaría los desplegables. */
  .modal-tabs {
    flex-wrap: wrap;
    padding: 10px 14px;
  }

  .modal-menu-hint { display: none !important; }
  .header-user-panel { min-width: 196px; }
}

/* Móvil: más área táctil y desplegables acotados al ancho disponible */
@media (max-width: 640px) {
  .modal-menu-trigger {
    padding: 7px 9px;
    font-size: 12px;
  }

  .modal-menu-panel {
    min-width: 0;
    width: max-content;
    max-width: 82vw;
  }

  .qa-group-header { padding: 11px 10px; }
  .quick-action-btn { padding: 11px 10px; }
  .header-user-trigger .user-name { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   INTERACCIÓN TÁCTIL, HITBOX Y MICRO-INTERACCIONES
   ═══════════════════════════════════════════════════════════ */

/* 1. Nada oculto puede interceptar toques. En móvil instalado un backdrop
   transparente encima de los botones los deja "muertos" sin dar señal. */
[hidden],
.hidden,
.modal-overlay.hidden,
.qa-group:not(.open) > .qa-group-body,
.modal-menu:not(.open) > .modal-menu-panel,
.header-user-menu:not(.open) > .header-user-panel {
  pointer-events: none !important;
}

/* Los iconos y adornos decorativos no roban el toque de su botón contenedor */
[aria-hidden="true"] {
  pointer-events: none;
}

/* Los desplegables abiertos sí deben recibir toques */
.qa-group.open > .qa-group-body,
.modal-menu.open > .modal-menu-panel,
.header-user-menu.open > .header-user-panel {
  pointer-events: auto !important;
}

/* 2. Sin retardo de doble toque (300 ms) ni destello azul en móvil */
button,
a,
select,
input,
textarea,
label,
[role="button"],
[role="tab"],
[role="menuitem"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 3. Respuesta visual inmediata al pulsar (150 ms) */
button,
[role="button"],
[role="tab"],
[role="menuitem"],
.quick-action-btn,
.qa-group-header,
.modal-menu-trigger,
.panel-tab,
.view-mode-tab,
.btn-header-landing {
  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
  transition-duration: 150ms;
  transition-timing-function: var(--ease);
}

button:not(.toggle-switch):active,
[role="button"]:active,
.quick-action-btn:active,
.qa-group-header:active,
.modal-menu-trigger:active,
.panel-tab:active,
.view-mode-tab:active,
.btn-header-landing:active,
.header-user-item:active {
  transform: scale(0.95);
}
/* 4. Área táctil mínima ergonómica en móvil (44 x 44 px) */
@media (max-width: 768px) {
  button:not(.toggle-switch):not(.btn-mini-save):not(.btn-remove-image),
  a.btn-ghost,
  .btn-icon,
  .btn-header-landing,
  .quick-action-btn,
  .qa-group-header,
  .modal-menu-trigger,
  .modal-tab,
  .panel-tab,
  .view-mode-tab,
  .header-user-item,
  .header-user-trigger {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .btn-icon,
  .btn-header-landing,
  .panel-tab,
  .qa-group-count {
    min-width: 44px;
  }

  .qa-group-count {
    min-width: 22px;
  }

  /* Guardar Cambios siempre visible y a ancho completo */
  .modal-footer {
    padding: 12px;
    flex-wrap: wrap;
  }

  .modal-footer button,
  .modal-footer .btn-primary {
    width: 100%;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  /* El título del modal ya no se parte en tres líneas */
  .modal-header {
    padding: 14px 16px;
    flex-wrap: wrap;
  }

  .modal-header h2,
  .modal-header h3 {
    font-size: 1rem;
    line-height: 1.25;
  }

  .modal-body {
    padding: 16px;
  }
}

/* 5. Quien pida menos movimiento no recibe escalados ni animaciones nuevas */
@media (prefers-reduced-motion: reduce) {
  .modal-content { animation: none !important; }

  button:active,
  [role="button"]:active,
  .quick-action-btn:active,
  .qa-group-header:active,
  .modal-menu-trigger:active,
  .panel-tab:active,
  .view-mode-tab:active,
  .btn-header-landing:active,
  .header-user-item:active {
    transform: none !important;
  }

  .qa-group-body,
  .modal-menu.open > .modal-menu-panel,
  .header-user-menu.open > .header-user-panel {
    transition: none !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   APP INSTALADA — VENTANA PROPIA (ACCESO DIRECTO DE ESCRITORIO)
   ═══════════════════════════════════════════════════════════
   El manifest pide window-controls-overlay: sin estas reglas los botones de
   ventana de Windows se dibujaban encima de la cabecera de la app.
   Se limita a punteros finos (ratón): en un móvil instalado, `app-region: drag`
   convierte la cabecera en zona de arrastre y se come los toques. */

@media (display-mode: window-controls-overlay) and (pointer: fine) {
  .app-header {
    position: fixed;
    top: env(titlebar-area-y, 0px);
    left: env(titlebar-area-x, 0px);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 44px);
    min-height: env(titlebar-area-height, 44px);
    padding-top: 0;
    padding-bottom: 0;
    -webkit-app-region: drag;
    app-region: drag;
  }

  /* Todo lo interactivo debe quedar fuera de la zona de arrastre */
  .app-header button,
  .app-header a,
  .app-header select,
  .app-header input,
  .app-header .tenant-switcher-container {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }

  /* La cabecera pasa a flotar: se compensa el alto para no tapar contenido */
  #main-app {
    padding-top: env(titlebar-area-height, 44px);
  }

  .header-badge { display: none; }
}

@media (display-mode: standalone), (display-mode: window-controls-overlay), (display-mode: minimal-ui) {
  /* Ya está instalada: sobran la invitación a instalar y el enlace comercial */
  #btn-pwa-install-header,
  #link-landing-oficial {
    display: none !important;
  }

  .app-header { min-height: 48px; }
  .header-title { font-size: 15px; }
  .user-avatar { width: 26px; height: 26px; }
}


/* ═══════════════════════════════════════════════════════════
   CORRECCIONES DE EVIDENCIAS MÓVILES (capturas Problema 1-5)
   ═══════════════════════════════════════════════════════════ */

/* 1. El avatar caía en una fila propia y dejaba una banda vacía sobre las
   pestañas. `.header-left` tenía flex-basis:auto, así que su tamaño
   hipotético (marca + selectores) no dejaba sitio al nav en la misma línea
   y el wrap lo empujaba abajo. Con flex-basis 0 el nav entra en la primera
   fila y los selectores envuelven dentro de .header-left. */
@media (max-width: 900px) {
  .app-header > .header-left {
    flex: 1 1 0;
  }

  .app-header > .header-actions {
    align-self: flex-start;
  }
}

/* 3. Instrucciones de Comportamiento: el textarea se quedaba en 80px y el
   prompt del agente se veía cortado con medio modal vacío debajo. Ahora la
   pestaña es una columna flex y el campo ocupa el alto disponible. */
#tab-behavior.modal-tab-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#tab-behavior > .form-group {
  flex: 1 1 auto;
  min-height: 0;
}

#input-behavior {
  flex: 1 1 auto;
  min-height: 200px;
}

/* 4. iOS amplía la página al enfocar un campo de menos de 16px y descuadra
   el modal completo (evidencia del emulador). 16px reales lo evitan; va con
   !important porque varios campos traen font-size en línea. No se toca el
   cromo de la cabecera ni las barras de herramientas. */
@media (max-width: 768px) {
  .modal-content input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
  .modal-content select,
  .modal-content textarea,
  #emulator-input,
  #msg-input,
  #search-chats {
    font-size: 16px !important;
  }
}

/* 5. Vista previa del banner: sin envolver, la URL se partía letra a letra
   en una columna de pocos píxeles. */
@media (max-width: 640px) {
  #welcome-image-preview-card {
    flex-wrap: wrap;
  }

  #welcome-image-preview-card > div {
    flex-basis: 100%;
  }
}


/* ═══════════════════════════════════════════════════════════
   CORRECCIONES DE EVIDENCIAS 7-10 (cabecera PC y candados de plan)
   ═══════════════════════════════════════════════════════════ */

/* 7. En anchos intermedios de PC la marca y los selectores se salían de su
   caja y pintaban encima del selector de vistas y de las acciones. Causa:
   .header-left puede encogerse (min-width:0) pero todos sus hijos son
   nowrap, así que el contenido desbordaba en vez de adaptarse.
   Medido antes: 1366px → 3px de solape, 1280px → 89px, 1024px → 345px.
   Ahora la presión la absorbe el <select> de inquilino, que se recorta con
   elipsis, y el ancho mínimo se respeta sin superponer nada. */
#tenant-switcher-container {
  min-width: 0;
  flex: 0 1 auto;
}

.tenant-select {
  min-width: 70px;
  max-width: 240px;
  flex: 0 1 auto;
  text-overflow: ellipsis;
}

.app-header > .view-mode-nav {
  min-width: 0;
}

/* Por debajo de 1400px el rótulo "Inquilino:" es prescindible: el icono 🏢 y
   el propio nombre ya identifican el selector. */
@media (min-width: 769px) and (max-width: 1400px) {
  .tenant-switcher-label {
    display: none;
  }
}

/* Por debajo de 1150px ni recortando el nombre cabe todo en una fila: el
   selector de vistas baja a su propia fila (mismo criterio que en móvil) y se
   suelta el rótulo de la marca, redundante frente al logotipo. */
@media (min-width: 769px) and (max-width: 1150px) {
  .app-header {
    flex-wrap: wrap;
  }

  .app-header > .view-mode-nav {
    order: 10;
    flex: 1 1 100%;
    margin: 4px 0 0 0;
    justify-content: center;
  }

  .header-brand .header-title {
    display: none;
  }
}

/* 8-10. El candado de plan (🔒 PRO / 🔒 ENTERPRISE) se inyecta dentro de la
   pestaña y en pantallas estrechas su ancho hacía desbordar la fila: en la
   evidencia "Chats" y "Pipeline" quedaban montados uno sobre otro. En móvil
   pasa a ser una marca de esquina que no ocupa espacio de layout; el plan
   requerido se sigue distinguiendo por color y lo dice el modal al pulsar. */
@media (max-width: 900px) {
  .view-mode-tab .gate-lock-badge,
  .panel-tab .gate-lock-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0;
    padding: 0;
    width: 13px;
    height: 13px;
    min-width: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    justify-content: center;
    box-shadow: none;
  }

  .view-mode-tab .gate-lock-badge::before,
  .panel-tab .gate-lock-badge::before {
    content: "🔒";
    font-size: 8px;
    line-height: 1;
  }
}

/* Tarjeta del motor de IA administrado (reemplaza al selector de motor y a la
   clave API que el backend nunca leía). */
.ai-engine-managed {
  margin-bottom: 4px;
}

.ai-engine-managed-note {
  margin: 10px 0 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--clr-text-2);
}


/* ═══════════════════════════════════════════════════════════
   CORRECCIONES DE EVIDENCIAS — PARTE 3 (web de PC)
   ═══════════════════════════════════════════════════════════ */

/* 11. Los menús de la cabecera se pintaban por debajo de su banner hermano.
   `.app-header` es un ítem flex con `z-index: 50`, y por spec un ítem flex con
   z-index distinto de auto crea contexto de apilamiento aunque sea estático.
   Así que TODO lo que cuelga de la cabecera (el panel de cuenta, z-index 120)
   quedaba encerrado en el nivel 50, y el banner de espectador —hermano suyo,
   z-index 90— se pintaba encima.
   La cabecera sube a 100: por encima del banner y por debajo de los modales
   (1000), el login (1000) y los toasts. */
.app-header {
  position: relative;
  z-index: 100;
}

/* 13. "Que haya una opción de ocultamiento del menú lateral derecho".
   El panel de estadísticas ocupa 390px fijos: en un portátil de 1366px la
   conversación se queda con ~650px. Ahora se pliega desde la cabecera y la
   preferencia persiste. El botón permanece visible al plegar, que es la única
   forma de recuperarlo. */
.btn-panel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  border-radius: var(--r-md, 8px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-2);
  cursor: pointer;
  transition: background var(--t-fast, 0.15s) var(--ease), color var(--t-fast, 0.15s) var(--ease),
              border-color var(--t-fast, 0.15s) var(--ease);
}

.btn-panel-toggle:hover {
  background: rgba(34, 211, 238, 0.1);
  border-color: rgba(34, 211, 238, 0.4);
  color: var(--clr-cyan, #22d3ee);
}

.btn-panel-toggle:focus-visible {
  outline: 2px solid var(--clr-cyan, #22d3ee);
  outline-offset: 2px;
}

.btn-panel-toggle[aria-pressed="true"] {
  background: rgba(34, 211, 238, 0.14);
  border-color: rgba(34, 211, 238, 0.45);
  color: var(--clr-cyan, #22d3ee);
}

/* Un icono por estado: panel visible (barra) vs plegado (flecha de retorno) */
.btn-panel-toggle .icon-panel-closed { display: none; }
.btn-panel-toggle.is-collapsed .icon-panel-open { display: none; }
.btn-panel-toggle.is-collapsed .icon-panel-closed { display: block; }

.workspace.config-collapsed {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}

.workspace.config-collapsed > .config-panel {
  display: none;
}

/* De 1025px hacia abajo el panel ya se gobierna por vistas (Chats / Métricas),
   así que el botón sobraría y solo añadiría ruido a la cabecera. */
@media (max-width: 1024px) {
  .btn-panel-toggle { display: none; }
}

/* 14. "Doble ícono en la parte del nombre de usuario".
   El contenedor ya aporta 🏢 en `.tenant-switcher-icon` y el badge del cliente
   estándar repetía el emoji dentro de su texto: `🏢 INQUILINO: 🏢 test1`.
   Ahora el badge lleva solo el nombre; y sin <select> que conmutar, el rótulo
   "Inquilino:" tampoco aporta nada, así que se suelta. */
.tenant-switcher-container.is-static .tenant-switcher-label {
  display: none;
}

.tenant-switcher-container.is-static {
  gap: 6px;
  padding: 4px 12px 4px 10px;
}

.tenant-static-badge {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

@media (max-width: 900px) {
  .tenant-static-badge { max-width: 110px; }
}

/* 16. Los toasts se apilaban en top:20px, justo sobre el cluster derecho de la
   cabecera. Como `.toast` lleva pointer-events:auto (lo necesita su botón de
   cerrar), durante 3-6 s se comían los clics del menú de cuenta y del nuevo
   plegado del panel. Ahora arrancan por debajo de la cabecera, con el desplome
   medido en cada tramo: 56px de una fila en PC, 103px cuando el selector de
   vistas baja a su propia fila, y sin cabecera visible en móvil. */
#toast-container {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top, 0px));
  right: max(20px, env(safe-area-inset-right, 0px));
}

@media (min-width: 901px) and (max-width: 1150px) {
  #toast-container {
    top: calc(118px + env(safe-area-inset-top, 0px));
  }
}

@media (min-width: 1151px) {
  #toast-container {
    top: calc(72px + env(safe-area-inset-top, 0px));
  }
}

/* La tarjeta del toast deja de capturar clics: solo su botón de cerrar lo hace.
   Ajustar el `top` por tramos evita el solape visual, pero la cabecera es de
   alto variable (56px, 103px, 125px en móvil con la lista de chats), así que
   esto es lo que garantiza que un aviso nunca se coma un clic en ningún ancho.
   Nada más del toast es interactivo: `showToast()` solo escucha .toast-close. */
.toast {
  pointer-events: none;
}

.toast-close {
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════
   PARTE 4 — Escala de tarjetas del Pipeline en móvil
   Las tarjetas venían con medidas de escritorio: en 390px de ancho el
   nombre, la píldora de temperatura y los badges de importe competían
   por la misma línea y empujaban la columna fuera del viewport. Aquí se
   compactan padding, tipografía y badges, y se les permite envolver en
   vez de desbordar. Va al final del archivo a propósito: gana en cascada
   sobre el bloque de 900px sin duplicar sus reglas de scroll.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .kanban-card {
    padding: 8px 10px;
    gap: 6px;
  }

  .kanban-card-header {
    gap: 6px;
  }

  /* El bloque de usuario cede espacio; la píldora nunca se recorta */
  .kanban-card-user {
    min-width: 0;
    flex: 1 1 auto;
    gap: 6px;
  }

  .kanban-card-avatar {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .kanban-col-title { font-size: 12.5px; }
  .kanban-card-name { font-size: 12px; }
  .kanban-card-phone { font-size: 10px; }

  .kanban-col-header { padding: 10px 12px; }
  .kanban-cards-container { padding: 8px; gap: 8px; }

  /* Badges de estado: caben holgados y se apilan si hace falta */
  .kanban-lead-pill {
    flex: 0 0 auto;
    font-size: 9.5px;
    padding: 2px 5px;
    letter-spacing: 0.2px;
  }

  .kanban-card-interest,
  .kanban-card-appt {
    font-size: 10.5px;
    padding: 2px 5px;
  }

  .kanban-card-metrics {
    flex-wrap: wrap;
    row-gap: 4px;
    font-size: 10.5px;
  }

  .kanban-deal-badge { font-size: 10.5px; padding: 2px 5px; }
  .kanban-agent-badge { font-size: 10px; }
  .kanban-col-count { font-size: 9.5px; }
  .kanban-col-amount { font-size: 10px; }
}

/* Pantallas muy estrechas (iPhone SE / Galaxy S): la columna se estrecha
   para que siga asomando la siguiente y se entienda que hay más carriles. */
@media (max-width: 380px) {
  .kanban-column {
    flex: 0 0 248px;
    width: 248px;
    min-width: 248px;
    max-width: 248px;
  }

  .kanban-board-container { padding: 8px; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   FASE 11.5 · EL MURO DE PAGO NO PUEDE RECORTAR SU PROPIA SALIDA
   ═══════════════════════════════════════════════════════════════════
   .modal-content topa en max-height:85dvh y recorta con overflow:hidden, sin
   scroll. Medido a 390px de ancho: el muro ocupa 758px de contenido y entra en
   844 y 812, pero en 736 con el error de Stripe visible se pierden 38px, y en
   667 se pierden 100px — entre ellos el botón de cerrar sesión completo. Como
   el muro solo tiene dos salidas, perder una deja encerrada a la cuenta.

   overflow-y:auto no pinta barra cuando el contenido entra, así que en las
   pantallas grandes no cambia nada. El recorte horizontal se mantiene para que
   el halo .upgrade-glass-glow (top:-60px) no asome por las esquinas. Lleva
   !important porque .upgrade-prompt-glass declara overflow:hidden !important
   sobre este mismo nodo. */
#modal-paywall-gate .modal-content {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ════════════════════════════════════════════════════════════
   FACTURACIÓN DESACOPLADA DE «ENTRENAR IA»
   El panel de plan, consumo de tokens y portal de pagos salió del modal de
   entrenamiento y ahora vive solo en #modal-billing. Aquí queda su piel.
   ════════════════════════════════════════════════════════════ */

/* Ya no es una pestaña: es el único contenido de su modal, así que se pinta
   siempre. Conserva el id #tab-billing porque los enlaces profundos
   (?tab=billing, #billing) y loadBillingInfo() lo localizan por id. Si
   siguiera siendo .modal-tab-panel, el reset global de pestañas y la regla
   móvil display:none !important lo dejarían invisible. */
.billing-modal-panel {
  display: block;
  width: 100%;
}

/* Emblema cuadrado de la cabecera: mismo lenguaje que el 🧠 del modal de
   entrenamiento, con la paleta de facturación. */
.modal-header-emblem {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: linear-gradient(135deg, #06b6d4, #2563eb);
}

/* Acceso a Facturación desde el strip de Ajustes. Parece pastilla de sección
   pero abre otra ventana, de ahí la flecha; deliberadamente no lleva
   role="tab" ni la clase .modal-tab para que el handler global de pestañas
   lo ignore y no compita dentro del tablist. */
.modal-tab-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--clr-cyan);
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.28);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--t-fast) var(--ease);
}

.modal-tab-link:hover {
  background: rgba(34, 211, 238, 0.16);
  border-color: rgba(34, 211, 238, 0.5);
  transform: translateY(-1px);
}

.modal-tab-link:focus-visible {
  outline: 2px solid var(--clr-cyan);
  outline-offset: 2px;
}

.modal-tab-link-arrow {
  font-size: 10px;
  opacity: 0.75;
}

/* En móvil el strip envuelve en dos filas: sin esto la pastilla se estiraría
   hasta el ancho completo de su fila. */
@media (max-width: 768px) {
  .modal-tab-link {
    margin-left: 0;
    padding: 10px 12px;
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   WIDGET ACOPLABLE «PRIMEROS PASOS» (Guía de Configuración Inicial)
   ═══════════════════════════════════════════════════════════
   Sustituye al modal de bloqueo que aparecía al terminar el Wizard. Se acopla
   a la esquina inferior IZQUIERDA, se colapsa a solo cabecera y deja el panel
   utilizable: el usuario configura mientras la guía le marca el avance.

   La derecha estaba ocupada: ahí viven «Acciones rápidas» y los grupos plegables
   de .config-panel (390px), y el widget los tapaba justo cuando la guía pedía
   usarlos. A la izquierda solo se cruza con la lista de conversaciones, y de
   todos modos se puede arrastrar a cualquier hueco (app.js: hacerFlotante).

   z-index 900 y no más: por encima de la cabecera (100) y del banner de
   espectador (90), por DEBAJO de .modal-overlay (1000). Es deliberado — los
   CTA del widget abren #modal-train, y con z-index 1000+ el propio widget
   taparía el formulario al que acaba de enviar al usuario.

   Los `max()` con env(safe-area-inset-*) siguen la pauta de #toast-container:
   en la PWA instalada el widget se separa del notch y de la barra de gestos.
   ═══════════════════════════════════════════════════════════ */

.setup-guide {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  left: max(18px, env(safe-area-inset-left, 0px));
  z-index: 900;
  width: 336px;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: var(--clr-bg-2);
  border: 1px solid rgba(34, 197, 94, 0.34);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.62);
  color: var(--clr-text-1);
  animation: setup-guide-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@supports (max-height: 100dvh) {
  .setup-guide { max-height: calc(100dvh - 36px); }
}

/* El banner de instalación PWA (#nudi-pwa-banner, z-index 99998) se ancla
   abajo-DERECHA en escritorio. Desde que la guía vive en la esquina contraria las
   dos piezas conviven sin tocarse, y subirla dejaría un hueco de 126px bajo el
   widget sin ninguna razón visible.

   A 640px o menos el banner pasa a ser una barra de ancho completo
   (install-prompt.css) y ahí sí taparía la guía entera, cabecera incluida: solo
   en ese tramo se apila encima. Su alto real lo publica install-prompt.js en
   --nudi-pwa-banner-h (96px es el respaldo si aún no se ha medido). */
@media (max-width: 640px) {
  body.nudi-pwa-banner-visible .setup-guide {
    bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + var(--nudi-pwa-banner-h, 96px) + 12px);
    max-height: calc(100vh - 48px - var(--nudi-pwa-banner-h, 96px));
  }

  @supports (max-height: 100dvh) {
    body.nudi-pwa-banner-visible .setup-guide {
      max-height: calc(100dvh - 48px - var(--nudi-pwa-banner-h, 96px));
    }
  }
}

/* ── Cabecera: título, contador «X de 4 completados» y barra de progreso ── */
.setup-guide-header {
  position: relative;
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.92), rgba(15, 23, 42, 0.96));
  border-bottom: 1px solid rgba(34, 197, 94, 0.26);
}

/* Toda la cabecera es el botón de minimizar/expandir: el objetivo táctil es la
   franja completa, no un icono de 24px. El padding derecho reserva el hueco
   de la X para que ambos botones nunca compartan píxeles. */
.setup-guide-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 42px 12px 13px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.setup-guide-badge {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #10b981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.setup-guide-heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.setup-guide-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.setup-guide-counter {
  font-size: 11px;
  font-weight: 600;
  color: #a7f3d0;
}

.setup-guide-chevron {
  flex: 0 0 auto;
  font-size: 13px;
  color: #a7f3d0;
  transition: transform 220ms ease;
}

.setup-guide.collapsed .setup-guide-chevron { transform: rotate(-180deg); }

.setup-guide-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: #d1fae5;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.setup-guide-dismiss:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.setup-guide-progress {
  height: 4px;
  background: rgba(148, 163, 184, 0.22);
}

.setup-guide-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #10b981, #34d399);
  transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Cuerpo: los 4 pasos ── */
.setup-guide-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Colapsado: solo sobrevive la cabecera con su progreso */
.setup-guide.collapsed .setup-guide-body,
.setup-guide.collapsed .setup-guide-done { display: none; }

.setup-guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setup-step {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--clr-bg-3);
  border: 1px solid var(--clr-border);
}

.setup-step-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(148, 163, 184, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: transparent;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.setup-step-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.setup-step-title {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--clr-text-1);
}

.setup-step-desc {
  font-size: 11px;
  line-height: 1.32;
  color: var(--clr-text-2);
}

/* Paso completado: el círculo se rellena y muestra el ✓, y el título baja de
   jerarquía para que la vista caiga sola en lo que aún falta. */
.setup-step.done {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(6, 78, 59, 0.22);
}

.setup-step.done .setup-step-check {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #10b981;
  color: #fff;
}

.setup-step.done .setup-step-check::after { content: "✓"; }

.setup-step.done .setup-step-title {
  font-weight: 600;
  color: var(--clr-text-2);
}

.setup-step.done .setup-step-cta { opacity: 0.5; }

.setup-step-cta {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(6, 182, 212, 0.42);
  border-radius: 7px;
  background: rgba(6, 182, 212, 0.12);
  color: var(--clr-accent-light);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.setup-step-cta:hover { background: rgba(6, 182, 212, 0.24); }
.setup-step-cta:active { transform: scale(0.97); }

.setup-step-cta.ghost {
  width: 100%;
  background: none;
  border-color: var(--clr-border);
  color: var(--clr-text-2);
}

.setup-step-cta.ghost:hover {
  background: rgba(6, 182, 212, 0.10);
  border-color: rgba(6, 182, 212, 0.42);
  color: var(--clr-text-1);
}

/* ── Felicitación al 100% ── */
.setup-guide-done {
  flex: 0 0 auto;
  padding: 20px 16px 18px;
  text-align: center;
}

.setup-guide-done-icon {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 8px;
}

.setup-guide-done-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: #34d399;
}

.setup-guide-done-text {
  margin: 0 0 14px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--clr-text-2);
}

.setup-guide-done-btn {
  width: 100%;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.setup-guide-toggle:focus-visible,
.setup-guide-dismiss:focus-visible,
.setup-step-cta:focus-visible,
.setup-guide-done-btn:focus-visible {
  outline: 2px solid var(--clr-cyan);
  outline-offset: 2px;
}

@keyframes setup-guide-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* En móvil ocupa el ancho útil: a 336px fijos quedaba un canal muerto
   a la izquierda y el CTA se partía en dos líneas. */
@media (max-width: 600px) {
  .setup-guide {
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
  }
  .setup-guide-title { font-size: 13px; }
  .setup-step { padding: 8px 9px; }
  /* Aquí el banner es una barra de ancho completo: el margen base es de 10px. */
  body.nudi-pwa-banner-visible .setup-guide {
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + var(--nudi-pwa-banner-h, 96px) + 12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .setup-guide { animation: none; }
  .setup-guide-progress-fill,
  .setup-guide-chevron,
  .setup-step-check,
  .setup-step-cta { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   ASISTENTE DE CONOCIMIENTO INICIAL — #modal-knowledge-wizard
   ════════════════════════════════════════════════════════════ */

/* Contenedor responsive. .modal-content ya trae width:95% y margin:auto (el
   equivalente en CSS llano de w-full + mx-auto); aqui se fija el max-width del
   asistente y se garantiza el margen lateral de 16px en pantallas estrechas,
   que con un 95% se quedaba en apenas 9px. Ojo: el root de este panel es de
   14px, asi que las medidas van en px y no en rem. */
.wizard-modal-card {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

/* «← Anterior» y «Siguiente →» comparten linea grafica: misma altura, mismo
   ancho minimo y misma tipografia, uno neutro y otro de acento. */
#modal-knowledge-wizard .modal-footer .btn-secondary,
#modal-knowledge-wizard .modal-footer .btn-primary {
  width: auto;
  min-width: 132px;
  padding: 9px 18px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
}

/* Contador de caracteres bajo cada textarea */
.wizard-count-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}

.wizard-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--clr-text-2);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast) var(--ease);
}

.wizard-count.cerca { color: #fbbf24; }
.wizard-count.tope { color: #f87171; }

@media (max-width: 600px) {
  /* El bloque movil de .modal-content declara width:95% y max-width:95vw con
     !important: sin repetirlo aqui, el margen lateral se queda en 9px. */
  .wizard-modal-card {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }
  #modal-knowledge-wizard .modal-body { padding: 16px !important; }
  #modal-knowledge-wizard .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
  }
  #modal-knowledge-wizard .modal-footer .btn-secondary,
  #modal-knowledge-wizard .modal-footer .btn-primary {
    min-width: 0;
    flex: 1 1 44%;
  }
}

/* ── FAB «Continuar configuración» ────────────────────────────
   Cerrar el asistente con la «x» no lo destruye: se oculta y deja este boton
   abajo-derecha para retomarlo en el mismo paso. Comparte esquina con el banner
   PWA (#nudi-pwa-banner, z-index 99998) y se apila por debajo de el con el mismo
   patron de variable. La guia de «Primeros Pasos» se mudo a la esquina izquierda
   en la Parte 19, asi que en escritorio ya no se cruzan. */
.wizard-fab {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  right: max(18px, env(safe-area-inset-right, 0px));
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.42);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.wizard-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(99, 102, 241, 0.55);
}

.wizard-fab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.wizard-fab-icon { font-size: 15px; line-height: 1; }

/* Con el banner PWA presente el FAB se sube por encima de el. */
body.nudi-pwa-banner-visible .wizard-fab {
  bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + var(--nudi-pwa-banner-h, 96px) + 12px);
}

/* La guia de «Primeros Pasos» ya no se sube por encima del FAB: vive abajo-
   izquierda y el FAB abajo-derecha, asi que en escritorio no hay nada que
   esquivar. Solo se apilan cuando el FAB pasa a ser una barra de ancho completo,
   y eso se resuelve en el @media (max-width: 600px) de mas abajo. */

@media (max-width: 600px) {
  .wizard-fab {
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    justify-content: center;
  }
  body.nudi-pwa-banner-visible .wizard-fab {
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + var(--nudi-pwa-banner-h, 96px) + 12px);
  }
  /* Aqui las tres piezas son barras de ancho completo y se apilan de verdad: si
     el alto maximo no baja con ellas, la guia se sale por arriba. */
  body.nudi-wizard-fab-visible .setup-guide {
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + var(--nudi-wizard-fab-h, 46px) + 12px);
    max-height: calc(100vh - 32px - var(--nudi-wizard-fab-h, 46px));
  }
  body.nudi-pwa-banner-visible.nudi-wizard-fab-visible .setup-guide {
    bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + var(--nudi-pwa-banner-h, 96px) + var(--nudi-wizard-fab-h, 46px) + 24px);
    max-height: calc(100vh - 44px - var(--nudi-pwa-banner-h, 96px) - var(--nudi-wizard-fab-h, 46px));
  }
  @supports (max-height: 100dvh) {
    body.nudi-wizard-fab-visible .setup-guide {
      max-height: calc(100dvh - 32px - var(--nudi-wizard-fab-h, 46px));
    }
    body.nudi-pwa-banner-visible.nudi-wizard-fab-visible .setup-guide {
      max-height: calc(100dvh - 44px - var(--nudi-pwa-banner-h, 96px) - var(--nudi-wizard-fab-h, 46px));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-fab { transition: none; }
  .wizard-fab:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE DE LA PANTALLA DE ACCESO (<= 480px)
   La tarjeta pide 48px arriba y 40px a los lados, mas un titulo de 32px: en un
   movil de 360-390px de ancho eso la estira hasta desbordar el alto util y el
   pie («Ver Landing Comercial») quedaba cortado. Aqui se compacta para que en
   el caso normal no haga falta desplazarse; el scroll del contenedor queda
   como red de seguridad para pantallas cortas de verdad.
════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #login-screen {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .login-card {
    padding: 28px 20px 24px;
    border-radius: var(--r-lg, 16px);
  }

  .login-logo-area { margin-bottom: 18px; }
  .login-title { font-size: 26px; }
  .login-subtitle { font-size: 12px; }
  .login-divider { margin-bottom: 18px; }
  .login-brand-logo { width: 54px; height: 54px; }
  .login-bg-glow { width: 420px; height: 420px; }
}

/* Movil en horizontal y ventanas bajas: el alto es el limite, no el ancho. */
@media (max-height: 620px) {
  .login-card { padding: 22px 24px 20px; }
  .login-logo-area { margin-bottom: 14px; }
  .login-title { font-size: 24px; }
  .login-divider { margin-bottom: 14px; }
}

/* ════════════════════════════════════════════════════════════
   ESTADO «ENTRENADO» DEL BOTON DEL ASISTENTE
   El mismo boton morado abre el asistente por primera vez y lo reabre para
   editar. Cuando el inquilino ya tiene conocimiento compilado cambia de color
   y de rotulo para que no parezca una tarea pendiente eternamente.
════════════════════════════════════════════════════════════ */
.btn-wizard-action-pill.is-trained {
  background: linear-gradient(135deg, #059669, #10b981);
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.btn-wizard-action-pill.is-trained:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45);
}

.wizard-pill-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   INTENCIONES SUGERIDAS EN LA PESTAÑA DE FLUJOS
   Las propone el asistente a partir del giro descrito. Son sugerencias: no
   pisan el ruteo que el usuario ya tenga, se anaden con un clic.
════════════════════════════════════════════════════════════ */
.flows-suggestions {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px dashed rgba(99, 102, 241, 0.42);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(139, 92, 246, 0.06));
}

.flows-suggestions.hidden { display: none; }

.flows-suggestions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.flows-suggestions-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #a5b4fc;
}

.flows-suggestions-hint {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--clr-text-3);
  margin: 0 0 10px;
}

.btn-flows-add-all {
  width: auto;
  padding: 5px 11px;
  font-size: 11.5px;
  white-space: nowrap;
}

.flows-suggestions-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.flow-suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 11px;
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: var(--r-full, 9999px);
  background: rgba(15, 23, 42, 0.55);
  color: var(--clr-text-1);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  text-align: left;
}

.flow-suggestion-chip:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(129, 140, 248, 0.7);
  transform: translateY(-1px);
}

.flow-suggestion-chip:disabled {
  opacity: 0.55;
  cursor: default;
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.12);
}

.flow-suggestion-chip .chip-plus { font-weight: 800; color: #a5b4fc; }
.flow-suggestion-chip:disabled .chip-plus { color: #34d399; }

.flow-suggestion-chip .chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

@media (max-width: 480px) {
  .flow-suggestion-chip .chip-text { max-width: 150px; }
}

/* ═══════════════════════════════════════════════════════════════
   MODAL «REVISA TU CORREO» (#modal-reset-sent)
   ═══════════════════════════════════════════════════════════════
   Sustituye al aviso en linea de #login-error-msg, que se auto-ocultaba a los
   10 s: el usuario tiene que poder leer las condiciones del enlace (caduca en
   1 hora, uno solo a la vez) sin carrera contra un temporizador. */

.reset-sent-target {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: var(--clr-text-3);
  word-break: break-all;
}

.reset-sent-message {
  margin: 0 0 14px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--clr-text-1);
}

.reset-sent-tips {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--clr-text-2);
}

.reset-sent-tips strong { color: var(--clr-text-1); }

/* Un grado por debajo de los avisos de la lista: es la salida para quien no ve
   llegar nada, no una cuarta condición del enlace. */
.reset-sent-hint {
  margin: 12px 0 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--clr-text-3);
}

/* Caja de depuracion: ambar de aviso, no verde de exito. Ensenar el enlace es
   una concesion para poder probar sin correo, y el color lo dice. */
.reset-debug-box {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.32);
}

.reset-debug-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fcd34d;
  margin-bottom: 6px;
}

.reset-debug-warn {
  margin: 0 0 10px 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--clr-text-2);
}

.reset-debug-link {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid var(--clr-border);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  line-height: 1.4;
  color: #a5b4fc;
  word-break: break-all;
  max-height: 96px;
  overflow-y: auto;
}

.reset-debug-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.reset-debug-actions .btn-primary,
.reset-debug-actions .btn-secondary {
  font-size: 12px;
  padding: 7px 12px;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   MODALES DE ACCESO: PEDIR ENLACE Y CONTRASEÑA NUEVA
   ═══════════════════════════════════════════════════════════════
   #modal-forgot-password y #modal-new-password se abren sobre la pantalla de
   acceso, antes de que exista sesión. Reutilizan .login-field / .login-label /
   .login-input / .login-password-wrap / .login-eye de esa misma pantalla: son
   selectores de clase sin ambito, y repetir su aspecto aquí solo garantizaba
   que los dos formularios se separasen con el tiempo. */

/* El <form> envuelve .modal-body y .modal-footer, y .modal-content es un flex
   en columna: sin esto el formulario se convierte en un hijo rígido y el cuerpo
   pierde su scroll propio (se nota al abrir el teclado en móvil).

   Vale para CUALQUIER modal cuyo <form> se interponga entre .modal-content y
   .modal-body, no solo para los de acceso; por eso #agent-install-form comparte
   la regla en vez de copiarla. Copiada, las dos se separan con el tiempo: el
   formulario del catálogo de agentes nació sin ella y su cuarto campo acababa
   detrás del pie pegajoso, porque .modal-body no llegaba a tener scroll y
   .modal-content recortaba con overflow: hidden. */
.auth-modal-form,
#agent-install-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.auth-modal-sub {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: var(--clr-text-3);
  word-break: break-word;
}

.auth-modal-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--clr-text-2);
}

.auth-modal-hint strong { color: var(--clr-text-1); }

/* El hueco de error no reserva alto cuando esta vacio: la tarjeta no debe
   saltar al aparecer el mensaje, asi que se anuncia con role="alert" y se
   muestra con .hidden en lugar de con opacidad. */
.auth-modal-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.34);
  font-size: 12.5px;
  line-height: 1.45;
  color: #FCA5A5;
}

/* Estados excluyentes de #modal-new-password (comprobando / caducado / hecho).
   Son .modal-body para heredar el padding y el scroll, mas esta capa de
   centrado. */
.auth-modal-state {
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 28px 24px;
}

.auth-modal-state-icon {
  font-size: 34px;
  line-height: 1;
}

.auth-modal-state-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-text-1);
}

.auth-modal-state-text {
  margin: 0;
  max-width: 34ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--clr-text-2);
}

.auth-modal-state .btn-primary {
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   LANZADOR DE LA GUÍA DE PRIMEROS PASOS (#btn-onboarding-launcher)
   ═══════════════════════════════════════════════════════════════
   La 'x' de la guía escribe dismissed:true y la oculta. Antes eso era
   definitivo: el usuario perdía el único camino guiado a los pasos que le
   faltaban. Este botón es la puerta de vuelta, y solo existe mientras haya algo
   que hacer (app.js: refreshOnboardingLauncher).

   Misma esquina (abajo-izquierda) y mismo z-index que .setup-guide: nunca se ven
   a la vez, uno es el estado plegado del otro. Y como la guía, se puede arrastrar
   a cualquier hueco de la pantalla (app.js: hacerFlotante). */
.onboarding-launcher {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  left: max(18px, env(safe-area-inset-left, 0px));
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 36px);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.38);
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.96), rgba(15, 23, 42, 0.96));
  color: var(--clr-text-1);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  animation: setup-guide-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.onboarding-launcher:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 197, 94, 0.66);
}

.onboarding-launcher:focus-visible {
  outline: 2px solid var(--clr-accent-bright, #22D3EE);
  outline-offset: 2px;
}

.onboarding-launcher-icon { font-size: 15px; line-height: 1; }

.onboarding-launcher-counter {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.22);
  border: 1px solid rgba(34, 197, 94, 0.3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #86EFAC;
}

/* Mismo criterio que .setup-guide: el banner de instalación solo se cruza con el
   lanzador cuando es una barra de ancho completo (640px o menos). Por encima de
   eso vive en la esquina de enfrente y no hay nada que esquivar. */
@media (max-width: 640px) {
  body.nudi-pwa-banner-visible .onboarding-launcher {
    bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + var(--nudi-pwa-banner-h, 96px) + 12px);
  }
}

/* En pantallas estrechas se queda solo el icono y el contador: el texto empuja
   el botón hasta el borde opuesto y tapa la barra inferior del panel. */
@media (max-width: 480px) {
  .onboarding-launcher { padding: 9px 12px; font-size: 12px; }
  .onboarding-launcher-text { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ARRASTRE DE LOS FLOTANTES (.setup-guide y .onboarding-launcher)
   ═══════════════════════════════════════════════════════════════
   app.js (hacerFlotante) escribe left/top EN LÍNEA y anula bottom/right, y el
   estilo en línea gana a cualquier regla de este fichero sin un solo
   !important. Todo lo de arriba decide únicamente dónde aparece por defecto;
   en cuanto el usuario lo mueve, manda él.

   touch-action: none no es opcional en las asas. Sin él el navegador se queda el
   gesto para desplazar la página, pointermove no llega nunca y en un móvil el
   widget no se movería ni un píxel. */

.setup-guide-header,
.onboarding-launcher {
  touch-action: none;
}

/* .setup-guide-toggle cubre la cabecera entera con su cursor de pulsar, así que
   la pista de «esto se arrastra» solo cabe sobre la franja de progreso. El
   título sigue arrastrando igual: lo decide el gesto, no el cursor. */
.setup-guide-progress { cursor: grab; }

/* Mientras se arrastra manda el cursor de agarre en toda la página: el puntero
   se sale del elemento constantemente y con el cursor local parpadearía. */
html.nudi-arrastrando,
html.nudi-arrastrando * {
  cursor: grabbing !important;
  user-select: none !important;
}

/* Y ni animación de entrada ni transiciones durante el gesto: la caja tiene que
   ir pegada al dedo, no llegar 150 ms detrás. */
html.nudi-arrastrando .setup-guide,
html.nudi-arrastrando .onboarding-launcher {
  animation: none !important;
  transition: none !important;
}

/* Y una vez colocado a mano, la entrada se retira del todo: setup-guide-in
   arranca en translateY(14px) scale(0.98), un «vengo del borde de abajo» que
   deja de ser cierto en cuanto el widget vive donde lo puso el usuario. De paso
   deja de falsear la caja pintada justo en el fotograma de la suelta. */
.setup-guide[data-nudi-colocado="1"],
.onboarding-launcher[data-nudi-colocado="1"] { animation: none; }

/* ════════════════════════════════════════════════════════════
   PARTE 20 · CATÁLOGO DE AGENTES (Agent Blueprints)
   ════════════════════════════════════════════════════════════
   Recordatorio: html está fijado a 14px, así que 0.78rem son 10.9px
   reales, no 12.5. Las medidas finas van en px a propósito. */

.agent-catalog-intro {
  margin: 4px 0 16px;
}
.agent-catalog-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-text-1);
  margin: 0 0 6px;
}
.agent-catalog-sub {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--clr-text-2);
  margin: 0;
}

/* La cuadrícula: auto-fit con un mínimo de 248px reparte 2 columnas en el
   ancho del modal y cae sola a 1 cuando no caben, sin media query. */
.agent-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* Tarjeta oscura. El acento (cian o púrpura) entra como variable local, así
   una sola regla sirve para los cuatro arquetipos. */
.agent-card {
  --agent-acento: #22d3ee;
  --agent-acento-2: #06b6d4;
  --agent-borde: rgba(34, 211, 238, 0.32);
  --agent-halo: rgba(34, 211, 238, 0.18);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--agent-borde);
  background:
    linear-gradient(160deg, rgba(30, 41, 59, 0.55) 0%, rgba(2, 6, 23, 0.9) 100%);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.agent-card[data-acento="purpura"] {
  --agent-acento: #a855f7;
  --agent-acento-2: #8b5cf6;
  --agent-borde: rgba(168, 85, 247, 0.32);
  --agent-halo: rgba(168, 85, 247, 0.18);
}
/* Filete superior con el color del arquetipo: identifica la tarjeta de un
   vistazo sin gritar. */
.agent-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--agent-acento-2), var(--agent-acento));
  opacity: 0.85;
}
.agent-card:hover {
  transform: translateY(-3px);
  border-color: var(--agent-acento);
  box-shadow: var(--shadow-md), 0 0 26px var(--agent-halo);
}

.agent-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.agent-card-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.15rem;
  line-height: 1;
  background: var(--agent-halo);
  border: 1px solid var(--agent-borde);
}
.agent-card-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.agent-card-name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--clr-text-1);
  margin: 0;
}
.agent-badge {
  align-self: flex-start;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--agent-acento);
  background: var(--agent-halo);
  border: 1px solid var(--agent-borde);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-card-goal {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--clr-text-2);
  margin: 0;
}
.agent-card-goal strong {
  color: var(--clr-text-1);
  font-weight: 600;
}

/* Los botones van pegados al fondo aunque un resumen sea más corto que otro:
   margin-top:auto sobre una tarjeta en columna alinea las cuatro filas. */
.agent-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.agent-card-actions .btn-secondary,
.agent-card-actions .btn-primary {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 10px;
  font-size: 0.76rem;
  white-space: nowrap;
}
.agent-card-actions .btn-primary {
  background: linear-gradient(135deg, var(--agent-acento-2), var(--agent-acento));
  border-color: transparent;
  color: #041016;
}

/* El arquetipo ya instalado se marca en la propia tarjeta: sin esto, el
   usuario no tiene forma de saber cuál eligió la vez pasada. */
.agent-card.is-installed {
  border-color: var(--clr-active);
  box-shadow: var(--shadow-md), 0 0 20px var(--emerald-glow);
}
.agent-card-installed-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--clr-active);
}

.agent-catalog-empty {
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px dashed var(--clr-border-hover);
  font-size: 0.8rem;
  color: var(--clr-text-2);
  text-align: center;
  margin: 0;
}

/* Pastilla de «agente activo». Es un aviso, no un botón: sin hover ni cursor. */
.agent-catalog-installed {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(16, 185, 129, 0.3);
  background: var(--clr-active-dim);
  font-size: 0.78rem;
  color: var(--clr-text-2);
}
.agent-catalog-installed strong { color: var(--clr-text-1); }
.agent-installed-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-active);
  box-shadow: 0 0 10px var(--clr-active-glow);
}

/* ── Previsualización del arquetipo ──────────────────────────── */
.agent-preview-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  font-size: 1.05rem;
  line-height: 1;
  background: var(--clr-accent-dim);
  border: 1px solid var(--clr-accent-border);
}

.agent-preview-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--clr-text-1);
  margin: 0;
  line-height: 1.25;
}
.agent-preview-pattern {
  font-size: 0.7rem;
  color: var(--clr-text-3);
  margin: 2px 0 0;
}
.agent-preview-description {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--clr-text-2);
  margin: 0 0 16px;
}
.agent-preview-section {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-accent-light);
  margin: 18px 0 6px;
}
.agent-preview-hint {
  font-size: 0.72rem;
  color: var(--clr-text-3);
  margin: 0 0 8px;
}
.agent-preview-hint code {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--clr-accent-dim);
  color: var(--clr-accent-light);
}

/* El prompt se muestra en crudo. pre-wrap + overflow-wrap son obligatorios:
   una sola línea larga del prompt ensancharía el modal entero.

   min-height NO es decorativo: .modal-body es un flex en columna y este <pre>
   es su único hijo con overflow, así que su «tamaño mínimo automático» valía 0
   y el navegador lo encogía hasta el relleno (26px medidos) para que el resto
   cupiese. Un min-height explícito desactiva ese mínimo automático: el <pre>
   conserva su alto y el desborde se va al scroll del cuerpo, que es de quien
   es. */
.agent-preview-prompt {
  min-height: 180px;
  max-height: 280px;
  overflow: auto;
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--clr-border);
  background: rgba(2, 6, 23, 0.75);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: #cbd5e1;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}
.agent-preview-prompt:focus-visible {
  outline: 2px solid var(--clr-accent-light);
  outline-offset: 2px;
}

.agent-preview-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.agent-var-chip {
  padding: 4px 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--clr-accent-border);
  background: var(--clr-accent-dim);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--clr-accent-light);
}

.agent-preview-flows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agent-preview-flows li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-border);
  background: rgba(15, 23, 42, 0.6);
  font-size: 0.76rem;
  line-height: 1.5;
}
.agent-flow-trigger {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--clr-accent-light);
  white-space: nowrap;
}
.agent-flow-arrow {
  color: var(--clr-text-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.agent-flow-action {
  flex: 1 1 160px;
  min-width: 0;
  color: var(--clr-text-2);
}

/* ── Micro-formulario de personalización ─────────────────────── */

/* Quien devuelve el scroll a este cuerpo es la regla de #agent-install-form
   (junto a .auth-modal-form): el <form> pasa a ser el flex en columna y
   .modal-body recupera su flex: 1 1 auto / min-height: 0 / overflow-y: auto.
   Este techo es el cinturón además de los tirantes: acota el cuerpo aunque la
   cadena flex se rompa otra vez, para que los cuatro campos siempre se puedan
   alcanzar con la rueda y ninguno quede detrás del pie.

   Se declara dos veces a propósito: vh primero como respaldo y dvh después,
   que es la unidad que ya usa .modal-content (85dvh) y la única que descuenta
   la barra del navegador en móvil. En pantallas de 900px o menos manda el
   `height: calc(90dvh - 125px) !important` del bloque móvil, que es el
   comportamiento que ya estaba probado ahí. */
#modal-agent-install .modal-body {
  max-height: calc(85vh - 120px);
  max-height: calc(85dvh - 120px);
  overflow-y: auto;
}

.agent-install-field { margin-bottom: 14px; }
.agent-install-field > label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--clr-text-1);
}
.agent-install-field .config-input { width: 100%; }
.agent-install-field textarea.config-input {
  resize: vertical;
  min-height: 62px;
  line-height: 1.5;
}
.agent-req {
  color: var(--clr-danger);
  font-weight: 700;
}
.agent-install-hint {
  margin: 5px 0 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--clr-text-3);
}
/* El campo con error se señala en el borde, no solo con el párrafo de arriba:
   en un formulario de cuatro campos hay que saber cuál falta. */
.agent-install-field .config-input.agent-input-error {
  border-color: var(--clr-danger);
  box-shadow: 0 0 0 2px var(--clr-danger-dim);
}
.agent-install-note {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-accent-border);
  background: var(--clr-accent-dim);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--clr-text-2);
}
.agent-install-note strong { color: var(--clr-text-1); }

/* ── Teléfono estrecho ───────────────────────────────────────── */
@media (max-width: 480px) {
  .agent-catalog-grid { grid-template-columns: 1fr; }
  .agent-catalog-title { font-size: 0.98rem; }
  /* Dos botones de ancho completo apilados: «Instalar Agente en mi Workspace»
     no cabe al lado de nada en 360px. */
  .agent-card-actions { flex-direction: column; }
  .agent-card-actions .btn-secondary,
  .agent-card-actions .btn-primary { width: 100%; }
  /* Se baja el suelo junto con el techo: con min-height 180px y techo 190px el
     visor quedaría casi fijo y ya no respiraría en una pantalla de 360px. */
  .agent-preview-prompt {
    min-height: 150px;
    max-height: 220px;
    font-size: 0.64rem;
  }
  .agent-preview-flows li { font-size: 0.72rem; }
  .agent-catalog-installed { font-size: 0.72rem; }
}