/* ════════════════════════════════════════════════════════════════════════
   NodeFlow Design System · v2.0 · "Electric Night"
   ────────────────────────────────────────────────────────────────────────
   Sistema de diseño canónico del portal de clientes NodeFlow.
   Lima eléctrica (#c4f546) sobre casi-negro frío. Fraunces para display,
   Inter para UI. Una sola fuente de verdad: tokens → componentes → motion.

   Contrato: las clases existentes (.card, .kpi, .btn, .badge, table…) son
   la API pública de componentes. portal.js las genera; este archivo las
   viste. No renombrar sin migración.

   Breakpoints (referencia, CSS no permite var() en media queries):
     ≤ 767px   móvil      (sidebar off-canvas, 1 columna)
     768–1079  tablet     (sidebar fija, grids 2 col)
     ≥ 1080px  desktop    (layout completo)
     ≥ 1440px  wide       (el contenido se centra, respira)
   ════════════════════════════════════════════════════════════════════════ */


/* ── 01 · TOKENS ────────────────────────────────────────────────────────── */
:root {
  /* Paleta — fondo */
  --bg:        #0a0b0d;                      /* casi negro frío (canónico marca) */
  --bg-2:      #0d0f12;                      /* franjas alternas */
  --surface-1: #101216;                      /* tarjetas */
  --surface-2: #14171c;                      /* tarjetas elevadas, modal, inputs de login */
  --surface-3: #191d23;                      /* hover, inputs activos */
  /* alias legacy (portal.js los usa en estilos inline) */
  --card:  var(--surface-1);
  --card2: var(--surface-2);

  /* Paleta — marca */
  --accent:    #c4f546;                      /* lima eléctrica. LA marca */
  --accent-l:  #d6ff5c;                      /* lima clara: hover, texto realzado */
  --accent-rgb: 196,245,70;
  --cyan-rgb:   56,225,200;                  /* tints de cian (guías, datos) */
  --yellow-rgb: 246,197,68;                  /* tints de aviso */
  --green-rgb:  33,192,138;                  /* tints de éxito */
  --red-rgb:    240,100,90;                  /* tints de error/destructivo */
  --on-accent: #0a0b0d;                      /* texto/iconos SOBRE lima: casi-negro, nunca blanco */
  --cyan:      #38e1c8;                      /* acento secundario, datos */

  /* Paleta — semántica (estados, no marca) */
  --green:  #21c08a;  --green2: #19b894;     /* éxito */
  --yellow: #f6c544;                         /* aviso / necesita atención */
  --red:    #f0645a;                         /* error / destructivo */
  --blue:   #60a5fa;                         /* informativo */

  /* Paleta — texto (sobre --bg, contraste AA verificado) */
  --white: #f4f7f5;                          /* titulares */
  --text:  #e9ecf3;                          /* cuerpo · 16.4:1 */
  --dim:   #9aa3b4;                          /* secundario · 7.4:1 */
  --muted: #6f7a8b;                          /* terciario decorativo · 4.6:1 */

  /* Bordes */
  --border:   rgba(255,255,255,.07);
  --border-2: rgba(255,255,255,.13);
  --border-accent: rgba(var(--accent-rgb),.35);

  /* Espaciado — base 4px */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radios — EDITORIAL: bordes duros (2026-07-05, alineado con la landing) */
  --r-1: 2px;   /* controles pequeños, badges */
  --r-2: 2px;   /* botones, inputs */
  --r-3: 3px;   /* tarjetas interiores, filas */
  --r-4: 3px;   /* tarjetas principales, modal */
  --r-pill: 999px;  /* solo toggles/switches reales */

  /* Elevación — EDITORIAL: plano, la separación la dan los hairlines, no glow/sombra */
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 0 18px 44px -20px rgba(0,0,0,.85);   /* solo modal/overlay */
  --shadow-4: 0 36px 90px -28px rgba(0,0,0,.95);   /* solo modal/overlay */
  --glow-accent:      none;
  --glow-accent-soft: 0 0 0 2px rgba(var(--accent-rgb),.4);  /* anillo de foco nítido */

  /* Blur */
  --blur-sm: 8px; --blur-md: 16px; --blur-lg: 32px;

  /* Tipografía */
  --font-ui:      'Satoshi', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Clash Display', 'Satoshi', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px;
  --fs-base: 14px; --fs-lg: 16px; --fs-xl: 18px;
  --fs-2xl: 22px; --fs-3xl: 28px; --fs-4xl: 36px; --fs-5xl: 46px;

  /* Motion */
  --ease-out:      cubic-bezier(.22, 1, .36, 1);   /* out-quint: el estándar */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);    /* entradas grandes, modales */
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);   /* movimientos en bucle */
  --dur-1: 120ms;  /* micro: hover, press */
  --dur-2: 200ms;  /* controles: dropdown, toggle */
  --dur-3: 320ms;  /* paneles: modal, sección */
  --dur-4: 560ms;  /* escena: hero, stagger largo */

  /* Z-index semántico */
  --z-dropdown: 100;
  --z-sticky:   120;
  --z-backdrop: 150;
  --z-sidebar:  160;
  --z-topbar:   200;
  --z-modal:    300;
  --z-confirm:  350;
  --z-toast:    400;
  --z-cmdk:     500;
  --z-tooltip:  600;

  /* Layout */
  --sidebar-w: 232px;
  --content-max: 1240px;
  --radius: var(--r-3);      /* alias legacy */
  --radius-sm: var(--r-2);   /* alias legacy */
}


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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(var(--accent-rgb), .28); color: var(--white); }

/* Scrollbar fino y silencioso */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

img, svg { display: inline-block; vertical-align: middle; }
a { color: var(--accent-l); }
strong { color: var(--white); font-weight: 700; }
.hidden { display: none !important; }


/* ── 03 · TIPOGRAFÍA ───────────────────────────────────────────────────── */
h1, h2, h3 { text-wrap: balance; color: var(--white); }

.display {
  font-family: var(--font-display);
  font-weight: 550;
  letter-spacing: -.02em;
  color: var(--white);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--white);
  line-height: 1.02;
}
/* Cabecera de vista EDITORIAL: regla hairline superior (marca de sección tipo
   landing) + título display grande. Aplica a todas las vistas con .section-header. */
.section-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: var(--sp-8); flex-wrap: wrap; gap: var(--sp-3);
  border-top: 1px solid var(--border); padding-top: var(--sp-6);
}
.section-header h2 {
  font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.02;
}
/* Kicker mono de categoría dentro de la cabecera: ocupa su propia línea (sobre
   el título) vía flex-wrap, sin reestructurar el markup (título + acciones bajan). */
.section-header .kicker { order: -1; width: 100%; margin: 0 0 var(--sp-1); }
.section-hd-titles { min-width: 0; }
.section-desc, .section-sub { font-size: var(--fs-md); color: var(--dim); margin-top: var(--sp-2); }

.loading-msg { color: var(--dim); font-size: var(--fs-md); padding: var(--sp-6) 0; }


/* ── 04 · ESTADOS GLOBALES (focus, disabled, loading) ──────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .btn:focus-visible, .faq-q:focus-visible {
  outline: 2px solid var(--accent-l);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

[disabled], .is-disabled { opacity: .45; cursor: not-allowed !important; pointer-events: none; }

.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), .25); border-top-color: var(--accent);
  animation: nf-spin .7s linear infinite;
}

.spin {
  width: 34px; height: 34px; margin: 0 auto var(--sp-4);
  border: 3px solid rgba(var(--accent-rgb), .15); border-top-color: var(--accent);
  border-radius: 50%; animation: nf-spin .8s linear infinite;
}
@keyframes nf-spin { to { transform: rotate(360deg); } }


/* ── 05 · SHELL: LOGIN, SIDEBAR, CONTENIDO ─────────────────────────────── */
#loginScreen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: var(--sp-6);
  background:
    radial-gradient(52rem 30rem at 82% -12%, rgba(var(--accent-rgb),.07), transparent 60%),
    radial-gradient(40rem 26rem at -10% 110%, rgba(56,225,200,.05), transparent 60%),
    var(--bg);
}
/* Login partido: panel de marca (nativo de voz) + formulario. Rediseño 2026-07-16. */
.login-split {
  display: grid; grid-template-columns: 1.05fr .95fr;
  width: 100%; max-width: 940px; min-height: 560px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-4); overflow: hidden;
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02) inset;
  animation: nf-pop var(--dur-3) var(--ease-out-expo) backwards;
}
.login-logo { font-size: 22px; font-weight: 900; color: var(--white); letter-spacing: -.02em; }
.login-logo em, .sidebar-logo-title em { color: var(--accent-l); font-style: normal; }

