/* ============================================================================
   Centro de Control · App shell + componentes (UI-1)
   Shell: sidebar agrupada + topbar persistente + workspace.
   Retematiza los componentes existentes a dark, sin reestructurar las vistas
   (el rediseño profundo de cada vista es UI-2 en adelante).
   ========================================================================== */

/* ============================ APP SHELL ================================== */
#appShell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns 160ms ease;
}
body.sidebar-collapsed #appShell {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

/* ---- Sidebar ---- */
#sidebar {
  background: var(--bg-900);
  border-right: 1px solid var(--border-700);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 18px 18px 16px;
  min-height: var(--topbar-h);
}
.brand .brand-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-500), var(--cyan-500));
  display: grid; place-items: center;
  color: #fff; font-family: var(--font-title); font-weight: 700; font-size: 18px;
  box-shadow: var(--shadow-1);
}
.brand .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand .brand-title { font-family: var(--font-title); font-weight: 600; font-size: 0.95rem; color: var(--text-100); letter-spacing: 0.2px; }
.brand .brand-sub { font-size: 0.66rem; color: var(--text-500); text-transform: uppercase; letter-spacing: 0.7px; }
body.sidebar-collapsed .brand-text { display: none; }

.sidebar-nav { padding: var(--sp-2) var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 2px; }
.nav-group { margin-top: var(--sp-4); }
.nav-group:first-child { margin-top: var(--sp-1); }
.nav-group-title {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-500); padding: 6px 10px 4px; font-weight: 600;
}
body.sidebar-collapsed .nav-group-title { opacity: 0; height: 8px; padding: 0; overflow: hidden; }

.nav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  color: var(--text-400);
  padding: 9px 10px; border-radius: var(--radius-control);
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 500;
  position: relative;
  transition: background 120ms ease, color 120ms ease;
}
.nav-item:hover { background: var(--surface-800); color: var(--text-100); }
.nav-item .nav-ico { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; color: currentColor; }
.nav-item .nav-ico svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.nav-item .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.sidebar-collapsed .nav-item { justify-content: center; padding: 10px; }
body.sidebar-collapsed .nav-item .nav-label { display: none; }

.nav-item.activo { background: var(--primary-bg); color: var(--text-100); }
.nav-item.activo::before {
  content: ""; position: absolute; left: -3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--primary-400);
}
.nav-item .nav-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--danger-500); color: #fff;
  font-size: 0.66rem; font-weight: 700; display: none; align-items: center; justify-content: center;
}
.nav-item .nav-badge.show { display: inline-flex; }
body.sidebar-collapsed .nav-item .nav-badge { position: absolute; top: 4px; right: 4px; margin: 0; }

.sidebar-foot { margin-top: auto; padding: var(--sp-3); }
.collapse-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: 1px solid var(--border-700); color: var(--text-400);
  border-radius: var(--radius-control); padding: 8px; cursor: pointer; font-size: 0.75rem;
}
.collapse-btn:hover { background: var(--surface-800); color: var(--text-100); }

/* ---- Main column ---- */
#main { display: flex; flex-direction: column; height: 100vh; overflow: hidden; min-width: 0; }

/* ---- Topbar ---- */
#topbar {
  height: var(--topbar-h); flex-shrink: 0;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: var(--surface-900);
  border-bottom: 1px solid var(--border-700);
}
#topbar .context-title { font-family: var(--font-title); font-weight: 600; font-size: 1.02rem; color: var(--text-100); }
#topbar .spacer { flex: 1; }

/* Chips de estado operativo (WhatsApp / Hermes / etc.) */
.status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--surface-800); border: 1px solid var(--border-700);
  font-size: 0.74rem; color: var(--text-200); white-space: nowrap;
}
.status-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-500); flex-shrink: 0; }
.status-chip b { color: var(--text-100); font-weight: 600; }
.status-chip.is-success .dot { background: var(--success-500); }
.status-chip.is-warning .dot { background: var(--warning-500); }
.status-chip.is-danger  .dot { background: var(--danger-500); }
.status-chip.is-info    .dot { background: var(--info-500); }
.status-chip.is-ai      .dot { background: var(--ai-500); }
.status-chip.is-sim { background: var(--warning-bg); border-color: rgba(245,158,11,0.35); color: var(--warning-500); }

/* Barra de métricas (compacta) */
#metricsBar { display: flex; gap: var(--sp-4); font-size: 0.72rem; color: var(--text-400); flex-wrap: wrap; }
#metricsBar b { color: var(--text-100); font-weight: 600; }

/* Caja de usuario */
#userBox { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--text-200); }
#userBox .user-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
#userBox .user-meta .u-name { color: var(--text-100); font-weight: 600; }
#userBox .user-meta .u-role { color: var(--text-500); font-size: 0.68rem; }
#userBox .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary-500), var(--ai-500));
  color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 0.8rem;
}
#userBox button {
  background: none; border: 1px solid var(--border-600); color: var(--text-400);
  border-radius: var(--radius-pill); padding: 5px 12px; font-size: 0.72rem; cursor: pointer;
}
#userBox button:hover { background: var(--surface-800); color: var(--text-100); }

/* ---- Workspace ---- */
#workspace { flex: 1; overflow: hidden; min-height: 0; background: var(--bg-950); }
.vista { display: none; height: 100%; }
.vista.activa { display: block; height: 100%; }

/* ============================ BOTONES =================================== */
.btn, .toolbar button, .toolbar-generico button, .form-card button,
.op-actions button, table.tabla-generica button, .nuevo-op button, .responder button,
#loginBox button {
  font-family: var(--font-body); cursor: pointer;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-600);
  background: var(--surface-800); color: var(--text-100);
  padding: 8px 14px; font-size: 0.8rem; font-weight: 500;
  transition: background 120ms ease, border-color 120ms ease, transform 60ms ease;
}
.toolbar button:hover, .toolbar-generico button:hover, .op-actions button:hover,
table.tabla-generica button:hover, .nuevo-op button:hover, .btn:hover {
  background: var(--surface-850); border-color: var(--border-600); color: var(--text-100);
}
.btn:active, .toolbar button:active { transform: translateY(1px); }

/* Botón primario (violeta) */
.btn.solid, .toolbar button.solid, .toolbar-generico button.solid,
.form-card button, .responder button, #loginBox button, .nuevo-op button {
  background: var(--primary-500); border-color: var(--primary-500); color: #fff; font-weight: 600;
}
.btn.solid:hover, .toolbar button.solid:hover, .toolbar-generico button.solid:hover,
.form-card button:hover, .responder button:hover, #loginBox button:hover, .nuevo-op button:hover {
  background: var(--primary-600); border-color: var(--primary-600); color: #fff;
}
.btn.danger { background: var(--danger-500); border-color: var(--danger-500); color: #fff; }
.btn.danger:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Botones pequeños dentro de tablas y op-actions */
.op-actions button, table.tabla-generica button { padding: 5px 10px; font-size: 0.72rem; border-radius: var(--radius-pill); margin-right: 4px; }
.op-actions button { background: var(--surface-850); }

/* ============================ BADGES / CHIPS ============================= */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  background: var(--neutral-bg); color: var(--text-400);
}
.badge.nuevo { background: var(--neutral-bg); color: var(--text-200); }
.badge.calificado, .badge.negociacion, .badge.cerrado { background: var(--success-bg); color: var(--success-500); }
.badge.incompleto, .badge.seguimiento { background: var(--warning-bg); color: var(--warning-500); }
.badge.asesor { background: var(--danger-bg); color: var(--danger-500); }
.badge.visita { background: var(--primary-bg); color: var(--primary-400); }
.badge.spam, .badge.nocomercial { background: var(--neutral-bg); color: var(--text-500); }

/* ============================ CARDS / PANELES =========================== */
.form-card {
  background: var(--surface-900); border: 1px solid var(--border-700);
  border-radius: var(--radius-card); padding: var(--sp-4); margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-1);
}
.form-card h3 { margin: 0 0 var(--sp-3); font-size: 0.92rem; color: var(--text-100); }
.form-card .acciones { margin-top: var(--sp-3); }

/* ============================ FORMULARIOS =============================== */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3); }
.form-grid label, .filtros, .toolbar, .toolbar-generico, .nuevo-op { color: var(--text-400); }
.form-grid label { display: flex; flex-direction: column; font-size: 0.72rem; color: var(--text-400); gap: 4px; }

input, select, textarea {
  font-family: var(--font-body); font-size: 0.82rem;
  background: var(--surface-850); color: var(--text-100);
  border: 1px solid var(--border-700); border-radius: var(--radius-control);
  padding: 8px 10px;
}
input::placeholder, textarea::placeholder { color: var(--text-500); }
input:focus, select:focus, textarea:focus { border-color: var(--primary-400); outline: none; }
select option { background: var(--surface-850); color: var(--text-100); }
textarea { resize: vertical; }

/* ============================ TABLAS ==================================== */
table.tabla-generica {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface-900); font-size: 0.82rem;
  border: 1px solid var(--border-700); border-radius: var(--radius-card); overflow: hidden;
}
table.tabla-generica th {
  background: var(--surface-800); color: var(--text-400);
  text-align: left; padding: 10px 12px; font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid var(--border-700);
}
table.tabla-generica td { padding: 11px 12px; border-bottom: 1px solid var(--border-700); color: var(--text-200); }
table.tabla-generica tbody tr:last-child td { border-bottom: none; }
table.tabla-generica tbody tr:hover { background: var(--surface-850); }
table.tabla-generica td b { color: var(--text-100); }
table.tabla-generica small { color: var(--text-500); }

/* ============================ CONTENEDOR GENÉRICO ====================== */
#contenido-generico { padding: var(--sp-5); overflow-y: auto; height: 100%; }
.toolbar-generico { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); align-items: center; }

/* ============================ DASHBOARD (UI-2) ========================= */
.dash { display: flex; flex-direction: column; gap: var(--sp-6); }
.dash-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.dash-section-head { display: flex; align-items: baseline; gap: var(--sp-3); }
.dash-section-head h3 { margin: 0; font-size: 0.98rem; }
.dash-section-sub { font-size: 0.74rem; color: var(--text-500); }

