/* ===== AGENTFLOW DASHBOARD STYLES — v2 PREMIUM ===== */

/* ---- DESIGN TOKENS ---- */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);

  --font-sans: 'DM Sans', 'Satoshi', system-ui, sans-serif;
  --font-display: 'Syne', 'DM Sans', system-ui, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;

  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* 224px dejaban ~110px útiles para el nombre, y cuatro de los nueve agentes no entraban:
     «Agent 2 · Nich…», «Agent 3 · Ecos…», «Agent 4 · Bud…», «Agent 5 · Con…» — medido, les
     faltaban entre 9 y 54px. Se ensancha el menú en vez de acortar los nombres: el número de
     agente y su especialidad son justamente lo que se busca al mirar la lista, y recortarlos
     deja al usuario adivinando cuál es cuál. En una ventana de 1440 son 48px menos de
     contenido; el panel más angosto que se sirve es el de Decidir y respira igual.
     ⚠️ Medido: 272px hace entrar tres de los cuatro. El cuarto —«Agent 2 · Niche Mapper»—
     seguía cortado incluso a 288px, así que ensanchar más no era la respuesta: ése se acortó
     a «Agent 2 · Nichos», que además es la palabra que usa el resto del panel. */
  --sidebar-w: 272px;


  /* ---- ALIAS ----------------------------------------------------------------------------
     Catorce nombres que el dashboard USA y que nadie había definido (encontrado 2026-08-31 con
     `tests-dashboard/variables-de-tema.test.js`). No pintaban nada: CSS no avisa de una
     variable inexistente: simplemente descarta la declaración — así que un panel entero podía
     quedar con el fondo del padre sin que nada fallara.

     Son SINÓNIMOS del vocabulario real, no colores nuevos: se apuntan al nombre canónico en vez
     de inventarles un valor, así el tema sigue teniendo una sola fuente por color. Definirlos
     acá (y no en cada bloque de tema) hace que sigan al tema solos. */
  --bg-primary:     var(--bg);
  --bg-secondary:   var(--surface-2);
  --bg-card:        var(--surface);
  --bg-surface:     var(--surface);
  --bg-elev:        var(--surface-2);
  --bg-elevated:    var(--surface-2);
  --bg-hover:       var(--surface-3);
  --surface-0:      var(--bg);
  --surface-hover:  var(--surface-3);
  --border-light:   var(--border-subtle);
  --text-primary:   var(--text);
  --text-secondary: var(--text-muted);
  --danger:         var(--error);
  --warning-bg:     var(--warning-muted);
}

/* ---- LIGHT THEME (default) ---- */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg:             #ffffff;
  --surface:        #ffffff;
  --surface-1:      #ffffff;
  --surface-2:      #f7f8fc;
  --surface-3:      #eef0f8;
  --border:         #e2e4ee;
  --border-subtle:  #eef0f6;

  --text:           #14142b;
  /* 🔴 CONTRASTE AA, MEDIDO Y NO ESTIMADO (2026-09-22). Los dos niveles de abajo estaban por
     DEBAJO del piso de WCAG 2.1 §1.4.3 (4,5:1 para texto normal) y no por poco:
         --text-faint  #c0c0d8 sobre blanco = 1,57:1   ·  en oscuro #2a3a5a = 1,43:1
         --text-muted  #6b6b8a = 4,51:1 justo         ·  en oscuro #6b82a8 = 4,15:1 ✗
     Medido en Chromium sobre la pantalla de decisión, contra el fondo EFECTIVO de cada
     elemento: 334 textos de 3.654 por debajo del piso, y el grueso era `--text-faint` usado
     como color de CONTENIDO —«prioridad alta · desde el lanzamiento», «$22,50 por venta»—,
     no de adorno. A 1,4:1 eso no es tenue: es ilegible.
     ⚠️ El repo ya había aprendido esto una vez y la lección quedó en un comentario del
     partial de Decidir («`--text-muted`, no `--text-faint`: deja un párrafo casi ilegible»)
     en vez de en el token. Un comentario no protege a los otros catorce paneles.
     Los tres niveles quedan por encima de 4,5:1 en el PEOR fondo donde se usan (surface,
     surface-2, surface-3 y el fondo de página) y CONSERVAN EL ORDEN: text > muted > faint.
     Un nivel que no se puede leer no es un nivel. */
  --text-muted:     #5e5e7d;
  --text-faint:     #6b6b83;
  --text-inverse:   #ffffff;

  --primary:        #5046e5;
  --primary-hover:  #3d34c7;
  --primary-muted:  #eeecff;
  --primary-glow:   rgba(80, 70, 229, 0.10);

  --success:        #16a34a;
  --success-muted:  #dcfce7;
  --warning:        #d97706;
  --warning-muted:  #fef3c7;
  --error:          #dc2626;
  --error-muted:    #fee2e2;
  --info:           #2563eb;
  --info-muted:     #dbeafe;

  --shadow-sm: 0 1px 4px rgba(20,20,43,0.06);
  --shadow-md: 0 4px 16px rgba(20,20,43,0.08);
  --shadow-lg: 0 12px 40px rgba(20,20,43,0.12);

  --chart-grid: rgba(0,0,0,0.06);

  /* 🔴 Estas CINCO existían SÓLO en el bloque `[data-theme="dark"]` (encontrado 2026-08-31),
     y el dashboard las usa 60 veces: 43 `--accent*`, 16 `--glass-border` y 1 `--shadow-glow`.
     En tema claro `var(--accent)` no resolvía a nada, así que el color se caía al valor
     heredado y un chip pensado para destacar salía del color del texto de al lado. Es
     exactamente la regla que el propio repo se puso —«colores por var(--…), nunca fijos» y
     «nunca definir un color sólo adentro de un bloque de tema»— incumplida en la hoja misma.

     Los valores del claro NO son los del oscuro: el cian #00d4ff sobre blanco da ~1,9:1 de
     contraste y es ilegible. #0891b2 (el mismo tono, oscurecido) da ~4,5:1, que es el piso
     de AA para texto chico. */
  --accent:         #0891b2;
  --accent-muted:   rgba(8, 145, 178, 0.10);
  --glass:          rgba(255, 255, 255, 0.72);
  --glass-border:   rgba(20, 20, 43, 0.10);
  --shadow-glow:    0 0 0 3px rgba(8, 145, 178, 0.18);
}

/* ---- DARK THEME ---- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:             #080c14;
  --surface:        #0d1220;
  --surface-1:      #0d1220;
  --surface-2:      #111827;
  --surface-3:      #192033;
  --border:         #1e2d4a;
  --border-subtle:  #162038;

  --text:           #e2e8f4;
  /* Misma escala que en claro, medida sobre los fondos oscuros. Ver la nota de arriba. */
  --text-muted:     #8097bd;
  --text-faint:     #7888a8;
  --text-inverse:   #080c14;

  --primary:        #4f8ef7;
  --primary-hover:  #6ea6ff;
  --primary-muted:  #0f1f3d;
  --primary-glow:   rgba(79, 142, 247, 0.18);

  --accent:         #00d4ff;
  --accent-muted:   rgba(0, 212, 255, 0.08);

  --success:        #22c55e;
  --success-muted:  #052e16;
  --warning:        #f59e0b;
  --warning-muted:  #1c0f00;
  --error:          #ef4444;
  --error-muted:    #1f0707;
  --info:           #3b82f6;
  --info-muted:     #0c1e3d;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 40px rgba(79,142,247,0.08);

  --chart-grid: rgba(255,255,255,0.05);
  --glass: rgba(13,18,32,0.8);
  --glass-border: rgba(79,142,247,0.12);
}

/* ---- BASE RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* Dark bg grid pattern */
[data-theme="dark"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(79,142,247,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(0,212,255,0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
a { color: inherit; text-decoration: none; }
canvas { display: block; }

/* ---- DASHBOARD LAYOUT ---- */
.dashboard {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100dvh;
  transition: grid-template-columns var(--transition);
}
.dashboard.sidebar-collapsed {
  grid-template-columns: 60px 1fr;
  --sidebar-w: 60px;
}

/* ---- SIDEBAR ---- */
.sidebar {
  grid-row: 1 / -1;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: width var(--transition);
  position: relative;
  z-index: 20;
}

[data-theme="dark"] .sidebar {
  background: rgba(13,18,32,0.95);
  backdrop-filter: blur(20px);
  border-right-color: var(--glass-border);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border);
  min-height: 60px;
  flex-shrink: 0;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
}

/* Marca Zentral (TN33). El logo trae el nombre dibujado, así que es una imagen,
   no ícono+texto. Dos variantes de tema (negra en claro, clara en oscuro) porque
   el sidebar es var(--surface): #fff en claro / #0d1220 en oscuro. En colapsado se
   muestra sólo la marca (el cuadro dorado con la N), que se lee en ambos temas. */
.brand-logo { width: auto; flex-shrink: 0; }
.brand-full { height: 34px; display: block; }
.brand-dark { display: none; }                    /* tema claro (default): oculta la variante clara */
[data-theme="dark"] .brand-light { display: none; }
[data-theme="dark"] .brand-dark  { display: block; }
.brand-mark { height: 30px; display: none; }       /* sólo aparece en colapsado */
.sidebar-collapsed .brand-full { display: none; }
.sidebar-collapsed .brand-dark { display: none; }  /* después de la regla dark → gana en colapsado */
.sidebar-collapsed .brand-mark { display: block; }

.sidebar-toggle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--transition), background var(--transition);
}
.sidebar-toggle:hover { color: var(--text); background: var(--surface-3); }

.sidebar-nav {
  flex: 1;
  padding: var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.nav-group { display: flex; flex-direction: column; gap: var(--space-1); }

.nav-label {
  font-size: var(--text-xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
  overflow: hidden;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-weight: 500;
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.nav-item:hover { color: var(--text); background: var(--surface-3); }
.nav-item.active {
  color: var(--primary);
  background: var(--primary-muted);
}
.nav-item i { flex-shrink: 0; }
.nav-item span:not(.nav-badge) { overflow: hidden; text-overflow: ellipsis; }

.nav-badge {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.nav-badge.running { background: var(--primary-muted); color: var(--primary); }
.nav-badge.alert { background: var(--warning-muted); color: var(--warning); }

/* ---- GRUPOS COLAPSABLES DEL SIDEBAR (2026-07) ----
   El nav tenía 29 items planos (1358px, no entraba en pantalla). Ahora cada grupo se
   pliega desde su label. El estado lo maneja app.js (initNavGroups) y se persiste en
   localStorage. Los items NO se borran: colapsar es solo display:none. */
.nav-label--btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  background: none;
  border: 0;
  font-family: inherit;   /* el UA stylesheet del <button> pisa la fuente si no */
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: color var(--transition), background var(--transition);
}
.nav-label--btn:hover { color: var(--text-muted); background: var(--surface-3); }
.nav-chevron { flex-shrink: 0; opacity: 0.6; transition: transform var(--transition); }
.nav-group.is-collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-group.is-collapsed .nav-item { display: none; }

/* Sidebar en modo icono: los labels (y por ende los toggles) se ocultan → si además
   respetáramos el colapso, esos items quedarían inalcanzables. Se muestran siempre. */
.sidebar-collapsed .nav-group.is-collapsed .nav-item { display: flex; }

/* ---- PAQUETES DE REDES: botón + popup (Agent 1, 2026-07) ----
   Reemplaza el recuadro fijo que vivía dentro del panel Scout. */


/* display lo maneja el JS (none <-> flex); cuando está abierto, centra el box. */

@keyframes ngmIn {
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to   { opacity: 1; transform: none; }
}



/* El grid de paquetes respira mejor dentro del popup que en el panel. */


.sidebar-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}
.system-health { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.health-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.health-dot.ok { background: var(--success); box-shadow: 0 0 6px var(--success); }
.health-dot.warn { background: var(--warning); }
.health-dot.error { background: var(--error); }

/* ---- COLLAPSED SIDEBAR ---- */
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-item span:not(.nav-badge):not(i),
.sidebar-collapsed .sidebar-footer .last-update,
.sidebar-collapsed .system-health span,
.sidebar-collapsed .nav-badge { display: none; }
.sidebar-collapsed .nav-item { justify-content: center; padding: var(--space-2); }
.sidebar-collapsed .nav-item i { margin: 0; }
.sidebar-collapsed .sidebar-toggle i { transform: scaleX(-1); }

/* ---- MAIN AREA ---- */
.main-area {
  display: grid;
  grid-template-rows: 60px 1fr;
  overflow: hidden;
}

/* ---- TOPBAR ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-left { display: flex; flex-direction: column; gap: 2px; }
.page-title {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.breadcrumb i { color: var(--text-faint); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.date-filter { display: flex; gap: 2px; background: var(--surface-3); border-radius: var(--radius-md); padding: 2px; }
.date-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  transition: all var(--transition);
}
.date-btn:hover { color: var(--text); background: var(--surface-2); }
.date-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: all var(--transition);
}
.icon-btn:hover { color: var(--text); background: var(--surface-3); }

.avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---- MAIN CONTENT ---- */
.main-content {
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
}

/* ---- PANELS ---- */
.panel { display: none; padding: var(--space-6); }
.panel.active { display: block; }

/* ---- KPI GRID ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--transition), transform var(--transition);
  content-visibility: auto;
  contain-intrinsic-size: 0 120px;
}
.kpi-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.kpi-card.accent { border-color: var(--primary); background: var(--primary-glow); }

.kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.kpi-label { font-size: var(--text-xs); color: var(--text-muted); font-weight: 500; }
.kpi-delta {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}
.kpi-delta.positive { color: var(--success); background: var(--success-muted); }
.kpi-delta.negative { color: var(--error); background: var(--error-muted); }
.kpi-delta.neutral { color: var(--text-muted); background: var(--surface-3); }

.kpi-value {
  /* 2026-07-24: era var(--text-xl) = 36px, tamaño pensado para números sueltos
     como "14". Con importes reales se salía de la tarjeta: "€47.830" pide 258px
     a 36px y las tarjetas miden ~190px. Pasa a escalar con el ancho, con techo
     de 24px — el mismo que ya usaba el panel del Scout sin desbordar nunca.
     Y si aun así un dato no entrara, se recorta en vez de desbordar. */
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: var(--space-1);
  font-variant-numeric: tabular-nums lining-nums;
  transition: color var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Sin esto, un hijo con texto largo estira la tarjeta dentro del grid. */
.kpi-card { min-width: 0; }

.kpi-sub { font-size: var(--text-xs); color: var(--text-muted); }
.kpi-spark { margin-top: var(--space-3); }

/* ---- CHARTS ---- */
.charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.chart-card.wide {
  grid-column: 1 / -1;
}
@media (min-width: 1200px) {
  .chart-card.wide { grid-column: span 2; }
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.chart-header h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}
.chart-legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.legend-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  display: inline-block;
  margin-right: var(--space-1);
}
.legend-dot.revenue { background: #6c63ff; }
.legend-dot.spend   { background: #f59e0b; }
.legend-dot.profit  { background: #22c55e; }

/* ---- OVERVIEW BOTTOM ---- */
.overview-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 320px;
  gap: var(--space-4);
}
@media (max-width: 1200px) {
  .overview-bottom { grid-template-columns: 1fr 1fr; }
  .alerts-panel { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .overview-bottom { grid-template-columns: 1fr; }
}

.agent-quick-panel, .pipeline-panel, .alerts-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.section-header h3 { font-size: var(--text-sm); font-weight: 600; }
.see-all { font-size: var(--text-xs); color: var(--primary); }

.badge-count {
  background: var(--primary-muted);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}
.badge-count.pending { background: var(--warning-muted); color: var(--warning); }

/* ---- AGENT QUICK LIST ---- */
.agent-quick-list { display: flex; flex-direction: column; gap: var(--space-2); }
.agent-quick-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  cursor: pointer;
  transition: background var(--transition);
}
.agent-quick-item:hover { background: var(--surface-3); }

.agent-num {
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  background: var(--primary-muted);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.agent-quick-name { font-size: var(--text-xs); font-weight: 500; flex: 1; }
.agent-quick-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
}
.status-running { background: var(--primary-muted); color: var(--primary); }
.status-idle    { background: var(--surface-3); color: var(--text-muted); }
.status-done    { background: var(--success-muted); color: var(--success); }
.status-error   { background: var(--error-muted); color: var(--error); }
.status-waiting { background: var(--warning-muted); color: var(--warning); }

/* ---- PIPELINE FLOW ---- */
.pipeline-flow { display: flex; flex-direction: column; gap: var(--space-2); }
.pipeline-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--border);
  background: var(--surface-2);
  font-size: var(--text-xs);
  transition: all var(--transition);
}
.pipeline-step.active-step { border-left-color: var(--primary); background: var(--primary-muted); color: var(--primary); }
.pipeline-step.done-step   { border-left-color: var(--success); opacity: 0.7; }
.pipeline-step.gate-step   { border-left-color: var(--warning); background: var(--warning-muted); color: var(--warning); }
.pipeline-step-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ---- ALERTS ---- */
.alerts-list { display: flex; flex-direction: column; gap: var(--space-2); }
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}
.alert-item.alert-warn { background: var(--warning-muted); border: 1px solid rgba(245,158,11,0.2); }
.alert-item.alert-error { background: var(--error-muted); border: 1px solid rgba(239,68,68,0.2); }
.alert-item.alert-info { background: var(--info-muted); border: 1px solid rgba(59,130,246,0.2); }
.alert-icon { flex-shrink: 0; margin-top: 1px; }
.alert-title { font-weight: 600; margin-bottom: 2px; }
.alert-desc { color: var(--text-muted); line-height: 1.4; }
.alert-time { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* ---- AGENTS GRID ---- */
.agents-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.tab-group { display: flex; gap: var(--space-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; }
.tab-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--transition);
}
.tab-btn:hover { color: var(--text); background: var(--surface-3); }
.tab-btn.active { background: var(--primary); color: white; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: var(--primary);
  color: white;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: all var(--transition);
  box-shadow: 0 0 0 0 var(--primary-glow);
}
.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--primary-glow);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--transition);
}
.btn-ghost:hover { color: var(--text); border-color: var(--primary); }

.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-4);
}

.agent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all var(--transition);
  cursor: pointer;
  content-visibility: auto;
  contain-intrinsic-size: 0 220px;
}
.agent-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.agent-card.running-card { border-color: var(--primary); }
.agent-card.error-card   { border-color: var(--error); }
.agent-card.waiting-card { border-color: var(--warning); }

.agent-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.agent-card-id {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm);
  font-weight: 800;
  flex-shrink: 0;
}
.agent-card-name-wrap { flex: 1; padding: 0 var(--space-3); }
.agent-card-name { font-weight: 700; font-size: var(--text-sm); }
.agent-card-role { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

.agent-progress-bar {
  height: 4px;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.agent-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--primary);
  transition: width 1s ease;
}

.agent-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  font-size: var(--text-xs);
}
.agent-meta-item { display: flex; flex-direction: column; gap: 2px; }
.agent-meta-label { color: var(--text-muted); }
.agent-meta-value { font-weight: 600; }

.agent-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.agent-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all var(--transition);
}
.agent-btn:hover { color: var(--primary); border-color: var(--primary); }
.agent-btn.run { background: var(--primary); color: white; border-color: var(--primary); }
.agent-btn.run:hover { background: var(--primary-hover); }

/* ---- LOG DRAWER ---- */
.log-drawer {
  display: none;
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: 480px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 100;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.log-drawer.open { display: flex; }
.log-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.log-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  font-size: var(--text-xs);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.log-entry {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  line-height: 1.5;
}
.log-entry.log-info   { border-left: 3px solid var(--info); }
.log-entry.log-warn   { border-left: 3px solid var(--warning); }
.log-entry.log-error  { border-left: 3px solid var(--error); }
.log-entry.log-success{ border-left: 3px solid var(--success); }
.log-ts { color: var(--text-faint); margin-right: var(--space-2); }

/* ---- FILTERS BAR ---- */
.filters-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.filter-select {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-xs);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--transition);
}
.filter-select:hover { border-color: var(--primary); }
.filter-select:focus { outline: none; border-color: var(--primary); }

/* ---- TABLE ---- */
.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.table-header h3 { font-size: var(--text-sm); font-weight: 600; }
.table-controls { display: flex; gap: var(--space-3); }

.search-input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: var(--text-xs);
  color: var(--text);
  width: 200px;
  transition: border-color var(--transition);
}
.search-input:focus { outline: none; border-color: var(--primary); }

.table-wrap { overflow-x: auto; }

.data-table {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums lining-nums;
}
.data-table thead { background: var(--surface-2); }
.data-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--surface-2);
  z-index: 1;
}
/* ── Resizable columns (estilo Excel) ─────────────────────────────────
   En tablas con [data-resizable] inyectamos un handle a la derecha de
   cada <th>. Click+drag arrastra el ancho. Doble click resetea esa
   columna. Persiste en localStorage por id de tabla. */
table.data-table[data-resizable] th {
  /* Necesitamos relative (no sticky) para que el handle absolute se
     ancle al TH. Perdemos el sticky-on-scroll en estas tablas, pero
     ganamos el control del ancho — trade-off explicito. */
  position: relative;
  top: auto;
}
table.data-table[data-resizable] th .col-resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  user-select: none;
  z-index: 5;
  background: transparent;
}
table.data-table[data-resizable] th .col-resizer::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 25%;
  bottom: 25%;
  width: 2px;
  background: transparent;
  transition: background 120ms ease;
  pointer-events: none;
}
table.data-table[data-resizable] th:hover .col-resizer::after,
table.data-table[data-resizable] th .col-resizer:hover::after,
table.data-table[data-resizable] th.col-resizing .col-resizer::after {
  background: var(--accent, #3b82f6);
}
table.data-table[data-resizable].has-resizable-cols { table-layout: fixed; }
table.data-table[data-resizable].has-resizable-cols td {
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-table th.num { text-align: right; }
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  white-space: nowrap;
  color: var(--text);
}
.data-table td.num { text-align: right; font-weight: 500; }
.data-table tr:hover td { background: var(--surface-2); }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}
.status-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-scale   { background: var(--primary-muted); color: var(--primary); }
.badge-ok      { background: var(--success-muted); color: var(--success); }
.badge-review  { background: var(--warning-muted); color: var(--warning); }
.badge-pause   { background: var(--error-muted); color: var(--error); }

/* ---- PROJECTS GRID ---- */
.projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.projects-header h2 { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all var(--transition);
  cursor: pointer;
}
.project-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.project-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.project-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base);
}
.project-title { font-weight: 700; font-size: var(--text-sm); margin-bottom: 3px; }
.project-meta { font-size: var(--text-xs); color: var(--text-muted); }

.project-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.project-stat-value {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.project-stat-label { font-size: var(--text-xs); color: var(--text-muted); }

.project-phase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
}

/* ---- TRACKING PANEL ---- */
.tracking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 280px;
  gap: var(--space-4);
}
@media (max-width: 1100px) {
  .tracking-grid { grid-template-columns: 1fr 1fr; }
  .tracking-health { grid-column: 1 / -1; }
}

.tracking-integrations, .tracking-events, .tracking-health {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.integrations-list { display: flex; flex-direction: column; gap: var(--space-2); }
.integration-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}
.integration-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.integration-name { flex: 1; font-weight: 500; }
.integration-status { font-size: 11px; font-weight: 600; }
.int-ok   { color: var(--success); }
.int-warn { color: var(--warning); }
.int-err  { color: var(--error); }

/* ---- EVENTS STREAM ---- */
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