/* ── Panel de marca ── */
.login-brand {
  position: relative; overflow: hidden;
  padding: var(--sp-10);
  display: flex; flex-direction: column;
  background:
    radial-gradient(30rem 30rem at 15% 0%, rgba(var(--accent-rgb),.10), transparent 62%),
    linear-gradient(160deg, #10141a 0%, #0b0e12 100%);
  border-right: 1px solid var(--border);
}
.login-wave {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 92%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 92%, transparent);
}
.login-brand-in { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.login-status {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin: var(--sp-6) 0 var(--sp-5);
  padding: 5px 12px 5px 10px; border-radius: 999px;
  background: rgba(var(--accent-rgb),.08); border: 1px solid rgba(var(--accent-rgb),.22);
  color: var(--accent-l); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em;
}
.login-status i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.55);
  animation: login-pulse 2.4s var(--ease-out) infinite;
}
@keyframes login-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.5); }
  70% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
}
.login-hero {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1.04; letter-spacing: -.025em;
  color: var(--white); margin: 0 0 var(--sp-4); text-wrap: balance;
}
.login-lead {
  font-size: var(--fs-base); line-height: 1.6; color: var(--dim);
  max-width: 34ch; margin: 0;
}
.login-meta {
  display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: var(--sp-6);
  font-size: var(--fs-xs); color: var(--dim); opacity: .72;
}
.login-meta svg { flex-shrink: 0; color: var(--accent-l); opacity: .8; }

/* ── Panel de formulario ── */
.login-form {
  padding: var(--sp-10);
  display: flex; flex-direction: column; justify-content: center;
  background: var(--surface-2);
}
.login-form-head { margin-bottom: var(--sp-6); }
.login-form-head h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 26px;
  letter-spacing: -.02em; color: var(--white); margin: 0 0 4px;
}
.login-form-head p { font-size: var(--fs-md); color: var(--dim); margin: 0; }
.login-field { display: block; margin-bottom: var(--sp-4); }
.login-label {
  display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--dim);
  margin-bottom: 7px; letter-spacing: .01em;
}
.login-input {
  width: 100%; background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: 12px 14px; color: var(--text);
  font-size: var(--fs-base); font-family: inherit; outline: none;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
/* El estado :focus y ::placeholder los aplica la regla compartida del portal
   (borde lima + glow), para que el login sea coherente con el resto de inputs. */
.login-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--accent); color: var(--on-accent);
  border: none; border-radius: var(--r-2); padding: 13px;
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; margin-top: var(--sp-2);
  transition: background var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.login-btn svg { width: 17px; height: 17px; transition: transform var(--dur-2) var(--ease-out); }
.login-btn:hover {
  background: var(--accent-l); transform: translateY(-1px);
  box-shadow: 0 8px 26px -8px rgba(var(--accent-rgb),.5);
}
.login-btn:hover svg { transform: translateX(3px); }
.login-btn:active { transform: translateY(0); }
.login-links {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: var(--sp-5); font-size: var(--fs-md);
}
.login-links a { color: var(--accent-l); text-decoration: none; cursor: pointer; }
.login-links a:hover { text-decoration: underline; }
.login-sep { color: var(--border-2, #2a3038); }
.login-first { font-size: var(--fs-md); color: var(--dim); margin: var(--sp-4) 0 0; }
.login-first a { color: var(--accent-l); text-decoration: none; }
.login-first a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .login-split { grid-template-columns: 1fr; max-width: 440px; min-height: 0; }
  .login-brand { border-right: none; border-bottom: 1px solid var(--border); padding: var(--sp-8); }
  .login-brand-in { min-height: 260px; }
  .login-status { margin-top: var(--sp-2); }
  .login-hero { font-size: 28px; }
  .login-form { padding: var(--sp-8); }
}
@media (prefers-reduced-motion: reduce) {
  .login-status i { animation: none; }
  .login-split { animation: none; }
}

#app { display: none; }

.hamburger {
  display: none; position: fixed; top: 12px; left: 12px; z-index: var(--z-topbar);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  width: 38px; height: 38px; border-radius: var(--r-2); font-size: 18px; cursor: pointer;
  align-items: center; justify-content: center; line-height: 1;
  box-shadow: var(--shadow-2);
}

.backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(4,5,6,.6); backdrop-filter: blur(var(--blur-sm));
  z-index: var(--z-backdrop);
}
.backdrop.open { display: block; animation: nf-fade var(--dur-2) var(--ease-out); }

.sidebar {
  position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100dvh;
  background: var(--bg-2); border-right: 1px solid var(--border);
  z-index: var(--z-sidebar); display: flex; flex-direction: column; overflow-y: auto;
}
.sidebar-logo { padding: 20px 18px 16px; border-bottom: 1px solid var(--border); }
.sidebar-logo-title { font-size: 17px; font-weight: 900; color: var(--white); }
.sidebar-biz {
  font-size: var(--fs-xs); color: var(--dim); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-nav { flex: 1; padding: var(--sp-3) var(--sp-2); }
.nav-section-title {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 16px 10px 6px; user-select: none;
}
.nav-section-title:first-child { padding-top: var(--sp-1); }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: var(--r-1); cursor: pointer;
  font-size: var(--fs-md); font-weight: 600; color: var(--dim);
  margin-bottom: 2px; user-select: none; position: relative;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nav-item:hover { background: rgba(255,255,255,.045); color: var(--text); }
.nav-item.active { background: rgba(var(--accent-rgb), .13); color: var(--accent-l); }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.sidebar-footer { padding: var(--sp-3); border-top: 1px solid var(--border); }
.plan-badge {
  background: rgba(var(--accent-rgb), .09); border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: var(--r-2); padding: 10px 12px; margin-bottom: var(--sp-2);
}
.plan-badge-name { font-size: var(--fs-2xs); color: var(--accent-l); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.plan-badge-sub { font-size: var(--fs-2xs); color: var(--dim); margin-top: 2px; }

.main-content {
  margin-left: var(--sidebar-w); min-height: 100vh;
  padding: var(--sp-8) var(--sp-8) var(--sp-16);
}
@media (min-width: 1440px) {
  .main-content > .section { max-width: var(--content-max); margin-left: auto; margin-right: auto; }
}

/* Transición de vista: cada sección entra con rise+fade */
.section { display: none; }
.section.active { display: block; animation: nf-rise var(--dur-3) var(--ease-out) backwards; }


/* ── 06 · BOTONES ──────────────────────────────────────────────────────── */
.btn {
  padding: 8px 16px; border-radius: var(--r-2); font-size: var(--fs-md); font-weight: 600;
  cursor: pointer; border: none; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn-sm { padding: 5px 12px; font-size: var(--fs-sm); }

.btn-accent { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow-accent); }
.btn-accent:hover { background: var(--accent-l); transform: translateY(-1px); }
.btn-accent:active { transform: translateY(0) scale(.99); }

.btn-g { background: rgba(33,192,138,.12); color: var(--green); border: 1px solid rgba(33,192,138,.25); }
.btn-g:hover { background: rgba(33,192,138,.2); }
/* WhatsApp: verde de marca externo (fijo, no es color de NodeFlow) */
.btn-wa { background: #25d366; color: #fff; border: 1px solid #25d366; }
.btn-wa:hover { background: #1fb959; }
.btn-r { background: rgba(240,100,90,.1); color: var(--red); border: 1px solid rgba(240,100,90,.22); }
.btn-r:hover { background: rgba(240,100,90,.18); }
.btn-d { background: rgba(255,255,255,.05); color: var(--dim); border: 1px solid var(--border); }
.btn-d:hover { color: var(--text); border-color: var(--border-2); background: rgba(255,255,255,.07); }

.btn-subtab {
  padding: 7px 14px; border-radius: var(--r-1); font-size: var(--fs-sm); font-weight: 600;
  color: var(--dim); cursor: pointer; border: none; background: none; font-family: inherit;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.btn-subtab:hover { color: var(--text); }
.btn-subtab.active { background: var(--surface-3); color: var(--white); }


/* ── 07 · FORMULARIOS ──────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-5); }
.form-label {
  display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--dim);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px;
}
.form-input, .form-ctrl, .search-input,
.filter-bar select, .filter-bar input[type=date], .filter-bar input[type=text] {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: 10px 14px; color: var(--text);
  font-size: var(--fs-base); font-family: inherit; outline: none;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out);
}
.form-ctrl { padding: 9px 12px; font-size: var(--fs-md); }
.filter-bar select, .filter-bar input[type=date], .filter-bar input[type=text] { width: auto; padding: 7px 12px; font-size: var(--fs-md); }

.form-input:hover, .form-ctrl:hover, .search-input:hover, .login-input:hover { border-color: var(--border-2); }
.form-input:focus, .form-ctrl:focus, .search-input:focus, .login-input:focus,
.filter-bar select:focus, .filter-bar input:focus {
  border-color: var(--accent); background: rgba(255,255,255,.06);
  box-shadow: var(--glow-accent-soft);
}
::placeholder { color: var(--dim); opacity: 1; }

textarea.form-input { resize: vertical; min-height: 80px; }
select.form-input option, select.form-ctrl option, .filter-bar select option { background: var(--surface-2); }
select.form-input, select.form-ctrl { cursor: pointer; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-section-title {
  font-size: var(--fs-md); font-weight: 700; color: var(--accent-l);
  text-transform: uppercase; letter-spacing: .06em;
  margin: var(--sp-6) 0 var(--sp-3); padding-bottom: 6px; border-bottom: 1px solid var(--border-2);
}
.form-hint { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--dim); line-height: 1.5; }

/* Ajustes avanzados: plegado por defecto — el 90% no debe verlo ni asustarse.
   Se abre solo si el dueño (digital) quiere, o lo abre NodeFlow en el alta. */
.adv-settings { margin: var(--sp-6) 0 var(--sp-3); border: 1px solid var(--border-2); border-radius: var(--radius-md, 10px); background: var(--surface-2, rgba(255,255,255,.02)); }
.adv-summary { list-style: none; cursor: pointer; padding: var(--sp-4); display: block; user-select: none; }
.adv-summary::-webkit-details-marker { display: none; }
.adv-summary-t { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 700; color: var(--accent-l); text-transform: uppercase; letter-spacing: .06em; }
.adv-summary-t::before { content: "⚙"; font-size: 1.05em; }
.adv-summary-t::after { content: "▸ mostrar"; margin-left: auto; font-size: var(--fs-xs); font-weight: 600; color: var(--dim); text-transform: none; letter-spacing: 0; }
.adv-settings[open] .adv-summary-t::after { content: "▾ ocultar"; }
.adv-summary-s { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--dim); line-height: 1.55; font-weight: 400; }
.adv-summary:hover .adv-summary-t { filter: brightness(1.15); }
.adv-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-md, 10px); }
.adv-body { padding: 0 var(--sp-4) var(--sp-4); border-top: 1px solid var(--border-2); margin-top: 2px; padding-top: var(--sp-4); }
.adv-body .form-group:first-child { margin-top: 0; }

.search-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.search-bar .search-input { flex: 1; }
.filter-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); align-items: center; }