/* Distribución en dos columnas */
.dash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.dash-2col-wide { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 1100px){ .dash-2col, .dash-2col-wide { grid-template-columns: 1fr; } }

/* --- Estado ejecutivo: KPI cards --- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3); }
.kpi-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  background: var(--surface-900); border: 1px solid var(--border-700); border-radius: var(--radius-card);
  padding: 16px 18px; transition: border-color 120ms ease, transform 80ms ease; position: relative; overflow: hidden;
}
.kpi-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--border-600); }
.kpi-card:hover { border-color: var(--primary-500); transform: translateY(-2px); }
.kpi-label { font-size: 0.72rem; color: var(--text-400); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.kpi-value { font-family: var(--font-title); font-size: 2rem; font-weight: 600; color: var(--text-100); line-height: 1.1; }
.kpi-sub { font-size: 0.72rem; color: var(--text-500); }
.kpi-card.is-info::before { background: var(--cyan-500); }
.kpi-card.is-info .kpi-value { color: var(--cyan-500); }
.kpi-card.is-warning::before { background: var(--warning-500); }
.kpi-card.is-warning .kpi-value { color: var(--warning-500); }
.kpi-card.is-danger::before { background: var(--danger-500); }
.kpi-card.is-danger .kpi-value { color: var(--danger-500); }

/* --- Necesita tu atención --- */
.attention-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.attention-item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-900); border: 1px solid var(--border-700); border-left-width: 3px;
  border-radius: var(--radius-control); padding: 12px 14px; transition: background 120ms ease, border-color 120ms ease;
}
.attention-item:hover { background: var(--surface-850); }
.attention-item .att-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.attention-item .att-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.attention-item .att-label { color: var(--text-100); font-weight: 600; font-size: 0.86rem; }
.attention-item .att-hint { color: var(--text-500); font-size: 0.73rem; }
.attention-item .att-count { font-family: var(--font-title); font-size: 1.3rem; font-weight: 600; }
.attention-item .att-go { color: var(--text-500); font-size: 1.2rem; }
.attention-item.is-danger { border-left-color: var(--danger-500); }
.attention-item.is-danger .att-dot, .attention-item.is-danger .att-count { color: var(--danger-500); background-color: var(--danger-500); }
.attention-item.is-danger .att-count { background: none; }
.attention-item.is-warning { border-left-color: var(--warning-500); }
.attention-item.is-warning .att-dot { background: var(--warning-500); }
.attention-item.is-warning .att-count { color: var(--warning-500); }
.attention-item.is-info { border-left-color: var(--info-500); }
.attention-item.is-info .att-dot { background: var(--info-500); }
.attention-item.is-info .att-count { color: var(--info-500); }
.attention-ok {
  display: flex; align-items: center; gap: var(--sp-3); background: var(--success-bg);
  border: 1px solid rgba(34,197,94,0.30); border-radius: var(--radius-control); padding: 16px 18px; color: var(--text-200);
}
.attention-ok .att-ok-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--success-500); color: #05210f; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.attention-ok b { color: var(--success-500); }
.attention-ok span { font-size: 0.8rem; color: var(--text-400); }

/* --- Estado operativo del sistema --- */
.ops-grid { display: flex; flex-direction: column; gap: var(--sp-2); }
.ops-item { display: flex; align-items: center; gap: var(--sp-3); background: var(--surface-900); border: 1px solid var(--border-700); border-radius: var(--radius-control); padding: 12px 14px; }
.ops-item .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-500); flex-shrink: 0; }
.ops-item .ops-k { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-500); font-weight: 600; }
.ops-item .ops-v { display: block; color: var(--text-100); font-weight: 600; font-size: 0.9rem; }
.ops-item.is-success .dot { background: var(--success-500); }
.ops-item.is-sim { background: var(--warning-bg); border-color: rgba(245,158,11,0.30); }
.ops-item.is-sim .dot { background: var(--warning-500); }
.ops-item.is-sim .ops-v { color: var(--warning-500); }
.ops-item.is-ai .dot { background: var(--ai-500); }
.ops-item.is-danger { background: var(--danger-bg); border-color: rgba(239,68,68,0.30); }
.ops-item.is-danger .dot { background: var(--danger-500); }
.ops-item.is-danger .ops-v { color: var(--danger-500); }
.integ-note { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.integ-note-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-500); font-weight: 600; margin-right: 4px; }
.integ-chip { font-size: 0.7rem; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--neutral-bg); color: var(--text-500); border: 1px solid var(--border-700); }
.integ-chip.on { background: var(--success-bg); color: var(--success-500); border-color: rgba(34,197,94,0.30); }

/* --- Distribuciones (instantánea real, no tendencia) --- */
.dash-card { background: var(--surface-900); border: 1px solid var(--border-700); border-radius: var(--radius-card); padding: var(--sp-4); }
.dash-card h4 { margin: 0 0 var(--sp-3); font-size: 0.86rem; display: flex; align-items: baseline; gap: 8px; }
.dash-card-hint { font-size: 0.68rem; color: var(--text-500); font-weight: 400; text-transform: none; letter-spacing: 0; }
.dash-empty-mini { color: var(--text-500); font-size: 0.8rem; margin: 4px 0 0; }
.dist-row { display: flex; align-items: center; gap: var(--sp-3); padding: 5px 0; }
.dist-label { width: 120px; flex-shrink: 0; font-size: 0.78rem; color: var(--text-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dist-track { flex: 1; height: 8px; background: var(--surface-800); border-radius: 999px; overflow: hidden; }
.dist-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary-500), var(--cyan-500)); }
.dist-num { width: 72px; text-align: right; font-size: 0.8rem; color: var(--text-100); font-weight: 600; flex-shrink: 0; }
.dist-num small { color: var(--text-500); font-weight: 400; margin-left: 3px; }

/* ============================ DASHBOARD AVANZADO (UI-2.1) ============== */
/* KPI cards con icono */
.kpi-grid-adv { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.kpi-card { flex-direction: row; align-items: center; gap: var(--sp-3); padding: 14px 16px; }
.kpi-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--surface-800); border: 1px solid var(--border-700); color: var(--text-400); }
.kpi-ico svg { width: 20px; height: 20px; }
.kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-card.is-info .kpi-ico { color: var(--cyan-500); border-color: rgba(0,198,184,0.35); background: var(--cyan-bg); }
.kpi-card.is-warning .kpi-ico { color: var(--warning-500); border-color: rgba(245,158,11,0.35); background: var(--warning-bg); }
.kpi-card.is-danger .kpi-ico { color: var(--danger-500); border-color: rgba(239,68,68,0.35); background: var(--danger-bg); }
.kpi-card.is-success .kpi-ico { color: var(--success-500); border-color: rgba(34,197,94,0.35); background: var(--success-bg); }
.kpi-card.is-success::before { background: var(--success-500); }
.kpi-card.is-success .kpi-value { color: var(--success-500); }
.kpi-card .kpi-value { font-size: 1.7rem; }

/* Paneles de estado Hermes / WhatsApp */
.status-panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 720px){ .status-panels { grid-template-columns: 1fr; } }
.status-panel { display: flex; align-items: center; gap: var(--sp-4); background: var(--surface-900); border: 1px solid var(--border-700); border-radius: var(--radius-card); padding: 16px 18px; position: relative; overflow: hidden; }
.status-panel::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0.10; background: radial-gradient(280px 120px at 12% 30%, currentColor, transparent 70%); }
.status-panel .sp-ico { width: 56px; height: 56px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: var(--surface-800); border: 1px solid var(--border-700); }
.status-panel .sp-ico svg { width: 30px; height: 30px; }
.status-panel .sp-title { font-family: var(--font-title); font-size: 0.95rem; color: var(--text-300, var(--text-200)); display: flex; align-items: center; gap: 8px; letter-spacing: 0.4px; }
.status-panel .sp-title b { color: var(--text-100); }
.status-panel .sp-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.status-panel .sp-line { color: var(--text-200); font-size: 0.86rem; margin-top: 3px; }
.status-panel .sp-sub { color: var(--text-500); font-size: 0.74rem; margin-top: 1px; }
.status-panel.is-ai { color: var(--ai-500); }
.status-panel.is-ai .sp-ico { color: var(--ai-500); border-color: rgba(139,92,246,0.4); }
.status-panel.is-success { color: var(--success-500); }
.status-panel.is-success .sp-ico { color: var(--success-500); border-color: rgba(34,197,94,0.4); }
.status-panel.is-sim { color: var(--warning-500); }
.status-panel.is-sim .sp-ico { color: var(--warning-500); border-color: rgba(245,158,11,0.4); }
.status-panel.is-danger { color: var(--danger-500); }
.status-panel.is-danger .sp-ico { color: var(--danger-500); border-color: rgba(239,68,68,0.4); }