.events-stream {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.event-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--text-xs);
  animation: slideIn 0.3s ease;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.event-type {
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.ev-conv    { background: var(--success-muted); color: var(--success); }
.ev-click   { background: var(--info-muted); color: var(--info); }
.ev-pageview{ background: var(--surface-3); color: var(--text-muted); }
.ev-lead    { background: var(--primary-muted); color: var(--primary); }

.event-detail { flex: 1; color: var(--text-muted); }
.event-value  { font-weight: 700; color: var(--success); }
.event-time   { color: var(--text-faint); flex-shrink: 0; }

/* ---- HEALTH METRICS ---- */
.health-metrics { display: flex; flex-direction: column; gap: var(--space-3); }
.health-item {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.health-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  margin-bottom: var(--space-2);
}
.health-bar {
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.health-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 1s ease;
}

/* ---- DECISIONS PANEL ---- */
.decisions-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .decisions-layout { grid-template-columns: 1fr; }
}

.gates-section, .auto-actions-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.gates-list, .auto-actions-list { display: flex; flex-direction: column; gap: var(--space-3); }

.gate-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface-2);
  transition: border-color var(--transition);
}
.gate-item:hover { border-color: var(--warning); }
.gate-item.pending-gate { border-left: 4px solid var(--warning); }
.gate-item.approved-gate { border-left: 4px solid var(--success); opacity: 0.7; }

.gate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.gate-title { font-weight: 600; font-size: var(--text-xs); }
.gate-from  { font-size: 11px; color: var(--text-muted); margin-bottom: var(--space-3); }
.gate-actions { display: flex; gap: var(--space-2); }
.gate-approve {
  padding: var(--space-1) var(--space-3);
  background: var(--success);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  transition: all var(--transition);
}
.gate-approve:hover { opacity: 0.85; }
.gate-reject {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--transition);
}
.gate-reject:hover { border-color: var(--error); color: var(--error); }

.auto-action-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}
.auto-action-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.action-scale  { background: var(--success-muted); color: var(--success); }
.action-pause  { background: var(--error-muted); color: var(--error); }
.action-alert  { background: var(--warning-muted); color: var(--warning); }
.action-rotate { background: var(--info-muted); color: var(--info); }

.auto-action-body { flex: 1; }
.auto-action-title { font-weight: 600; margin-bottom: 2px; }
.auto-action-detail { color: var(--text-muted); line-height: 1.4; }
.auto-action-time   { font-size: 11px; color: var(--text-faint); margin-top: var(--space-1); }

/* ---- LOGS PANEL ---- */
.logs-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.logs-stream {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.log-line {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  line-height: 1.5;
  align-items: flex-start;
}
.log-line:hover { background: var(--surface-3); }
.log-ts-global { color: var(--text-faint); flex-shrink: 0; white-space: nowrap; }
.log-level {
  width: 56px;
  text-align: center;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.level-INFO    { background: var(--info-muted); color: var(--info); }
.level-WARN    { background: var(--warning-muted); color: var(--warning); }
.level-ERROR   { background: var(--error-muted); color: var(--error); }
.level-SUCCESS { background: var(--success-muted); color: var(--success); }
.log-agent-tag {
  color: var(--primary);
  font-weight: 600;
  flex-shrink: 0;
}
.log-msg { color: var(--text); flex: 1; }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ---- ANIMATIONS ---- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kpi-value.animating { animation: countUp 0.4s ease forwards; }

/* ---- NICHE PANEL ---- */
.niche-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.niche-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.niche-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-lg);
  background: var(--primary-muted);
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.niche-title {
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-1);
}
.niche-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  max-width: 520px;
  line-height: 1.5;
}
.niche-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.niche-phase {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* 2-column grid for niche detail */
.niche-main-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-4);
  margin-top: var(--space-4);
  align-items: start;
}
@media (max-width: 1100px) {
  .niche-main-grid { grid-template-columns: 1fr; }
}

.niche-left, .niche-right {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.niche-right > * { margin-bottom: var(--space-4); }
.niche-right > *:last-child { margin-bottom: 0; }

/* Compact charts — horizontal bars, tight height */
.compact-chart {
  margin-bottom: var(--space-4);
}
.compact-chart canvas {
  max-height: 130px;
}

/* Channel cards grid (legacy — overridden below) */

/* Funnel steps */
.funnel-steps { display: flex; flex-direction: column; gap: var(--space-2); }
.funnel-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
}
.funnel-step-label { width: 110px; flex-shrink: 0; color: var(--text-muted); font-weight: 500; }
.funnel-step-bar {
  flex: 1;
  height: 20px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}
.funnel-step-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; padding-left: var(--space-2);
  font-size: 11px; font-weight: 600; color: white;
  transition: width 1s ease;
  white-space: nowrap;
}
.funnel-step-count { width: 70px; text-align: right; font-weight: 700; flex-shrink: 0; }
.funnel-step-pct { width: 42px; text-align: right; color: var(--text-muted); flex-shrink: 0; }

/* Offers list */
.offers-list { display: flex; flex-direction: column; gap: var(--space-2); }
.offer-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  transition: background var(--transition);
}
.offer-item:hover { background: var(--surface-3); }
.offer-rank { width: 20px; color: var(--text-faint); font-weight: 700; flex-shrink: 0; text-align: center; }
.offer-name { flex: 1; font-weight: 600; }
.offer-network { color: var(--text-muted); }
.offer-payout { font-weight: 700; color: var(--success); }
.offer-epc { color: var(--primary); }

/* Panel scroll */
.main-content {
  overflow-y: auto;
  overscroll-behavior: contain;
}
#panel-niche {
  overflow-y: auto;
}

/* ---- Channel cards (updated) ---- */
.channels-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.channel-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  transition: all var(--transition);
}
.channel-card-drillable { cursor: pointer; }
.channel-card-drillable:hover { border-color: var(--primary); background: var(--primary-muted); }
.channel-icon { font-size: 18px; flex-shrink: 0; }
.channel-name { font-size: var(--text-sm); font-weight: 600; }
.channel-kpi { font-size: 11px; color: var(--text-muted); }
.channel-roas { font-size: var(--text-sm); font-weight: 700; color: var(--primary); white-space: nowrap; }

.channel-drill-btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.channel-drill-btn:hover, .channel-drill-btn.active {
  background: var(--primary); border-color: var(--primary); color: white;
}
.channel-drill-btn.active i { transform: rotate(90deg); }
.channel-drill-btn i { transition: transform 0.2s ease; }

/* ---- Channel detail panels (accordion) ---- */
.channel-detail-panel {
  display: none;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(80,70,229,0.07);
}
.channel-detail-panel.open { display: block; }

.channel-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.channel-detail-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 900; font-size: 16px;
  flex-shrink: 0;
}
.channel-detail-title { font-size: var(--text-sm); font-weight: 700; }
.channel-detail-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.channel-detail-header > button { margin-left: auto; }

.channel-detail-section { margin-bottom: var(--space-4); }
.channel-detail-section:last-child { margin-bottom: 0; }
.section-subheader {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* Smaller table variant */
.data-table-sm th, .data-table-sm td {
  padding: 5px 8px !important;
  font-size: 11px !important;
}
.data-table-sm strong { font-size: 11px; }

/* Type tag pill */
.type-tag {
  display: inline-flex; align-items: center;
  background: var(--surface-3);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Creative note */
.creative-note {
  display: inline-flex; align-items: center;
  background: rgba(34,197,94,0.12);
  color: var(--success);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px; font-weight: 600;
  margin-left: 4px;
}

/* Rank badge */
.rank-badge {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 700;
}

/* Btn small */
.btn-sm {
  padding: 4px 8px !important;
  font-size: var(--text-xs) !important;
  line-height: 1.4 !important;
}

/* Remove funnel animation */
.funnel-step-fill {
  transition: none !important;
}

/* ================================================================
   PURE HTML BAR CHARTS — completamente estáticas, sin animación
   ================================================================ */
.hbar-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.hbar-row {
  display: grid;
  grid-template-columns: 72px 1fr 52px;
  align-items: center;
  gap: 8px;
  min-height: 22px;
}
.hbar-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hbar-track {
  height: 14px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow: hidden;
}
.hbar-fill {
  height: 100%;
  border-radius: 4px;
  /* NO transition, NO animation — completely static */
}
.hbar-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
}

/* ================================================================
   MERCHANTS BY CHANNEL
   ================================================================ */
.mbc-channel {
  margin-bottom: var(--space-4);
}
.mbc-channel:last-child { margin-bottom: 0; }
.mbc-channel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
}
.mbc-ch-icon { font-size: 14px; }
.mbc-ch-name { font-size: var(--text-sm); font-weight: 700; flex: 1; }
.mbc-ch-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface-3);
  border-radius: 10px;
  padding: 2px 7px;
}

/* ================================================================
   REVENUE / CASHFLOW HORIZONTAL CHART
   ================================================================ */
.revenue-hchart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
  width: 100%;
}
.rev-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.rev-label {
  width: 36px;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  padding-top: 3px;
  font-weight: 500;
  text-align: right;
}
.rev-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rev-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rev-bar {
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 2px;
}
.rev-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

/* ================================================================
   CHANNELS PANEL
   ================================================================ */
.channels-panel-header { margin-bottom: var(--space-5); }
.channels-panel-header h2 { font-size: var(--text-lg); font-weight: 700; color: var(--text); margin-bottom: 4px; }
.panel-subtitle { font-size: var(--text-sm); color: var(--text-muted); }

.channel-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.ch-tab {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms ease;
}
.ch-tab:hover { border-color: var(--primary); color: var(--primary); }
.ch-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Channel stats card grid */
.ch-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.ch-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.ch-stat-label { font-size: var(--text-xs); color: var(--text-muted); font-weight: 500; margin-bottom: 4px; }
.ch-stat-value { font-size: var(--text-lg); font-weight: 700; color: var(--text); }
.ch-stat-delta { font-size: 11px; font-weight: 600; margin-top: 2px; }
.ch-stat-delta.pos { color: var(--success); }
.ch-stat-delta.neg { color: var(--error); }
.ch-stat-delta.neu { color: var(--text-muted); }

/* Telegram-specific stats */
.tg-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.tg-stat {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  text-align: center;
}
.tg-stat-val { font-size: var(--text-base); font-weight: 700; color: var(--text); }
.tg-stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Newsletter KPIs inline */
.nl-kpis-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.nl-kpi {
  flex: 1;
  min-width: 120px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.nl-kpi-val { font-size: var(--text-base); font-weight: 700; }
.nl-kpi-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ================================================================
   NETWORKS PANEL
   ================================================================ */
.networks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  margin-top: var(--space-5);
}
.network-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}
.network-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.network-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.network-logo {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.network-name { font-weight: 700; font-size: var(--text-sm); }
.network-programs { font-size: 11px; color: var(--text-muted); }
.network-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.net-stat { text-align: center; }
.net-stat-val { font-size: 12px; font-weight: 700; color: var(--text); }
.net-stat-lbl { font-size: 11px; color: var(--text-muted); }
.network-footer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.pay-badge {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 11px;
}
.pay-ok { background: var(--success-muted); color: var(--success); }
.pay-pend { background: var(--warning-muted); color: var(--warning); }

/* ================================================================
   CONVERSIONS PANEL
   ================================================================ */
.conv-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.conv-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
}
.conv-kpi-val { font-size: var(--text-base); font-weight: 700; color: var(--text); }
.conv-kpi-lbl { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* Conversion status badges */
.conv-pagado   { background: var(--success-muted); color: var(--success); }
.conv-pendiente { background: var(--warning-muted); color: var(--warning); }
.conv-rechazado { background: var(--error-muted); color: var(--error); }
.conv-revision { background: var(--info-muted); color: var(--info); }

/* ================================================================
   CONTENT PLANNING TABLE
   ================================================================ */
.plan-completado { background: var(--success-muted); color: var(--success); }
.plan-pendiente  { background: var(--warning-muted); color: var(--warning); }
.plan-ejecutando { background: var(--primary-muted); color: var(--primary); }
.plan-revision   { background: var(--info-muted); color: var(--info); }
.plan-cancelado  { background: var(--error-muted); color: var(--error); }

/* ================================================================
   PROJECT CARD — CONTENT PLANNING SECTION
   ================================================================ */
.project-content-plan {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

/* ================================================================
   PROJECT CARD — INVEST ROW (Revenue + Inversión + ROAS + CPA)
   ================================================================ */
.project-invest-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}
.project-invest-box {
  text-align: center;
}
.project-invest-box.accent .project-invest-val {
  color: var(--primary);
  font-weight: 700;
}
.project-invest-val {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.project-invest-lbl {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ================================================================
   PROJECT CARD — SECTION TITLE
   ================================================================ */
.project-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}

/* ================================================================
   PROJECT CARD — ASSET BUTTONS
   ================================================================ */
.project-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.asset-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text);
  text-decoration: none;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.asset-btn:hover {
  background: var(--primary-muted);
  border-color: var(--primary);
  color: var(--primary);
}
.asset-btn-icon { font-size: 12px; line-height: 1; }
.asset-btn-label { color: inherit; }

/* ================================================================
   PROJECT CARD — AD PLATFORM CHIPS
   ================================================================ */
.project-adplatforms {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adplatform-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
}
.adplatform-name {
  flex: 1;
  font-weight: 500;
  color: var(--text);
}
.adplatform-spend {
  font-weight: 700;
  color: var(--primary);
}
.adplatform-cams {
  color: var(--text-muted);
  font-size: 11px;
}

/* ================================================================
   NICHE — KPI SPLIT (Revenue + Inversión en una sola card)
   ================================================================ */
.kpi-card.kpi-split {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  grid-column: span 2;
}
.kpi-split-left,
.kpi-split-right {
  flex: 1;
  padding: var(--space-4);
}
.kpi-split-right {
  background: rgba(0,0,0,.03);
}
[data-theme="dark"] .kpi-split-right {
  background: rgba(255,255,255,.04);
}
.kpi-split-divider {
  width: 1px;
  background: var(--border-subtle);
  align-self: stretch;
}
.kpi-value-sm {
  font-size: var(--text-xl) !important;
}

/* ================================================================
   NICHE — ECOSYSTEM ROW (Activos + Campañas de pago)
   ================================================================ */
.niche-ecosystem-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (max-width: 900px) {
  .niche-ecosystem-row { grid-template-columns: 1fr; }
}
.niche-ecosystem-card {}

/* Ecosystem asset list */
.ecosystem-assets {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eco-asset-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  color: var(--text);
  transition: background .15s, border-color .15s;
}
.eco-asset-btn:hover {
  background: var(--primary-muted);
  border-color: var(--primary);
  color: var(--primary);
}
.eco-asset-icon { font-size: 16px; line-height: 1; width: 20px; text-align: center; }
.eco-asset-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1px;
}
.eco-asset-name { font-size: 12px; font-weight: 600; color: inherit; }
.eco-asset-url  { font-size: 11px; color: var(--text-muted); }
.eco-asset-btn:hover .eco-asset-url { color: var(--primary); opacity: .7; }

/* Ad platforms list */
.ecosystem-adplatforms {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eco-adplatform {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}
.eco-adplatform-logo {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
}
.eco-adplatform-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1px;
}
.eco-adplatform-name { font-size: 12px; font-weight: 600; color: var(--text); }
.eco-adplatform-detail { font-size: 11px; color: var(--text-muted); }
.eco-adplatform-spend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.eco-adplatform-val { font-size: 12px; font-weight: 700; color: var(--primary); }
.eco-adplatform-lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ================================================================
   ACTION BUTTONS (pause / delete) — campaign & creative rows
   ================================================================ */