/* Toggle switch */
.toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background: rgba(255,255,255,.1); border-radius: var(--r-pill);
  transition: background var(--dur-2) var(--ease-out);
}
.slider:before {
  content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px;
  background: var(--dim); border-radius: 50%;
  transition: transform var(--dur-2) var(--ease-out-expo), background var(--dur-2) var(--ease-out);
}
input:checked + .slider { background: var(--green2); }
input:checked + .slider:before { transform: translateX(18px); background: #fff; }


/* ── 08 · TARJETAS & KPI ───────────────────────────────────────────────── */
.card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-4); padding: var(--sp-6); margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-2);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.card:hover { border-color: var(--border-2); }
.card-title {
  font-size: 15px; font-weight: 800; color: var(--white);
  margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2);
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-6);
}
.kpi {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: 18px 20px; box-shadow: var(--shadow-2);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.kpi:hover { transform: translateY(-2px); border-color: var(--border-2); }
.kpi-label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  color: var(--dim); text-transform: uppercase; margin-bottom: 6px;
}
.kpi-val {
  font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 600;
  letter-spacing: -.02em; color: var(--white); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi-sub { font-size: var(--fs-xs); color: var(--dim); margin-top: 4px; }

.auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.auto-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: 18px;
  transition: border-color var(--dur-2) var(--ease-out);
}
.auto-card:hover { border-color: var(--border-2); }
.auto-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.auto-name { font-size: var(--fs-base); font-weight: 700; margin-bottom: 4px; color: var(--white); }
.auto-desc { font-size: var(--fs-sm); color: var(--dim); line-height: 1.45; }
.auto-footer { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-3); padding-top: 10px; border-top: 1px solid var(--border); }
.auto-label { font-size: var(--fs-sm); color: var(--dim); }
.auto-hours input {
  width: 60px; background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px; color: var(--text); font-size: var(--fs-md); font-family: inherit;
}


/* ── 09 · TABLAS ───────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--r-2); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--surface-2); padding: 10px 14px; text-align: left;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em;
  color: var(--dim); text-transform: uppercase; white-space: nowrap;
}
tbody td { padding: 11px 14px; border-top: 1px solid var(--border); font-size: var(--fs-md); vertical-align: middle; }
tbody tr { transition: background var(--dur-1) var(--ease-out); }
tbody tr:hover { background: rgba(255,255,255,.025); }
.empty-row td { text-align: center; color: var(--dim); padding: var(--sp-8); font-style: italic; }


/* ── 10 · BADGES & CHIPS ───────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .3px;
}
.bg    { background: rgba(33,192,138,.12);  color: var(--green);    border: 1px solid rgba(33,192,138,.25); }
.br    { background: rgba(240,100,90,.12);  color: var(--red);      border: 1px solid rgba(240,100,90,.2); }
.by    { background: rgba(246,197,68,.12);  color: var(--yellow);   border: 1px solid rgba(246,197,68,.2); }
.bp    { background: rgba(var(--accent-rgb),.14); color: var(--accent-l); border: 1px solid rgba(var(--accent-rgb),.3); }
.bd    { background: rgba(255,255,255,.05); color: var(--dim);      border: 1px solid var(--border); }
.binfo { background: rgba(96,165,250,.12);  color: var(--blue);     border: 1px solid rgba(96,165,250,.25); }
.bc    { background: rgba(var(--cyan-rgb),.15); color: var(--cyan);  border: 1px solid rgba(var(--cyan-rgb),.3); }

.ai-status {
  background: rgba(33,192,138,.1); border: 1px solid rgba(33,192,138,.2);
  border-radius: 6px; padding: 4px 10px; font-size: var(--fs-xs);
  color: var(--green2); font-weight: 700;
}


/* ── 11 · TABS ─────────────────────────────────────────────────────────── */
.tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-2);
}
.tab-btn {
  padding: 7px 16px; border-radius: var(--r-1); font-size: var(--fs-md); font-weight: 600;
  color: var(--dim); cursor: pointer; border: none; background: none; font-family: inherit;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { background: var(--surface-3); color: var(--white); box-shadow: var(--shadow-1); }


/* ── 12 · MODAL & DRAWER ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(4,5,6,.65);
  backdrop-filter: blur(var(--blur-sm)); -webkit-backdrop-filter: blur(var(--blur-sm));
  z-index: var(--z-modal); display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5); animation: nf-fade var(--dur-2) var(--ease-out);
}
/* La capa de confirm/prompt se apila por encima del modal principal. */
#confirmOverlay { z-index: var(--z-confirm); }
.modal-box {
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r-4); padding: var(--sp-8);
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-4);
  animation: nf-pop var(--dur-3) var(--ease-out-expo) backwards;
}
.modal-title {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 560;
  letter-spacing: -.01em; color: var(--white); margin-bottom: var(--sp-5);
}
.modal-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-6); }

.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(440px, 92vw);
  background: var(--surface-2); border-left: 1px solid var(--border-2);
  z-index: var(--z-modal); padding: var(--sp-8); overflow-y: auto;
  box-shadow: var(--shadow-4);
  animation: nf-slide-in var(--dur-3) var(--ease-out-expo) backwards;
}
@keyframes nf-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }


/* ── 13 · TOAST ────────────────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r-2); padding: 12px 18px;
  font-size: var(--fs-md); font-weight: 600;
  transform: translateY(80px) scale(.97); opacity: 0;
  transition: transform var(--dur-3) var(--ease-out-expo), opacity var(--dur-2) var(--ease-out);
  z-index: var(--z-toast); pointer-events: none;
  box-shadow: var(--shadow-3); max-width: min(420px, calc(100vw - 48px));
}
#toast.show { transform: translateY(0) scale(1); opacity: 1; }
#toast.ok  { border-color: rgba(33,192,138,.4); color: var(--green2); }
#toast.err { border-color: rgba(240,100,90,.4); color: var(--red); }


/* ── 14 · TOOLTIP ──────────────────────────────────────────────────────── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px) scale(.97);
  background: var(--surface-3); border: 1px solid var(--border-2); color: var(--text);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.4;
  padding: 6px 10px; border-radius: var(--r-1); white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: var(--z-tooltip);
  box-shadow: var(--shadow-2);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0) scale(1);
  transition-delay: 350ms;
}


/* ── 15 · EMPTY STATES ─────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 56px 24px; color: var(--dim); }
.empty-state-icon {
  font-size: 30px; margin-bottom: var(--sp-4); width: 64px; height: 64px; line-height: 62px;
  border-radius: var(--r-4); background: rgba(var(--accent-rgb),.06);
  border: 1px solid rgba(var(--accent-rgb),.18); display: inline-block;
}
.empty-state-title { font-size: var(--fs-lg); font-weight: 800; color: var(--white); margin-bottom: 6px; }
.empty-state-text { font-size: var(--fs-md); line-height: 1.6; max-width: 380px; margin: 0 auto; }
.empty-state .btn { margin-top: 18px; }


/* ── 16 · SKELETONS ────────────────────────────────────────────────────── */
.skel-wrap { animation: nf-fade var(--dur-3) var(--ease-out); }
.skel { position: relative; overflow: hidden; background: rgba(255,255,255,.05); border-radius: 6px; display: block; }
.skel::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.09), transparent);
  animation: nf-shimmer 1.25s infinite;
}
@keyframes nf-shimmer { 100% { transform: translateX(100%); } }