/* Grid principal: mapa (izq) + rail (der) */
.dash-main-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--sp-4); align-items: start; }
@media (max-width: 1150px){ .dash-main-grid { grid-template-columns: 1fr; } }
.dash-map-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* Mapa del Centro de Control */
.map-panel { background: radial-gradient(600px 300px at 50% 0%, rgba(59,130,246,0.06), transparent 70%), var(--surface-900); border: 1px solid var(--border-700); border-radius: var(--radius-card); padding: var(--sp-4); overflow-x: auto; }
.map-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.map-head h3 { margin: 0; font-size: 0.98rem; }
.map-canvas { position: relative; width: 100%; min-width: 560px; height: 340px; }
.map-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-links .ml { fill: none; stroke-width: 2; stroke-linecap: round; }
.map-links .ml-flujo { stroke: var(--blue-500); opacity: 0.7; }
.map-links .ml-info { stroke: var(--cyan-500); opacity: 0.45; }
.map-links .ml-alerta { stroke: var(--danger-500); opacity: 0.55; stroke-dasharray: 5 6; }
.map-node {
  position: absolute; transform: translate(-50%, -50%); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 118px; padding: 10px 8px 8px; text-align: center;
  background: var(--surface-850); border: 1px solid var(--border-700); border-radius: 12px;
  color: var(--text-200); box-shadow: var(--shadow-1); transition: border-color 120ms ease, transform 100ms ease;
}
.map-node:hover { border-color: var(--primary-500); transform: translate(-50%, -50%) scale(1.04); }
.map-node .mn-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 2px; background: var(--surface-800); }
.map-node .mn-ico svg { width: 17px; height: 17px; }
.map-node .mn-val { font-family: var(--font-title); font-size: 1.25rem; font-weight: 600; color: var(--text-100); line-height: 1; }
.map-node .mn-label { font-size: 0.74rem; color: var(--text-200); font-weight: 600; }
.map-node .mn-sub { font-size: 0.64rem; color: var(--text-500); }
.map-node.tone-info .mn-ico { color: var(--cyan-500); }
.map-node.tone-warning { border-color: rgba(245,158,11,0.45); } .map-node.tone-warning .mn-ico { color: var(--warning-500); }
.map-node.tone-danger { border-color: rgba(239,68,68,0.45); } .map-node.tone-danger .mn-ico { color: var(--danger-500); }
.map-node.tone-success .mn-ico { color: var(--success-500); }
.map-node.hub {
  width: 150px; padding: 14px 10px; background: linear-gradient(180deg, var(--surface-800), var(--surface-850));
  border-color: rgba(108,92,255,0.5); box-shadow: 0 0 0 1px rgba(108,92,255,0.25), 0 0 34px rgba(108,92,255,0.28);
}
.map-node.hub .mn-ico { color: var(--primary-400); background: var(--primary-bg); width: 40px; height: 40px; }
.map-node.hub .mn-ico svg { width: 22px; height: 22px; }
.map-node.hub .mn-val { font-size: 1.7rem; color: #fff; }
.map-node.hub .mn-label { color: var(--text-100); font-size: 0.82rem; }
.map-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); font-size: 0.72rem; color: var(--text-500); }
.map-legend i.lg { display: inline-block; width: 16px; height: 0; border-top: 2px solid; margin-right: 6px; vertical-align: middle; }
.map-legend .lg-flujo { color: var(--blue-500); }
.map-legend .lg-info { color: var(--cyan-500); }
.map-legend .lg-alerta { color: var(--danger-500); border-top-style: dashed; }

/* Rail derecho */
.dash-rail { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.rail-card { background: var(--surface-900); border: 1px solid var(--border-700); border-radius: var(--radius-card); padding: var(--sp-4); }
.rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.rail-head h4 { margin: 0; font-size: 0.86rem; }
.rail-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--warning-bg); color: var(--warning-500); font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rail-card .attention-list { gap: 6px; }
.rail-card .attention-item { padding: 9px 10px; }
.rail-card .integ-note { flex-direction: column; align-items: stretch; gap: 6px; margin: 0; }

/* Actividad reciente */
.act-list { display: flex; flex-direction: column; }
.act-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-700); }
.act-item:last-child { border-bottom: none; }
.act-ico { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; background: var(--surface-800); color: var(--cyan-500); }
.act-ico svg { width: 15px; height: 15px; }
.act-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.act-title { font-size: 0.79rem; color: var(--text-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-sub { font-size: 0.7rem; color: var(--text-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-time { font-size: 0.68rem; color: var(--text-500); flex-shrink: 0; white-space: nowrap; }

/* Resumen del día */
.resumen-grid { display: flex; align-items: center; gap: var(--sp-4); }
.res-donut { --pct: 0; width: 74px; height: 74px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--cyan-500) calc(var(--pct)*1%), var(--surface-800) 0); position: relative; }
.res-donut::before { content:""; position:absolute; inset:8px; border-radius:50%; background: var(--surface-900); }
.res-donut-num { position: relative; font-family: var(--font-title); font-weight: 600; font-size: 1.1rem; color: var(--text-100); }
.res-donut-num small { font-size: 0.7rem; color: var(--text-400); }
.res-metrics { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.res-metric { display: flex; align-items: baseline; gap: 8px; }
.res-metric .res-val { font-family: var(--font-title); font-size: 1.1rem; font-weight: 600; color: var(--text-100); }
.res-metric .res-k { font-size: 0.74rem; color: var(--text-400); }
.res-metric.res-wide .res-k { font-size: 0.72rem; color: var(--text-500); }

/* ============================ BANDEJA ================================== */
#layout { display: grid; grid-template-columns: 340px 1fr; height: 100%; }
#lista { border-right: 1px solid var(--border-700); overflow-y: auto; background: var(--surface-900); }
.filtros {
  padding: var(--sp-3); border-bottom: 1px solid var(--border-700); display: flex; gap: var(--sp-2);
  flex-wrap: wrap; position: sticky; top: 0; background: var(--surface-900); z-index: 2;
}
.filtros input { flex: 1; min-width: 120px; }
.conv-item { padding: 12px 14px; border-bottom: 1px solid var(--border-700); cursor: pointer; transition: background 100ms ease; }
.conv-item:hover { background: var(--surface-850); }
.conv-item.activo { background: var(--primary-bg); box-shadow: inset 3px 0 0 var(--primary-400); }
.conv-nombre { font-weight: 600; font-size: 0.88rem; display: flex; justify-content: space-between; gap: 8px; color: var(--text-100); }
.conv-meta { font-size: 0.72rem; color: var(--text-500); margin-top: 3px; }
.conv-msg { font-size: 0.79rem; color: var(--text-400); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#detalle { display: flex; flex-direction: column; height: 100%; background: var(--bg-950); }
#detalle .empty { margin: auto; color: var(--text-500); font-size: 0.9rem; }
.panel-header { padding: 14px 20px; border-bottom: 1px solid var(--border-700); background: var(--surface-900); }
.panel-header h2 { margin: 0 0 4px; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; }
.panel-header .sub { font-size: 0.78rem; color: var(--text-400); }
.panel-header .sub b { color: var(--text-200); }

.toolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid var(--border-700); background: var(--surface-900); }
.toolbar input, .toolbar select { padding: 7px 10px; }

#historial { flex: 1; overflow-y: auto; padding: 16px 20px; background: var(--bg-950); }
.msg { max-width: 70%; margin-bottom: 10px; padding: 9px 13px; border-radius: 12px; font-size: 0.85rem; line-height: 1.45; }
.msg.entrante { background: var(--surface-800); border: 1px solid var(--border-700); color: var(--text-100); margin-right: auto; border-bottom-left-radius: 4px; }
.msg.saliente { background: var(--primary-500); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.msg.interno { background: var(--human-bg); border: 1px dashed var(--human-500); margin: 0 auto; max-width: 85%; font-style: italic; color: var(--human-500); }
.msg .meta { font-size: 0.65rem; opacity: 0.7; margin-top: 4px; }

.datos-capturados { padding: 10px 20px; border-top: 1px solid var(--border-700); background: var(--surface-900); font-size: 0.78rem; color: var(--text-300, var(--text-200)); }
.datos-capturados b { color: var(--cyan-500); }
.slots-faltantes { padding: 6px 20px; background: var(--warning-bg); font-size: 0.72rem; color: var(--warning-500); border-top: 1px solid var(--border-700); }

.responder { display: flex; gap: var(--sp-2); padding: 12px 20px; border-top: 1px solid var(--border-700); background: var(--surface-900); }
.responder textarea { flex: 1; height: 44px; }

.oportunidades { padding: 10px 20px; border-top: 1px solid var(--border-700); background: var(--surface-900); font-size: 0.8rem; }
.oportunidades > b { color: var(--text-100); }
.op-card { border: 1px solid var(--border-700); border-radius: var(--radius-control); padding: 9px 11px; margin-top: 6px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; background: var(--surface-850); color: var(--text-200); }
.nuevo-op { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.nuevo-op input, .nuevo-op select { font-size: 0.75rem; padding: 6px 8px; }
.auditoria { padding: 10px 20px; border-top: 1px solid var(--border-700); background: var(--bg-900); font-size: 0.72rem; color: var(--text-400); max-height: 130px; overflow-y: auto; }
.auditoria > b { color: var(--text-200); }
.auditoria .fila { padding: 2px 0; }
.auditoria .fila b { color: var(--text-200); }

/* ============================ PIPELINE ================================= */
#pipeline-cols { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: 10px; }
.col-etapa { min-width: 244px; max-width: 244px; background: var(--surface-900); border: 1px solid var(--border-700); border-radius: var(--radius-card); padding: 10px; flex-shrink: 0; }
.col-etapa h3 { font-size: 0.78rem; margin: 0 0 10px; color: var(--text-200); display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--border-700); }
.col-etapa h3 span { color: var(--text-500); font-weight: 600; }
.card-op { border: 1px solid var(--border-700); border-radius: var(--radius-control); padding: 10px; margin-bottom: 8px; font-size: 0.76rem; background: var(--surface-850); color: var(--text-300, var(--text-200)); cursor: pointer; transition: border-color 120ms ease; }
.card-op:hover { border-color: var(--primary-500); }
.card-op b { display: block; font-size: 0.84rem; margin-bottom: 3px; color: var(--text-100); }
.card-op select { font-size: 0.7rem; margin-top: 6px; width: 100%; }

/* ============================ LOGIN ==================================== */
#loginOverlay { position: fixed; inset: 0; background: radial-gradient(1200px 600px at 50% -10%, rgba(108,92,255,0.18), transparent 60%), var(--bg-950); display: flex; align-items: center; justify-content: center; z-index: 100; }
#loginBox { background: var(--surface-900); border: 1px solid var(--border-700); border-radius: var(--radius-card); padding: 32px; width: 340px; box-shadow: var(--shadow-2); }
#loginBox .login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
#loginBox h2 { margin: 0; font-size: 1.15rem; color: var(--text-100); }
#loginBox p { margin: 0 0 18px; font-size: 0.8rem; color: var(--text-400); }
#loginBox input { width: 100%; margin-bottom: 12px; padding: 10px 12px; }
#loginBox button { width: 100%; padding: 11px; margin-top: 2px; }
#loginError { color: var(--danger-500); font-size: 0.78rem; margin-bottom: 10px; min-height: 1em; }

/* ============================ RESPONSIVE (base UI-1) =================== */
@media (max-width: 1024px) {
  #appShell { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
  #appShell .nav-label, #appShell .brand-text, #appShell .nav-group-title { display: none; }
  #appShell .nav-item { justify-content: center; padding: 10px; }
  #metricsBar { display: none; }
}
@media (max-width: 720px) {
  #layout { grid-template-columns: 1fr; }
  #lista { display: none; }
  #topbar { gap: var(--sp-2); padding: 0 var(--sp-3); }
  #userBox .user-meta { display: none; }
}

/* ============================================================================
   UI-2.2 · FIDELIDAD VISUAL DEL DASHBOARD
   Solo composición/profundidad/densidad. Sin datos ni funciones nuevas.
   Reglas posteriores → sobrescriben las de UI-2.1 por orden de cascada.
   ========================================================================== */
#vistaDashboard #contenido-generico { padding: 16px 18px; }
.dash { gap: 14px; }

/* --- Header ejecutivo --- */
.dash-exec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.exec-title { font-size: 1.5rem; margin: 0; display: flex; align-items: center; gap: 10px; letter-spacing: 0.2px; }
.exec-ia { font-size: 0.58rem; font-weight: 700; letter-spacing: 1.2px; padding: 3px 8px; border-radius: 999px; color: var(--primary-400); background: var(--primary-bg); border: 1px solid rgba(108,92,255,0.45); }
.exec-sub { margin: 3px 0 0; color: var(--text-500); font-size: 0.82rem; }
.exec-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 0.74rem; color: var(--text-400); background: var(--surface-900); border: 1px solid var(--border-700); padding: 6px 12px; border-radius: 999px; }
.exec-chip .ec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-500); box-shadow: 0 0 8px var(--cyan-500); }

/* --- Layout 2 columnas persistente (main + rail) --- */
.dash-grid2 { display: grid; grid-template-columns: minmax(0,1fr) 322px; gap: 16px; align-items: start; }
.dash-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-grid2 .dash-rail { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1150px){ .dash-grid2 { grid-template-columns: 1fr; } }

/* --- KPIs compactos con profundidad --- */
.kpi-grid-adv { grid-template-columns: repeat(auto-fill, minmax(168px,1fr)); gap: 12px; }
.kpi-label { line-height: 1.15; overflow-wrap: anywhere; }
.kpi-card { padding: 12px 13px; gap: 11px; background: linear-gradient(180deg, var(--surface-850), var(--surface-900)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), var(--shadow-1); }
.kpi-card::before { width: 3px; }
.kpi-ico { width: 34px; height: 34px; border-radius: 9px; }
.kpi-ico svg { width: 18px; height: 18px; }
.kpi-card .kpi-value { font-size: 1.55rem; }
.kpi-label { font-size: 0.66rem; }
.kpi-sub { font-size: 0.68rem; }

/* --- Paneles de estado: compactos + identidad IA/canal --- */
.status-panels { gap: 14px; }
.status-panel { padding: 12px 15px; gap: 15px; background: linear-gradient(180deg, var(--surface-850), var(--surface-900)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), var(--shadow-1); }
.status-panel .sp-ico { width: 46px; height: 46px; border-radius: 12px; position: relative; }
.status-panel .sp-ico::before { content: ""; position: absolute; inset: -5px; border-radius: 15px; border: 1px solid currentColor; opacity: 0.32; }
.status-panel .sp-ico::after { content: ""; position: absolute; inset: -11px; border-radius: 18px; border: 1px dashed currentColor; opacity: 0.15; }
.status-panel .sp-ico svg { width: 24px; height: 24px; }
.status-panel .sp-title { font-size: 0.9rem; }
.status-panel .sp-line { font-size: 0.82rem; margin-top: 2px; }
.status-panel.is-ai { background: linear-gradient(115deg, rgba(139,92,246,0.12), var(--surface-900) 58%); }
.status-panel.is-sim { background: linear-gradient(115deg, rgba(245,158,11,0.10), var(--surface-900) 58%); }
.status-panel.is-success { background: linear-gradient(115deg, rgba(34,197,94,0.10), var(--surface-900) 58%); }

/* --- Mapa: fondo tecnológico + núcleo + líneas con glow --- */
.map-panel { padding: 14px 16px 12px; background: var(--surface-900); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), var(--shadow-1); }
.map-head { margin-bottom: 4px; }
.map-canvas { height: 300px; min-width: 560px; }
.map-canvas::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 10px; z-index: 0;
  background-image:
    radial-gradient(440px 230px at 50% 50%, rgba(59,130,246,0.12), transparent 62%),
    radial-gradient(rgba(148,163,184,0.11) 1px, transparent 1.4px),
    linear-gradient(rgba(148,163,184,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.05) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 48px 48px, 48px 48px;
}
.map-links { z-index: 1; }
.map-links .ml { fill: none; stroke-width: 1.5; opacity: 0.95; }
.map-links .ml-glow { fill: none; stroke-width: 5; opacity: 0.16; }
.map-links .ml-node { opacity: 0.9; }
.map-links .ml-flujo { stroke: var(--blue-500); }
.map-links .ml-info  { stroke: var(--cyan-500); }
.map-links .ml-dep   { stroke: var(--ai-500); stroke-dasharray: 2 7; }
.map-links .ml-alerta{ stroke: var(--danger-500); stroke-dasharray: 5 7; }
.map-links circle.ml-flujo { fill: var(--blue-500); stroke: none; }
.map-links circle.ml-info  { fill: var(--cyan-500); stroke: none; }
.map-links circle.ml-dep   { fill: var(--ai-500); stroke: none; }
.map-links circle.ml-alerta{ fill: var(--danger-500); stroke: none; }

