/* ============================================================
   CRM Design System — Moderno & Profesional
   ============================================================ */

/* ---- Variables ---- */
:root {
  /* Brand */
  --brand-blue:        #0A246A;
  --brand-blue-dark:   #071a50;
  --brand-green:       #66FF00;

  /* Primary actions */
  --color-primary:       #0A246A;
  --color-primary-hover: #071a50;

  /* Status colors */
  --color-success:  #16A34A;
  --color-warning:  #D97706;
  --color-danger:   #DC2626;
  --color-info:     #2563EB;
  --color-violet:   #7C3AED;

  /* Tints (pastel backgrounds para badges) */
  --tint-success:  #F0FDF4;
  --tint-warning:  #FFFBEB;
  --tint-danger:   #FEF2F2;
  --tint-info:     #EFF6FF;
  --tint-violet:   #F5F3FF;
  --tint-info-border: #93C5FD;

  /* Backgrounds */
  --bg-app:     #F1F5F9;
  --bg-surface: #FFFFFF;
  --bg-muted:   #F8FAFC;

  /* Text */
  --text-primary:   #1E293B;
  --text-secondary: #64748B;
  --text-muted:     #94A3B8;

  /* Borders */
  --border:        #E2E8F0;
  --border-strong: #CBD5E1;

  /* Radius */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow:    0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);

  /* Sidebar */
  --sidebar-width:           260px;
  --sidebar-width-collapsed: 72px;
  --sidebar-bg:              #15306E;
  --sidebar-text:            rgba(255,255,255,0.68);
  --sidebar-text-hover:      #ffffff;
  --sidebar-hover-bg:        rgba(255,255,255,0.08);
  --sidebar-active-bg:       rgba(255,255,255,0.13);
  --sidebar-active-text:     #ffffff;
  --sidebar-active-border:   #66FF00;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --bg-app:     #0F172A;
  --bg-surface: #1E293B;
  --bg-muted:   #263349;

  --text-primary:   #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;

  --border:        #334155;
  --border-strong: #475569;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow:    0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);

  --sidebar-bg:            #0B1E4D;
  --sidebar-hover-bg:      rgba(255,255,255,0.06);
  --sidebar-active-bg:     rgba(255,255,255,0.10);
}

[data-theme="dark"] .section { background: var(--bg-surface); }
[data-theme="dark"] .stat-card { background: var(--bg-surface); border-color: var(--border); }
[data-theme="dark"] table thead th { background: var(--bg-muted); color: var(--text-secondary); border-color: var(--border); }
[data-theme="dark"] table tbody tr { border-color: var(--border); }
[data-theme="dark"] table tbody tr:hover { background: var(--bg-muted); }
[data-theme="dark"] .btn { background: var(--bg-muted); border-color: var(--border); color: var(--text-secondary); }
[data-theme="dark"] .btn:hover { background: var(--border); color: var(--text-primary); }
[data-theme="dark"] .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
[data-theme="dark"] .btn-primary:hover { background: var(--color-primary-hover); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea,
[data-theme="dark"] .editor-body, [data-theme="dark"] .c-input {
  background: var(--bg-muted); border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="dark"] .search-input { background: var(--bg-muted); border-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .kanban-column { background: var(--bg-muted); border-color: var(--border); }
[data-theme="dark"] .kanban-card { background: var(--bg-surface); border-color: var(--border); }
[data-theme="dark"] .chatter-composer { background: var(--bg-surface); border-color: var(--border); }
[data-theme="dark"] .editor-toolbar { background: var(--bg-muted); border-color: var(--border); }
[data-theme="dark"] .composer-footer { background: var(--bg-muted); border-color: var(--border); }
[data-theme="dark"] .search-dropdown { background: var(--bg-surface); border-color: var(--border); }
[data-theme="dark"] .sd-item:hover, [data-theme="dark"] .sd-item:focus { background: var(--bg-muted); }
[data-theme="dark"] .alert { background: var(--bg-muted); border-color: var(--border); }
[data-theme="dark"] .badge { filter: brightness(0.9); }

/* Dark mode toggle button */
.dark-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.dark-toggle:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* ---- Reset & Base ---- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  background: var(--bg-app);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
}

.sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
}

/* Header */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  white-space: nowrap;
}

.sidebar-brand .brand-icon {
  width: 36px;
  height: 36px;
  background: var(--brand-green);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  font-size: 18px;
  font-weight: 900;
  flex-shrink: 0;
}

.sidebar.collapsed .brand-text {
  display: none;
}

.sidebar-toggle-btn {
  background: rgba(255,255,255,0.1);
  border: none;
  color: rgba(255,255,255,0.7);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.sidebar-toggle-btn:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

/* colapsada: marca arriba, toggle debajo — sin apretujarse en 72px */
.sidebar.collapsed .sidebar-header {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  height: auto;
  padding: 12px 0 10px;
}

/* Search */
.sidebar-search {
  padding: 12px 12px 4px;
  flex-shrink: 0;
}

.sidebar-search form {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  gap: 8px;
  transition: background 0.2s;
}

.sidebar-search form:focus-within {
  background: rgba(255,255,255,0.14);
}

.sidebar-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 13px;
  padding: 9px 0;
  font-family: var(--font-sans);
  outline: none;
  min-width: 0;
}

.sidebar-search input::placeholder { color: rgba(255,255,255,0.4); }

.sidebar-search button {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.sidebar-search button:hover { color: var(--brand-green); }

.sidebar.collapsed .sidebar-search {
  display: none;
}

/* Botón mini de búsqueda (visible solo cuando sidebar está colapsada o en mobile) */
.sidebar-search-mini {
  display: none;
  width: 40px;
  height: 40px;
  margin: 8px auto 4px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.sidebar-search-mini:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.sidebar.collapsed .sidebar-search-mini {
  display: flex;
}
@media (max-width: 768px) {
  .sidebar-search-mini { display: flex; }
}

/* Mobile search overlay */
.mobile-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  z-index: 10001;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
}
.mobile-search-overlay.open {
  display: flex;
}
.mobile-search-panel {
  width: 100%;
  max-width: 560px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.mobile-search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.mobile-search-header > i {
  color: var(--text-muted);
  font-size: 15px;
  flex-shrink: 0;
}
.mobile-search-header input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  outline: none;
  min-width: 0;
}
.mobile-search-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  font-size: 16px;
}
.mobile-search-close:hover { background: var(--bg-muted); color: var(--text-primary); }
.mobile-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}
.mobile-search-results .sd-item {
  border-radius: var(--radius-sm);
  border-bottom: none;
}

/* Navigation */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sidebar-section {
  padding: 16px 12px 4px;
}

.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}

/* colapsada: el label desaparece pero queda un divisor que agrupa */
.sidebar.collapsed .sidebar-section {
  height: 0;
  padding: 0;
  margin: 8px 16px 6px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.sidebar-links {
  list-style: none;
  padding: 0 8px;
}

.sidebar-links li {
  margin: 2px 0;
}

.sidebar-links a {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  gap: 12px;
  white-space: nowrap;
}

.sidebar-links a:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text-hover);
}

.sidebar-links a.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--sidebar-active-border);
}
.sidebar-links a.active i { color: var(--sidebar-active-border); }

.sidebar-links a i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-links a .link-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed .link-text,
.sidebar.collapsed .sidebar-section-label {
  display: none;
}

/* ── Sección colapsable (Administración) — oculta herramientas raras por defecto ── */
.sidebar-collapsible { padding: 0; }
.sidebar-collapsible > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 12px 4px;
  cursor: pointer;
  user-select: none;
}
.sidebar-collapsible > summary::-webkit-details-marker { display: none; }
.sidebar-collapsible > summary::marker { content: ""; }
.sidebar-collapsible > summary:hover .sidebar-section-label { color: rgba(255,255,255,0.70); }
.sidebar-collapsible-chev {
  font-size: 10px;
  color: rgba(255,255,255,0.40);
  transition: transform 0.18s ease;
}
.sidebar-collapsible[open] > summary .sidebar-collapsible-chev { transform: rotate(90deg); }
/* colapsada (solo íconos): ocultar el summary y mostrar siempre los accesos */
.sidebar.collapsed .sidebar-collapsible { margin: 8px 16px 6px; border-top: 1px solid rgba(255,255,255,0.10); }
.sidebar.collapsed .sidebar-collapsible > summary { display: none; }
.sidebar.collapsed .sidebar-collapsible > ul { display: block !important; }

.sidebar.collapsed .sidebar-links a {
  justify-content: center;
  padding: 10px;
  border-radius: var(--radius-sm);
  position: relative;
}

/* colapsada: el contador se vuelve insignia sobre el ícono, no un bloque al lado */
.sidebar.collapsed .overdue-badge {
  position: absolute;
  top: 3px;
  right: 7px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 8.5px;
  margin-left: 0;
}
.sidebar.collapsed .overdue-badge[data-overflow="true"] { font-size: 8px; }

/* Footer */
.sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
}

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.user-details {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sidebar.collapsed .user-details {
  display: none;
}

.sidebar.collapsed .user-card {
  justify-content: center;
  padding: 6px;
}

.sidebar-footer-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.sidebar-logout {
  flex: 1;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
}
.sidebar-logout:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}

/* colapsada: cerrar sesión y tema apilados y centrados (antes el tema desaparecía) */
.sidebar.collapsed .sidebar-footer-actions {
  flex-direction: column;
  align-items: center;
}
.sidebar.collapsed .sidebar-logout {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
}

.main-content.expanded {
  margin-left: var(--sidebar-width-collapsed);
}

/* Page container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 28px 40px;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.header-row h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

h1 { font-size: 24px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; margin-bottom: 0; }
h2 { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
h3 { font-size: 14px; font-weight: 600; color: var(--text-primary); }

/* ============================================================
   CARD / SECTION
   ============================================================ */