/* ── 17 · FEED / TIMELINE ──────────────────────────────────────────────── */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; position: relative;
}
.activity-item + .activity-item { border-top: 1px solid var(--border); }
.activity-badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; margin-top: 2px; }
.activity-text { font-size: var(--fs-md); color: var(--text); }
.activity-time { font-size: var(--fs-xs); color: var(--dim); margin-top: 2px; }

/* Feed premium (dashboard): puntos conectados, eventos que respiran */
.nf-feed { display: flex; flex-direction: column; position: relative; }
.nf-feed-item { display: flex; gap: 14px; padding: 11px 0; position: relative; }
.nf-feed-dot {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0;
  background: var(--muted); position: relative; z-index: 1;
}
.nf-feed-item:not(:last-child) .nf-feed-dot::after {
  content: ''; position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  width: 1px; height: calc(100% + 14px); background: var(--border-2);
}
.nf-feed-dot.ok   { background: var(--green); }
.nf-feed-dot.brand{ background: var(--accent); }
.nf-feed-dot.info { background: var(--blue); }
.nf-feed-body { flex: 1; min-width: 0; }
.nf-feed-text { font-size: var(--fs-md); color: var(--text); }
.nf-feed-text strong { color: var(--white); }
.nf-feed-time { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }


/* ── 18 · DASHBOARD COPILOTO ───────────────────────────────────────────── */
/* Hero: el saludo + lo que NodeFlow ya hizo hoy por ti */
.nf-hero { margin-bottom: var(--sp-8); }
.nf-hero-greet {
  font-family: var(--font-display); font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 600; letter-spacing: -.03em; color: var(--white); line-height: 1.02;
}
.nf-hero-date { font-size: var(--fs-md); color: var(--dim); margin-top: 6px; }
.nf-hero-lead { font-size: var(--fs-lg); color: var(--text); margin-top: var(--sp-6); font-weight: 500; }

.nf-wins { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: var(--sp-4); }
.nf-win { display: flex; align-items: baseline; gap: 9px; }
.nf-win-check { color: var(--accent); font-weight: 800; font-size: var(--fs-base); }
.nf-win-num {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600;
  color: var(--white); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.nf-win-label { font-size: var(--fs-md); color: var(--dim); }
.nf-win.money .nf-win-num { color: var(--accent-l); }

/* Continúa donde lo dejaste */
.nf-continue {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: 12px 18px; margin-bottom: var(--sp-6);
  cursor: pointer; font-size: var(--fs-md); color: var(--text);
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.nf-continue:hover { border-color: var(--border-accent); transform: translateY(-1px); }
.nf-continue-kicker { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }
.nf-continue-arrow { color: var(--accent-l); }

/* Acciones rápidas — título como kicker editorial (mono + tick de acento) */
.nf-qa-title { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-4); }
.nf-qa-title::before { content: ""; width: 24px; height: 2px; background: var(--accent); border-radius: 2px; flex: none; }
.nf-qa { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-8); }
.nf-qa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: 9px 16px;
  font-size: var(--fs-md); font-weight: 600; color: var(--text);
  cursor: pointer; font-family: inherit;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.nf-qa-btn:hover { border-color: var(--border-accent); background: rgba(var(--accent-rgb),.06); transform: translateY(-1px); }
.nf-qa-btn .qa-ico { color: var(--accent-l); display: inline-flex; }

/* IA recomienda — proactivo, con acción de un clic */
.nf-reco {
  display: flex; align-items: flex-start; gap: 14px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.09), rgba(56,225,200,.04));
  border: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: var(--r-3); padding: 18px 20px; margin-bottom: var(--sp-3);
}
.nf-reco-spark {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--r-2);
  background: rgba(var(--accent-rgb),.14); color: var(--accent-l);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.nf-reco-body { flex: 1; min-width: 0; }
.nf-reco-text { font-size: var(--fs-base); color: var(--text); line-height: 1.5; }
.nf-reco-text strong { color: var(--white); }
.nf-reco-sub { font-size: var(--fs-sm); color: var(--dim); margin-top: 3px; }
.nf-reco .btn { flex-shrink: 0; align-self: center; }

/* Fila de pendientes (oportunidades / tareas / espera) */
.nf-todo-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-8); }
.nf-todo {
  flex: 1; min-width: 180px; display: flex; align-items: center; gap: 12px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: 14px 16px; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.nf-todo:hover { transform: translateY(-2px); border-color: var(--border-2); }
.nf-todo-num {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nf-todo-label { font-size: var(--fs-sm); color: var(--dim); line-height: 1.35; }


/* ── 19 · COMMAND PALETTE (Ctrl+K) ─────────────────────────────────────── */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: var(--z-cmdk);
  background: rgba(4,5,6,.55);
  backdrop-filter: blur(var(--blur-sm)); -webkit-backdrop-filter: blur(var(--blur-sm));
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh var(--sp-5) var(--sp-5);
}
.cmdk-overlay.open { display: flex; animation: nf-fade var(--dur-2) var(--ease-out); }
.cmdk {
  width: 100%; max-width: 560px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r-4); overflow: hidden;
  box-shadow: var(--shadow-4);
  animation: nf-pop var(--dur-3) var(--ease-out-expo) backwards;
}
.cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.cmdk-input-row .qa-ico { color: var(--muted); }
.cmdk-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--white); font-size: var(--fs-lg); font-family: inherit;
}
.cmdk-esc {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--muted);
  border: 1px solid var(--border-2); border-radius: 5px; padding: 2px 6px;
}
.cmdk-list { max-height: 46vh; overflow-y: auto; padding: 8px; }
.cmdk-group { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.cmdk-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--r-2); cursor: pointer;
  font-size: var(--fs-base); color: var(--text);
}
.cmdk-item .qa-ico { color: var(--dim); display: inline-flex; width: 18px; }
.cmdk-item.sel { background: rgba(var(--accent-rgb),.12); color: var(--accent-l); }
.cmdk-item.sel .qa-ico { color: var(--accent-l); }
.cmdk-item-hint { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.cmdk-empty { padding: 28px; text-align: center; color: var(--dim); font-size: var(--fs-md); }

/* Botón lanzador en sidebar */
.cmdk-launch {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: 8px 12px; margin-bottom: var(--sp-2);
  color: var(--dim); font-size: var(--fs-sm); font-family: inherit; cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.cmdk-launch:hover { border-color: var(--border-2); color: var(--text); }
.cmdk-launch kbd {
  margin-left: auto; font-family: inherit; font-size: var(--fs-2xs); font-weight: 700;
  border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 5px; color: var(--muted);
}


/* ── 20 · GRÁFICOS (barras) ────────────────────────────────────────────── */
.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding-top: 8px; }
/* height:100% + justify-content:flex-end: sin ellos, la altura en % de .bar
   se resolvía contra un contenedor auto y TODAS las barras salían planas
   aunque hubiera datos (bug real 2026-07-03). */
.bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.bar {
  width: 100%; background: rgba(var(--accent-rgb),.35); border-radius: 4px 4px 0 0;
  min-height: 4px; cursor: default;
  transform-origin: bottom; animation: nf-grow var(--dur-4) var(--ease-out-expo) backwards;
  transition: background var(--dur-2) var(--ease-out);
}
.bar:hover { background: rgba(var(--accent-rgb),.7); }
.bar-label { font-size: var(--fs-2xs); color: var(--dim); }
.bar-val { font-size: var(--fs-2xs); color: var(--dim); min-height: 14px; }
@keyframes nf-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }


/* ── 21 · COMPONENTES DE DOMINIO ───────────────────────────────────────── */
/* Llamadas */
.call-filter-btn {
  padding: 6px 14px; border-radius: var(--r-1); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--dim); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.call-filter-btn.active, .call-filter-btn:hover {
  background: rgba(var(--accent-rgb),.14); border-color: rgba(var(--accent-rgb),.4); color: var(--accent-l);
}
.call-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-3);
  margin-bottom: 10px; overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-out);
}
.call-card:hover { border-color: rgba(var(--accent-rgb),.3); }
.call-card-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; }
.call-outcome { padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0; }
.call-outcome.booked    { background: rgba(33,192,138,.15); color: var(--green); }
.call-outcome.info      { background: rgba(214,255,92,.15); color: var(--accent-l); }
.call-outcome.abandoned { background: rgba(240,100,90,.12); color: var(--red); }
.call-outcome.unknown   { background: rgba(255,255,255,.07); color: var(--dim); }
.call-meta { flex: 1; min-width: 0; }
.call-date { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.call-detail { font-size: var(--fs-xs); color: var(--dim); margin-top: 2px; }
.call-chevron { color: var(--dim); font-size: 16px; transition: transform var(--dur-3) var(--ease-out); flex-shrink: 0; }
.call-card.open .call-chevron { transform: rotate(180deg); }
.call-transcript { display: none; padding: 0 16px 16px; border-top: 1px solid var(--border); }
.call-card.open .call-transcript { display: block; animation: nf-fade var(--dur-2) var(--ease-out); }
.apt-box { background: rgba(33,192,138,.08); border: 1px solid rgba(33,192,138,.2); border-radius: var(--r-2); padding: 12px 14px; margin-bottom: 12px; }
.apt-box-title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green); margin-bottom: 6px; }
.apt-detail { font-size: var(--fs-md); color: var(--text); margin-bottom: 3px; }