/* Núcleo (hub) con anillos + halo — círculos reales (fuera del SVG estirado) */
.hub-fx { position: absolute; transform: translate(-50%,-50%); pointer-events: none; z-index: 1; }
.hub-fx::before { content: ""; position: absolute; left: 0; top: 0; width: 250px; height: 250px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(108,92,255,0.32), rgba(108,92,255,0.06) 46%, transparent 66%); }
.hub-fx .ring { position: absolute; left: 0; top: 0; transform: translate(-50%,-50%); border-radius: 50%; }
.hub-fx .r1 { width: 148px; height: 148px; border: 1px solid rgba(108,92,255,0.5); box-shadow: 0 0 34px rgba(108,92,255,0.22) inset; }
.hub-fx .r2 { width: 208px; height: 208px; border: 1px solid rgba(108,92,255,0.24); }
.hub-fx .r3 { width: 278px; height: 278px; border: 1px dashed rgba(0,198,184,0.16); }

.map-node { z-index: 2; width: 104px; padding: 8px 6px 7px; background: linear-gradient(180deg, var(--surface-800), var(--surface-850)); }
.map-node .mn-ico { width: 26px; height: 26px; margin-bottom: 1px; }
.map-node .mn-ico svg { width: 15px; height: 15px; }
.map-node .mn-val { font-size: 1.1rem; }
.map-node .mn-label { font-size: 0.7rem; }
.map-node .mn-sub { font-size: 0.6rem; }
.map-node.hub { width: 152px; padding: 13px 10px; }
.map-node.hub .mn-ico { width: 38px; height: 38px; }
.map-node.hub .mn-ico svg { width: 21px; height: 21px; }
.map-node.hub .mn-val { font-size: 1.6rem; }
.map-node.hub .mn-label { font-size: 0.8rem; }
.map-legend { margin-top: 8px; gap: var(--sp-3); }

/* --- Rail con profundidad + más compacto --- */
.dash-rail .rail-card { padding: 13px 14px; background: linear-gradient(180deg, var(--surface-850), var(--surface-900)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), var(--shadow-1); }
.dash-rail .rail-head { margin-bottom: 10px; }
.dash-rail .act-item { padding: 7px 0; }
.dash-card { background: linear-gradient(180deg, var(--surface-850), var(--surface-900)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), var(--shadow-1); }

/* --- Densidad global del dashboard --- */
.dash-section { gap: 10px; }
.dash-2col { gap: 14px; }

/* Responsive: en pantallas chicas, el mapa mantiene legibilidad con scroll horizontal propio */
@media (max-width: 720px){
  .exec-title { font-size: 1.25rem; }
  .kpi-grid-adv { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); }
}

/* ============================================================================
   UI-3 · BANDEJA INTELIGENTE (3 columnas)
   Conversaciones | Conversación activa | Contexto operativo.
   Solo frontend; endpoints/payloads/roles intactos.
   ========================================================================== */
#bandeja-layout { display: grid; grid-template-columns: 316px minmax(0,1fr) 346px; height: 100%; background: var(--bg-950); }

/* ---- Columna A: Conversaciones ---- */
#conv-col { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--surface-900); border-right: 1px solid var(--border-700); }
.conv-head { padding: 12px 12px 10px; border-bottom: 1px solid var(--border-700); display: flex; flex-direction: column; gap: 9px; flex-shrink: 0; }
.conv-title { font-family: var(--font-title); font-weight: 600; font-size: 0.92rem; color: var(--text-100); display: flex; align-items: center; gap: 8px; }
.conv-count { font-size: 0.68rem; color: var(--text-400); background: var(--surface-800); border: 1px solid var(--border-700); border-radius: 999px; padding: 1px 8px; }
.conv-search input { width: 100%; background: var(--surface-850); }
.conv-filtros { display: flex; gap: 6px; }
.conv-filtros select { flex: 1; min-width: 0; font-size: 0.74rem; padding: 6px 8px; }
.conv-refresh { flex-shrink: 0; width: 32px; padding: 0; background: var(--surface-800); border: 1px solid var(--border-700); border-radius: var(--radius-control); color: var(--text-400); cursor: pointer; }
.conv-refresh:hover { color: var(--text-100); background: var(--surface-850); }
#listaConv { flex: 1; overflow-y: auto; min-height: 0; }
.conv-foot { flex-shrink: 0; padding: 8px 12px; border-top: 1px solid var(--border-700); font-size: 0.68rem; color: var(--text-500); }