.row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid;
  cursor: pointer;
  background: transparent;
  transition: background .15s, opacity .15s;
  flex-shrink: 0;
}
.act-btn:hover { opacity: .75; }
.act-pause { border-color: var(--warning, #f59e0b); color: var(--warning, #f59e0b); }
.act-delete { border-color: var(--error, #ef4444); color: var(--error, #ef4444); }

/* ================================================================
   CONTENT GENERATION SECTION
   ================================================================ */
.content-gen-section {
  margin: var(--space-6, 24px) 0 var(--space-4, 16px);
}
.content-gen-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4, 16px);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border, #e5e7eb);
}
.content-gen-section-header h2 {
  font-size: var(--text-base, 15px);
  font-weight: 700;
  color: var(--text, #111);
  margin: 0;
  letter-spacing: -.01em;
}
.cg-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--primary-muted, #ede9fe);
  color: var(--primary, #5046e5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Content generation sub-panels */
.cg-panels-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4, 16px);
  margin-bottom: var(--space-4, 16px);
}
@media (max-width: 900px) {
  .cg-panels-row { grid-template-columns: 1fr; }
}

/* Priority badge */
.cg-priority {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cg-priority-alta   { background: #fee2e2; color: #dc2626; }
.cg-priority-media  { background: #fef3c7; color: #d97706; }
.cg-priority-baja   { background: #dbeafe; color: #2563eb; }

/* Status badge for content gen */
.cg-status-pendiente  { background: #f1f5f9; color: #475569; }
.cg-status-ejecutando { background: #eff6ff; color: #2563eb; }
.cg-status-completado { background: #f0fdf4; color: #16a34a; }
.cg-status-revision   { background: #fff7ed; color: #ea580c; }

/* Ecosystem & Campaigns dividers within Content Gen */
.cg-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-4, 16px) 0 12px;
}
.cg-divider-line {
  flex: 1;
  height: 1px;
  background: var(--border, #e5e7eb);
}
.cg-divider-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
}

/* AI tool tag in content gen */
.cg-ai-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}

/* Campaign status chips for Canales detail tables */
.camp-status-active  { color: var(--success, #16a34a); font-weight: 600; }
.camp-status-paused  { color: var(--warning, #d97706); font-weight: 600; }
.camp-status-review  { color: var(--error,   #dc2626); font-weight: 600; }

/* ===========================================
   GENERACIÓN — shared layout & topbar
   =========================================== */
.gen-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 16px;
  flex-wrap: wrap;
}
.gen-topbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gen-topbar-right { display: flex; align-items: center; gap: 8px; }
.gen-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }

/* Tab switcher */
.gen-tab-switcher {
  display: flex;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.gen-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 14px;
  border: none; background: transparent; cursor: pointer;
  border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--text-muted);
  transition: all .15s;
}
.gen-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.gen-tab:hover:not(.active) { color: var(--text); }

/* Tab panels */
.gen-tab-panel { display: none; }
.gen-tab-panel.active { display: block; }

/* Two-column layout for create tabs */
.gen-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) { .gen-two-col { grid-template-columns: 1fr; } }

/* Form cards */
.gen-form-card,
.gen-preview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}
.gen-form-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 14px;
}
.gen-field { display: flex; flex-direction: column; gap: 5px; }
.gen-field label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.gen-field-row { display: flex; gap: 10px; margin-bottom: 10px; }
.gen-field-row .gen-field { flex: 1; }
.gen-field { margin-bottom: 10px; }
.w100 { width: 100% !important; }
.gen-textarea {
  width: 100%; min-height: 80px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px; color: var(--text);
  resize: vertical;
  font-family: inherit;
}
.gen-textarea:focus { outline: none; border-color: var(--accent); }
.gen-form-actions {
  display: flex; gap: 8px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--border);
}

/* Preview output */
.gen-preview-output {
  min-height: 280px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
  font-size: 12px; line-height: 1.6; color: var(--text);
  overflow-y: auto; max-height: 460px;
}
.gen-preview-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 240px; text-align: center;
  color: var(--text-muted); gap: 10px; font-size: 12px;
}
.gen-preview-actions { display: flex; gap: 8px; }

/* Preview content rendering */
.gen-preview-block { margin-bottom: 12px; }
.gen-preview-block-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); margin-bottom: 4px;
}
.gen-preview-block-body {
  font-size: 12px; color: var(--text); line-height: 1.6;
  white-space: pre-wrap;
}
.gen-variant-tag {
  display: inline-block;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; margin-bottom: 6px;
}
.gen-hierarchy {
  display: flex; align-items: center; gap: 0;
  background: var(--surface-2); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 14px;
  flex-wrap: wrap; gap: 4px;
}
.gen-hier-level {
  display: flex; align-items: center;
  padding: 4px 10px; border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.gen-hier-level.active { border-color: var(--accent); background: rgba(108,99,255,.1); }
.gen-hier-label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.gen-hier-level.active .gen-hier-label { color: var(--accent); }
.gen-hier-arrow { color: var(--text-muted); padding: 0 4px; }

/* Library */
.gen-lib-toolbar {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap;
}
.gen-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.gen-lib-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.gen-lib-card:hover { border-color: var(--accent); box-shadow: 0 2px 12px rgba(108,99,255,.12); }
.gen-lib-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.gen-lib-card-title { font-size: 12px; font-weight: 700; color: var(--text); }
.gen-lib-card-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.gen-lib-card-stats {
  display: flex; gap: 10px;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.gen-lib-stat { font-size: 11px; color: var(--text-muted); }
.gen-lib-stat strong { color: var(--text); }
.gen-lib-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
}
.gen-lib-badge.approved, .gen-lib-badge.active { background: rgba(34,197,94,.15); color: #22c55e; }
.gen-lib-badge.draft { background: rgba(100,116,139,.15); color: #94a3b8; }
.gen-lib-badge.published { background: rgba(108,99,255,.15); color: var(--accent); }
.gen-lib-badge.scheduled { background: rgba(245,158,11,.15); color: #f59e0b; }
.gen-lib-badge.paused { background: rgba(239,68,68,.15); color: #ef4444; }
.gen-lib-badge.completed { background: rgba(34,197,94,.1); color: #22c55e; }

/* Canal color dots */
.cal-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 4px; margin-left: 10px;
}
.cal-dot:first-child { margin-left: 0; }
.cal-dot.instagram { background: #e1306c; }
.cal-dot.tiktok { background: #010101; border: 1px solid #69c9d0; }
.cal-dot.newsletter { background: #6c63ff; }
.cal-dot.telegram { background: #26a5e4; }
.cal-dot.blog { background: #f59e0b; }
.cal-dot.linkedin { background: #0a66c2; }
.cal-dot.youtube { background: #ff0000; }
.cal-dot.meta { background: #0866ff; }
.cal-dot.google { background: #ea4335; }
.cal-dot.taboola { background: #00a3e0; }

/* Calendar */
.gen-cal-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.gen-cal-title { font-size: 14px; font-weight: 700; color: var(--text); }
.gen-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}
.gen-cal-dayname {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--text-muted); padding: 4px 0; text-transform: uppercase;
}
.gen-cal-cell {
  min-height: 64px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 6px;
  font-size: 11px;
}
.gen-cal-cell.empty { background: transparent; border-color: transparent; }
.gen-cal-cell.today { border-color: var(--accent); }
.gen-cal-num {
  font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 3px;
}
.gen-cal-cell.today .gen-cal-num { color: var(--accent); font-weight: 800; }
.gen-cal-event {
  font-size: 11px; font-weight: 600;
  padding: 1px 5px; border-radius: 3px; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.gen-cal-legend {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px; font-size: 11px; color: var(--text-muted);
  padding-top: 10px; border-top: 1px solid var(--border);
}

/* ============ REGLAS ============ */
.gen-rules-list { display: flex; flex-direction: column; gap: 10px; }
.gen-rule-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  transition: box-shadow .15s;
}
.gen-rule-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.gen-rule-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}
.gen-rule-prio {
  width: 6px; height: 36px; border-radius: 3px; flex-shrink: 0;
}
.gen-rule-prio.high { background: #ef4444; }
.gen-rule-prio.medium { background: #f59e0b; }
.gen-rule-prio.low { background: #94a3b8; }
.gen-rule-info { flex: 1; min-width: 0; }
.gen-rule-name { font-size: 12px; font-weight: 700; color: var(--text); }
.gen-rule-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.gen-rule-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gen-rule-toggle {
  position: relative; display: inline-block; width: 34px; height: 18px; cursor: pointer;
}
.gen-rule-toggle input { opacity:0; width:0; height:0; }
.gen-toggle-slider {
  position: absolute; inset: 0; border-radius: 18px;
  background: var(--border); transition: .2s;
}
.gen-toggle-slider:before {
  content: ''; position: absolute;
  height: 12px; width: 12px; left: 3px; bottom: 3px;
  background: white; border-radius: 50%; transition: .2s;
}
.gen-rule-toggle input:checked + .gen-toggle-slider { background: var(--accent); }
.gen-rule-toggle input:checked + .gen-toggle-slider:before { transform: translateX(16px); }
.gen-rule-actions-btn { display: flex; gap: 4px; }

/* Rule detail / logs accordion */
.gen-rule-body {
  display: none;
  padding: 0 16px 14px;
  border-top: 1px solid var(--border);
}
.gen-rule-body.open { display: block; }
.gen-rule-condition {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 10px 0 8px;
  flex-wrap: wrap;
}
.gen-cond-tag {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 3px 9px; font-size: 11px; font-weight: 600;
}
.gen-cond-tag.metric { color: #6c63ff; border-color: rgba(108,99,255,.3); }
.gen-cond-tag.action-tag { color: #22c55e; border-color: rgba(34,197,94,.3); }
.gen-rule-stats {
  display: flex; gap: 16px; margin-bottom: 10px; flex-wrap: wrap;
}
.gen-rule-stat { font-size: 11px; color: var(--text-muted); }
.gen-rule-stat strong { color: var(--text); font-size: 12px; }
.gen-rule-log-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin: 10px 0 6px;
}
.gen-rule-log { display: flex; flex-direction: column; gap: 4px; }
.gen-rule-log-entry {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 11px; color: var(--text-muted);
  padding: 4px 8px; background: var(--surface-2); border-radius: 5px;
}
.gen-rule-log-entry .log-ts { color: var(--text-muted); white-space: nowrap; font-family: monospace; }
.gen-rule-log-entry .log-msg { color: var(--text); }
.gen-rule-log-entry .log-result { margin-left: auto; font-weight: 700; white-space: nowrap; }
.log-result.ok { color: #22c55e; }
.log-result.warn { color: #f59e0b; }
.log-result.skip { color: #94a3b8; }

/* Rule nicho / canal tags */
.gen-rule-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.gen-rule-tag {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 4px; border: 1px solid var(--border);
  color: var(--text-muted);
}
.gen-rule-tag.nicho-all { color: var(--accent); border-color: rgba(108,99,255,.3); }
.gen-rule-tag.nicho-fitness { color: #22c55e; border-color: rgba(34,197,94,.3); }
.gen-rule-tag.nicho-software { color: #3b82f6; border-color: rgba(59,130,246,.3); }
.gen-rule-tag.nicho-viajes { color: #f59e0b; border-color: rgba(245,158,11,.3); }
.gen-rule-tag.nicho-finanzas { color: #ec4899; border-color: rgba(236,72,153,.3); }

/* Modal */
.gen-modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.5);
  align-items: center; justify-content: center;
}
.gen-modal-overlay.open { display: flex; }
.gen-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 560px; max-width: 96vw;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.gen-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.gen-modal-body { padding: 16px 20px; }
.gen-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

/* ==========================================
   AUTO-GENERATION BOX
   ========================================== */
.gen-auto-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--surface);
}
.gen-auto-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .1s;
}
.gen-auto-header:hover { background: var(--surface-2); }
.gen-auto-body {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.gen-auto-badge {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(100,116,139,.15); color: #94a3b8;
  transition: all .2s;
}
.gen-auto-badge.on {
  background: rgba(34,197,94,.15); color: #22c55e;
}
.gen-auto-status {
  font-size: 11px; line-height: 1.6;
  background: rgba(108,99,255,.08); border: 1px solid rgba(108,99,255,.2);
  border-radius: 7px; padding: 8px 12px;
  color: var(--text); margin: 8px 0;
}

/* ==========================================
   CONTENT DETAIL MODAL — rich preview
   ========================================== */
.detail-meta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.detail-meta-chip {
  font-size: 11px; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 3px 9px;
}
.detail-meta-chip strong { color: var(--text); }
.detail-stats-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 10px; margin-bottom: 16px;
}
.detail-stat-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; text-align: center;
}
.detail-stat-val { font-size: 18px; font-weight: 800; color: var(--text); }
.detail-stat-lbl { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; }
.detail-content-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px;
  font-size: 12px; line-height: 1.8; color: var(--text);
  white-space: pre-wrap; max-height: 340px; overflow-y: auto;
}
/* Channel-specific preview frames */
.detail-email-frame {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 8px; overflow: hidden; margin-top: 0;
}
.detail-email-header {
  background: #f8fafc; border-bottom: 1px solid #e2e8f0;
  padding: 10px 14px; font-size: 11px; color: #64748b;
}
.detail-email-header strong { color: #1e293b; }
.detail-email-body {
  padding: 16px; font-size: 12px; line-height: 1.8; color: #1e293b;
  max-height: 300px; overflow-y: auto;
}
.detail-ig-frame {
  border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; max-width: 360px; margin: 0 auto;
  background: var(--surface);
}
.detail-ig-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.detail-ig-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.detail-ig-slides {
  display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
}
.detail-ig-slide {
  flex-shrink: 0; width: 100%; scroll-snap-align: start;
  padding: 14px 16px; background: var(--surface-2);
  min-height: 120px; border-right: 1px solid var(--border);
}
.detail-ig-caption { padding: 10px 12px; font-size: 11px; line-height: 1.6; color: var(--text); }
.detail-telegram-frame {
  background: #1c2536; border-radius: 10px; padding: 14px 16px;
  font-size: 12px; line-height: 1.7; color: #e2e8f0;
  max-height: 280px; overflow-y: auto;
}
.detail-telegram-bubble {
  background: #2563eb; border-radius: 12px 12px 12px 4px;
  padding: 10px 14px; display: inline-block; max-width: 85%;
  font-size: 12px; line-height: 1.7; color: #fff;
}
.detail-blog-frame {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 16px; background: var(--surface);
  font-size: 12px; line-height: 1.9; color: var(--text);
  max-height: 300px; overflow-y: auto;
}
.detail-blog-frame h2 { font-size: 16px; font-weight: 800; margin-bottom: 8px; color: var(--text); }
.detail-blog-frame h3 { font-size: 12px; font-weight: 700; margin: 10px 0 4px; color: var(--text); }
.detail-linkedin-frame {
  border: 1px solid #0a66c2; border-radius: 8px;
  padding: 14px 16px; background: var(--surface);
  font-size: 12px; line-height: 1.7; color: var(--text);
  max-height: 280px; overflow-y: auto;
}
.detail-reel-frame {
  background: #000; border-radius: 12px; padding: 16px;
  color: #fff; font-size: 12px; line-height: 1.7;
  max-height: 300px; overflow-y: auto;
}
.detail-reel-timecode {
  color: #94a3b8; font-size: 11px; font-weight: 700; text-transform: uppercase;
  font-family: monospace; margin-bottom: 2px;
}
.detail-reel-action { color: #22d3ee; font-size: 11px; font-style: italic; margin-bottom: 8px; }

/* ==========================================
   NEW NICHE WIZARD
   ========================================== */
.wizard-steps {
  display: flex; align-items: center; gap: 0;
  padding: 0 20px 16px; border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.wizard-step {
  display: flex; align-items: center; gap: 7px; flex: 1;
  position: relative;
}
.wizard-step:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: calc(100% - 90px); height: 1px;
  background: var(--border);
  left: 90px;
}
.wizard-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  border: 2px solid var(--border);
  color: var(--text-muted); background: var(--surface);
  transition: all .2s;
  position: relative; z-index: 1;
}
.wizard-step.active .wizard-step-num {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.wizard-step.done .wizard-step-num {
  background: #22c55e; border-color: #22c55e; color: #fff;
}
.wizard-step-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.wizard-step.active .wizard-step-label { color: var(--primary); }
.wizard-step.done .wizard-step-label { color: #22c55e; }

.wizard-panel { display: none; padding: 20px; }
.wizard-panel.active { display: block; }

.wizard-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: 10px;
}
.wizard-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 12px;
}
.wizard-row.triple { grid-template-columns: 1fr 1fr 1fr; }
.wizard-row.single { grid-template-columns: 1fr; }
.wizard-field { display: flex; flex-direction: column; gap: 4px; }
.wizard-field label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
}
.wizard-field input, .wizard-field select, .wizard-field textarea {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 10px; font-size: 12px; color: var(--text);
  font-family: inherit; outline: none; transition: border-color .15s;
}
.wizard-field input:focus, .wizard-field select:focus, .wizard-field textarea:focus {
  border-color: var(--primary);
}
.wizard-field textarea { resize: none; min-height: 62px; line-height: 1.5; }

/* Wizard sequence cards */
.wizard-sequence {
  display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
}
.wizard-seq-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 12px;
}
.wizard-seq-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.wizard-seq-content { flex: 1; }
.wizard-seq-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.wizard-seq-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.wizard-seq-example {
  margin-top: 5px; font-size: 11px; color: var(--primary);
  background: rgba(99,102,241,.08); border-radius: 4px;
  padding: 3px 8px; display: inline-block; font-style: italic;
}
.wizard-seq-badge {
  font-size: 11px; font-weight: 700; border-radius: 4px; padding: 2px 6px;
  text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0;
}
.wizard-seq-badge.auto { background: rgba(99,102,241,.15); color: var(--primary); }
.wizard-seq-badge.human { background: rgba(245,158,11,.15); color: #f59e0b; }
.wizard-seq-badge.ai { background: rgba(34,197,94,.12); color: #22c55e; }

/* Wizard channel grid */
.wizard-channels {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px;
}
.wizard-channel-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface-2); border: 2px solid var(--border);
  border-radius: 9px; padding: 10px 6px; cursor: pointer;
  transition: all .15s;
}
.wizard-channel-item.selected {
  border-color: var(--primary); background: rgba(99,102,241,.06);
}
.wizard-channel-item:hover { border-color: var(--primary); }
.wizard-channel-item span:first-child { font-size: 20px; }
.wizard-channel-item span:last-child {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; text-align: center;
}

/* Wizard ecosystem preview */
.wizard-ecosystem-preview {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin-top: 8px;
}
.wizard-eco-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.wizard-eco-row:last-child { border-bottom: none; }
.wizard-eco-icon { width: 24px; text-align: center; font-size: 14px; }
.wizard-eco-label { flex: 1; color: var(--text); font-weight: 600; }
.wizard-eco-agent { font-size: 11px; color: var(--primary); background: rgba(99,102,241,.1); padding: 1px 7px; border-radius: 4px; }
.wizard-eco-status { font-size: 11px; color: var(--text-muted); }

/* Wizard summary */
.wizard-summary-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px;
}
.wizard-summary-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
}
.wizard-summary-box-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: 4px;
}
.wizard-summary-box-val {
  font-size: 12px; font-weight: 700; color: var(--text);
}
.wizard-launch-badge {
  display: flex; align-items: center; gap: 10px;
  background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25);
  border-radius: 10px; padding: 12px 14px;
}
.wizard-launch-badge-icon { font-size: 22px; }
.wizard-launch-badge-title { font-size: 12px; font-weight: 700; color: #22c55e; }
.wizard-launch-badge-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ==========================================
   AI NICHE PROPOSALS
   ========================================== */
.ai-proposals-section {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--border);
}
.ai-proposals-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.ai-proposals-title {
  display: flex; align-items: center; gap: 8px;
}
.ai-proposals-title h3 {
  font-size: var(--text-base); font-weight: 700;
}
.ai-badge-tag {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; padding: 2px 8px; border-radius: 20px;
}
.ai-proposals-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.ai-proposal-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; cursor: pointer;
  transition: all .18s; position: relative; overflow: hidden;
}
.ai-proposal-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--proposal-color, var(--primary));
}
.ai-proposal-card:hover {
  border-color: var(--primary); transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.ai-proposal-icon { font-size: 26px; margin-bottom: 6px; }
.ai-proposal-name {
  font-size: 12px; font-weight: 800; color: var(--text);
  margin-bottom: 2px; line-height: 1.2;
}
.ai-proposal-sub {
  font-size: 11px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4;
}
/* Scoring bars */
.ai-score-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.ai-score-row { display: flex; flex-direction: column; gap: 2px; }
.ai-score-row-header {
  display: flex; align-items: center; justify-content: space-between;
}
.ai-score-lbl { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ai-score-val { font-size: 11px; font-weight: 700; color: var(--text); }
.ai-score-bar {
  height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden;
}
.ai-score-fill {
  height: 100%; border-radius: 2px;
  background: var(--proposal-color, var(--primary));
  transition: width .6s ease;
}
/* Overall score badge */
.ai-overall-score {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
}
.ai-overall-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ai-overall-val {
  font-size: 16px; font-weight: 900; color: var(--proposal-color, var(--primary));
}
.ai-overall-badge {
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: .04em;
}
.ai-overall-badge.high { background: rgba(34,197,94,.12); color: #22c55e; }
.ai-overall-badge.medium { background: rgba(245,158,11,.12); color: #f59e0b; }
.ai-overall-badge.emerging { background: rgba(99,102,241,.12); color: var(--primary); }
/* CTA button on card */
.ai-proposal-cta {
  width: 100%; margin-top: 6px; padding: 5px 0;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; font-size: 11px; font-weight: 700;
  color: var(--text-muted); cursor: pointer; text-align: center;
  transition: all .15s;
}
.ai-proposal-cta:hover {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* =====================================================
   PULSE DOT — Live indicator
   ===================================================== */
.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse-live 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); opacity: 1; }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); opacity: .8; }
}

/* =====================================================
   TOPBAR & KPI UPGRADES
   ===================================================== */
[data-theme="dark"] .topbar {
  background: rgba(8,12,20,0.85);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--glass-border);
}
[data-theme="dark"] .kpi-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.03);
  transition: transform var(--transition), box-shadow var(--transition);
}
[data-theme="dark"] .kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(79,142,247,0.06);
}
[data-theme="dark"] .kpi-card.accent {
  background: linear-gradient(135deg, rgba(79,142,247,0.12) 0%, rgba(0,212,255,0.06) 100%);
  border-color: rgba(79,142,247,0.3);
}
[data-theme="dark"] .chart-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .table-card {
  background: var(--surface);
  border-color: var(--glass-border);
}
[data-theme="dark"] .page-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
[data-theme="dark"] .nav-item.active {
  background: rgba(79,142,247,0.12);
  color: var(--accent);
  border-left: 2px solid var(--accent);
}
[data-theme="dark"] .nav-item:hover:not(.active) {
  background: rgba(79,142,247,0.06);
}
[data-theme="dark"] .nav-badge.running {
  background: rgba(34,197,94,.15);
  color: #22c55e;
}
[data-theme="dark"] .kpi-value {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
}
[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #6ea6ff 100%);
  box-shadow: 0 0 20px rgba(79,142,247,0.25);
}
[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 0 30px rgba(79,142,247,0.4);
  transform: translateY(-1px);
}

/* =====================================================
   TRAZABILIDAD PANEL
   ===================================================== */
.traz-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.traz-heading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.traz-accent { color: var(--accent, #4f8ef7); }
.traz-intro-text p { color: var(--text-muted); font-size: 12px; max-width: 540px; line-height: 1.6; }
.traz-live-badge {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600;
  color: var(--success);
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.2);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Chain visualization */
.traz-chain-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  margin-bottom: 20px;
  overflow-x: auto;
}
[data-theme="dark"] .traz-chain-card {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(79,142,247,0.04) 100%);
  border-color: var(--glass-border);
}
.traz-chain-title {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 20px;
}
.traz-chain {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: max-content;
  padding-bottom: 4px;
}
.traz-node {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  min-width: 110px;
  text-align: center;
  transition: all var(--transition);
  cursor: default;
}
[data-theme="dark"] .traz-node {
  background: rgba(17,24,39,0.8);
  border-color: rgba(79,142,247,0.15);
}
.traz-node:hover {
  border-color: var(--primary);
  box-shadow: 0 0 16px rgba(79,142,247,0.15);
  transform: translateY(-2px);
}
.traz-node-success {
  border-color: rgba(34,197,94,.3) !important;
  background: rgba(34,197,94,.05) !important;
}
.traz-node-icon { font-size: 18px; margin-bottom: 6px; }
.traz-node-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.traz-node-val { font-size: 11px; font-weight: 600; color: var(--text); }
.traz-arrow {
  color: var(--text-faint);
  flex-shrink: 0;
  width: 40px;
  opacity: .5;
  padding: 0 2px;
}
[data-theme="dark"] .traz-arrow { opacity: .35; color: var(--primary); }
.traz-arrow svg { width: 40px; height: 12px; }

.traz-ids-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.traz-id-chip {
  font-size: 11px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  color: var(--text-muted);
}
.traz-id-chip code { font-family: var(--font-mono); font-size: 11px; color: var(--primary); margin-right: 4px; }
.traz-id-success { border-color: rgba(34,197,94,.3); color: var(--success); }
.traz-id-success code { color: var(--success); }

/* Bottom row */
.traz-bottom-row {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
}
@media (max-width: 900px) { .traz-bottom-row { grid-template-columns: 1fr; } }

.traz-kpi-col, .traz-feed-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px;
}
[data-theme="dark"] .traz-kpi-col,
[data-theme="dark"] .traz-feed-col {
  background: var(--surface);
  border-color: var(--glass-border);
}
.traz-kpi-title {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px;
}
.traz-kpi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px;
}
.traz-kpi-item {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
}
.traz-kpi-val {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em;
  color: var(--text);
}
.traz-kpi-val.warn { color: var(--warning); }
.traz-kpi-val.error { color: var(--error); }
.traz-kpi-lbl { font-size: 11px; color: var(--text-muted); margin-top: 3px; line-height: 1.3; }

/* Tracking layers */
.traz-layers-title {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;
}
.traz-layers { display: flex; flex-direction: column; gap: 6px; }
.traz-layer {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  border-left: 3px solid var(--primary);
}
.traz-layer.layer-1 { border-left-color: #4f8ef7; }
.traz-layer.layer-2 { border-left-color: #00d4ff; }
.traz-layer.layer-3 { border-left-color: #22c55e; }
.traz-layer.layer-4 { border-left-color: #a855f7; }
.traz-layer.layer-5 { border-left-color: #f59e0b; }
.traz-layer-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary-muted);
  color: var(--primary);
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.traz-layer-body { flex: 1; min-width: 0; }
.traz-layer-name { font-size: 12px; font-weight: 600; color: var(--text); }
.traz-layer-desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.traz-layer-status {
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  padding: 2px 8px; border-radius: var(--radius-full);
}
.traz-layer-status.ok { background: rgba(34,197,94,.1); color: #22c55e; }
.traz-layer-status.warn { background: rgba(245,158,11,.1); color: #f59e0b; }

/* Live feed */
.traz-feed {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 460px; overflow-y: auto;
  padding-right: 4px;
}
.traz-feed::-webkit-scrollbar { width: 3px; }
.traz-feed::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.traz-feed-event {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  animation: feedIn .3s ease forwards;
}
@keyframes feedIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
.traz-feed-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 3px; flex-shrink: 0; }
.traz-feed-dot.conv { background: #22c55e; }
.traz-feed-dot.click { background: #4f8ef7; }
.traz-feed-dot.lead { background: #a855f7; }
.traz-feed-dot.fraud { background: #ef4444; }
.traz-feed-body { flex: 1; min-width: 0; }
.traz-feed-title { font-size: 12px; font-weight: 600; color: var(--text); }
.traz-feed-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono); }
.traz-feed-ts { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }

/* =====================================================
   STACK TECNOLÓGICO PANEL
   ===================================================== */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 960px) { .stack-grid { grid-template-columns: 1fr; } }
.stack-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px;
}
[data-theme="dark"] .stack-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border-color: var(--glass-border);
}
.stack-card-full { grid-column: 1 / -1; }
.stack-card-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--primary);
}
.stack-card-header h3 {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.stack-items { display: flex; flex-direction: column; gap: 10px; }
.stack-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--transition);
}
.stack-item:hover { border-color: var(--border); }
.stack-item-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
.stack-item-body { flex: 1; min-width: 0; }
.stack-item-name { font-size: 12px; font-weight: 600; color: var(--text); }
.stack-item-desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.stack-badge {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-full);
  flex-shrink: 0; white-space: nowrap;
}
.stack-badge.ok { background: rgba(34,197,94,.1); color: #22c55e; }
.stack-badge.idle { background: rgba(100,116,139,.1); color: #94a3b8; }
.stack-badge.warn { background: rgba(245,158,11,.1); color: #f59e0b; }

/* LLM Strategy */
.stack-llm-strategy {}
.llm-pie-visual {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.llm-ring { width: 80px; height: 80px; flex-shrink: 0; }
.llm-ring svg { width: 100%; height: 100%; }
.llm-ring svg text { font-family: var(--font-display); }
.llm-legend { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.llm-legend-item { display: flex; align-items: flex-start; gap: 8px; }
.llm-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
.llm-legend-title { font-size: 12px; font-weight: 600; color: var(--text); }
.llm-legend-desc { font-size: 11px; color: var(--text-muted); }

/* Tech layers grid */
.stack-layers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 768px) { .stack-layers-grid { grid-template-columns: repeat(2, 1fr); } }
.stack-layer-item {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
}
.stack-layer-label {
  font-size: 11px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 8px;
}
.stack-layer-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.stack-tag {
  font-size: 11px; font-weight: 500;
  background: var(--primary-muted);
  color: var(--primary);
  border: 1px solid rgba(79,142,247,.2);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* Costs */
.stack-costs { display: flex; flex-direction: column; gap: 10px; }
.stack-cost-row {
  display: grid;
  grid-template-columns: 1fr 120px 60px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.stack-cost-label { color: var(--text); }
.stack-cost-bar-wrap {
  background: var(--surface-3);
  border-radius: var(--radius-full);
  height: 6px;
  overflow: hidden;
}
.stack-cost-bar {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 1s ease;
}
.stack-cost-val { font-family: var(--font-mono); font-size: 11px; color: var(--text); text-align: right; }
.stack-cost-total {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--border);
  font-weight: 700;
}
.stack-cost-total-val {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 800; color: var(--primary);
  letter-spacing: -0.03em;
}

/* =====================================================
   AI ASSISTANT PANEL (Claude API)
   ===================================================== */
.ai-chat-wrap {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 130px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
[data-theme="dark"] .ai-chat-wrap {
  background: linear-gradient(180deg, rgba(13,18,32,0.95) 0%, rgba(8,12,20,0.98) 100%);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-glow);
}
.ai-chat-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.ai-chat-avatar { width: 40px; height: 40px; flex-shrink: 0; }
.ai-chat-avatar svg { width: 100%; height: 100%; }
.ai-chat-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); }
.ai-chat-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.ai-chat-status {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--success);
}

/* ── LO QUE QUEDÓ DE LA PANTALLA DEL ASISTENTE (2026-09-17) ─────────────────────────────
   Acá vivían `.ai-chat-suggestions`, `.ai-suggestion-label`, el pliegue de los chips
   (`.ai-chips-plegado` / `.ai-chips-abierto` / `.ai-chips-toggle`) y `.ai-que-sabe`. Se
   fueron con la sección `#panel-ai-assistant`: el asistente es un popup y sus ejemplos
   entran detrás de un botón, así que no hay nada que plegar.

   🔑 Lo encontró `tests-dashboard/variables-de-tema.test.js`, no yo. El pliegue usaba
   `var(--chips-alto)`, que ponía `aiMontarPliegue()` desde el JS; al borrar la función quedó
   una variable USADA y no definida por nadie. Una regla huérfana no se ve —no la aplica
   ningún elemento— y por eso la única forma de encontrarla es un test que cruce las dos
   listas. Si borrás JS que setea una custom property, corré ese test.

   `.ai-suggestions-row` y `.ai-suggestion-chip` SIGUEN VIVAS: las usa la hoja del popup. */

/* PISO DEL CHAT. `flex: 1` no alcanza: si lo de arriba crece, el chat se lo come igual.
   Con el piso, lo que sobra se scrollea arriba y la conversación nunca queda en un renglón. */
.ai-chat-messages { min-height: 260px; }
.ai-suggestion-chip {
  font-size: 12px; font-weight: 500;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.ai-suggestion-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-muted);
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}
.ai-chat-messages::-webkit-scrollbar { width: 3px; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.ai-msg { display: flex; }
.ai-msg-bot { justify-content: flex-start; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-bubble {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: var(--radius-xl);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}
.ai-msg-bot .ai-msg-bubble {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 4px var(--radius-xl) var(--radius-xl) var(--radius-xl);
  color: var(--text);
}
[data-theme="dark"] .ai-msg-bot .ai-msg-bubble {
  background: rgba(79,142,247,0.06);
  border-color: rgba(79,142,247,0.12);
}
.ai-msg-user .ai-msg-bubble {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-xl) 4px var(--radius-xl) var(--radius-xl);
}
.ai-msg-thinking .ai-msg-bubble {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-style: italic;
}
.ai-thinking-dots::after {
  content: '';
  animation: thinking-dots 1.2s step-end infinite;
}
@keyframes thinking-dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

.ai-chat-input-wrap {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: var(--surface-2);
}
.ai-chat-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  resize: none;
  outline: none;
  transition: border-color var(--transition);
  min-height: 42px;
  max-height: 140px;
  line-height: 1.5;
  font-family: var(--font-sans);
}
.ai-chat-input:focus { border-color: var(--primary); }
.ai-chat-input::placeholder { color: var(--text-muted); }
.ai-send-btn {
  width: 40px; height: 40px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
}
.ai-send-btn:hover { background: var(--primary-hover); transform: scale(1.05); }
.ai-send-btn:disabled { opacity: .4; pointer-events: none; }

/* =====================================================
   ENHANCED NAV BADGE COLORS
   ===================================================== */
.nav-badge { font-size: 11px; font-weight: 800; letter-spacing: .03em; }
[data-theme="dark"] .nav-badge.alert { background: rgba(239,68,68,.15); color: #ef4444; }

/* =====================================================
   MAIN CONTENT AREA UPGRADES
   ===================================================== */
.main-area {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* =====================================================
   MISC IMPROVEMENTS
   ===================================================== */
.section-header h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
/* 🔴 EL TAMAÑO DEL ENCABEZADO NO PUEDE DEPENDER DEL TEMA (2026-09-17).
   Acá había `font-size: 11px` y `letter-spacing: .05em` dentro de la regla de OSCURO, así que
   el mismo `<th>` medía 14px en claro y 11px en oscuro — y el dashboard corre en oscuro, o sea
   que el chico era el que se ve siempre. Un tema cambia colores; si además cambia la
   tipografía, la pantalla que se revisa en claro no es la que se usa.
   Medido sobre la pantalla de decisión: 71 encabezados, todos a 11px por esta regla, mientras
   sus propias celdas iban a 14px. El tamaño y el tracking pasan a la regla base, que vale para
   los dos temas; acá quedan sólo los colores, que es lo que un tema sí decide.

   ⚠️ NO ES «SUBIR»: es unificar, y en claro BAJA. Medido: oscuro 11 → 13px, claro 14 → 13px.
   Se elige 13 y no 14 porque el encabezado tiene que leerse como encabezado, un peldaño por
   debajo de su celda (14px) — pero un peldaño, no tres.
   ⚠️ Y el `letter-spacing` se queda en .05em, el valor que ya tenía el tema oscuro. La primera
   versión de esta regla lo bajó a .04em sin decirlo, justo cuando el pedido que la motivó era
   «hay poco espacio entre letras»: el único tracking que toca esta tanda no puede moverse para
   el lado contrario al del pedido. */
.data-table th {
  font-size: 13px;
  letter-spacing: .05em;
}
[data-theme="dark"] .data-table th {
  background: var(--surface-2);
  color: var(--text-muted);
}
[data-theme="dark"] .data-table tbody tr:hover {
  background: rgba(79,142,247,0.04);
}
[data-theme="dark"] .status-badge {
  font-weight: 700;
  letter-spacing: .02em;
}
[data-theme="dark"] .sidebar-footer {
  border-top-color: var(--glass-border);
}
[data-theme="dark"] .chart-card h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* =====================================================
   ANIMATED PIPELINE FLOW (dark mode)
   ===================================================== */
[data-theme="dark"] .pipeline-panel {
  background: var(--surface);
  border-color: var(--glass-border);
}
[data-theme="dark"] .pipeline-node {
  background: var(--surface-2);
  border-color: var(--glass-border);
}
[data-theme="dark"] .pipeline-node.active {
  border-color: rgba(79,142,247,0.5);
  box-shadow: 0 0 16px rgba(79,142,247,0.15);
}
[data-theme="dark"] .pipeline-connector {
  background: linear-gradient(90deg, rgba(79,142,247,0.4), rgba(0,212,255,0.3));
}

/* =====================================================
   AGENT CARDS — PREMIUM DARK
   ===================================================== */
[data-theme="dark"] .agent-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border-color: var(--glass-border);
  transition: all var(--transition);
}
[data-theme="dark"] .agent-card:hover {
  transform: translateY(-2px);
  border-color: rgba(79,142,247,0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 16px rgba(79,142,247,0.06);
}
[data-theme="dark"] .agent-card.running .agent-card-header {
  background: linear-gradient(135deg, rgba(79,142,247,0.08) 0%, rgba(0,212,255,0.04) 100%);
}
[data-theme="dark"] .agent-progress-fill {
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent, #00d4ff) 100%);
  box-shadow: 0 0 8px rgba(79,142,247,0.4);
}

/* =====================================================
   OVERVIEW ALERTS PANEL — DARK UPGRADES
   ===================================================== */
[data-theme="dark"] .alerts-panel {
  background: var(--surface);
  border-color: var(--glass-border);
}
[data-theme="dark"] .alert-item {
  border-bottom-color: var(--border-subtle);
}
[data-theme="dark"] .alert-item:hover {
  background: rgba(79,142,247,0.04);
}

/* =====================================================
   NAV GROUP LABELS
   ===================================================== */
[data-theme="dark"] .nav-label {
  color: rgba(79,142,247,0.5);
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 11px;
}

/* =====================================================
   TOPBAR AVATAR
   ===================================================== */
[data-theme="dark"] .avatar {
  background: linear-gradient(135deg, #4f8ef7, #00d4ff);
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 0 12px rgba(79,142,247,0.3);
}

/* =====================================================
   DATE FILTER BUTTONS
   ===================================================== */
[data-theme="dark"] .date-btn.active {
  background: rgba(79,142,247,0.15);
  color: var(--primary);
  border-color: rgba(79,142,247,0.3);
}
[data-theme="dark"] .date-btn:hover:not(.active) {
  background: rgba(79,142,247,0.06);
}

/* =====================================================
   FILTER SELECT — DARK
   ===================================================== */
[data-theme="dark"] .filter-select {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .filter-select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(79,142,247,0.15);
}

/* =====================================================
   LOG DRAWER
   ===================================================== */
[data-theme="dark"] .log-drawer {
  background: rgba(8,12,20,0.97);
  border-left-color: var(--glass-border);
  backdrop-filter: blur(20px);
}
[data-theme="dark"] .log-line.SUCCESS { color: #22c55e; }
[data-theme="dark"] .log-line.WARN { color: #f59e0b; }
[data-theme="dark"] .log-line.INFO { color: #4f8ef7; }
[data-theme="dark"] .log-line.ERROR { color: #ef4444; }

/* =====================================================
   DECISIONS GATES — DARK
   ===================================================== */
[data-theme="dark"] .gate-card {
  background: var(--surface);
  border-color: var(--glass-border);
}
[data-theme="dark"] .gate-card.pending {
  border-left-color: var(--warning);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(245,158,11,0.04) 100%);
}
[data-theme="dark"] .gate-card:hover {
  box-shadow: var(--shadow-md);
}

/* =====================================================
   LIVE CLOCK
   ===================================================== */
.live-clock {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  letter-spacing: .05em;
}

/* =====================================================
   TRAZABILIDAD SCROLLBAR REFINEMENT
   ===================================================== */
.traz-chain::-webkit-scrollbar { height: 3px; }
.traz-chain::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* =====================================================
   MAIN CONTENT SCROLL Z-INDEX FIX
   ===================================================== */
.main-content {
  position: relative;
  z-index: 1;
}

/* =====================================================
   AGENT 1 SCOUT — Panel Styles
   ===================================================== */
.scout-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--success-muted);
  color: var(--success);
}

.scout-net-health {
  font-weight: 600;
  letter-spacing: 0.02em;
}

#panel-scout .kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

#panel-scout .kpi-card {
  text-align: center;
}

#panel-scout .kpi-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  margin: var(--space-2) 0;
}

#panel-scout .kpi-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

#panel-scout .charts-row {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

#panel-scout .chart-card canvas {
  max-height: 220px !important;
  width: 100% !important;
  height: 100% !important;
}

#scoutOffersTable {
  font-size: var(--text-xs);
}

#scoutOffersTable th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

#scoutOffersTable td {
  padding: var(--space-2) var(--space-3);
  vertical-align: middle;
}

#scoutOffersTable tr:hover {
  background: var(--primary-glow);
}

#scoutLogs div {
  padding: 1px 0;
  border-bottom: 1px solid var(--border-subtle);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin {
  animation: spin 1s linear infinite;
}

/* =====================================================
   PANELES BLOQUEADOS — "Proximamente"
   Paneles que usan datos mock/ficticios se muestran
   con un overlay gris y una etiqueta de "Proximamente".
   El contenido original se mantiene (no se borra) pero
   no es interactivo.
   ===================================================== */
.panel-locked {
  position: relative;
  pointer-events: none;
  user-select: none;
}

/* El velo tapa CASI del todo. Antes era opacity .75, o sea que los datos de
   ejemplo seguían leyéndose por debajo: 22 paneles mostrando cifras inventadas
   en gris. Eso ES el ruido. Ahora el panel se lee como "no disponible todavía",
   no como "un panel roto lleno de números". */
.panel-locked::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.94;
  backdrop-filter: blur(3px);
  z-index: 50;
  border-radius: var(--radius-lg);
}

/* Cartel calmo: sin borde punteado, sin sombra grande, sin mayúsculas gritadas.
   Un panel que todavía no existe no necesita llamar la atención — solo explicar
   por qué está vacío y no dejarte esperando. */
.panel-locked::after {
  content: 'Próximamente · este panel todavía no tiene backend real';
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 51;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  text-align: center;
  max-width: 420px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Nav bloqueado: se baja el CONTRASTE, no la opacidad.
   Con opacity .45 el texto quedaba ilegible y encima el ícono se desvanecía;
   el resultado era una lista borrosa de 22 items que costaba leer. Bajando solo
   el color, el item se lee perfecto pero no compite con los que sí funcionan. */
.nav-item.nav-locked {
  opacity: 1;
  color: var(--text-faint);
  position: relative;
}
.nav-item.nav-locked svg,
.nav-item.nav-locked i {
  opacity: 0.5;
}
.nav-item.nav-locked:hover {
  color: var(--text-muted);
  background: var(--surface-2);
}

/* El chip PROX, lo más callado posible: sin fondo, sin pill. Está para informar
   al que lo busca, no para repetirse 22 veces en tu campo visual. */
.nav-item.nav-locked::after {
  content: 'PROX';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  opacity: 0.65;
  background: none;
  padding: 0;
}

/* Ocultar badges originales en items bloqueados */
.nav-item.nav-locked .nav-badge {
  display: none;
}

/* TN35 (revisado 2026-09-01, pedido de Tomás): al usuario demo (viewer) AHORA SÍ se le
   MUESTRAN los paneles en desarrollo — antes se ocultaban del menú (las dos reglas
   `display:none` de abajo, quitadas). Ahora los ve igual que el admin (chip en el nav +
   overlay `.panel-locked` que sigue velando los datos de ejemplo, Regla #1), pero con la
   etiqueta cambiada a "En desarrollo" para que quede clarísimo que no están terminados.
   Sólo rol viewer; el admin conserva su "Próximamente"/"PROX". Los controles internos de
   config/costos siguen ocultos para el viewer (reglas de más abajo, sin tocar). */
body.cf-viewer .panel-locked::after {
  content: 'En desarrollo · este panel todavía no tiene backend real';
}
body.cf-viewer .nav-item.nav-locked::after {
  content: 'EN DESARROLLO';
  /* Era 7,5px: por debajo de la mitad del piso. Un cartel que nadie puede leer no avisa nada. */
  font-size: 11px;
  letter-spacing: .04em;
}

/* TN35 — al usuario demo también se le ocultan los CONTROLES INTERNOS de admin que viven
   dentro de los paneles de agentes: son puro back-office (el viewer no puede tocarlos, el
   interceptor de fetch bloquea la escritura) y exponen proveedor de LLM y gasto interno —
   los tells más fuertes de "proyecto hecho con IA". Sólo visibilidad, sólo rol viewer.
   - .llm-toggle-card  → "Modelo LLM del Agente 2/5" (Kimi/Claude) y "Gasto del Agente 3 en
                          el modelo" (KIMI/moonshot/US$…). Verificado: la clase se usa SOLO
                          para esas 3 cards de admin.
   - .seo-toggle-card  → "DataForSEO del Agente 2" (API SEO paga + gasto). Clase usada 1 vez.
   - #cfKpiCosto/Medio → KPIs "COSTO LLM" y "COSTO/PÁGINA" del Agent 5.
   - #stopBtn-agent3   → el "Detener generación" suelto del Agent 3 (no vive en una card);
                          los de los Agents 2 y 5 ya caen dentro de .llm-toggle-card. */
body.cf-viewer .llm-toggle-card,
body.cf-viewer .seo-toggle-card { display: none !important; }
body.cf-viewer .kpi-card:has(#cfKpiCosto),
body.cf-viewer .kpi-card:has(#cfKpiCostoMedio) { display: none !important; }
body.cf-viewer div:has(> #stopBtn-agent3) { display: none !important; }

/* TN35 — patrón reutilizable para bits de admin/infraestructura que el usuario demo no debe
   ver (ej. la tabla "Cursor por cuenta (IMAP)" con cuentas de email reales). */
body.cf-viewer .cf-admin-only { display: none !important; }
/* Site Builder: al viewer se le ocultan los tabs de admin/dev — Audit Log, Scripts, Prompts
   (tell de IA) y "Create (deprecado)" — y el botón "Legacy" del Agent 5. Ve sólo Sitios y
   Notificaciones. Son herramientas internas; el admin las sigue viendo. */
body.cf-viewer .cf-track-btn[data-track="mpg-audit"],
body.cf-viewer .cf-track-btn[data-track="mpg-scripts"],
body.cf-viewer .cf-track-btn[data-track="mpg-prompts"],
body.cf-viewer .cf-track-btn[data-track="mpg-create"],
body.cf-viewer .cf-track-btn[data-track="legacy"] { display: none !important; }

/* Scout responsive */
@media (max-width: 768px) {
  #panel-scout .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #panel-scout .charts-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   AGENT 5 — CONTENT FACTORY STYLES
   ============================================================ */

/* Tab buttons */
.cf-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
}

.cf-tab {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: var(--font-sans);
}

.cf-tab:hover {
  color: var(--text);
  background: var(--surface-2);
}

.cf-tab.active {
  color: #a855f7;
  border-bottom-color: #a855f7;
}

/* Tab panels */
.cf-tab-panel {
  display: none;
}

.cf-tab-panel.active {
  display: block;
}

/* Platform filter buttons */
.cf-plat-btn,
.cf-seq-btn,
.cf-chan-btn,
.cf-week-btn {
  font-size: 11px !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-full) !important;
  transition: all 0.2s ease;
}

.cf-plat-btn.active,
.cf-seq-btn.active,
.cf-chan-btn.active,
.cf-week-btn.active {
  background: #a855f722 !important;
  color: #a855f7 !important;
  border-color: #a855f755 !important;
}

/* Data indicator badges for fictitious/real data */
.cf-badge-fictitious {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #f59e0b18;
  color: #f59e0b;
  border: 1px dashed #f59e0b44;
}

.cf-badge-real {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #22c55e18;
  color: #22c55e;
  border: 1px solid #22c55e44;
}

.cf-badge-prox {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #3b82f618;
  color: #3b82f6;
  border: 1px dashed #3b82f644;
}

/* Platform color indicators */
.cf-plat-meta { color: #1877f2; }
.cf-plat-google { color: #ea4335; }
.cf-plat-tiktok { color: #ff0050; }
.cf-plat-youtube { color: #ff0000; }
.cf-plat-native { color: #f59e0b; }
.cf-plat-email { color: #06b6d4; }
.cf-plat-telegram { color: #0088cc; }
.cf-plat-discord { color: #5865f2; }
.cf-plat-instagram { color: #e4405f; }
.cf-plat-linkedin { color: #0a66c2; }
.cf-plat-twitter { color: #1da1f2; }
.cf-plat-whatsapp { color: #25d366; }
.cf-plat-web { color: #a855f7; }

/* Quality score colors */
.cf-quality-excellent { color: #22c55e; font-weight: 700; }
.cf-quality-good { color: #3b82f6; font-weight: 600; }
.cf-quality-average { color: #f59e0b; font-weight: 600; }
.cf-quality-low { color: #ef4444; font-weight: 600; }

/* Content Factory specific table styling */
#panel-content-factory .data-table td {
  font-size: 11px;
  line-height: 1.4;
}

#panel-content-factory .data-table th {
  font-size: 11px;
}

/* Truncate long text in table cells */
#panel-content-factory .cf-truncate {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-content-factory .cf-truncate-sm {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Priority badges */
.cf-priority-high {
  background: #ef444418;
  color: #ef4444;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.cf-priority-medium {
  background: #f59e0b18;
  color: #f59e0b;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.cf-priority-low {
  background: var(--surface-3);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

/* Content Factory responsive */
@media (max-width: 768px) {
  #panel-content-factory .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #panel-content-factory .charts-row {
    grid-template-columns: 1fr;
  }
  .cf-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   CONTENT REVIEW OVERLAY (Agent 5)
   ============================================================ */

/* Tab buttons inside review modal */
.cr-tab {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.cr-tab:hover {
  color: var(--text);
  background: var(--surface-2);
}
.cr-tab.active {
  color: #a855f7;
  border-bottom-color: #a855f7;
}

/* Asset card inside review modal */
.cr-asset-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--surface-1);
  transition: border-color .15s;
}
.cr-asset-card:hover {
  border-color: #a855f755;
}
.cr-asset-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.cr-asset-title {
  font-weight: 700;
  font-size: 12px;
}
.cr-asset-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.cr-quality-bar {
  display: inline-block;
  height: 6px;
  border-radius: 3px;
  min-width: 50px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.cr-quality-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 3px;
  transition: width .3s;
}
.cr-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}
.cr-status-badge.produced   { background: #22c55e22; color: #22c55e; }
.cr-status-badge.scheduled  { background: #3b82f622; color: #3b82f6; }
.cr-status-badge.fatigued   { background: #f59e0b22; color: #f59e0b; }
.cr-status-badge.draft      { background: #64748b22; color: #64748b; }
.cr-preview {
  font-size: 11px;
  color: var(--text-muted);
  margin: 6px 0 10px;
  line-height: 1.5;
  max-height: 60px;
  overflow: hidden;
}
.cr-preview img {
  max-width: 120px;
  max-height: 80px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border);
}
.cr-fields-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.cr-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.cr-field-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-weight: 600;
  min-width: 90px;
  cursor: pointer;
}
.cr-field-row input[type="checkbox"] {
  accent-color: #a855f7;
  cursor: pointer;
}
.cr-field-value {
  flex: 1;
  padding: 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text);
  min-height: 24px;
  display: flex;
  align-items: center;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-field-value.editing {
  cursor: text;
}
.cr-field-value input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
}
.cr-asset-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 8px;
}
.cr-asset-actions button {
  font-size: 11px;
  padding: 4px 12px;
}
.cr-loading {
  text-align: center;
  padding: 40px 0;
  color: var(--text-faint);
  font-size: 12px;
}

/* ============================================================
   AGENT 6 — LAUNCHER STYLES
   ============================================================ */

/* Launcher tabs */
.la-tab {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: var(--font-sans);
}

.la-tab:hover {
  color: var(--text);
  background: var(--surface-2);
}

.la-tab.active {
  color: #ec4899;
  border-bottom-color: #ec4899;
}

.la-tab-panel {
  display: none;
}

.la-tab-panel.active {
  display: block;
}

/* Platform filter buttons */
.la-plat-btn {
  font-size: 11px !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-full) !important;
  transition: all 0.2s ease;
}

.la-plat-btn.active {
  background: #ec489922 !important;
  color: #ec4899 !important;
  border-color: #ec489955 !important;
}

/* Status badges */
.la-status-live {
  background: #22c55e18;
  color: #22c55e;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.la-status-test {
  background: #f59e0b18;
  color: #f59e0b;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.la-status-paused {
  background: var(--surface-3);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.la-status-rejected {
  background: #ef444418;
  color: #ef4444;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.la-status-pending {
  background: #3b82f618;
  color: #3b82f6;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

/* Review status icons */
.la-review-approved { color: #22c55e; }
.la-review-pending { color: #f59e0b; }
.la-review-rejected { color: #ef4444; }

/* Check severity colors */
.la-severity-critical {
  background: #ef444418;
  color: #ef4444;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.la-severity-warning {
  background: #f59e0b18;
  color: #f59e0b;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

/* Domain health */
.la-domain-active {
  color: #22c55e;
  font-weight: 700;
}

.la-domain-available {
  color: #3b82f6;
  font-weight: 600;
}

.la-domain-cooldown {
  color: #f59e0b;
  font-weight: 600;
}

/* Launcher table styling */
#panel-launcher .data-table td {
  font-size: 11px;
  line-height: 1.4;
}

#panel-launcher .data-table th {
  font-size: 11px;
}

/* Launcher responsive */
@media (max-width: 768px) {
  #panel-launcher .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #panel-launcher .charts-row {
    grid-template-columns: 1fr;
  }
  .la-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* Inline row badges (used in all tables) */
.badge-demo {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #f59e0b18;
  color: #f59e0b;
  border: 1px dashed #f59e0b44;
}

.badge-real {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #22c55e18;
  color: #22c55e;
  border: 1px solid #22c55e44;
}

.badge-prox {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #3b82f618;
  color: #3b82f6;
  border: 1px dashed #3b82f644;
}

.badge-mixed {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: linear-gradient(90deg, #22c55e18, #f59e0b18);
  color: #f59e0b;
  border: 1px dashed #f59e0b44;
}

/* ============================================================
   AGENT 7 — MONITOR & OPTIMIZER STYLES
   ============================================================ */

.mo-tab {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: var(--font-sans);
}

.mo-tab:hover { color: var(--text); background: var(--surface-2); }
.mo-tab.active { color: #ef4444; border-bottom-color: #ef4444; }

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

/* State badges */
.mo-state-excellent { background: #22c55e18; color: #22c55e; padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; }
.mo-state-good { background: #3b82f618; color: #3b82f6; padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; }
.mo-state-marginal { background: #f59e0b18; color: #f59e0b; padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; }
.mo-state-low { background: #f9731618; color: #f97316; padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; }
.mo-state-critical { background: #ef444418; color: #ef4444; padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; }

#panel-monitor .data-table td { font-size: 11px; line-height: 1.4; }
#panel-monitor .data-table th { font-size: 11px; }

@media (max-width: 768px) {
  #panel-monitor .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  #panel-monitor .charts-row { grid-template-columns: 1fr; }
}

/* ========================================================
   COUPON / OFFER FORM (cof) — Scout panel
   ======================================================== */
.cof-card {
  margin-top: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cof-card .card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}

.cof-card .card-header .section-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
}

.cof-card .card-header .cof-subtitle {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.cof-body { padding: var(--space-5); }

/* Tab bar */
.cof-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.cof-tab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
}

.cof-tab:hover { color: var(--text); }

.cof-tab.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px var(--border);
}

[data-theme="dark"] .cof-tab.active {
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px var(--border);
  color: #a78bfa;
}

/* Grid layout */
.cof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.cof-grid.hidden { display: none; }

.cof-field { display: flex; flex-direction: column; gap: 6px; }
.cof-field.full { grid-column: 1 / -1; }

.cof-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cof-label.req::after {
  content: "*";
  color: var(--error);
  font-weight: 700;
}

.cof-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.cof-input,
.cof-select,
.cof-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
  box-sizing: border-box;
}

.cof-textarea {
  resize: vertical;
  min-height: 64px;
  line-height: 1.5;
}

.cof-input::placeholder,
.cof-textarea::placeholder { color: var(--text-faint); }

.cof-input:hover,
.cof-select:hover,
.cof-textarea:hover { border-color: var(--text-faint); }

.cof-input:focus,
.cof-select:focus,
.cof-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.cof-input.uppercase { text-transform: uppercase; letter-spacing: 0.04em; }

.cof-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b8a' stroke-width='2.5' 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;
}

/* Merchant search box */
.cof-merchant-selected {
  font-size: 11px;
  color: var(--success);
  font-weight: 600;
  min-height: 14px;
}

.cof-merchant-selected:empty { display: none; }

/* Actions row */
.cof-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  border-top: 1px dashed var(--border-subtle);
}

.cof-submit {
  padding: 10px 22px;
  font-size: var(--text-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cof-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

.cof-msg {
  font-size: var(--text-xs);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cof-msg.error   { color: var(--error); }
.cof-msg.success { color: var(--success); }

[data-theme="dark"] .cof-card { background: var(--surface-2); }
[data-theme="dark"] .cof-card .card-header {
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
}
[data-theme="dark"] .cof-input,
[data-theme="dark"] .cof-select,
[data-theme="dark"] .cof-textarea { background: var(--surface); }
[data-theme="dark"] .cof-tab.active { background: var(--surface); }

@media (max-width: 640px) {
  .cof-grid { grid-template-columns: 1fr; }
  .cof-tab { font-size: var(--text-xs); padding: 8px 10px; }
}

/* ========================================================
   COUPON LIST TABLE — Scout panel
   ======================================================== */
.cpn-row {
  display: grid;
  /* code | merchant | country | expiry | disc | origin | meta | actions */
  grid-template-columns: 2fr 1.3fr 0.55fr 1fr 0.9fr 0.55fr 1fr 0.8fr;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  font-size: var(--text-sm);
}

.cpn-country {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

.cpn-actions { display: flex; justify-content: flex-end; }
.cpn-origin { display: flex; justify-content: flex-start; }

.cpn-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.cpn-btn:hover {
  background: var(--primary-muted);
  border-color: var(--primary);
  color: var(--primary);
}

.cpn-btn-test:hover { background: var(--success-muted); border-color: var(--success); color: var(--success); }
.cpn-btn-fallback { color: var(--text-muted); border-style: dashed; }
.cpn-btn-fallback:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }

/* ========================================================
   SCOUT MERCHANTS TABLE — fixed layout para que no se ensanchen
   los campos en paginas con merchants de nombres largos.
   ======================================================== */
#scoutOffersTable {
  table-layout: fixed;
  width: 100%;
}
#scoutOffersTable td {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* La columna Acciones tiene varios botones, permitir wrap */
#scoutOffersTable td:last-child {
  white-space: normal;
  overflow: visible;
}
/* Merchant column: el nombre debe truncarse, no expandirse */
#scoutOffersTable td:nth-child(2) > div > strong {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.cpn-row:hover:not(.cpn-thead) {
  background: var(--surface-2);
}

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

.cpn-thead {
  background: var(--surface-2);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.cpn-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cpn-code strong {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.02em;
}

.cpn-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cpn-merchant > div:first-child {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cpn-net {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.cpn-expiry { font-size: 12px; }

.cpn-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  margin-right: 4px;
}

.cpn-meta { display: flex; flex-wrap: wrap; gap: 4px; }

[data-theme="dark"] .cpn-thead { background: var(--surface-3); }
[data-theme="dark"] .cpn-row:hover:not(.cpn-thead) { background: var(--surface-3); }

@media (max-width: 900px) {
  .cpn-row { grid-template-columns: 1.5fr 1fr 1fr; }
  .cpn-row .cpn-disc, .cpn-row .cpn-meta, .cpn-row .cpn-origin, .cpn-row .cpn-country { display: none; }
}

/* ========================================================
   MERCHANT CARD MODAL — Scout panel (Fase 5)
   ======================================================== */
.mcard-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

.mcard-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text);
  font-size: var(--text-sm);
  font-family: inherit;
  box-sizing: border-box;
}

.mcard-input:focus {
  outline: none;
  border-color: var(--accent, #4f8ef7);
  box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.2);
}

.merchant-name-link {
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s ease;
}
.merchant-name-link:hover {
  border-bottom-color: var(--accent, #4f8ef7);
  color: var(--accent, #4f8ef7);
}

/* ========================================================
   MERCHANT CARD — AFFILIATE LINK CALLOUT (Fase 8.5)
   3 estados: A=read con link / B=read vacío / C=editando
   ======================================================== */
.mcard-aff-block {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: var(--space-4);
}
.mcard-aff-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mcard-aff-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mcard-aff-link {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.mcard-aff-link:hover {
  text-decoration: underline;
  background: var(--surface-2);
}
.mcard-aff-empty {
  flex: 1;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mcard-aff-empty-main { display: flex; align-items: center; gap: 6px; }
.mcard-aff-empty-sub  { font-size: 11px; opacity: 0.75; }
.mcard-aff-btn {
  padding: 5px 10px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.mcard-aff-btn:hover { background: var(--surface-3); border-color: var(--text-muted); }
.mcard-aff-btn-primary {
  background: var(--primary);
  color: var(--text-inverse, #fff);
  border-color: var(--primary);
}
.mcard-aff-btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--text-inverse, #fff);
}
.mcard-aff-input {
  flex: 1;
  min-width: 200px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
}
.mcard-aff-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow, rgba(79,142,247,0.2));
}
.mcard-aff-error {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--error-muted, rgba(220,38,38,0.1));
  color: var(--error);
  border-radius: var(--radius-md);
  font-size: 11px;
}

/* ========================================================
   MEMBERSHIP LOCK (Fase 9) — cartel destacado + toggle + icon de tabla
   ======================================================== */
.mcard-lock-banner {
  background: var(--warning-muted, #fef3c7);
  border: 1px solid var(--warning, #d97706);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--warning, #d97706);
  line-height: 1.5;
}
.mcard-lock-banner strong {
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
}
.mcard-lock-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.mcard-lock-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.ms-lock-icon {
  font-size: 11px;
  cursor: help;
  line-height: 1;
}

/* ========================================================
   USER MENU dropdown (avatar) — Fase 7
   ======================================================== */
.user-menu-item:hover {
  background: var(--surface-3, rgba(255,255,255,0.05));
}
.user-menu-item:focus {
  outline: none;
  background: var(--surface-3, rgba(255,255,255,0.05));
}

/* ========================================================
   MODAL INPUT CONTRAST FIX (Fase 8)

   Bug raíz: muchos inputs en modales usan inline
   `background:var(--surface-1)` pero --surface-1 no estaba definida.
   Resultado: el input quedaba transparent y, según el browser y el
   color-scheme, el texto podía verse blanco sobre blanco (o casi).

   Fix completo:
     1) --surface-1 ahora está definida en ambos temas.
     2) color-scheme declarado por tema → form controls nativos
        usan el set de colores correcto.
     3) Reglas defensivas a continuación: cualquier input/select/
        textarea dentro de un modal Scout fuerza color/background
        contra los tokens del tema, sin depender del inline style.
   ======================================================== */
#modalAddMerchant input,
#modalAddMerchant select,
#modalAddMerchant textarea,
#modalAddNetwork input,
#modalAddNetwork select,
#modalAddNetwork textarea,
#modalMerchantCard input:not([type="checkbox"]):not([type="radio"]),
#modalMerchantCard select,
#modalMerchantCard textarea,
#modalAddCoupon input,
#modalAddCoupon select,
#modalAddCoupon textarea,
#modalAddApi input,
#modalAddApi select,
#modalAddApi textarea,
#networkWizardOverlay input,
#networkWizardOverlay select,
#networkWizardOverlay textarea {
  color: var(--text);
  background: var(--surface-1);
  caret-color: var(--text);
}

#modalAddMerchant input::placeholder,
#modalAddMerchant textarea::placeholder,
#modalAddNetwork input::placeholder,
#modalAddNetwork textarea::placeholder,
#modalMerchantCard input::placeholder,
#modalMerchantCard textarea::placeholder,
#modalAddCoupon input::placeholder,
#modalAddCoupon textarea::placeholder,
#modalAddApi input::placeholder,
#modalAddApi textarea::placeholder,
#networkWizardOverlay input::placeholder,
#networkWizardOverlay textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.75;
}

/* Autofill (Chrome/Edge): el browser pisa background y color con su
   propio amarillo. Forzamos heredar el tema con un truco de inset
   shadow + WebkitTextFillColor. */
#modalAddMerchant input:-webkit-autofill,
#modalAddNetwork input:-webkit-autofill,
#modalMerchantCard input:-webkit-autofill,
#modalAddCoupon input:-webkit-autofill,
#modalAddApi input:-webkit-autofill,
#networkWizardOverlay input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-1) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

/* Network wizard usa esta clase ad-hoc en algunos inputs. */
.wizard-field input,
.wizard-field select,
.wizard-field textarea {
  color: var(--text);
  background: var(--surface-1);
}
.wizard-field input::placeholder,
.wizard-field textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.75;
}

/* === Phase 14.1 — Dashboard Exhaustivo Agent 5 === */
.cf-tabs { overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.cf-tabs::-webkit-scrollbar { height: 4px; }
.cf-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.cf-pill { padding: 4px 12px; border-radius: var(--radius-full); font-size: 11px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
.cf-pill:hover { border-color: var(--text-secondary); }
.cf-pill.active { background: #a855f7; color: #fff; border-color: #a855f7; }

.cf-pseo-level { display: none; }
.cf-pseo-level.active { display: block; }

.cf-status-pills { display: flex; gap: 4px; margin-bottom: 8px; }
.cf-status-pill { padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; border: 1px solid var(--border); background: transparent; cursor: pointer; }
.cf-status-pill.active { background: var(--surface-hover); border-color: var(--text-secondary); font-weight: 600; }
.cf-status-pill .badge { font-size: 11px; background: var(--border); padding: 1px 5px; border-radius: 8px; margin-left: 4px; }

.cf-search-input { width: 220px; padding: 5px 10px; font-size: 11px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary); }
.cf-search-input::placeholder { color: var(--text-muted); }

.cf-niche-selector { font-size: 11px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary); min-width: 160px; }

@keyframes cfToastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.cf-toast { position: fixed; right: 20px; z-index: 99999; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.3); max-width: 320px; animation: cfToastIn 0.2s ease; pointer-events: none; }

.cf-skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 50%, var(--surface) 75%); background-size: 200% 100%; animation: cfSkeleton 1.5s infinite; border-radius: var(--radius-md); height: 16px; }
@keyframes cfSkeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* === Phase 14.1-06 — Preview Modal Content === */
.cf-preview-page { font-size: 14px; line-height: 1.6; }
.cf-preview-page h1 { font-size: 24px; margin-bottom: 16px; }
.cf-preview-page h2 { font-size: 18px; margin: 20px 0 8px; }
.cf-preview-page h3 { font-size: 16px; margin: 16px 0 6px; }

.cf-preview-score-bar { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.cf-preview-score-bar .label { font-size: 11px; min-width: 80px; color: var(--text-muted); }
.cf-preview-score-bar .bar { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.cf-preview-score-bar .bar .fill { height: 100%; border-radius: 4px; }

.cf-preview-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cf-preview-comparison .side { padding: 16px; background: var(--surface-hover); border-radius: var(--radius-md); }

.cf-preview-coupon { padding: 8px 12px; background: #16a34a15; border: 1px dashed #16a34a; border-radius: var(--radius-md); margin: 6px 0; display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.cf-preview-coupon .code { font-weight: 700; font-family: monospace; letter-spacing: 1px; }

/* Creative Mockups */
.cf-mockup-frame { border-radius: 8px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.3); }
.cf-mockup-meta { background: #1877f2; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }
.cf-mockup-meta .avatar { width: 32px; height: 32px; border-radius: 50%; background: #fff3; }
.cf-mockup-meta .name { color: #fff; font-size: 12px; font-weight: 600; }
.cf-mockup-google { border: 1px solid #dfe1e5; border-radius: 8px; padding: 16px; max-width: 600px; font-family: Arial, sans-serif; }
.cf-mockup-google .url { color: #202124; font-size: 12px; }
.cf-mockup-google .title { color: #1a0dab; font-size: 18px; margin: 4px 0; cursor: pointer; }
.cf-mockup-google .desc { color: #4d5156; font-size: 12px; }
.cf-mockup-tiktok { background: #000; border-radius: 12px; max-width: 360px; aspect-ratio: 9/16; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; color: #fff; }

/* Email preview iframe */
.cf-email-iframe { width: 100%; min-height: 500px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }

/* Social post formats */
.cf-social-instagram { background: #fff; border: 1px solid #dbdbdb; border-radius: 8px; max-width: 468px; }
.cf-social-twitter { background: #15202b; border-radius: 16px; max-width: 500px; padding: 16px; color: #e7e9ea; font-size: 14px; }
.cf-social-linkedin { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; max-width: 520px; padding: 16px; font-size: 14px; }

.cf-gen-all-btn { font-size: 11px; padding: 5px 14px; }
.cf-gen-row-btn { font-size: 11px; padding: 3px 8px; }

/* Workflow Stepper */
.cf-stepper { display: flex; align-items: center; gap: 2px; }
.cf-step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; font-weight: 700; border: 2px solid var(--border); color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
.cf-step.completed { background: #a855f7; border-color: #a855f7; color: #fff; }
.cf-step.current { background: #a855f722; border-color: #a855f7; color: #a855f7; }
.cf-step-line { width: 16px; height: 2px; background: var(--border); }
.cf-step-line.completed { background: #a855f7; }

/* Inline Edit */
.cf-editable { outline: none; }
.cf-editable[contenteditable="true"] { outline: 2px dashed #a855f7; padding: 2px 4px; border-radius: 4px; min-height: 1em; }
.cf-editable[contenteditable="true"]:focus { outline-color: #ec4899; }

/* Image grid */
.cf-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.cf-image-card { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.cf-image-card img { width: 100%; height: 120px; object-fit: cover; }
.cf-image-card-info { padding: 6px 8px; font-size: 11px; color: var(--text-muted); }

/* ── AI Generator Module ── */
.aig-wizard-step { animation: fadeIn 0.2s ease; }
/* ── Notificaciones (panel Configuración) ──
   Pestañas con subrayado en vez de píldoras: la sección ya vive dentro de un
   panel con sus propias tarjetas, y otro bloque de botones rellenos competiría
   visualmente con el botón primario "Revisar ahora". */
.notif-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.notif-tab:hover { color: var(--text); }
.notif-tab.active { color: var(--text); border-bottom-color: var(--primary); }

/* Las reglas .data-legend se eliminaron el 2026-07-24 (B3) junto con los 7
   carteles de "Tipo de Datos" del dashboard: ya no las usa ningún panel. */

/* ── KPIs compactos (B4, arreglo 2026-07-24) ──────────────────────────────
   .kpi-value usa --text-xl (36px), pensado para números cortos como "14".
   Los KPIs del Agent 5 muestran textos de 9-10 caracteres ("US$0.4634"),
   que a ese tamaño piden ~320px y se salían de una tarjeta de ~150px.
   Esta variante escala con el ancho y, pase lo que pase con el dato, nunca
   desborda: se recorta con puntos suspensivos. */
.kpi-value--compact {
  font-size: clamp(15px, 1.45vw, 22px);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Segunda línea del KPI: el matiz (porcentaje, valor exacto, unidad).

   🔴 ENVUELVE, NO RECORTA (2026-09-16). Esto tenía `white-space: nowrap` + `ellipsis`, y en
   la home de producción cortaba el texto de dos tarjetas de seis: «sobre merchants activ…» y
   «ninguna red lo inform…». El matiz es justamente lo que dice CÓMO leer el número de arriba
   —«17,4% SOBRE MERCHANTS ACTIVOS» no es lo mismo que 17,4% a secas— así que recortarlo borra
   la parte que desambigua. Y no era un caso raro: las tarjetas miden 183px y el texto entra
   en dos líneas cómodo.

   El clamp a 2 líneas conserva lo que el nowrap protegía —que una cadena larga no estire la
   tarjeta— sin pagarlo con el significado. Con un texto corto se ve idéntico a antes. */
.kpi-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  margin-top: 1px;
}

/* ========================================================
   AGENTE 2 — TARJETAS DE NICHO Y TABLAS
   ========================================================
   POR QUÉ EXISTE ESTE BLOQUE. La tarjeta se dibujaba entera con estilos inline dentro de
   `js/04-agent2-niche.js`, así que ajustar un tamaño obligaba a editar un template string y
   no había forma de revisar la jerarquía de un vistazo. Peor: la jerarquía estaba invertida.
   Medido sobre el código anterior — el emoji decorativo iba a 22px y el score, que es el dato
   que decide, a 14px; el veredicto (ALTA/MEDIA/BAJA) a **7px**, por debajo de cualquier
   mínimo legible; y seis chips a 9px competían todos con el mismo peso, incluido uno que la
   propia UI declaraba irrelevante ("no puntúa").

   La regla acá es que hay TRES niveles y ninguno más:
     1. el score y su veredicto — lo que decide;
     2. la identidad — nombre, estado del flujo, cuántos merchants;
     3. las señales — chips, todos del mismo peso entre sí y menor que 1 y 2.

   TODO SALE DE LOS TOKENS DEL SISTEMA (`--space-*`, `--text-*`, `--radius-*`,
   `--transition`, colores semánticos). La primera versión de este bloque usaba px crudos:
   9 paddings, 11 font-size y ninguna transición del sistema. No se veía "mal diseñado", se
   veía AJENO — los mismos valores aproximados a mano al lado de componentes que sí seguían la
   escala. Si hace falta un tamaño que no está en la escala, la pregunta es si el tamaño está
   mal, no si falta un token. */

.a2-card {
  cursor: pointer;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--surface-1);
  transition: transform var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}
/* Mismo gesto que `.agent-card` y `.kpi-card`: el hover del dashboard levanta la tarjeta y
   marca el borde en primary. El de acá sólo cambiaba el fondo, o sea que se sentía de otra
   aplicación. Se pintan los tres lados y NO el izquierdo: ese lleva el color del estado. */
.a2-card:hover {
  border-top-color: var(--primary);
  border-right-color: var(--primary);
  border-bottom-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.a2-card--ok  { border-left-color: var(--success); }
.a2-card--no  { border-left-color: var(--error); opacity: .62; }
.a2-card--wip { border-left-color: var(--info); }

.a2-card__top   { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.a2-card__id    { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
/* El icono baja de 22px: es decoración y estaba 1,6x más grande que el score. */
.a2-card__icon  { font-size: var(--text-base); line-height: 1.3; flex-shrink: 0; }
.a2-card__idtext { min-width: 0; }
.a2-card__name  { font-weight: 650; font-size: var(--text-sm); line-height: 1.25; overflow-wrap: anywhere; }
.a2-card__meta  { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }

/* Estado del FLUJO (borrador → pendiente → aprobado/rechazado). Eje distinto del veredicto
   del score: antes las dos taxonomías se pintaban igual y se leían como lo mismo. */
.a2-pill { font-size: var(--text-xs); font-weight: 600; padding: 1px var(--space-2); border-radius: var(--radius-full); white-space: nowrap; }
.a2-pill--ok  { background: var(--success-muted); color: var(--success); }
.a2-pill--no  { background: var(--error-muted);   color: var(--error); }
.a2-pill--wip { background: var(--info-muted);    color: var(--info); }

.a2-card__scorewrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); margin-left: auto; flex-shrink: 0; }
.a2-score {
  min-width: 56px; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--a2-score-color, var(--text-muted)) 12%, transparent);
  border: 1.5px solid var(--a2-score-color, var(--text-muted));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* Los scores se comparan de un vistazo entre tarjetas: sin cifras de ancho fijo, un 72
     ocupa distinto que un 11 y la columna baila. */
  font-variant-numeric: tabular-nums lining-nums;
}
.a2-score__n     { font-size: var(--text-xl); font-weight: 700; color: var(--a2-score-color, var(--text-muted)); line-height: 1; }
.a2-score__n.is-stale { text-decoration: line-through; opacity: .5; }
/* El veredicto estaba a 7px. A la escala del sistema se lee, que era todo el problema. */
.a2-score__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; color: var(--a2-score-color, var(--text-muted)); opacity: .85; }

.a2-card__del {
  width: 24px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0; background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--text-muted);
  font-size: var(--text-xs); line-height: 1; cursor: pointer; opacity: .7;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.a2-card__del[data-locked="1"] { opacity: .3; }
.a2-card__del:hover { opacity: 1; }
.a2-card__del:not([data-locked="1"]):hover { background: var(--error); color: var(--text-inverse); border-color: var(--error); }

.a2-card__desc {
  font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45;
  margin-bottom: var(--space-3); max-height: 2.9em; overflow: hidden;
}
.a2-card__reject { font-size: var(--text-xs); color: var(--error); margin-bottom: var(--space-2); }
/* UNA SOLA FILA. Medido: con los cinco chips sueltos, 2 de cada 3 tarjetas los partían en
   TRES filas y la tarjeta se volvía un muro de etiquetas del mismo peso. El JS muestra los
   que deciden y colapsa el resto en un "+N" que los lista en el tooltip. */
.a2-card__chips  { margin-top: auto; display: flex; gap: var(--space-2); align-items: center; flex-wrap: nowrap; overflow: hidden; }

/* ---- LA BANDA DE DATOS (2026-09-17) ----
   Los cinco datos que deciden si vale la pena abrir un nicho —de qué país es, qué audiencia
   tiene, si el EPC está medido, cuánto material hay y cuándo se creó— en posición FIJA.
   Medido antes de este cambio: los chips escondían 2,59 por tarjeta y hasta 4, así que cuál
   de esos cinco veías dependía del ancho de la ventana.
   Se envuelve (`wrap`) en vez de colapsar: acá nada se esconde. En una tarjeta angosta pasan
   a dos filas, que es peor que una fila pero mucho mejor que un "+3". */
.a2-card__datos {
  /* GRILLA de 3 y no `flex-wrap`: con flex, cuál dato caía a la segunda fila dependía del
     largo del texto de los anteriores, así que dos tarjetas vecinas repartían distinto los
     mismos cinco datos y la vista en columna se perdía igual. Con 3 columnas fijas cada dato
     está SIEMPRE en el mismo lugar de la tarjeta. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.a2-dato { display: flex; flex-direction: column; gap: 1px; min-width: 0; cursor: help; }
.a2-dato__k {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}
/* `tabular-nums` para que los números se comparen en vertical entre tarjetas: sin cifras de
   ancho fijo, una columna de audiencias no se puede leer de un vistazo. */
.a2-dato__v {
  font-size: var(--text-xs); font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
  /* `nowrap` solo NO alcanza en una grilla de columnas iguales: un país multipaís
     («GB +2 · 63%») desborda su celda y se pega al número de al lado — medido, se leía
     «GB +2 · 63%147.235». Se recorta con elipsis y el valor completo queda en el tooltip,
     que ya lo tenía. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.a2-dato--alerta .a2-dato__v { color: var(--warning); }

/* La descripción que FALTA se declara, no se rellena con la frase que arma el sistema
   («Merchants de awin, cj. Destacados: …»), que ocupaba dos líneas para no decir de qué es
   el nicho. Ver `a2DescripcionEsAutomatica`. */
.a2-card__desc--falta { color: var(--text-muted); font-style: italic; opacity: .8; }

/* Chip: la escala del sistema. Antes 9px, y con seis apilados la tarjeta era ilegible. */
.a2-chip {
  font-size: var(--text-xs); line-height: 1.5;
  padding: 2px var(--space-2); border-radius: var(--radius-full);
  background: var(--surface-3); color: var(--text-muted);
  white-space: nowrap; flex-shrink: 0;
  font-variant-numeric: tabular-nums lining-nums;
}
.a2-chip--warn { color: var(--warning); background: var(--warning-muted); }
.a2-chip[title] { cursor: help; }

/* La confianza califica al score: va pegada a él y se lee, no a 8px al costado. */
.a2-conf { font-size: var(--text-xs); font-weight: 650; white-space: nowrap; cursor: help; font-variant-numeric: tabular-nums lining-nums; }
.a2-conf--baja { color: var(--warning); }
.a2-conf--ok   { color: var(--text-muted); }

/* ---- TABLAS DEL PANEL ----
   `tabular-nums` es la diferencia entre una columna de números y una columna de números que
   se puede COMPARAR: sin cifras de ancho fijo, el 1 es más angosto que el 8 y los decimales
   no caen alineados, que es exactamente lo que hace que una tabla de datos se vea sucia.
   El sistema ya lo usa en `.data-table`; estas tablas se escriben desde el JS y no lo
   heredaban. Medido antes del fix: 0 de 21 celdas numéricas lo tenían. */
.a2-tabla { font-variant-numeric: tabular-nums lining-nums; }
.a2-tabla th { font-weight: 600; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   .card / .card-header — el contenedor genérico del dashboard
   ───────────────────────────────────────────────────────────────────────────
   Agregado 2026-08-11. Estas dos clases se usaban en 76 lugares repartidos
   por 6 paneles (Agent 3: 15, Agent 4: 11, Agent 5: 22, Agent 6: 9, Agent 7: 14,
   overview: 5) y NO EXISTÍAN en esta hoja: sólo estaban `.kpi-card`,
   `.chart-card`, `.table-card`, y un `.card-header` anidado bajo `.cof-card`.
   O sea que los 76 contenedores renderizaban como `<div>` pelado — sin borde,
   sin fondo, sin padding, sin radio. Ése es el "parece un Word" que reportó
   Tiago en el panel del Agent 3: las tablas y los KPIs se veían bien porque
   tienen clase propia, y todo lo demás quedaba como texto suelto apilado.

   El Agent 2 no las usa (0 apariciones): su panel ya había sido migrado a
   clases propias, y por eso era el único que se veía terminado.

   Los valores calcan `.table-card` + `.table-header`, que es el contenedor
   equivalente que sí estaba definido, para que todo el dashboard quede con la
   misma caja y no aparezca un tercer estilo de tarjeta.
   ═══════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.card-header h3 { font-size: var(--text-sm); font-weight: 600; margin: 0; }
/* Una .card que sólo envuelve una tabla no necesita padding propio: la tabla ya
   trae el suyo. Las que llevan texto//grillas lo ponen inline, como ya hacían. */
.card > .data-table { margin-bottom: 0; }

/* Grilla de tarjetas (Agent 2, previsualización del nicho). El `gap` separa: una `.card`
   acá NO lleva su margen inferior, que la encogería y le dejaría un hueco abajo — las
   tarjetas de una fila dejarían de terminar a la misma altura. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.card-grid > .card { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SECCIÓN PLEGABLE (`<details class="card eco-acc">`) — Agent 3, 2026-08-11.

   El detalle de un ecosistema tiene nueve secciones y sólo las tres primeras
   importan para decidir. Con todo expandido a la vez había que scrollear el
   detalle entero para encontrar cualquier cosa (D2: resumen arriba, el resto
   plegado). Se usa `<details>` nativo: abre y cierra sin una línea de JS, y el
   estado del teclado/lector de pantalla ya viene resuelto por el navegador.

   El header calca `.card-header` para que un acordeón cerrado y una tarjeta
   normal se lean como la misma caja.
   ═══════════════════════════════════════════════════════════════════════════ */
.eco-acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;              /* Firefox */
  user-select: none;
}
.eco-acc > summary::-webkit-details-marker { display: none; }  /* Safari/Chrome */
.eco-acc > summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform .15s ease;
  margin-left: auto;
  flex-shrink: 0;
}
.eco-acc[open] > summary::after { transform: rotate(-135deg); }
.eco-acc[open] > summary { border-bottom: 1px solid var(--border); }
.eco-acc > summary:hover { background: var(--surface-2); }
/* El resumen de la derecha ("8 canales · 2 pagos") es contexto, no título: tiene
   que poder leerse de un vistazo sin competir con el nombre de la sección. */
.eco-acc-meta {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-muted);
  text-align: right;
}
/* ═══════════════════════════════════════════════════════════════════════════
   EDITAR DONDE SE MUESTRA (`.dec-editar`) — «Nicho (fusión 3+4)», 2026-09-17.

   Reemplaza una barra de cinco botones que estaba arriba de todo. Tiago: «que se
   edite de donde se muestra». La acción vive en el encabezado del acordeón que
   muestra ese dato, y el editor se abre adentro de ese mismo acordeón.

   🔴 NO SE ESTILA COMO BOTÓN a propósito. Un `.btn-ghost` en cada encabezado
   convierte la lista de bloques en una columna de botones — que es justo lo que
   se sacó. Es texto atenuado que se enciende al pasar por encima: presente
   cuando se lo busca, invisible cuando se está leyendo.

   El `margin-left:auto` va sobre `.eco-acc-meta`, no sobre la acción: el
   `<summary>` es flex con `space-between`, y al pasar de dos hijos a tres el
   reparto separaba el resumen del título. Con `auto` en el resumen, el título
   queda pegado a la izquierda y resumen+acción viajan juntos a la derecha,
   cualquiera sea la cantidad de hijos.
   ═══════════════════════════════════════════════════════════════════════════ */
.eco-acc > summary > .eco-acc-meta { margin-left: auto; }
.dec-editar, .dec-congelado {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.dec-editar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font-family: inherit;
  cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.dec-editar:hover { color: var(--primary); background: var(--primary-muted); }
.dec-editar:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* El sello del ecosistema aprobado. No es un botón: no se puede editar, y el
   motivo completo está una vez arriba de la sección. */
.dec-congelado {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: help;
}
/* El sello lleva `tabindex` para que el motivo se pueda alcanzar sin mouse (ver js/11), y todo
   lo que entra en el orden de tabulación tiene que verse cuando está enfocado. */
.dec-congelado:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.eco-acc-body > .data-table { margin-bottom: 0; }
/* Las tablas del Agent 3 se envolvieron en `.table-wrap` (scroll horizontal propio: en 1440px
   la de canales se cortaba y sus botones quedaban inalcanzables). El selector de arriba es de
   HIJO DIRECTO, así que con el wrapper en el medio dejaba de aplicar y volvía el margen. */
.eco-acc-body > .table-wrap > .data-table { margin-bottom: 0; }

/* ── UN ACORDEÓN ADENTRO DE OTRO (2026-09-21) ──────────────────────────────────────────────
   La pantalla de decisión tiene 33 bloques, todos hermanos y todos `<details class="card
   eco-acc">`. Medido en el navegador: plegada mide 5.423px, y 1.669 de esos son los 33
   encabezados uno abajo del otro — una lista donde «Quién firmó y cuándo» pesa lo mismo que
   el veredicto. Van a quedar agrupados en secciones, o sea un acordeón adentro de otro.

   🔑 EL DE ADENTRO NO ES UNA TARJETA NUEVA: comparte la caja del padre. Sin esto quedan dos
   bordes, dos radios y dos márgenes encajados, que es lo que `.card` (con su `border`,
   `border-radius` y `margin-bottom`) hace cuando se anida. El repo ya tenía el caso previsto
   una sola vez, para `.card-grid > .card`.

   ⚠️ Medido antes de escribirlo: hoy `.eco-acc-body > .eco-acc` y `.eco-acc-body > .card`
   matchean CERO elementos en toda la pantalla, así que esto no cambia nada de lo que se ve.
   Es la base para el commit que mueve el markup, y se separa a propósito para que ese commit
   no mezcle «se movió un bloque» con «cambió cómo se ve un bloque».

   ⚠️ Y nada de `position: sticky` en el `<summary>` de un nivel: `.card` trae
   `overflow: hidden`, que lo anula sin avisar. La barra fija de esta pantalla va en el
   encabezado del panel, que no es `.card` — ahí sí funciona, porque el contenedor que
   scrollea es `.main-content` y `.panel` no declara `overflow`. */
.eco-acc-body > .eco-acc,
.eco-acc-body > .card {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin: 0;
  background: none;
}
/* El primero no lleva línea arriba: ya la tiene el borde inferior del `<summary>` del padre. */
.eco-acc-body > .eco-acc:first-child,
.eco-acc-body > .card:first-child { border-top: 0; }

/* El nivel se distingue por PESO, no por sangría: a 390px una sangría por nivel se come el
   ancho, y esta pantalla ya tiene que entrar en cuatro ventanas distintas. */
.dec-nivel > summary {
  font-size: var(--text-base);
  background: var(--surface-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AGENT 4 — BUDGET & ROI OPTIMIZER
   Hasta el 2026-08-19 este panel no tenía NI UNA regla acá (`grep budget
   styles.css` daba 0): todo eran estilos inline, y las clases que el JS
   escribía —`.budget-tab`, `.budget-tab.active`, `.badge`, `.badge-success`,
   `.badge-warning`, `.badge-danger`— no existían en ninguna hoja. El mismo
   patrón del `.card` de agosto: 76 usos sin una sola definición.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 🔴 UNA SOLA PESTAÑA PARA LOS TRES PANELES (2026-09-11). Los Agentes 2, 3 y 4 tenían la
   MISMA pestaña escrita tres veces: `.niche-tab` y `.eco-tab` con todo el estilo inline en
   cada botón del partial —padding, radio, borde inferior, tamaño— y `.budget-tab` acá. Se
   veían iguales por copia, no por compartir nada: el día que una cambiara, las otras dos se
   quedaban atrás, y el subrayado activo del 2 y del 3 lo pintaba el JS a mano porque no había
   clase que lo hiciera.
   `.panel-tab` es la definición única. Las tres viejas quedan como alias para no tocar el
   `querySelectorAll` de cada panel, que es lo que rompe un renombre masivo.

   Pestañas de clasificación (Todos / Viables / Marginales / …). El JS hacía
   `classList.toggle('active')` sobre una clase inexistente y encima pintaba el
   borde inline: el toggle era decorativo. */
.panel-tab,
.niche-tab,
.eco-tab,
.budget-tab {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.panel-tab:hover, .niche-tab:hover, .eco-tab:hover,
.budget-tab:hover { color: var(--text); background: var(--surface-2); }
.panel-tab.active, .niche-tab.active, .eco-tab.active,
.budget-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--surface-2);
  font-weight: 600;
}

/* Los avisos de la cabecera del detalle. Antes eran ocho líneas de 10px, todas
   del mismo tamaño, con lo más caro de la pantalla escrito para no leerse: que
   el veredicto es frágil, que todo es proyección, que la CVR está supuesta.
   Un aviso que cambia una decisión compite en jerarquía con el veredicto.
   (El JS los pintaba con `background:var(--warning)1a` — concatenar un sufijo a
   un `var()` no es CSS válido, así que no tenían ni fondo ni borde.) */
/* El menú «⋯» de la cabecera del plan. Es un `<details>` para no necesitar JS: se abre con
   un clic, se cierra con Escape y con un clic afuera, y no hay listener que registrar en cada
   repintado del panel — que es como se acumulaban antes. El `list-style:none` va también acá
   porque Safari pinta el triangulito con `::-webkit-details-marker`. */
.b-menu > summary { list-style: none; }
.b-menu > summary::-webkit-details-marker { display: none; }
.b-menu > summary::marker { content: ""; }

.b-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: help;
}
.b-chip--warn  { background: var(--warning-muted); color: var(--warning); border-color: var(--warning); }
.b-chip--error { background: var(--error-muted);   color: var(--error);   border-color: var(--error); }
.b-chip--ok    { background: var(--success-muted); color: var(--success); border-color: var(--success); }
.b-chip--info  { background: var(--info-muted);    color: var(--info);    border-color: var(--info); }
/* Lo usa `budgetChipMotor` para el plan calculado con el motor del documento de José. Va con el
   acento y no con `--info` porque no es un aviso: es la identidad del cálculo, y dos planes de
   los dos lados de ese cambio no son comparables. Antes el chip seteaba `var(--accent)18` inline
   — el truco del alfa de dos dígitos sólo anda con hex, así que el fondo se caía entero. */
.b-chip--accent{ background: var(--accent-muted);  color: var(--accent);  border-color: var(--accent); }

/* `.badge` y sus variantes las escribe `budgetLoadThresholds`. No existían: la
   hoja tiene `.badge-ok/-review/-pause/-scale`, con otros nombres. */
.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge-success { background: var(--success-muted); color: var(--success); border-color: var(--success); }
.badge-warning { background: var(--warning-muted); color: var(--warning); border-color: var(--warning); }
.badge-danger  { background: var(--error-muted);   color: var(--error);   border-color: var(--error); }

/* El resumen plegable del Historial de corridas: una línea que no puede
   desbordar la card por más largo que sea el motivo. */
/* Las dos reglas de `#budgetRunsResumen` / `#budgetRunsHeader` se borraron el 2026-09-10:
   apuntaban a los contenedores del historial de corridas, que no existían en ningún partial
   y cuyo JS también se borró. Una regla sin destino no molesta, y por eso sobrevive: nadie
   la ve fallar. */

/* A 1280px los 8 KPIs del detalle daban ~140px por tarjeta contra los 200px que
   `.kpi-grid` asume, y los labels se cortaban. Ningún otro panel del dashboard
   se quedó sin su media query. */
@media (max-width: 1400px) {
  #panel-budget .kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }
  #panel-budget #budgetMetricsKPIs { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 860px) {
  #panel-budget .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  #panel-budget #budgetMetricsKPIs { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Los `<select>` del panel heredaban el `color-scheme: dark` global de
   `index.html`, así que en tema claro el desplegable nativo se abría oscuro
   sobre un panel blanco.
   Un solo selector alcanza: este dashboard SIEMPRE fija `data-theme` (el
   `<html>` nace en `dark` y el toggle escribe `light`), así que no existe el
   caso "sin atributo, según el sistema" que justificaría un `:not(...)`. */
[data-theme="light"] #panel-budget select { color-scheme: light; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   PULIDO VISUAL (2026-09-17) — legibilidad y paleta de gráficos
   ══════════════════════════════════════════════════════════════════════════════════════

   🔴 EL PISO TIPOGRÁFICO. Medido sobre la pantalla de decisión antes de esto: **el 49% del
   texto estaba por debajo de 11px** (372 elementos en 10px exacto, más 9px y 9,5px), y había
   TRECE tamaños distintos —9 · 9,5 · 10 · 10,5 · 11 · 11,5 · 12 · 12,5 · 13 · 14 · 15 · 16—
   que no forman una escala sino ruido. La guía de accesibilidad es explícita en que por debajo
   de 14px la lectura se degrada para mucha gente y 10px queda muy lejos del umbral.
   Se subió el piso a 11px en 1.334 lugares y se colapsaron los medios pasos.

   ⚠️ Lo que NO se hizo: subir todo a 16px. Este es un panel denso de decisión, no una página
   de lectura; a 16px las tablas de doce meses y las tres columnas comparadas no entran. El
   piso protege lo ilegible sin romper lo que ya funciona.

   🔴 SEGUNDA PASADA, Y 11px SEGUÍA SIENDO POCO (2026-09-17, lo señaló Tiago: «hay poco espacio
   entre letras», «el tamaño de la mayoría del texto»). Medido sobre el RENDER de la pantalla
   de decisión —no sobre el fuente, que es lo que hacía que la pasada anterior se creyera
   terminada—: **el 66% del texto se veía a 11px** (796 de 1.207 elementos con texto propio).
   Se subió el piso a 12px en `js/05`, `js/11` y el partial de esa pantalla —**604**
   declaraciones: 531 + 71 + 2—, quedó 0% por debajo de 12, y se agregó la interlínea heredada
   de más abajo. Lo fija `tests-dashboard/render-legibilidad-decidir.js`, que mide lo que el
   navegador calcula y corre en los DOS temas.
   🔴 El mensaje del commit `477888d5` dice «682 lugares»: **es falso**, y el error vale
   anotarlo porque es el mismo que este bloque denuncia. 682 es la cantidad de elementos a 11px
   que devuelve el navegador en tema CLARO; las ediciones al fuente son 604. Se publicó una
   medición del render como si fuera un conteo de código. `grep -c` cuenta LÍNEAS (522 en
   `js/05`) y `grep -o | wc -l` cuenta OCURRENCIAS (531): son dos preguntas distintas.
   ⚠️ El resto del dashboard sigue con piso 11: subirlo entero es otra tanda y toca archivos
   de los que hay otras sesiones encima. La escala global es 11 · 12 · 13 · 14 · 16 · 18 más
   los peldaños de display (20 · 22 · 24 · 26 · 30 · 32). */

/* Interlineado: el 1,2 por defecto del navegador apelmaza los párrafos explicativos, que en
   este panel son la mitad del contenido. 1,55 es el mínimo cómodo para texto seguido.

   🔴 LA VERSIÓN ANTERIOR NO ALCANZABA Y NO SE NOTABA (2026-09-17). Enumeraba `p`, `.eco-acc-body p`
   y —el que delata el problema— `div[style*="line-height:1.5"]`: un selector que sólo agarra a
   los que YA declaran interlínea. Los párrafos del panel no son `<p>`: son `<div>` armados por
   `js/05` y `js/11`, y los que nadie se acordó de estilar caían al 1,2 del navegador.
   Medido renderizando `portable-power-stations`, que es el nicho de referencia de los tests:
   DIEZ textos únicos de más de 90 caracteres (20 elementos) quedaban sin interlínea declarada,
   entre ellos los avisos del diseño y el pie de la tabla de búsquedas. (El número depende del
   nicho: sobre `gadgets` son 8. Se cita el de la referencia, no el más chico.)
   Se pone en el contenedor y se HEREDA, que es como debería haber estado desde el principio:
   cualquier `line-height` inline sigue ganando, así que lo que ya estaba afinado no se mueve. */
#panel-decidir { line-height: 1.6; }
.eco-acc-body p { line-height: 1.6; }
/* Las celdas son de una línea (`white-space:nowrap`): heredar 1,6 sólo les da aire vertical,
   que es lo que se pidió. Los encabezados van igual para que la fila no baile. */
#panel-decidir .data-table th,
#panel-decidir .data-table td { line-height: 1.6; }

/* ── PALETA DE GRÁFICOS, VALIDADA ─────────────────────────────────────────────────────
   🔴 La anterior FALLABA tres controles, medido con el validador (no a ojo):
     · `#dc2626` (rojo) contra `#2d8f3f` (verde) → ΔE 4,5 en deuteranopia: para quien no
       distingue rojo de verde, son el MISMO color. Y estaban en el mismo gráfico.
     · `#14b8a6` contra `#06b6d4` → ΔE 7,1 con visión NORMAL: por debajo del piso de 15,
       o sea que ni con vista perfecta se distinguen.
     · Tres tonos fuera de la banda de luminosidad del fondo oscuro.
   Ésta pasa los cinco controles contra nuestras dos superficies (#0d1220 oscuro, #ffffff
   claro). En claro, tres tonos quedan bajo 3:1 de contraste: eso obliga a rótulo visible, y
   `_barraOrdenada` ya escribe la cifra al final de cada barra y el nombre en el eje.
   ⚠️ El orden es FIJO. Un noveno color no se genera: se pliega en «otros». */
:root, [data-theme="light"] {
  --serie-1: #2a78d6;  --serie-2: #eb6834;  --serie-3: #1baf7a;  --serie-4: #eda100;
  --serie-5: #e87ba4;  --serie-6: #008300;  --serie-7: #4a3aa7;  --serie-8: #e34948;
}
[data-theme="dark"], :root:not([data-theme="light"]) {
  --serie-1: #3987e5;  --serie-2: #d95926;  --serie-3: #199e70;  --serie-4: #c98500;
  --serie-5: #d55181;  --serie-6: #008300;  --serie-7: #9085e9;  --serie-8: #e66767;
}

/* =====================================================================================
   EL ASISTENTE, EN POPUP  (2026-09-17)
   =====================================================================================
   Reemplaza a la pantalla `#panel-ai-assistant`. La medición que ordena TODO lo de abajo,
   tomada en producción a 1600×900 sobre la pantalla vieja:

       22 chips de ejemplo en seis renglones  →  315px
       párrafo explicativo de cuatro líneas   →   70px
       LA CONVERSACIÓN                        →   75px   (8% del alto)

   O sea: una pantalla de chat que mostraba de todo menos el chat. Acá el cuerpo de la
   conversación es `flex:1` y todo lo demás tiene alto fijo o vive detrás de un botón.
   Si alguna vez agregás algo entre el encabezado y los mensajes, medí esto de nuevo.

   Todo usa los tokens del `:root`, así que los dos temas salen solos. Ningún color
   literal salvo las sombras, que ya existen como token.

   ⚠️ LOS TAMAÑOS DE LETRA SALEN DE LA ESCALA DEL REPO, no del ojo. Medido en `styles.css`
   antes de esta tanda: 11 · 12 · 13 · 14 · 16 · 18 · 20 · 22 · 24 · 26 — sin medios pasos y
   sin nada por debajo de 11px. La primera versión de este bloque metió 10,5 · 11,5 · 12,5 y
   `tests-dashboard/piso-tipografico.test.js` se puso rojo por las tres cosas a la vez: el
   piso (por debajo de 11px la lectura se degrada para mucha gente) y la escala (10,5 y 11,5
   no son dos peldaños, son ruido entre dos peldaños). Si necesitás «un poquito más chico»,
   el de abajo es 11 y no 10,5.
   ===================================================================================== */

/* ── el lanzador ───────────────────────────────────────────────────────────────────────
   ⚠️ EL z-index ESTÁ ELEGIDO, NO PUESTO ALTO. Medido en este repo:

       99998  el fondo del modal de confirmación (js/04, `_a2Modal`)
       99999  los toasts (`.cf-toast`, `nicheToast`) — abajo a la derecha, donde va el popup
      100000  los modales a pantalla completa del Agente 5 (js/08)

   El popup va en **99990: por debajo de los tres**. La primera versión lo puso en 100000 y
   era un error de bulto: el popup ocupa justo la esquina de los toasts, así que un aviso de
   «nicho archivado» aparecía TAPADO por la ventana que lo había disparado, y un modal de
   confirmación quedaba a medias detrás.

   Lo intuitivo era mover los toasts. Serían cinco helpers en cinco archivos —dos de ellos
   de otra persona— para que un aviso de 4 segundos no pise algo que de todas formas tiene
   que pisar: un toast ENCIMA del popup es lo correcto, no el problema. */
.asst-lanzador {
  position: fixed; bottom: 24px; right: 24px; z-index: 99990;
  width: 52px; height: 52px; border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}
.asst-lanzador:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), var(--shadow-glow); }
.asst-lanzador:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.asst-lanzador svg { width: 22px; height: 22px; }
body.asst-abierto .asst-lanzador { display: none; }

/* ── el popup ────────────────────────────────────────────────────────────────────────── */
.asst-popup {
  position: fixed; bottom: 24px; right: 24px; z-index: 99990;   /* ver el lanzador */
  width: 420px; max-width: calc(100vw - 32px);
  height: 620px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.asst-popup[hidden] { display: none; }

/* En un teléfono un panel de 420px flotando no tiene sentido: ocupa todo. */
@media (max-width: 640px) {
  /* ⚠️ HAY QUE ANULAR TAMBIÉN `max-width` Y `max-height`, no alcanza con `inset: 0`. La regla
     base los deja en `calc(100vw - 32px)` / `calc(100vh - 48px)` para que el panel flotante
     no toque los bordes, y esos topes le ganan al `width: 100%`: medido a 390px de ancho, el
     popup daba 358 y dejaba dos franjas muertas a los costados. Lo vio el render, no el CSS. */
  .asst-popup { inset: 0; width: 100%; height: 100%;
                max-width: 100%; max-height: 100%;
                border-radius: 0; border: 0; }
  .asst-lanzador { bottom: 16px; right: 16px; }
}

/* ── encabezado: UNA línea ──────────────────────────────────────────────────────────── */
.asst-cab {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px var(--space-4); border-bottom: 1px solid var(--border);
  background: var(--surface-2); flex-shrink: 0;
}
.asst-cab-nombre {
  font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap;
}
/* ⚠️ El `font-size` va explícito: `.ai-chat-status` trae 11px de la pantalla vieja, y el
   piso de este popup es 12. Es justo el caso que un grep del fuente no ve —el tamaño no está
   escrito en la regla que uno mira, sino en otra que gana— y que sólo aparece midiendo el
   render. Lo encontró `render-asistente-popup.js`, no la lectura. */
.asst-cab .ai-chat-status {
  margin-left: auto; font-size: 12px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 170px;
}
.asst-estado-ok      { color: var(--success); }
.asst-estado-aviso   { color: var(--warning); }
.asst-estado-apagado { color: var(--text-muted); }

.asst-cab-btn {
  flex-shrink: 0; width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 16px; line-height: 1;
}
.asst-cab-btn:hover { background: var(--surface); border-color: var(--border); color: var(--text); }
.asst-cab-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ── el cuerpo: esto es lo que tiene que ocupar el espacio ──────────────────────────── */
.asst-cuerpo { position: relative; flex: 1; min-height: 0; display: flex; }
/* Las burbujas aprovechan el ancho del panel. En la pantalla vieja competían con los
   chips; acá el único contenido es la conversación, y un párrafo de seis palabras por
   renglón se lee peor que uno de doce. */
.asst-popup .ai-msg-bubble { max-width: 92%; }
.asst-popup .ai-chat-messages {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--space-4); display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
}

/* ── la hoja de ejemplos: POR ENCIMA, no arriba ─────────────────────────────────────── */
.asst-hoja {
  position: absolute; inset: 0; z-index: 2;
  background: var(--surface); overflow-y: auto;
  /* 48 y no 42: con 42 el primer rótulo quedaba tocando el borde del encabezado y se leía
     como parte de él. Medido en la captura del render, no calculado. */
  padding: var(--space-4); padding-top: 48px;
}
.asst-hoja[hidden] { display: none; }
.asst-hoja-cab {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px var(--space-4); background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.asst-hoja-cab strong { font-size: 12px; font-weight: 700; color: var(--text); }
.asst-hoja-cab button { margin-left: auto; }
.asst-hoja-titulo {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin: var(--space-4) 0 6px;
}
.asst-hoja-titulo:first-child { margin-top: 0; }
.asst-hoja-vacio { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.asst-hoja .ai-suggestions-row { display: flex; flex-wrap: wrap; gap: 6px; }
.asst-hoja-nota {
  margin-top: var(--space-5); padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted); line-height: 1.55;
}
.asst-ajustes { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.asst-ajustes label { font-size: 12px; color: var(--text-muted); }
.asst-ajustes select { max-width: 100%; height: auto; padding: 6px 8px; font-size: 12px; }

/* ── el pie: el botón de ejemplos y el campo ────────────────────────────────────────── */
.asst-pie {
  flex-shrink: 0; border-top: 1px solid var(--border);
  background: var(--surface-2); padding: 6px var(--space-3) 10px;
}
/* 🔴 «¿QUÉ LE PUEDO PEDIR?» VA EN SU PROPIO RENGLÓN, arriba del campo. Medido en la captura
   del render: al lado del campo, con 420px de ancho, el botón se llevaba 150px y dejaba el
   textarea en ~190. Escribir una pregunta en 190px es el problema que este popup vino a
   resolver, no una molestia estética.
   El renglón propio cuesta 26px de los 513 del chat (5%) y, de paso, el botón deja de
   competir con el campo por la atención: se lee como lo que es —«si no sabés qué pedirme,
   mirá acá»— y no como parte de mandar el mensaje. */
.asst-pie-accesos { display: flex; align-items: center; margin-bottom: 6px; }
.asst-pie-fila { display: flex; align-items: flex-end; gap: 6px; }
.asst-pedir {
  height: 26px; padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--text-muted);
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.asst-pedir:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.asst-pedir:hover { color: var(--text); border-color: var(--border); background: var(--surface); }
.asst-popup .ai-chat-input {
  flex: 1; min-height: 34px; max-height: 132px; resize: none;
  padding: 8px 10px; font-size: 13px; line-height: 1.45;
}
.asst-popup .ai-send-btn { flex-shrink: 0; width: 34px; height: 34px; }

/* ── la tabla de datos, dentro de una burbuja de 420px ──────────────────────────────── */
.asst-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.asst-tabla th {
  text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border);
  color: var(--text-muted); font-weight: 600; white-space: nowrap;
}
.asst-tabla td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
/* «sin medir» apagado y con su palabra: nunca un 0 ni un guion — con números alrededor,
   los dos se leen como un cero medido, que es lo contrario de lo que pasó. */
.asst-sin-medir { color: var(--text-faint); }
.asst-tabla-pie { margin-top: 8px; font-size: 11px; color: var(--text-muted); }
/* El rótulo de QUÉ devuelve la tabla. Sólo aparece cuando una respuesta trae más de una:
   con dos tablas sin nombre, cuál es cuál se adivina por las columnas. */
.asst-tabla-titulo {
  margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text);
}

/* ── lo que necesita atención, al abrir ──────────────────────────────────────────────
   Dos renglones, sin burbuja: NO es un mensaje del asistente y no puede parecerlo. Lo que
   dice sale de una lectura directa a los agentes, sin modelo — confundirlo con una
   respuesta sería atribuirle al modelo números que no escribió. */
.asst-atencion {
  margin: 4px 0 10px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.asst-atencion-linea { font-size: 12px; line-height: 1.5; color: var(--text); }
.asst-atencion-linea + .asst-atencion-linea { margin-top: 4px; }
.asst-atencion-btn {
  background: none; border: 0; padding: 0; font-family: inherit; font-size: 12px;
  font-weight: 600; color: var(--primary); cursor: pointer;
}
.asst-atencion-btn:hover { text-decoration: underline; }
.asst-atencion-btn:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm);
}
.asst-atencion-txt { color: var(--text-muted); }
/* «No hay nada» y «no lo pude mirar» van apagados: son estados tranquilos, no titulares. */
.asst-atencion-sin { color: var(--text-muted); }

/* «Lo tomé de lo que escribiste»: el rótulo de un campo que vino precargado. Apagado y
   chico — es una explicación, no un dato. Sin él, un campo que aparece lleno sin decir por
   qué se confirma sin leer. */
.asst-accion-sugerido { font-size: 11px; color: var(--text-muted); }

.asst-accion { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.asst-accion-input { max-width: 180px; height: auto; padding: 6px 8px; font-size: 12px; }
.asst-accion-btn { font-size: 12px; }

/* ── LAS TARJETAS DE ACCIÓN DEL ASISTENTE (2026-09-17) ────────────────────────────────
   Lo que importa acá es la jerarquía de lectura, no el adorno: qué va a pasar, qué cuesta,
   y si se puede deshacer. «No se deshace» va en PALABRAS y con color propio —no un ícono—
   porque es la única línea de la tarjeta que cambia una decisión, y un triángulo naranja
   hay que saber leerlo.

   Los tamaños salen de la escala del repo (11 · 12 · 13 · 14 · 16), medida en HEAD. */
.asst-accion-tarjeta { display: flex; flex-direction: column; gap: 6px; }
.asst-accion-titulo { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.4; }
.asst-accion-hace { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.asst-accion-aviso { font-size: 12px; color: var(--warning); line-height: 1.5; }
.asst-accion-sin-vuelta { font-size: 12px; font-weight: 700; color: var(--danger, #dc2626); line-height: 1.5; }
.asst-accion-nota { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.asst-accion-hecho { font-size: 12px; font-weight: 600; color: var(--success); line-height: 1.5; }
.asst-accion-campo {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; color: var(--text-muted);
}
.asst-accion-botones { display: flex; gap: 6px; margin-top: 2px; }
.asst-accion-btn { font-size: 12px; padding: 5px 12px; border-radius: var(--radius-md); }

/* Una tarjeta de la pregunta anterior: sigue legible —es parte de la conversación— pero no
   se puede apretar y lo dice. Esconderla borraría de la charla algo que pasó. */
.asst-accion-vencida { opacity: .55; }
.asst-accion-vencida button { cursor: not-allowed; }
.asst-ajustes-nota { font-size: 12px; color: var(--text-muted); line-height: 1.5; max-width: 340px; }

/* Lo que el asistente sabe HACER, en la hoja de ejemplos. El color no es el mensaje —la
   etiqueta dice «· gasta» en palabras— pero ayuda a barrer la lista con la vista. */
.asst-chip-gasta { border-color: var(--warning); color: var(--warning); }
.asst-chip-sin-vuelta { border-style: dashed; }

/* El gráfico que el asistente dibuja en el chat. El alto lo pone el JS según cuántas barras
   haya —con techo— porque una burbuja que crece sin límite se come la conversación, que es
   el error que este popup vino a arreglar. */
.asst-grafico { display: flex; flex-direction: column; gap: 6px; }
.asst-grafico-titulo { font-size: 12px; font-weight: 700; color: var(--text); }
/* El alto lo manda la caja: con `maintainAspectRatio:false`, Chart.js dimensiona según el
   contenedor y el `height=` del canvas no se mira. */
.asst-grafico-marco { position: relative; width: 100%; }
.asst-grafico canvas { width: 100% !important; height: 100% !important; }
.asst-grafico-pie { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* ── LOS GRÁFICOS QUE JOSÉ DEJA FIJOS EN UNA PANTALLA (2026-09-17) ────────────────────
   El bloque lo agrega el asistente AL FINAL del panel, no adentro de su markup: meterle
   nodos al DOM de otro panel es pisarle la casa a quien lo mantiene. Va con un borde
   punteado arriba para que se lea como algo agregado y no como parte del panel. */
.asst-fijados {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.asst-fijados-titulo {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.asst-fijado {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-4);
  display: flex; flex-direction: column; gap: 8px;
}
.asst-fijado-enc { display: flex; align-items: center; gap: var(--space-2); }
.asst-fijado-titulo { font-size: 13px; font-weight: 700; color: var(--text); }
.asst-fijado-quitar {
  margin-left: auto; width: 24px; height: 24px; padding: 0; line-height: 1;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--text-muted); cursor: pointer; font-size: 16px;
}
.asst-fijado-quitar:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }
/* La hora va SIEMPRE: un gráfico fijo sin hora es indistinguible de una foto vieja. */
.asst-fijado-pie { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* ══ EL POPUP GRANDE, Y EL HISTORIAL ══════════════════════════════════════════════════════
   🔴 EL PROBLEMA MEDIDO: 420×620. Una tabla de auditoría, una comparación de cinco
   escenarios o las tres opciones de un nicho no entran en 420px de ancho — se leen a dos
   palabras por renglón. El popup chico está bien para preguntar y mal para trabajar, y
   desde que el asistente sabe comparar opciones, trabajar es la mitad de lo que hace.

   🔑 NO SE TOCA EL z-index. Está ELEGIDO, no puesto alto (ver el bloque del lanzador): el
   popup va en 99990, por debajo de los toasts (99999) y de los modales del Agente 5
   (100000). Agrandar cambia la GEOMETRÍA, nunca el apilado. Si subiera, un aviso de «nicho
   archivado» quedaría tapado por la ventana que lo disparó — que es el bug que esa decisión
   ya evitó una vez.

   ⚠️ LA ANULACIÓN DE `max-width`/`max-height` ES UNA GUARDA, NO UN ARREGLO — y esto está
   medido, no supuesto. La primera versión de este bloque las puso copiando el razonamiento
   del caso del teléfono («no alcanza con `inset`»), que ahí SÍ es cierto y está medido en
   este mismo archivo: el popup daba 358 de 390 y dejaba dos franjas muertas.

   Acá NO aplica: con `inset: 24px` el ancho es `100vw − 48` y el tope es `100vw − 32`, así
   que el tope no ata nunca; con el alto pasa lo mismo y da exactamente igual. Verificado
   sacándolas: `render-asistente-popup.js` sigue en verde, o sea que ningún test las cubre
   porque no hay nada observable que cubrir.

   Quedan igual, y el motivo es concreto: el día que alguien achique el `inset` —a 8px, por
   decir— los topes empiezan a atar y el panel queda corto sin que el CSS se vea mal. Lo que
   no se puede es dejar escrito que arreglan algo que hoy no arreglan.

   Y NO es pantalla completa de verdad: queda un margen. Un panel que se come el 100% de la
   ventana se lee como que cambiaste de aplicación, y abajo sigue estando el dashboard sobre
   el que José está preguntando. El margen es lo que dice «esto es una ventana». */
.asst-popup.asst-grande {
  inset: 24px;
  width: auto; height: auto;
  max-width: none; max-height: none;
}
@media (min-width: 1200px) {
  /* Con mucho ancho, una conversación de borde a borde se lee peor, no mejor. */
  .asst-popup.asst-grande { inset: 32px max(48px, calc((100vw - 1400px) / 2)); }
}
/* En el teléfono ya ocupa todo: el botón de agrandar no tiene nada que hacer. */
@media (max-width: 640px) {
  .asst-popup.asst-grande { inset: 0; }
  .asst-cab-btn[data-tamano] { display: none; }
}

/* ── el historial ─────────────────────────────────────────────────────────────────────
   Hereda `.asst-hoja` (absoluta, por encima de la conversación) en el popup chico. En
   grande deja de tapar y se pone AL COSTADO, que es el único lugar donde una lista de
   charlas y la charla en curso se pueden mirar juntas. */
.asst-popup.asst-grande .asst-historial {
  position: relative; inset: auto; z-index: auto;
  order: -1;                       /* a la izquierda, aunque en el DOM vaya después */
  flex: 0 0 300px; min-width: 0;
  border-right: 1px solid var(--border);
  /* ⚠️ NO SE TOCA EL `padding-top: 48px` DE LA REGLA BASE. `.asst-hoja-cab` es
     `position: absolute; top: 0`, y esos 48px son el hueco que le dejan. La primera versión
     de este bloque lo bajó a `var(--space-4)` por costumbre —«en una columna no hace falta
     tanto aire»— y las dos solapas quedaron DEBAJO del encabezado: se veía su subrayado
     azul y no su texto. Los 124 checks del navegador estaban en verde; lo encontró mirar la
     captura. Un elemento tapado no falla ningún test de contraste ni de tamaño de letra:
     está ahí, es legible, y no se ve. */
}

/* Las dos solapas. Son dos preguntas DISTINTAS y por eso no se mezclan en una lista:
   «¿qué hablamos?» vive en este navegador y se pierde al cambiar de máquina; «¿qué
   cambiaste?» vive en la base y es lo que sirve para auditar y para deshacer. */
.asst-solapas {
  display: flex; gap: 2px; margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.asst-solapa {
  flex: 1; padding: 6px 8px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-muted);
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.asst-solapa:hover { color: var(--text); }
.asst-solapa[aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); }
.asst-solapa:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Una entrada. Botón de ancho completo: el área de clic es el renglón entero, no el texto. */
.asst-entrada {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; margin-bottom: 4px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--text); cursor: pointer;
}
.asst-entrada:hover { background: var(--surface-2); border-color: var(--border); }
.asst-entrada:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.asst-entrada-titulo {
  font-size: 13px; font-weight: 600; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asst-entrada-pie { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin-top: 2px; }
.asst-entrada-fila { display: flex; align-items: flex-start; gap: 4px; }
.asst-entrada-fila .asst-entrada { flex: 1; min-width: 0; }

/* El desenlace de una acción. Los cuatro se pintan distinto porque son cuatro respuestas
   distintas, y «frenado por el vecino» es la que más se necesita leer: explica por qué algo
   NO cambió. Un registro que sólo muestra los éxitos cuenta media historia. */
.asst-desenlace { font-weight: 700; }
.asst-desenlace-hecho { color: var(--success); }
.asst-desenlace-frenado { color: var(--warning); }
.asst-desenlace-error { color: var(--danger, #dc2626); }
.asst-desenlace-cambio { color: var(--text-muted); }

/* ⚠️ UNA LISTA VACÍA NO SE EXPLICA CON OTRA LISTA VACÍA. Estos dos textos dicen POR QUÉ no
   hay nada, que es lo único que distingue «todavía no pasó» de «no lo pude leer». */
.asst-vacio { font-size: 12px; color: var(--text-muted); line-height: 1.5; padding: 8px 2px; }
.asst-quitar {
  flex-shrink: 0; width: 26px; height: 26px; margin-top: 4px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px;
  line-height: 1;
}
.asst-quitar:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.asst-quitar:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Los botones de la cabecera que llevan dibujo en vez de glifo. 15px y no 16: el ⚙ y la ×
   son glifos de texto y a 16 se ven del mismo alto que un icono de 15. */
.asst-cab-btn svg { width: 15px; height: 15px; }

/* ══ NICHO (FUSIÓN 3+4) — PIEZAS DEL REDISEÑO ════════════════════════════════════════════════
   (2026-09-21) Todo lo de este bloque es de `partials/panels-35-decidir.html` + `js/11` + `js/13`.
   Va junto y al final a propósito: `styles.css` lo tocan varias sesiones a la vez, y un bloque
   contiguo es lo único que hace legible qué se llevó cada commit.

   🔴 DOS DISPOSICIONES DEL MISMO DIBUJO, NO DOS DATOS. Un SVG con `viewBox` fijo no se
   reacomoda: o se achica —y un `font-size="12"` se ve a 3,6px a 390, que es el defecto que
   `js/13` ya tiene fichado— o scrollea dentro de su caja, y entonces lo que queda afuera es
   justo la línea del cero y la barra que cae del lado bueno. La salida es emitir las dos
   versiones del MISMO array de filas y que el CSS muestre la que corresponde. No se duplica
   ningún número: se duplica el dibujo.
   ⚠️ Los dos quedan en el DOM, así que `render-legibilidad-decidir.js` mide también el
   escondido: la escala tipográfica rige igual para lo que no se ve. */
.dec-angosto { display: none; }
@media (max-width: 719px) {
  .dec-ancho   { display: none; }
  .dec-angosto { display: block; }
}

/* 🔴 LOS BLOQUES DE CADA SECCIÓN, EN DOS COLUMNAS. Son 33 acordeones uno abajo del otro y
   abiertos miden ~29.000px, unas 30 pantallas. En dos columnas no se borra ni un dato y el
   alto baja a la mitad.
   ⚠️ `align-items:start` es obligatorio: sin él un `<details>` cerrado se estira al alto del
   abierto de al lado y deja una caja vacía.
   ⚠️ Y `.eco-acc-body > .eco-acc:first-child { border-top: 0 }` deja de alcanzar en grilla: el
   primero de la columna DERECHA es el segundo hijo y se quedaba con una línea huérfana arriba.
   ⚠️ No subir de dos columnas: con tres, abrir un acordeón deja dos huecos al lado.

   🔴 EL BORDE ESTUVO EN 1100 Y ERA DEMASIADO TEMPRANO. Medido contando cuántos títulos de
   bloque se parten en dos líneas con las secciones abiertas:
       1100px → 16 de 33 (48%)      1280px → 7 de 33 (21%)      1440px → 1 de 33 (3%)
   A 1100 la mitad de los títulos se quiebra Y el resumen de la derecha también, así que los
   dos lados del `<summary>` compiten por media columna y la sección se ve rota. El alto que
   ahorra la grilla no compensa eso: entre 1100 y 1279 conviene una sola columna.
   ⚠️ Se eligió mirando, no razonando. Y la alternativa —mandar el resumen a un renglón
   propio debajo del título— baja el corte a 0% pero cuesta +552px (+10%) porque vuelve de dos
   líneas a TODOS los summaries, incluidos los que entraban bien. */
@media (min-width: 1280px) {
  .dec-reticula { display: grid; grid-template-columns: 1fr 1fr;
                  column-gap: var(--space-4); align-items: start; }
  .dec-reticula > .eco-acc:nth-child(-n+2) { border-top: 0; }
  /* 🔴 SIN ESTO LA GRILLA CORTA CONTENIDO, Y EN SILENCIO. Un hijo de grid tiene
     `min-width: auto`: **se niega a achicarse por debajo de su contenido**. Un bloque con una
     tabla ancha ensancha su columna, se sale de la sección — que es una `.card` con
     `overflow: hidden` — y lo que sobra **se corta sin scroll y sin aviso**.
     Medido a 1440px con todo desplegado, antes de esta línea: «Sobre qué se decidió esto»
     recortaba **861px**, «Cómo se construye el sitio» 480 y «Lo que decide» 10. Los comercios
     medían 1.315px de ancho dentro de una columna de 660.
     Es el desborde clásico de CSS grid y lo introdujo la retícula; no existía cuando los 33
     bloques iban uno abajo del otro. */
  .dec-reticula > * { min-width: 0; }
}

/* 🔴 «SÓLO LO QUE DIFIERE» ESCONDE, NO BORRA. Las filas iguales siguen en el DOM: el pedido es
   no quitar contenido, y los dos arneses de esta pantalla miden `innerText` — filtrarlas del
   array apagaría chequeos vivos sin que nadie se entere.
   ⚠️ Sólo alcanza a las filas de MÉTRICA. Las de grupo («Qué plata mueve, en 12 meses») y la de
   acciones no llevan clase, así que nunca se esconden: sin sus encabezados la tabla filtrada
   perdería de quién es cada número. */
.dec-solo-difiere .dec-fila-igual { display: none; }

/* ⚠️ El casillero nativo NO sigue el tema: en oscuro queda un cuadrado gris claro sobre fondo
   azul y casi no se ve —visto en la captura, no deducido—. `accent-color` lo resuelve con una
   línea y en los dos temas, sin reimplementar el control (un checkbox hecho a mano pierde el
   foco de teclado y el anuncio del lector de pantalla). El área de clic la da el <label>. */
.dec-filtro { display: inline-flex; align-items: center; gap: 5px; }
.dec-filtro input[type="checkbox"] { accent-color: var(--primary); width: 13px; height: 13px; margin: 0; }
.dec-filtro:hover { color: var(--text); }
.dec-filtro input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ══ EL MOLDE DE LOS HECHOS: CIFRA, NO FILA DE PLANILLA ══════════════════════════════════════
   Lo usan los siete bloques que pasan por `_decFichaHtml` en `js/11`. El rótulo va chico
   arriba y el valor grande abajo, que es la presentación que ya funciona en «La economía del
   nicho» de esta misma pantalla. Un valor largo —prosa del agente dueño— toma el ancho
   completo en vez de partirse en seis renglones dentro de una tarjeta angosta. */
.dec-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
             gap: var(--space-4) var(--space-5); padding: 4px 0; }
.dec-ficha-item { min-width: 0; }
.dec-ficha-ancho { grid-column: 1 / -1; }
.dec-ficha-rot { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 2px; }
.dec-ficha-val { font-size: 16px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
/* Un valor largo es prosa, no una cifra: al tamaño de la cifra se lee como un titular. */
.dec-ficha-ancho .dec-ficha-val { font-size: 13px; }
.dec-ficha-nota { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-top: 3px; }

/* Un desplegable liviano para el detalle largo DENTRO de un bloque: no lleva `.eco-acc`
   —que es el molde de los 33 bloques y trae su propia caja— sino sólo lo justo para que se
   vea clicable. Lo usa el calendario, cuyas 71 filas eran el 20% de la pantalla. */
.dec-plegable > summary { cursor: pointer; font-size: 13px; color: var(--primary);
                          list-style: none; padding: 6px 0; }
.dec-plegable > summary::-webkit-details-marker { display: none; }
.dec-plegable > summary::before { content: '▸ '; color: var(--text-muted); }
.dec-plegable[open] > summary::before { content: '▾ '; }
.dec-plegable > summary:hover { text-decoration: underline; }
.dec-plegable > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 🔴 LA ACCIÓN PRINCIPAL NO PUEDE PARECER UN CAMPO VACÍO. `.btn-ghost` estirado al 100% del
   ancho de una celda, con el texto en gris, tiene exactamente la forma de un `<input>` — y le
   pasaba justo a «Elegir y aprobar», que re-deriva el diseño, pisa las ediciones a mano y baja
   un estado terminal. Rellena se lee como lo que es. La segunda queda de contorno. */
.dec-btn-elegir { display: block; width: 100%; font-size: 12px; padding: 6px 10px;
                  border: 1px solid var(--primary); border-radius: var(--radius-md);
                  background: var(--primary); color: var(--text-inverse);
                  cursor: pointer; font-family: inherit; transition: background var(--transition); }
.dec-btn-elegir:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.dec-btn-elegir:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 🔴 LAS TABLAS DE ESTA PANTALLA MOSTRABAN NÚMEROS DE PLATA CORTADOS (2026-09-22).
   Lo dijo Tiago mirando la pantalla —«es muy difícil de usar»— y medido a 1440px: **23 tablas**
   no entraban en su caja, escondiendo **5.015px** de contenido. El encabezado «Queda» se leía
   «Que…» y «-$2.183» se leía «-$2.1». Un número cortado no se ve como cortado: se ve como
   OTRO número, y ésta es la pantalla donde se decide plata.

   🔑 LA CAUSA NO ERA EL ANCHO, ERA `white-space: nowrap`. `.data-table` se lo pone a TODAS
   las celdas, así que el ancho mínimo de una tabla es la suma de su celda más larga por
   columna y no puede achicarse: adentro de una columna de opción de 311px, una tabla de seis
   columnas pide 763px y se come 452. Dejando que el texto salte de línea, la misma tabla se
   acomoda. Medido con el cambio puesto: de 23 tablas cortadas a **6**, y de 5.015px a 1.337px.

   ⚠️ LOS NÚMEROS NO SALTAN. `.num` conserva `nowrap`, que es lo único que impide que
   «-$2.183» se parta en dos líneas — cortarlo al medio sería cambiar un recorte por otro.
   ⚠️ Y VA ANCLADO A `#panel-decidir`. `.data-table` es de todo el dashboard y lo usan paneles
   de otras sesiones: aflojarlo para todos cambiaría pantallas que nadie midió.
   ⚠️ De las 6 que quedan, DOS son gráficos: `_gEnvuelto` les pone un ancho mínimo de 900px a
   propósito, porque un dibujo más angosto no se lee. Ésas scrollean y está bien. Las otras
   cuatro son dos tablas de seis y ocho columnas, y ahí el arreglo no es tipográfico: es tener
   menos columnas. Queda para la conversación de unificación. */
#panel-decidir .data-table th,
#panel-decidir .data-table td { white-space: normal; }
/* ⚠️ `anywhere` SÓLO en las celdas. En un encabezado parte la palabra al medio —«¿Pasa?» salía
   «¿Pasa» y «?» en dos renglones— y un rótulo de dos o tres palabras no necesita romperse para
   entrar: le alcanza con saltar ENTRE palabras. En las celdas sí hace falta, porque ahí hay
   nombres de comercio de cuarenta caracteres sin un espacio donde cortar. */
#panel-decidir .data-table td { overflow-wrap: anywhere; }
#panel-decidir .data-table th { overflow-wrap: normal; }
#panel-decidir .data-table th.num,
#panel-decidir .data-table td.num { white-space: nowrap; overflow-wrap: normal; }
/* Con el texto saltando, el aire horizontal de `--space-4` deja de pagar por sí mismo: son
   16px por lado y por columna, o sea 96px en una tabla de seis. */
#panel-decidir .data-table th,
#panel-decidir .data-table td { padding: 6px 8px; }

/* 🔴 Y LOS DOS ACCESOS DE AL LADO SEGUÍAN SIENDO EL CAMPO VACÍO (2026-09-22, medido en el
   navegador: `.btn-ghost`, fondo transparente, borde de 1px, texto gris, 174x29 cada uno y
   `flex:1` estirándolos). El comentario de acá arriba arregló la acción PRINCIPAL y dejó a sus
   dos vecinas con la forma que describe — justo debajo del botón azul relleno, donde el
   contraste las termina de convertir en dos casillas para escribir.
   No son botones de acción: llevan a otra pantalla. Un enlace se dibuja como enlace —sin caja,
   en la tinta de los enlaces de esta pantalla (`.dec-plegable`)— y así además deja de competir
   con la acción que sí decide. */
.dec-ir { background: none; border: 0; padding: 0; font-family: inherit; font-size: 12px;
          color: var(--primary); cursor: pointer; text-align: left; }
.dec-ir:hover { text-decoration: underline; }
.dec-ir:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px;
                        border-radius: var(--radius-sm); }
.dec-btn-segundo { margin-top: 5px; background: transparent; color: var(--text-muted);
                   border-color: var(--border); }
.dec-btn-segundo:hover { background: var(--surface-2); color: var(--text);
                         border-color: var(--primary); }

/* ══ LA COMPARATIVA Y LAS CABECERAS EN UN TELÉFONO ═══════════════════════════════════════════
   (2026-09-22) Medido a 390px, no estimado. */

/* Los anchos vivían en un `style=` inline y por eso no se podían cambiar por ancho de
   pantalla: una media query no pisa un inline sin `!important`. */
.dec-tabla-comparativa { table-layout: fixed; width: 100%; min-width: 640px; }
.dec-tabla-comparativa .dec-col-rotulos { width: 168px; }

@media (max-width: 719px) {
  /* 🔴 LA TABLA MEDÍA 653px EN UNA CAJA DE 300: 353px ocultos, el 54%. Scrollea dentro de su
     caja —que es lo correcto, y mejor que achicar el texto— pero al arrastrar **se perdía la
     columna de rótulos**, así que las cifras quedaban sin decir de qué fila son. Eso no es una
     tabla difícil de leer: es una tabla ilegible.
     La columna de rótulos queda FIJA al arrastrar. Y se angosta de 168 a 116px, que le
     devuelve 52px a la primera opción — a 390px eso es la diferencia entre ver una cifra
     entera o su primer dígito.
     ⚠️ Necesita fondo opaco: sin él, el contenido que pasa por debajo se ve a través.
     ⚠️ Y NO alcanza a las filas de grupo (`td[colspan]`), que ocupan todo el ancho: fijarlas
     no aporta nada y les rompería el fondo propio. */
  .dec-tabla-comparativa { min-width: 560px; }
  .dec-tabla-comparativa .dec-col-rotulos { width: 116px; }
  .dec-tabla-comparativa td:first-child:not([colspan]),
  .dec-tabla-comparativa th:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--surface);
  }
  .dec-tabla-comparativa th:first-child { background: var(--surface-2); }

  /* 🔴 CUATRO DE LAS CINCO CABECERAS SE PARTÍAN EN 2 A 4 LÍNEAS. `.card-header` es un flex con
     `space-between` y sin `wrap`: a 390px los dos lados se pelean por 300px y el título queda
     con 95 de ancho — «Las tres formas de armar este nicho» salía en CUATRO renglones de seis
     caracteres. Apilados, cada uno usa el ancho completo.
     ⚠️ Acotado a `#panel-decidir` a propósito: `.card-header` lo usan otros seis partials (53
     apariciones) y es de otras sesiones. El defecto es el mismo en todos y está reportado. */
  #panel-decidir .card-header { flex-wrap: wrap; row-gap: 3px; }
  #panel-decidir .card-header > * { flex: 1 1 100%; text-align: left; }
}

/* 🔴 UNA TABLA SIN ENVOLTORIO QUEDA CORTADA, NO SCROLLEADA. Medido a 390px con todo
   desplegado: «Lo que sabemos del nicho» mide 830px dentro de una sección de 300 y **no está
   en un `.table-wrap`**, así que los 545px que sobran los corta `.card { overflow: hidden }`
   sin scroll y sin aviso. Las demás tablas anchas de esta pantalla sí tienen envoltorio y
   scrollean, que es el comportamiento correcto.
   Ese bloque lo pinta `js/05`, que es de otra sesión: en vez de tocar su archivo se le da
   scroll propio al contenedor, que es de esta pantalla. Reportado para que se arregle en el
   emisor. */
#decidirDatosNicho { overflow-x: auto; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   NICHO (fusión 3+4) — SOLAPAS Y PASOS  (2026-09-22)
   ══════════════════════════════════════════════════════════════════════════════════════════
   Reemplaza los 24 `<details>` anidados. Todo sale de los tokens del tema: no hay un solo
   color literal acá, así que los dos temas salen sin un bloque `[data-theme]` propio — que es
   además lo que pide `variables-de-tema.test.js`.
   ⚠️ Nada por debajo de 11px: lo fija `piso-tipografico.test.js`. */

.dec-contexto {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
}

/* ── Solapas ──────────────────────────────────────────────────────────────────────────────
   Subrayadas y no pastillas: son tres secciones del mismo nivel, no tres filtros. El estado
   activo se marca por PESO + subrayado + color, nunca sólo por color. */
.dec-solapas {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.dec-solapa {
  appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 9px 16px 8px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: baseline; gap: 7px;
  transition: color var(--transition), border-color var(--transition);
}
.dec-solapa:hover { color: var(--text); }
.dec-solapa.activa { color: var(--text); border-bottom-color: var(--primary); }
.dec-solapa-sub { font-size: 12px; font-weight: 400; color: var(--text-faint); }
.dec-solapa.activa .dec-solapa-sub { color: var(--text-muted); }
.dec-solapa:focus-visible,
.dec-paso-btn:focus-visible,
.dec-flecha:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Tira de pasos ────────────────────────────────────────────────────────────────────────
   Los NOMBRES, no «2 / 4»: lo que no se ve se olvida, y con la tira rotulada el contenido
   está a un clic y se sabe que está. */
.dec-pasos { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dec-pasos-tira {
  display: flex; gap: 6px; flex: 0 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px;
}
.dec-paso-btn {
  appearance: none; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted);
  border-radius: var(--radius-full);
  padding: 6px 13px 6px 8px;
  font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.dec-paso-btn:hover { color: var(--text); border-color: var(--text-faint); }
.dec-paso-btn.activo {
  background: var(--primary); border-color: var(--primary);
  color: var(--text-inverse); font-weight: 600;
}
.dec-paso-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-muted);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none;
}
.dec-paso-btn.activo .dec-paso-n { background: var(--text-inverse); color: var(--primary); }
/* 🔒 Solapas y pasos que esperan a que se elija una de las tres opciones (2026-10-08, cliente).
   En gris y sin reaccionar al hover; siguen enfocables (`aria-disabled`) para leer el motivo.
   2026-10-14 (cliente: «no vi que esté hecho»): con sólo la opacidad, en el tema oscuro una
   solapa bloqueada se veía igual que una no seleccionada. Ahora además gris de verdad, borde
   punteado, un candado delante, y el aviso de debajo de la tira (`_decPintarAvisoEleccion`). */
.dec-solapa.bloqueada, .dec-paso-btn.bloqueado { opacity: .4; filter: grayscale(1); cursor: not-allowed; }
.dec-paso-btn.bloqueado { border-style: dashed; background: transparent; }
.dec-solapa.bloqueada::before, .dec-paso-btn.bloqueado::before, .dec-aviso-candado {
  content: ''; flex: none; align-self: center; width: 11px; height: 11px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dec-aviso-eleccion {
  display: flex; gap: 9px; align-items: flex-start;
  margin: -4px 0 12px; padding: 9px 12px;
  border: 1px solid var(--border); border-left: 3px solid var(--warning);
  border-radius: var(--radius-md); background: var(--surface-2);
  font-size: 13px; line-height: 1.45; color: var(--text);
}
.dec-aviso-eleccion .dec-aviso-candado { width: 14px; height: 14px; margin-top: 2px; align-self: flex-start; background-color: var(--warning); }
.dec-aviso-eleccion.pulso { animation: decAvisoPulso .9s ease-out 1; }
@keyframes decAvisoPulso {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
@media (prefers-reduced-motion: reduce) { .dec-aviso-eleccion.pulso { animation: none; } }
.dec-solapa.bloqueada:hover { color: var(--text-muted); }
.dec-paso-btn.bloqueado:hover { color: var(--text-muted); border-color: var(--border); }

.dec-flecha {
  appearance: none; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition), opacity var(--transition);
}
.dec-flecha:hover:not(:disabled) { background: var(--surface-2); }
/* Apagada en los extremos, y que SE VEA apagada: la tira no da la vuelta a propósito —con los
   nombres a la vista, saltar del último al primero se lee como un error. */
.dec-flecha:disabled { opacity: .35; cursor: default; }

/* ── El recuadro ──────────────────────────────────────────────────────────────────────────
   `min-height` para que la página NO SALTE al cambiar de paso: medio de la sensación de
   «ordenado» es que el marco se quede quieto. */
.dec-recuadro {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 20px;
  min-height: 420px;
}
.dec-paso { display: none; }
/* `backwards` y no `both`: `both` dejaba un transform fijo en el paso, y un transform convierte al paso en el
   marco de los hijos `position: fixed` (el globo ⓘ quedaba corrido). La entrada se ve igual. */
.dec-paso.dec-activo { display: block; animation: decEntra 170ms ease backwards; }
@keyframes decEntra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dec-paso.dec-activo { animation: none; }
}

/* 🔴 LA PUERTA DE AUDITORÍA, Y NO ES UN LUJO. Los dos arneses de esta pantalla
   (`render-decidir.js`, `render-legibilidad-decidir.js`) miden `innerText`, y lo que está
   oculto no cuenta: con los pasos escondidos medirían un tercio de la pantalla y el segundo
   —que exige más de 100 elementos con texto propio— se pondría rojo por el cambio de
   navegación, no por el contenido. Hasta hoy desplegaban con `details[open]`, que ya no
   existe. Los arneses prenden esta clase y vuelven a ver todo.
   ⚠️ Es SÓLO para medir: ningún camino de la interfaz la enciende. */
#panel-decidir.dec-auditoria .dec-paso { display: block; }
#panel-decidir.dec-auditoria .dec-paso + .dec-paso { margin-top: 28px; }

/* ── Un bloque ────────────────────────────────────────────────────────────────────────────
   Lo que antes era `<details class="eco-acc">`. Mismo contenido, mismos ids, sin el clic. */
.dec-bloque { border-top: 1px solid var(--border-subtle); padding-top: 12px; margin-top: 4px; }
.dec-paso > .dec-bloque:first-child,
.dec-reticula > .dec-bloque:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.dec-bloque-t {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 0 0 8px; padding: 0;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.dec-bloque-t > span:first-child { min-width: 0; }
.dec-bloque-c { padding: 0; }
/* El resumen de la derecha: mismo rol que tenía en el `<summary>`. */
.dec-bloque-t .eco-acc-meta { font-size: 12px; font-weight: 400; color: var(--text-muted); }

/* 🔴 min-width:0 también acá. Un hijo de grid se niega a achicarse por debajo de su contenido,
   y una tabla ancha se sale de la caja y **se corta sin scroll y sin aviso** — 862px medidos
   la vez anterior. La regla existe para `.dec-reticula > *`; ésta cubre el bloque dentro de un
   paso, que es un contexto nuevo. */
.dec-paso, .dec-bloque { min-width: 0; }
.dec-bloque .table-wrap { overflow-x: auto; }

@media (max-width: 720px) {
  .dec-recuadro { padding: 14px 13px 16px; min-height: 0; }
  .dec-solapa { padding: 8px 11px 7px; font-size: 13px; }
  .dec-solapa-sub { display: none; }
  .dec-flecha { width: 38px; height: 38px; }
}

/* ── El resumen de la opción elegida, y la comparación plegada (2026-09-22) ───────────────── */
.dec-elegida {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.dec-elegida-izq { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dec-elegida-sello {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--success);
}
.dec-elegida-nombre { font-size: 16px; font-weight: 600; color: var(--text); }
.dec-elegida-btn { font-size: 12px; padding: 5px 12px; flex: none; }

/* La comparación plegada. `display:none` y no `visibility`: lo que no se ve no tiene que ocupar
   ni medirse — es justo el alto que este cambio vino a recuperar. */
.dec-plegada { display: none; }

/* 🔴 Y LA PUERTA DE AUDITORÍA TAMBIÉN ACÁ, o el arnés se queda sin lo que mide. Sobre un nicho
   CON opción adoptada la comparación arranca plegada, y `render-decidir.js` verifica los
   números del plan guardado justamente adentro de `#decidirColumnas`: sin esta línea el arnés
   no los encontraría y diría que la pantalla dejó de publicarlos, que es falso. Una protección
   puesta en un camino y no en su hermano — el patrón que este repo ya tiene nombrado. */
#panel-decidir.dec-auditoria .dec-plegada { display: block; }

/* ── «¿Y si le pongo $X por mes?» — el presupuesto propuesto (2026-09-22) ─────────────────── */
.dec-pres {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-2);
}
.dec-pres-rot { font-size: 13px; color: var(--text); }
.dec-pres-signo { font-size: 14px; color: var(--text-muted); margin-right: -4px; }
.dec-pres-input {
  width: 110px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
}
.dec-pres-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dec-pres-btn { font-size: 12px; padding: 5px 12px; }
.dec-pres-ayuda, .dec-pres-estado { font-size: 12px; color: var(--text-muted); }
/* La explicación de qué pasó con el número va ABAJO y a ancho completo: es donde se dice que
   «sólo gratuitos» no cambió y por qué, y eso no entra en una línea de controles. */
.dec-pres-nota {
  font-size: 12px; color: var(--text-muted); line-height: 1.6;
  max-width: 96ch; margin: -6px 0 12px; padding: 0 2px;
}

/* ── La ausencia declarada dentro de un paso (2026-09-22) ─────────────────────────────────
   Un paso sin datos decía la nada: quinientos píxeles de vacío debajo de un título que
   promete «qué hago». Y tres bloques con la misma frase, uno abajo del otro, porque antes
   vivían en acordeones separados y no se los veía juntos. */
.dec-paso-nota {
  padding: 12px 14px; margin-bottom: 14px;
  border: 1px solid var(--border); border-left: 3px solid var(--text-faint);
  border-radius: var(--radius-md); background: var(--surface-2);
  font-size: 13px; line-height: 1.6; color: var(--text); max-width: 96ch;
}
.dec-paso-nota-sub { margin-top: 5px; font-size: 12px; color: var(--text-muted); }
/* El alto mínimo existe para que la página no salte entre pasos parecidos, no para sostener
   medio metro de aire debajo de una línea. */
.dec-recuadro.dec-corto { min-height: 0; }

/* ── Qué se movió con la última edición (2026-09-22, etapa 6) ─────────────────────────────
   Va arriba de las solapas y ocupa poco: es un acuse, no un bloque de contenido. El borde
   izquierdo es lo único que cambia entre «se movió esto» (primario) y los dos estados que no
   afirman un cambio (apagado). El color NO lleva el significado solo — el texto lo dice. */
.dec-cambio {
  position: relative;
  margin: 0 0 12px; padding: 10px 34px 10px 14px;
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: var(--radius-md); background: var(--surface-2);
  font-size: 13px; line-height: 1.6; color: var(--text); max-width: 96ch;
}
.dec-cambio-lista { margin: 6px 0 0; padding-left: 18px; }
.dec-cambio-lista li { margin-bottom: 3px; }
/* El valor de ANTES se lee como referencia, no como el número que manda: apagado y tachado
   suave. El de ahora va en negrita, que es lo que hace el `<strong>` del render. */
.dec-cambio-de { color: var(--text-muted); text-decoration: line-through; }
.dec-cambio-nota { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.dec-cambio-x {
  position: absolute; top: 6px; right: 8px;
  background: none; border: 0; cursor: pointer; padding: 2px 6px;
  font-size: 16px; line-height: 1; color: var(--text-muted);
}
.dec-cambio-x:hover { color: var(--text); }
.dec-cambio-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* El monto propuesto que la tabla NO aplicó. Es un aviso, no una nota más: si se pierde entre
   las otras, el input queda con un número que no rige al lado de importes que lo ignoran. */
.dec-pres-aviso {
  color: var(--text); border-left: 3px solid var(--warning);
  padding: 6px 10px; margin-bottom: 8px; border-radius: var(--radius-sm);
  background: var(--surface-2);
}

/* ── Agregarle publicidad a un sitio que no compra tráfico (2026-09-22) ──────────────────── */
.dec-sumar {
  margin-top: 8px; padding: 12px 14px;
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: var(--radius-md); background: var(--surface-2);
}
.dec-sumar-t { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.dec-sumar-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px 14px; margin-bottom: 10px;
}
.dec-sumar-op {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text); cursor: pointer; min-width: 0;
}
/* El casillero nativo no sigue el tema: en oscuro queda un cuadrado gris claro sobre fondo
   azul y casi no se ve. `accent-color` lo resuelve en los dos temas sin reimplementar el
   control — uno hecho a mano pierde el foco de teclado y el anuncio del lector de pantalla. */
.dec-sumar-op input { accent-color: var(--primary); flex: none; }
.dec-sumar-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   LA PORTADA DE NICHOS (2026-09-22)
   ══════════════════════════════════════════════════════════════════════════════════════════
   La tarjeta es `.a2-card` del Agente 2 — la misma caja, el mismo encabezado, la misma banda
   de datos y los mismos chips. Acá abajo va SÓLO lo que la portada agrega: la segunda banda
   de celdas y el desglose del puntaje. Redefinir lo que ya existe sería tener dos versiones
   de la misma tarjeta, que es el defecto que reusarla vino a evitar. */

.nic-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-4);
}
/* `.a2-card` es un `<div>` con `onclick`; acá es un `<button>` de verdad, para que entre con
   el teclado y lo anuncie un lector de pantalla. Eso obliga a resetear lo que el botón trae. */
.nic-card {
  appearance: none; font-family: inherit; text-align: left; width: 100%;
  color: inherit; cursor: pointer;
}
.nic-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* La segunda banda usa la misma celda (`.a2-dato`) que la primera: lo único que cambia es que
   va separada por una línea, para que se lea como «y además» y no como una banda más larga. */
.nic-datos2 {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2); margin-top: var(--space-2);
}

/* El desglose del puntaje. El número grande de arriba sale de estos seis; mostrarlo sin ellos
   obliga a entrar al nicho para saber por qué es 74 y no 40, y esta pantalla existe justamente
   para elegir a cuál entrar. */
.nic-factores {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.nic-fac-rot {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin-right: 2px;
}
.nic-fac { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; }
.nic-fac-k { color: var(--text-muted); }
.nic-fac-v { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .nic-grid { grid-template-columns: 1fr; }
}