/* Transcript */
.transcript-list { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.transcript-row { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: var(--r-2); border: 1px solid transparent; }
.transcript-row.ai   { background: rgba(var(--accent-rgb),.08); border-color: rgba(var(--accent-rgb),.16); }
.transcript-row.user { background: var(--surface-1); border-color: var(--border); }
.transcript-role { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.transcript-text { font-size: var(--fs-md); line-height: 1.5; color: var(--text); }

/* Perfil de contacto */
.profile-header { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.profile-avatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.profile-name { font-size: var(--fs-xl); font-weight: 700; margin-bottom: 2px; color: var(--white); }
.profile-meta { font-size: var(--fs-md); color: var(--dim); }
.profile-section-title {
  font-size: var(--fs-xs); font-weight: 700; color: var(--dim); text-transform: uppercase;
  letter-spacing: .06em; margin: var(--sp-5) 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

/* Fechas críticas */
.crit-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-2); margin-bottom: 8px; }
.crit-name { font-size: var(--fs-md); font-weight: 600; }
.crit-meta { font-size: var(--fs-xs); color: var(--dim); margin-top: 3px; }
.crit-date { font-size: var(--fs-sm); font-weight: 700; text-align: right; white-space: nowrap; }
.crit-days { font-size: var(--fs-xs); color: var(--dim); margin-top: 2px; text-align: right; }

/* FAQ */
.faq-group { margin-bottom: var(--sp-6); }
.faq-group-title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-l); margin-bottom: 10px; padding-left: 4px; }
.faq-item { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-2); margin-bottom: 8px; overflow: hidden; transition: border-color var(--dur-2) var(--ease-out); }
.faq-item:hover { border-color: rgba(var(--accent-rgb),.3); }
.faq-q { width: 100%; background: none; border: none; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; text-align: left; color: var(--text); font-size: var(--fs-base); font-weight: 600; font-family: inherit; }
.faq-icon { color: var(--accent-l); font-size: 18px; transition: transform var(--dur-3) var(--ease-out); flex-shrink: 0; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease-out), padding var(--dur-3) var(--ease-out); }
.faq-item.open .faq-a { max-height: 600px; padding: 0 18px 16px; }
.faq-a p { font-size: var(--fs-md); color: var(--dim); line-height: 1.7; margin: 0 0 8px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a code { font-family: ui-monospace, monospace; font-size: var(--fs-md); color: var(--accent-l); background: rgba(var(--accent-rgb),.1); padding: 2px 6px; border-radius: 4px; }
.faq-a ul { padding-left: 18px; color: var(--dim); font-size: var(--fs-md); line-height: 1.8; margin: 4px 0; }

/* Editor servicios+precios */
.svc-head { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.8fr 36px; gap: 8px; margin-bottom: 6px; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.svc-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.8fr 36px; gap: 8px; margin-bottom: 8px; align-items: center; }
.svc-row .form-input { padding: 9px 12px; }
.svc-del { padding: 0; height: 38px; display: flex; align-items: center; justify-content: center; }

/* Setup checklist */
.setup-step { padding: 8px 12px; border-radius: var(--r-1); font-size: var(--fs-md); color: var(--text); transition: background .2s ease, color .2s ease; }
.setup-step.done { color: var(--green); opacity: 1; font-weight: 600; background: rgba(var(--green-rgb), .12); box-shadow: inset 3px 0 0 var(--green); border-radius: 0 var(--r-1) var(--r-1) 0; }
.setup-step.done strong { color: var(--green); }

/* Recordatorios */
.reminder-group { margin-bottom: var(--sp-4); }

/* Clientes — grid de tarjetas */
.nf-client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.nf-client {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.nf-client:hover { transform: translateY(-2px); border-color: var(--border-accent); }
.nf-client-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nf-client-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(var(--accent-rgb), .14); color: var(--accent-l);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
}
.nf-client-name { font-size: var(--fs-base); font-weight: 700; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-client-sub { font-size: var(--fs-sm); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-client-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.nf-client-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  border-top: 1px solid var(--border); padding-top: 10px; margin-top: auto;
  font-size: var(--fs-sm); color: var(--dim);
}

/* Citas — vista semana */
.nf-week-scroll { overflow-x: auto; padding-bottom: 4px; }
.nf-week { display: grid; grid-template-columns: repeat(7, minmax(122px, 1fr)); gap: 8px; min-width: 900px; }
.nf-week-day {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: 10px; min-height: 150px; display: flex; flex-direction: column; gap: 8px;
}
.nf-week-day.today { border-color: var(--border-accent); background: rgba(var(--accent-rgb), .04); }
.nf-week-head {
  font-size: var(--fs-xs); font-weight: 700; color: var(--dim);
  text-transform: uppercase; letter-spacing: .05em;
  display: flex; justify-content: space-between; align-items: baseline;
}
.nf-week-head .num { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--white); font-weight: 600; }
.nf-week-day.today .nf-week-head, .nf-week-day.today .nf-week-head .num { color: var(--accent-l); }
.nf-apt {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-2);
  padding: 8px 10px; cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.nf-apt:hover { border-color: var(--border-accent); transform: translateY(-1px); }
.nf-apt-time { font-size: var(--fs-xs); font-weight: 700; color: var(--accent-l); }
.nf-apt-name { font-size: var(--fs-sm); font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-apt-svc { font-size: var(--fs-2xs); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-apt.pending { border-style: dashed; }
.nf-apt.cancelled { opacity: .45; }
.nf-apt.cancelled .nf-apt-time { color: var(--red); text-decoration: line-through; }
.nf-apt.completed { opacity: .72; }
.nf-apt.completed .nf-apt-time { color: var(--green); }
.nf-apt.completed .nf-apt-time::after { content: ' ✓'; }
.nf-apt.noshow { opacity: .55; }
.nf-apt.noshow .nf-apt-time { color: var(--red); text-decoration: line-through; }

/* Confirma la asistencia — citas pasadas sin resolver */
.nf-review { border: 1px solid rgba(var(--accent-rgb), .4); margin-bottom: 16px; }
.nf-review-title { font-weight: 800; font-size: var(--fs-md); color: var(--accent-l); margin-bottom: 4px; }
.nf-review-sub { font-size: var(--fs-xs); color: var(--dim); line-height: 1.6; margin-bottom: 12px; }
.nf-review-row { display: grid; grid-template-columns: minmax(110px,auto) 1fr auto; gap: 12px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--border); }
.nf-review-when { font-size: var(--fs-xs); color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nf-review-who { min-width: 0; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-review-who span { color: var(--dim); font-size: var(--fs-xs); }
.nf-review-actions { display: flex; gap: 6px; white-space: nowrap; }
.nf-review-more { font-size: var(--fs-xs); color: var(--dim); padding-top: 10px; }
/* Eventos del Google Calendar del negocio: solo lectura, azul para no
   confundirlos con las citas de NodeFlow (lima). No editables. */
.nf-apt.gcal { cursor: default; background: rgba(90,150,255,.09); border-color: rgba(90,150,255,.32); border-style: dashed; }
.nf-apt.gcal:hover { transform: none; border-color: rgba(90,150,255,.5); }
.nf-apt.gcal .nf-apt-time { color: #7ea8ff; }
.nf-apt.gcal .nf-apt-svc { color: #7ea8ff; opacity: .85; }
.nf-gcal-legend { font-size: var(--fs-2xs); color: #7ea8ff; margin-left: 4px; white-space: nowrap; }

/* Previsualización del aviso automático bajo un campo-fecha de la ficha */
.ent-aviso-prev { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--dim);
  background: rgba(var(--accent-rgb), .07); border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0; padding: 7px 10px; }
.ent-aviso-prev strong { color: var(--accent-l); }

/* Línea "próximo aviso" en la tarjeta de ficha (urgencia por color) */
.ent-next-aviso { font-size: 12px; font-weight: 700; color: var(--accent-l);
  background: rgba(var(--accent-rgb), .10); border-radius: 6px; padding: 5px 9px; margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-next-aviso.soon { color: #f5c542; background: rgba(245, 197, 66, .12); }
.ent-next-aviso.urgent { color: var(--red); background: rgba(240, 100, 90, .12); }

/* Editor de campos: el negocio diseña su propia ficha */
.fld-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface-2); }
.fld-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); cursor: pointer; }
.fld-check input { width: auto; margin: 0; }
.nf-week-empty { font-size: var(--fs-2xs); color: var(--muted); text-align: center; margin: auto; }
.nf-week-add {
  background: none; border: none; color: var(--muted); font-size: 15px; font-weight: 700;
  cursor: pointer; padding: 0 3px; border-radius: 4px; line-height: 1; opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.nf-week-day:hover .nf-week-add, .nf-week-add:focus-visible { opacity: 1; }
.nf-week-add:hover { color: var(--accent-l); }
@media (hover: none) { .nf-week-add { opacity: .55; } }
.nf-week-empty-add {
  background: none; border: 1px dashed var(--border); border-radius: var(--r-2);
  color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; font-family: inherit;
  cursor: pointer; padding: 8px 6px; margin: auto 0;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.nf-week-empty-add:hover { color: var(--accent-l); border-color: var(--border-accent); }

/* Ajustes: ancho cómodo */
#sec-asistente, #sec-integraciones { max-width: 980px; margin-left: auto; margin-right: auto; }


/* ── 22 · MOTION UTILITIES ─────────────────────────────────────────────── */
@keyframes nf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nf-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nf-pop  { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Stagger: aplicar .nf-stagger al contenedor; los hijos entran en cascada */
.nf-stagger > * { animation: nf-rise var(--dur-3) var(--ease-out) backwards; }
.nf-stagger > *:nth-child(1) { animation-delay: 40ms; }
.nf-stagger > *:nth-child(2) { animation-delay: 90ms; }
.nf-stagger > *:nth-child(3) { animation-delay: 140ms; }
.nf-stagger > *:nth-child(4) { animation-delay: 190ms; }
.nf-stagger > *:nth-child(5) { animation-delay: 240ms; }
.nf-stagger > *:nth-child(6) { animation-delay: 290ms; }
.nf-stagger > *:nth-child(7) { animation-delay: 340ms; }
.nf-stagger > *:nth-child(8) { animation-delay: 390ms; }
.nf-stagger > *:nth-child(n+9) { animation-delay: 430ms; }

/* Pulso sutil para "en vivo" (legacy — la firma actual es .nf-wave) */
.nf-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 6px; animation: nf-pulse 2.2s var(--ease-in-out) infinite; }
@keyframes nf-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(33,192,138,.45); } 50% { box-shadow: 0 0 0 5px rgba(33,192,138,0); } }

/* ── FIRMA DE MARCA: la onda de voz ─────────────────────────────────
   NodeFlow ES voz. La onda sustituye a spinners genéricos y puntos
   "en vivo": cada momento de espera o actividad es un momento de marca.
   Color: currentColor (hereda del contexto); lima por defecto. */
.nf-wave { display: inline-flex; align-items: center; gap: 2px; height: 14px; color: var(--accent); vertical-align: middle; }
.nf-wave i {
  width: 3px; border-radius: 2px; background: currentColor; height: 30%;
  animation: nf-eq 1.15s var(--ease-in-out) infinite;
}
.nf-wave i:nth-child(1) { animation-delay: -.9s; }
.nf-wave i:nth-child(2) { animation-delay: -.6s; }
.nf-wave i:nth-child(3) { animation-delay: -.3s; }
.nf-wave i:nth-child(4) { animation-delay: -.75s; }
.nf-wave i:nth-child(5) { animation-delay: -.45s; }
@keyframes nf-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }

.nf-wave--sm { height: 11px; gap: 1.5px; margin-right: 7px; }
.nf-wave--sm i { width: 2.5px; }
.nf-wave--lg { height: 30px; gap: 3px; }
.nf-wave--lg i { width: 4.5px; border-radius: 3px; }

/* Reduced motion: onda estática pero reconocible */
@media (prefers-reduced-motion: reduce) {
  .nf-wave i { animation: none !important; }
  .nf-wave i:nth-child(1) { height: 45%; }
  .nf-wave i:nth-child(2) { height: 85%; }
  .nf-wave i:nth-child(3) { height: 60%; }
  .nf-wave i:nth-child(4) { height: 100%; }
  .nf-wave i:nth-child(5) { height: 50%; }
}


/* ── 23 · RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .hamburger { display: flex; }
  .sidebar { left: calc(-1 * var(--sidebar-w)); transition: left var(--dur-3) var(--ease-out-expo); }
  .sidebar.open { left: 0; box-shadow: var(--shadow-4); }
  .main-content { margin-left: 0; padding: var(--sp-4); padding-top: 60px; padding-bottom: var(--sp-12); }
  .two-col, .form-row, .auto-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-head { display: none; }
  .svc-row { grid-template-columns: 1fr 1fr 36px; }
  .svc-row .svc-name, .svc-row .svc-notes { grid-column: 1 / -1; }
  .nf-hero-greet { font-size: var(--fs-3xl); }
  .nf-wins { gap: 8px 20px; }
  .modal-box, .cmdk { max-width: 100%; }
  .cmdk-overlay { padding: 8vh var(--sp-3) var(--sp-3); }
  .section-title, .section-header h2 { font-size: var(--fs-2xl); }
}


/* ── 24 · REDUCED MOTION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .skel::after { animation: none; }
  .nf-live-dot { animation: none; }
  .kpi:hover, .btn-accent:hover, .nf-qa-btn:hover, .nf-todo:hover, .nf-continue:hover { transform: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   NodeFlow Design System · v2 · CAPA PROFESIONAL (completa el sistema)
   Aditivo sobre v1.0 — no toca el contrato de clases existente. Rellena los
   huecos (skeletons, tabla, charts, chips, estados) y anade utilidades para
   migrar los estilos inline de forma mecanica y consistente.
   Estados canonicos de todo control interactivo: default · hover · focus ·
   active · disabled · loading · error. Foco SIEMPRE visible por teclado.
   ════════════════════════════════════════════════════════════════════════ */

/* -- 20 · FOCUS RING (accesibilidad, WCAG) ------------------------------- */
:where(a, button, input, select, textarea, [tabindex], .btn):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
:where(button, .btn, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* -- 21 · ESTADOS DE CONTROL (loading / error / disabled) --------------- */
.is-disabled, [aria-disabled="true"] { opacity: .45; pointer-events: none; }
.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--on-accent); animation: nf-spin .6s linear infinite;
}
.btn-d.is-loading::after, .btn-r.is-loading::after, .btn-g.is-loading::after { color: var(--text); }
@keyframes nf-spin { to { transform: rotate(360deg); } }

/* -- 22 · INPUTS: placeholder legible, error, ayuda --------------------- */
.form-input::placeholder, .form-ctrl::placeholder, .search-input::placeholder,
.nf-input::placeholder, .nf-select::placeholder { color: var(--dim); opacity: 1; }
.form-input:disabled, .form-ctrl:disabled, .nf-input:disabled { opacity: .5; cursor: not-allowed; }
.is-error, .form-input.is-error, .nf-input.is-error, .nf-select.is-error {
  border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(240,100,90,.14);
}
.field-help  { font-size: var(--fs-xs); color: var(--dim); margin-top: var(--sp-1); }
.field-error { font-size: var(--fs-xs); color: var(--red); margin-top: var(--sp-1); display: flex; gap: 4px; align-items: center; }

/* -- 23 · SELECT con chevron propio ------------------------------------- */
.nf-select-wrap { position: relative; display: block; }
.nf-select-wrap::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.nf-select {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-2); padding: 9px 34px 9px 12px; font: inherit; font-size: var(--fs-md);
  cursor: pointer; transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.nf-select:hover { border-color: var(--border-2); }
.nf-select:focus { border-color: var(--accent); box-shadow: var(--glow-accent-soft); outline: none; }

/* -- 24 · CHIPS / TAGS -------------------------------------------------- */
.chip, .tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.05); color: var(--dim); border: 1px solid var(--border);
}
.chip-accent { color: var(--accent-l); background: rgba(var(--accent-rgb),.1); border-color: var(--border-accent); }
.chip-green  { color: var(--green);  background: rgba(33,192,138,.12);  border-color: rgba(33,192,138,.28); }
.chip-red    { color: var(--red);    background: rgba(240,100,90,.1);   border-color: rgba(240,100,90,.24); }
.chip-yellow { color: var(--yellow); background: rgba(246,197,68,.12);  border-color: rgba(246,197,68,.28); }
.chip-solid  { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 800; }
.chip-solid-warn { color: var(--on-accent); background: var(--yellow); border-color: var(--yellow); font-weight: 800; }
.chip-sm { font-size: var(--fs-2xs); padding: 2px 7px; }
.chip .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* -- 25 · SKELETONS ----------------------------------------------------- */
.skeleton {
  background: linear-gradient(100deg,
    var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
  background-size: 200% 100%; border-radius: var(--r-2);
  animation: nf-shimmer 1.3s var(--ease-in-out) infinite;
}
.skel-line   { height: 12px; margin-bottom: var(--sp-2); border-radius: var(--r-1); }
.skel-line.sm { height: 9px; } .skel-line.lg { height: 18px; }
.skel-line.w-40 { width: 40%; } .skel-line.w-60 { width: 60%; } .skel-line.w-80 { width: 80%; }
.skel-circle { border-radius: 50%; width: 40px; height: 40px; }
.skel-card   { height: 96px; border-radius: var(--r-4); }
.skel-btn    { height: 34px; width: 120px; border-radius: var(--r-2); }
@keyframes nf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: .8; } }