.conv-item { display: flex; gap: 10px; width: 100%; text-align: left; cursor: pointer; background: none; border: none; border-bottom: 1px solid var(--border-700); padding: 11px 12px; transition: background 100ms ease; }
.conv-item:hover { background: var(--surface-850); }
.conv-item.activo { background: var(--primary-bg); box-shadow: inset 3px 0 0 var(--primary-400); }
.conv-av { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--primary-500), var(--cyan-500)); }
.conv-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.conv-row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.conv-name { font-weight: 600; font-size: 0.85rem; color: var(--text-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-time { font-size: 0.68rem; color: var(--text-500); flex-shrink: 0; }
.conv-msg { font-size: 0.78rem; color: var(--text-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-tags { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.conv-tags .badge { font-size: 0.6rem; padding: 2px 7px; }
.conv-resp { font-size: 0.68rem; color: var(--text-500); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Columna B: Conversación activa ---- */
#conv-main { min-width: 0; height: 100%; overflow: hidden; }
#conversacion { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-empty-full { margin: auto; color: var(--text-500); font-size: 0.9rem; }
.chat-head { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border-700); background: var(--surface-900); }
.chat-av { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--primary-500), var(--ai-500)); }
.chat-id { flex: 1; min-width: 0; }
.chat-name { font-family: var(--font-title); font-weight: 600; font-size: 1rem; color: var(--text-100); display: flex; align-items: center; gap: 8px; }
.chat-sub { font-size: 0.76rem; color: var(--text-400); display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.chip-sim { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; padding: 2px 8px; border-radius: 999px; background: var(--warning-bg); color: var(--warning-500); border: 1px solid rgba(245,158,11,0.35); }
.chip-real { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; padding: 2px 8px; border-radius: 999px; background: var(--success-bg); color: var(--success-500); border: 1px solid rgba(34,197,94,0.35); }
.chat-assign { font-size: 0.74rem; color: var(--text-400); flex-shrink: 0; }
.chat-assign b { color: var(--text-100); }

#chat { flex: 1; overflow-y: auto; min-height: 0; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 8px;
  background-image: radial-gradient(rgba(148,163,184,0.045) 1px, transparent 1.4px); background-size: 22px 22px; }
.chat-empty { margin: auto; color: var(--text-500); font-size: 0.85rem; }
.msg { max-width: 72%; padding: 9px 13px; border-radius: 12px; font-size: 0.85rem; line-height: 1.45; position: relative; }
.msg.entrante { align-self: flex-start; background: var(--surface-800); border: 1px solid var(--border-700); color: var(--text-100); border-bottom-left-radius: 4px; }
.msg.saliente { align-self: flex-end; background: linear-gradient(180deg, #3f6fd0, #2f579f); color: #fff; border-bottom-right-radius: 4px; }
.msg.interno { align-self: center; max-width: 82%; background: var(--human-bg); border: 1px dashed var(--human-500); color: var(--human-500); font-style: italic; }
.msg .msg-text { white-space: pre-wrap; word-break: break-word; }
.msg .msg-meta { font-size: 0.63rem; opacity: 0.75; margin-top: 4px; text-align: right; }
.msg .msg-estado { text-transform: capitalize; }
.msg-tag { display: block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--human-500); margin-bottom: 3px; font-style: normal; }

/* Eventos del sistema: NUNCA como mensaje */
.sys-event { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: var(--surface-850); border: 1px solid var(--border-700); font-size: 0.7rem; color: var(--text-400); margin: 2px 0; }
.sys-event .se-ico { width: 16px; height: 16px; display: grid; place-items: center; }
.sys-event .se-ico svg { width: 13px; height: 13px; }
.se-human { color: var(--human-500); } .se-ai { color: var(--ai-500); } .se-auto { color: var(--automation-500); } .se-sys { color: var(--info-500); }

/* Composer integrado y fijo */
.composer { flex-shrink: 0; border-top: 1px solid var(--border-700); background: var(--surface-900); padding: 8px 14px 12px; }
.composer-note { font-size: 0.68rem; color: var(--text-500); padding: 4px 2px 8px; }
.composer-note b { color: var(--warning-500); }
.composer-row { display: flex; gap: 10px; align-items: flex-end; }
.composer-row textarea { flex: 1; height: 46px; min-height: 46px; max-height: 140px; resize: vertical; }
.composer-actions { display: flex; gap: 6px; flex-shrink: 0; }
.composer-actions .btn { padding: 9px 12px; }

/* ---- Columna C: Contexto operativo ---- */
#contexto { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--surface-900); border-left: 1px solid var(--border-700); }
.ctx-empty-full { margin: auto; color: var(--text-500); font-size: 0.85rem; padding: 20px; text-align: center; }
.ctx-tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--border-700); padding: 0 6px; }
.ctx-tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-400); font-family: var(--font-body); font-size: 0.76rem; font-weight: 500; padding: 11px 4px; cursor: pointer; }
.ctx-tab:hover { color: var(--text-100); }
.ctx-tab.activo { color: var(--text-100); border-bottom-color: var(--primary-400); }
.ctx-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.ctx-pane { display: none; flex-direction: column; gap: 10px; }
.ctx-pane.activo { display: flex; }

.client-card { display: flex; gap: 11px; align-items: center; }
.cc-av { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--primary-500), var(--cyan-500)); }
.cc-name { font-weight: 600; color: var(--text-100); font-size: 0.9rem; }
.cc-tel { font-size: 0.74rem; color: var(--text-400); }
.cc-badges { margin-top: 4px; display: flex; gap: 6px; }
.ctx-fields { display: flex; flex-direction: column; gap: 1px; background: var(--surface-850); border: 1px solid var(--border-700); border-radius: var(--radius-control); overflow: hidden; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 8px 11px; border-bottom: 1px solid var(--border-700); font-size: 0.78rem; }
.kv:last-child { border-bottom: none; }
.kv-k { color: var(--text-500); } .kv-v { color: var(--text-100); text-align: right; font-weight: 500; }
.ctx-sub { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-500); font-weight: 600; margin-top: 2px; }
.ctx-warn { font-size: 0.74rem; color: var(--warning-500); background: var(--warning-bg); border: 1px solid rgba(245,158,11,0.30); border-radius: var(--radius-control); padding: 8px 11px; }
.ctx-empty-mini { color: var(--text-500); font-size: 0.78rem; padding: 10px 4px; }
.ctx-note-mini { color: var(--text-500); font-size: 0.7rem; padding: 4px 2px; font-style: italic; }

.ctx-card { background: linear-gradient(180deg, var(--surface-850), var(--surface-900)); border: 1px solid var(--border-700); border-radius: var(--radius-card); padding: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }
.ctx-card.vencida { border-color: rgba(239,68,68,0.4); }
.op-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.op-h b { color: var(--text-100); font-size: 0.85rem; }
.op-line { font-size: 0.78rem; color: var(--text-300, var(--text-200)); margin: 6px 0; }
.op-kv { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--text-500); padding: 2px 0; }
.op-kv b { color: var(--text-100); font-weight: 500; }
.op-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.op-actions .btn { padding: 6px 11px; font-size: 0.74rem; }
.ctx-new { margin-top: 2px; }
.ctx-new summary { cursor: pointer; font-size: 0.76rem; color: var(--primary-400); padding: 6px 2px; }
.ctx-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.act-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--border-700); }
.act-row:last-child { border-bottom: none; }
.act-row .act-ico { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center; background: var(--surface-800); }
.act-row .act-ico svg { width: 14px; height: 14px; }
.act-human { color: var(--human-500); } .act-ai { color: var(--ai-500); } .act-auto { color: var(--automation-500); } .act-sys { color: var(--info-500); }
.act-b { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.act-t { font-size: 0.77rem; color: var(--text-100); }
.act-delta { color: var(--text-500); font-size: 0.7rem; }
.act-s { font-size: 0.68rem; color: var(--text-500); }
.act-row .act-time { font-size: 0.66rem; color: var(--text-500); flex-shrink: 0; }

/* Bloques fijos del contexto */
.ctx-fixed { display: flex; flex-direction: column; gap: 12px; border-top: 1px dashed var(--border-700); padding-top: 12px; }
.hermes-card { background: linear-gradient(120deg, rgba(139,92,246,0.10), var(--surface-900) 60%); border-color: rgba(139,92,246,0.28); }
.hc-h { display: flex; align-items: center; gap: 10px; }
.hc-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--ai-500); background: var(--primary-bg); border: 1px solid rgba(139,92,246,0.4); position: relative; }
.hc-ico::before { content: ""; position: absolute; inset: -4px; border-radius: 12px; border: 1px solid rgba(139,92,246,0.3); }
.hc-ico svg { width: 18px; height: 18px; }
.hc-title { font-weight: 600; color: var(--text-100); font-size: 0.85rem; }
.hc-sub { font-size: 0.72rem; color: var(--ai-500); }
.hc-prop { margin-top: 8px; padding: 8px 10px; background: var(--surface-850); border: 1px solid var(--border-700); border-radius: var(--radius-control); }
.hc-prop b { color: var(--text-100); font-size: 0.8rem; }
.hc-motivo { font-size: 0.74rem; color: var(--text-400); margin: 2px 0; }
.hc-meta { font-size: 0.68rem; color: var(--text-500); }
.hc-note { font-size: 0.68rem; color: var(--text-500); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-700); font-style: italic; }
.ctx-row { display: flex; justify-content: space-between; align-items: center; }
.ctx-k { font-size: 0.78rem; color: var(--text-200); font-weight: 600; }
.ctx-mini { font-size: 0.72rem; color: var(--text-500); }
.apb-row { font-size: 0.76rem; color: var(--text-300, var(--text-200)); padding: 5px 0; display: flex; align-items: center; gap: 6px; }
.quick .ctx-sub { margin-bottom: 8px; }
.qa-assign { display: flex; gap: 6px; margin-bottom: 8px; }
.qa-assign input { flex: 1; min-width: 0; }
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.qa-grid .btn, .qa-grid select { font-size: 0.74rem; padding: 7px 8px; }