.section {
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid var(--border);
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* ============================================================
   STATS GRID
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.stat-card {
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: 20px 24px;
  border: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.stat-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-icon.blue   { background: #EFF6FF; color: #2563EB; }
.stat-icon.green  { background: #F0FDF4; color: #16A34A; }
.stat-icon.orange { background: #FFF7ED; color: #D97706; }
.stat-icon.purple { background: #F5F3FF; color: #7C3AED; }
.stat-icon.red    { background: #FEF2F2; color: #DC2626; }

.stat-body { flex: 1; min-width: 0; }

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.stat-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 400;
}

/* ============================================================
   TABLES
   ============================================================ */
.table-container {
  overflow-x: auto;
  overflow-y: hidden; /* evita scrollbar vertical fantasma: overflow-x:auto fuerza overflow-y a auto y un desborde sub-pixel pinta una barra */
  border-radius: var(--radius-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  text-align: left;
  padding: 11px 16px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

thead th:first-child { border-radius: var(--radius-sm) 0 0 0; }
thead th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }

tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-primary);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr {
  transition: background 0.12s;
}

tbody tr:hover {
  background: var(--bg-muted);
}

tbody tr.row-muted { opacity: 0.55; }

td a {
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 500;
}

td a:hover { text-decoration: underline; }

.col-name { font-weight: 600; }
.col-muted { color: var(--text-secondary); }

/* Actions column — el td se queda como celda de tabla (display:flex
   desalineaba la altura de la celda y dibujaba una costura vertical) */
.actions { white-space: nowrap; }
.actions > * + * { margin-left: 6px; }

td.actions { padding-top: 8px; padding-bottom: 8px; vertical-align: middle; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  text-decoration: none;
  color: var(--text-primary);
  background: var(--bg-surface);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  white-space: nowrap;
  line-height: 1;
}

.btn:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
}

.btn-success {
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
  font-weight: 600;
}

.btn-danger {
  background: transparent;
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-danger:hover {
  background: var(--color-danger);
  color: #fff;
}

.btn-sm {
  padding: 5px 11px;
  font-size: 12.5px;
  border-radius: 5px;
}

.btn-icon {
  padding: 7px 9px;
  color: var(--text-secondary);
}

.btn-active {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}

/* ============================================================
   FORMS
   ============================================================ */
.form {
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--border);
  max-width: 680px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

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

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(10,36,106,0.25);
}

.form-group textarea {
  resize: vertical;
  min-height: 90px;
}

.form-group small {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 5px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.form-divider {
  grid-column: 1 / -1;
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0 16px;
}

/* ============================================================
   SEARCH & FILTERS
   ============================================================ */
.search-bar {
  margin-bottom: 20px;
}

.search-bar form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 220px;
  padding: 9px 13px 9px 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 11px center;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(10,36,106,0.25);
}

.search-select {
  padding: 9px 34px 9px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
  min-width: 180px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s;
}

.search-select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(10,36,106,0.25);
}

.stage-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* ============================================================
   BADGES / CHIPS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Stages */
.stage-prospecto   { background: #F1F5F9; color: #64748B; }
.stage-calificado  { background: #EFF6FF; color: #2563EB; }
.stage-propuesta   { background: #F5F3FF; color: #7C3AED; }
.stage-negociacion { background: #FFF7ED; color: #D97706; }
.stage-ganado      { background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0; }
.stage-perdido     { background: #FEF2F2; color: #DC2626; }

/* Priorities */
.priority-baja    { background: #F1F5F9; color: #64748B; }
.priority-media   { background: #EFF6FF; color: #2563EB; }
.priority-alta    { background: #FFFBEB; color: #D97706; }
.priority-urgente { background: #FEF2F2; color: #DC2626; }

/* Task status */
.status-pendiente   { background: #F1F5F9; color: #64748B; }
.status-en_progreso { background: #EFF6FF; color: #2563EB; }
.status-completada  { background: #F0FDF4; color: #16A34A; }
.status-cancelada   { background: #FEF2F2; color: #DC2626; }

/* Activity actions */
.action-creado        { background: #F0FDF4; color: #16A34A; }
.action-actualizado   { background: #EFF6FF; color: #2563EB; }
.action-eliminado     { background: #FEF2F2; color: #DC2626; }
.action-completado    { background: #F0FDF4; color: #16A34A; }
.action-etapa_cambiada { background: #FFFBEB; color: #D97706; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid transparent;
}

.alert-success {
  background: #F0FDF4;
  color: #166534;
  border-color: #BBF7D0;
}

.alert-info {
  background: #EFF6FF;
  color: #1E40AF;
  border-color: #BFDBFE;
}

.alert-error {
  background: #FEF2F2;
  color: #991B1B;
  border-color: #FECACA;
}

.alert-warning {
  background: #FFFBEB;
  color: #92400E;
  border-color: #FDE68A;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.empty-state i {
  font-size: 40px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.empty-state p {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.empty {
  color: var(--text-secondary);
  padding: 24px 0;
  font-size: 14px;
}

.empty a { color: var(--brand-blue); }

/* ============================================================
   AUTH PAGES
   ============================================================ */
body.auth-page .sidebar,
body.auth-page .main-content { display: block; }

.main-content.no-sidebar {
  margin-left: 0 !important;
}

body.auth-page .main-content {
  margin-left: 0 !important;
  background: var(--brand-blue);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

body.auth-page .sidebar { display: none; }

.auth-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
}

.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}

.auth-logo .brand-icon {
  width: 52px;
  height: 52px;
  background: var(--brand-green);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 12px;
}

.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.auth-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

.auth-card .form-group input {
  padding: 11px 13px;
}

.auth-card .btn-primary {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  justify-content: center;
  margin-top: 6px;
}

.auth-link {
  text-align: center;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.auth-link a {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
}

.auth-link a:hover { text-decoration: underline; }

/* ============================================================
   KANBAN
   ============================================================ */
.kanban-board {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 4px 0 16px;
  align-items: flex-start;
  width: 100%;
}

.kanban-column {
  flex: 1 1 0;
  min-width: 0;
  background: var(--bg-muted);
  border-radius: var(--radius);
  padding: 12px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}

.kanban-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}

.kanban-column-header h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.stage-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stage-count {
  background: var(--border);
  color: var(--text-secondary);
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.kanban-column-body {
  flex: 1;
  min-height: 200px;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.kanban-column-body.drag-over {
  background: var(--tint-info);
  outline: 2px dashed var(--tint-info-border);
  outline-offset: -2px;
}

.kanban-drop-ghost {
  height: 6px;
  background: var(--color-info);
  border-radius: 4px;
  margin-bottom: 8px;
  opacity: 0;
  transition: opacity .1s;
}
.kanban-column-body.drag-over .kanban-drop-ghost { opacity: 1; }

.kanban-card {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  cursor: grab;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.kanban-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.kanban-card.dragging {
  opacity: 0.35;
  cursor: grabbing;
  transform: rotate(1.5deg) scale(1.02);
  box-shadow: var(--shadow-lg);
}

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

.kanban-card-header h4 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
  line-height: 1.4;
}

.card-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-success);
  white-space: nowrap;
}

.kanban-card-body p {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin: 3px 0;
}

.card-due {
  font-size: 12px;
  color: var(--color-danger);
  font-weight: 500;
}

.kanban-card-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.kanban-card-footer .btn {
  width: 100%;
  justify-content: center;
  font-size: 12.5px;
}

/* Overdue task badge in sidebar */
.overdue-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  margin-left: auto;
  line-height: 1;
}

/* Kanban stage-move toast */
.kanban-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--text-primary);
  color: var(--bg-surface);
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  transition: transform .25s ease, opacity .25s ease;
  opacity: 0;
  pointer-events: none;
}
.kanban-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ============================================================
   CALENDAR
   ============================================================ */
.calendar-container {
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid var(--border);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.calendar-header h2 { margin: 0; font-size: 20px; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-day-header {
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 4px;
}

.calendar-day {
  min-height: 96px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px;
  background: var(--bg-surface);
  transition: background 0.12s;
}

.calendar-day:hover { background: var(--bg-muted); }
.calendar-day.empty { background: transparent; border: none; }

.calendar-day.today .calendar-day-number {
  background: var(--brand-blue);
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-day-number {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px;
  margin-bottom: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-tasks { display: flex; flex-direction: column; gap: 3px; }

.calendar-task {
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 11px;
  background: var(--bg-muted);
  color: var(--text-secondary);
}

.calendar-task a {
  color: var(--text-primary);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-task.priority-urgente { background: #FEF2F2; color: var(--color-danger); }
.calendar-task.priority-alta    { background: #FFFBEB; color: var(--color-warning); }
.calendar-task.priority-media   { background: #EFF6FF; color: var(--color-info); }
.calendar-task.priority-baja    { background: var(--bg-muted); color: var(--text-secondary); }
.calendar-task.status-completada { opacity: 0.55; text-decoration: line-through; }

/* ============================================================
   CHAT
   ============================================================ */
.chat-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  height: calc(100vh - 180px);
}

.chat-list {
  background: var(--bg-surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow-y: auto;
}

.chat-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.12s;
}

.chat-list-item:hover { background: var(--bg-muted); }
.chat-list-item.active { background: var(--bg-muted); }

.chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.chat-unread {
  background: var(--color-danger);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  margin-left: auto;
}

/* ============================================================
   MENTION LINK
   ============================================================ */
.mention-link {
  color: var(--brand-blue);
  background: rgba(10,36,106,0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95em;
}

/* ============================================================
   REPORTS / BAR CHART
   ============================================================ */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 600px;
}

.bar-chart-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bar-chart-label {
  min-width: 120px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.bar-chart-track {
  flex: 1;
  background: var(--bg-muted);
  border-radius: 6px;
  overflow: hidden;
  height: 32px;
}

.bar-chart-bar {
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  min-width: 40px;
  transition: width 0.6s ease;
}

/* ============================================================
   TAGS
   ============================================================ */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-muted   { color: var(--text-muted); }
.text-danger  { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-small   { font-size: 12.5px; }
.fw-600       { font-weight: 600; }
.mt-0  { margin-top: 0; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.d-flex { display: flex; }
.gap-8  { gap: 8px; }

/* ============================================================
   LIVE SEARCH DROPDOWN
   ============================================================ */
.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 8px;
  right: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}

.sd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background .1s;
  border-bottom: 1px solid var(--border);
  outline: none;
}
.sd-item:last-child { border-bottom: none; }
.sd-item:hover, .sd-item:focus { background: var(--bg-muted); }

.sd-icon {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--bg-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.sd-body { flex: 1; min-width: 0; }
.sd-name { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-sub  { display: block; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-type { font-size: 10.5px; font-weight: 600; color: var(--text-muted); background: var(--bg-muted); padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.sd-empty { padding: 12px 14px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* ============================================================
   TAG CHIPS
   ============================================================ */
.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.9;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  /* En móvil el sidebar es un cajón (drawer) oculto que abre el hamburguesa de la barra superior. */
  .sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 1000;
    box-shadow: 6px 0 34px rgba(0,0,0,.28);
  }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .container { padding: 16px; }
  .header-row, .page-header { flex-direction: column; align-items: flex-start; }
  .sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999;
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
}

/* ============================================================
   CHATTER COMPOSER
   ============================================================ */

/* Composer wrapper */
.chatter-composer {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  overflow: hidden;
}

/* Rich-text toolbar */
.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-muted);
}
.editor-toolbar button {
  width: 28px; height: 26px;
  border: none; background: transparent;
  border-radius: 4px;
  font-size: 13px; cursor: pointer;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.editor-toolbar button:hover  { background: var(--border); color: var(--text-primary); }
.editor-toolbar button.active-fmt { background: #DBEAFE; color: var(--color-primary); }
.editor-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; flex-shrink:0; }

/* Editable area */
.editor-body {
  min-height: 80px;
  max-height: 200px;
  overflow-y: auto;
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  line-height: 1.6;
  outline: none;
}
.editor-body:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}
.editor-body ul, .editor-body ol { padding-left: 20px; }

/* Footer row: primary action + secondary links */
.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-muted);
  gap: 8px;
}
.composer-secondary-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.composer-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
  font-family: var(--font-sans);
}
.composer-action-btn:hover  { color: var(--text-primary); background: var(--border); }
.composer-action-btn.active { color: var(--color-primary); background: #EFF6FF; border-color: #BFDBFE; }

/* Expandable inline forms */
.composer-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s ease, padding .2s ease;
  border-top: none;
}
.composer-expand.open {
  max-height: 200px;
  border-top: 1px solid var(--border);
}
.composer-expand-inner { padding: 12px 14px; }

.expand-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.expand-row + .expand-row { margin-top: 6px; }
.expand-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* Compact shared inputs */
.c-input {
  padding: 6px 10px;
  font-size: 13px;
  font-family: var(--font-sans);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  transition: border-color .15s;
}
.c-input:focus { border-color: var(--color-primary); }

/* ============================================================
   CHATTER TIMELINE (compact)
   ============================================================ */
.chatter-timeline { display: flex; flex-direction: column; }
.chatter-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.chatter-item:last-child { border-bottom: none; }
.chatter-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}
.chatter-comment  .chatter-icon { background: #EFF6FF; color: #2563EB; }
.chatter-activity .chatter-icon { background: #FFFBEB; color: #D97706; }
.chatter-task     .chatter-icon { background: #F0FDF4; color: #16A34A; }
.chatter-attachment .chatter-icon { background: #F5F3FF; color: #7C3AED; }
.chatter-call     .chatter-icon { background: #FFF1F2; color: #E11D48; }
.chatter-body { flex: 1; min-width: 0; }
.chatter-meta {
  display: flex; align-items: center;
  gap: 6px; margin-bottom: 3px; flex-wrap: wrap;
}
.chatter-user { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.chatter-date { font-size: 11.5px; color: var(--text-muted); margin-left: auto; }
.chatter-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  word-break: break-word;
}
.chatter-content ul, .chatter-content ol { padding-left: 18px; margin: 4px 0; }
.chatter-content p { margin: 0; }

/* ============================================================
   KANBAN MOBILE — stack columns vertically on small screens
   ============================================================ */
@media (max-width: 768px) {
  .kanban-board {
    flex-direction: column;
    gap: 12px;
  }
  .kanban-column {
    min-height: auto;
    width: 100%;
  }
}

/* ============================================================
   KANBAN TABLET — horizontal scroll en lugar de squish
   ============================================================ */
@media (min-width: 769px) and (max-width: 1199px) {
  .kanban-board {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 12px;
  }
  .kanban-column {
    flex: 0 0 280px;
    min-width: 280px;
    scroll-snap-align: start;
  }
}

/* ============================================================
   DETAIL PAGE (3 columnas) — colapsar en tablet/mobile
   ============================================================ */
@media (max-width: 1024px) {
  .detail-3col,
  [data-detail-3col] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   ACCESIBILIDAD — focus visible global
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.btn:focus-visible,
.sidebar-links a:focus-visible,
.kanban-card:focus-visible,
.tag-chip:focus-visible,
.composer-action-btn:focus-visible,
.editor-toolbar button:focus-visible,
.sd-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10,36,106,0.25);
}
[data-theme="dark"] :focus-visible {
  outline-color: #60A5FA;
}
[data-theme="dark"] .btn:focus-visible,
[data-theme="dark"] .sidebar-links a:focus-visible,
[data-theme="dark"] .kanban-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(96,165,250,0.35);
}

/* Skip link para keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-blue);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 10000;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 16px;
  top: 0;
}

/* ============================================================
   PREFERS-REDUCED-MOTION — respetar siempre
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .kanban-card:hover,
  .stat-card:hover {
    transform: none !important;
  }
  .kanban-card.dragging {
    transform: none !important;
  }
  .btn:active {
    transform: none !important;
  }
  .sidebar,
  .main-content {
    transition: none !important;
  }
  .kanban-toast {
    transition: opacity 0.01ms !important;
  }
}

/* ============================================================
   OVERFLOW NUMERIC BADGES — "9+" cuando hay muchos
   ============================================================ */
.overdue-badge[data-overflow="true"]::before {
  content: "9+";
}
.overdue-badge[data-overflow="true"] {
  font-size: 9.5px;
}

/* ============================================================
   STAGE FILTER ICON-ONLY (header dropdowns)
   ============================================================ */
.actions-dropdown {
  position: relative;
  display: inline-block;
}
.actions-dropdown > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: background 0.15s, border-color 0.15s;
}
.actions-dropdown > summary:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}
.actions-dropdown > summary::-webkit-details-marker { display: none; }
.actions-dropdown > summary::after {
  content: "▾";
  font-size: 10px;
  margin-left: 2px;
  color: var(--text-muted);
}
.actions-dropdown[open] > summary {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}
.actions-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.actions-dropdown-menu a,
.actions-dropdown-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-primary);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  width: 100%;
}
.actions-dropdown-menu a:hover,
.actions-dropdown-menu button:hover {
  background: var(--bg-muted);
}
.actions-dropdown-menu .divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ============================================================
   MOVE-TO MENU del kanban (alternativa accesible al drag)
   ============================================================ */
.kanban-card-move {
  position: relative;
  margin-top: 8px;
}
.kanban-card-move > summary {
  list-style: none;
  cursor: pointer;
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 3px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kanban-card-move > summary:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}
.kanban-card-move > summary::-webkit-details-marker { display: none; }
.kanban-card-move-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  margin-top: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.kanban-card-move-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font-family: var(--font-sans);
}
.kanban-card-move-menu button:hover {
  background: var(--bg-muted);
}
.kanban-card-move-menu button[disabled] {
  color: var(--text-muted);
  cursor: not-allowed;
}
.kanban-card-move-menu button[disabled]:hover {
  background: transparent;
}

/* ============================================================
   CUSTOM CONFIRM MODAL (reemplazo de window.confirm)
   ============================================================ */
/* ═══════════════════════════════════════════════════════════
   MODALES — sistema unificado (brand: blur, animación, ícono)
   ═══════════════════════════════════════════════════════════ */
.modal-overlay, .confirm-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px;
}
.modal-overlay.open, .confirm-modal-overlay.open { display: flex; animation: modalFade .18s ease both; }
@keyframes modalFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes modalPop { from { opacity: 0; transform: translateY(10px) scale(.97) } to { opacity: 1; transform: none } }

.modal-card, .confirm-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%; max-width: 440px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28), 0 6px 16px rgba(15, 23, 42, 0.14);
  overflow: hidden;
  animation: modalPop .22s cubic-bezier(.16, 1, .3, 1) both;
}

/* Confirm modal */
.confirm-modal { max-width: 420px; }
.confirm-modal-icon {
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--tint-danger); color: var(--color-danger);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; margin: 24px 24px 0;
}
.confirm-modal h2 { font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 15px 24px 6px; }
.confirm-modal p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin: 0 24px 0; padding-bottom: 22px; }
.confirm-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 15px 24px; border-top: 1px solid var(--border); background: var(--bg-muted);
}

/* Modal genérico reutilizable (header / body / footer) */
.modal-header { display: flex; align-items: center; gap: 11px; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-header .mh-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.modal-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.modal-close { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s ease; }
.modal-close:hover { background: var(--bg-muted); color: var(--text-primary); }
.modal-body { padding: 20px 22px; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; padding: 15px 22px; border-top: 1px solid var(--border); background: var(--bg-muted); }

[data-theme="dark"] .modal-overlay, [data-theme="dark"] .confirm-modal-overlay { background: rgba(2, 6, 18, 0.66); }
[data-theme="dark"] .modal-card, [data-theme="dark"] .confirm-modal { border-color: var(--border-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .confirm-modal-actions, [data-theme="dark"] .modal-footer, [data-theme="dark"] .modal-header { border-color: var(--border-strong); }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay.open, .confirm-modal-overlay.open, .modal-card, .confirm-modal { animation: none; }
}

/* ============================================================
   VISUALLY HIDDEN — label semánticos invisibles
   ============================================================ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   HOVER ROW — reemplazo de onmouseover/onmouseout inline
   ============================================================ */
.hover-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.hover-row:hover,
.hover-row:focus-visible {
  background: var(--bg-muted);
  text-decoration: none;
}
.hover-row.is-done {
  opacity: 0.55;
}

/* ============================================================
   SCORE BADGES (reemplazo de hex hardcoded en deals)
   ============================================================ */
.score-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.score-badge.score-high   { background: var(--color-success); }
.score-badge.score-medium { background: var(--color-warning); }
.score-badge.score-low    { background: var(--color-danger); }

/* ============================================================
   SKELETON LOADERS
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-muted) 0%, var(--border) 50%, var(--bg-muted) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
.skeleton-block {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.chart-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg-muted) 0%, var(--border) 50%, var(--bg-muted) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--radius-sm);
  z-index: 1;
  pointer-events: none;
}
.chart-ready .chart-skeleton {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton, .chart-skeleton { animation: none; }
}

/* ============================================================
   ANIMATIONS NO-LAYOUT — bar chart usa transform en lugar de width
   ============================================================ */
.bar-chart-bar {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: left center;
}

/* Composer expand: sin transition de max-height/padding */
.composer-expand {
  transition: none;
}

/* ═══════════════════════════════════════════════════════════════
   PATRÓN DE LISTA HOMOLOGADO (Empresas / Contactos / Negocios)
   ═══════════════════════════════════════════════════════════════ */

/* — Toolbar: título + conteo — */
.list-head { display:flex; align-items:center; gap:10px; }
.list-count {
  font-size:13px; font-weight:600; color:var(--text-muted);
  background:var(--bg-muted); border:1px solid var(--border);
  padding:2px 9px; border-radius:var(--radius-xl); line-height:1.4;
}

/* — Segmentos (quick filters) — */
.seg-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.seg {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--radius-xl);
  font-size:12.5px; font-weight:600; cursor:pointer;
  color:var(--text-secondary); background:transparent;
  border:1px solid var(--border); text-decoration:none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.seg:hover { background:var(--bg-muted); color:var(--text-primary); }
.seg.is-active {
  background:var(--brand-blue); color:#fff; border-color:var(--brand-blue);
}
.seg .seg-count {
  font-size:11px; font-weight:700; opacity:.75;
}

/* — Barra de filtros — */
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.filter-search { position:relative; flex:1; min-width:200px; }
.filter-search svg {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; color:var(--text-muted); pointer-events:none;
}
.filter-bar input[type="text"], .filter-bar select {
  padding:8px 11px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-surface); color:var(--text-primary); font-size:13px;
  font-family:inherit; box-sizing:border-box;
}
.filter-search input { width:100%; padding-left:34px; }
.filter-bar select { cursor:pointer; }
.filter-bar input:focus, .filter-bar select:focus {
  outline:none; border-color:var(--brand-blue);
  box-shadow:0 0 0 3px rgba(10,36,106,0.12);
}

/* — Chips de filtros aplicados (removibles) — */
.applied-filters { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.applied-label {
  font-size:11px; color:var(--text-muted); font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
}
.applied-chip {
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 6px 4px 11px; border-radius:var(--radius-xl);
  font-size:12px; font-weight:500; text-decoration:none;
  background:var(--bg-surface); color:var(--text-primary);
  border:1px solid var(--border-strong);
}
.applied-chip:hover { border-color:var(--brand-blue); }
.applied-chip .x {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; color:var(--text-muted);
  font-size:10px; background:var(--bg-muted);
}
.applied-chip:hover .x { background:var(--tint-danger); color:var(--color-danger); }
.applied-clear { font-size:12px; color:var(--text-muted); text-decoration:none; font-weight:500; margin-left:2px; }
.applied-clear:hover { color:var(--color-danger); }

/* — Barra de acción masiva — */
.bulk-bar {
  display:none; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:12px; padding:9px 14px; border-radius:var(--radius-sm);
  background:var(--brand-blue); color:#fff; box-shadow:var(--shadow-md);
}
.bulk-bar.show { display:flex; }
.bulk-bar .bulk-count { font-weight:700; font-size:13px; }
.bulk-bar .bulk-sep { flex:1; }
.bulk-bar select {
  padding:5px 9px; border-radius:var(--radius-sm); border:none;
  font-size:12px; font-family:inherit;
}
.bulk-bar .btn { padding:5px 11px; font-size:12px; }

/* — Tabla: checkbox + th ordenable + score — */
.list-table th.col-check, .list-table td.col-check { width:38px; text-align:center; padding-left:14px; padding-right:0; }
.list-table input[type="checkbox"] { width:15px; height:15px; cursor:pointer; accent-color:var(--brand-blue); vertical-align:middle; }
.list-table th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.list-table th.sortable:hover { color:var(--text-primary); }
.list-table th .sort-caret { font-size:9px; opacity:.4; margin-left:4px; }
.list-table th.sorted .sort-caret { opacity:1; color:var(--brand-blue); }
.list-table tbody tr.is-selected { background:var(--tint-info); }

.score-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:22px; padding:0 8px; border-radius:var(--radius-xl);
  font-size:11.5px; font-weight:700;
}
.score-badge.high { background:var(--tint-success); color:var(--color-success); }
.score-badge.mid  { background:var(--tint-warning); color:var(--color-warning); }
.score-badge.low  { background:var(--tint-danger);  color:var(--color-danger); }

/* — Acciones de fila — */
.list-table td.actions { white-space:nowrap; }
.list-table td.actions .btn-icon { color:var(--text-secondary); }
.list-table td.actions .btn-icon:hover { color:var(--brand-blue); background:var(--bg-muted); }
.list-table td.actions .btn-icon.danger:hover { color:var(--color-danger); background:var(--tint-danger); }

/* ── Fila rica de lista (Empresas TOP) ── */
.list-table { table-layout: auto; }
.list-table td { padding-top:11px; padding-bottom:11px; vertical-align:middle; }

.co-cell { display:flex; align-items:center; gap:11px; min-width:0; }
.co-avatar {
  flex:none; width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700; letter-spacing:.3px;
  background:rgba(10,36,106,0.07); color:var(--brand-blue);
  border:1px solid rgba(10,36,106,0.10);
}
.co-text { min-width:0; }
.co-name {
  font-weight:600; font-size:14px; color:var(--text-primary);
  text-decoration:none; display:inline-flex; align-items:center; gap:7px;
}
.co-name:hover { color:var(--brand-blue); }
.co-name .co-web { color:var(--text-muted); font-size:11px; }
.co-name .co-web:hover { color:var(--brand-blue); }
.co-sub {
  font-size:12px; color:var(--text-muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px;
}

.tag-pill {
  display:inline-flex; align-items:center; padding:2px 9px; border-radius:var(--radius-xl);
  font-size:11px; font-weight:600; line-height:1.5; white-space:nowrap;
}
.cell-tags { display:flex; gap:4px; flex-wrap:wrap; max-width:200px; }

.owner { display:inline-flex; align-items:center; gap:7px; }
.owner-avatar {
  width:24px; height:24px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; color:#fff; background:var(--brand-blue);
}
.owner-name { font-size:13px; color:var(--text-secondary); }

.score-cell { display:inline-flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:78px; }
.score-num { font-size:13px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.score-num small { font-size:10px; font-weight:500; color:var(--text-muted); }
.score-track { width:64px; height:5px; border-radius:99px; background:var(--bg-muted); overflow:hidden; }
.score-fill { display:block; height:100%; border-radius:99px; }
.score-fill.high { background:var(--color-success); }
.score-fill.mid  { background:var(--brand-blue); }
.score-fill.low  { background:var(--color-warning); }

/* sizing de columnas: empresa flexible, resto compacto */
.list-table th.c-tags, .list-table td.c-tags { width:210px; }
.list-table th.c-owner, .list-table td.c-owner { width:150px; }
.list-table th.c-num, .list-table td.c-num { width:90px; text-align:center; }
.list-table th.c-score, .list-table td.c-score { width:96px; }
.list-table th.c-act, .list-table td.c-act { width:120px; text-align:right; }

/* enlace de orden accesible por teclado */
.list-table th.sortable a {
  color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:4px;
}
.list-table th.sortable a:hover { color:var(--text-primary); }
.list-table th.sortable a:focus-visible { outline:2px solid var(--brand-blue); outline-offset:2px; border-radius:3px; }

/* ── Compactación + fixes de crítica UI (Empresas denso) ── */
.list-page { max-width: 1320px; }
.list-table td, .list-table th { padding-top:7px; padding-bottom:7px; }
.list-table thead th { padding-top:9px; padding-bottom:9px; }
.co-avatar { width:30px; height:30px; border-radius:8px; font-size:11px; }
.co-name { font-size:13.5px; }
.co-sub { color:var(--text-secondary); font-size:11.5px; margin-top:1px; max-width:340px; }
.co-web { opacity:0; transition:opacity .12s ease; }
.list-table tbody tr:hover .co-web { opacity:1; }
.co-web:focus-visible { opacity:1; }

/* números a la derecha + tabulares */
.list-table th.c-num, .list-table td.c-num { text-align:right; padding-right:22px; font-variant-numeric:tabular-nums; width:80px; }
.list-table th.c-score, .list-table td.c-score { text-align:right; padding-right:14px; width:92px; }

/* score: número + punto (sin barra que choca con tags verdes) */
.score2 { display:inline-flex; align-items:center; gap:7px; justify-content:flex-end; }
.score2 .dot { width:7px; height:7px; border-radius:50%; flex:none; }
.score2 .dot.high { background:var(--color-success); }
.score2 .dot.mid  { background:var(--brand-blue); }
.score2 .dot.low  { background:var(--color-warning); }
.score2 .n { font-size:13.5px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.score2 .n small { font-size:10px; font-weight:500; color:var(--text-secondary); }

/* count como texto, no badge */
.list-count { background:none; border:none; padding:0 0 0 2px; color:var(--text-secondary); font-size:14px; font-weight:500; }

/* acciones: un solo estilo, aparecen en hover de fila */
.list-table td.actions .btn-icon { background:none; border:none; padding:6px; opacity:.5; transition:opacity .12s ease, background .12s ease, color .12s ease; }
.list-table tbody tr:hover td.actions .btn-icon { opacity:1; }
.list-table td.actions .btn-icon:focus-visible { opacity:1; }
.list-table td.actions .btn-icon:hover { background:var(--bg-muted); }
.list-table td.actions .btn-icon.danger { margin-left:6px; }

/* tag única no estira la columna */
.list-table th.c-tags, .list-table td.c-tags { width:160px; }

/* ── Ronda 3 de fixes ── */
/* checkbox de fila solo en hover / seleccionado (borde izquierdo limpio) */
.list-table td.col-check .row-check { opacity:0; transition:opacity .12s ease; }
.list-table tbody tr:hover .row-check,
.list-table .row-check:checked,
.list-table .row-check:focus-visible { opacity:1; }

/* headers numéricos alineados a la derecha (con su data) */
.list-table th.c-num, .list-table th.c-score { text-align:right; }
.list-table th.c-num a, .list-table th.c-score a { justify-content:flex-end; }
.list-table th.c-score .hdr-scale { color:var(--text-muted); font-weight:500; margin-left:2px; }

/* "0" atenuado: no compite con datos reales */
.list-table td.c-num.zero { color:var(--text-muted); opacity:.45; }

/* punto de score más legible; "medio" en azul info (no navy = no se confunde con texto) */
.score2 .dot { width:8px; height:8px; }
.score2 .dot.mid { background:var(--color-info); }

/* etiquetas en una sola línea → altura de fila uniforme */
.cell-tags { flex-wrap:nowrap; overflow:hidden; }
.list-table th.c-tags, .list-table td.c-tags { width:178px; }
.tag-pill { white-space:nowrap; }

/* fila de filtros + guardar vista en una sola línea */
.filter-row { display:flex; gap:10px; align-items:center; }
.filter-row .filter-bar { flex:1; margin-bottom:0; }

/* ── Modo selección: mostrar todos los checkboxes ── */
.list-table.selecting td.col-check .row-check { opacity:1; }
.bulk-bar .bulk-div { width:1px; height:22px; background:rgba(255,255,255,.22); margin:0 4px; }
.bulk-bar .bulk-clear {
  background:none; border:none; color:rgba(255,255,255,.75); cursor:pointer;
  font-size:12.5px; font-weight:600; padding:5px 8px; text-decoration:underline;
}
.bulk-bar .bulk-clear:hover { color:#fff; }
.bulk-bar label.bulk-lbl { color:rgba(255,255,255,.8); font-size:12px; font-weight:600; }

/* ── Ronda 4: fixes de critique (contraste, dark mode, touch) ── */

/* "Eliminar" en bulk bar: rojo sobre navy no llega a AA → fondo blanco, texto rojo */
.bulk-bar .btn-danger { background:#fff; border-color:#fff; color:var(--color-danger); }
.bulk-bar .btn-danger:hover { background:var(--tint-danger); border-color:var(--tint-danger); color:var(--color-danger); }

/* select sin valor al aplicar acción masiva: anillo de error en vez de alert() */
.bulk-bar select.field-error { box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 0 0 5px var(--color-danger); }

/* avatar de iniciales: tokens por tema (en dark, navy sobre navy era invisible) */
[data-theme="dark"] .co-avatar {
  background:rgba(147,197,253,.12); color:#93C5FD; border-color:rgba(147,197,253,.18);
}

/* score como semáforo real: coincide con el filtro Alto/Medio/Bajo */
.score2 .dot.high { background:var(--color-success); }
.score2 .dot.mid  { background:var(--color-warning); }
.score2 .dot.low  { background:var(--color-danger); }

/* etiquetas que no caben: chip "+N" en vez de corte silencioso */
.tag-more {
  display:inline-flex; align-items:center; flex:none;
  padding:2px 7px; border-radius:var(--radius-xl);
  font-size:11px; font-weight:600; line-height:1.5;
  color:var(--text-secondary); background:var(--bg-muted);
  border:1px solid var(--border); cursor:default;
}

/* vistas guardadas: clase propia en vez de estilo inline */
.applied-chip.is-view { border-style:dashed; }
.applied-chip.is-view .fa-bookmark { font-size:10px; color:var(--text-muted); }

/* teléfono clickeable en la sub-línea */
.co-sub a { color:inherit; text-decoration:none; }
.co-sub a:hover { color:var(--brand-blue); text-decoration:underline; }

/* form inline "Guardar vista" sin estilos en el template */
.save-view-form { display:none; gap:6px; align-items:center; }
.save-view-form.open { display:inline-flex; }
.save-view-form input[type="text"] { padding:5px 10px; font-size:12px; width:150px; }

/* touch: lo revelado por hover no existe en móvil → siempre visible */
@media (hover:none) {
  .list-table td.col-check .row-check,
  .list-table td.actions .btn-icon,
  .co-web { opacity:1; }
}

/* móvil: la fila de filtros envuelve, "Guardar vista" deja de recortarse */
@media (max-width:768px) {
  .filter-row { flex-wrap:wrap; }
  .filter-row .filter-bar { flex:1 1 100%; }
}

/* ── Ronda 5: avatares con identidad de color + columnas centradas ── */

/* paleta de identidad: tinte pastel + texto saturado, asignada por id estable */
.co-avatar.av0 { background:#EFF6FF; color:#1D4ED8; border-color:#DBEAFE; }
.co-avatar.av1 { background:#F0FDF4; color:#15803D; border-color:#DCFCE7; }
.co-avatar.av2 { background:#F5F3FF; color:#6D28D9; border-color:#EDE9FE; }
.co-avatar.av3 { background:#FFF7ED; color:#B45309; border-color:#FFEDD5; }
.co-avatar.av4 { background:#FFF1F2; color:#BE123C; border-color:#FFE4E6; }
.co-avatar.av5 { background:#F0FDFA; color:#0F766E; border-color:#CCFBF1; }
.co-avatar.av6 { background:#EEF2FF; color:#4338CA; border-color:#E0E7FF; }
.co-avatar.av7 { background:#FDF4FF; color:#A21CAF; border-color:#FAE8FF; }

[data-theme="dark"] .co-avatar.av0 { background:rgba(147,197,253,.12); color:#93C5FD; border-color:rgba(147,197,253,.18); }
[data-theme="dark"] .co-avatar.av1 { background:rgba(134,239,172,.12); color:#86EFAC; border-color:rgba(134,239,172,.18); }
[data-theme="dark"] .co-avatar.av2 { background:rgba(196,181,253,.12); color:#C4B5FD; border-color:rgba(196,181,253,.18); }
[data-theme="dark"] .co-avatar.av3 { background:rgba(252,211,77,.12);  color:#FCD34D; border-color:rgba(252,211,77,.18); }
[data-theme="dark"] .co-avatar.av4 { background:rgba(253,164,175,.12); color:#FDA4AF; border-color:rgba(253,164,175,.18); }
[data-theme="dark"] .co-avatar.av5 { background:rgba(94,234,212,.12);  color:#5EEAD4; border-color:rgba(94,234,212,.18); }
[data-theme="dark"] .co-avatar.av6 { background:rgba(165,180,252,.12); color:#A5B4FC; border-color:rgba(165,180,252,.18); }
[data-theme="dark"] .co-avatar.av7 { background:rgba(240,171,252,.12); color:#F0ABFC; border-color:rgba(240,171,252,.18); }

/* Contactos y Score centrados con sus headers */
.list-table th.c-num, .list-table td.c-num { text-align:center; padding-right:16px; }
.list-table th.c-score, .list-table td.c-score { text-align:center; padding-right:16px; }
.list-table th.c-num a, .list-table th.c-score a { justify-content:center; }
.score2 { justify-content:center; }

/* acciones sin redundancia: el nombre ya navega, sobran ojo y ancho */
.list-table th.c-act, .list-table td.c-act { width:90px; }

/* ── Ronda 6: tarjeta integrada — toolbar pegada, tabla a sangre completa ── */

.list-page.flush .seg-bar { margin-bottom:12px; }
/* overflow:clip recorta las esquinas sin romper el sticky del thead */
.list-page.flush .section { padding:0; overflow:clip; }

/* la barra de filtros es parte de la tarjeta, no un mosaico flotante */
.list-page.flush .table-toolbar { padding:10px 12px; margin:0; }
.list-page.flush .filter-search { flex:0 1 340px; min-width:220px; }

/* chips de filtros aplicados: franja propia dentro de la tarjeta */
.list-page.flush .applied-filters { padding:0 12px 10px; margin:0; }

/* bulk bar integrada: franja navy a sangre, sin radio ni sombra ambiente */
.list-page.flush .bulk-bar { margin:0; border-radius:0; box-shadow:none; }

/* tabla a sangre: head sticky, esquinas rectas (la tarjeta ya recorta) */
.list-page.flush .list-table thead th { position:sticky; top:0; z-index:5; border-radius:0; }
.list-page.flush .list-table tbody tr:last-child td { border-bottom:none; }

/* acciones silenciosas: aparecen con la fila, no compiten con los datos */
.list-page.flush .list-table td.actions .btn-icon { opacity:0; }
.list-page.flush .list-table tbody tr:hover td.actions .btn-icon,
.list-page.flush .list-table td.actions .btn-icon:focus-visible { opacity:1; }
@media (hover:none) {
  .list-page.flush .list-table td.actions .btn-icon { opacity:1; }
}

/* avatar un punto más grande: ahora carga la identidad de la fila */
.list-page.flush .co-avatar { width:32px; height:32px; font-size:11.5px; }

/* footer de tarjeta */
.list-page.flush .table-footer { border-top:1px solid var(--border); }
.list-page.flush .table-footer:empty { display:none; }
.list-page.flush .empty-state { padding:48px 16px; }

/* paginación con clases (antes inline styles) */
.pg-bar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; padding:10px 0;
}
.list-page.flush .table-footer .pg-bar { padding:10px 16px; }
.pg-info { font-size:13px; color:var(--text-secondary); }
.pg-controls { display:flex; gap:4px; }

/* ═══════════════════════════════════════════════════════════════
   PÁGINA DE DETALLE (record page) — Empresa / Contacto / Negocio
   ═══════════════════════════════════════════════════════════════ */
.rec-page { max-width: 1320px; }
.rec-head { display:flex; align-items:center; gap:15px; min-width:0; }
.rec-avatar {
  width:54px; height:54px; border-radius:16px; flex:none;
  background:rgba(10,36,106,.07); border:1px solid rgba(10,36,106,.10);
  color:var(--brand-blue); display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; letter-spacing:.5px;
}
.rec-titlewrap { min-width:0; }
.rec-titlewrap h1 { margin:0; line-height:1.15; }
.rec-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px; font-size:13px; color:var(--text-secondary); }
.rec-meta a { color:var(--text-secondary); text-decoration:none; }
.rec-meta a:hover { color:var(--brand-blue); }
.rec-meta .mi { display:inline-flex; align-items:center; gap:5px; }
.rec-meta .mi i { color:var(--text-muted); font-size:11px; }
.rec-meta .sep { color:var(--border-strong); }

/* score chip (consistente con la lista) */
.score-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--radius-xl); font-size:12.5px; font-weight:700; }
.score-chip .dot { width:7px; height:7px; border-radius:50%; }
.score-chip.high { background:var(--tint-success); color:var(--color-success); } .score-chip.high .dot { background:var(--color-success); }
.score-chip.mid  { background:var(--tint-info);    color:var(--color-info); }    .score-chip.mid .dot  { background:var(--color-info); }
.score-chip.low  { background:var(--tint-warning); color:var(--color-warning); } .score-chip.low .dot  { background:var(--color-warning); }

/* stat tiles (máx 4, una fila — regla del DESIGN.md) */
.rec-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0 4px; }
.rec-stat { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; display:flex; align-items:center; gap:13px; }
.rec-stat .ic { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:16px; flex:none; }
.rec-stat .ic.blue   { background:var(--tint-info);    color:var(--color-info); }
.rec-stat .ic.orange { background:var(--tint-warning); color:var(--color-warning); }
.rec-stat .ic.green  { background:var(--tint-success); color:var(--color-success); }
.rec-stat .ic.purple { background:var(--tint-violet);  color:var(--color-violet); }
.rec-stat .v { font-size:21px; font-weight:700; color:var(--text-primary); line-height:1.05; font-variant-numeric:tabular-nums; }
.rec-stat .l { font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); margin-top:3px; }

/* key-value sin break-all (label arriba, value abajo) */
.kv { display:flex; flex-direction:column; gap:14px; }
.kv-row { display:flex; flex-direction:column; gap:3px; min-width:0; }
.kv-label { font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); display:flex; align-items:center; gap:6px; }
.kv-label i { width:13px; text-align:center; }
.kv-value { font-size:13.5px; color:var(--text-primary); overflow-wrap:anywhere; line-height:1.4; }
.kv-value a { color:var(--brand-blue); text-decoration:none; word-break:break-all; }
.kv-value a:hover { text-decoration:underline; }

/* layout 2 columnas */
.rec-grid { display:grid; grid-template-columns:330px minmax(0,1fr); gap:20px; align-items:start; }
.rec-grid > div { min-width:0; }
@media (max-width:1024px){ .rec-grid{ grid-template-columns:1fr; } .rec-stats{ grid-template-columns:repeat(2,1fr); } }

/* negocios como cards */
.deal-card { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); text-decoration:none; transition:border-color .12s ease, background .12s ease; }
.deal-card:hover { border-color:var(--brand-blue); background:var(--bg-muted); }
.deal-card .dt { font-size:14px; font-weight:600; color:var(--text-primary); }
.deal-card .dmeta { font-size:12px; color:var(--text-muted); margin-top:2px; }
.deal-card .dval { font-size:14px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* contacto en sidebar */
.mini-contact { display:flex; align-items:center; gap:11px; text-decoration:none; padding:8px 9px; border-radius:var(--radius-sm); transition:background .12s ease; }
.mini-contact:hover { background:var(--bg-muted); }
.mini-contact .ca { width:36px; height:36px; border-radius:11px; background:var(--bg-muted); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex:none; }
.mini-contact .cn { font-size:13.5px; font-weight:600; color:var(--text-primary); }
.mini-contact .cr { font-size:11.5px; color:var(--text-muted); }

/* card section header con acción */
.card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }

/* ── Dark mode: links legibles (el navy de marca no contrasta en oscuro) ── */
[data-theme="dark"] .kv-value a,
[data-theme="dark"] .co-name:hover,
[data-theme="dark"] .rec-meta a:hover,
[data-theme="dark"] .deal-card:hover .dt { color:#5B9DF9; }
[data-theme="dark"] .co-name { color:var(--text-primary); }

/* negocio compacto en sidebar (registro relacionado) */
.mini-deal { display:flex; justify-content:space-between; align-items:center; gap:10px; text-decoration:none; padding:9px; border-radius:var(--radius-sm); transition:background .12s ease; }
.mini-deal:hover { background:var(--bg-muted); }
.mini-deal .dt { font-size:13.5px; font-weight:600; color:var(--text-primary); }
.mini-deal .cr { font-size:11.5px; color:var(--text-muted); margin-top:1px; }
.mini-deal .dv { font-size:13px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; white-space:nowrap; }
[data-theme="dark"] .mini-deal:hover .dt { color:var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════
   DETALLE MODERNO (HubSpot / Salezy) — tarjetas suaves, 3 columnas
   ═══════════════════════════════════════════════════════════════ */
.det-page { max-width: 1440px; }

/* tarjeta moderna: redondeada + sombra sutil */
.mcard { background:var(--bg-surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.03); }
.mcard + .mcard { margin-top:16px; }
.mcard-pad { padding:18px 20px; }
.mcard-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 20px; }
.mcard-head + .mcard-body { padding:0 20px 18px; }
.mcard-title { font-size:14px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:9px; }
.mcard-title i { color:var(--text-muted); }
.mcard-title .ct { font-size:11px; font-weight:700; color:var(--text-secondary); background:var(--bg-muted); padding:1px 8px; border-radius:10px; }
.mcard-add { width:30px; height:30px; border-radius:9px; border:1px solid var(--border); background:var(--bg-surface); color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all .12s ease; text-decoration:none; }
.mcard-add:hover { border-color:var(--brand-blue); color:var(--brand-blue); background:var(--bg-muted); }

/* tira de stats (Salezy) */
.stat-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:18px 0; }
.stat-c { display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:16px; background:var(--bg-surface); border:1px solid var(--border); box-shadow:0 1px 2px rgba(15,23,42,.04); }
.stat-c .sic { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:18px; flex:none; }
.stat-c .sic.blue{ background:var(--tint-info); color:var(--color-info);} .stat-c .sic.orange{ background:var(--tint-warning); color:var(--color-warning);} .stat-c .sic.green{ background:var(--tint-success); color:var(--color-success);} .stat-c .sic.purple{ background:var(--tint-violet); color:var(--color-violet);}
.stat-c .sv { font-size:23px; font-weight:700; color:var(--text-primary); line-height:1.05; font-variant-numeric:tabular-nums; }
.stat-c .sl { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); margin-top:3px; }

/* score gauge (anillo) */
.gauge { position:relative; width:64px; height:64px; flex:none; }
.gauge svg { transform:rotate(-90deg); display:block; }
.gauge .gv { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.gstat { display:flex; align-items:center; gap:14px; padding:13px 18px; border-radius:16px; background:var(--bg-surface); border:1px solid var(--border); box-shadow:0 1px 2px rgba(15,23,42,.04); }
.gstat .sl { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); }
.gstat .sx { font-size:12.5px; color:var(--text-secondary); margin-top:3px; }

/* grid 3 columnas */
.det3 { display:grid; grid-template-columns:310px minmax(0,1fr) 320px; gap:18px; align-items:start; }
.det3 > div { min-width:0; }
@media (max-width:1240px){ .det3{ grid-template-columns:300px minmax(0,1fr); } .det3 .col-assoc{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,1fr); gap:18px; align-items:start; } .det3 .col-assoc > .mcard{ margin-top:0; } }
@media (max-width:900px){ .det3{ grid-template-columns:1fr; } .det3 .col-assoc{ grid-template-columns:1fr; } .stat-strip{ grid-template-columns:repeat(2,1fr); } }

/* acciones rápidas */
.quick-row { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:14px; }
.quick-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:11px; border:1px solid var(--border); background:var(--bg-surface); color:var(--text-primary); font-size:13px; font-weight:500; cursor:pointer; text-decoration:none; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:all .12s ease; }
.quick-btn:hover { border-color:var(--brand-blue); background:var(--bg-muted); transform:translateY(-1px); }
.quick-btn i { color:var(--brand-blue); font-size:14px; }

/* filtros de actividad */
.act-filters { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px; }
.act-filter { padding:6px 13px; border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-secondary); transition:all .12s ease; }
.act-filter:hover { background:var(--bg-muted); color:var(--text-primary); }
.act-filter.is-active { background:var(--brand-blue); color:#fff; border-color:var(--brand-blue); }

/* dark: tarjetas suaves */
[data-theme="dark"] .mcard, [data-theme="dark"] .stat-c, [data-theme="dark"] .gstat, [data-theme="dark"] .quick-btn { box-shadow:none; }
[data-theme="dark"] .quick-btn i { color:#5B9DF9; }

/* ═══ PULIDO detalle moderno: form-input + íconos consistentes ═══ */
/* clase .form-input faltaba (el select de etiquetas/campos salía sin estilo) */
.form-input { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13.5px; font-family:var(--font-sans); color:var(--text-primary); background:var(--bg-surface); transition:border-color .15s, box-shadow .15s; appearance:none; -webkit-appearance:none; }
select.form-input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; padding-right:30px; cursor:pointer; }
.form-input:focus { outline:none; border-color:var(--brand-blue); box-shadow:0 0 0 3px rgba(10,36,106,.16); }

/* lenguaje de íconos unificado: ratio de redondez ~0.30 en toda la familia */
.mini-contact .ca { border-radius:11px; }
.chatter-icon { border-radius:9px; }

/* fila "agregar etiqueta" alineada (select + botón misma altura) */
.tag-add-row { display:flex; gap:7px; align-items:stretch; }
.tag-add-row .form-input { flex:1; }
.tag-add-row .btn { flex:none; display:inline-flex; align-items:center; justify-content:center; padding-top:0; padding-bottom:0; }

/* micro-detalles: stat cards reaccionan sutil, pills de tag más definidas */
.stat-c, .gstat { transition:border-color .15s ease, box-shadow .15s ease; }
.stat-c:hover, .gstat:hover { border-color:var(--border-strong); }
[data-theme="dark"] .stat-c:hover, [data-theme="dark"] .gstat:hover { border-color:var(--border-strong); }

/* dark: avatar de empresa legible (texto navy sobre oscuro fallaba contraste) */
[data-theme="dark"] .rec-avatar { background:rgba(96,165,250,.14); border-color:rgba(96,165,250,.22); color:#93C5FD; }

/* tag chips del detalle: tipografía limpia y legible (color en punto+fondo, texto oscuro) */
.tagchip { display:inline-flex; align-items:center; gap:7px; padding:5px 10px 5px 11px; border-radius:8px; font-size:12.5px; font-weight:600; letter-spacing:.1px; line-height:1; color:var(--text-primary); background:var(--tc-bg); border:1px solid var(--tc-bd); cursor:pointer; transition:background .12s ease, border-color .12s ease; font-family:var(--font-sans); }
.tagchip:hover { background:var(--tc-bgh); border-color:var(--tc); }
.tagchip .tdot { width:7px; height:7px; border-radius:50%; background:var(--tc); flex:none; }
.tagchip .tx { font-size:11px; opacity:.4; margin-left:1px; transition:opacity .12s ease; }
.tagchip:hover .tx { opacity:.85; }

/* ═══ DARK MODE — crítica: contraste de acciones + elevación real ═══ */
/* el primario navy #0A246A se hundía en el fondo oscuro -> azul brillante visible (~5.8:1 con blanco) */
[data-theme="dark"] .btn-primary { background:#3B5BDB; border-color:#3B5BDB; color:#fff; }
[data-theme="dark"] .btn-primary:hover { background:#4D6BE8; border-color:#4D6BE8; }
/* "+" de los headers: visible sobre la tarjeta, hover azul claro */
[data-theme="dark"] .mcard-add { background:var(--bg-muted); border-color:var(--border-strong); color:var(--text-secondary); }
[data-theme="dark"] .mcard-add:hover { border-color:#3B5BDB; color:#7AA2FF; background:var(--bg-muted); }
/* elevación real en dark: sombra oscura + borde más marcado (antes era plano sin profundidad) */
[data-theme="dark"] .mcard, [data-theme="dark"] .stat-c, [data-theme="dark"] .gstat { box-shadow:0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25); border-color:#37475E; }

/* ═══ DARK MODE fix 2: chips de stat con tint OSCURO (no blanco brillante) + inputs ═══ */
/* los tints claros (#EFF6FF) hacían que los chips brillaran como cuadros blancos en dark */
[data-theme="dark"] .stat-c .sic.blue   { background:rgba(96,165,250,.15); color:#93C5FD; }
[data-theme="dark"] .stat-c .sic.orange { background:rgba(251,191,36,.15);  color:#FCD34D; }
[data-theme="dark"] .stat-c .sic.green  { background:rgba(74,222,128,.15);  color:#86EFAC; }
[data-theme="dark"] .stat-c .sic.purple { background:rgba(167,139,250,.15); color:#C4B5FD; }
/* select/input recesado + chevron visible en dark (antes chevron #64748B casi invisible) */
[data-theme="dark"] .form-input { background-color:var(--bg-muted); border-color:var(--border-strong); color:var(--text-primary); }
[data-theme="dark"] select.form-input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; }
[data-theme="dark"] .form-input:focus { border-color:#3B5BDB; box-shadow:0 0 0 3px rgba(59,91,219,.30); }

/* avatar del autor en el timeline (notas = persona, no ícono genérico) */
.chatter-avatar { width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; letter-spacing:.3px; flex-shrink:0; margin-top:2px; }

/* ═══ NOTAS: imágenes en miniatura + acciones solo-hover ═══ */
.chatter-content { line-height:1.6; }
/* imágenes pegadas: miniatura clickeable (antes salían a tamaño completo y reventaban el layout) */
.chatter-content img, .editor-body img { height:104px; width:auto; max-width:170px; object-fit:cover; border-radius:8px; border:1px solid var(--border); margin:8px 8px 0 0; cursor:zoom-in; vertical-align:top; box-shadow:0 1px 2px rgba(15,23,42,.06); transition:border-color .12s ease, transform .12s ease; }
.chatter-content img:hover, .editor-body img:hover { border-color:var(--brand-blue); transform:scale(1.03); }
/* editar/borrar nota: aparecen al pasar el mouse (menos ruido) */
.chatter-comment .cmt-actions { opacity:0; transition:opacity .12s ease; }
.chatter-item:hover .cmt-actions, .chatter-item:focus-within .cmt-actions { opacity:1; }
/* lightbox de imagen */
#imgLightbox { display:none; position:fixed; inset:0; background:rgba(8,12,22,.88); z-index:9999; align-items:center; justify-content:center; cursor:zoom-out; padding:32px; }
#imgLightbox img { max-width:94%; max-height:94%; border-radius:10px; box-shadow:0 16px 50px rgba(0,0,0,.55); }

/* ═══ ACENTO TURQUESA: acción "agregar/crear" (botones +) ═══ */
:root { --accent-add:#0D9488; --accent-add-tint:#0D94881A; --accent-add-tint-h:#0D948830; --accent-add-bd:#0D948840; }
[data-theme="dark"] { --accent-add:#2DD4BF; --accent-add-tint:rgba(45,212,191,.14); --accent-add-tint-h:rgba(45,212,191,.24); --accent-add-bd:rgba(45,212,191,.32); }

/* "+" de headers (Negocios / Contactos) */
.mcard-add { background:var(--accent-add-tint); border-color:var(--accent-add-bd); color:var(--accent-add); }
.mcard-add:hover { background:var(--accent-add-tint-h); border-color:var(--accent-add); color:var(--accent-add); }
[data-theme="dark"] .mcard-add { background:var(--accent-add-tint); border-color:var(--accent-add-bd); color:var(--accent-add); }
[data-theme="dark"] .mcard-add:hover { background:var(--accent-add-tint-h); border-color:var(--accent-add); color:var(--accent-add); }

/* "+" de Etiquetas (mismo lenguaje turquesa) */
.btn-add { background:var(--accent-add-tint); border:1px solid var(--accent-add-bd); color:var(--accent-add); }
.btn-add:hover { background:var(--accent-add-tint-h); border-color:var(--accent-add); color:var(--accent-add); }
[data-theme="dark"] .btn-add { background:var(--accent-add-tint); border-color:var(--accent-add-bd); color:var(--accent-add); }
[data-theme="dark"] .btn-add:hover { background:var(--accent-add-tint-h); border-color:var(--accent-add); color:var(--accent-add); }

/* ═══ FORMULARIOS crear/editar — card moderno + secciones + 2 columnas ═══ */
.form { max-width: 880px; border-radius: 16px; padding: 26px 28px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
[data-theme="dark"] .form { box-shadow: none; border-color: var(--border-strong); }
.form-section + .form-section { border-top: 1px solid var(--border); padding-top: 22px; margin-top: 6px; }
.form-section-title { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.form-section-title i { color: var(--text-muted); }
.form-group.full, .form-grid-2 .full { grid-column: 1 / -1; }

/* ═══ FORMS v2 — full-bleed (sin tarjeta flotante), secciones coloridas, dinámico ═══ */
.form { max-width: 1000px; background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; }
[data-theme="dark"] .form { background: transparent; border: none; box-shadow: none; }
.form-section { padding: 26px 0 8px; border: none; margin: 0; }
.form-section + .form-section { border-top: 1px solid var(--border); margin-top: 2px; }
/* encabezado de sección con ícono de color + subtítulo */
.fs-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.fs-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.fs-title { font-size: 16px; font-weight: 700; color: var(--text-primary); line-height: 1.15; }
.fs-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
.fs-head .fs-action { margin-left: auto; }
/* inputs más cómodos */
.form .form-group input, .form .form-group select, .form .form-group textarea { padding: 11px 13px; border-radius: 10px; }
.form .form-group input:hover, .form .form-group select:hover, .form .form-group textarea:hover { border-color: var(--border-strong); }
/* footer de acciones (limpio, al final) */
.form-actions { background: transparent; padding: 20px 0 8px; margin-top: 14px; border-top: 1px solid var(--border); }
.form-actions .btn-primary { padding: 11px 22px; }
/* entrada dinámica escalonada de secciones */
@keyframes formSecIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.form-section { animation: formSecIn .42s cubic-bezier(.16,1,.3,1) both; }
.form-section:nth-of-type(2) { animation-delay: .06s; }
.form-section:nth-of-type(3) { animation-delay: .12s; }
.form-section:nth-of-type(4) { animation-delay: .18s; }
.form-section:nth-of-type(5) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .form-section { animation: none; } }

/* ═══ Lista: acciones en overlay al hover (sin columna) + pipeline ═══ */
.list-table tbody tr { position: relative; }
.list-table .row-actions { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); display: flex; gap: 6px; align-items: center; opacity: 0; pointer-events: none; transition: opacity .12s ease; background: var(--bg-surface); padding: 5px 8px; border-radius: 10px; box-shadow: -16px 0 18px -8px rgba(15,23,42,.14), 0 1px 4px rgba(15,23,42,.14); }
.list-table tbody tr:hover .row-actions, .list-table tbody tr:focus-within .row-actions { opacity: 1; pointer-events: auto; }
[data-theme="dark"] .list-table .row-actions { background: var(--bg-muted); box-shadow: -16px 0 18px -8px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.45); }
.pipe-val { font-weight: 600; color: var(--color-success); font-variant-numeric: tabular-nums; }

/* ═══ Lista: medidor de score (barra) + pulido de filas ═══ */
.score-meter { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; }
.sm-bar { width: 56px; height: 6px; border-radius: 4px; background: var(--bg-muted); overflow: hidden; flex: none; }
[data-theme="dark"] .sm-bar { background: rgba(148,163,184,.18); }
.sm-fill { display: block; height: 100%; border-radius: 4px; transition: width .3s ease; }
.sm-fill.high { background: var(--color-success); }
.sm-fill.mid  { background: var(--color-warning); }
.sm-fill.low  { background: var(--color-danger); }
.sm-num { font-weight: 700; font-size: 13px; min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.sm-num.high { color: var(--color-success); }
.sm-num.mid  { color: var(--color-warning); }
.sm-num.low  { color: var(--color-danger); }
/* filas con un poco más de vida */
.list-table tbody tr { transition: background .12s ease; }
.list-table tbody tr:hover { background: var(--bg-muted); }
.list-table tbody td { border-bottom: 1px solid var(--border); }

/* ═══ Lista: columna Industria (chip) + Última actividad ═══ */
.ind-chip { display: inline-block; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--bg-muted); border: 1px solid var(--border); padding: 3px 10px; border-radius: 7px; white-space: nowrap; }
[data-theme="dark"] .ind-chip { background: rgba(148,163,184,.12); }
.c-ind { max-width: 200px; }
.c-actd { white-space: nowrap; }
.c-actd .actd { font-size: 12.5px; color: var(--text-secondary); }

/* ═══ Panel SAI (relación comercial) ═══ */
.sai-card .mcard-title i { color: var(--color-info); }
.seg-chip { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: var(--bg-muted); color: var(--text-secondary); }
.seg-chip.seg-vip { background: var(--tint-violet); color: var(--color-violet); }
.seg-chip.seg-activo { background: var(--tint-success); color: var(--color-success); }
.seg-chip.seg-regular { background: var(--tint-info); color: var(--color-info); }
.seg-chip.seg-enriesgo { background: var(--tint-warning); color: var(--color-warning); }
.seg-chip.seg-inactivo { background: var(--tint-danger); color: var(--color-danger); }
.sai-alerts { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.sai-alert { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.sai-alert.danger { background: var(--tint-danger); color: var(--color-danger); }
.sai-alert.warning { background: var(--tint-warning); color: var(--color-warning); }
.sai-alert.info { background: var(--tint-info); color: var(--color-info); }
.sai-big { font-size: 16px; font-weight: 700; color: var(--color-success); }
.sai-debt { color: var(--color-danger); font-weight: 700; }
.sai-prod { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.sai-prod-n { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sai-prod-v { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.sai-unlink { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.sai-foot { font-size: 11px; color: var(--text-muted); }
.sai-unlink-btn { background: none; border: none; color: var(--text-muted); font-size: 11px; cursor: pointer; text-decoration: underline; }
.sai-unlink-btn:hover { color: var(--color-danger); }
/* búsqueda SAI */
.sai-results { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.sai-results form { margin: 0; }
.sai-result { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-surface); cursor: pointer; text-align: left; transition: all .12s ease; }
.sai-result:hover { border-color: var(--color-info); background: var(--tint-info); }
.sai-result-n { font-size: 12.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sai-cve { font-size: 11px; color: var(--text-muted); flex: none; }
.sai-empty { font-size: 12.5px; color: var(--text-muted); padding: 8px 2px; }

/* ═══ Acciones sugeridas (insights) en el dashboard ═══ */
.insights-block { margin-bottom: 22px; }
.insights-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.insights-title { font-size: 15px; font-weight: 700; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; }
.insights-title i { color: var(--color-warning); }
.insights-sub { font-size: 12.5px; color: var(--text-secondary); }
.insights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.insight-card { position: relative; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px 18px 16px; box-shadow: 0 1px 3px rgba(15,23,42,.05); overflow: hidden; transition: transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s ease; }
.insight-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-danger), #fb7185); }
.insight-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15,23,42,.13); }
.ic-top { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.ic-icon { width: 42px; height: 42px; border-radius: 13px; background: var(--tint-danger); color: var(--color-danger); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.ic-badge { font-size: 12.5px; font-weight: 700; color: var(--color-danger); letter-spacing: .2px; }
.ic-risk { margin-left: auto; text-align: right; font-size: 16px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.ic-risk small { display: block; font-size: 9.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.ic-name { font-size: 17px; font-weight: 700; color: var(--text-primary); text-decoration: none; display: block; line-height: 1.2; }
.ic-name:hover { color: var(--brand-blue); }
.ic-stat { display: flex; align-items: center; gap: 11px; margin: 12px 0; }
.ic-stat-num { font-size: 34px; font-weight: 800; color: var(--color-danger); line-height: .9; font-variant-numeric: tabular-nums; }
.ic-stat-lbl { font-size: 12.5px; color: var(--text-secondary); line-height: 1.35; }
.ic-why { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--text-secondary); background: var(--bg-muted); border-radius: 11px; padding: 11px 13px; line-height: 1.45; margin-bottom: 15px; }
.ic-why i { color: var(--color-info); margin-top: 1px; flex: none; }
.ic-actions { display: flex; gap: 9px; align-items: stretch; }
.ic-take { width: 100%; justify-content: center; }
.ic-ghost { width: 42px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px; color: var(--text-secondary); text-decoration: none; transition: all .12s ease; }
.ic-ghost:hover { border-color: var(--brand-blue); color: var(--brand-blue); background: var(--bg-muted); }
[data-theme="dark"] .insight-card { box-shadow: none; border-color: var(--border-strong); }
[data-theme="dark"] .insight-card:hover { box-shadow: 0 14px 32px rgba(0,0,0,.5); }

/* ═══ Panel de acciones (modal de insight) ═══ */
.am-ctx { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
#amName { color: var(--color-danger); }
.am-q { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; }
.am-actions { display: flex; flex-direction: column; gap: 9px; }
.am-form { width: 100%; }
.am-opt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); cursor: pointer; text-align: left; transition: all .13s ease; }
.am-opt:hover { border-color: var(--brand-blue); background: var(--bg-muted); transform: translateX(2px); }
.am-opt-rec { border-color: var(--color-info); background: var(--tint-info); }
.am-opt-rec:hover { border-color: var(--color-info); background: var(--tint-info); }
.am-opt-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.am-opt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.am-opt-t { font-size: 13.5px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 7px; }
.am-rec { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--color-info); background: var(--bg-surface); border: 1px solid var(--color-info); padding: 1px 6px; border-radius: 20px; font-style: normal; }
.am-opt-h { font-size: 11.5px; color: var(--text-secondary); }
.am-opt-arrow { color: var(--text-muted); font-size: 12px; flex: none; }
.am-opt:hover .am-opt-arrow { color: var(--brand-blue); }

/* ═══ Teaser link + página Inteligencia ═══ */
.insights-link { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--brand-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.insights-link:hover { text-decoration: underline; }
[data-theme="dark"] .insights-link { color: #5B9DF9; }
.intel-count { font-size: 13px; font-weight: 700; color: var(--color-danger); background: var(--tint-danger); padding: 5px 13px; border-radius: 20px; flex: none; }
.intel-group { margin-bottom: 26px; }
.intel-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

/* ── Foco de hoy: las acciones top, siempre visibles ── */
.intel-focus { margin-bottom: 30px; }
.intel-focus-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.intel-focus-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: var(--color-warning); text-transform: uppercase; letter-spacing: .5px; }
.intel-focus-sub { font-size: 12.5px; color: var(--text-secondary); }
.intel-all-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin: 4px 0 14px; padding-top: 18px; border-top: 1px solid var(--border); }

/* ── Grupos por tema: colapsables ── */
details.intel-group > summary { cursor: pointer; list-style: none; user-select: none; }
details.intel-group > summary::-webkit-details-marker { display: none; }
details.intel-group > summary::marker { content: ""; }
details.intel-group > summary .intel-group-chev { margin-left: auto; color: var(--text-muted); font-size: 13px; transition: transform .18s ease; flex: none; }
details.intel-group[open] > summary .intel-group-chev { transform: rotate(180deg); }
details.intel-group > summary:hover .intel-group-t { color: var(--brand-blue); }
.intel-group-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.intel-group-t { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.intel-group-s { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }

/* ═══ Insight cards: variantes de color por tipo ═══ */
.insight-card.insight-warning::before { background: linear-gradient(90deg, var(--color-warning), #fbbf24); }
.insight-card.insight-info::before { background: linear-gradient(90deg, var(--color-info), #60a5fa); }
.insight-card.insight-violet::before { background: linear-gradient(90deg, var(--color-violet), #a78bfa); }
.insight-card.insight-success::before { background: linear-gradient(90deg, var(--color-success), #4ade80); }
.ic-ic-danger { background: var(--tint-danger); color: var(--color-danger); }
.ic-ic-warning { background: var(--tint-warning); color: var(--color-warning); }
.ic-ic-info { background: var(--tint-info); color: var(--color-info); }
.ic-ic-violet { background: var(--tint-violet); color: var(--color-violet); }
.ic-ic-success { background: var(--tint-success); color: var(--color-success); }
.ic-badge-danger { color: var(--color-danger); }
.ic-badge-warning { color: var(--color-warning); }
.ic-badge-info { color: var(--color-info); }
.ic-badge-violet { color: var(--color-violet); }
.ic-badge-success { color: var(--color-success); }
.ic-num-danger { color: var(--color-danger); }
.ic-num-warning { color: var(--color-warning); }
.ic-num-info { color: var(--color-info); }
.ic-num-violet { color: var(--color-violet); }
.ic-num-success { color: var(--color-success); }
/* risk como una sola línea; número un poco más chico para montos largos */
.ic-risk { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; line-height: 1.25; }
.ic-risk small { display: none; }
.ic-stat-num { font-size: 27px; }
.intel-group-n { font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--bg-muted); padding: 1px 9px; border-radius: 10px; margin-left: 6px; }

/* ═══════════════════════════════════════════════════════════
   BARRA SUPERIOR (topbar)
   ═══════════════════════════════════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 22px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.topbar-menu-toggle { display: none; }

.topbar-icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; border: none; background: transparent;
  color: var(--text-secondary); font-size: 16px; cursor: pointer; text-decoration: none;
  transition: background .12s, color .12s;
}
.topbar-icon-btn:hover { background: var(--bg-muted); color: var(--text-primary); }
.topbar-icon-btn.active { background: var(--tint-info); color: var(--brand-blue); }
.topbar-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--color-danger); color: #fff; border-radius: 8px; font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-surface);
}

.topbar-new {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  height: 36px; padding: 0 14px; border-radius: 10px;
  background: var(--accent-add); color: #fff; font-size: 13.5px; font-weight: 600;
}
.topbar-new::-webkit-details-marker { display: none; }
.topbar-new::marker { content: ""; }
.topbar-new:hover { filter: brightness(1.06); }

.topbar-account { cursor: pointer; list-style: none; display: inline-flex; }
.topbar-account::-webkit-details-marker { display: none; }
.topbar-account::marker { content: ""; }
.topbar-avatar {
  width: 34px; height: 34px; border-radius: 10px; background: var(--brand-blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex: none;
}
.topbar-avatar.lg { width: 40px; height: 40px; font-size: 16px; }

.topbar-dropdown { position: relative; display: inline-flex; }
.topbar-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 214px; z-index: 200;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 6px;
}
.topbar-menu-right { left: auto; right: 0; }
.topbar-menu a, .topbar-theme-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: 8px; font-size: 13.5px; color: var(--text-primary);
  text-decoration: none; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
.topbar-menu a:hover, .topbar-theme-row:hover { background: var(--bg-muted); }
.topbar-menu a i, .topbar-theme-row i { width: 16px; color: var(--text-secondary); font-size: 14px; text-align: center; }
.topbar-menu .ta-logout, .topbar-menu .ta-logout i { color: var(--color-danger); }
.topbar-menu-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); padding: 8px 11px 4px; }
.topbar-menu-divider { height: 1px; background: var(--border); margin: 5px 0; }
.topbar-account-head { display: flex; align-items: center; gap: 10px; padding: 6px 11px 12px; border-bottom: 1px solid var(--border); margin-bottom: 5px; }
.topbar-account-head .ta-name { font-weight: 700; font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-account-head .ta-role { font-size: 12px; color: var(--text-secondary); text-transform: capitalize; }

@media (max-width: 768px) {
  .topbar-menu-toggle { display: inline-flex; }
  .topbar-new-text { display: none; }
  .topbar-new { padding: 0; width: 38px; justify-content: center; border-radius: 10px; }
}

/* ── Buscador en la barra superior ── */
.topbar-search { position: relative; flex: 1; max-width: 480px; }
.topbar-search form { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 13px;
  background: var(--bg-muted); border: 1px solid var(--border); border-radius: 10px; transition: background .12s, border-color .12s; }
.topbar-search form:focus-within { background: var(--bg-surface); border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--tint-info); }
.topbar-search i { color: var(--text-muted); font-size: 14px; flex: none; }
.topbar-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 13.5px; color: var(--text-primary); }
.topbar-search input::placeholder { color: var(--text-muted); }
.topbar-search .search-dropdown { left: 0; right: 0; }
.topbar-search-mobile { display: none; }
@media (max-width: 640px) { .topbar-search { display: none; } .topbar-search-mobile { display: inline-flex; } }

/* ── Medidor de Prioridad (anillo) en tarjetas de insight ── */
.ic-score-wrap { display:flex; flex-direction:column; align-items:center; gap:2px; flex:none; }
.ic-score { --p:0; --c:var(--brand-blue); position:relative; width:42px; height:42px; border-radius:50%;
  background: conic-gradient(var(--c) calc(var(--p)*3.6deg), var(--bg-muted) 0); display:grid; place-items:center; }
.ic-score::before { content:""; position:absolute; inset:4px; border-radius:50%; background:var(--bg-surface); }
.ic-score-num { position:relative; z-index:1; font-size:14px; font-weight:800; color:var(--c); font-variant-numeric:tabular-nums; line-height:1; }
.ic-score-cap { font-size:8px; font-weight:700; letter-spacing:.4px; color:var(--text-muted); }
.ic-score-hi  { --c:var(--color-danger); }
.ic-score-mid { --c:var(--color-warning); }
.ic-score-lo  { --c:var(--text-secondary); }

/* ── Botones de resultado (cerrar el ciclo) en el modal de insight ── */
.am-outcomes { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:2px; }
.am-outcome { padding:7px 12px; border-radius:18px; border:1px solid var(--border); background:var(--bg-surface);
  color:var(--text-primary); font-size:13px; font-weight:600; cursor:pointer; transition:background .12s, border-color .12s; font-family:inherit; }
.am-outcome:hover { background:var(--bg-muted); }
.am-outcome-success:hover { border-color:var(--color-success); }
.am-outcome-warning:hover { border-color:var(--color-warning); }
.am-outcome-danger:hover  { border-color:var(--color-danger); }
.am-outcome-info:hover    { border-color:var(--color-info); }
.am-sep { height:1px; background:var(--border); margin:14px 0; }

/* ═══════════════════════════════════════════════════════════
   TEMA "SUAVE" — sidebar claro, fondo aireado (estilo Heffl)
   ═══════════════════════════════════════════════════════════ */
[data-theme="soft"] {
  --bg-app:     #EBF2EF;
  --bg-surface: #FFFFFF;
  --bg-muted:   #F2F6F4;
  --border:        #E4EBE8;
  --border-strong: #CCD8D3;
  --text-primary:   #1F2937;
  --text-secondary: #5C6B72;
  --text-muted:     #9AA8AE;
  /* sidebar claro con acento teal */
  --sidebar-bg:            #FFFFFF;
  --sidebar-text:          #5A6672;
  --sidebar-text-hover:    #0F172A;
  --sidebar-hover-bg:      rgba(13,148,136,0.07);
  --sidebar-active-bg:     rgba(13,148,136,0.12);
  --sidebar-active-text:   #0F766E;
  --sidebar-active-border: #0D9488;
}
[data-theme="soft"] body {
  background:
    radial-gradient(960px 440px at 78% -90px, rgba(255,212,160,0.55), transparent 62%),
    linear-gradient(168deg, #A6DCD2 0%, #C3E4D3 38%, #DCEFD9 68%, #ECEBD7 100%);
  background-attachment: fixed;
}
[data-theme="soft"] .brand-text { color: var(--text-primary); }
[data-theme="soft"] .sidebar-section-label { color: var(--text-muted); }
[data-theme="soft"] .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }
[data-theme="soft"] .sidebar-links a { border-radius: 10px; }
[data-theme="soft"] .topbar-search form { background: rgba(255,255,255,0.9); }

/* App flotante (estilo Heffl) — solo desktop, para no romper el cajón móvil */
@media (min-width: 769px) {
  [data-theme="soft"] .sidebar {
    top: 14px; left: 14px; bottom: 14px; height: auto;
    border-radius: 22px; border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 16px 46px rgba(31,41,55,0.15);
  }
  [data-theme="soft"] .main-content {
    margin: 14px 14px 14px calc(var(--sidebar-width) + 28px);
    border-radius: 22px;
    background: var(--bg-surface);
    box-shadow: 0 16px 46px rgba(31,41,55,0.12);
    min-height: calc(100vh - 28px);
  }
  [data-theme="soft"] .main-content.expanded {
    margin-left: calc(var(--sidebar-width-collapsed) + 28px);
  }
  [data-theme="soft"] .topbar {
    top: 0; border-radius: 22px 22px 0 0;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom-color: rgba(0,0,0,0.05);
  }
}

/* Selector de tema en el menú de cuenta */
.topbar-theme-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); padding: 8px 11px 4px; }
.topbar-theme-pick { display: flex; gap: 4px; padding: 0 7px 4px; }
.ttp { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-surface); color: var(--text-secondary); font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .12s; }
.ttp i { font-size: 14px; }
.ttp:hover { background: var(--bg-muted); }
.ttp.active { border-color: var(--brand-blue); color: var(--brand-blue); background: var(--tint-info); }

/* Mi día — lápiz de editar tarea (discreto, se realza en hover de la fila) */
.md-task-edit{
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; margin-left:4px; border-radius:6px;
    color:var(--text-secondary); opacity:0; font-size:11px;
    text-decoration:none; transition:opacity .12s, background .12s, color .12s;
    vertical-align:middle;
}
.list-table tr:hover .md-task-edit{ opacity:.55; }
.md-task-edit:hover{ opacity:1; background:var(--tint-blue,rgba(37,99,235,.1)); color:var(--brand-blue); }

/* ═══ Móvil: tablas usables (scroll horizontal + acciones visibles en táctil) ═══ */
@media (max-width:768px){
    /* permitir desplazar las columnas que no caben en pantalla angosta */
    .list-page.flush .section{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .list-table{ min-width:640px; }
}
@media (hover:none){
    /* en pantallas táctiles no hay hover: mostrar siempre las acciones de fila */
    .list-table .row-actions{ opacity:1; pointer-events:auto; }
}

/* Modal de insight: "agendar seguimiento" colapsable para reducir sobrecarga */
.am-more{ margin-top:2px; }
.am-more-sum{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px; user-select:none; }
.am-more-sum::-webkit-details-marker{ display:none; }
.am-more-sum i{ transition:transform .15s; font-size:11px; color:var(--text-muted); }
.am-more[open] .am-more-sum i{ transform:rotate(180deg); }
.am-more .am-actions{ margin-top:10px; }

/* Sidebar: grupo colapsable (secciones de uso esporádico) */
.sidebar-collapse{ border:none; }
.sidebar-collapse-sum{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; user-select:none; }
.sidebar-collapse-sum::-webkit-details-marker{ display:none; }
.sidebar-collapse-chev{ font-size:10px; opacity:.5; transition:transform .15s; margin-right:14px; }
.sidebar-collapse[open] .sidebar-collapse-chev{ transform:rotate(180deg); }

/* Detalle de cotización SAI: 2 columnas (cotización · seguimiento) */
.quote-2col{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
.quote-2col > div{ min-width:0; }
@media (max-width:900px){ .quote-2col{ grid-template-columns:1fr; } }

/* Negocio: filas de factura SAI (mostrar + marcar) */
.inv-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
    background:var(--bg-muted); border:1px solid var(--border); border-radius:9px; padding:8px 10px;
    transition:background .12s, border-color .12s; }
.inv-row:hover{ background:var(--bg-surface); }
.inv-row-on{ background:var(--tint-success); border-color:var(--color-success); }
.inv-check{ flex:none; color:var(--text-muted); font-size:14px; }
.inv-row-on .inv-check{ color:var(--color-success); }
.inv-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.inv-top{ font-size:13px; font-weight:600; color:var(--text-primary); }
.inv-date{ font-weight:400; color:var(--text-muted); font-size:11.5px; }
.inv-sub{ font-size:11.5px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-amt{ flex:none; font-weight:700; font-size:13px; color:var(--text-primary); font-variant-numeric:tabular-nums; }