/* -- 26 · TABLA (cabecera, hover, numerico, orden) --------------------- */
.table-wrap table, table.nf-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.table-wrap thead th, .nf-table thead th {
  text-align: left; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--dim); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border); background: var(--bg-2);
  position: sticky; top: 0; z-index: 1;
}
.table-wrap tbody td, .nf-table tbody td {
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); color: var(--text);
  vertical-align: middle;
}
.table-wrap tbody tr:hover, .nf-table tbody tr:hover { background: rgba(255,255,255,.025); }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.nf-table .num, .table-wrap .num { text-align: right; font-variant-numeric: tabular-nums; }
.nf-table th.sortable { cursor: pointer; user-select: none; }
.nf-table th.sortable:hover { color: var(--text); }

/* -- 27 · CHARTS (barras, sparkline, ejes, leyenda) -------------------- */
.chart { position: relative; }
.chart-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(
  to top, transparent, transparent calc(25% - 1px), var(--border) 25%); pointer-events: none; }
.chart-bars { display: flex; align-items: flex-end; gap: var(--sp-2); height: 160px; position: relative; }
.chart-bar {
  flex: 1; min-width: 6px; border-radius: var(--r-1) var(--r-1) 0 0;
  background: var(--accent);
  transition: filter var(--dur-1); align-self: flex-end;
}
.chart-bar:hover { filter: brightness(1.15); }
.chart-bar.muted { background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); }
.chart-axis { display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--muted); margin-top: var(--sp-2); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--dim); }
.chart-legend .lg-key { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .lg-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.spark { display: block; width: 100%; height: 40px; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark .area { fill: rgba(var(--accent-rgb),.12); stroke: none; }

/* -- 28 · TOAST (variantes semanticas) --------------------------------- */
.toast-success { border-left: 3px solid var(--green); }
.toast-error   { border-left: 3px solid var(--red); }
.toast-info    { border-left: 3px solid var(--blue); }

/* -- 29 · SEGMENTED / TABS (rigor de estado) --------------------------- */
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: 3px; gap: 2px; }
.segmented button { border: 0; background: transparent; color: var(--dim); font: inherit;
  font-size: var(--fs-sm); font-weight: 600; padding: 5px 12px; border-radius: var(--r-1); cursor: pointer;
  transition: color var(--dur-1), background var(--dur-1); }
.segmented button:hover { color: var(--text); }
.segmented button[aria-selected="true"], .segmented button.active {
  background: var(--surface-3); color: var(--white); }

/* -- 29b · PROGRESS BAR ------------------------------------------------- */
.progress { background: var(--surface-2); border-radius: var(--r-pill); height: 8px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width var(--dur-3) var(--ease-out); }

/* -- 29c · CALLOUT / ALERT + tarjeta semantica ------------------------- */
.callout { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--r-2); border: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--dim); line-height: 1.6; }
.callout--accent { background: rgba(var(--accent-rgb),.08); border-color: var(--border-accent); }
.callout--warn   { background: rgba(var(--yellow-rgb),.07); border-color: rgba(var(--yellow-rgb),.30); }
.callout--error  { color: var(--red); background: rgba(240,100,90,.1); border-color: rgba(240,100,90,.24); }
.callout--block  { display: block; }                 /* variante solo-texto (sin fila) */
.card--warn { background: rgba(var(--yellow-rgb),.04); border-color: rgba(var(--yellow-rgb),.30); }