/* Modal propio (acciones sensibles) */
.cc-modal-ov { position: fixed; inset: 0; z-index: 200; background: rgba(4,7,12,0.66); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cc-modal { width: 400px; max-width: 100%; background: var(--surface-900); border: 1px solid var(--border-700); border-radius: var(--radius-card); box-shadow: var(--shadow-2); overflow: hidden; }
.cc-modal-h { padding: 16px 18px 8px; font-family: var(--font-title); font-weight: 600; font-size: 1rem; color: var(--text-100); }
.cc-modal-b { padding: 0 18px 16px; font-size: 0.84rem; color: var(--text-400); line-height: 1.5; }
.cc-modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border-700); background: var(--surface-850); }

/* Responsive Bandeja: tablet oculta contexto, mobile solo lista→conversación */
@media (max-width: 1200px){ #bandeja-layout { grid-template-columns: 300px minmax(0,1fr); } #contexto { display: none; } }
@media (max-width: 820px){ #bandeja-layout { grid-template-columns: 1fr; } #conv-col { display: none; } }

/* ============================================================================
   UI-4 · PIPELINE / FLUJO COMERCIAL INTELIGENTE
   4 macrofases (visual) con las 14 etapas reales adentro (orden real) + rail.
   Solo frontend; /api/pipeline y endpoints intactos.
   ========================================================================== */
#pipeline-root.pipe { height: 100%; display: flex; flex-direction: column; min-height: 0; background: var(--bg-950); }
.pipe-head { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px 12px; }
.pipe-title h2 { margin: 0; font-size: 1.35rem; }
.pipe-title p { margin: 3px 0 0; font-size: 0.8rem; color: var(--text-500); }
.pipe-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pipe-toggle { display: inline-flex; background: var(--surface-850); border: 1px solid var(--border-700); border-radius: var(--radius-pill); padding: 3px; }
.pipe-toggle button { background: none; border: none; color: var(--text-400); font-family: var(--font-body); font-size: 0.76rem; padding: 6px 14px; border-radius: var(--radius-pill); cursor: pointer; }
.pipe-toggle button.on { background: var(--primary-500); color: #fff; font-weight: 600; }

.pipe-grid2 { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 322px; gap: 14px; padding: 0 18px 16px; }
.pipe-main { min-width: 0; overflow: auto; }
.pipe-rail { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 2px; }

/* ---- Flujo inteligente ---- */
.pipe-flow { display: flex; align-items: stretch; gap: 0; min-height: 100%; }
.mf-col { flex: 1 1 0; min-width: 186px; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface-850), var(--surface-900)); border: 1px solid var(--border-700); border-radius: var(--radius-card); padding: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); position: relative; overflow: hidden; }
.mf-col::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.mf-1::before { background: var(--cyan-500); } .mf-2::before { background: var(--ai-500); } .mf-3::before { background: var(--blue-500); } .mf-4::before { background: var(--success-500); }
.mf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mf-num { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-title); font-weight: 700; font-size: 0.85rem; color: var(--text-100); background: var(--surface-800); border: 1px solid var(--border-600); }
.mf-1 .mf-num { color: var(--cyan-500); border-color: rgba(0,198,184,0.5); } .mf-2 .mf-num { color: var(--ai-500); border-color: rgba(139,92,246,0.5); } .mf-3 .mf-num { color: var(--blue-500); border-color: rgba(59,130,246,0.5); } .mf-4 .mf-num { color: var(--success-500); border-color: rgba(34,197,94,0.5); }
.mf-title b { display: block; font-family: var(--font-title); font-size: 0.9rem; color: var(--text-100); }
.mf-title span { display: block; font-size: 0.68rem; color: var(--text-500); line-height: 1.3; margin-top: 2px; }
.mf-stages { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mf-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-700); font-size: 0.7rem; color: var(--text-500); text-align: center; }
.mf-connector { flex: 0 0 26px; display: flex; align-items: center; justify-content: center; position: relative; }
.mf-connector .mf-line { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--border-600), var(--primary-500), var(--border-600)); opacity: 0.6; }
.mf-connector .mf-arrow { position: relative; color: var(--primary-400); font-size: 1.1rem; background: var(--bg-950); padding: 0 2px; }

.et-block { border-radius: var(--radius-control); }
.et-chip { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; background: var(--surface-800); border: 1px solid var(--border-700); border-radius: var(--radius-control); padding: 9px 10px; color: var(--text-200); transition: border-color 120ms ease, background 120ms ease; }
.et-chip:hover { border-color: var(--primary-500); background: var(--surface-850); }
.et-block.open .et-chip { border-color: var(--primary-500); background: var(--primary-bg); }
.et-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-500); }
.et-cyan .et-dot { background: var(--cyan-500); } .et-violet .et-dot { background: var(--ai-500); } .et-warn .et-dot { background: var(--warning-500); } .et-win .et-dot { background: var(--success-500); } .et-lost .et-dot { background: var(--danger-500); }
.et-name { flex: 1; font-size: 0.78rem; font-weight: 500; color: var(--text-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-count { font-family: var(--font-title); font-weight: 600; font-size: 0.9rem; color: var(--text-100); min-width: 20px; text-align: right; }
.et-caret { color: var(--text-500); font-size: 0.7rem; width: 10px; }
.et-cards { display: flex; flex-direction: column; gap: 8px; padding: 8px 2px 2px; }
.et-empty { font-size: 0.72rem; color: var(--text-500); padding: 8px 4px; text-align: center; }

/* Tarjeta de oportunidad (compartida Flujo + Kanban) */
.opp-card { background: var(--surface-850); border: 1px solid var(--border-700); border-left-width: 3px; border-radius: var(--radius-control); padding: 10px; cursor: pointer; transition: border-color 120ms ease, transform 80ms ease; }
.opp-card:hover { border-color: var(--primary-500); transform: translateY(-1px); }
.opp-card.prio-alta { border-left-color: var(--warning-500); }
.opp-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.opp-top b { font-size: 0.82rem; color: var(--text-100); }
.opp-line { font-size: 0.74rem; color: var(--text-200); margin-top: 3px; }
.opp-line.dim { color: var(--text-500); }
.opp-kv { display: flex; justify-content: space-between; gap: 8px; font-size: 0.7rem; color: var(--text-500); margin-top: 4px; }
.opp-kv b { color: var(--text-100); font-weight: 500; text-align: right; }
.opp-controls { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border-700); display: flex; flex-direction: column; gap: 6px; }
.opp-move { width: 100%; font-size: 0.72rem; padding: 6px 8px; }
.opp-close { display: flex; gap: 6px; }
.opp-close .btn { flex: 1; padding: 6px 8px; font-size: 0.7rem; }
.btn.win { background: var(--success-500); border-color: var(--success-500); color: #05210f; }
.btn.win:hover { filter: brightness(1.08); }

/* ---- Kanban (14 columnas reales) ---- */
.pipe-kanban { display: flex; gap: 12px; align-items: flex-start; min-height: 100%; }
.kb-col { flex: 0 0 224px; max-width: 224px; background: var(--surface-900); border: 1px solid var(--border-700); border-radius: var(--radius-card); padding: 10px; }
.kb-h { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--border-700); font-size: 0.78rem; color: var(--text-100); font-weight: 600; }
.kb-h span:nth-child(2) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-count { color: var(--text-500); font-family: var(--font-title); }
.kb-body { display: flex; flex-direction: column; gap: 8px; }

/* ---- Rail del pipeline ---- */
.pipe-rail .rail-card { background: linear-gradient(180deg, var(--surface-850), var(--surface-900)); border: 1px solid var(--border-700); border-radius: var(--radius-card); padding: 13px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }
.pipe-rail .attention-list { gap: 6px; }
.pipe-rail .attention-item { padding: 9px 10px; }
.pipe-resumen { display: flex; align-items: center; gap: 14px; }
.pipe-donut { width: 84px; height: 84px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; position: relative; }
.pipe-donut::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface-900); }
.pd-num { position: relative; font-family: var(--font-title); font-weight: 600; font-size: 1.2rem; color: var(--text-100); line-height: 1; }
.pd-k { position: relative; font-size: 0.6rem; color: var(--text-500); text-transform: uppercase; letter-spacing: 0.5px; }
.dist-legs { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.dist-leg { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; }
.dl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dl-k { color: var(--text-400); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-v { color: var(--text-100); font-weight: 500; }

/* Responsive Pipeline */
@media (max-width: 1200px){ .pipe-grid2 { grid-template-columns: 1fr; } .pipe-rail { flex-direction: row; flex-wrap: wrap; } .pipe-rail .rail-card { flex: 1 1 260px; } }
@media (max-width: 900px){ .pipe-flow { overflow-x: auto; } .mf-col { min-width: 220px; } }

/* ============================================================================
   UI-5 · CLIENTES + CLIENTE 360 (dos zonas)
   Zona A (listado) | Zona B (Cliente 360 dinámico). Solo frontend.
   ========================================================================== */
#clientes-layout { display: grid; grid-template-columns: 336px minmax(0,1fr); height: 100%; background: var(--bg-950); }

/* ---- Zona A: listado ---- */
#cli-lista { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--surface-900); border-right: 1px solid var(--border-700); }
.cli-head { padding: 12px 12px 10px; border-bottom: 1px solid var(--border-700); display: flex; flex-direction: column; gap: 9px; flex-shrink: 0; }
.cli-title { font-family: var(--font-title); font-weight: 600; font-size: 0.95rem; color: var(--text-100); display: flex; align-items: center; gap: 8px; }
.cli-nuevo { margin-left: auto; padding: 6px 12px; font-size: 0.76rem; }
.cli-search input { width: 100%; background: var(--surface-850); }
.cli-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cli-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-850); border: 1px solid var(--border-700); color: var(--text-400); border-radius: var(--radius-pill); padding: 5px 10px; font-size: 0.72rem; cursor: pointer; }
.cli-chip:hover { color: var(--text-100); }
.cli-chip.on { background: var(--primary-bg); border-color: var(--primary-500); color: var(--text-100); }
.cli-chip-n { background: var(--surface-800); border-radius: 999px; padding: 0 6px; font-size: 0.66rem; color: var(--text-400); }
.cli-chip.chip-atencion.on { background: var(--danger-bg); border-color: rgba(239,68,68,0.4); color: var(--danger-500); }
.cli-chip.chip-sin_prox.on { background: var(--warning-bg); border-color: rgba(245,158,11,0.4); color: var(--warning-500); }
#clientesTabla { flex: 1; overflow-y: auto; min-height: 0; }
.cli-foot { flex-shrink: 0; padding: 8px 12px; border-top: 1px solid var(--border-700); font-size: 0.68rem; color: var(--text-500); }
.cli-empty { padding: 20px; color: var(--text-500); font-size: 0.85rem; text-align: center; }

.cli-item { display: flex; gap: 10px; width: 100%; text-align: left; cursor: pointer; background: none; border: none; border-bottom: 1px solid var(--border-700); padding: 11px 12px; transition: background 100ms ease; }
.cli-item:hover { background: var(--surface-850); }
.cli-item.activo { background: var(--primary-bg); box-shadow: inset 3px 0 0 var(--primary-400); }
.cli-av { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--primary-500), var(--cyan-500)); }
.cli-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cli-row1 { display: flex; align-items: baseline; gap: 8px; }
.cli-name { font-weight: 600; font-size: 0.85rem; color: var(--text-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-id { font-size: 0.66rem; color: var(--text-500); flex-shrink: 0; }
.cli-contact { font-size: 0.73rem; color: var(--text-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-row2 { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.cli-row2 .badge { font-size: 0.58rem; padding: 2px 6px; }
.cli-resp { font-size: 0.66rem; color: var(--text-500); margin-left: auto; }
.cli-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.cli-alert { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 0.66rem; font-weight: 800; color: #fff; }
.cli-alert.danger { background: var(--danger-500); } .cli-alert.warn { background: var(--warning-500); }
.cli-time { font-size: 0.66rem; color: var(--text-500); }
.cli-open { font-size: 0.66rem; color: var(--primary-400); white-space: nowrap; }

/* ---- Zona B: Cliente 360 ---- */
#cliente360 { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
.c360-empty { margin: auto; color: var(--text-500); font-size: 0.9rem; padding: 24px; text-align: center; max-width: 360px; }

.c360-head { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 16px 20px 12px; }
.c360-av { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, var(--primary-500), var(--ai-500)); }
.c360-av.tone-danger { background: linear-gradient(135deg, var(--danger-500), #b91c1c); }
.c360-av.tone-warning { background: linear-gradient(135deg, var(--warning-500), #b45309); }
.c360-av.tone-success { background: linear-gradient(135deg, var(--success-500), #15803d); }
.c360-ident { flex: 1; min-width: 0; }
.c360-name { font-family: var(--font-title); font-weight: 600; font-size: 1.4rem; color: var(--text-100); display: flex; align-items: center; gap: 10px; }
.badge.estado-success { background: var(--success-bg); color: var(--success-500); }
.badge.estado-warning { background: var(--warning-bg); color: var(--warning-500); }
.badge.estado-danger { background: var(--danger-bg); color: var(--danger-500); }
.c360-subid { font-size: 0.78rem; color: var(--text-500); margin-top: 2px; }
.c360-head-meta { display: flex; gap: 24px; }
.c360-hm-k { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-500); }
.c360-hm-v { display: block; font-size: 0.84rem; color: var(--text-100); font-weight: 500; margin-top: 2px; }
.c360-link { background: none; border: none; color: var(--primary-400); cursor: pointer; font-size: 0.74rem; padding: 0 0 0 4px; }
.c360-menu { background: var(--surface-800); border: 1px solid var(--border-700); color: var(--text-400); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; flex-shrink: 0; }
.c360-menu:hover { color: var(--text-100); }
.c360-strip { flex-shrink: 0; display: flex; gap: 8px; padding: 8px 20px 14px; flex-wrap: wrap; border-bottom: 1px solid var(--border-700); }
.c360-si { flex: 1; min-width: 150px; background: var(--surface-850); border: 1px solid var(--border-700); border-radius: var(--radius-control); padding: 8px 11px; }
.c360-si-k { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-500); }
.c360-si-v { display: block; font-size: 0.82rem; color: var(--text-100); font-weight: 500; margin-top: 3px; }

.c360-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 200px; gap: 12px; padding: 14px 18px 16px; }
.c360-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.c360-tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--border-700); gap: 2px; }
.c360-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-400); font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; padding: 10px 14px; cursor: pointer; }
.c360-tab:hover { color: var(--text-100); }
.c360-tab.activo { color: var(--text-100); border-bottom-color: var(--primary-400); }
.c360-scroll { flex: 1; overflow-y: auto; min-height: 0; padding-top: 14px; }
.c360-pane { display: none; }
.c360-pane.activo { display: block; }

/* Grilla Resumen: 3 columnas de tarjetas */
.c360-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); gap: 12px; }
.c360-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.c360-card-h h4 { margin: 0; font-size: 0.84rem; color: var(--text-100); }
.c360-kvs { display: flex; flex-direction: column; gap: 1px; }
.c360-card .kv { padding: 5px 0; border-bottom: 1px solid var(--border-700); background: none; }
.c360-card .kv:last-child { border-bottom: none; }
.c360-empty-card { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.c360-empty-card p { margin: 0; color: var(--text-500); font-size: 0.8rem; }
.c360-cardlink { color: var(--primary-400); font-size: 0.74rem; cursor: pointer; margin-top: auto; }
.c360-cardlink:hover { text-decoration: underline; }
.c360-conv { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-700); }
.c360-conv:last-of-type { border-bottom: none; }
.c360-conv-ico { width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px; display: grid; place-items: center; background: var(--surface-800); color: var(--cyan-500); }
.c360-conv-ico svg { width: 13px; height: 13px; }
.c360-conv-b { display: flex; flex-direction: column; min-width: 0; }
.c360-conv-top { font-size: 0.68rem; color: var(--text-500); }
.c360-conv-dir { color: var(--text-400); }
.c360-conv-txt { font-size: 0.76rem; color: var(--text-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c360-counts { display: flex; gap: 8px; }
.c360-count { flex: 1; text-align: center; background: var(--surface-850); border: 1px solid var(--border-700); border-radius: var(--radius-control); padding: 10px 4px; }
.c360-count.danger { border-color: rgba(239,68,68,0.4); }
.c360-count.danger .c360-cn { color: var(--danger-500); }
.c360-cn { display: block; font-family: var(--font-title); font-size: 1.4rem; font-weight: 600; color: var(--text-100); }
.c360-ck { display: block; font-size: 0.66rem; color: var(--text-500); }
.c360-agenda .c360-ag-t { font-weight: 600; color: var(--text-100); font-size: 0.86rem; }
.c360-agenda .c360-ag-s { font-size: 0.76rem; color: var(--text-400); margin-top: 2px; }
.c360-prop { font-size: 0.78rem; color: var(--text-200); padding: 4px 0; }
.c360-prop b { color: var(--text-100); }
.c360-doc { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-200); padding: 5px 0; border-bottom: 1px solid var(--border-700); }
.c360-doc:last-child { border-bottom: none; }
.c360-doc a { color: var(--primary-400); text-decoration: none; }
.c360-doc a:hover { text-decoration: underline; }
/* LOCAL-4 F5: vincular archivos de Drive. Se reusan las variables del tema, sin
   colores nuevos: dos botones discretos arriba de la lista de documentos. */
.c360-doc-acciones { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border-700); }
.c360-doc-btn { cursor: pointer; background: var(--surface-850); border: 1px solid var(--border-700); border-radius: var(--radius-control); padding: 6px 10px; color: var(--text-200); font-size: 0.74rem; transition: border-color 120ms ease, background 120ms ease; }
.c360-doc-btn:hover { border-color: var(--primary-500); background: var(--surface-800); }
.c360-chat { display: flex; flex-direction: column; gap: 8px; }

/* Acciones rápidas (columna fija) */
.c360-actions { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; }
.c360-act-h { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-500); font-weight: 600; padding: 2px 2px 4px; }
.c360-act { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; background: var(--surface-850); border: 1px solid var(--border-700); border-radius: var(--radius-control); padding: 9px 11px; color: var(--text-200); transition: border-color 120ms ease, background 120ms ease; }
.c360-act:hover { border-color: var(--primary-500); background: var(--surface-800); }
.c360-act .c360-act-ico { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--surface-800); color: var(--cyan-500); }
.c360-act .c360-act-ico svg { width: 15px; height: 15px; }
.c360-act b { display: block; font-size: 0.8rem; color: var(--text-100); }
.c360-act small { display: block; font-size: 0.68rem; color: var(--text-500); }
.c360-act.danger { border-color: rgba(239,68,68,0.3); }
.c360-act.danger .c360-act-ico { color: var(--danger-500); }
.c360-act.danger b { color: var(--danger-500); }

/* Modal con formulario */
.cc-modal-form { width: 460px; }
.cc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; color: var(--text-400); }
.cc-form label[style*="1/-1"], .cc-form > label:only-child { grid-column: 1 / -1; }
.c360-dups { display: flex; flex-direction: column; gap: 6px; }
.c360-dup { background: var(--surface-850); border: 1px solid var(--border-700); border-radius: var(--radius-control); padding: 8px 11px; font-size: 0.8rem; color: var(--text-200); }