/* -- 29d · PASOS numerados + code-chip (guias) ------------------------- */
.step-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); }
.step-num { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); font-size: var(--fs-xs); font-weight: 700; }
.step-num--done { background: rgba(var(--cyan-rgb),.20); color: var(--green); }
.code-chip { display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 7px 12px; border-radius: var(--r-1); border: 1px solid var(--border); background: rgba(255,255,255,.03); }
.code-chip__lbl  { font-size: 9px; font-weight: 700; text-transform: uppercase; white-space: nowrap; color: var(--dim); }
.code-chip code  { font-size: var(--fs-md); font-weight: 700; letter-spacing: .02em; white-space: nowrap; color: var(--dim); }
.code-chip__copy { background: none; border: none; cursor: pointer; padding: 0 0 0 2px; font-size: var(--fs-md); flex-shrink: 0; color: var(--dim); }
.code-chip--on   { background: rgba(var(--cyan-rgb),.07); border-color: rgba(var(--cyan-rgb),.25); }
.code-chip--on code { color: var(--green2); }
.code-chip--on .code-chip__lbl, .code-chip--on .code-chip__copy { color: var(--green); }
.code-inline { background: rgba(0,0,0,.3); padding: 1px 4px; border-radius: 3px; }

/* -- 29e · desvio: tipo de desvio -------------------------------------- */
.dv-type { border: 1px solid var(--border); border-radius: var(--r-3); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.dv-type--rec { border-color: rgba(var(--cyan-rgb),.25); background: rgba(var(--cyan-rgb),.04); }

/* -- 30 · UTILIDADES (migrar estilos inline de forma mecanica) --------- */
.u-flex{display:flex}.u-inline-flex{display:inline-flex}.u-grid{display:grid}.u-block{display:block}.u-hidden{display:none}
.u-items-center{align-items:center}.u-items-start{align-items:flex-start}.u-items-end{align-items:flex-end}
.u-justify-between{justify-content:space-between}.u-justify-center{justify-content:center}.u-justify-end{justify-content:flex-end}
.u-col{flex-direction:column}.u-wrap{flex-wrap:wrap}.u-flex-1{flex:1}.u-grow{flex-grow:1}
.u-gap-1{gap:var(--sp-1)}.u-gap-2{gap:var(--sp-2)}.u-gap-3{gap:var(--sp-3)}.u-gap-4{gap:var(--sp-4)}.u-gap-6{gap:var(--sp-6)}
.u-mt-1{margin-top:var(--sp-1)}.u-mt-2{margin-top:var(--sp-2)}.u-mt-3{margin-top:var(--sp-3)}.u-mt-4{margin-top:var(--sp-4)}.u-mt-6{margin-top:var(--sp-6)}
.u-mb-1{margin-bottom:var(--sp-1)}.u-mb-2{margin-bottom:var(--sp-2)}.u-mb-3{margin-bottom:var(--sp-3)}.u-mb-4{margin-bottom:var(--sp-4)}.u-mb-6{margin-bottom:var(--sp-6)}
.u-p-2{padding:var(--sp-2)}.u-p-3{padding:var(--sp-3)}.u-p-4{padding:var(--sp-4)}.u-p-6{padding:var(--sp-6)}
.u-text-2xs{font-size:var(--fs-2xs)}.u-text-xs{font-size:var(--fs-xs)}.u-text-sm{font-size:var(--fs-sm)}.u-text-md{font-size:var(--fs-md)}.u-text-base{font-size:var(--fs-base)}.u-text-lg{font-size:var(--fs-lg)}.u-text-xl{font-size:var(--fs-xl)}.u-text-2xl{font-size:var(--fs-2xl)}.u-text-3xl{font-size:var(--fs-3xl)}
.u-green{color:var(--green)}.u-red{color:var(--red)}.u-yellow{color:var(--yellow)}.u-blue{color:var(--blue)}
.u-display{font-family:var(--font-display)}.u-bold{font-weight:700}.u-black{font-weight:900}
.u-white{color:var(--white)}.u-text{color:var(--text)}.u-dim{color:var(--dim)}.u-muted{color:var(--muted)}.u-accent{color:var(--accent-l)}
.u-tabular{font-variant-numeric:tabular-nums}.u-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.u-center{text-align:center}
.u-surface{background:var(--surface-1)}.u-surface-2{background:var(--surface-2)}
.u-border{border:1px solid var(--border)}.u-border-t{border-top:1px solid var(--border)}
.u-round-2{border-radius:var(--r-2)}.u-round-3{border-radius:var(--r-3)}.u-round-4{border-radius:var(--r-4)}.u-pill{border-radius:var(--r-pill)}
.u-shadow-2{box-shadow:var(--shadow-2)}.u-glow{box-shadow:var(--glow-accent)}.u-full{width:100%}
.u-border-accent{border-color:var(--border-accent)}.u-pointer{cursor:pointer}.u-dim-2{opacity:.6}.u-py-2{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.u-mx-auto{margin-left:auto;margin-right:auto}.u-maxw-form{max-width:860px}.u-nowrap{white-space:nowrap}.u-normal{font-weight:400}
.u-mt-5{margin-top:var(--sp-5)}.u-mb-5{margin-bottom:var(--sp-5)}.u-underline{text-decoration:underline}.u-no-underline{text-decoration:none}

/* ══ Capa EDITORIAL (2026-07-05) — misma jerarquía/arquitectura que la landing ══
   Marcadores de sección tipo revista (mono + tick de acento + hairline), reglas
   finas y etiquetas mono. Sustituyen al lenguaje "pill glow / tarjeta redondeada".
   Se aplican por vista según se migran; conviven con lo existente. */
.kicker{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-5)}
.kicker::before{content:"";width:24px;height:2px;background:var(--accent);border-radius:2px;flex:none}
.kicker .n{color:var(--accent);font-variant-numeric:tabular-nums}
.kicker--fill::after{content:"";flex:1;height:1px;background:var(--border)}
.label-mono{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.u-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.rule{height:1px;background:var(--border);border:none;margin:0}
/* Card editorial: plano, hairline, sin sombra/glow (opt-in por vista) */
.card--flat{background:none;border:1px solid var(--border);box-shadow:none;border-radius:var(--r-3)}
.card--flat:hover{border-color:var(--border-2)}
.u-link{color:var(--accent-l);cursor:pointer;text-decoration:underline}.u-cyan{color:var(--cyan)}.u-mono{font-family:monospace}

/* ── 20 · INFORMES (panel analítico) ─────────────────────────────────────── */
/* Selector de rango tipo segmented control */
.rpt-range{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-3);padding:3px;gap:2px}
.rpt-range button{appearance:none;border:none;background:none;color:var(--dim);font:inherit;font-size:var(--fs-sm);font-weight:700;padding:7px 14px;border-radius:var(--r-2);cursor:pointer;transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out);white-space:nowrap}
.rpt-range button:hover{color:var(--text)}
.rpt-range button.on{background:var(--accent);color:var(--on-accent);box-shadow:var(--glow-accent)}