/* Responsive Clientes */
@media (max-width: 1200px){ #clientes-layout { grid-template-columns: 360px minmax(0,1fr); } .c360-body { grid-template-columns: 1fr; } .c360-actions { flex-direction: row; flex-wrap: wrap; } .c360-act { flex: 1 1 200px; } }
@media (max-width: 820px){ #clientes-layout { grid-template-columns: 1fr; } #cliente360 { display: none; } }

/* ------------------------------------------------------------------
   Correo (LOCAL-2, ago-2026) — clases NUEVAS únicamente. No se modifica
   ninguna regla del diseño ya aprobado: un borrador de correo necesita
   distinguirse a simple vista de una nota interna y de un correo ya
   enviado, porque confundirlos es exactamente el riesgo de esta etapa.
   ------------------------------------------------------------------ */
.msg-tag.warn { color: var(--warning-500); }
.msg-tag.ok { color: var(--success-500); }
.msg .msg-asunto { font-weight: 700; font-style: normal; margin-bottom: 4px; word-break: break-word; }
.msg .msg-acciones { margin-top: 8px; display: flex; justify-content: flex-end; }
.cc-form-nota { font-size: 0.75rem; color: var(--text-400); background: var(--surface-850); border: 1px solid var(--border-700); border-radius: var(--radius-control); padding: 8px 11px; }
.cc-form-nota.warn { color: var(--warning-500); background: var(--warning-bg); border-color: var(--warning-500); }

/* ------------------------------------------------------------------
   Contactos por identificar (LOCAL-2.5, ago-2026) — clases NUEVAS
   únicamente, sección propia. No se modifica ninguna regla del diseño
   aprobado de Dashboard, Bandeja, Pipeline ni Cliente 360.
   ------------------------------------------------------------------ */
.cpi-grupo { margin-bottom: 14px; padding: 12px 14px; }
.cpi-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cpi-rem { font-weight: 700; color: var(--text-100); word-break: break-all; }
.cpi-cand { font-size: 0.78rem; margin-bottom: 10px; }
.cpi-rec { color: var(--success-500); }
.cpi-amb { color: var(--warning-500); font-weight: 600; }
.cpi-item { border-top: 1px solid var(--border-700); padding: 10px 0 4px; }
.cpi-item-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cpi-meta { font-size: 0.68rem; color: var(--text-400); white-space: nowrap; }
.cpi-texto { font-size: 0.8rem; color: var(--text-200); margin: 5px 0 9px; white-space: pre-wrap; word-break: break-word; }
.cpi-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Estado de sincronización con Google Calendar (Agenda) ----------------
   Mismo lenguaje visual que `.badge`: píldora, mayúsculas, color de fondo
   tenue sobre color de texto saturado. No se inventa una paleta nueva; se
   reusan las variables de estado que ya existen. */
.sync-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  background: var(--neutral-bg); color: var(--text-400); cursor: default;
}
.sync-chip.sync-ok   { background: var(--success-bg); color: var(--success-500); }
.sync-chip.sync-warn { background: var(--warning-bg); color: var(--warning-500); }
.sync-chip.sync-err  { background: var(--danger-bg);  color: var(--danger-500); }
.sync-chip.sync-wait { background: var(--primary-bg); color: var(--primary-400); }
.sync-chip.sync-none { background: var(--neutral-bg); color: var(--text-500); }
.sync-link { margin-left: 6px; font-size: 0.7rem; }

/* --- Modal de resolución de conflicto (Agenda / Calendar) ----------------- */
.cc-modal-conf { width: 680px; }
.cf-intro { margin: 0 0 12px; }
.cf-tabla { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.cf-tabla th, .cf-tabla td {
  padding: 7px 10px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border-700); word-break: break-word;
}
.cf-tabla thead th { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-500); }
.cf-tabla tbody th { width: 96px; white-space: nowrap; color: var(--text-500); font-weight: 600; }
.cf-tabla td { width: 45%; color: var(--text-200); }
/* Sólo se resalta lo que DIFIERE: si todo se pinta igual, la persona tiene que
   comparar campo por campo con la vista, que es justo lo que el modal evita. */
.cf-dif td { background: var(--warning-bg); color: var(--text-100); }
.cf-aviso { padding: 8px 10px; border-radius: var(--radius-input, 8px); margin-bottom: 10px; font-size: 0.76rem; }
.cf-aviso.cf-warn { background: var(--warning-bg); color: var(--warning-500); }
.cf-aviso.cf-err  { background: var(--danger-bg);  color: var(--danger-500); }
.cf-aviso.cf-info { background: var(--neutral-bg); color: var(--text-400); }
.cf-pie { flex-wrap: wrap; }
.cf-pie .btn { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; }
/* Cada botón dice QUÉ SE PIERDE, no sólo qué se elige: "aceptar conscientemente"
   sin eso no significa nada. */
.cf-sub { font-size: 0.62rem; font-weight: 400; opacity: 0.75; text-transform: none; letter-spacing: 0; }
.btn.mini { padding: 2px 8px; font-size: 0.66rem; margin-left: 6px; }
.cf-nota { display: block; margin-top: 3px; font-size: 0.66rem; color: var(--text-500); }

/* ===== V0.1 · Línea de tiempo unificada de Cliente 360 =====================
   Una sola columna cronológica con todo lo que le pasó al cliente. El color
   vive en el ícono y en las etiquetas, no en el fondo de cada fila: con seis
   tipos mezclados, seis fondos distintos convierten la lista en un tablero de
   ajedrez y se pierde justo lo que la vista aporta, que es leer en orden. */
.c360-tab-n { display: inline-block; background: var(--surface-800); color: var(--text-400);
  border-radius: 9px; padding: 0 5px; font-size: 0.68rem; margin-left: 3px; }
.c360-tab.activo .c360-tab-n { background: var(--primary-bg); color: var(--primary-400); }

.lt-filtros { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-700); position: sticky; top: 0;
  background: var(--surface-900); z-index: 2; }
.lt-chip { background: var(--surface-850); border: 1px solid var(--border-700);
  color: var(--text-400); border-radius: 999px; padding: 3px 10px; cursor: pointer;
  font-family: var(--font-body); font-size: 0.74rem; }
.lt-chip:hover { color: var(--text-100); border-color: var(--border-600); }
.lt-chip.activo { background: var(--primary-bg); border-color: var(--primary-500);
  color: var(--primary-400); }
.lt-chip span { opacity: 0.65; margin-left: 3px; }

.lt-lista { padding: 6px 0 18px; }
.lt-item { display: flex; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--border-700); }
.lt-item:last-child { border-bottom: none; }
.lt-item:hover { background: var(--surface-850); }
.lt-ico { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-800); display: flex; align-items: center;
  justify-content: center; font-size: 0.8rem; }
.lt-item.tipo-interaccion .lt-ico { background: var(--info-bg); }
.lt-item.tipo-evento      .lt-ico { background: var(--cyan-bg); }
.lt-item.tipo-tarea       .lt-ico { background: var(--warning-bg); }
.lt-item.tipo-oportunidad .lt-ico { background: var(--primary-bg); }
.lt-item.tipo-documento   .lt-ico { background: var(--neutral-bg); }
.lt-item.tipo-sistema     .lt-ico { background: var(--surface-800); opacity: 0.75; }

.lt-body { min-width: 0; flex: 1; }
.lt-row1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  color: var(--text-100); font-size: 0.83rem; }
.lt-row1 b { font-weight: 600; overflow-wrap: anywhere; }
.lt-detalle { color: var(--text-400); font-size: 0.78rem; margin-top: 3px;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.lt-parts { color: var(--text-500); font-size: 0.72rem; margin-top: 3px;
  overflow-wrap: anywhere; }
.lt-meta { color: var(--text-500); font-size: 0.71rem; margin-top: 5px; }
.lt-ref { font-family: var(--font-mono, monospace); opacity: 0.8; }
.lt-link { margin-left: 8px; color: var(--primary-400); text-decoration: none; }
.lt-link:hover { text-decoration: underline; }

.lt-tag { background: var(--surface-800); color: var(--text-400); border-radius: 4px;
  padding: 1px 6px; font-size: 0.68rem; }
.lt-tag.dir-in  { background: var(--info-bg);    color: var(--info-500); }
.lt-tag.dir-out { background: var(--success-bg); color: var(--success-500); }
.lt-tag.alerta  { background: var(--danger-bg);  color: var(--danger-500); }
.lt-tag.hilo    { background: var(--cyan-bg);    color: var(--cyan-500); }
.lt-empty { color: var(--text-500); font-size: 0.8rem; padding: 26px 14px; text-align: center; }

/* Cliente de prueba: tiene que verse ANTES de escribirle, no después. */
.badge-prueba { background: var(--warning-bg); color: var(--warning-500);
  border-radius: 4px; padding: 1px 6px; font-size: 0.68rem; font-weight: 600; }

/* Conversación agrupada por hilo. La jerarquía se marca con una guía vertical y
   una sangría, no con otra tarjeta anidada: una caja dentro de una caja hace
   perder el eje temporal, que es lo único que la línea de tiempo garantiza. */
.lt-item.es-hilo { background: color-mix(in srgb, var(--cyan-bg) 22%, transparent); }
.lt-toggle { background: none; border: none; color: var(--primary-400); cursor: pointer;
  font-family: var(--font-body); font-size: 0.74rem; padding: 6px 0 0; }
.lt-toggle:hover { text-decoration: underline; }
.lt-hilo-sent { color: var(--text-500); font-size: 0.71rem; margin-left: 8px; }
.lt-anidados { margin-top: 8px; border-left: 2px solid var(--border-600); padding-left: 4px; }
.lt-item.anidado { padding: 8px 10px; border-bottom: 1px dashed var(--border-700); background: none; }
.lt-item.anidado:last-child { border-bottom: none; }
.lt-item.anidado .lt-ico { width: 20px; height: 20px; font-size: 0.68rem; }
.lt-item.anidado .lt-row1 { font-size: 0.79rem; }

/* Hechos comerciales cerrados y actividad del agente. */
.lt-tag.hecho { background: var(--success-bg); color: var(--success-500); }
.lt-tag.ia    { background: var(--ai-500); color: var(--bg-950); font-weight: 600; }

/* V0.1 · Cabecera de Cliente 360: qué hay que hacer ahora. */
.c360-alerta { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px;
  background: var(--danger-bg); border-bottom: 1px solid var(--border-700); }
.c360-alerta span { color: var(--danger-500); font-size: 0.75rem; font-weight: 600; }
.c360-alerta span:not(:last-child)::after { content: ' ·'; opacity: 0.5; }
.c360-si-sub { display: block; color: var(--text-500); font-size: 0.7rem;
  font-weight: 400; margin-top: 1px; }
.c360-si-v.alerta { color: var(--danger-500); }
.c360-si-vacio { color: var(--text-500); font-weight: 400; }