/* KPI con delta + sparkline */
.rpt-kpi{position:relative;overflow:hidden}
.rpt-kpi .rpt-kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.rpt-delta{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-xs);font-weight:800;font-variant-numeric:tabular-nums;padding:2px 7px;border-radius:var(--r-pill);white-space:nowrap}
.rpt-delta.up{color:var(--green2);background:rgba(25,184,148,.13)}
.rpt-delta.down{color:#ff6b6b;background:rgba(255,107,107,.12)}
.rpt-delta.flat{color:var(--dim);background:rgba(255,255,255,.05)}
.rpt-spark{display:block;margin-top:10px;width:100%;height:32px;overflow:visible}
.rpt-kpi-cmp{font-size:var(--fs-2xs);color:var(--muted);margin-top:6px}

/* Insight line (el toque del manifiesto) */
.rpt-insight{display:flex;align-items:flex-start;gap:8px;margin-top:14px;padding:10px 12px;background:rgba(var(--accent-rgb),.06);border:1px solid rgba(var(--accent-rgb),.16);border-radius:var(--r-3);font-size:var(--fs-sm);color:var(--text);line-height:1.45}
.rpt-insight .ic{flex:0 0 auto;font-size:14px;line-height:1.3}

/* Gráficos SVG comunes */
.rpt-chart{width:100%;height:auto;display:block;font-variant-numeric:tabular-nums}
.rpt-chart .grid{stroke:var(--border);stroke-width:1}
.rpt-chart .axis-lbl{fill:var(--muted);font-size:10px}
.rpt-tooltip{position:absolute;pointer-events:none;background:var(--surface-3);border:1px solid var(--border-2);border-radius:var(--r-3);padding:7px 10px;font-size:var(--fs-sm);color:var(--white);box-shadow:var(--shadow-3);white-space:nowrap;z-index:20;transform:translate(-50%,-115%);opacity:0;transition:opacity .1s;font-variant-numeric:tabular-nums}
.rpt-tooltip.show{opacity:1}
.rpt-tooltip b{color:var(--accent-l)}

/* Embudo horizontal */
.rpt-funnel{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.rpt-funnel-row{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:12px}
.rpt-funnel-lbl{font-size:var(--fs-sm);color:var(--dim);font-weight:600}
.rpt-funnel-track{position:relative;height:34px;background:rgba(255,255,255,.04);border-radius:var(--r-3);overflow:hidden}
.rpt-funnel-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--accent),var(--accent-l));border-radius:var(--r-3);display:flex;align-items:center;padding-left:12px;min-width:34px;transition:width .5s var(--ease-out)}
.rpt-funnel-fill .v{font-size:var(--fs-md);font-weight:800;color:var(--on-accent);font-variant-numeric:tabular-nums}
.rpt-funnel-side{text-align:right;font-size:var(--fs-xs);min-width:78px}
.rpt-funnel-side .pct{font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.rpt-funnel-side .drop{color:#ff8080;font-variant-numeric:tabular-nums}

/* Money story — barra segmentada + leyenda */
.rpt-money-bar{display:flex;height:38px;border-radius:var(--r-3);overflow:hidden;background:rgba(255,255,255,.04);margin:4px 0 14px}
.rpt-money-seg{display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:800;color:var(--on-accent);min-width:2px;transition:flex-grow .5s var(--ease-out);font-variant-numeric:tabular-nums}
.rpt-legend{display:flex;flex-direction:column;gap:8px}
.rpt-legend-row{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm)}
.rpt-legend-row .dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.rpt-legend-row .nm{color:var(--dim);flex:1}
.rpt-legend-row .amt{font-weight:800;color:var(--white);font-variant-numeric:tabular-nums}

/* Hora punta (heat bars) */
.rpt-hours{display:flex;align-items:flex-end;gap:3px;height:90px;padding-top:6px}
.rpt-hour{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.rpt-hour .hbar{width:100%;background:rgba(var(--accent-rgb),.28);border-radius:2px 2px 0 0;min-height:2px;transition:background var(--dur-2)}
.rpt-hour:hover .hbar{background:var(--accent)}
.rpt-hour .hlbl{font-size:9px;color:var(--muted)}

/* Servicios */
.rpt-svc{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.rpt-svc-row{display:grid;grid-template-columns:1fr 44px;align-items:center;gap:10px}
.rpt-svc-bar{position:relative;height:22px;background:rgba(255,255,255,.04);border-radius:var(--r-2);overflow:hidden}
.rpt-svc-fill{position:absolute;inset:0 auto 0 0;background:rgba(var(--accent-rgb),.55);border-radius:var(--r-2);display:flex;align-items:center;padding-left:9px;font-size:var(--fs-xs);font-weight:700;color:var(--white);white-space:nowrap}
.rpt-svc-cnt{text-align:right;font-weight:800;color:var(--white);font-variant-numeric:tabular-nums;font-size:var(--fs-sm)}

.rpt-empty{text-align:center;padding:40px 20px;color:var(--dim)}
.rpt-empty .big{font-size:40px;margin-bottom:12px}
.rpt-empty .t{font-size:var(--fs-lg);color:var(--white);font-weight:700;margin-bottom:6px}
.rpt-empty .s{font-size:var(--fs-md);max-width:420px;margin:0 auto;line-height:1.5}

.rpt-est{font-size:var(--fs-2xs);color:var(--muted);font-weight:500}

/* ── Impresión: informe limpio en papel ─────────────────────────────────── */
@media print{
  @page{margin:14mm}
  body{background:#fff!important}
  .sidebar,.nf-topbar,.rpt-range,.rpt-print-btn,.nav-item,.cmdk-hint,.plan-badge,.dash-action-bar,#cmdk,.skel-wrap{display:none!important}
  .app-main,.main,.content{margin:0!important;padding:0!important;max-width:none!important}
  .section-header{border:none;padding-top:0}
  .card,.kpi,.rpt-kpi{background:#fff!important;border:1px solid #d0d5dd!important;box-shadow:none!important;color:#101216!important;break-inside:avoid;page-break-inside:avoid}
  .card-title,.kpi-val,.section-title,strong,.rpt-funnel-side .pct,.rpt-svc-cnt,.rpt-legend-row .amt{color:#101216!important}
  .kpi-label,.kpi-sub,.section-desc,.rpt-funnel-lbl,.rpt-legend-row .nm,.axis-lbl{color:#475467!important}
  .rpt-insight{background:#f4fae6!important;border-color:#c4f546!important;color:#101216!important}
  .rpt-funnel-fill{background:#8bbf1f!important}
  .two-col,.kpi-grid{break-inside:avoid}
  a[href]:after{content:""}
}