/* ============================================================
   OdooMind — UI estilo Claude / ChatGPT
   ============================================================ */

:root {
  --bg:               #f9f9f9;
  --bg-sidebar:       #f2f2f2;
  --bg-elevated:      #ffffff;
  --bg-input:         #ffffff;
  --bg-hover:         #ebebeb;
  --bg-user-msg:      #f2f2f2;
  --bg-code:          #f5f5f5;
  --border:           #e5e5e5;
  --border-strong:    #d4d4d4;
  --text:             #171717;
  --text-secondary:   #525252;
  --text-muted:       #a3a3a3;
  --text-on-accent:   #ffffff;
  --accent:           #2563eb;
  --accent-hover:     #1d4ed8;
  --accent-soft:      #eff6ff;
  --success:          #16a34a;
  --warning:          #f59e0b;
  --danger:           #dc2626;
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --sidebar-bg: var(--bg-sidebar);
  --accent-bg:  rgba(37, 99, 235, 0.08);
  --bg-surface: var(--bg-elevated);
  --chat-width: 1100px;
  /* Aliases used across components that were never defined — map them to real
     theme tokens so they follow light/dark instead of falling to hardcoded
     (often light) fallbacks. Overridden in the dark block below. */
  --bg-secondary:   var(--bg-elevated);
  --bg-card:        var(--bg-elevated);
  --bg-main:        var(--bg);
  --bg-tertiary:    var(--bg-hover);
  --bg-subtle:      var(--bg-hover);
  --surface-hover:  var(--bg-hover);
  --bg-hover-accent: var(--accent-soft);
  --text-primary:   var(--text);
  --text-tertiary:  var(--text-muted);
  --border-light:   var(--border);
  --success-soft:   rgba(22, 163, 74, 0.12);
}

/* Dark palette. Applied in three cases, kept in sync via a shared token list:
   1. Manual dark:  html.theme-dark / html[data-theme="dark"]
   2. Auto (OS dark): @media (prefers-color-scheme: dark), but NOT when the user
      forced light (html.theme-light / [data-theme="light"]).
   The JS sets BOTH the class and the data-theme attribute (see applyTheme). */
html.theme-dark,
html[data-theme="dark"] {
  --bg:               #0a0a0a;
  --bg-sidebar:       #111111;
  --bg-elevated:      #1a1a1a;
  --bg-input:         #1e1e1e;
  --bg-hover:         #262626;
  --bg-user-msg:      #1e1e1e;
  --bg-code:          #171717;
  --border:           #262626;
  --border-strong:    #333333;
  --text:             #fafafa;
  --text-secondary:   #a3a3a3;
  --text-muted:       #737373;
  --accent:           #3b82f6;
  --accent-hover:     #60a5fa;
  --accent-soft:      #172554;
  --success-soft:     rgba(52, 211, 153, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not([data-theme="light"]) {
    --bg:               #0a0a0a;
    --bg-sidebar:       #111111;
    --bg-elevated:      #1a1a1a;
    --bg-input:         #1e1e1e;
    --bg-hover:         #262626;
    --bg-user-msg:      #1e1e1e;
    --bg-code:          #171717;
    --border:           #262626;
    --border-strong:    #333333;
    --text:             #fafafa;
    --text-secondary:   #a3a3a3;
    --text-muted:       #737373;
    --accent:           #3b82f6;
    --accent-hover:     #60a5fa;
    --accent-soft:      #172554;
    --success-soft:     rgba(52, 211, 153, 0.16);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.55;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga' 1, 'calt' 1;
}
button { font-family: inherit; cursor: pointer; }
textarea, input, select { font-family: inherit; }

/* Icon base class */
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.icon-success { color: var(--success); }
.icon-danger { color: var(--danger); }
.icon-warning { color: var(--warning); }
.icon-muted { color: var(--text-muted); }

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.login-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  z-index: 1000;
}
.login-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  width: 100%; max-width: 380px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.login-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.login-logo { font-size: 28px; display: flex; align-items: center; color: var(--accent); }
.login-card h1 {
  margin: 0; font-size: 22px;
  font-weight: 700; letter-spacing: -0.02em;
}
.login-sub {
  color: var(--text-secondary);
  margin: 0 0 24px;
  font-size: 14px;
}
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 500;
}
.login-form input {
  border: 1px solid var(--border);
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 14px;
  color: var(--text); outline: none;
  font-family: var(--font-sans);
  transition: border-color .15s, box-shadow .15s;
}
.login-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.login-error {
  background: rgba(220,38,38,0.1);
  border: 1px solid rgba(220,38,38,0.3);
  color: var(--danger);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13.5px;
}
.login-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s;
}
.login-btn:hover { background: var(--accent-hover); }
.login-hint {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin: 16px 0 0;
}
.login-hint code {
  background: var(--bg-hover);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

/* ============================================================
   APP LAYOUT
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w, 280px) 4px 1fr 0 0;
  grid-template-rows: minmax(0, 1fr);   /* la fila nunca crece más que la ventana (barra lateral llena) */
  height: 100vh;
  overflow: hidden;
  overflow: clip;                       /* ni el navegador ni un scrollIntoView pueden desplazar la app entera */
  transition: grid-template-columns 0.25s ease;
}

/* Asignar columna explícita a cada hijo del grid para que NO se reordenen
   cuando alguno tenga display:none (modo fullscreen del artifact panel). */
.app > .sidebar          { grid-column: 1; grid-row: 1; }
.app > .resizer          { grid-column: 2; grid-row: 1; }
.app > .main             { grid-column: 3; grid-row: 1; }
.app > .artifact-resizer { grid-column: 4; grid-row: 1; }
.app > .artifact-panel   { grid-column: 5; grid-row: 1; }

.resizer {
  background: transparent;
  cursor: col-resize;
  position: relative;
  z-index: 5;
  transition: background 0.15s;
}
.resizer:hover, .resizer.dragging { background: var(--accent); }
.resizer::after {
  /* área activa más ancha que la línea visible */
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -3px; right: -3px;
}

/* Sidebar */
.sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; transition: width .25s ease, min-width .25s ease, opacity .2s ease; min-width: 0; }
.sidebar-header { padding: 10px 12px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.new-chat {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; background: var(--accent);
  border: none; border-radius: var(--radius);
  color: #fff; font-size: 13px; font-weight: 600; transition: background 0.15s;
  cursor: pointer; min-width: 0; overflow: hidden; white-space: nowrap;
}
.new-chat:hover { background: var(--accent-hover); }
.new-chat svg { stroke: #fff; }

/* Sidebar collapse button */
.sidebar-collapse-btn {
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-muted);
  padding: 6px; border-radius: var(--radius-sm);
  cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.sidebar-collapse-btn:hover { background: var(--bg-hover); color: var(--text); }

/* Collapsed sidebar state (desktop only) — icon rail */
.app.sidebar-collapsed { grid-template-columns: 56px 0 1fr 0 0; }
.app.sidebar-collapsed .resizer { display: none; }
.app.sidebar-collapsed .sidebar {
  width: 56px !important;
  min-width: 56px !important;
  overflow: hidden;
  align-items: center;
}
/* Hide text elements in collapsed rail */
.app.sidebar-collapsed .sidebar .new-chat span,
.app.sidebar-collapsed .sidebar-global-search,
.app.sidebar-collapsed .sidebar-group-label,
.app.sidebar-collapsed .sidebar-caret,
.app.sidebar-collapsed .sidebar-cat-title,
.app.sidebar-collapsed .sidebar-cat-count,
.app.sidebar-collapsed .sidebar-add,
.app.sidebar-collapsed .conv-list,
.app.sidebar-collapsed .conv-bulk-bar,
.app.sidebar-collapsed .user-meta,
.app.sidebar-collapsed .lang-selector,
.app.sidebar-collapsed .user-menu-btn,
.app.sidebar-collapsed .license-badge,
.app.sidebar-collapsed .sidebar-action-spacer,
.app.sidebar-collapsed .status {
  display: none !important;
}
/* Sidebar header: only show icons centered */
.app.sidebar-collapsed .sidebar-header {
  flex-direction: column;
  align-items: center;
  padding: 10px 4px;
  gap: 4px;
}
.app.sidebar-collapsed .new-chat {
  width: 36px; height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
.app.sidebar-collapsed .sidebar-collapse-btn {
  width: 36px; height: 36px;
  justify-content: center;
}
/* Flip the collapse arrow to point right (expand) */
.app.sidebar-collapsed .sidebar-collapse-btn svg {
  transform: scaleX(-1);
}
/* Category items: icon only, centered */
.app.sidebar-collapsed .sidebar-section {
  padding: 4px 0;
  align-items: center;
}
.app.sidebar-collapsed .sidebar-cat {
  margin-bottom: 0;
}
.app.sidebar-collapsed .sidebar-cat-head {
  justify-content: center;
  padding: 8px 0;
  width: 40px; height: 40px;
  border-radius: var(--radius);
  gap: 0;
}
.app.sidebar-collapsed .sidebar-cat-icon {
  width: 18px; height: 18px;
  opacity: 0.8;
}
/* Footer: vertical icon stack */
.app.sidebar-collapsed .sidebar-footer {
  border-top: 1px solid var(--border);
}
.app.sidebar-collapsed .sidebar-quick-actions {
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  gap: 2px;
  border-bottom: 1px solid var(--border);
}
.app.sidebar-collapsed .sidebar-action-btn {
  width: 36px; height: 36px;
}
/* User info: avatar only */
.app.sidebar-collapsed .user-info {
  justify-content: center;
  padding: 8px 0;
}
/* Icon rail hover effect on category heads */
.app.sidebar-collapsed .sidebar-cat-head:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.app.sidebar-collapsed .sidebar-cat-head:hover .sidebar-cat-icon {
  opacity: 1;
  color: var(--accent);
}
/* Show the topbar toggle button when sidebar is collapsed */
.app.sidebar-collapsed .icon-btn#toggleSidebar { display: flex; }

/* Sidebar section (single scrollable area) */
.sidebar-section {
  flex: 1;
  overflow-y: auto;
  padding: 2px 6px;
  scrollbar-width: thin;
  min-width: 0;
  min-height: 0; /* critical: allow flex child to shrink & scroll */
}

/* Group labels */
.sidebar-group-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 8px 2px;
  opacity: 0.7;
  user-select: none;
}
.sidebar-group-label:first-child { padding-top: 4px; }

.sidebar-cat { margin-bottom: 1px; }
.sidebar-cat-head {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s;
  min-width: 0;
}
.sidebar-cat-head:hover { background: var(--bg-hover); color: var(--text-secondary); }
.sidebar-caret {
  display: inline-block;
  font-size: 10px;
  width: 12px;
  text-align: center;
  transition: transform 0.15s;
  color: var(--text-muted);
}
.sidebar-cat.collapsed .sidebar-caret { transform: rotate(-90deg); }
.sidebar-cat.collapsed .conv-list { display: none; }
.sidebar-cat-icon { flex-shrink: 0; color: var(--text-muted); opacity: 0.65; transition: opacity 0.15s, color 0.15s; }
.sidebar-cat-head:hover .sidebar-cat-icon { opacity: 1; color: var(--accent); }
.sidebar-cat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-cat-count {
  font-size: 10px;
  background: var(--bg-hover);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
  line-height: 1.5;
}
.sidebar-cat-count:empty { display: none; }
.sidebar-add {
  background: transparent; border: none;
  color: var(--text-muted);
  width: 20px; height: 20px;
  border-radius: 4px;
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-add:hover { background: var(--bg-hover); color: var(--text); }

.conv-list { display: flex; flex-direction: column; gap: 0; }
.conv-show-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 5px 8px; margin-top: 1px;
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  font-size: 12px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.conv-show-more:hover { background: var(--bg-hover); color: var(--text); }
.conv-item {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px; border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text-secondary);
  cursor: pointer; transition: background 0.15s;
  min-width: 0; overflow: hidden;
}
.conv-item:hover { background: var(--bg-hover); color: var(--text); }
.conv-item.active { background: var(--accent-soft); color: var(--text); font-weight: 500; border-left: 2px solid var(--accent); }
.conv-item.pinned { border-left: 2px solid var(--accent); background: var(--accent-soft); }
.conv-item.pinned .conv-title { font-weight: 500; }
.conv-icon { font-size: 13px; flex-shrink: 0; }
.conv-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; min-width: 0; }

/* Three-dot menu button */
.conv-more {
  background: transparent; border: none; color: var(--text-muted);
  padding: 2px 4px; border-radius: 4px; cursor: pointer;
  opacity: 0; transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0; display: flex; align-items: center;
}
.conv-item:hover .conv-more,
.conv-item.dropdown-open .conv-more { opacity: 1; }
.conv-more:hover { background: var(--border); color: var(--text); }

/* Dropdown menu — portalled to body, always above everything */
.conv-dropdown {
  display: none;
  position: fixed;
  z-index: 10000;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 170px;
  padding: 4px 0;
  flex-direction: column;
}
.conv-item.dropdown-open .conv-dropdown,
#_floatingDropdown { display: flex; }
.conv-item { position: relative; }
.conv-dropdown button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 12px;
  background: none; border: none;
  font-size: 13px; color: var(--text);
  cursor: pointer; text-align: left;
  transition: background 0.1s;
}
.conv-dropdown button:hover { background: var(--bg-hover); }
.conv-dropdown-danger { color: var(--danger, #e53e3e) !important; }
.conv-dropdown-danger:hover { background: #fef2f2 !important; }
[data-theme="dark"] .conv-dropdown-danger:hover { background: rgba(239,68,68,0.1) !important; }
.conv-dropdown-sep {
  height: 1px; background: var(--border); margin: 4px 8px;
}

/* ---- Agent items (sidebar) ---- */
.agent-item { align-items: center; gap: 8px; }
.agent-avatar { flex-shrink: 0; display: flex; align-items: center; }
.agent-avatar.agent-paused { opacity: 0.4; filter: grayscale(0.6); }
.agent-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.agent-name { font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-name:hover { color: var(--accent); }
.agent-meta {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-meta svg { flex-shrink: 0; opacity: 0.6; }
.agent-badge-paused {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 1px 6px; border-radius: 4px; font-weight: 600;
  background: var(--text-muted); color: var(--sidebar-bg); opacity: 0.7;
  flex-shrink: 0;
}
.task-result-link {
  color: var(--accent); cursor: pointer; font-weight: 500;
  text-decoration: none; transition: opacity 0.15s;
}
.task-result-link:hover { text-decoration: underline; opacity: 0.8; }
.task-view-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent); font-size: 13px; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.task-view-link:hover { text-decoration: underline; }
.task-email-section {
  margin-top: 8px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.task-email-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
  margin-bottom: 8px;
}
.text-success { color: #22c55e; }
.text-danger { color: var(--danger, #e53e3e); }

/* ---- Agent template picker ---- */
.agent-tpl-grid {
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
.agent-tpl-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg); cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.agent-tpl-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(59,130,246,0.12);
  transform: translateY(-1px);
}
.agent-tpl-icon { flex-shrink: 0; display: flex; }
.agent-tpl-info { flex: 1; min-width: 0; }
.agent-tpl-name { display: block; font-weight: 700; font-size: 14px; color: var(--text); }
.agent-tpl-desc { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

/* ---- Agent avatar picker (edit modal) ---- */
.agent-avatar-picker {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; justify-content: center;
}
.agent-avatar-option {
  display: flex; align-items: center; justify-content: center;
  padding: 4px; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; transition: border-color 0.2s, transform 0.15s;
}
.agent-avatar-option:hover { transform: scale(1.08); }
.agent-avatar-option.selected { border-color: var(--accent); background: var(--accent-bg, rgba(59,130,246,0.06)); }

/* ---- Schedule picker ---- */
.sched-picker {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; margin: 4px 0 8px;
}
.sched-picker > label:first-child { margin-bottom: 10px; }
.sched-options { margin-top: 10px; }
.sched-options label { margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.sched-time-row {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
}
.sched-time-sel {
  width: auto !important; min-width: 64px; padding: 6px 10px; font-size: 14px;
  border-radius: 6px; border: 1px solid var(--border); background: var(--bg-main);
  color: var(--text); font-variant-numeric: tabular-nums;
}
.sched-time-sep { font-size: 16px; font-weight: 600; color: var(--text-secondary); }
.sched-time-label { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }
.sched-day-sel { min-width: 72px; }
.sched-dow-group {
  display: flex; gap: 4px; margin: 6px 0 10px; flex-wrap: wrap;
}
.sched-dow-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--bg-main); color: var(--text); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center;
}
.sched-dow-btn:hover { border-color: var(--accent); background: var(--accent-bg, rgba(59,130,246,0.06)); }
.sched-dow-btn.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* ---- Export dropdown ---- */
.export-wrapper { position: relative; display: inline-block; }
.export-dropdown {
  position: absolute; top: 100%; right: 0; z-index: 50;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 4px 0; min-width: 160px;
  display: flex; flex-direction: column;
}
.export-dropdown button {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: none; background: none; cursor: pointer;
  font-size: 13px; color: var(--text); text-align: left; width: 100%;
}
.export-dropdown button:hover { background: var(--bg-hover); }

/* ---- Project folders (expandable) ---- */
.project-folder { margin-bottom: 1px; }
.project-folder .project-item { font-weight: 500; }
.project-caret { cursor: pointer; flex-shrink: 0; margin-right: -2px; opacity: 0.5; }
.project-caret:hover { opacity: 1; }
.project-conv-list {
  padding-left: 12px;
  border-left: 1px solid var(--border);
  margin-left: 14px;
}
.project-conv-item {
  font-size: 12.5px !important;
  padding: 4px 8px !important;
  gap: 5px !important;
  color: var(--text-secondary);
}
.project-conv-item:hover { background: var(--bg-hover); color: var(--text); }
.project-conv-item.active { background: var(--accent-soft); color: var(--accent); }

/* Legacy conv-del — keep for backward compat */
.conv-del {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 14px; line-height: 1; padding: 2px 5px;
  border-radius: 3px; cursor: pointer;
  opacity: 0; transition: opacity 0.15s, background 0.15s;
}
.conv-item:hover .conv-del { opacity: 1; }
.conv-del:hover { background: var(--border); color: var(--text); }

/* Memory, Knowledge, Anomaly items */
.empty-list {
  padding: 12px 14px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

/* ---- Integration styles ---- */
.integration-status { padding: 8px 0; font-size: 13px; line-height: 1.6; }
.integration-status .help { display: block; margin-top: 4px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; vertical-align: middle; }
.badge-success { background: #d4edda; color: #155724; }
.badge-warning { background: #fff3cd; color: #856404; }
.badge-muted { background: var(--bg-hover); color: var(--text-muted); }
[data-theme="dark"] .badge-success { background: rgba(40,167,69,0.2); color: #6ecf8e; }
[data-theme="dark"] .badge-warning { background: rgba(255,193,7,0.15); color: #ffc107; }

.webhooks-list { margin-bottom: 10px; }
.webhook-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px;
}
.webhook-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.webhook-info strong { font-size: 13px; }
.webhook-info .help { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }

/* Integration cards layout */
.integration-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.integration-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.integration-card-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; margin-bottom: 6px;
}
.integration-card-icon { font-size: 20px; flex-shrink: 0; }
.integration-card-header strong { font-size: 14px; }
.integration-card .help { margin: 0 0 8px; }
.integration-card .integration-status { padding: 4px 0 0; }

.memory-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: var(--accent-soft, rgba(37,99,235,.08));
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
  flex-shrink: 0;
}
.knowledge-meta, .anomaly-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 4px;
}
.anomaly-actions {
  display: flex;
  gap: 1px;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.anomaly-item:hover .anomaly-actions { opacity: 1; }
.wf-item:hover .anomaly-actions { opacity: 1; }
.wf-item:hover .conv-delete-btn { opacity: 1; }
.anomaly-run-btn,
.anomaly-edit-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
}
.anomaly-run-btn:hover,
.anomaly-edit-btn:hover { color: var(--accent); background: var(--bg-hover); }
.conv-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  
  padding: 0 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.conv-item:hover .conv-delete-btn { opacity: 1; }
.conv-delete-btn:hover { color: var(--danger); }
.anomaly-catalog-item .btn-sm {
  font-size: 11px;
  padding: 3px 10px;
  margin-top: 4px;
}

/* Auto-import cards */
.ai-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  margin-bottom: 4px;
  transition: box-shadow .15s, border-color .15s;
}
.ai-card:hover { box-shadow: 0 1px 4px rgba(0,0,0,.06); border-color: var(--accent); }
.ai-card.ai-inactive { opacity: .5; }
.ai-card-header { display: flex; align-items: center; gap: 6px; }
.ai-card-status { font-size: 14px; flex-shrink: 0; display: flex; align-items: center; }
.ai-card-status svg { width: 14px; height: 14px; }
.ai-card-info { flex: 1; min-width: 0; }
.ai-card-name {
  display: block; font-weight: 600; font-size: 12px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-card-meta {
  display: block; font-size: 10px; color: var(--text-muted); margin-top: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-badge-paused {
  font-size: 9px; padding: 0 5px; border-radius: 3px;
  background: var(--border); color: var(--text-muted); font-weight: 500;
}
.ai-card-stats {
  display: flex; gap: 8px; margin: 4px 0 3px; font-size: 10px; color: var(--text-muted);
}
.ai-card-stats span { display: inline-flex; align-items: center; gap: 3px; }
.ai-card-stats svg { width: 10px; height: 10px; }
.ai-card-actions {
  display: flex; gap: 3px; flex-wrap: wrap;
}
.ai-action-btn {
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 6px; font-size: 10px;
  cursor: pointer; color: var(--text-muted); transition: all .12s;
  display: inline-flex; align-items: center; gap: 3px;
}
.ai-action-btn svg { width: 10px; height: 10px; }
.ai-action-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.ai-action-btn:disabled { opacity: .5; cursor: default; }
.ai-action-btn.ai-run-btn { color: var(--accent); font-weight: 600; }
.ai-action-btn.ai-del-btn:hover { color: var(--danger); border-color: var(--danger); background: rgba(220,38,38,0.06); }

/* Auto-import detail modal */
.ai-detail-summary {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.ai-detail-stat {
  flex: 1; text-align: center; padding: 10px 6px;
  background: var(--bg-hover); border-radius: 8px;
}
.ai-detail-stat-value { display: block; font-size: 20px; font-weight: 700; color: var(--text); }
.ai-detail-stat-label { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ai-detail-info {
  display: flex; flex-direction: column; gap: 4px; font-size: 13px;
  margin-bottom: 10px;
}
.ai-detail-error {
  background: #fef2f2; color: #b91c1c; padding: 8px 10px;
  border-radius: var(--radius-sm); font-size: 12px; margin-top: 4px;
}
[data-theme="dark"] .ai-detail-error { background: #2d1515; color: #fca5a5; }

/* Log list */
.ai-log-list { display: flex; flex-direction: column; gap: 6px; }
.ai-log-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--bg-hover); font-size: 12px;
}
.ai-log-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.ai-log-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-log-date { font-weight: 600; color: var(--text); }
.ai-log-stats { color: var(--text-muted); }
.ai-log-error { color: var(--danger); font-size: 11px; word-break: break-word; }
[data-theme="dark"] .ai-log-error { color: #fca5a5; }

.badge-share {
  font-size: 10px; padding: 1px 6px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 3px; font-weight: 500;
}

/* Sidebar footer */
.sidebar-footer { padding: 0; border-top: 1px solid var(--border); min-width: 0; overflow: hidden; }

/* Quick actions bar */
.sidebar-quick-actions {
  display: flex; align-items: center; gap: 1px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.sidebar-action-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent; border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.sidebar-action-btn:hover { background: var(--bg-hover); color: var(--accent); }
.sidebar-action-spacer { flex: 1; }

/* License badge in quick-actions */
.license-badge {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--bg-hover);
  font-size: 10.5px; font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.license-badge:hover { background: var(--accent-soft); color: var(--accent); }

/* User row */
.user-info {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  position: relative;
  min-width: 0;
}
.user-avatar {
  width: 28px; height: 28px;
  background: var(--accent); color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
  flex-shrink: 0;
}
.user-meta { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-email { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-btn {
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-muted);
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.user-menu-btn:hover { background: var(--bg-hover); color: var(--text); }

/* Language quick selector in sidebar footer */
.lang-selector {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-hover);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 3px 6px;
  cursor: pointer;
  text-transform: uppercase;
  min-width: 36px;
  text-align: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.lang-selector:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.lang-selector:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2);
}

.user-menu {
  position: fixed;
  bottom: auto; left: auto; right: auto;
  width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 9999;
}
.menu-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px;
  background: transparent; border: none;
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text);
}
.menu-item:hover { background: var(--bg-hover); }
.menu-item-danger { color: var(--danger, #e53e3e) !important; }
.menu-item-danger:hover { background: #fef2f2 !important; }
[data-theme="dark"] .menu-item-danger:hover { background: rgba(239,68,68,0.1) !important; }
.menu-divider { height: 1px; background: var(--border); margin: 4px 6px; }

/* Selector de tema dentro del menú de usuario */
.menu-theme {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 10px;
}
.menu-theme-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text);
}
.menu-theme-options {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; background: var(--bg-subtle, var(--bg-hover));
  border: 1px solid var(--border); border-radius: 999px;
}
.menu-theme-opt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; padding: 0;
  background: transparent; border: none; border-radius: 999px;
  color: var(--text-secondary); cursor: pointer;
  font-size: 11px; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.menu-theme-opt:hover { color: var(--text); background: var(--bg-hover); }
.menu-theme-opt.active { background: var(--accent-soft); color: var(--accent); }

.status {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 0 4px;
  font-size: 12px; color: var(--text-secondary);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.status.connected .dot { background: var(--success); box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
.status.error .dot { background: var(--danger); }

/* Main */
.main { display: flex; flex-direction: column; height: 100vh; min-width: 0; min-height: 0; background: var(--bg); overflow: hidden; overflow: clip; }
/* Con la app a la vista, la página no se desplaza nunca: cada zona lleva su propio desplazamiento */
html:has(> body > .app:not([hidden])), body:has(> .app:not([hidden])) { overflow: hidden; overflow: clip; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg); min-height: 44px;
}
.icon-btn { display: none; background: transparent; border: none; color: var(--text-secondary); padding: 6px; border-radius: var(--radius-sm); }
.icon-btn:hover { background: var(--bg-hover); }
.brand { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.topbar-spacer { flex: 1; }

/* ── Topbar Intelligence Actions ── */
.topbar-actions {
  display: flex; align-items: center; gap: 6px; margin-left: 20px;
}
.topbar-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--border);
  border-radius: 20px; background: var(--bg);
  color: var(--text-secondary); font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all .2s ease;
  white-space: nowrap; line-height: 1;
}
.topbar-action:hover {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(99,102,241,.25);
  transform: translateY(-1px);
}
.topbar-action:hover svg { stroke: #fff; }
.topbar-action:active { transform: translateY(0); box-shadow: none; }
.topbar-action svg { flex-shrink: 0; transition: stroke .2s; }

/* ── KPI Bar (main area, horizontal) ── */
.kpi-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 20px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.kpi-bar::-webkit-scrollbar { display: none; }
.kpi-bar[hidden] { display: none; }
.kpi-bar-grid {
  display: flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0;
}
.kpi-bar .kpi-card {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
  min-width: 0;
  flex: 1 1 0;
  min-width: 100px;
}
.kpi-bar .kpi-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.kpi-bar .kpi-icon {
  font-size: 18px; line-height: 1;
  color: var(--accent);
  display: flex; align-items: center;
  flex-shrink: 0;
}
.kpi-bar .kpi-data { display: flex; flex-direction: column; min-width: 0; }
.kpi-bar .kpi-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.kpi-bar .kpi-label {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.kpi-bar-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: transparent; border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.kpi-bar-toggle:hover { background: var(--bg-hover); color: var(--text); }
.kpi-bar.collapsed .kpi-bar-grid { display: none; }
.kpi-bar.collapsed .kpi-bar-toggle svg { transform: rotate(180deg); }
.kpi-bar.collapsed { padding: 4px 20px; }

/* Project banner */
.project-banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
  padding: 8px 20px;
}
.pb-icon { font-size: 20px; }
.pb-meta { flex: 1; min-width: 0; }
.pb-name { font-weight: 600; font-size: 14px; color: var(--text); }
.pb-desc { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-btn {
  background: transparent; border: none;
  color: var(--text-secondary);
  font-size: 16px; padding: 6px 9px;
  border-radius: var(--radius-sm);
}
.pb-btn:hover { background: var(--bg-hover); color: var(--text); }

/* Toggle de pensamiento (Normal / Profundo) */
.thinking-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 999px;
}
.thinking-toggle.error { border-color: rgba(220,38,38,0.35); }
.thinking-option {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; background: transparent; border: none;
  border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
  transition: background .15s ease, color .15s ease;
}
.thinking-option .icon { opacity: .8; }
.thinking-option:hover { color: var(--text); background: var(--bg-hover); }
.thinking-option.active {
  background: var(--accent-soft); color: var(--accent);
}
.thinking-option.active .icon { opacity: 1; }

/* Welcome */
.welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 40px 24px; text-align: center; overflow-y: auto; }
.welcome-title { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 8px; background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.welcome-sub { font-size: 16px; color: var(--text-secondary); margin: 0 0 32px; max-width: 520px; line-height: 1.6; }
.suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); gap: 10px; width: 100%; max-width: 600px; }
.sug { text-align: left; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; position: relative; animation: sugAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.sug:nth-child(1) { animation-delay: 0.05s; }
.sug:nth-child(2) { animation-delay: 0.1s; }
.sug:nth-child(3) { animation-delay: 0.15s; }
.sug:nth-child(4) { animation-delay: 0.2s; }
.sug:nth-child(5) { animation-delay: 0.25s; }
@keyframes sugAppear { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.sug:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.sug-icon { font-size: 20px; margin-bottom: 6px; }
.sug-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.sug-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }

/* Morning Briefing button */
.morning-briefing-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 24px; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 1px solid #f59e0b; border-radius: 999px; font-size: 14px; font-weight: 600; color: #92400e; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(245,158,11,0.15); }
.morning-briefing-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,158,11,0.25); background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%); }
.morning-briefing-btn .morning-icon { font-size: 18px; }
[data-theme="dark"] .morning-briefing-btn { background: linear-gradient(135deg, #78350f 0%, #92400e 100%); border-color: #b45309; color: #fde68a; }
[data-theme="dark"] .morning-briefing-btn:hover { background: linear-gradient(135deg, #92400e 0%, #b45309 100%); }

/* Help link under suggestions */
.help-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; padding: 8px 16px; background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 500; cursor: pointer; border-radius: var(--radius); transition: all 0.15s; }
.help-link:hover { background: var(--bg-hover); text-decoration: underline; }
.help-link svg { opacity: 0.8; }

/* ============================================================
   HELP CONTENT (inside existing modal)
   ============================================================ */
.modal.modal-wide { max-width: 680px; }
.help-intro { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 24px; line-height: 1.6; }
.help-intro strong { color: var(--text); font-weight: 600; }

.help-category { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.help-category:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.help-category:first-child { background: linear-gradient(135deg, rgba(234,179,8,0.06) 0%, rgba(249,115,22,0.04) 100%); border: 1px solid rgba(234,179,8,0.2); border-radius: var(--radius); padding: 16px; margin-bottom: 28px; }
.help-category:first-child .help-cat-name { font-size: 15px; color: #b45309; }
[data-theme="dark"] .help-category:first-child .help-cat-name { color: #fbbf24; }
[data-theme="dark"] .help-category:first-child { background: linear-gradient(135deg, rgba(234,179,8,0.08) 0%, rgba(249,115,22,0.05) 100%); border-color: rgba(234,179,8,0.25); }
.help-cat-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.help-cat-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.help-cat-icon.blue   { background: rgba(59,130,246,0.1); }
.help-cat-icon.green  { background: rgba(34,197,94,0.1); }
.help-cat-icon.purple { background: rgba(168,85,247,0.1); }
.help-cat-icon.orange { background: rgba(249,115,22,0.1); }
.help-cat-icon.pink   { background: rgba(236,72,153,0.1); }
.help-cat-icon.cyan   { background: rgba(6,182,212,0.1); }
.help-cat-icon.red    { background: rgba(239,68,68,0.1); }
.help-cat-icon.yellow { background: rgba(234,179,8,0.1); }
.help-cat-name { font-size: 14px; font-weight: 600; }
.help-cat-intro { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 10px; line-height: 1.5; padding-left: 40px; }
.help-examples { display: flex; flex-direction: column; gap: 4px; padding-left: 40px; }
.help-example { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; text-align: left; }
.help-example:hover { background: var(--accent-soft); border-color: var(--accent); }
.help-example-arrow { color: var(--accent); font-size: 12px; flex-shrink: 0; opacity: 0.5; transition: opacity 0.15s; }
.help-example:hover .help-example-arrow { opacity: 1; }
.help-example-text { flex: 1; min-width: 0; }
.help-example-prompt { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.35; }
.help-example-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.help-example-try { font-size: 10.5px; color: var(--accent); font-weight: 500; opacity: 0; transition: opacity 0.15s; white-space: nowrap; flex-shrink: 0; }
.help-example:hover .help-example-try { opacity: 1; }
.help-tip { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; padding: 12px 14px; background: var(--accent-soft); border-radius: var(--radius); font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.help-tip-icon { flex-shrink: 0; font-size: 14px; }
.help-tip strong { color: var(--text); }
.help-shortcuts { margin-top: 20px; padding: 16px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); }
.help-shortcuts-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.help-shortcuts-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; }
.help-shortcuts-grid kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 2px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 600; color: var(--text-secondary); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.help-shortcuts-grid span { font-size: 12.5px; color: var(--text-secondary); }
.help-cta { padding: 8px 24px; background: var(--accent); color: var(--text-on-accent); border: none; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.help-cta:hover { background: var(--accent-hover); }

/* Favorite re-run button */
.fav-rerun { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; background: var(--accent-soft); color: var(--accent); border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.conv-item:hover .fav-rerun { opacity: 1; }
.fav-rerun:hover { background: var(--accent); color: white; }

/* Chat */
.chat { flex: 1; min-height: 0; overflow-y: auto; display: none; }
.chat.active { display: block; }
.welcome.hidden { display: none; }
.messages { max-width: var(--chat-width); margin: 0 auto; padding: 18px 24px 28px; display: flex; flex-direction: column; gap: 16px; }

.msg { display: flex; flex-direction: column; gap: 6px; animation: msgAppear 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes msgAppear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.msg-role { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.msg.user { align-items: flex-end; }
.msg.user .msg-bubble { background: var(--bg-user-msg); border-radius: 18px; padding: 10px 16px; max-width: 80%; word-wrap: break-word; }
.msg.assistant .msg-bubble { width: 100%; }
.msg-bubble { font-size: 15px; line-height: 1.55; }
.msg-bubble p { margin: 0 0 8px; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble h1, .msg-bubble h2, .msg-bubble h3 { margin: 18px 0 10px; font-weight: 600; letter-spacing: -0.01em; }
.msg-bubble h1 { font-size: 22px; }
.msg-bubble h2 { font-size: 19px; }
.msg-bubble h3 { font-size: 16.5px; }
.msg-bubble ul, .msg-bubble ol { margin: 8px 0 12px; padding-left: 22px; }
.msg-bubble li { margin: 4px 0; }
.msg-bubble code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-code); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); }
.msg-bubble pre { background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; overflow-x: auto; margin: 12px 0; }
.msg-bubble pre code { background: transparent; padding: 0; font-size: 13px; border: none; }
.msg-bubble details.code-collapsible { margin: 12px 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.msg-bubble details.code-collapsible summary { cursor: pointer; padding: 8px 14px; background: var(--bg-elevated); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); user-select: none; }
.msg-bubble details.code-collapsible summary:hover { background: var(--bg-hover); }
.msg-bubble details.code-collapsible { margin: 10px 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-code); }
.msg-bubble details.code-collapsible > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 12px; color: var(--text-secondary); user-select: none; }
.msg-bubble details.code-collapsible > summary::-webkit-details-marker { display: none; }
.msg-bubble details.code-collapsible > summary:hover { background: var(--bg-hover); }
.msg-bubble details.code-collapsible .cc-lang { font-weight: 600; letter-spacing: .03em; }
.msg-bubble details.code-collapsible .cc-lines { color: var(--text-muted); }
.msg-bubble details.code-collapsible .cc-toggle { margin-left: auto; color: var(--text-muted); font-size: 11.5px; }
.msg-bubble details.code-collapsible .cc-toggle::after { content: "▸ Mostrar"; }
.msg-bubble details.code-collapsible[open] .cc-toggle::after { content: "▾ Ocultar"; }
.msg-bubble details.code-collapsible pre { margin: 0; border: none; border-top: 1px solid var(--border); border-radius: 0; max-height: 360px; overflow: auto; }
.msg-bubble strong { color: var(--text); font-weight: 650; }
.msg-bubble table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 14px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.msg-bubble th, .msg-bubble td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.msg-bubble th { font-weight: 600; background: var(--bg-elevated); border-bottom: 2px solid var(--border-strong); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); }
.msg-bubble tr:nth-child(even) td { background: var(--bg-hover); }
.msg-bubble tr:hover td { background: var(--accent-soft); transition: background 0.15s; }
.msg-bubble tr:last-child td { border-bottom: none; }
/* Columnas numéricas: cabecera y celdas a la derecha, misma fuente que el resto (antes las cifras iban en
   monoespaciada y las de la fila TOTAL en negrita normal, y no casaban) con dígitos de ancho fijo. */
.msg-bubble th.num, .msg-bubble td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.msg-bubble th.al-r, .msg-bubble td.al-r { text-align: right; }
.msg-bubble th.al-c, .msg-bubble td.al-c { text-align: center; }

/* Table copy button */
.table-wrap { position: relative; }
.copy-table-btn {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 6px; font-size: 14px;
  cursor: pointer; opacity: 0; transition: opacity 0.15s;
  line-height: 1;
}
.table-wrap:hover .copy-table-btn { opacity: 1; }
.msg-bubble blockquote { border-left: 3px solid var(--border-strong); margin: 12px 0; padding: 4px 14px; color: var(--text-secondary); }
.msg-bubble a { color: var(--accent); text-decoration: underline; }
.msg-bubble a:hover { opacity: 0.8; }
.msg-bubble a.download-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft); color: var(--accent);
  padding: 6px 14px; border-radius: 8px;
  text-decoration: none; font-weight: 600; font-size: 13px;
  margin: 6px 0; transition: background 0.2s;
}
.msg-bubble a.download-link:hover { background: var(--accent); color: #fff; }

/* Inline Charts */
.inline-chart-wrap {
  width: 100%; max-width: 560px; height: 300px;
  margin: 14px 0; padding: 16px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); position: relative;
}
.inline-chart-wrap canvas { width: 100% !important; height: 100% !important; }
.chart-error {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--text-muted); font-size: 13px;
}

/* Fav button on messages */
/* (msg-actions now handle fav/share/copy - see below) */
.msg { position: relative; }

/* Favorites list items */
.fav-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font-size: 13px; color: var(--text); transition: background 0.12s;
}
.fav-item:hover { background: var(--bg-hover); }
.fav-item-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-del-btn {
  background: transparent; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 13px; padding: 0 4px; opacity: 0;
  transition: opacity 0.12s;
}
.fav-item:hover .fav-del-btn { opacity: 1; }
.fav-del-btn:hover { color: var(--danger, #e53e3e); }

/* Adjuntos */
.attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.attachments:empty { display: none; }
.attachment { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; color: var(--text); max-width: 280px; }
.att-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-size { color: var(--text-muted); font-size: 11.5px; }
.att-remove { background: transparent; border: none; color: var(--text-muted); font-size: 16px; line-height: 1; padding: 0 2px; border-radius: 3px; }
.att-remove:hover { background: var(--border); color: var(--text); }

.composer-left { display: flex; align-items: center; gap: 10px; }
.attach-btn { background: transparent; border: none; color: var(--text-muted); width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.attach-btn:hover { background: var(--bg-hover); color: var(--text); }
.voice-btn { background: transparent; border: none; color: var(--text-muted); width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.voice-btn:hover { background: var(--bg-hover); color: var(--text); }
.voice-btn.recording { color: var(--danger); animation: pulse 1.2s infinite; background: rgba(220,38,38,0.1); }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg-img { max-width: 240px; max-height: 180px; border-radius: 10px; border: 1px solid var(--border); object-fit: cover; }

/* Phases */
.phases-panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden; animation: msgAppear 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; backdrop-filter: blur(8px); }
.phases-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-hover); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 500; }
.phases-spinner { width: 14px; height: 14px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.phases-check { width: 18px; height: 18px; border-radius: 50%; background: var(--success); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes scaleIn { from { transform: scale(0); } to { transform: scale(1); } }
.phases-title { color: var(--text); flex: 1; }
.phases-toggle { font-size: 11.5px; color: var(--text-muted); }
.phases-list { padding: 8px 0; }
.phases-panel.collapsed .phases-list { display: none; }
.phase { display: flex; align-items: center; gap: 10px; padding: 6px 14px; font-size: 13.5px; color: var(--text-secondary); animation: slideIn 0.3s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
.phase-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.phase.done .phase-icon { color: var(--success); font-weight: 700; }
.phase.active .phase-text { color: var(--text); font-weight: 500; }
.phase.active .phase-pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 6px; animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }

/* Tool calls */
.tools-wrap { margin: 4px 0 14px; }

/* Grupo plegable que agrupa TODAS las consultas de una respuesta en un solo
   bloque, para no inundar el chat con muchas tarjetas. */
.tools-group { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-elevated); animation: toolSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.tools-group-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--bg-hover); cursor: pointer; user-select: none; transition: background 0.15s; }
.tools-group-head:hover { background: var(--border); }
.tools-group-icon { font-size: 15px; line-height: 1; flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); border-radius: 6px; }
.tools-group-title { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
.tools-group-toggle { color: var(--text-muted); font-size: 13px; transition: transform 0.2s; flex-shrink: 0; }
.tools-group.collapsed .tools-group-toggle { transform: rotate(-90deg); }
.tools-group.collapsed .tools-group-body { display: none; }
.tools-group-body { padding: 8px 8px 2px; display: flex; flex-direction: column; gap: 0; }
/* Cards dentro de un grupo: sin animación individual (la aporta el grupo) y
   con menos margen para que queden compactas. */
.tools-group-body .tool-call { animation: none; margin-bottom: 6px; }

.tool-call { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; overflow: hidden; margin-bottom: 8px; animation: toolSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes toolSlide { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
.tool-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-hover); cursor: pointer; user-select: none; transition: background 0.15s; }
.tool-head:hover { background: var(--border); }
.tool-head .tool-icon { font-size: 16px; line-height: 1; flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); border-radius: 6px; }
.tool-head .tool-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.tool-head .tool-title { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.2; }
.tool-head .tool-context { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.tool-head .tname { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); opacity: 0.6; flex-shrink: 0; }
.tool-head .tag { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 4px; }
.tool-head .tmeta { color: var(--text-muted); font-size: 13px; transition: transform 0.2s; flex-shrink: 0; }
.tool-call.collapsed .tool-head .tmeta { transform: rotate(-90deg); }
.tool-call.collapsed .tool-body { display: none; }
.tool-call.done .tool-head .tool-icon { background: var(--success-soft, rgba(21, 128, 61, 0.1)); }
.tool-section { padding: 10px 14px; border-top: 1px solid var(--border); }
.tool-section:first-child { border-top: none; }
.tool-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 6px; }
.tool-section pre { font-family: var(--font-mono); font-size: 12px; line-height: 1.55; margin: 0; padding: 8px 10px; background: var(--bg-code); border-radius: 6px; white-space: pre-wrap; color: var(--text-secondary); max-height: 240px; overflow-y: auto; }

/* Followups */
.followups { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); animation: fadeUp 0.4s 0.2s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.followups-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--text); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* Clickable suggestion chips inside assistant messages */
.suggestion-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-soft, rgba(59,130,246,0.08));
  border: 1px solid var(--accent, #3b82f6);
  border-radius: 999px; padding: 4px 14px 4px 10px;
  font-size: 13px; font-weight: 500; line-height: 1.4;
  color: var(--accent, #3b82f6); cursor: pointer;
  transition: all 0.2s ease; vertical-align: baseline;
  white-space: nowrap; max-width: 100%;
}
.suggestion-chip:hover {
  background: var(--accent, #3b82f6); color: #fff;
  transform: translateY(-1px); box-shadow: 0 2px 8px rgba(59,130,246,0.25);
}
.suggestion-chip:hover svg { stroke: #fff; }
.suggestion-chip:active { transform: translateY(0); }
.suggestion-chip svg { flex-shrink: 0; stroke: var(--accent, #3b82f6); transition: stroke 0.2s; }

/* Error */
.error-box { color: var(--danger); padding: 12px 14px; background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.2); border-radius: var(--radius); font-size: 13.5px; line-height: 1.5; }
.error-box strong { display: block; margin-bottom: 4px; }

/* Typing */
.typing { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; }
.typing span { width: 7px; height: 7px; background: var(--text-muted); border-radius: 50%; animation: typing 1.4s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: 0.18s; }
.typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Composer */
.composer-wrap { padding: 8px 20px 12px; background: var(--bg); border-top: 1px solid var(--border); }
.composer { max-width: var(--chat-width); margin: 0 auto; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); padding: 8px 14px 6px; transition: border-color 0.15s, box-shadow 0.15s; }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.composer textarea { width: 100%; background: transparent; border: none; outline: none; resize: none; color: var(--text); font-size: 15px; line-height: 1.55; padding: 4px 2px; max-height: 200px; overflow-y: auto; }
.composer textarea::placeholder { color: var(--text-muted); }
.composer-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.composer-hint { font-size: 11.5px; color: var(--text-muted); }
.send { width: 34px; height: 34px; background: var(--accent); border: none; border-radius: 50%; color: var(--text-on-accent); display: flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.send:hover:not(:disabled) { background: var(--accent-hover); transform: scale(1.08); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.send:disabled { opacity: 0.3; cursor: not-allowed; background: var(--text-muted); }
.send.stop-mode { background: var(--text); opacity: 1; cursor: pointer; }
.send.stop-mode:hover { background: var(--danger); }
.footer-note { text-align: center; font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }

/* ============================================================
   MODALES
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
@media (max-width: 600px) {
  .modal-backdrop { padding: 10px; }
  .modal { max-height: 95vh; border-radius: var(--radius); }
  .modal-head { padding: 12px 14px; }
  .modal-head h3 { font-size: 15px; }
  .modal-body { padding: 14px; }
  .modal-foot { padding: 10px 14px; }
}
.modal {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 600px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.modal-close {
  background: transparent; border: none;
  font-size: 22px; line-height: 1; color: var(--text-muted);
  padding: 4px 8px; border-radius: 4px;
}
.modal-close:hover { background: var(--bg-hover); color: var(--text); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-hover);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.modal-foot:empty { display: none; padding: 0; border: none; }

/* Onboarding Wizard */
.onboarding-wizard { text-align: center; }
.onboarding-step { display: none; animation: fadeIn 0.3s; }
.onboarding-step.active { display: block; }
.onboarding-icon { font-size: 48px; margin-bottom: 12px; }
.onboarding-step h3 { margin: 0 0 8px; font-size: 20px; }
.onboarding-step p { color: var(--text-secondary); margin: 0 0 20px; }
.onboarding-features {
  display: flex; flex-direction: column; gap: 8px;
  text-align: left; max-width: 340px; margin: 0 auto 24px;
}
.ob-feat {
  padding: 10px 14px; background: var(--bg-hover);
  border-radius: 8px; font-size: 14px;
}
.onboarding-form { text-align: left; max-width: 380px; margin: 0 auto; }
.onboarding-form label {
  display: block; margin-bottom: 14px; font-size: 13px;
  font-weight: 500; color: var(--text-secondary);
}
.onboarding-form input {
  display: block; width: 100%; margin-top: 5px;
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px;
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans);
  transition: border-color .15s, box-shadow .15s;
}
.onboarding-form input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.ob-error { color: var(--danger); font-size: 13px; margin: 10px 0; padding: 8px 12px; background: rgba(220,38,38,0.06); border-radius: var(--radius-sm); }
.ob-actions { display: flex; justify-content: space-between; margin-top: 20px; }
.btn-ghost { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 8px 12px; }
.btn-ghost:hover { color: var(--text); }
.ob-success-info { margin: 16px 0; padding: 12px; background: rgba(22,163,74,0.08); border-radius: var(--radius-sm); color: var(--success); }
.ob-suggestions { text-align: left; margin: 20px auto; max-width: 360px; }
.ob-suggestion {
  padding: 12px 14px; margin: 8px 0; background: var(--bg-hover);
  border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; font-size: 14px; transition: all 0.15s;
}
.ob-suggestion:hover { border-color: var(--accent); background: var(--accent-soft); }
.onboarding-progress { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.ob-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong); transition: all 0.3s;
}
.ob-dot.active { background: var(--accent); width: 24px; border-radius: 4px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.btn-primary, .btn-secondary, .btn-danger {
  border: none; border-radius: var(--radius-sm);
  padding: 9px 16px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background 0.15s;
  font-family: var(--font-sans);
}
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--bg-hover); color: var(--text); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--border); }
.btn-danger { background: rgba(220,38,38,0.1); color: var(--danger); border: 1px solid rgba(220,38,38,0.3); }
.btn-danger:hover { background: rgba(220,38,38,0.2); }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  padding: 4px; border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer;
  transition: background .12s, color .12s;
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text); }
.btn-danger.small { padding: 4px 10px; font-size: 12px; }

.form-grid { display: flex; flex-direction: column; gap: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; }
.form-grid input, .form-grid select, .form-grid textarea {
  border: 1px solid var(--border);
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  font-family: var(--font-sans);
  transition: border-color .15s, box-shadow .15s;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-grid input:disabled, .form-grid textarea:disabled { background: var(--bg-hover); color: var(--text-muted); }
.form-grid textarea { resize: vertical; min-height: 60px; }
.form-hint { font-size: 11px; color: var(--text-muted); margin: -4px 0 0; }

/* Cloud OAuth auth box (auto-import modal) */
.cloud-auth-box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 8px;
  background: var(--bg-hover); border: 1px solid var(--border);
  margin-bottom: 6px;
}
.cloud-status { font-size: 13px; flex: 1; min-width: 140px; }
.btn-oauth {
  padding: 8px 18px; border-radius: 8px; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer;
  color: #fff; transition: opacity .15s, transform .1s;
}
.btn-oauth:hover { opacity: .88; transform: translateY(-1px); }
.btn-oauth:active { transform: translateY(0); }
.btn-gdrive { background: #34a853; }
.btn-dropbox { background: #0061ff; }
.btn-onedrive { background: #d83b01; }

/* Cloud provider cards (settings Cloud tab) */
.cloud-provider-cards {
  display: flex; flex-direction: column; gap: 12px;
}
.cloud-card {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-elevated); padding: 16px 20px;
  transition: box-shadow .15s, border-color .15s;
}
.cloud-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.cloud-card-connected { border-color: #27ae60; background: #f0fdf4; }
.cloud-card-unavailable { opacity: .45; }
.cloud-card-icon { font-size: 28px; flex-shrink: 0; }
.cloud-card-info { flex: 1; min-width: 0; }
.cloud-card-title { font-weight: 600; font-size: 15px; color: var(--text); }
.cloud-card-subtitle { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.cloud-card-account { font-size: 13px; color: #27ae60; font-weight: 500; margin-top: 2px; }

/* Setup wizard card — vertical layout */
.cloud-card-setup-mode {
  flex-direction: column; align-items: stretch;
}
.cloud-card-row {
  display: flex; align-items: center; gap: 14px;
}
.cloud-setup-wizard {
  border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px;
}
.cloud-setup-instructions {
  background: var(--bg-hover); border-radius: 8px; padding: 14px 16px;
  font-size: 13px; margin-bottom: 14px;
}
.cloud-setup-instructions h5 { margin: 0 0 8px; font-size: 13px; }
.cloud-setup-instructions ol { padding-left: 18px; margin: 0; line-height: 1.9; }
.cloud-setup-instructions a { color: var(--accent); }
.cloud-redirect-box {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.cloud-redirect-box label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.cloud-redirect-copy {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.cloud-redirect-copy code {
  flex: 1; background: var(--bg-code); padding: 6px 10px;
  border-radius: 6px; font-size: 12px; word-break: break-all;
  border: 1px solid var(--border);
}
.cloud-setup-fields {
  display: flex; flex-direction: column; gap: 8px;
}
.cloud-setup-fields label { font-size: 13px; }
.cloud-setup-fields input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px; background: var(--bg-input);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.cloud-setup-fields input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cloud-setup-actions {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
}
.cloud-setup-result { font-size: 13px; }

/* Dark theme */
[data-theme="dark"] .cloud-card-connected { background: #0d2818; }

/* File upload drop zone */
.file-upload-area {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  background: var(--bg-hover);
  transition: border-color .15s, background .15s;
  cursor: pointer;
}
.file-upload-area:hover, .file-upload-dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-hover));
}
.file-upload-icon { font-size: 32px; margin-bottom: 6px; }
.file-upload-text { font-size: 14px; color: var(--text-muted); margin: 4px 0 8px; }

/* File list (selected + server files) */
.file-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.file-list-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  font-size: 13px;
}
.file-list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list-size { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }
.file-list-remove {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 14px; padding: 0 2px;
  transition: color .15s;
}
.file-list-remove:hover { color: var(--danger); }
.file-list-server { background: var(--bg-hover); }
.file-list-processed { opacity: .6; }

/* Column mapping rows */
.mapping-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.mapping-row:last-child { border-bottom: none; }
.mapping-col-name {
  flex: 0 0 35%; font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.mapping-arrow { color: var(--text-muted); font-size: 14px; flex-shrink: 0; }
.mapping-field-select {
  flex: 1; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px; background: var(--bg-input);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.mapping-field-select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.mapping-json-toggle { margin-top: 8px; }
.mapping-json-toggle summary { font-size: 12px; color: var(--text-muted); }
.mapping-json-toggle textarea {
  width: 100%; margin-top: 6px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; font-family: monospace;
  background: var(--bg-input); color: var(--text);
}

.checkbox-label { flex-direction: row !important; align-items: center; gap: 8px !important; cursor: pointer; }
.checkbox-label input { margin: 0; }

.form-row { display: flex; gap: 8px; }
.form-row select { flex: 1; }

.muted { color: var(--text-muted); font-size: 13px; }

.file-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  font-size: 13px;
}
.file-upload-row {
  display: flex; gap: 8px; margin-top: 8px;
  align-items: center;
}
.file-upload-row input[type="file"] { flex: 1; font-size: 12px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

@media (max-width: 768px) {
  /* Reset grid: main takes full width, sidebar is fixed overlay */
  .app {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr;
  }
  .app > .sidebar          { grid-column: 1; }
  .app > .resizer          { display: none !important; }
  .app > .main             { grid-column: 1; }
  .app > .artifact-resizer { display: none; }
  .app > .artifact-panel   { grid-column: 1; }

  /* Sidebar: fixed overlay, slide from left */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px !important; min-width: 280px !important;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .app.show-sidebar .sidebar { transform: translateX(0); }

  /* Override sidebar-collapsed on mobile — has no effect */
  .app.sidebar-collapsed .sidebar {
    width: 280px !important;
    min-width: 280px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-100%);
  }
  .app.sidebar-collapsed.show-sidebar .sidebar {
    transform: translateX(0);
  }
  .sidebar-collapse-btn { display: none !important; }

  /* Backdrop overlay behind sidebar */
  .app.show-sidebar::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 99;
    animation: fadeIn .2s ease;
  }

  /* On mobile: always show three-dot button (no hover) */
  .conv-more { opacity: 0.6 !important; }
  .conv-item.dropdown-open .conv-more { opacity: 1 !important; }

  /* Topbar hamburger always visible */
  .icon-btn { display: flex; }

  .suggestions { grid-template-columns: 1fr; }
  .welcome-title { font-size: 24px; }
  .welcome-sub { font-size: 14px; margin-bottom: 24px; }
  .messages { padding: 16px 12px 28px; gap: 20px; }
  .msg-bubble { font-size: 14px; }
  /* En móvil dejamos sólo los iconos del toggle para ahorrar espacio */
  .thinking-option span { display: none; }
  .thinking-option { padding: 6px 9px; }
  .topbar { padding: 10px 14px; min-height: 46px; }
  .brand { font-size: 14px; }
  .topbar-action span { display: none; }
  .topbar-actions { gap: 4px; margin-left: 10px; }
  .topbar-action { padding: 7px 9px; border-radius: 50%; }

  /* KPI bar: 2-column on mobile */
  .kpi-bar { padding: 6px 12px; }
  .kpi-bar-grid { flex-wrap: wrap; gap: 6px; }
  .kpi-bar .kpi-card { min-width: calc(50% - 4px); flex: 0 0 calc(50% - 4px); padding: 6px 10px; }
  .kpi-bar .kpi-value { font-size: 15px; }
  .kpi-bar .kpi-label { font-size: 10px; }

  .composer-wrap { padding: 10px 12px 14px; }
  .composer { padding: 10px 12px 6px; }
  .composer textarea { font-size: 14px; }
  .footer-note { font-size: 10.5px; }
  .panel-page-header { padding: 12px 14px; }
  .panel-page-title { font-size: 15px; }
  .panel-page-body { padding: 16px 14px; }
  .users-panel-grid { grid-template-columns: 1fr; }
  .new-user-section { padding: 16px; }

  /* Notification dropdown full width on mobile */
  .notif-dropdown { width: calc(100vw - 28px); right: -8px; }
}

/* ============================================================
   Visualizador HTML (Artifacts-style)
   ============================================================ */
.artifact-trigger {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-elevated));
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 14px 0;
  cursor: pointer;
  font-size: 15px;
  color: var(--text);
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  width: 100%;
  max-width: 540px;
}
.artifact-trigger:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.artifact-trigger .at-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.artifact-trigger .at-label {
  flex: 1;
  font-weight: 600;
  font-size: 14.5px;
  display: flex; flex-direction: column; gap: 2px;
}
.artifact-trigger .at-meta {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 400;
}

/* Layout cuando el artifact panel está abierto.
   Default: FULLSCREEN — el panel toma toda la pantalla, sidebar y chat ocultos.
   Con clase 'artifact-split' añadida → modo 50/50 (chat izquierda + panel derecha). */
.app.artifact-open {
  grid-template-columns: 0 0 0 0 1fr;
}
.app.artifact-open .sidebar,
.app.artifact-open .resizer {
  display: none;
}
/* Keep .main in DOM (visibility:hidden) so chat scroll position is preserved */
.app.artifact-open .main {
  visibility: hidden; overflow: hidden; pointer-events: none;
  width: 0; min-width: 0;
}
.app.artifact-open .artifact-resizer {
  display: none;
}

/* Modo split: ambos visibles */
.app.artifact-open.artifact-split {
  grid-template-columns: var(--sidebar-w, 280px) 4px 1fr 4px var(--artifact-w, 720px);
}
.app.artifact-open.artifact-split .sidebar,
.app.artifact-open.artifact-split .resizer,
.app.artifact-open.artifact-split .artifact-resizer {
  display: revert;
}
.app.artifact-open.artifact-split .main {
  visibility: visible; overflow: hidden; pointer-events: auto;
  width: auto; min-width: 0;
}
.app.artifact-open.artifact-split .resizer {
  display: block;
}
.app.artifact-open.artifact-split .artifact-resizer {
  display: block;
}

.artifact-panel {
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  height: 100vh;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.artifact-panel:not(.open) { display: none; }

.artifact-resizer {
  background: transparent;
  cursor: col-resize;
  position: relative;
  z-index: 9;
  transition: background 0.15s;
}
.artifact-resizer:hover, .artifact-resizer.dragging { background: var(--accent); }
.artifact-resizer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -3px; right: -3px;
}
.app:not(.artifact-open) .artifact-resizer { display: none; }

.artifact-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
  min-height: 56px;
}
.artifact-title {
  flex: 1;
  font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.artifact-tabs {
  display: flex; gap: 4px;
}
.artifact-tab {
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.artifact-tab:hover { background: var(--border); color: var(--text); }
.artifact-tab.active {
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 600;
  border-color: var(--border-strong);
}
.artifact-actions { display: flex; gap: 6px; }
.artifact-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 17px;
  cursor: pointer;
  transition: all 0.15s;
}
.artifact-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.artifact-btn:active { transform: translateY(0); }

.artifact-body {
  flex: 1; min-height: 0; min-width: 0;
  overflow: hidden; position: relative;
  background: white;
  display: flex;
}
.artifact-pane {
  flex: 1; min-width: 0; min-height: 0;
  overflow: hidden;
}
.artifact-iframe {
  display: block;
  width: 100%; height: 100%;
  border: none;
  background: white;
}
.artifact-code {
  width: 100%; height: 100%;
  margin: 0; padding: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--bg-code);
  color: var(--text);
  overflow: auto;
  white-space: pre;
  line-height: 1.5;
}
.artifact-pane:not(.active) { display: none; }

@media (max-width: 1100px) {
  .app.artifact-open.artifact-split {
    grid-template-columns: var(--sidebar-w, 280px) 4px 1fr 4px var(--artifact-w, 480px);
  }
}
@media (max-width: 768px) {
  /* En móvil siempre fullscreen, ignorar split */
  .app.artifact-open,
  .app.artifact-open.artifact-split {
    grid-template-columns: 1fr !important;
  }
  .app.artifact-open .sidebar,
  .app.artifact-open .resizer,
  .app.artifact-open .main,
  .app.artifact-open .artifact-resizer,
  .app.artifact-open.artifact-split .sidebar,
  .app.artifact-open.artifact-split .resizer,
  .app.artifact-open.artifact-split .main,
  .app.artifact-open.artifact-split .artifact-resizer {
    display: none !important;
  }
  .app.artifact-open .artifact-panel,
  .app.artifact-open.artifact-split .artifact-panel {
    grid-column: 1;
  }
}

/* ============================================================
   MODAL DE CONFIGURACIÓN (tabs verticales)
   ============================================================ */
/* Settings tabs and panes (used inside panel layout) */
.settings-tab {
  background: transparent;
  border: none;
  text-align: left;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
  font-family: var(--font-sans);
  transition: background .12s, color .12s;
}
.settings-tab:hover { background: var(--bg-hover); color: var(--text); }
.settings-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.settings-pane:not(.active) { display: none; }
.settings-pane h4 {
  margin: 0 0 10px; font-size: 14px; font-weight: 600;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.settings-pane .help {
  font-size: 12px; color: var(--text-muted);
  margin: -4px 0 14px; line-height: 1.4;
}
.settings-pane label {
  display: block; margin-bottom: 14px;
  font-size: 13px; font-weight: 500;
  color: var(--text);
}
.settings-pane label > input[type="text"],
.settings-pane label > input[type="password"],
.settings-pane label > input[type="number"],
.settings-pane label > select {
  display: block; width: 100%; margin-top: 4px;
  padding: 7px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px; font-family: var(--font-sans);
  transition: border-color .15s, box-shadow .15s;
}
.settings-pane label > input:focus,
.settings-pane label > select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.settings-pane .checkbox-label {
  display: flex; align-items: flex-start; gap: 8px;
  font-weight: 400;
  flex-wrap: wrap;
}
.settings-pane .checkbox-label input { margin: 3px 0 0; flex-shrink: 0; }
.settings-pane .checkbox-label .help { margin: 2px 0 8px; flex-basis: 100%; padding-left: 24px; }

/* Sidebar visibility customization */
.sidebar-visibility-list {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 8px;
}
.sidebar-vis-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  font-weight: 400;
  user-select: none;
}
.sidebar-vis-item:hover {
  background: var(--bg-hover);
  transform: translateX(2px);
}
.sidebar-vis-item:active { transform: scale(0.98); }
.sidebar-vis-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: var(--text);
}
.sidebar-vis-item input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.sidebar-vis-item .toggle-switch {
  position: relative;
  width: 38px; height: 22px;
  background: var(--border-strong);
  border-radius: 11px;
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.sidebar-vis-item .toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.1);
}
.sidebar-vis-item input:checked + .toggle-switch {
  background: var(--accent);
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 2px var(--accent-soft), 0 2px 8px rgba(37, 99, 235, 0.3);
}
.sidebar-vis-item input:checked + .toggle-switch::after {
  transform: translateX(16px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
/* Dim label when unchecked */
.sidebar-vis-item:has(input:not(:checked)) .sidebar-vis-label {
  opacity: 0.5;
}
.sidebar-vis-item:has(input:not(:checked)):hover .sidebar-vis-label {
  opacity: 0.8;
}

/* Sidebar customize popover (floating panel) */
.sidebar-customize-popover {
  position: fixed;
  background: var(--bg-elevated);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 80px rgba(0,0,0,0.2),
    0 8px 24px rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.06);
  z-index: 200;
  padding: 0;
  animation: popoverSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 70vh;
  overflow-y: auto;
  width: 280px;
}
.sidebar-customize-popover[hidden] { display: none !important; }
@keyframes popoverSlideUp {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sidebar-customize-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  border-bottom: 1.5px solid var(--border);
  position: sticky; top: 0;
  background: var(--bg-elevated);
  z-index: 1;
}
.sidebar-customize-close {
  background: none; border: none;
  font-size: 18px; line-height: 1;
  color: var(--text-muted);
  cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.12s, color 0.12s, transform 0.12s;
}
.sidebar-customize-close:hover {
  background: var(--danger); color: white; transform: scale(1.1);
}
.sidebar-customize-list {
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.sidebar-customize-list .sidebar-vis-item {
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--bg-hover);
}
.sidebar-customize-list .sidebar-vis-item:hover {
  border-color: var(--border);
  background: var(--bg-input);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sidebar-customize-list .sidebar-vis-item:nth-child(1) { animation-delay: 0.02s; }
.sidebar-customize-list .sidebar-vis-item:nth-child(2) { animation-delay: 0.04s; }
.sidebar-customize-list .sidebar-vis-item:nth-child(3) { animation-delay: 0.06s; }
.sidebar-customize-list .sidebar-vis-item:nth-child(4) { animation-delay: 0.08s; }
.sidebar-customize-list .sidebar-vis-item:nth-child(5) { animation-delay: 0.10s; }
.sidebar-customize-list .sidebar-vis-item:nth-child(6) { animation-delay: 0.12s; }
.sidebar-customize-list .sidebar-vis-item:nth-child(7) { animation-delay: 0.14s; }
.sidebar-customize-list .sidebar-vis-item:nth-child(8) { animation-delay: 0.16s; }
.sidebar-customize-list .sidebar-vis-item {
  animation: itemFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes itemFadeIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}
.sidebar-vis-emoji {
  font-size: 16px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-vis-actions {
  display: flex; gap: 6px;
  padding: 10px 4px 6px;
  margin-top: 4px;
  border-top: 1.5px solid var(--border);
}
.sidebar-vis-action-btn {
  flex: 1;
  padding: 7px 0;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.1s;
}
.sidebar-vis-action-btn:hover:not(:disabled) {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.sidebar-vis-action-btn:active:not(:disabled) { transform: scale(0.97); }
.sidebar-vis-action-btn:disabled {
  opacity: 0.35; cursor: default;
}

/* AI Models admin config */
.ai-models-provider { margin-bottom: 14px; }
.ai-models-provider strong { display: block; margin-bottom: 6px; font-size: 14px; }
.ai-models-list { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-left: 4px; }
.ai-model-checkbox {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 400; cursor: pointer;
  padding: 3px 8px; border-radius: 4px;
  background: var(--bg-hover, #f5f5f5);
}
.ai-model-checkbox:hover { background: var(--bg-hover-accent, #eee); }
.ai-model-checkbox input { margin: 0; cursor: pointer; }

.settings-secret-row {
  display: flex; gap: 6px; align-items: center;
  margin-top: 4px;
}
.settings-secret-row input { flex: 1; }
.settings-secret-row button {
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px; cursor: pointer;
  color: var(--text-secondary);
}
.settings-secret-row button:hover { background: var(--bg-hover); color: var(--text); }

.settings-auth-toggle {
  display: flex; gap: 16px; margin: 6px 0 8px;
}
.settings-auth-toggle .radio-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; cursor: pointer; color: var(--text);
}
.settings-auth-toggle input[type="radio"] {
  accent-color: var(--accent);
}

.settings-warning {
  background: #fef3c7;
  border-left: 3px solid var(--warning);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: #78350f;
  margin-bottom: 16px;
}
[data-theme="dark"] .settings-warning { background: rgba(251,191,36,0.1); color: #fbbf24; }

/* ── System settings cards ── */
.sys-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.sys-card[open] { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.sys-card-ok { border-left: 3px solid #22c55e; }
.sys-card-partial { border-left: 3px solid #f59e0b; }
.sys-card-empty { border-left: 3px solid var(--border); }
.sys-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--bg-elevated);
  list-style: none;
  user-select: none;
  transition: background 0.12s;
}
.sys-card-header::-webkit-details-marker { display: none; }
.sys-card-header:hover { background: var(--bg-hover); }
.sys-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px; flex-shrink: 0;
}
.sys-card-meta { flex: 1; min-width: 0; }
.sys-card-title {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--text);
}
.sys-card-status {
  display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px;
}
.sys-card-caret {
  color: var(--text-muted); transition: transform 0.2s;
  flex-shrink: 0;
}
.sys-card[open] .sys-card-caret { transform: rotate(180deg); }
.sys-card-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.sys-card-desc {
  font-size: 12px; color: var(--text-muted);
  margin: 8px 0 12px; line-height: 1.4;
}
.sys-field { margin-bottom: 12px; }
.sys-field:last-child { margin-bottom: 0; }
.sys-field-label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.sys-field-hint {
  display: block; font-weight: 400; font-size: 11.5px;
  color: var(--text-muted); text-transform: none;
  letter-spacing: 0; margin-top: 1px;
}
.sys-field input[type="text"],
.sys-field input[type="password"] {
  display: block; width: 100%;
  padding: 8px 10px;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px; font-family: var(--font-mono, monospace);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sys-field input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.sys-field-select {
  display: block; width: 100%;
  padding: 8px 10px;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px; font-family: var(--font-sans);
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.sys-field-select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.sys-field .settings-secret-row { margin-top: 0; }
.sys-field .settings-secret-row button {
  display: flex; align-items: center; padding: 7px 8px;
}
.settings-divider {
  border: none; border-top: 1px solid var(--border);
  margin: 18px 0;
}
.settings-range-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 6px;
}
.settings-range-row input[type="range"] {
  flex: 1; accent-color: var(--accent);
}
.settings-range-row .range-value {
  font-size: 13px; font-weight: 600; color: var(--accent);
  min-width: 80px; text-align: right;
}
.report-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.report-template-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.report-template-card .report-icon { font-size: 20px; }
.report-template-card strong { font-size: 12.5px; color: var(--text); }
.report-template-card code {
  font-size: 10.5px;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 2px 6px;
  border-radius: 3px;
  word-break: break-all;
}

/* Report format selectors by document type */
.report-section-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.report-section-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.report-section-item .report-section-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text);
}
.report-section-item .report-section-icon { font-size: 18px; flex-shrink: 0; }
.report-section-item select {
  display: block; width: 100%;
  padding: 6px 8px;
  background: var(--bg-input, var(--bg));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px; font-family: inherit;
}

/* KPI config list */
.kpi-config-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 12px;
}
.kpi-config-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s;
}
.kpi-config-item:hover { border-color: var(--border-strong); }
.kpi-config-drag { cursor: grab; display: flex; align-items: center; opacity: 0.5; }
.kpi-config-icon { display: flex; align-items: center; color: var(--accent); flex-shrink: 0; }
.kpi-config-fields {
  flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.kpi-config-fields input {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 8px; font-size: 12.5px; color: var(--text);
  outline: none; transition: border-color 0.15s;
}
.kpi-config-fields input:focus { border-color: var(--accent); }
.kpi-config-fields input::placeholder { color: var(--text-muted); }
.kpi-config-actions {
  display: flex; flex-direction: column; gap: 0; flex-shrink: 0;
}
.kpi-config-actions button,
.kpi-config-remove {
  background: none; border: none; cursor: pointer; padding: 2px;
  display: flex; align-items: center; opacity: 0.5;
  transition: opacity 0.15s;
}
.kpi-config-actions button:hover,
.kpi-config-remove:hover { opacity: 1; }
.kpi-config-add-row {
  display: flex; align-items: center; gap: 8px;
}
.kpi-config-add-row select {
  flex: 1; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 8px; font-size: 13px;
  color: var(--text); outline: none;
}
.kpi-config-add-row .btn-secondary { flex-shrink: 0; }

@media (max-width: 700px) {
  .settings-tab { padding: 7px 10px; font-size: 12px; }
  .report-templates-grid { grid-template-columns: 1fr; }
  .report-section-group { grid-template-columns: 1fr !important; }
}

/* ============================================================
   STREAMING — cursor, spinner, botón detener
   ============================================================ */
.cursor {
  display: inline-block;
  width: 8px;
  margin-left: 2px;
  animation: cursor-blink 1s steps(2) infinite;
  color: var(--accent);
  font-weight: bold;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

.streaming-plain {
  font-family: var(--font-mono);
  font-size: 13.5px;
  white-space: pre-wrap;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin: 4px 0;
}

.tool-call.streaming { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.tool-call.streaming .tool-head { background: var(--accent-soft); }
.tool-call.streaming .tool-head .tool-icon { background: rgba(37, 99, 235, 0.15); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.tool-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin-left: auto;
  margin-right: 6px;
  animation: spin 0.7s linear infinite;
}

.tool-check {
  margin-left: auto;
  margin-right: 6px;
  color: var(--success, #15803d);
  font-weight: bold;
  font-size: 14px;
  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Streaming message shimmer */
.msg.assistant.is-streaming .msg-bubble {
  position: relative;
}
.msg.assistant.is-streaming .msg-bubble::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
  pointer-events: none;
  opacity: 0.4;
  animation: shimmerFade 2s ease infinite;
}
@keyframes shimmerFade { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.5; } }

/* Stop generation — handled by .send.stop-mode on the send button */

.msg-aborted {
  margin-top: 8px;
  padding: 8px 12px;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #78350f;
}

/* ============================================================
   CONVERSATION SEARCH
   ============================================================ */
.conv-search-wrap {
  position: relative;
  padding: 8px 12px 10px;
}
.conv-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
  flex-shrink: 0;
  overflow: visible;
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.2s;
}
.conv-search-wrap:focus-within .conv-search-icon {
  color: var(--accent);
}
.conv-search {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.conv-search:hover {
  border-color: var(--border-strong);
  background: var(--bg-input);
}
.conv-search:focus {
  border-color: var(--accent);
  background: var(--bg-input);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.conv-search::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}
.conv-empty {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* ============================================================
   LICENSE BADGE (sidebar)
   ============================================================ */
.license-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.license-badge:hover { background: var(--bg-hover); }
.license-icon { font-size: 13px; display: flex; }
.license-text { font-variant-numeric: tabular-nums; }
.license-badge.license-ok    { color: #22c55e; }
.license-badge.license-caution { color: #f59e0b; }
.license-badge.license-warning { color: #ef4444; }
.license-badge.license-expired { color: #ef4444; background: rgba(239,68,68,.08); }
html[data-theme="dark"] .license-badge.license-expired { background: rgba(239,68,68,.12); }

/* License status area (settings pane) */
.license-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.license-info-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}
.license-info-card.license-ok { border-left: 3px solid #22c55e; }
.license-info-card.license-caution { border-left: 3px solid #f59e0b; }
.license-info-card.license-warning { border-left: 3px solid #ef4444; }
.license-info-card.license-expired { border-left: 3px solid #ef4444; background: rgba(239,68,68,.05); }
.license-info-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.license-info-value.license-info-date { font-size: 15px; font-weight: 600; }
.license-info-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.license-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}
.license-status-dot.license-ok { background: #22c55e; }
.license-status-dot.license-caution { background: #f59e0b; }
.license-status-dot.license-warning { background: #ef4444; animation: pulse-dot 1.5s infinite; }
.license-status-dot.license-expired { background: #ef4444; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* License mode indicator */
.license-mode-indicator {
  margin-bottom: 10px;
}
.license-mode-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--accent-soft, rgba(99,102,241,.1));
  color: var(--accent, #6366f1);
  border: 1px solid var(--accent, #6366f1);
}

/* License history table */
.license-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.license-history-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}
.license-history-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.license-history-table tr:hover td {
  background: var(--bg-hover);
}

/* License expired banner */
.license-expired-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #fef2f2;
  border-bottom: 1px solid #fecaca;
  font-size: 13px;
  color: #991b1b;
  font-weight: 500;
}
.license-expired-banner.license-warn-banner {
  background: #fffbeb;
  border-bottom-color: #fde68a;
  color: #92400e;
}
html[data-theme="dark"] .license-expired-banner {
  background: rgba(239,68,68,.12);
  border-bottom-color: rgba(239,68,68,.25);
  color: #fca5a5;
}
html[data-theme="dark"] .license-expired-banner.license-warn-banner {
  background: rgba(245,158,11,.1);
  border-bottom-color: rgba(245,158,11,.2);
  color: #fcd34d;
}
.leb-icon { font-size: 16px; }
.view-as-banner .leb-text { flex: 1; min-width: 0; }
.view-as-banner .leb-link { flex: none; }
.leb-link {
  background: none;
  border: none;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  padding: 0;
}
.leb-link:hover { opacity: 0.8; }

/* Credit packages (buy modal) */
.credit-balance-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.credit-balance-label {
  font-size: 14px;
  color: var(--text-secondary);
}
.credit-balance-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.credit-packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.credit-package-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.credit-package-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.credit-package-card.popular {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.credit-package-badge {
  position: absolute;
  top: -10px; right: 16px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
}
.credit-package-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.credit-package-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.credit-package-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  margin: 8px 0 4px;
}
.credit-package-credits {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}
.credit-package-features {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.credit-package-features li::before {
  content: "✓ ";
  color: #22c55e;
  font-weight: 700;
}
.credit-buy-btn {
  margin-top: auto;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
}

.settings-shortcut {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  border-top: 1px solid var(--border);
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.settings-shortcut:hover {
  background: var(--bg-hover);
  color: var(--accent);
}

/* ============================================================
   QUICK ACTION CHIPS
   ============================================================ */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.quick-actions::before {
  content: "⚡";
  display: block;
  width: 100%;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-xl);
  background: var(--accent-soft, rgba(99,102,241,.08));
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  line-height: 1.3;
}
.quick-chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(99,102,241,.25);
}
.quick-chip:active {
  transform: translateY(0);
}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.notif-wrap {
  position: relative;
}
.notif-btn {
  position: relative;
  /* La base .icon-btn es display:none (solo se reactiva en móvil ≤768px).
     La campana debe verse SIEMPRE: es el único acceso a las notificaciones
     internas y a la activación de los avisos push. */
  display: flex;
}
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.notif-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 340px;
  max-height: 400px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}
.notif-mark-all {
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
}
.notif-list {
  overflow-y: auto;
  max-height: 350px;
}
.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.notif-item:hover {
  background: var(--bg-hover);
}
.notif-item.read {
  opacity: 0.6;
}
.notif-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.notif-content {
  flex: 1;
  min-width: 0;
}
.notif-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.notif-body {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
}
.notif-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
}
.notif-empty {
  padding: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* ============================================================
   EXPORT BUTTON (topbar)
   ============================================================ */
#exportConvBtn {
  opacity: 0.7;
  transition: opacity 0.15s;
}
#exportConvBtn:hover {
  opacity: 1;
}

/* ============================================================
   ADMIN DASHBOARD
   ============================================================ */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.dash-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.dash-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}
.dash-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.dash-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
  padding: 4px 0;
}
.dash-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.dash-bar::after {
  content: '';
  width: 100%;
  max-width: 32px;
  height: var(--h, 0%);
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}
.dash-bar-val {
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 2px;
}
.dash-bar-label {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 4px;
}
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dash-table th, .dash-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.dash-table th {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11px;
}
.log-level {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.conv-title-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.num { text-align: right; }
.usage-period {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* Anomaly result meta bar */
.anomaly-meta-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
}
.anomaly-count {
  font-weight: 600;
  color: var(--text);
}
.anomaly-delta {
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.anomaly-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}
.anomaly-delta-sm {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 4px;
}
.btn-sm {
  padding: 4px 10px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-sm.btn-primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.btn-sm.btn-primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
}
.btn-sm:hover, .btn-sm.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ============================================================
   SETTINGS — Datos Tab (Memory + Knowledge)
   ============================================================ */
.data-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  margin: 8px 0;
}
.data-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 13px;
}
.data-list-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-list-item .btn-icon { flex-shrink: 0; }

/* ============================================================
   CLOUD CARD — Brand Icon Colours
   ============================================================ */
.icon-gdrive   { color: #0F9D58; }
.icon-dropbox  { color: #0061FF; }
.icon-onedrive { color: #0078D4; }
.cloud-card-icon svg { width: 24px; height: 24px; }

/* Toast notifications */
#toastBox { position: fixed; top: 16px; right: 16px; z-index: 100000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { padding: 10px 18px; border-radius: 8px; font-size: 13px; color: #fff; opacity: 0; transform: translateX(40px); transition: opacity .25s, transform .25s; pointer-events: auto; max-width: 360px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.toast.show { opacity: 1; transform: translateX(0); }
.toast-success { background: #16a34a; }
.toast-error { background: #dc2626; }
.toast-info { background: #2563eb; }

/* Anomaly result modal */
.anomaly-result-body { max-height: 60vh; overflow-y: auto; font-size: 13.5px; line-height: 1.6; padding: 4px 0; }
.anomaly-result-body table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13px; }
.anomaly-result-body th { background: var(--accent); color: #fff; padding: 8px 12px; text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.anomaly-result-body td { padding: 7px 12px; border-bottom: 1px solid var(--border); }
.anomaly-result-body tr:hover td { background: rgba(99,102,241,0.04); }
.anomaly-result-body p { margin: 8px 0; }
.anomaly-result-body h2, .anomaly-result-body h3 { margin: 16px 0 6px; }
.anomaly-result-body strong { color: var(--text); }
.anomaly-result-body .table-wrap { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.anomaly-result-body .copy-table-btn { position: absolute; top: 4px; right: 4px; z-index: 2; background: rgba(255,255,255,0.8); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; cursor: pointer; font-size: 11px; }
.anomaly-catalog-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.anomaly-catalog-item:last-child { border-bottom: none; }
[data-theme="dark"] .anomaly-result-body th { background: var(--accent); }
[data-theme="dark"] .anomaly-result-body tr:hover td { background: rgba(99,102,241,0.08); }
[data-theme="dark"] .anomaly-result-body .copy-table-btn { background: rgba(30,30,30,0.8); }

/* ============================================================
   AUDIT EXPORT & MODEL ACL
   ============================================================ */
.audit-export-section { background: var(--bg); padding: 12px; border-radius: var(--radius); border: 1px solid var(--border); }
.audit-export-section label { font-size: 13px; font-weight: 500; }
.audit-export-section input[type="date"] { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; }

/* ============================================================
   INLINE PANEL PAGES (Users, Settings — full main area)
   ============================================================ */
.panel-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;          /* ocupa justo el hueco bajo la cabecera, los avisos y los KPIs (antes height:100% se salía) */
  min-height: 0;
  overscroll-behavior: contain;
  overflow-y: auto;
  overflow-x: hidden;
  animation: panelSlideIn .2s ease;
}
@keyframes panelSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.panel-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.panel-back-btn {
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-secondary);
  padding: 6px; border-radius: var(--radius-sm);
  cursor: pointer;
}
.panel-back-btn:hover { background: var(--bg-hover); color: var(--text); }
.panel-page-title {
  font-size: 17px; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.panel-page-title .icon { opacity: .7; }
.panel-page-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

/* ── Users panel grid ── */
.users-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .users-panel-grid { grid-template-columns: 1fr; }
}

/* ── User card ── */
.user-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow .15s;
}
.user-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.user-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-card-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  flex-shrink: 0;
}
.user-card-info { flex: 1; min-width: 0; }
.user-card-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-card-email {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-card-badges { flex-shrink: 0; }
.badge-admin {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: 11px; font-weight: 600;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.badge-user {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: 11px; font-weight: 600;
  border-radius: 10px;
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.badge-advanced {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: 11px; font-weight: 600;
  border-radius: 10px;
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
}
/* Role selector inside a user card footer */
.user-role-select-wrap {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-secondary);
}
.user-role-select-wrap select.role-select {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated, var(--bg-hover));
  color: var(--text-primary);
  font-size: 13px;
}
.btn-danger-subtle {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  padding: 4px 6px;
  cursor: pointer;
  transition: all .15s;
}
.btn-danger-subtle:hover {
  background: rgba(220,38,38,0.08);
  border-color: var(--danger);
  color: var(--danger);
}

/* Permissions collapse */
.user-card-perms {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.user-card-perms summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.user-card-perms summary .icon { opacity: .6; }
.user-card-perms summary::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  margin-left: auto;
  transition: transform .15s;
}
.user-card-perms[open] summary::after { transform: rotate(180deg); }

/* ── Module toggle (reusable across perms + module ACL) ── */
.mod-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 5px;
  margin-top: 8px;
}
.mod-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .12s;
  background: var(--bg);
  user-select: none;
}
.mod-toggle:hover { border-color: var(--accent); }
.mod-toggle.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.mod-toggle input[type="checkbox"] { display: none; }
.mod-toggle-icon {
  flex-shrink: 0;
  color: var(--text-muted);
  display: flex;
}
.mod-toggle.active .mod-toggle-icon { color: var(--accent); }
.mod-toggle-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── User card footer ── */
.user-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.user-card-footer-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.toggle-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.toggle-inline input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px; height: 15px;
  margin: 0;
  cursor: pointer;
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: 5px 10px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .12s;
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* ── New user form ── */
.new-user-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  max-width: 640px;
}
.new-user-section h4 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.form-grid-compact {
  display: grid;
  gap: 10px 16px;
}
.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) {
  .form-row-2col { grid-template-columns: 1fr; }
}
.form-grid-compact label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 500;
  gap: 4px;
  color: var(--text);
}
.form-grid-compact input[type="email"],
.form-grid-compact input[type="text"],
.form-grid-compact input[type="password"] {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}
.form-grid-compact input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 2px;
}
.new-user-perms-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.new-user-actions { margin-top: 14px; display: flex; gap: 8px; }
.form-hint { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }

/* ── Settings panel layout ── */
.settings-panel-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  height: 100%;
  overflow: hidden;
}
.settings-panel-tabs {
  display: flex;
  flex-direction: column;
  padding: 14px 12px 14px 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.settings-panel-content {
  padding: 18px 28px;
  overflow-y: auto;
  overflow-x: hidden;
}
@media (max-width: 768px) {
  .settings-panel-layout { grid-template-columns: 1fr; }
  .settings-panel-tabs {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0 0 8px 0;
    gap: 2px;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
  }
  .settings-panel-tabs .settings-tab { flex-shrink: 0; font-size: 12px; padding: 7px 10px; }
  .settings-panel-content { padding: 14px 4px 0 4px; }
}

/* ============================================================
   MODULE ACCESS MODAL — Simplified (module toggles)
   ============================================================ */
.modal:has(.module-acl-layout) { max-width: 720px; }
.module-acl-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.module-acl-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.module-acl-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.module-acl-section .help {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.4;
}
.module-acl-section .ops-grid {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 600px) {
  .module-acl-section .ops-grid { grid-template-columns: repeat(3, 1fr); }
}
.module-acl-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.btn-xs {
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.module-acl-filter {
  flex: 1;
  min-width: 120px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}
.module-acl-filter:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.modules-grid {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.module-acl-field-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.module-acl-field-label input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  max-width: 200px;
}
.module-acl-field-label input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.module-acl-blocked {
  background: rgba(234, 179, 8, 0.06);
  border-color: rgba(234, 179, 8, 0.3);
}
.module-acl-blocked-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.module-acl-blocked-list code {
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 2px 6px;
  background: rgba(234, 179, 8, 0.12);
  border-radius: 4px;
  color: var(--text-secondary);
}

/* ── Dark theme overrides ── */
[data-theme="dark"] .user-card { background: var(--bg-sidebar); border-color: var(--border); }
[data-theme="dark"] .new-user-section { background: var(--bg-sidebar); border-color: var(--border); }
[data-theme="dark"] .form-grid-compact input { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .mod-toggle { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .module-acl-section { background: var(--bg-sidebar); border-color: var(--border); }
[data-theme="dark"] .module-acl-filter { background: var(--bg); }
[data-theme="dark"] .module-acl-field-label input { background: var(--bg); }


/* ============================================================
   GLOBAL SIDEBAR SEARCH
   ============================================================ */
.sidebar-global-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 8px;
}
.sidebar-global-search .search-icon-svg { flex-shrink: 0; color: var(--text-muted); }
.sidebar-global-search input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 12.5px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.sidebar-global-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.sidebar-global-search input::placeholder {
  color: var(--text-tertiary);
}
.search-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.4;
  white-space: nowrap;
}

/* Global search results panel - REMOVED */
.global-search-results { display: none !important; }
.sidebar-global-search { position: relative; }

/* ============================================================
   Usage Page (full panel)
   ============================================================ */
.usage-page {
  padding: 24px 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.usage-page h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 1.3rem;
}
.usage-page h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 24px 0 12px;
  font-size: 1rem;
  color: var(--text);
}
.usage-page .panel-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.usage-page .table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.usage-page .table-scroll table { margin: 0; }
.usage-page .input-sm {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}
.usage-page .usage-page-summary { margin-bottom: 16px; }
.gsr-header {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 4px;
}
.gsr-header svg { opacity: 0.6; }
.gsr-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light, var(--border));
  transition: background 0.1s;
}
.gsr-item:last-child { border-bottom: none; }
.gsr-item:hover { background: var(--bg-hover, var(--accent-soft)); }
.gsr-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gsr-snippet {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gsr-snippet mark {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  border-radius: 2px;
  padding: 0 1px;
}
.gsr-meta {
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.gsr-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}


/* ============================================================
   FULLSCREEN MODE
   ============================================================ */
body.fullscreen-mode .sidebar {
  display: none !important;
}
body.fullscreen-mode .resizer {
  display: none !important;
}
body.fullscreen-mode .layout {
  grid-template-columns: 1fr !important;
}


/* ============================================================
   DRAG & DROP
   ============================================================ */
.conv-item[draggable="true"] {
  cursor: grab;
}
.conv-item[draggable="true"]:active {
  cursor: grabbing;
}
.conv-item.dragging {
  opacity: 0.4;
  transform: scale(0.97);
}
.drop-target-hint {
  border: 1px dashed var(--accent-soft) !important;
  border-radius: var(--radius-sm);
}
.drop-over {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}


/* ============================================================
   TEMPLATE EDITOR (markdown + variables)
   ============================================================ */
.tpl-editor-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tpl-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.tpl-toolbar .btn-sm {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tpl-toolbar .btn-sm:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.tpl-toolbar-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 4px;
}
.tpl-textarea {
  width: 100%;
  min-height: 140px;
  font-family: var(--font-mono);
  font-size: 13px;
  resize: vertical;
}
.tpl-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  min-height: 140px;
  background: var(--bg);
  font-size: 13px;
  line-height: 1.6;
  overflow-y: auto;
}
.tpl-var-highlight {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ============================================================
   EMBED MODE — compact view for Odoo iframe bubble
   ============================================================ */
body.embed-mode .sidebar,
body.embed-mode .topbar,
body.embed-mode .kpi-bar,
body.embed-mode #toggleSidebar,
body.embed-mode #sidebarResizer {
  display: none !important;
}

body.embed-mode .app {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}

body.embed-mode .main {
  border-radius: 0;
  height: 100vh;
}

body.embed-mode .composer {
  border-radius: 0 0 0 0;
}

body.embed-mode .chat-header {
  padding: 8px 12px;
  font-size: 13px;
}

body.embed-mode .messages {
  padding: 8px;
}

/* ── Bulk-select mode for conversations ────────────── */
.conv-bulk-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-secondary, #1e1e2e);
  border-top: 1px solid var(--border, #333);
  position: sticky;
  bottom: 0;
}
.conv-bulk-bar .btn-sm {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.conv-bulk-bar .btn-secondary {
  background: var(--bg-tertiary, #2a2a3c);
  color: var(--text-secondary, #aaa);
}
.conv-bulk-bar .btn-danger {
  background: #dc3545;
  color: #fff;
}
.conv-bulk-bar .btn-danger:disabled {
  opacity: .4;
  cursor: default;
}
.conv-bulk-bar .btn-ghost {
  background: none;
  color: var(--text-secondary, #888);
  font-size: 14px;
  padding: 4px 6px;
}

/* Checkbox in conversation items */
.conv-checkbox {
  width: 15px;
  height: 15px;
  min-width: 15px;
  accent-color: var(--accent, #7c3aed);
  cursor: pointer;
  margin-right: 4px;
  flex-shrink: 0;
}
.conv-item.selected {
  background: rgba(124, 58, 237, 0.12);
}
.conv-list.select-mode .conv-more {
  display: none;
}
.conv-list.select-mode .conv-item {
  cursor: pointer;
}

/* Select mode button active state */
#convSelectModeBtn.active {
  background: var(--accent, #7c3aed);
  color: #fff;
  border-radius: 4px;
}

/* ============================================================
   WORKFLOWS — Automatizaciones
   ============================================================ */

/* Sidebar items */
.wf-item { position: relative; min-width: 0; }
.wf-icon { font-size: 13px; margin-right: 2px; flex-shrink: 0; }
.wf-badge {
  font-size: 9px; padding: 1px 5px; border-radius: 8px; margin-left: 4px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  flex-shrink: 0; white-space: nowrap;
}
.wf-badge.wf-active { background: #dcfce7; color: #15803d; }
.wf-badge.wf-paused { background: #fef3c7; color: #92400e; }
.wf-badge.wf-error { background: #fee2e2; color: #b91c1c; }
@media (prefers-color-scheme: dark) {
  .wf-badge.wf-active { background: #14532d; color: #86efac; }
  .wf-badge.wf-paused { background: #78350f; color: #fcd34d; }
  .wf-badge.wf-error { background: #7f1d1d; color: #fca5a5; }
}

/* Sidebar workflow action buttons */
.wf-toggle-btn, .wf-dup-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 2px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.wf-toggle-btn:hover { color: #f59e0b; background: rgba(245,158,11,.1); }
.wf-dup-btn:hover { color: #8b5cf6; background: rgba(139,92,246,.1); }

/* Detail panel */
.wf-description { color: var(--text-secondary); margin-bottom: 16px; font-size: 14px; }
.wf-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
.wf-detail-card {
  background: var(--bg-secondary, #f8fafc); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
}
.wf-detail-card h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-secondary); margin: 0 0 6px; display: flex; align-items: center; gap: 5px;
}
.wf-detail-card p { margin: 0; font-size: 14px; font-weight: 500; }
.wf-detail-section { margin-bottom: 20px; }
.wf-detail-section h4 {
  font-size: 13px; margin: 0 0 8px; display: flex; align-items: center; gap: 5px;
  color: var(--text-secondary);
}
.wf-detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-detail-chip {
  background: var(--bg-secondary, #f1f5f9); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; font-size: 12px; font-family: var(--font-mono, monospace);
}

/* History timeline */
.wf-history-timeline { display: flex; flex-direction: column; gap: 8px; }
.wf-history-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--bg-secondary, #f8fafc); border-radius: 8px; font-size: 13px;
  border-left: 3px solid var(--border);
}
.wf-history-icon { font-size: 16px; flex-shrink: 0; }
.wf-history-date { color: var(--text-secondary); min-width: 140px; }
.wf-history-stats { font-weight: 500; }
.wf-history-summary { color: var(--text-secondary); font-size: 12px; margin-left: auto; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dry run */
.wf-dry-run-result {
  margin-top: 16px; padding: 16px; background: var(--bg-secondary);
  border: 1px solid var(--accent); border-radius: 10px;
}
.wf-dry-run-result h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 5px; }
.wf-preview-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.wf-preview-item {
  padding: 4px 10px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px;
}

/* Wizard */
.wf-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: 28px; padding: 12px 0;
}
.wf-step {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary); opacity: .5;
  transition: opacity .2s;
}
.wf-step.active { opacity: 1; color: var(--accent); font-weight: 600; }
.wf-step.done { opacity: .8; color: var(--text); }
.wf-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--bg-secondary); border: 2px solid var(--border);
}
.wf-step.active .wf-step-num { background: var(--accent); color: #fff; border-color: var(--accent); }
.wf-step.done .wf-step-num { background: #dcfce7; color: #15803d; border-color: #86efac; }
.wf-step-label { font-size: 12px; }
.wf-step-line { width: 32px; height: 2px; background: var(--border); margin: 0 4px; }

.wf-wizard-section { max-width: 700px; margin: 0 auto; }
.wf-wizard-section h3 { font-size: 18px; margin: 0 0 4px; }
.wf-wizard-section .muted { color: var(--text-secondary); font-size: 13px; margin-bottom: 16px; }

/* Model grid */
.wf-model-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin-top: 12px;
}
.wf-model-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 18px 12px;
  background: var(--bg-secondary); border: 2px solid var(--border);
  border-radius: 12px; cursor: pointer; transition: all .15s;
  text-align: center;
}
.wf-model-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.wf-model-card.wf-model-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary)); }
.wf-model-icon { font-size: 28px; }
.wf-model-name { font-size: 12px; font-weight: 600; }

/* Template grid */
.wf-tpl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px; margin-top: 12px;
}
.wf-tpl-card {
  display: flex; flex-direction: column; gap: 4px; padding: 14px;
  background: var(--bg-secondary); border: 2px solid var(--border);
  border-radius: 10px; cursor: pointer; transition: all .15s;
}
.wf-tpl-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.wf-tpl-icon { font-size: 20px; }
.wf-tpl-name { font-size: 13px; font-weight: 600; }
.wf-tpl-desc { font-size: 11px; color: var(--text-secondary); }

/* Condition rows */
.wf-cond-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.wf-cond-row {
  display: flex; gap: 6px; align-items: center;
  padding: 8px 10px; background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: 8px;
}
.wf-cond-row select, .wf-cond-row input {
  flex: 1; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px; background: var(--bg);
  color: var(--text);
}
.wf-cond-del {
  width: 24px; height: 24px; border: none; background: none;
  color: var(--text-secondary); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.wf-cond-del:hover { background: #fecaca; color: #dc2626; }

/* Preview count */
.wf-preview-count { margin-top: 12px; }
.wf-preview-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px; background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border: 1px solid var(--accent); border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--accent);
}

/* Action rows */
.wf-act-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.wf-act-row {
  padding: 10px 12px; background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: 8px;
}
.wf-act-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.wf-act-header select { flex: 1; }
.wf-act-body-inner {
  display: flex; flex-direction: column; gap: 6px;
}
.wf-act-body-inner select,
.wf-act-body-inner input,
.wf-act-body-inner textarea {
  padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 12px; background: var(--bg);
  color: var(--text); width: 100%; box-sizing: border-box;
}
.wf-act-body-inner textarea { resize: vertical; font-family: inherit; }

/* Summary step */
.wf-summary-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px;
}
.wf-form-group { display: flex; flex-direction: column; gap: 4px; }
.wf-form-group label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.wf-form-group input,
.wf-form-group select {
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; background: var(--bg); color: var(--text);
}
.wf-summary-preview {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px;
}
.wf-summary-preview h4 { font-size: 14px; margin: 0 0 8px; }
.wf-summary-box p { margin: 4px 0; font-size: 13px; display: flex; align-items: center; gap: 6px; }

/* Wizard nav */
.wf-wizard-nav {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border);
  max-width: 700px; margin-left: auto; margin-right: auto;
}

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 38px; height: 20px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border); border-radius: 20px; transition: .2s;
}
.toggle-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px;
  left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: .2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

@media (max-width: 600px) {
  .wf-model-grid { grid-template-columns: repeat(2, 1fr); }
  .wf-summary-grid { grid-template-columns: 1fr; }
  .wf-steps { flex-wrap: wrap; gap: 4px; }
  .wf-step-label { display: none; }
}

/* ── Wizard step transition animations ── */
.wf-wizard-body {
  animation: wfStepFadeIn .35s cubic-bezier(.4,0,.2,1);
}
@keyframes wfStepFadeIn {
  0%   { opacity: 0; transform: translateX(24px); }
  100% { opacity: 1; transform: translateX(0); }
}
.wf-model-card { animation: wfCardPop .25s cubic-bezier(.34,1.56,.64,1) both; }
.wf-model-card:nth-child(1) { animation-delay: .02s; }
.wf-model-card:nth-child(2) { animation-delay: .05s; }
.wf-model-card:nth-child(3) { animation-delay: .08s; }
.wf-model-card:nth-child(4) { animation-delay: .11s; }
.wf-model-card:nth-child(5) { animation-delay: .14s; }
.wf-model-card:nth-child(6) { animation-delay: .17s; }
.wf-model-card:nth-child(7) { animation-delay: .20s; }
.wf-model-card:nth-child(8) { animation-delay: .23s; }
@keyframes wfCardPop {
  0%   { opacity: 0; transform: scale(.85) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.wf-tpl-card { animation: wfCardPop .3s cubic-bezier(.34,1.56,.64,1) both; }
.wf-tpl-card:nth-child(1) { animation-delay: .05s; }
.wf-tpl-card:nth-child(2) { animation-delay: .10s; }
.wf-tpl-card:nth-child(3) { animation-delay: .15s; }
.wf-tpl-card:nth-child(4) { animation-delay: .20s; }
.wf-tpl-card:nth-child(5) { animation-delay: .25s; }
.wf-cond-row, .wf-act-row {
  animation: wfRowSlide .25s ease both;
}
@keyframes wfRowSlide {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Step indicator pulse on active */
.wf-step.active .wf-step-num {
  animation: wfPulse 2s ease-in-out infinite;
}
@keyframes wfPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.3); }
  50% { box-shadow: 0 0 0 6px rgba(37,99,235,0); }
}

/* ── Email template editor ── */
.wf-email-editor { display: flex; flex-direction: column; gap: 0; }
.wf-email-toolbar {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-bottom: none; border-radius: 6px 6px 0 0; flex-wrap: wrap;
}
.wf-toolbar-label { font-size: 10px; color: var(--text-secondary); white-space: nowrap; }
.wf-var-btns { display: flex; flex-wrap: wrap; gap: 3px; }
.wf-var-btn {
  padding: 2px 6px; font-size: 10px; font-family: var(--font-mono, monospace);
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; color: var(--accent); transition: all .15s;
}
.wf-var-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.wf-email-editor .wf-act-body {
  border-radius: 0 0 6px 6px !important; border-top: 1px solid var(--border) !important;
  min-height: 80px; font-family: var(--font-mono, monospace) !important; font-size: 12px !important;
  line-height: 1.5;
}
.wf-email-preview-toggle { text-align: right; margin-top: 4px; }
.wf-email-preview {
  margin-top: 8px; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; animation: wfStepFadeIn .25s ease;
}
.wf-email-mock {
  font-family: system-ui, sans-serif; font-size: 13px; background: #fff; color: #1a1a1a;
  border-radius: 6px;
}
.wf-email-mock-header {
  padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid #e5e7eb;
  font-size: 12px; color: #6b7280; display: flex; flex-direction: column; gap: 2px;
}
.wf-email-mock-subject { color: #1a1a1a; }
.wf-email-mock-body { padding: 16px; line-height: 1.6; white-space: pre-wrap; }
@media (prefers-color-scheme: dark) {
  .wf-email-mock { background: #1e1e2e; color: #e2e8f0; }
  .wf-email-mock-header { background: #2d2d3f; border-bottom-color: #3f3f5a; color: #94a3b8; }
  .wf-email-mock-subject { color: #e2e8f0; }
}
.wf-var-highlight {
  background: #fef3c7; color: #92400e; padding: 1px 4px; border-radius: 3px;
  font-weight: 600; font-size: 12px;
}

/* ── Smart condition value inputs ── */
.wf-cond-val-wrap {
  display: flex; align-items: center; gap: 6px;
}
.wf-cond-val-days {
  width: 80px !important; text-align: center;
}
.wf-cond-val-suffix {
  font-size: 13px; color: var(--text-muted); white-space: nowrap;
}
.wf-cond-row select.wf-cond-val {
  min-width: 140px; max-width: 200px;
}

/* ── Tips box ── */
.wf-tips-box {
  margin-top: 16px; padding: 12px 16px;
  background: var(--bg-secondary); border-radius: 10px;
  border: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px;
}
.wf-tip {
  font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 8px;
}

/* ── Empty state ── */
.wf-empty-state {
  text-align: center; padding: 32px 16px; color: var(--text-muted);
  border: 2px dashed var(--border); border-radius: 12px; margin: 12px 0;
}
.wf-empty-icon { font-size: 36px; display: block; margin-bottom: 8px; }
.wf-empty-state p { margin: 0 0 12px; }

/* ── Action type cards (empty state) ── */
.wf-action-types-grid {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px;
}
.wf-action-type-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 16px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; font-size: 12px; min-width: 120px;
}
.wf-at-icon { font-size: 24px; }

/* ── Action row enhancements ── */
.wf-act-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.wf-act-field-group {
  display: flex; flex-direction: column; gap: 4px; margin-top: 8px;
}
.wf-act-label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  display: flex; align-items: center; gap: 4px;
}
.wf-act-value-hint {
  font-size: 11px; color: var(--text-muted); margin-top: 2px; font-style: italic;
}
.wf-warning-box {
  padding: 10px 14px; background: #fef3c7; color: #92400e;
  border-radius: 8px; font-size: 13px; display: flex; align-items: center; gap: 6px;
  margin-top: 8px;
}

/* ── Summary card (Step 4) ── */
.wf-summary-card {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px; margin-bottom: 20px;
}
.wf-summary-card-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.wf-summary-card-icon { font-size: 28px; }
.wf-summary-card-header strong { font-size: 16px; display: block; }
.wf-summary-card-header .muted { font-size: 12px; }
.wf-summary-section { margin-bottom: 14px; }
.wf-summary-section h5 {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  margin: 0 0 8px; display: flex; align-items: center; gap: 6px;
}
.wf-summary-rule {
  display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 13px; flex-wrap: wrap;
}
.wf-summary-field {
  font-weight: 600; color: var(--accent);
}
.wf-summary-op { color: var(--text-muted); }
.wf-summary-val {
  background: var(--bg); padding: 2px 8px; border-radius: 4px; font-weight: 500;
}
.wf-summary-action {
  display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px;
}
.wf-sa-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}

/* ── Config grid (Step 4) ── */
.wf-config-grid {
  display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px;
}
.wf-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 600px) {
  .wf-form-row { grid-template-columns: 1fr; }
}
.wf-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; padding: 0; font-weight: 600; font-size: 13px;
}
.wf-toggle-row span { display: flex; align-items: center; gap: 6px; }
.wf-ai-section {
  background: linear-gradient(135deg, rgba(139,92,246,.06), rgba(59,130,246,.06));
  padding: 14px; border-radius: 10px; border: 1px solid rgba(139,92,246,.15);
}
#wfAiPromptWrap { margin-top: 10px; }
#wfAiPrompt {
  width: 100%; font-size: 13px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text);
  resize: vertical;
}

/* ── Schedule preview ── */
.wf-schedule-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--bg-secondary);
  border-radius: 8px; font-size: 13px; color: var(--text-muted);
  margin-bottom: 16px;
}

/* ── Dry-run section ── */
.wf-dryrun-section { margin-top: 8px; }
.wf-dryrun-ok {
  margin-top: 10px; padding: 10px 14px; background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.2); border-radius: 8px; font-size: 13px;
  color: #166534;
}
.wf-dryrun-err {
  margin-top: 10px; padding: 10px 14px; background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2); border-radius: 8px; font-size: 13px;
  color: #991b1b;
}
.wf-loading {
  display: flex; align-items: center; gap: 8px; padding: 10px 0;
  font-size: 13px; color: var(--text-muted);
}
.wf-loading .icon { animation: spin 1s linear infinite; }

/* ── AI Chat Drawer (FAB + panel) ── */
.wf-ai-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 1000;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(99,102,241,.4);
  transition: transform .2s, box-shadow .2s;
}
.wf-ai-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(99,102,241,.55); }
.wf-ai-fab:active { transform: scale(.96); }

.wf-ai-drawer {
  position: fixed; bottom: 90px; right: 24px; z-index: 1001;
  width: 420px; max-width: calc(100vw - 48px);
  max-height: 70vh; height: 560px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 16px; display: flex; flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,.18);
  overflow: hidden;
  animation: wf-ai-slide-up .25s ease-out;
}
@keyframes wf-ai-slide-up { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }

.wf-ai-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-weight: 600; font-size: 13px; gap: 8px;
}
.wf-ai-drawer-header .icon { color: #fff; }
.wf-ai-drawer-close {
  background: none; border: none; color: #fff; font-size: 18px;
  cursor: pointer; padding: 0; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.wf-ai-drawer-close:hover { background: rgba(255,255,255,.15); }

.wf-ai-drawer-messages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 12px;
}

.wf-ai-msg { display: flex; gap: 10px; align-items: flex-start; }
.wf-ai-msg-user { flex-direction: row-reverse; }
.wf-ai-msg-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: var(--bg-secondary);
}
.wf-ai-msg-bubble {
  max-width: 85%; padding: 10px 14px; border-radius: 14px;
  font-size: 13px; line-height: 1.55; word-break: break-word;
}
.wf-ai-msg-assistant .wf-ai-msg-bubble {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.wf-ai-msg-user .wf-ai-msg-bubble {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border-bottom-right-radius: 4px;
}
.wf-ai-msg-error { color: #ef4444 !important; }
.wf-ai-typing { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.wf-ai-typing .icon { animation: spin 1s linear infinite; }

.wf-ai-code {
  background: var(--bg-tertiary, #1e1e2e); color: #a5d6ff;
  padding: 10px 12px; border-radius: 8px; font-size: 11px;
  overflow-x: auto; margin: 8px 0; white-space: pre-wrap;
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  border: 1px solid var(--border);
}

.wf-ai-apply-wrap { margin-top: 10px; }
.wf-ai-apply-btn { display: inline-flex; align-items: center; gap: 6px; }

.wf-ai-drawer-input {
  display: flex; gap: 8px; padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.wf-ai-drawer-input textarea {
  flex: 1; resize: none; border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; font-size: 13px;
  font-family: inherit; background: var(--bg-secondary); color: var(--text);
  outline: none; transition: border-color .2s;
}
.wf-ai-drawer-input textarea:focus { border-color: #6366f1; }
.wf-ai-send {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform .15s;
}
.wf-ai-send:hover { transform: scale(1.08); }
.wf-ai-send:active { transform: scale(.95); }

@media (max-width: 600px) {
  .wf-ai-drawer { right: 8px; bottom: 80px; width: calc(100vw - 16px); }
  .wf-ai-fab { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}

/* ── Warning box (no action fields) ── */
.wf-warning-box {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.2); border-radius: 8px;
  font-size: 13px; color: #92400e;
}

/* ═══════════════════════════════════════════════════════════
   AI Workflow Chat — Full-panel conversational builder
   ═══════════════════════════════════════════════════════════ */
.wfc-header { display: flex; align-items: center; gap: 12px; }
.wfc-header h2 { flex: 1; display: flex; align-items: center; gap: 8px; }
.wfc-header h2 .icon { color: #8b5cf6; }

.wfc-body {
  display: flex; flex-direction: column; height: calc(100vh - 60px);
  overflow: hidden;
}
.wfc-messages {
  flex: 1; overflow-y: auto; padding: 24px; padding-bottom: 8px;
  scroll-behavior: smooth;
}

/* Welcome screen */
.wfc-welcome {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: 40px 20px; min-height: 50vh;
}
.wfc-welcome-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.12));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.wfc-welcome-icon .icon { color: #8b5cf6; }
.wfc-welcome h3 { font-size: 22px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.wfc-welcome-sub { color: var(--text-muted); font-size: 14px; max-width: 480px; line-height: 1.6; margin: 0 0 28px; }

.wfc-suggestions {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 640px; margin-bottom: 24px;
}
.wfc-suggestion {
  padding: 10px 16px; border-radius: 12px; font-size: 13px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; text-align: left;
  transition: all .2s; line-height: 1.4;
}
.wfc-suggestion:hover {
  border-color: #8b5cf6; background: rgba(139,92,246,.06);
  transform: translateY(-1px); box-shadow: 0 2px 8px rgba(139,92,246,.1);
}

.wfc-models-hint {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center; max-width: 600px;
}
.wfc-models-label { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.wfc-model-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.wfc-chip { padding: 4px 10px; border-radius: 8px; font-size: 11px; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); cursor: pointer; transition: all .15s; }
.wfc-chip:hover { border-color: #8b5cf6; color: var(--text); background: rgba(139,92,246,.05); }

/* Messages */
.wfc-msg { display: flex; gap: 10px; margin-bottom: 16px; align-items: flex-start; max-width: 720px; }
.wfc-msg-user { flex-direction: row-reverse; margin-left: auto; }
.wfc-msg-avatar {
  width: 32px; height: 32px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.wfc-msg-bubble {
  padding: 12px 16px; border-radius: 16px; font-size: 14px;
  line-height: 1.6; word-break: break-word; max-width: calc(100% - 50px);
}
.wfc-msg-ai .wfc-msg-bubble {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-top-left-radius: 4px;
}
.wfc-msg-user .wfc-msg-bubble {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border-top-right-radius: 4px;
}
.wfc-msg-error { color: #ef4444 !important; border-color: rgba(239,68,68,.2) !important; background: rgba(239,68,68,.05) !important; }
.wfc-msg-success { background: rgba(34,197,94,.06) !important; border-color: rgba(34,197,94,.2) !important; }

/* Typing animation */
.wfc-typing { display: flex; align-items: center; gap: 5px; padding: 4px 0; }
.wfc-typing span {
  width: 8px; height: 8px; border-radius: 50%;
  background: #8b5cf6; opacity: .4;
  animation: wfc-bounce .6s ease-in-out infinite;
}
.wfc-typing span:nth-child(2) { animation-delay: .15s; }
.wfc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wfc-bounce {
  0%, 100% { transform: translateY(0); opacity: .4; }
  50% { transform: translateY(-6px); opacity: 1; }
}

.wfc-code {
  background: #1e1e2e; color: #a5d6ff; padding: 10px 14px;
  border-radius: 10px; font-size: 12px; overflow-x: auto;
  margin: 10px 0; white-space: pre-wrap;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  border: 1px solid rgba(255,255,255,.06);
}

/* Workflow preview card */
.wfc-workflow-card {
  margin-top: 14px; padding: 0; border-radius: 14px;
  border: 1px solid rgba(139,92,246,.25);
  background: linear-gradient(135deg, rgba(99,102,241,.04), rgba(139,92,246,.04));
  overflow: hidden;
}
.wfc-card-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: rgba(139,92,246,.06);
  border-bottom: 1px solid rgba(139,92,246,.12);
}
.wfc-card-icon { font-size: 28px; }
.wfc-card-title { display: flex; flex-direction: column; gap: 2px; }
.wfc-card-title strong { font-size: 15px; }
.wfc-card-model { font-size: 11px; color: var(--text-muted); }
.wfc-card-desc { padding: 8px 16px 0; font-size: 13px; color: var(--text-muted); margin: 0; }
.wfc-card-section { padding: 10px 16px 4px; }
.wfc-card-section-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted); display: flex;
  align-items: center; gap: 4px; margin-bottom: 6px;
}
.wfc-card-rule, .wfc-card-action {
  font-size: 13px; padding: 4px 0; display: flex; align-items: center; gap: 6px; line-height: 1.4;
}
.wfc-card-rule .icon { color: #8b5cf6; flex-shrink: 0; }
.wfc-card-footer {
  padding: 8px 16px; font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
  border-top: 1px solid rgba(139,92,246,.1); margin-top: 4px;
}
.wfc-card-buttons {
  padding: 12px 16px; display: flex; gap: 8px; align-items: center;
  border-top: 1px solid rgba(139,92,246,.1);
}
.wfc-create-btn { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Input area */
.wfc-input-area {
  padding: 12px 24px 20px; border-top: 1px solid var(--border);
  background: var(--bg);
}
.wfc-input-wrap {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 16px; padding: 8px 8px 8px 16px;
  transition: border-color .2s, box-shadow .2s;
}
.wfc-input-wrap:focus-within {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139,92,246,.1);
}
.wfc-input-wrap textarea {
  flex: 1; border: none; background: none; color: var(--text);
  font-size: 14px; font-family: inherit; resize: none; outline: none;
  min-height: 24px; max-height: 120px; line-height: 1.5;
  padding: 4px 0;
}
.wfc-send-btn {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, opacity .15s;
}
.wfc-send-btn:hover { transform: scale(1.06); }
.wfc-send-btn:active { transform: scale(.94); }
.wfc-send-btn:disabled { opacity: .5; cursor: default; transform: none; }

@media (max-width: 600px) {
  .wfc-messages { padding: 16px; }
  .wfc-input-area { padding: 8px 12px 12px; }
  .wfc-welcome { padding: 20px 12px; min-height: 40vh; }
  .wfc-welcome h3 { font-size: 18px; }
  .wfc-msg { max-width: 100%; }
  .wfc-workflow-card { font-size: 12px; }
}

/* ── Sparkline chart ── */
.wf-sparkline-wrap {
  height: 100px; padding: 8px 4px; background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: 10px;
}

/* ── History enhancements ── */
.wf-history-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;
}
.wf-history-header h4 { margin: 0; }
.wf-history-export { display: flex; gap: 4px; }
.wf-history-item {
  transition: background .15s, transform .15s;
}
.wf-history-item:hover { background: var(--bg); transform: translateX(2px); }
.wf-history-error { border-left-color: #ef4444 !important; background: rgba(239,68,68,.03); }
.wf-history-success { border-left-color: #22c55e !important; }

/* ── Sidebar workflow item hover shine ── */
.wf-item::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.06) 45%, transparent 50%);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.wf-item:hover::after { opacity: 1; }

/* Loader spin for workflow buttons */
.anomaly-run-btn .icon, .wf-wizard-nav .icon {
  transition: none;
}
button:disabled .icon {
  animation: spin .8s linear infinite;
}

/* ============================================================
   PIPELINES — Multi-agent orchestration
   ============================================================ */

/* Sidebar items */
.pipe-item { position: relative; min-width: 0; }
.pipe-item .conv-title { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pipe-icon { font-size: 13px; margin-right: 2px; flex-shrink: 0; }
.pipe-steps-badge {
  font-size: 9px; padding: 1px 5px; border-radius: 8px; margin-left: auto;
  font-weight: 600; background: #ede9fe; color: #7c3aed; flex-shrink: 0; white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .pipe-steps-badge { background: #3b1d7a; color: #c4b5fd; }
}
.pipe-item:hover .anomaly-actions { opacity: 1; }
.pipe-item:hover .conv-delete-btn { opacity: 1; }
.pipe-item::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgba(139,92,246,.06) 45%, transparent 50%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.pipe-item:hover::after { opacity: 1; }

/* ──────────────────────────────────────────────
   Pipeline Picker — Redesigned
   ────────────────────────────────────────────── */

/* Wrapper */
.pipe-picker-wrap { max-width: 960px; margin: 0 auto; padding: 0 16px 32px; }

/* Sticky header area */
.pipe-picker-sticky {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); padding: 20px 0 12px;
  border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.pipe-picker-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pipe-picker-badge {
  font-size: 11px; font-weight: 700; background: var(--accent); color: #fff;
  border-radius: 10px; padding: 1px 8px;
}

/* Search bar */
.pipe-search-wrap {
  position: relative; margin-bottom: 10px;
}
.pipe-search-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.pipe-search {
  width: 100%; padding: 10px 14px 10px 36px;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--bg-secondary); font-size: 13px; color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.pipe-search:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

/* Filter chips */
.pipe-chips-row {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 0;
  scrollbar-width: none;
}
.pipe-chips-row::-webkit-scrollbar { display: none; }
.pipe-chip {
  flex-shrink: 0; padding: 5px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600; border: 1.5px solid var(--border);
  background: var(--bg); color: var(--text-secondary); cursor: pointer;
  transition: all .2s; display: flex; align-items: center; gap: 4px;
}
.pipe-chip:hover { border-color: var(--text-muted); }
.pipe-chip.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.pipe-chip.active[style] {
  background: var(--chip-color); border-color: var(--chip-color);
}
.pipe-chip-n {
  background: rgba(0,0,0,.12); border-radius: 8px; padding: 0 5px;
  font-size: 10px; line-height: 1.6;
}
.pipe-chip.active .pipe-chip-n { background: rgba(255,255,255,.25); }

/* Body area */
.pipe-picker-body { }

/* No results */
.pipe-no-results {
  text-align: center; padding: 60px 20px; color: var(--text-muted);
}

/* ── Category sections ── */
.pipe-cat-section { margin-bottom: 24px; }
.pipe-cat-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--bg-secondary); border-radius: 12px;
  border: 1px solid var(--border); position: relative;
  overflow: hidden; transition: background .2s;
  user-select: none;
}
.pipe-cat-header:hover { background: var(--bg-hover); }
.pipe-cat-color-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 12px 0 0 12px;
}
.pipe-cat-icon { font-size: 22px; flex-shrink: 0; margin-left: 4px; }
.pipe-cat-info { flex: 1; min-width: 0; }
.pipe-cat-label { font-size: 14px; font-weight: 700; }
.pipe-cat-desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.pipe-cat-count {
  font-size: 11px; font-weight: 700; color: #fff;
  border-radius: 10px; padding: 2px 9px; flex-shrink: 0;
}
.pipe-cat-chevron {
  flex-shrink: 0; transition: transform .25s; color: var(--text-muted);
  display: flex;
}
.pipe-cat-section.collapsed .pipe-cat-chevron { transform: rotate(-90deg); }
.pipe-cat-body {
  max-height: 600px; overflow: hidden; transition: max-height .3s ease, opacity .2s;
  opacity: 1;
}
.pipe-cat-section.collapsed .pipe-cat-body {
  max-height: 0; opacity: 0;
}

/* ── Template cards ── */
.pipe-tpl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; padding: 4px 0;
}
.pipe-tpl-card {
  border: 1.5px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: all .22s; background: var(--bg);
  display: flex; flex-direction: row; overflow: hidden;
  animation: wfCardPop .3s cubic-bezier(.34,1.56,.64,1) both;
}
.pipe-tpl-card:hover {
  border-color: var(--cat-color, var(--accent));
  box-shadow: 0 6px 24px color-mix(in srgb, var(--cat-color, var(--accent)) 15%, transparent);
  transform: translateY(-3px);
}
.pipe-tpl-accent {
  width: 5px; flex-shrink: 0; background: var(--cat-color, var(--accent));
  transition: width .2s;
}
.pipe-tpl-card:hover .pipe-tpl-accent { width: 6px; }
.pipe-tpl-body {
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0;
}
.pipe-tpl-card:nth-child(1) { animation-delay: .03s; }
.pipe-tpl-card:nth-child(2) { animation-delay: .06s; }
.pipe-tpl-card:nth-child(3) { animation-delay: .09s; }
.pipe-tpl-card:nth-child(4) { animation-delay: .12s; }
.pipe-tpl-card:nth-child(5) { animation-delay: .15s; }
.pipe-tpl-card:nth-child(6) { animation-delay: .18s; }
.pipe-tpl-head { display: flex; align-items: center; gap: 8px; }
.pipe-tpl-icon { font-size: 22px; flex-shrink: 0; }
.pipe-tpl-name { font-size: 13px; font-weight: 600; flex: 1; }
.pipe-tpl-desc {
  font-size: 11px; color: var(--text-muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pipe-tpl-meta {
  display: flex; gap: 6px; align-items: center; margin-top: auto; flex-wrap: wrap;
}
.pipe-tpl-steps {
  font-size: 10px; padding: 2px 7px; border-radius: 8px;
  background: #ede9fe; color: #7c3aed; font-weight: 600;
}
.pipe-tpl-gate {
  font-size: 10px; padding: 2px 6px; border-radius: 8px;
  background: #fef3c7; color: #92400e; font-weight: 600;
}
.pipe-tpl-est {
  font-size: 10px; color: var(--text-muted); margin-left: auto;
}
@media (prefers-color-scheme: dark) {
  .pipe-tpl-steps { background: #3b1d7a; color: #c4b5fd; }
  .pipe-tpl-gate { background: #422006; color: #fbbf24; }
}

/* ── Preview modal (ppv-*) ── */
.ppv { }
.ppv-cat-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--cat-color) 12%, transparent);
  color: var(--cat-color); margin-bottom: 12px;
}
.ppv-desc {
  font-size: 13px; line-height: 1.55; color: var(--text-secondary); margin-bottom: 16px;
}
.ppv-stats {
  display: flex; gap: 0; margin-bottom: 20px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.ppv-stat {
  flex: 1; text-align: center; padding: 10px 8px;
  border-right: 1px solid var(--border);
}
.ppv-stat:last-child { border-right: none; }
.ppv-stat-val { font-size: 18px; font-weight: 700; }
.ppv-stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.ppv-flow-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted); margin-bottom: 12px;
}

/* Step flow timeline */
.ppv-flow { display: flex; flex-direction: column; }
.ppv-step { display: flex; gap: 12px; }
.ppv-step-line {
  display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 28px;
}
.ppv-step-dot {
  width: 26px; height: 26px; border-radius: 50%; color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1;
}
.ppv-step-rail {
  width: 2px; flex: 1; min-height: 16px; opacity: .4;
}
.ppv-step-content {
  flex: 1; padding-bottom: 14px; min-width: 0;
}
.ppv-step-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.ppv-step-role {
  font-size: 11px; color: var(--text-muted); line-height: 1.4;
}
.ppv-gate-tag {
  font-size: 10px; padding: 1px 6px; border-radius: 6px;
  background: #fef3c7; color: #92400e; font-weight: 600; vertical-align: middle;
}
@media (prefers-color-scheme: dark) {
  .ppv-gate-tag { background: #422006; color: #fbbf24; }
}
.ppv-create-btn {
  width: 100%; padding: 11px; font-size: 14px; font-weight: 700;
  border-radius: 10px; transition: opacity .2s, transform .1s;
}
.ppv-create-btn:hover { opacity: .9; }
.ppv-create-btn:active { transform: scale(.98); }

/* Responsive */
@media (max-width: 600px) {
  .pipe-tpl-grid { grid-template-columns: 1fr; }
  .pipe-picker-sticky { padding-top: 12px; }
  .ppv-stats { flex-wrap: wrap; }
  .ppv-stat { min-width: 80px; }
}

/* Detail panel */
.pipe-detail-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.pipe-detail-icon { font-size: 32px; }
.pipe-detail-title { font-size: 18px; font-weight: 700; }
.pipe-detail-desc { color: var(--text-secondary); font-size: 14px; margin-top: 2px; }

/* Steps flow */
.pipe-steps-flow {
  display: flex; flex-direction: column; gap: 0; position: relative;
  max-width: 700px; margin: 0 auto;
}
.pipe-step-card {
  display: flex; gap: 14px; padding: 16px; position: relative;
  border-left: 3px solid var(--accent); margin-left: 16px;
}
.pipe-step-card:last-child { border-left-color: transparent; }
.pipe-step-num {
  position: absolute; left: -14px; top: 14px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pipe-step-body { flex: 1; min-width: 0; }
.pipe-step-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.pipe-step-agent {
  font-size: 11px; padding: 2px 7px; border-radius: 6px;
  background: var(--bg-secondary); color: var(--text-muted); font-weight: 500;
}
.pipe-step-prompt { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-top: 4px; }
.pipe-step-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pipe-step-badge {
  font-size: 10px; padding: 2px 6px; border-radius: 6px;
  font-weight: 600; display: inline-flex; align-items: center; gap: 3px;
}
.pipe-step-badge.approval { background: #fef3c7; color: #92400e; }
.pipe-step-badge.context { background: #dbeafe; color: #1d4ed8; }
.pipe-step-badge.action { background: #e0e7ff; color: #3730a3; }
.pipe-step-badge.agent { background: #ecfdf5; color: #065f46; }
.pipe-step-badge.gate { background: #fef3c7; color: #92400e; }
.pipe-step-badge.routing { background: #fae8ff; color: #86198f; }
.pipe-step-badge.jump { background: #f0fdf4; color: #166534; }
@media (prefers-color-scheme: dark) {
  .pipe-step-badge.approval { background: #78350f; color: #fcd34d; }
  .pipe-step-badge.context { background: #1e3a5f; color: #93c5fd; }
  .pipe-step-badge.action { background: #312e81; color: #a5b4fc; }
  .pipe-step-badge.agent { background: #064e3b; color: #6ee7b7; }
  .pipe-step-badge.gate { background: #78350f; color: #fcd34d; }
  .pipe-step-badge.routing { background: #4a044e; color: #e879f9; }
  .pipe-step-badge.jump { background: #14532d; color: #86efac; }
}
.notif-item.approval-item { border-left: 3px solid var(--accent); background: var(--surface-hover); }

/* Action bar */
.pipe-action-bar {
  display: flex; gap: 8px; align-items: center; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--border);
  max-width: 700px; margin-left: auto; margin-right: auto;
}

/* Runs history */
.pipe-runs-list { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; max-width: 700px; margin-left: auto; margin-right: auto; }
.pipe-run-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--bg-secondary); border-radius: 8px; font-size: 12px;
  border-left: 3px solid var(--border);
}
.pipe-run-item.completed { border-left-color: #22c55e; }
.pipe-run-item.error { border-left-color: #ef4444; }
.pipe-run-item.rejected { border-left-color: #f59e0b; }
.pipe-run-item.running { border-left-color: var(--accent); }
.pipe-run-status {
  font-weight: 600; text-transform: uppercase; font-size: 10px;
  padding: 2px 6px; border-radius: 4px;
}
.pipe-run-status.completed { background: #dcfce7; color: #15803d; }
.pipe-run-status.error { background: #fee2e2; color: #b91c1c; }
.pipe-run-status.rejected { background: #fef3c7; color: #92400e; }
.pipe-run-status.running { background: #dbeafe; color: #1d4ed8; }
@media (prefers-color-scheme: dark) {
  .pipe-run-status.completed { background: #14532d; color: #86efac; }
  .pipe-run-status.error { background: #7f1d1d; color: #fca5a5; }
  .pipe-run-status.rejected { background: #78350f; color: #fcd34d; }
  .pipe-run-status.running { background: #1e3a5f; color: #93c5fd; }
}
.pipe-run-meta { flex: 1; color: var(--text-muted); }

/* ── Sidebar enrichment ── */
.pipe-status-dot { font-size: 10px; margin-left: 2px; flex-shrink: 0; }
.pipe-sched-badge { font-size: 10px; flex-shrink: 0; opacity: .7; }
.pipe-paused { opacity: .5; }
.pipe-running { background: rgba(99,102,241,.06); }
@keyframes pipePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.pipe-running .pipe-status-dot { animation: pipePulse 1.5s ease infinite; }

/* ── Detail page: info chips ── */
.pipe-info-chip {
  font-size: 12px; padding: 4px 10px; background: var(--bg-secondary);
  border-radius: 8px; border: 1px solid var(--border);
  display: inline-flex; align-items: center; gap: 4px;
}
.pipe-info-chip.chip-active { background: #dcfce7; color: #15803d; font-weight: 600; border-color: #bbf7d0; }
.pipe-info-chip.chip-paused { background: #fef3c7; color: #92400e; font-weight: 600; border-color: #fde68a; }
@media (prefers-color-scheme: dark) {
  .pipe-info-chip.chip-active { background: #14532d; color: #86efac; border-color: #166534; }
  .pipe-info-chip.chip-paused { background: #78350f; color: #fcd34d; border-color: #92400e; }
}
.pipe-edit-sched-btn { font-size: 11px !important; }

/* ── Live execution banner ── */
.pipe-live-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 16px; margin: 12px auto 0; max-width: 700px;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(59,130,246,.08));
  border: 1px solid rgba(99,102,241,.25); border-radius: 12px;
}
.pipe-live-pulse {
  width: 10px; height: 10px; border-radius: 50%; background: #6366f1; flex-shrink: 0;
  animation: pipePulse 1.2s ease infinite;
}
.pipe-live-info { flex: 1; font-size: 13px; min-width: 150px; }
.pipe-live-bar {
  width: 100%; height: 5px; background: var(--border); border-radius: 4px;
  overflow: hidden;
}
.pipe-live-fill {
  height: 100%; background: linear-gradient(90deg, #6366f1, #3b82f6);
  border-radius: 4px; transition: width .8s ease;
}

/* ── Step live states ── */
.pipe-step-card.pipe-step-done { border-left-color: #22c55e; }
.pipe-step-card.pipe-step-done .pipe-step-num { background: #22c55e; }
.pipe-step-card.pipe-step-active { border-left-color: #6366f1; background: rgba(99,102,241,.05); }
.pipe-step-card.pipe-step-active .pipe-step-num {
  background: #6366f1; animation: pipePulse 1.2s ease infinite;
}

/* ── Step edit button ── */
.pipe-step-edit-btn {
  position: absolute; right: 8px; top: 14px;
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--text-muted); cursor: pointer; padding: 4px 6px;
  opacity: 0; transition: opacity .2s, background .15s;
}
.pipe-step-card:hover .pipe-step-edit-btn { opacity: 1; }
.pipe-step-edit-btn:hover { background: var(--bg-secondary); border-color: var(--border); }

/* ── Export button in run history ── */
.pipe-export-btn {
  font-size: 11px !important; padding: 2px 6px !important;
  flex-shrink: 0; margin-left: auto;
}

@media (max-width: 600px) {
  .pipe-tpl-grid { grid-template-columns: 1fr; }
  .pipe-step-card { padding: 12px 10px; }
  .pipe-live-banner { padding: 10px 12px; }
  .pipe-step-edit-btn { opacity: 1; }
}

/* ── Sidebar customize popover: dark mode polish ── */
@media (prefers-color-scheme: dark) {
  .sidebar-customize-popover {
    background: rgba(20, 20, 20, 0.95);
    border-color: #3a3a3a;
    box-shadow:
      0 24px 80px rgba(0,0,0,0.6),
      0 8px 24px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .sidebar-customize-header {
    background: rgba(20, 20, 20, 0.95);
    color: var(--text-secondary);
    border-bottom-color: #3a3a3a;
  }
  .sidebar-customize-list .sidebar-vis-item {
    background: rgba(255,255,255,0.04);
    border-color: transparent;
  }
  .sidebar-customize-list .sidebar-vis-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: #3a3a3a;
  }
  .sidebar-vis-emoji {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.2);
  }
  .sidebar-vis-item .toggle-switch {
    background: #404040;
    border-color: #505050;
  }
  .sidebar-vis-item input:checked + .toggle-switch {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), 0 2px 12px rgba(59, 130, 246, 0.4);
  }
  .sidebar-vis-action-btn {
    background: rgba(255,255,255,0.06);
    border-color: #3a3a3a;
  }
  .sidebar-vis-actions {
    border-top-color: #3a3a3a;
  }
}
/* Active state for customize button when popover is open */
#customizeSidebarBtn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ============================================================
   TOPBAR LIST PANELS
   ============================================================ */
.toplist-panel {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 16px;
}
.toplist-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.toplist-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toplist-count {
  font-size: 12px;
  font-weight: 500;
  background: var(--accent-soft, #eff6ff);
  color: var(--accent, #3b82f6);
  padding: 2px 8px;
  border-radius: 10px;
}
.toplist-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.toplist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 150ms ease;
}
.toplist-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
  transform: translateY(-1px);
}
.toplist-item-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toplist-item-body {
  flex: 1;
  min-width: 0;
}
.toplist-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.toplist-item-meta {
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toplist-item-actions {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 150ms;
}
.toplist-item:hover .toplist-item-actions {
  opacity: 1;
}
.toplist-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.toplist-badge.running {
  background: #dbeafe;
  color: #1d4ed8;
}
.toplist-badge.completed {
  background: #d1fae5;
  color: #065f46;
}
.toplist-badge.error {
  background: #fee2e2;
  color: #991b1b;
}
.toplist-badge.active {
  background: #d1fae5;
  color: #065f46;
}
.toplist-badge.paused {
  background: #fef3c7;
  color: #92400e;
}
.toplist-badge.warning {
  background: #fef3c7;
  color: #92400e;
}
.toplist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-secondary, #6b7280);
  text-align: center;
}
.toplist-empty p {
  margin-top: 12px;
  font-size: 14px;
}

/* Dark mode — item/hover now inherit theme vars automatically; only the
   fixed-color status badges need dark overrides. */
[data-theme="dark"] .toplist-badge.running { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .toplist-badge.completed { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .toplist-badge.error { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .toplist-badge.active { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .toplist-badge.paused { background: #78350f; color: #fcd34d; }
[data-theme="dark"] .toplist-badge.warning { background: #78350f; color: #fcd34d; }

/* ============================================================
   MESSAGE ACTIONS (copy, fav, share)
   ============================================================ */
.msg-actions { display: flex; gap: 4px; position: absolute; top: 4px; right: 4px; opacity: 0; transition: opacity 0.15s; }
.msg:hover .msg-actions { opacity: 1; }
.msg-action-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; }
.msg-action-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.msg-action-btn.saved { color: var(--accent); }
.msg.assistant { position: relative; }

/* ============================================================
   COMPARE TOGGLE BUTTON
   ============================================================ */
.compare-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.compare-btn:hover { border-color: var(--accent); color: var(--accent); }
.compare-btn.active { background: var(--accent); border-color: var(--accent); color: white; }
.compare-btn .compare-label { font-size: 10px; }
.compare-btn svg { width: 12px; height: 12px; }

/* ============================================================
   PERSONAL DASHBOARD
   ============================================================ */
.dash-personal { padding: 24px; max-width: 800px; margin: 0 auto; }
.dash-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.dash-header h2 { margin: 0; font-size: 20px; font-weight: 700; flex: 1; }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.dash-kpi { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; }
.dash-kpi-value { font-size: 24px; font-weight: 700; color: var(--accent); }
.dash-kpi-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.dash-section { margin-bottom: 20px; }
.dash-section h3 { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.dash-quick-queries { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-quick-btn { padding: 6px 14px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--accent); cursor: pointer; transition: all 0.15s; }
.dash-quick-btn:hover { background: var(--accent); color: white; }
.dash-list { display: flex; flex-direction: column; gap: 4px; }
.dash-list-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.1s; }
.dash-list-item:hover { background: var(--bg-hover); }
.dash-list-item.read { opacity: 0.6; }
.dash-list-icon { font-size: 16px; flex-shrink: 0; }
.dash-list-title { flex: 1; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-list-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.dash-list-action { font-size: 11px; padding: 3px 8px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); cursor: pointer; }
.dash-list-action:hover { background: var(--accent); color: white; }
.dash-empty { font-size: 13px; color: var(--text-muted); font-style: italic; margin: 8px 0; }

/* ============================================================
   QUERY TEMPLATES
   ============================================================ */
.tpl-list { display: flex; flex-direction: column; gap: 6px; }
.tpl-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; position: relative; }
.tpl-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.tpl-title { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; }
.tpl-query { font-size: 11.5px; color: var(--text-secondary); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-role { font-size: 10px; padding: 2px 6px; background: var(--bg-hover); border-radius: 4px; color: var(--text-muted); }
.tpl-del { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; }
.tpl-item:hover .tpl-del { opacity: 1; }
.tpl-del:hover { background: #fee2e2; color: #dc2626; }

/* ============================================================
   CONVERSATION TIME GROUP HEADERS
   ============================================================ */
.conv-group-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); padding: 12px 16px 4px; }

/* ============================================================
   SIDEBAR NAVIGATION BUTTONS
   ============================================================ */
.sidebar-nav {
  display: flex;
  flex-wrap: wrap;          /* con más accesos (Consultores…) no deben quedar ocultos a la derecha */
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
}
.sidebar-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
  line-height: 1;
}
#navComercialSidebar[hidden] { display: none !important; }
#navBriefingSidebar[hidden] { display: none !important; }
.sidebar-nav-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(99,102,241,.25);
  transform: translateY(-1px);
}
.sidebar-nav-btn:hover svg {
  stroke: #fff;
}
.sidebar-nav-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.sidebar-nav-btn.active svg {
  stroke: #fff;
}
.sidebar-nav-btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.sidebar-nav-btn svg {
  flex-shrink: 0;
  transition: stroke .2s;
}
/* Collapsed state */
.app.sidebar-collapsed .sidebar-nav {
  flex-direction: column;
  padding: 6px 4px;
  align-items: center;
}
.app.sidebar-collapsed .sidebar-nav-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
.app.sidebar-collapsed .sidebar-nav-btn span {
  display: none;
}

/* ============================================================
   DASHBOARD IMPROVEMENTS
   ============================================================ */
.dash-personal {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
}
.dash-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.dash-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.dash-kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.dash-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}
.dash-kpi-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.dash-section {
  margin-bottom: 20px;
}
.dash-section h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text);
}
.dash-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.dash-list-item:hover {
  background: var(--bg-hover);
}
.dash-list-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.dash-list-title {
  flex: 1;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-list-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.dash-list-action {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.dash-list-action:hover {
  background: var(--accent-soft);
}
.dash-empty {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 12px;
  text-align: center;
}
.dash-quick-queries {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dash-quick-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-surface);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.dash-quick-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Briefing card in dashboard */
.dash-briefing-card {
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-surface));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.dash-briefing-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.dash-briefing-info {
  flex: 1;
}
.dash-briefing-info h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
}
.dash-briefing-info p {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.dash-briefing-actions {
  display: flex;
  gap: 8px;
}
.dash-briefing-actions button {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.dash-briefing-actions button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.dash-briefing-actions button.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.dash-briefing-actions button.primary:hover {
  opacity: 0.9;
}

/* Checklist de la tarea multi-paso (plan persistido). */
.plan-card {
  margin: 12px 0;
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 30%, transparent);
  border-left: 3px solid var(--accent, #2563eb);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #2563eb) 4%, var(--bg-elevated, #fff));
  padding: 12px 14px;
}
.plan-card.complete {
  border-color: color-mix(in srgb, #16a34a 40%, transparent);
  border-left-color: #16a34a;
  background: color-mix(in srgb, #16a34a 5%, var(--bg-elevated, #fff));
}
.plan-head {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 13px; color: var(--text, #111);
  margin-bottom: 8px;
}
.plan-head .icon { flex: 0 0 auto; opacity: .8; }
.plan-title { flex: 1 1 auto; }
.plan-count {
  font-size: 12px; font-weight: 600; color: var(--text-muted, #6b7280);
  background: color-mix(in srgb, var(--text-muted, #6b7280) 12%, transparent);
  border-radius: 10px; padding: 1px 8px;
}
.plan-card.complete .plan-count { color: #16a34a; background: color-mix(in srgb, #16a34a 14%, transparent); }
.plan-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.plan-step { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.4; }
.plan-step-ic { flex: 0 0 auto; font-size: 13px; }
.plan-step-tx { color: var(--text, #111); }
.plan-step.done .plan-step-tx { color: var(--text-muted, #6b7280); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted,#6b7280) 50%, transparent); }
.plan-step.skipped .plan-step-tx { color: var(--text-muted, #9ca3af); font-style: italic; }
.plan-step.failed .plan-step-tx { color: #dc2626; }
.plan-step.pending .plan-step-tx { font-weight: 500; }

/* Línea sutil de "continúo con el siguiente paso" (auto-continuación tras confirmar). */
.msg-continue-note {
  display: flex; align-items: center; gap: 6px;
  margin: 6px 0 2px; padding: 2px 2px;
  font-size: 12px; font-style: italic;
  color: var(--text-muted, #6b7280);
  opacity: .85;
}
.msg-continue-note .icon { flex: 0 0 auto; opacity: .7; }
.msg-continue-note.stopped {
  font-style: normal; opacity: 1;
  color: var(--text, #4b5563);
  background: color-mix(in srgb, #f59e0b 10%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 25%, transparent);
  border-radius: 8px; padding: 6px 10px; margin: 8px 0;
}

/* ── Agent confirmation gate card ── */
.confirm-card {
  margin: 12px 0;
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 45%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #2563eb) 6%, var(--bg-elevated, #fff));
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.confirm-card-head {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 13px; letter-spacing: .01em;
  color: var(--accent, #2563eb);
  margin-bottom: 10px;
}
.confirm-card-head .icon { flex: 0 0 auto; }
.confirm-card-body {
  font-size: 14px; line-height: 1.5;
  margin-bottom: 14px;
}
.confirm-headline {
  margin: 0 0 10px; font-weight: 600; color: var(--text, #111);
}
/* Field grid: label on the left, value on the right — reads like a receipt. */
.confirm-fields {
  display: grid;
  grid-template-columns: minmax(90px, max-content) 1fr;
  gap: 4px 14px;
  margin: 0;
}
.confirm-fields dt {
  color: var(--text-muted, #6b7280);
  font-size: 13px;
  padding: 1px 0;
}
.confirm-fields dd {
  margin: 0;
  color: var(--text, #111);
  font-weight: 500;
  word-break: break-word;
}
.confirm-section {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted, #6b7280);
}
/* Line items (order lines, invoice lines…) as compact stacked chips. */
.confirm-lines { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.confirm-lineitem {
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 13px; font-weight: 500;
  color: var(--text, #111);
}
.confirm-line { font-size: 14px; line-height: 1.5; }

.confirm-card-actions { display: flex; gap: 8px; }
.confirm-card-actions .btn-primary,
.confirm-card-actions .btn-secondary { display: inline-flex; align-items: center; gap: 6px; }
.confirm-card-result { margin-top: 12px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.confirm-card-result.ok { color: #16a34a; }
.confirm-card-result.err { color: #dc2626; }
.confirm-card-result.cancelled { color: var(--text-muted, #888); }
.confirm-mail-review { margin: 0 0 14px; padding: 12px; border: 1px solid var(--border, #dbe3ee); border-radius: 10px; background: var(--bg-elevated, #fff); }
.confirm-mail-review > strong { display: block; font-size: 13px; color: var(--text, #111); }
.confirm-mail-review > p { margin: 3px 0 10px; color: var(--text-muted, #6b7280); font-size: 11px; line-height: 1.4; }
.confirm-mail-subject { padding: 8px 10px; border: 1px solid var(--border, #dbe3ee); border-radius: 7px 7px 0 0; color: var(--text, #111); font-size: 12px; overflow-wrap: anywhere; }
.confirm-mail-subject span { color: var(--text-muted, #6b7280); font-weight: 600; }
.confirm-mail-frame { display: block; width: 100%; height: 340px; box-sizing: border-box; border: 1px solid var(--border, #dbe3ee); border-top: 0; border-radius: 0 0 7px 7px; background: #fff; }

.confirm-card.danger {
  border-color: color-mix(in srgb, #dc2626 55%, transparent);
  background: color-mix(in srgb, #dc2626 6%, var(--bg-elevated, #fff));
}
.confirm-card.danger .confirm-card-head { color: #dc2626; }
.confirm-card.danger .confirm-yes { background: #dc2626; border-color: #dc2626; }
.confirm-card.danger .confirm-lineitem {
  background: color-mix(in srgb, #dc2626 8%, transparent);
  border-color: color-mix(in srgb, #dc2626 20%, transparent);
}

/* Tarjeta de confirmación: acciones extra (editar / confirmar todo / deshacer) */
.confirm-card-actions { flex-wrap: wrap; }
.confirm-edit.active { outline: 2px solid var(--accent, #c95f2c); outline-offset: 1px; }
.confirm-undo {
  margin-left: 10px; padding: 4px 10px; border: 1px solid var(--border, #ddd);
  border-radius: 6px; font-size: 12.5px;
}
.confirm-undo:hover { border-color: var(--accent, #c95f2c); color: var(--accent, #c95f2c); }

/* Mini-editor de la tarjeta (Editar antes de confirmar) */
.confirm-edit-form {
  margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--border, #ddd);
  border-radius: 8px; display: flex; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--accent, #c95f2c) 4%, transparent);
}
.cef-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.cef-label { flex: 0 0 140px; color: var(--text-muted, #888); }
.cef-row input[type="text"], .cef-row input[type="number"] {
  flex: 1; min-width: 0; padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--border, #ddd); border-radius: 6px;
  background: var(--bg, #fff); color: var(--text, #222);
}
.cef-line { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border, #eee); display: flex; flex-direction: column; gap: 6px; }
.cef-line-title { font-size: 12px; font-weight: 600; color: var(--text-muted, #888); }

/* Píldora de modo ágil sobre el composer */
.agile-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 auto 8px; max-width: 860px; padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #c95f2c) 45%, transparent);
  background: color-mix(in srgb, var(--accent, #c95f2c) 9%, var(--bg-elevated, #fff));
  border-radius: 999px; font-size: 12.5px; color: var(--text, #333);
}
.agile-pill .agile-off {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--border, #ccc);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer;
  color: var(--text-muted, #666);
}
.agile-pill .agile-off:hover { border-color: var(--accent, #c95f2c); color: var(--accent, #c95f2c); }

/* Enlace a registro de Odoo en tablas/texto del chat */
.odoo-rec-link { text-decoration: none; border-bottom: 1px dashed currentColor; }
.odoo-rec-link::after { content: " ↗"; font-size: 11px; opacity: .7; }

/* Regenerar / editar el último mensaje */
.msg.user { position: relative; }   /* ancla la fila .msg-actions (lápiz) */
.msg-edit-area {
  width: 100%; min-width: 260px; resize: vertical; padding: 8px 10px;
  font: inherit; font-size: 14px; border: 1px solid var(--accent, #c95f2c);
  border-radius: 8px; background: var(--bg, #fff); color: var(--text, #222);
}
.msg-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
.msg-edit-actions .btn-primary, .msg-edit-actions .btn-secondary {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 12px;
}

/* Pie del panel de notificaciones: activar/desactivar Web Push */
.notif-foot { border-top: 1px solid var(--border, #eee); padding: 8px 10px; }
.notif-push-toggle {
  width: 100%; padding: 7px 10px; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--border, #ddd); border-radius: 8px;
  background: transparent; color: var(--text, #333); text-align: center;
}
.notif-push-toggle:hover { border-color: var(--accent, #c95f2c); color: var(--accent, #c95f2c); }
.notif-push-toggle[data-state="on"] { color: var(--text-muted, #888); }

/* Ayuda: buscador, badge admin y fichas de controles */
.help-search-wrap { position: sticky; top: 0; z-index: 5; padding: 4px 0 10px; background: var(--bg-elevated, #fff); }
.help-search-wrap input {
  width: 100%; padding: 9px 14px; font-size: 13.5px;
  border: 1.5px solid var(--border, #ddd); border-radius: 10px;
  background: var(--bg, #fff); color: var(--text, #222);
}
.help-search-wrap input:focus { outline: none; border-color: var(--accent, #c95f2c); }
.help-admin-badge {
  margin-left: 8px; padding: 2px 8px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  color: #b45309; background: color-mix(in srgb, #f59e0b 15%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); border-radius: 999px;
}
.help-controls { margin-top: 18px; }
.help-controls-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px; margin-top: 10px;
}
.help-control {
  padding: 10px 12px; border: 1px solid var(--border, #eee);
  border-radius: 10px; background: color-mix(in srgb, var(--accent, #c95f2c) 3%, transparent);
}
.help-control-name { font-size: 12.8px; font-weight: 700; margin-bottom: 4px; }
.help-control-desc { font-size: 12.3px; line-height: 1.45; color: var(--text-muted, #666); }

/* ✨ Tarjeta de novedades (una vez por versión) */
.news-card {
  position: fixed; right: 18px; bottom: 18px; z-index: 1200;
  width: min(400px, calc(100vw - 36px));
  background: var(--bg-elevated, #fff); border: 1px solid var(--border, #ddd);
  border-top: 3px solid var(--accent, #c95f2c);
  border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  animation: news-in .3s ease;
}
@keyframes news-in { from { transform: translateY(16px); opacity: 0; } }
.news-card .news-head { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.news-card .news-list {
  margin: 0 0 12px; padding-left: 4px; list-style: none;
  display: flex; flex-direction: column; gap: 7px;
  max-height: 46vh; overflow-y: auto;
}
.news-card .news-list li { font-size: 12.8px; line-height: 1.45; color: var(--text, #333); }
.news-card .news-ok { width: 100%; padding: 8px 12px; font-size: 13px; }

/* Sugerencias de bienvenida con datos reales del tenant */
.sug.live {
  border: 1.5px solid color-mix(in srgb, var(--accent, #c95f2c) 55%, transparent);
  background: color-mix(in srgb, var(--accent, #c95f2c) 7%, var(--bg-elevated, #fff));
}
.sug.live .sug-desc { color: var(--accent-text, var(--accent)); font-weight: 600; }

/* Botón de lectura por voz mientras habla */
.msg-action-btn.speaking {
  color: var(--accent, #c95f2c);
  border-color: var(--accent, #c95f2c);
  animation: tts-pulse 1.2s ease-in-out infinite;
}
@keyframes tts-pulse { 50% { opacity: .55; } }

/* Detalle expandido de una notificación del dashboard (clic sin destino) */
.dash-notif-item { cursor: pointer; flex-wrap: wrap; }
.dash-notif-detail {
  flex-basis: 100%; width: 100%; margin-top: 6px; padding: 8px 10px;
  font-size: 12.5px; color: var(--text-muted, #666); white-space: pre-wrap;
  background: color-mix(in srgb, var(--accent, #c95f2c) 5%, transparent);
  border-radius: 6px;
}

/* ── Aprendizaje de la empresa (tenant learning review) ── */
.data-list-actions { display: inline-flex; gap: 4px; align-items: center; flex-shrink: 0; }
.settingsLearningList .data-list-item, #settingsLearningList .data-list-item { align-items: flex-start; }
#settingsLearningList .memory-cat-badge.badge-success { background: #d4edda; color: #155724; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
#settingsLearningList .memory-cat-badge.badge-warning { background: #fff3cd; color: #856404; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
#settingsLearningList .memory-cat-badge.badge-muted { background: var(--bg-hover); color: var(--text-muted); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
[data-theme="dark"] #settingsLearningList .memory-cat-badge.badge-success { background: rgba(40,167,69,0.2); color: #6ecf8e; }
[data-theme="dark"] #settingsLearningList .memory-cat-badge.badge-warning { background: rgba(255,193,7,0.15); color: #ffc107; }
#learningPendingBadge { background: #fff3cd; color: #856404; }
[data-theme="dark"] #learningPendingBadge { background: rgba(255,193,7,0.15); color: #ffc107; }

/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================
   Quien activa "reducir movimiento" en su sistema lo hace por algo: vértigo,
   migrañas, trastornos vestibulares. La app anima bastante (fases del agente,
   cursor de escritura, toasts, spinners), así que respetamos la preferencia.
   No lo desactivamos TODO a 0s: dejamos transiciones muy cortas para que los
   estados (hover, foco, abierto/cerrado) se sigan distinguiendo, y matamos lo
   que se mueve o parpadea en bucle. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.08s !important;
    scroll-behavior: auto !important;
  }
  /* El cursor de escritura parpadea sin parar durante toda la respuesta */
  .cursor {
    animation: none !important;
    opacity: 1;
  }
}

/* Botón "ver mensajes anteriores" (los chats se abren mostrando los últimos) */
.load-older-msgs {
  display: block;
  margin: 8px auto 14px;
  padding: 7px 16px;
  font: inherit;
  font-size: 13px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.load-older-msgs:hover,
.load-older-msgs:focus-visible {
  background: var(--bg-hover, rgba(127,127,127,.1));
  color: var(--text);
  border-color: var(--accent);
}

/* ============================================================
   PANEL DE KPIs
   ============================================================ */
.kpp { display: flex; flex-direction: column; height: 100%; gap: 12px; padding: 20px 24px; overflow: hidden; }
.kpp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kpp-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; }
.kpp-age { font-size: 12px; color: var(--text-muted); }
.kpp-actions { margin-left: auto; display: flex; gap: 8px; }
.kpp-actions .btn-secondary.is-active { border-color: var(--accent); color: var(--accent); }

.kpp-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.kpp-tab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font: inherit; font-size: 13px;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.kpp-tab:hover, .kpp-tab:focus-visible { color: var(--text); border-color: var(--accent); }
.kpp-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.kpp-tab-n { font-size: 11px; opacity: .7; }

.kpp-body { flex: 1; overflow-y: auto; padding-right: 4px; }

/* Lienzo de 12 columnas. Las tarjetas se posicionan en píxeles desde JS
   (_kppPlaceTiles) a partir de su celda {x,y,w,h}: así cada una tiene su
   propio tamaño, que es lo que una rejilla CSS de columnas iguales no permite. */
.kpp-canvas { position: relative; min-height: 200px; }
.kpp-tile { position: absolute; box-sizing: border-box; }
.kpp-tile > .kpp-card { height: 100%; width: 100%; min-height: 0; }

/* Apilado en móvil: sin posiciones absolutas ni arrastre. */
.kpp-canvas.is-stack { display: flex; flex-direction: column; gap: 12px; }
.kpp-canvas.is-stack .kpp-tile { position: static; width: auto !important;
  height: auto !important; left: auto !important; top: auto !important; }
.kpp-canvas.is-stack .kpp-resize { display: none; }

/* Una tarjeta baja (menos de 3 filas) no tiene sitio para el sparkline. */
.kpp-tile.is-short .kpp-spark { display: none; }
.kpp-tile.is-short .kpp-card-foot { margin-top: auto; }

/* Tirador de redimensionado, abajo a la derecha. Solo al organizar. */
.kpp-resize {
  position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px;
  cursor: nwse-resize; opacity: 0; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--text-muted) 50%,
              var(--text-muted) 60%, transparent 60%, transparent 72%,
              var(--text-muted) 72%, var(--text-muted) 82%, transparent 82%);
  border-bottom-right-radius: 11px;
}
.kpp-canvas.is-editing .kpp-resize { opacity: .55; }
.kpp-canvas.is-editing .kpp-resize:hover { opacity: 1; }

/* Fantasma: enseña dónde va a caer la tarjeta ya ajustada a la rejilla. */
.kpp-ghost {
  position: absolute; pointer-events: none; z-index: 1;
  border: 2px dashed var(--accent); border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.kpp-tile.is-dragging { z-index: 3; opacity: .9; }
.kpp-tile.is-dragging .kpp-card { box-shadow: 0 10px 28px rgba(0,0,0,.22); }

.kpp-card {
  display: flex; flex-direction: column; gap: 8px; min-height: 132px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-card, var(--bg-elevated, rgba(127,127,127,.04)));
  transition: border-color .15s, box-shadow .15s;
}
.kpp-card:hover { border-color: var(--accent); }
.kpp-card-head { display: flex; align-items: center; gap: 7px; }
.kpp-card-icon { color: var(--accent); display: inline-flex; }
.kpp-card-title { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Selector de vista del gráfico: discreto hasta que se pasa por encima, para
   que no compita con el título ni con la cifra. */
.kpp-type-select {
  margin-left: auto; max-width: 42%; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text-muted); font: inherit; font-size: 11px;
  padding: 2px 4px; cursor: pointer; opacity: 0; transition: opacity .15s, border-color .15s;
}
.kpp-card:hover .kpp-type-select, .kpp-type-select:focus-visible,
.kpp-type-select[aria-busy="true"] { opacity: 1; border-color: var(--border); }
.kpp-type-select:disabled { cursor: progress; }
.kpp-type-select + .kpp-card-x { margin-left: 0; }
/* Escenario fuera de pantalla donde se dibuja la vista nueva antes de sustituir
   la vieja: si el dibujo falla, el usuario no ve un hueco. */
.kpp-type-preview { position: fixed; left: -10000px; top: 0; pointer-events: none; }

.kpp-card-x { margin-left: auto; border: 0; background: transparent; color: var(--text-muted);
  cursor: pointer; opacity: 0; padding: 2px; border-radius: 5px; transition: opacity .15s; }
.kpp-card:hover .kpp-card-x, .kpp-card-x:focus-visible { opacity: 1; }
@media (hover: none) { .kpp-card-x { opacity: .7; } }
.kpp-card-x:hover { color: #e74c3c; }
.kpp-co { font-size: 10px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; }

.kpp-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; justify-content: center; }
.kpp-card-body.is-chart { min-height: 150px; }
.kpp-figure { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kpp-value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kpp-chart-head { display: flex; align-items: baseline; gap: 8px; }
.kpp-chart-head .kpp-value { font-size: 19px; }
.kpp-chart-head small { color: var(--text-muted); font-size: 11px; }

/* Variación: el color dice si es buena noticia, no si el número sube. */
.kpp-delta { font-size: 12px; font-weight: 600; white-space: nowrap; }
.kpp-delta.is-good { color: #16a34a; }
.kpp-delta.is-bad  { color: #dc2626; }
.kpp-delta.is-flat, .kpp-delta.is-none { color: var(--text-muted); font-weight: 500; }

.kpp-spark { width: 100%; height: 34px; overflow: visible; }
.kpp-spark-line { fill: none; stroke: var(--accent); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.kpp-spark-area { fill: var(--accent); opacity: .10; stroke: none; }
.kpp-spark-dot  { fill: var(--accent); }
.kpp-spark.is-empty line { stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }

.kpp-card-foot { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.kpp-ask { border: 0; background: transparent; color: var(--accent); cursor: pointer;
  font: inherit; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; padding: 0; }
.kpp-ask:hover { text-decoration: underline; }
.kpp-mini { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.kpp-tag { font-size: 10px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); }

/* Ranking */
.kpp-rank { display: flex; flex-direction: column; gap: 4px; }
.kpp-rank-row { display: grid; grid-template-columns: 16px minmax(0,1.4fr) 1fr auto 38px;
  align-items: center; gap: 7px; font-size: 11.5px; }
.kpp-rank-pos { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kpp-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpp-rank-bar { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.kpp-rank-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.kpp-rank-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.kpp-rank-pct { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
/* Tabla con varias series: una columna por serie, sin barra ni % (el % de un
   total no significa nada cuando se comparan dos años). */
.kpp-rank.is-multi { overflow: auto; }
.kpp-rank.is-multi .kpp-rank-row {
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(60px, 1fr));
}
.kpp-rank.is-multi .kpp-rank-val { text-align: right; }
.kpp-rank-row.is-head { color: var(--text-muted); font-size: 10.5px; font-weight: 600;
  border-bottom: 1px solid var(--border); padding-bottom: 3px; }
.kpp-rank-row.is-head .kpp-rank-val { font-weight: 600; }

/* Medidor */
.kpp-gauge { position: relative; display: flex; justify-content: center; padding-top: 6px; }
.kpp-gauge svg { width: 160px; max-width: 100%; }
.kpp-gauge-bg { fill: none; stroke: var(--border); stroke-width: 9; stroke-linecap: round; }
.kpp-gauge-fg { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.kpp-gauge.is-ok   .kpp-gauge-fg { stroke: #16a34a; }
.kpp-gauge.is-warn .kpp-gauge-fg { stroke: #f59e0b; }
.kpp-gauge.is-bad  .kpp-gauge-fg { stroke: #dc2626; }
.kpp-gauge-val { position: absolute; bottom: 2px; font-size: 20px; font-weight: 700; }

.kpp-canvas-wrap { position: relative; height: 158px; }
.kpp-empty-chart { display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 100%; min-height: 110px; color: var(--text-muted); font-size: 12px; text-align: center; }
.kpp-empty { display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 60px 20px; color: var(--text-muted); text-align: center; }

/* Modo organizar */
.kpp-canvas.is-editing .kpp-card { border-style: dashed; }
.kpp-canvas.is-editing .kpp-card-head { cursor: grab; touch-action: none; }
.kpp-canvas.is-editing .kpp-tile.is-dragging .kpp-card-head { cursor: grabbing; }
.kpp-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.kpp-edit-hint { font-size: 12px; color: var(--text-muted); padding: 2px 0 6px; }

/* Esqueleto de carga */
.kpp-card.is-skeleton { pointer-events: none; min-height: 118px; }
.kpp-card .sk { border-radius: 6px; background: linear-gradient(90deg, var(--border) 25%, transparent 50%, var(--border) 75%);
  background-size: 200% 100%; animation: kpp-sk 1.3s infinite; }
.kpp-card .sk-head { height: 11px; width: 55%; }
.kpp-card .sk-val { height: 26px; width: 42%; margin-top: 10px; }
.kpp-card .sk-spark { height: 30px; width: 100%; margin-top: 10px; }
@keyframes kpp-sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Selector y creador */
.kpsel { display: flex; flex-direction: column; gap: 16px; max-height: 58vh; overflow-y: auto; }
.kpsel-area h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 7px; font-size: 13px; }
.kpsel-area h4 small { font-weight: 400; color: var(--text-muted); font-size: 11px; }
.kpsel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 5px; }
.kpsel-item { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 8px;
  border: 1px solid var(--border); cursor: pointer; font-size: 12.5px; }
.kpsel-item:hover { border-color: var(--accent); }
.kpsel-icon { color: var(--accent); display: inline-flex; }
.kpsel-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpsel-kind { font-size: 10px; color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 5px; }
.kpsel-new { margin-top: 4px; padding: 9px; border: 1px dashed var(--border); border-radius: 9px;
  background: transparent; color: var(--accent); font: inherit; font-size: 12.5px; cursor: pointer; }
.kpsel-new:hover { border-color: var(--accent); }

.kpnew { display: flex; flex-direction: column; gap: 12px; }
.kpnew label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.kpnew label small { color: var(--text-muted); font-size: 11px; }
.kpnew input, .kpnew select, .kpnew textarea {
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
}
.kpnew textarea { font-family: "JetBrains Mono", monospace; font-size: 12px; resize: vertical; }
.kpnew-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.kpnew-icons { display: flex; flex-wrap: wrap; gap: 5px; }
.kpnew-icon { padding: 6px; border: 1px solid var(--border); border-radius: 7px;
  background: transparent; color: var(--text-muted); cursor: pointer; }
.kpnew-icon.is-active { border-color: var(--accent); color: var(--accent); }
.kpnew-error { color: #e74c3c; font-size: 12px; }
.kpnew-hint { color: var(--text-muted); font-size: 11px; margin-top: -8px; }

/* Páginas: «+» para crear, «⋯» con las opciones de la página activa. */
.kpp-tabs { align-items: center; }
.kpp-tab-add, .kpp-tab-menu-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 999px; border: 1px dashed var(--border);
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.kpp-tab-menu-btn { border-style: solid; border-color: transparent; }
.kpp-tab-add:hover, .kpp-tab-add:focus-visible,
.kpp-tab-menu-btn:hover, .kpp-tab-menu-btn:focus-visible { color: var(--accent); border-color: var(--accent); }
.kpp-tabs-spacer { flex: 1; }

/* Contador de la barra del chat («3/6»). */
.kpp-mini-count { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  color: var(--text-muted); padding: 0 6px; font-variant-numeric: tabular-nums; }
.kpp-link { border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 0 0 0 8px; }
.kpp-link:hover { text-decoration: underline; }
.kpp-foot-help { font-size: 11.5px; color: var(--text-muted); margin: 0; display: flex; align-items: center; gap: 6px; }
.kpp-warn { color: #b45309; display: inline-flex; }
.btn-primary.is-danger { background: var(--danger, #dc2626); border-color: var(--danger, #dc2626); }

/* Menú flotante (opciones de página y de tarjeta). */
.kpp-menu { position: fixed; z-index: 1000; min-width: 210px; max-height: 70vh; overflow-y: auto;
  padding: 6px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-elevated, #fff); box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.kpp-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px;
  border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit;
  font-size: 13px; text-align: left; cursor: pointer; }
.kpp-menu-item:hover, .kpp-menu-item:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
.kpp-menu-item.is-danger { color: var(--danger, #dc2626); }
.kpp-menu-sep { height: 1px; background: var(--border); margin: 5px 4px; }
.kpp-menu-label { margin: 4px 10px 2px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Elementos libres de página: título, texto y separador. */
.kpp-tile.is-widget { display: flex; }
.kpp-widget { position: relative; display: flex; align-items: center; width: 100%; height: 100%;
  min-height: 0; padding: 0 4px; border: 1px dashed transparent; border-radius: 10px; }
.kpp-canvas.is-editing .kpp-widget { border-color: var(--border); cursor: grab; touch-action: none; }
.kpp-widget-title { margin: 0; width: 100%; font-weight: 700; font-size: 17px; }
.kpp-widget-title.is-sm { font-size: 14px; } .kpp-widget-title.is-lg { font-size: 22px; }
.kpp-widget-text { margin: 0; width: 100%; font-size: 13px; color: var(--text-muted); white-space: pre-wrap; overflow: hidden; }
.kpp-widget-text.is-sm { font-size: 12px; } .kpp-widget-text.is-lg { font-size: 15px; }
.kpp-widget .is-center { text-align: center; } .kpp-widget .is-right { text-align: right; }
.kpp-widget-hr { width: 100%; border: 0; border-top: 1px solid var(--border); margin: 0; }
.kpp-widget-tools { position: absolute; top: 2px; right: 2px; display: none; gap: 2px; }
.kpp-canvas.is-editing .kpp-widget-tools, .kpp-widget:focus-within .kpp-widget-tools { display: inline-flex; }
.kpp-widget-tools button { border: 0; background: var(--bg-elevated, #fff); color: var(--text-muted);
  border-radius: 5px; padding: 3px; cursor: pointer; display: inline-flex; }
.kpp-widget-tools button:hover { color: var(--accent); }
.kpp-canvas.is-stack .kpp-tile.is-widget { min-height: 34px; }

/* Página vacía y sugerencias de gráfico. */
.kpp-page-empty { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 48px 16px; color: var(--text-muted); text-align: center; }
.kpp-page-empty p { margin: 0; }
.kpp-page-empty .btn-primary { margin-top: 8px; }
.kpp-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.kpp-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12px; }
.kpp-suggest-label { color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.kpp-suggest-chip, .kpsel-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px;
  border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text);
  font: inherit; font-size: 12px; cursor: pointer; }
.kpp-suggest-chip:hover, .kpsel-chip:hover, .kpp-suggest-chip:focus-visible, .kpsel-chip:focus-visible { border-color: var(--accent); color: var(--accent); }
.kpsel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }

@media (max-width: 700px) {
  .kpp { padding: 14px; }
  .kpp-actions { width: 100%; margin-left: 0; }
}

/* Esqueleto de carga del panel (antes de saber tamaños reales) */
.kpp-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 12px; }

/* Sin histórico todavía: se dice, en vez de dejar un guion y un hueco que
   parecen una tarjeta que no ha cargado. */
.kpp-nohist { font-size: 11px; color: var(--text-muted); font-style: italic; }


/* ── Buzón: captura de documentos por correo ───────────────────────── */
.topbar-action-badge { position: relative; }
.capture-badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--danger, #dc2626); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.capture-badge[hidden] { display: none; }
.capture-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.capture-chip {
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-secondary);
  border-radius: 16px; padding: 4px 12px; font-size: 12px; cursor: pointer;
}
.capture-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.capture-type { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px;
  background: var(--accent-soft, #eff6ff); color: var(--accent, #2563eb); }
.capture-type.unknown { background: var(--bg-hover); color: var(--text-muted); }
.capture-status { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  padding: 2px 6px; border-radius: 6px; background: var(--bg-hover); color: var(--text-muted); }
.capture-status.pending { background: #fff3cd; color: #856404; }
.capture-status.confirmed { background: #d4edda; color: #155724; }
.capture-status.error { background: #f8d7da; color: #842029; }
.capture-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 860px) { .capture-detail { grid-template-columns: 1fr; } }
.capture-col { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.capture-col h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.capture-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13px; margin-bottom: 10px; }
.capture-meta dt { color: var(--text-muted); }
.capture-meta dd { margin: 0; word-break: break-word; }
.capture-body { white-space: pre-wrap; font-size: 13px; line-height: 1.5; max-height: 320px; overflow: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.capture-warn { background: #fff3cd; color: #664d03; border: 1px solid #ffe69c; border-radius: 8px; padding: 8px 10px; font-size: 13px; margin: 8px 0; }
.capture-warn ul { margin: 4px 0 0 18px; padding: 0; }
.capture-ok { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; border-radius: 8px; padding: 8px 10px; font-size: 13px; margin: 8px 0; }
.capture-fix { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.capture-fix label { font-size: 12px; color: var(--text-muted); display: flex; flex-direction: column; gap: 3px; }
.capture-fix input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 13px; }
.capture-lookup { position: relative; }
.capture-lookup-results { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.capture-lookup-results button { text-align: left; padding: 5px 8px; border: 1px solid var(--border); background: var(--bg); border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text); }
.capture-lookup-results button:hover { border-color: var(--accent); }
.capture-lookup-tag { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--accent-soft, rgba(37,99,235,.12)); color: var(--accent); white-space: nowrap; }
.capture-picked { font-size: 12px; color: #0f5132; }
.capture-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.capture-lines { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.capture-lines th, .capture-lines td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.capture-lines th { color: var(--text-muted); font-weight: 500; font-size: 12px; }
.capture-lines td.num { text-align: right; white-space: nowrap; }
.capture-settings-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.capture-settings-row label { flex: 1; min-width: 140px; }

.capture-chips { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.capture-chip.cap-line-chip, .capture-chip.cap-partner-chip { background: var(--accent-soft, #eff6ff); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.capture-chip.selected { background: var(--accent); color: #fff; }

.capture-taxbox { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; display:flex; flex-direction:column; gap:3px; }

/* ── Agentes v2: nivel e historial ── */
.agent-level-chip { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 6px; letter-spacing: .3px;
  text-transform: uppercase; background: var(--bg-soft, #eef2ff); color: var(--accent, #4338ca); }
.agent-level-chip.lvl-propose { background: #e0f2fe; color: #075985; }
.agent-level-chip.lvl-observe { background: #f1f5f9; color: #475569; }
.agent-runs { display: flex; flex-direction: column; gap: 10px; max-height: 65vh; overflow: auto; }
.agent-run { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 10px 12px; }
.agent-run-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agent-run-head .agent-run-open { margin-left: auto; font-size: 13px; }
.agent-run-stats { font-size: 12px; color: var(--text-muted, #6b7280); margin-top: 4px; }
.agent-run-summary { font-size: 13px; margin-top: 6px; }
.agent-run details { font-size: 12px; margin-top: 6px; }
.agent-run ul { margin: 4px 0 0 18px; padding: 0; }
html.theme-dark .agent-level-chip.lvl-propose, html[data-theme="dark"] .agent-level-chip.lvl-propose { background: #0c4a6e; color: #bae6fd; }
html.theme-dark .agent-level-chip.lvl-observe, html[data-theme="dark"] .agent-level-chip.lvl-observe { background: #334155; color: #cbd5e1; }
@media (prefers-color-scheme: dark) {
  html:not(.theme-light):not([data-theme="light"]) .agent-level-chip.lvl-propose { background: #0c4a6e; color: #bae6fd; }
  html:not(.theme-light):not([data-theme="light"]) .agent-level-chip.lvl-observe { background: #334155; color: #cbd5e1; }
}
.agent-prop-item { border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 6px 10px; margin-top: 6px; }
.agent-prop-rec { margin: 2px 0 0; }
.agent-prop-rec dd { word-break: break-word; }
.agent-human-title { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.agent-human-why { background: var(--bg-soft, #eff6ff); border: 1px solid var(--border, #dbeafe); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
.agent-human-item { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.agent-human-head { font-weight: 600; margin-bottom: 4px; }
.agent-human-after { font-size: 13px; margin: 12px 0 4px; }
.agent-human-tech { margin-top: 10px; font-size: 12px; color: var(--text-muted, #6b7280); }
.agent-human-tech summary { cursor: pointer; }

.agent-mem-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.agent-mem-list li { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between;
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.agent-mem-list li span { min-width: 0; word-break: break-word; }

/* Tablas de resultado: ordenar y CSV */
.table-wrap thead th { cursor: pointer; user-select: none; }
.table-wrap thead th:hover { text-decoration: underline dotted; }
.table-wrap thead th[aria-sort="ascending"]::after { content: " ▲"; font-size: .75em; opacity: .7; }
.table-wrap thead th[aria-sort="descending"]::after { content: " ▼"; font-size: .75em; opacity: .7; }
.csv-table-btn { position: absolute; top: 4px; right: 36px; z-index: 2; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 6px; font-size: 14px; cursor: pointer; opacity: 0; transition: opacity .15s; line-height: 1; }
.table-wrap:hover .csv-table-btn, .csv-table-btn:focus-visible { opacity: 1; }

.msg-action-btn.is-active { color: var(--accent, #2563eb); }

.biz-ctrl-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.biz-ctrl { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--bg-elevated);
  border-radius: 999px; padding: 4px 10px 4px 5px; font: inherit; font-size: 13px; cursor: pointer; color: inherit; }
.biz-ctrl:hover { border-color: var(--accent, #2563eb); }

/* Mapa de provincias y mapa de calor (de SageMind) */
.kpp-map { position: relative; display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; }
.kpp-map-body { display: flex; gap: 10px; flex: 1; min-height: 0; align-items: stretch; }
.kpp-map-svg { flex: 1 1 58%; min-width: 0; width: 100%; height: auto; max-height: 100%; display: block; }
.kpp-map-svg path { transition: fill .15s ease; cursor: default; }
.kpp-map-svg path:hover { stroke: var(--accent); stroke-width: 2; }
.kpp-map-frame { fill: none; stroke: var(--border-strong); stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.kpp-map-label { font: 700 22px Inter, system-ui, sans-serif; fill: var(--text); paint-order: stroke; stroke: var(--bg-elevated); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
/* Top de provincias en columna a la derecha, con barra y % del total. */
.kpp-map-top { flex: 0 0 40%; display: flex; flex-direction: column; justify-content: center; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 11px; min-width: 0; }
.kpp-map-top li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar pct"; column-gap: 6px; row-gap: 2px; align-items: center; min-width: 0; }
.kpp-map-top-name { grid-area: name; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpp-map-top-bar { grid-area: bar; height: 5px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; }
.kpp-map-top-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.kpp-map-top b { grid-area: val; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpp-map-top small { grid-area: pct; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.kpp-map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-muted); flex: none; }
.kpp-map-svg path:focus-visible { outline: none; stroke: var(--text); stroke-width: 3px; }
.kpp-map-legend i { display: block; width: 90px; height: 7px; border-radius: 4px; }
.kpp-map-legend em { margin-left: auto; font-style: normal; }
.kpp-map-tip { position: absolute; z-index: 5; pointer-events: none; padding: 5px 8px; border-radius: 7px; background: #171717; color: #fff; font-size: 11px; white-space: nowrap; box-shadow: var(--shadow-md); }
:root[data-theme="dark"] .kpp-map-tip { background: #262626; }
.kpp-map-fallback { margin: auto; color: var(--text-muted); font-size: 12px; }
/* En baldosa baja no caben la lista ni la leyenda del mapa. */
.kpp-tile.is-short .kpp-map-top, .kpp-tile.is-short .kpp-map-legend { display: none; }
/* MAPA DE CALOR: 12 semanas × 7 días; positivos en cuatro intensidades del mismo azul. */
.kpp-heat { display: grid; grid-template-columns: 14px repeat(var(--kpp-weeks, 12), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 3px; flex: 1; min-height: 0; align-content: stretch; }
.kpp-heat-month, .kpp-heat-day { font-size: 9.5px; color: var(--text-muted); line-height: 1; align-self: center; white-space: nowrap; overflow: hidden; }
.kpp-heat-month { text-align: left; min-height: 11px; }
.kpp-heat-cell { display: block; border: 0; padding: 0; min-width: 0; border-radius: 3px; background: var(--data-zero); min-height: 8px; cursor: pointer; }
.kpp-heat-cell.is-future { background: transparent; border: 1px dashed var(--border); }
.kpp-heat-cell.is-l1, .kpp-heat-legend i.is-l1 { background: var(--data-low); }
.kpp-heat-cell.is-l2, .kpp-heat-legend i.is-l2 { background: var(--data-mid-low); }
.kpp-heat-cell.is-l3, .kpp-heat-legend i.is-l3 { background: var(--data-mid-high); }
.kpp-heat-cell.is-l4, .kpp-heat-legend i.is-l4 { background: var(--data-high); }
.kpp-heat-cell.is-negative, .kpp-heat-legend i.is-negative { background: var(--data-negative); }
.kpp-heat-cell.is-missing, .kpp-heat-legend i.is-missing { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--border-strong) 3px 4px); border: 1px solid var(--border); }
.kpp-heat-legend i.is-l0 { background: var(--data-zero); }
.kpp-heat-cell:hover, .kpp-heat-cell:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; z-index: 1; }
.kpp-heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 10px; color: var(--text-muted); margin-top: 6px; flex: none; }
.kpp-heat-legend i { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 2px; }
.kpp-heat-legend span { display: inline-flex; align-items: center; gap: 3px; }
.kpp-heat-detail { color: var(--text-secondary); font-size: 10px; margin-top: 4px; min-height: 1.4em; overflow-wrap: anywhere; }
.kpp-canvas.is-stack .kpp-tile .kpp-map-body { flex-direction: column; }
.kpp-canvas.is-stack .kpp-tile .kpp-map-svg { max-height: 240px; }
.kpp-canvas.is-stack .kpp-tile .kpp-heat { min-height: 150px; }

.kpp-card { --data-low: hsl(217, 80%, 88%); --data-mid-low: hsl(217, 80%, 72%); --data-mid-high: hsl(217, 80%, 56%); --data-high: hsl(217, 80%, 40%); --data-negative: #be123c; --data-zero: #e5e7eb; }
html.theme-dark .kpp-card, [data-theme="dark"] .kpp-card { --data-low: hsl(217, 80%, 28%); --data-mid-low: hsl(217, 80%, 42%); --data-mid-high: hsl(217, 80%, 56%); --data-high: hsl(217, 80%, 70%); --data-negative: #fb7185; --data-zero: #333842; }
@media (prefers-color-scheme: dark) { html:not(.theme-light):not([data-theme="light"]) .kpp-card { --data-low: hsl(217, 80%, 28%); --data-mid-low: hsl(217, 80%, 42%); --data-mid-high: hsl(217, 80%, 56%); --data-high: hsl(217, 80%, 70%); --data-negative: #fb7185; --data-zero: #333842; } }

/* ── Selector multiempresa (de SageMind) ── */
.empresa-selector { position: relative; display: inline-flex; margin-right: 6px; }
.empresa-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; max-width: 240px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 999px; color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.empresa-btn > svg { flex: 0 0 auto; opacity: .8; }
.empresa-btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.empresa-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.empresa-btn.has-selection { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); }
#empresaBtnLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empresa-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 10000;
  min-width: 240px; max-height: min(72vh, 420px); overflow-y: auto; padding: 4px 0;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.empresa-option {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 12px; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text); text-align: left;
}
.empresa-option:hover { background: var(--bg-hover); }
.empresa-option input { accent-color: var(--accent); pointer-events: none; margin: 0; flex: 0 0 auto; }
.empresa-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empresa-option-all { border-bottom: 1px solid var(--border); font-weight: 600; margin-bottom: 2px; }
.empresa-hint { padding: 6px 12px 4px; font-size: 11.5px; color: var(--text-muted, #888); border-top: 1px solid var(--border); margin-top: 2px; }
@media (max-width: 640px) { .empresa-btn { max-width: 150px; } }

/* ── Actividad unificada (de SageMind) ── */
.activity-page { width: min(980px, 100%); margin: 0 auto; padding: 24px; color: var(--text); box-sizing: border-box; }
.activity-header { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.activity-header > div { min-width: 0; flex: 1; }
.activity-header h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; }
.activity-header p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }
.activity-header > .btn { display: inline-flex; align-items: center; gap: 6px; }
.activity-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.activity-summary > div { --activity-stat-color: var(--accent-text, var(--accent)); padding: 11px 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: center; gap: 0 10px; min-height: 66px; text-align: left; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-surface); }
.activity-summary-icon { grid-column: 1; grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--activity-stat-color) !important; background: color-mix(in srgb, var(--activity-stat-color) 12%, transparent); }
.activity-summary strong { grid-column: 2; color: var(--text); font-size: 20px; line-height: 1.1; }
.activity-summary > div > span:last-child { grid-column: 2; color: var(--text-muted); font-size: 11px; }
.activity-summary .is-warning { --activity-stat-color: #d97706; }
.activity-summary .is-success { --activity-stat-color: var(--status-success-text, #16a34a); }
.activity-summary .is-error { --activity-stat-color: var(--status-error-text, #dc2626); }
.activity-summary .is-unread { --activity-stat-color: #2563eb; }
.activity-summary .is-warning strong, .activity-summary .is-success strong, .activity-summary .is-error strong { color: var(--activity-stat-color); }
.activity-filters { display: grid; grid-template-columns: minmax(200px, 1fr) 180px 160px; gap: 10px; margin-bottom: 14px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); }
.activity-filters label { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--text-muted); font-size: 11px; font-weight: 600; }
.activity-filters select, .activity-filters input { width: 100%; min-height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); box-sizing: border-box; font: inherit; font-size: 13px; }
.activity-filters select { padding: 0 10px; }
.activity-search { position: relative; justify-content: flex-end; }
.activity-search > svg { position: absolute; left: 11px; bottom: 12px; color: var(--text-muted); }
.activity-search input { padding: 0 12px 0 34px; }
.activity-event { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 13px 14px; border: 1px solid var(--border); border-bottom: 0; background: var(--bg-surface); }
.activity-event:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.activity-event:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.activity-event:only-child { border-radius: var(--radius); }
.activity-event.is-unread::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.activity-event-icon { --activity-icon-color: var(--accent-text, var(--accent)); width: 38px; height: 38px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--activity-icon-color) 16%, transparent); border-radius: 11px; color: var(--activity-icon-color); background: color-mix(in srgb, var(--activity-icon-color) 11%, transparent); }
.activity-event-icon.type-query { --activity-icon-color: #0f766e; }
.activity-event-icon.type-agent { --activity-icon-color: #2563eb; }
.activity-event-icon.type-automation { --activity-icon-color: #7c3aed; }
.activity-event-icon.type-anomaly { --activity-icon-color: #d97706; }
.activity-event-icon.type-audit { --activity-icon-color: var(--status-success-text, #16a34a); }
.activity-event-icon.type-capture { --activity-icon-color: #7c3aed; }
.activity-event-icon.type-notification { --activity-icon-color: #2563eb; }
.activity-event-icon .icon { stroke-width: 2.1; }
.activity-event-main { min-width: 0; }
.activity-event-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.activity-kind { color: var(--text-muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.activity-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.activity-status .icon { flex: none; stroke-width: 2.2; }
.activity-status.status-success { color: #15803d; background: color-mix(in srgb, #16a34a 14%, transparent); }
.activity-status.status-error { color: #b91c1c; background: color-mix(in srgb, #dc2626 14%, transparent); }
.activity-status.status-warning { color: #b45309; background: color-mix(in srgb, #d97706 16%, transparent); }
.activity-status.status-running { color: var(--accent); background: var(--accent-soft); }
.activity-status.status-info { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.activity-event time { margin-left: auto; color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.activity-event h3 { margin: 5px 0 2px; color: var(--text); font-size: 13.5px; }
.activity-event p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.activity-inline-icon { display: inline-flex; align-items: center; justify-content: center; margin: 0 1px; color: var(--accent-text, var(--accent)); vertical-align: -3px; }
.activity-inline-icon.tone-chart { color: #0f766e; }
.activity-inline-icon.tone-warning { color: #b45309; }
.activity-inline-icon.tone-danger { color: var(--status-error-text, #b91c1c); }
.activity-inline-icon.tone-muted { color: var(--text-muted); }
.activity-inline-icon.tone-purple { color: #7c3aed; }
.activity-open { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.activity-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.activity-loading, .activity-empty { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); }
.activity-loading { flex-direction: row; }
.activity-loading svg { animation: spin .8s linear infinite; }
.activity-empty strong { color: var(--text); font-size: 13px; }
.activity-empty span { font-size: 12px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .activity-status.status-success { color: #4ade80; }
  :root:not([data-theme="light"]) .activity-status.status-error { color: #f87171; }
  :root:not([data-theme="light"]) .activity-status.status-warning { color: #fbbf24; }
}
:root[data-theme="dark"] .activity-status.status-success { color: #4ade80; }
:root[data-theme="dark"] .activity-status.status-error { color: #f87171; }
:root[data-theme="dark"] .activity-status.status-warning { color: #fbbf24; }
html.theme-dark .activity-summary .is-warning, html[data-theme="dark"] .activity-summary .is-warning { --activity-stat-color: #fbbf24; }
html.theme-dark .activity-summary .is-unread, html[data-theme="dark"] .activity-summary .is-unread { --activity-stat-color: #93c5fd; }
html.theme-dark .activity-event-icon.type-query, html[data-theme="dark"] .activity-event-icon.type-query { --activity-icon-color: #5eead4; }
html.theme-dark .activity-event-icon.type-agent, html[data-theme="dark"] .activity-event-icon.type-agent,
html.theme-dark .activity-event-icon.type-notification, html[data-theme="dark"] .activity-event-icon.type-notification { --activity-icon-color: #93c5fd; }
html.theme-dark .activity-event-icon.type-automation, html[data-theme="dark"] .activity-event-icon.type-automation,
html.theme-dark .activity-event-icon.type-capture, html[data-theme="dark"] .activity-event-icon.type-capture { --activity-icon-color: #c4b5fd; }
html.theme-dark .activity-event-icon.type-anomaly, html[data-theme="dark"] .activity-event-icon.type-anomaly { --activity-icon-color: #fbbf24; }
html.theme-dark .activity-inline-icon.tone-chart, html[data-theme="dark"] .activity-inline-icon.tone-chart { color: #5eead4; }
html.theme-dark .activity-inline-icon.tone-warning, html[data-theme="dark"] .activity-inline-icon.tone-warning { color: #fbbf24; }
html.theme-dark .activity-inline-icon.tone-purple, html[data-theme="dark"] .activity-inline-icon.tone-purple { color: #c4b5fd; }
@media (max-width: 720px) {
  .activity-page { padding: 16px; }
  .activity-header { display: grid; grid-template-columns: 32px minmax(0, 1fr) 36px 28px; align-items: center; gap: 8px; }
  .activity-header > div { grid-column: 2; }
  .activity-header h2 { font-size: 18px; }
  .activity-header p { display: none; }
  .activity-header > .btn { grid-column: 3; width: 36px; height: 36px; padding: 0; justify-content: center; font-size: 0; }
  .activity-header > .page-help-btn { grid-column: 4; }
  .activity-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .activity-filters { grid-template-columns: 1fr 1fr; }
  .activity-search { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .activity-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-summary > .is-unread { grid-column: 1 / -1; }
  .activity-event { grid-template-columns: 32px minmax(0, 1fr); gap: 9px; padding-inline: 11px; }
  .activity-event-icon { width: 32px; height: 32px; }
  .activity-event-icon .icon { width: 18px; height: 18px; }
  .activity-event-top { flex-wrap: wrap; }
  .activity-event time { width: 100%; margin-left: 0; }
}

/* ── Dashboard configurable (de SageMind) ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dash-customize-btn { display: inline-flex; align-items: center; gap: 6px; }
.dash-section h3 .dash-section-link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.dash-section h3:has(.dash-section-link) { display: flex; align-items: center; gap: 6px; }
.dash-activity-item .activity-status { flex: 0 0 auto; }
.dash-activity-item[data-conv] { cursor: pointer; }
.dash-activity-item[data-conv]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dash-personal.is-compact .dash-kpis { margin-bottom: 14px; }
.dash-personal.is-compact .dash-kpi { padding: 10px; }
.dash-personal.is-compact .dash-kpi-value { font-size: 20px; }
.dash-personal.is-compact .dash-section { margin-bottom: 11px; }
.dash-personal.is-compact .dash-list-item { padding-block: 5px; }
.dash-personal.is-compact .dash-briefing-card { margin-bottom: 12px; padding-block: 11px; }
.dash-all-hidden { padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius); }
.dash-all-hidden p { margin: 0; }
.modal-intro { margin: 0 0 14px; color: var(--text-secondary); font-size: 13px; }
.dashboard-config-list { display: flex; flex-direction: column; gap: 6px; }
.dashboard-config-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 48px; padding: 7px 9px 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); }
.dashboard-config-icon { display: inline-flex; color: var(--accent); }
.dashboard-config-name { min-width: 0; color: var(--text); font-size: 13px; font-weight: 600; }
.dashboard-visibility-toggle { display: inline-flex; }
.dashboard-visibility-toggle input, .dashboard-compact-option input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.dashboard-config-order { display: flex; gap: 3px; }
.dashboard-config-order .btn-icon { width: 30px; height: 30px; color: var(--text-secondary); }
.dashboard-config-order .btn-icon:disabled { opacity: .25; cursor: default; }
.dashboard-compact-option { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); cursor: pointer; }
.dashboard-compact-option > span { display: flex; flex-direction: column; gap: 3px; color: var(--text); font-size: 13px; }
.dashboard-compact-option small { color: var(--text-muted); font-size: 11px; font-weight: 400; }
@media (max-width: 520px) {
  .dashboard-config-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dashboard-config-order { grid-column: 2 / -1; justify-content: flex-end; }
}

/* ── Criterios de la empresa ── */
.criterios-box { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.criterio-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); font-size: 13px; color: var(--text); }
.criterio-row select { width: 100%; min-height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font: inherit; font-size: 13px; }
@media (max-width: 640px) { .criterio-row { grid-template-columns: 1fr; gap: 6px; } }

/* ── Traza de una respuesta (admin) ── */
.trace-summary { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); }
.trace-summary .is-error b { color: #dc2626; }
.trace-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.trace-step { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; background: var(--bg-surface); font-size: 13px; }
.trace-step.is-error { border-color: color-mix(in srgb, #dc2626 45%, var(--border)); }
.trace-step-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trace-step-head code { font-size: 12px; color: var(--text-secondary); }
.trace-n { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
.trace-meta { margin-left: auto; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.trace-sum { margin-top: 4px; color: var(--text-secondary); font-size: 12px; overflow-wrap: anywhere; }
.trace-err { margin-top: 4px; color: #b91c1c; font-size: 12px; }
.trace-step details { margin-top: 6px; }
.trace-step summary { cursor: pointer; color: var(--accent); font-size: 12px; }
.trace-step pre { max-height: 220px; overflow: auto; font-size: 11.5px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }


/* ── Ayuda contextual por pantalla (de SageMind) ── */
.help-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.help-index { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1px; }
.help-index-group { margin: 14px 8px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.help-index-group:first-child { margin-top: 0; }
.help-index-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-secondary); font-size: 12.5px; text-align: left; cursor: pointer; }
.help-index-btn span:not(.help-index-dot) { flex: 1; min-width: 0; }
.help-index-btn:hover { background: var(--bg-hover); color: var(--text); }
.help-index-btn[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 550; }
.help-index-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.help-index-select { display: none; }
.help-page { min-width: 0; }
.help-page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.help-page-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 600; color: var(--text); }
.help-here { padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 550; }
.help-page-what { margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.help-block-title { margin: 18px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.help-list { margin: 0; padding-left: 18px; }
.help-list li { margin-bottom: 7px; font-size: 13px; line-height: 1.55; color: var(--text); }
.help-notes .help-list li { color: var(--text-secondary); }
.help-page .help-examples { padding-left: 0; }
.help-page-link { margin: 18px 0 0; font-size: 12.5px; }
.help-page-link a { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); }
.page-help-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; margin-left: 4px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
.page-help-btn:hover { background: var(--bg-hover); color: var(--text); }
@media (max-width: 720px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .help-index { display: none; }
  .help-index-select { display: block; width: 100%; }
}
.help-index-guide { margin-top: 12px; border-top: 1px solid var(--border); border-radius: 0; padding-top: 10px; }
.help-index-select { min-height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font: inherit; }

/* ── Consultas del mes (límite del plan) ── */
.cupo-box { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); }
.cupo-box h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 14px; }
.cupo-box p { margin: 4px 0; font-size: 13px; }
.cupo-box.is-warning { border-color: color-mix(in srgb, #d97706 55%, var(--border)); }
.cupo-box.is-error { border-color: color-mix(in srgb, #dc2626 55%, var(--border)); }
.cupo-bar { height: 8px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; margin: 8px 0 6px; }
.cupo-bar > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.cupo-box.is-warning .cupo-bar > span { background: #d97706; }
.cupo-box.is-error .cupo-bar > span { background: #dc2626; }

/* ── Memoria automática ── */
.memoria-switch { display: flex; align-items: flex-start; gap: 9px; margin: 6px 0 10px; font-size: 13px; color: var(--text); cursor: pointer; }
.memoria-switch input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--accent); flex: 0 0 auto; }
.memory-cat-badge.is-decision { color: #b45309; background: color-mix(in srgb, #d97706 14%, transparent); }


/* ── Consulta en marcha (de SageMind) ── */
.run-banner { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); font-size: 13px; color: var(--text); }
.run-banner > span:nth-child(2) { flex: 1; min-width: 0; }
.run-banner-spin svg { animation: spin .9s linear infinite; color: var(--accent); }

/* ── Modo Profundo POR MENSAJE (copiado de SageMind) ── */
.deep-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; position: relative; transition: background .15s, color .15s, border-color .15s; }
.deep-btn:hover { border-color: var(--accent); color: var(--accent); }
.deep-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.deep-btn.active svg { stroke: #fff; }
/* Sugerencia: un punto de acento; no cambia el modo, solo llama la atención. */
.deep-btn.is-suggested { border-color: var(--accent); color: var(--accent); }
.deep-btn.is-suggested::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.deep-btn.error { border-color: rgba(220,38,38,.5); color: #dc2626; }
.msg-deep-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 650; letter-spacing: .02em; vertical-align: middle; }
.msg-deepen-btn { width: auto !important; padding: 0 8px !important; gap: 4px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
@media (max-width: 480px) { .deep-btn .deep-label { display: none; } .deep-btn { padding: 4px 7px; } }

/* ── Pulso diario (métricas diarias) ── */
.dash-section-sub { margin-left: 6px; font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.pulso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pulso-tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); min-width: 0; }
.pulso-label { font-size: 12px; color: var(--text-secondary); }
.pulso-valor { font-size: 22px; font-weight: 650; color: var(--text); line-height: 1.2; }
.pulso-delta { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.pulso-delta.is-bueno { color: #15803d; }
.pulso-delta.is-malo { color: #b91c1c; }
.pulso-vs { font-weight: 400; color: var(--text-muted); }
.pulso-spark { margin-top: 6px; overflow: visible; }
.pulso-linea { stroke: var(--text-muted); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: .75; }
.pulso-ultimo { fill: var(--accent); stroke: var(--bg-surface); stroke-width: 2; }
.pulso-hit { fill: transparent; cursor: default; }
.pulso-hit:hover { fill: color-mix(in srgb, var(--accent) 25%, transparent); }
:root[data-theme="dark"] .pulso-delta.is-bueno { color: #4ade80; }
:root[data-theme="dark"] .pulso-delta.is-malo { color: #f87171; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pulso-delta.is-bueno { color: #4ade80; }
  :root:not([data-theme="light"]) .pulso-delta.is-malo { color: #f87171; }
}
.pulso-fecha { color: var(--text-muted); font-size: 11px; }

/* Registros de una alerta: cada fila abre el registro en Odoo */
a.toplist-item.alert-rec { color: inherit; text-decoration: none; margin-bottom: 6px; padding: 9px 14px; }
a.toplist-item.alert-rec:hover { border-color: var(--accent); }
a.toplist-item.alert-rec:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Buzón: lo que suele comprar el cliente / vendernos el proveedor (referencia) */
.capture-habitual { margin: 12px 0; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; overflow-x: auto; }
.capture-habitual summary { cursor: pointer; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.capture-hab { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.capture-hab th, .capture-hab td { padding: 6px; border-bottom: 1px solid var(--border); text-align: left; }
.capture-hab .n { text-align: right; white-space: nowrap; }
.capture-hab td .help { font-size: 11px; }
.capture-hab tr.en-doc td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.capture-tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); margin-left: 4px; }
.capture-lines input.cap-qty, .capture-lines input.cap-price { width: 90px; text-align: right; }
.capture-revisado { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 6%, transparent); font-size: 13px; cursor: pointer; }
.capture-revisado input { margin-top: 3px; flex: none; }

/* Programados: el sobre de la barra superior (mismas piezas que la campana) */
.prog-badge { background: var(--accent); }
.prog-item .prog-canales { font-size: 12px; overflow-wrap: anywhere; }
.prog-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.prog-acc button { font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: inherit; cursor: pointer; }
.prog-acc button:hover { border-color: var(--accent); }
.prog-acc .prog-borrar { color: #dc2626; }
.prog-foot { font-size: 12px; color: var(--text-muted, inherit); padding: 8px 12px; }
.prog-form { display: grid; gap: 10px; }
.prog-form label { display: grid; gap: 4px; font-size: 13px; }
.prog-form input, .prog-form select, .prog-form textarea { font: inherit; }
.prog-form fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.prog-form legend { font-size: 12px; padding: 0 4px; }
.prog-form .prog-chk { display: inline-flex; align-items: center; gap: 5px; }
.prog-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.prog-msg { min-height: 1em; font-size: 13px; color: #b45309; margin: 0; }

/* KPIs: tarjetas compactas y estado progresivo, siguiendo el panel de Sage Mind. */
.kpp-card { min-height: 0; padding: 8px 10px; gap: 4px; border-radius: var(--radius);
  background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
.kpp-card:hover { border-color: var(--border-strong); }
.kpp-card-icon { width: 24px; height: 24px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent-text); }
.kpp-card-title { flex: 1; color: var(--text-secondary); font-weight: 500; font-size: 12px; }
.kpp-hbtn { flex: none; width: 22px; height: 22px; border: 0; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-muted); cursor: pointer; opacity: .55; }
.kpp-card:hover .kpp-hbtn, .kpp-hbtn:focus-visible { opacity: 1; }
.kpp-hbtn:hover { background: var(--bg-hover); color: var(--text); }
.kpp-mini-btn.is-on { background: var(--accent-soft); color: var(--accent-text); opacity: 1; }
.kpp-card.is-mini { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
.kpp-fixed-flag { color: var(--text-muted); display: inline-flex; }
.kpp-card-body { gap: 4px; }
.kpp-value { font-size: 22px; font-variant-numeric: tabular-nums; }
.kpp-delta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px;
  border-radius: 999px; background: var(--bg-hover); font-size: 11px; }
.kpp-delta.is-good { background: var(--status-success-bg); color: var(--status-success-text); }
.kpp-delta.is-bad { background: var(--status-error-bg); color: var(--status-error-text); }
.kpp-ask { color: var(--text-muted); }
.kpp-ask:hover { color: var(--accent); text-decoration: none; }
.kpp-mini input { accent-color: var(--accent); }
.kpp-card-loading { justify-content: space-between; }
.kpp-load-state { display: flex; flex-direction: column; gap: 7px; color: var(--text-muted); font-size: 11px; }
.kpp-load-state.is-error { color: var(--danger-text, #b91c1c); }
.kpp-retry { align-self: flex-start; font-size: 11px; padding: 3px 8px; }
.kpp-load-line { display: block; width: 70%; height: 5px; border-radius: 5px;
  background: linear-gradient(90deg, var(--border) 20%, var(--accent-soft) 50%, var(--border) 80%);
  background-size: 200% 100%; animation: kpp-loading 1.3s linear infinite; }
@keyframes kpp-loading { to { background-position: -200% 0; } }
.kpp-companies-list { display: grid; gap: 7px; margin: 10px 0 16px; }
.kpp-company-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.kpp-company-row-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.kpp-company-row-name small { color: var(--text-muted); }
.kpp-edit-mini { display: flex; align-items: center; gap: 8px; }
.kpsel-item.is-present { opacity: .5; cursor: default; }
.kpi-bar-group { min-width: 0; display: flex; align-items: center; gap: 5px; flex: 1 1 0; }
.kpi-bar { flex-wrap: wrap; }
body.kpp-open .kpi-bar { display: none; }
.kpi-bar-grid { overflow-x: auto; }
.kpi-bar .kpi-card { padding: 4px 9px; min-width: 105px; background: var(--bg-elevated); }
.kpi-bar .kpi-card:hover { transform: none; box-shadow: var(--shadow-sm); }
.kpi-bar .kpi-value { font-variant-numeric: tabular-nums; }
.kpi-bar .kpi-flag { display: inline-flex; color: #b45309; }
.kpi-bar-notes { order: 2; flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 4px 12px;
  color: var(--text-muted); font-size: 11px; }
.kpi-bar-notes:empty, .kpi-bar.collapsed .kpi-bar-notes { display: none; }
.kpi-bar-note { display: inline-flex; align-items: center; gap: 4px; }
.kpi-bar-company { flex: none; max-width: 95px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text-muted); font-size: 10px; }
.kpi-bar-company-items { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; }
.kpi-bar-control { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted); cursor: pointer; }
.kpi-bar-control:hover { background: var(--bg-hover); color: var(--text); }
.kpi-updated { flex: none; color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.kpi-bar.collapsed .kpi-updated, .kpi-bar.collapsed .kpi-bar-control { display: none; }
@media (max-width: 760px) {
  .kpp-actions { width: 100%; overflow-x: auto; }
  .kpp-actions button { flex: none; }
  .kpi-bar-company-items { flex-wrap: wrap; }
  .kpi-bar-group { min-width: 200px; }
  .kpi-updated { display: none; }
}

/* KPI panel: same compact canvas and direct controls as SageMind. */
.kpp, .kpp-menu, .kpsel { --accent: #15803d; --accent-soft: #ecfdf3; --accent-text: #15803d; }
html.theme-dark :is(.kpp, .kpp-menu, .kpsel),
html[data-theme="dark"] :is(.kpp, .kpp-menu, .kpsel) {
  --accent: #4ade80; --accent-soft: #10271b; --accent-text: #4ade80;
}
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not([data-theme="light"]) :is(.kpp, .kpp-menu, .kpsel) {
    --accent: #4ade80; --accent-soft: #10271b; --accent-text: #4ade80;
  }
}
.kpp { gap: 10px; padding: 24px 22px; }
.kpp-head { gap: 10px; }
.kpp-head h2 { font-size: 18px; font-weight: 600; }
.kpp-intro { display: flex; align-items: flex-start; gap: 16px; padding: 15px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); }
.kpp-intro[hidden] { display: none; }
.kpp-intro-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.kpp-intro > div { flex: 1; min-width: 0; }
.kpp-intro h3 { margin: 0 0 4px; font-size: 14px; }
.kpp-intro p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.kpp-intro ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; }
.kpp-intro li { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: 12px; }
.kpp-intro li svg { color: var(--accent); }
.kpp-intro-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); }
.kpp-intro-close:hover { background: var(--bg-hover); color: var(--text); }
.kpp-age { font-size: 11px; white-space: nowrap; }
.kpp-actions { align-items: center; gap: 6px; }
.kpp-actions .btn-primary, .kpp-actions .btn-secondary { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 5px 10px; font-size: 12px; white-space: nowrap; }
.kpp-actions .kpp-action-icon { width: 32px; padding: 5px; justify-content: center; }
.kpp-actions .kpp-mini-count { order: -1; padding: 3px 8px; border-radius: 999px; background: var(--bg-hover); }
.kpp-tabs { align-items: center; gap: 4px; margin: 0 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.kpp-tabs::-webkit-scrollbar { display: none; }
.kpp-tab { border: 0; border-radius: 8px; padding: 6px 12px; color: var(--text-secondary); font-weight: 500; }
.kpp-tab:hover, .kpp-tab:focus-visible { background: var(--bg-hover); border-color: transparent; color: var(--text); }
.kpp-tab.is-active { background: var(--accent-soft); color: var(--accent); }
.kpp-tab-n { padding: 1px 6px; border-radius: 999px; background: var(--bg-hover); color: var(--text-muted); opacity: 1; }
.kpp-tab.is-active .kpp-tab-n { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.kpp-tab-add, .kpp-tab-menu-btn { width: 30px; height: 30px; border: 0; border-radius: 8px; }
.kpp-canvas { border-radius: var(--radius-lg); }
.kpp-tile .kpp-card { overflow: hidden; }
.kpp-card { position: relative; gap: 4px; min-width: 0; min-height: 0; padding: 8px 10px; border-radius: var(--radius); background: var(--bg-elevated); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.kpp-card:hover { border-color: var(--border-strong); }
.kpp-card-head { min-width: 0; min-height: 24px; gap: 5px; cursor: grab; touch-action: none; }
.kpp-tile.is-dragging .kpp-card-head { cursor: grabbing; }
.kpp-grip { flex: none; display: inline-flex; align-items: center; margin-left: -4px; color: var(--text-muted); opacity: .35; }
.kpp-card:hover .kpp-grip { opacity: .9; }
.kpp-card-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); }
.kpp-card-title { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.kpp-type-select { flex: 0 1 auto; min-width: 66px; max-width: 130px; width: auto; margin-left: 0; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 7px; background: var(--accent-soft); color: var(--accent); opacity: 1; font-size: 11px; }
.kpp-type-select:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.kpp-type-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpp-type-select:disabled { cursor: default; opacity: .8; }
.kpp-card-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; padding: 0; color: var(--text-muted); opacity: .55; }
.kpp-card:hover .kpp-card-x, .kpp-card-x:focus-visible { opacity: 1; }
.kpp-card-x:hover { background: var(--bg-hover); color: var(--text); }
.kpp-co { flex: none; max-width: 100%; margin: -2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.kpp-card-body { min-height: 0; justify-content: flex-start; gap: 4px; }
.kpp-card-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-width: 0; }
.kpp-card-meta { display: inline-flex; align-items: center; min-width: 0; font-size: 11px; color: var(--text-muted); }
.kpp-delta-ref { margin-left: 6px; color: var(--text-muted); white-space: nowrap; font-size: 11px; }
.kpp-value { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpp-delta { background: var(--bg-hover); color: var(--text-secondary); padding: 1px 6px; border-radius: 999px; font-size: 11px; }
.kpp-delta.is-good { background: color-mix(in srgb, var(--success) 14%, var(--bg-elevated)); color: var(--success); }
.kpp-delta.is-bad { background: color-mix(in srgb, var(--danger) 14%, var(--bg-elevated)); color: var(--danger); }
.kpp-spark { flex: none; min-height: 0; height: 34px; max-height: 34px; margin: 2px -2px 0; }
.kpp-spark svg { display: block; width: 100%; height: 100%; }
.kpp-spark-line { stroke: color-mix(in srgb, var(--text-muted) 70%, transparent); stroke-linecap: round; stroke-linejoin: round; }
.kpp-spark-area { fill: color-mix(in srgb, var(--accent) 9%, transparent); opacity: 1; }
.kpp-spark-dot { stroke: var(--bg-elevated); stroke-width: 1.5; }
.kpp-tile.is-short .kpp-spark, .kpp-tile.is-short .kpp-warning { display: none; }
.kpp-warning { display: flex; align-items: flex-start; gap: 5px; margin: 0; color: #a16207; font-size: 11px; line-height: 1.35; }
.kpp-warning svg { flex: none; margin-top: 1px; }
.kpp-definition { max-height: 50vh; margin: 0; overflow: auto; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-hover); color: var(--text); font: 11px/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.kpp-fixed-note { margin: 0 0 12px; color: var(--text-muted); font-size: 12px; }
.kpp-chart-head { flex-wrap: wrap; row-gap: 2px; }
.kpp-chart-head:empty { display: none; }
.kpp-chart-note { color: var(--text-muted); }
.kpp-type-warning { color: #a16207 !important; white-space: normal; }
.kpp-tile .kpp-card-body.is-chart { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
.kpp-tile .kpp-canvas-wrap { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.kpp-chart-canvas { display: block; width: 100% !important; height: 100% !important; min-width: 0; min-height: 0; }
.kpp-tile .kpp-rank { flex: 1; min-width: 0; min-height: 0; overflow: auto; }
.kpp-tile .kpp-gauge { flex: 1; min-height: 0; align-items: center; overflow: hidden; }
.kpp-tile .kpp-gauge svg { width: auto; height: 100%; max-width: 100%; max-height: 100%; min-height: 0; }
.kpp-tile .kpp-map, .kpp-tile .kpp-heat { min-height: 0; }
.kpp-resize { right: 4px; bottom: 4px; width: 14px; height: 14px; background: none; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); border-radius: 0 0 4px 0; z-index: 3; }
.kpp-tile:hover .kpp-resize, .kpp-tile:focus-within .kpp-resize { opacity: .7; }
.kpp-widget { cursor: grab; touch-action: none; }
.kpp-widget:hover { background: color-mix(in srgb, var(--text-muted) 7%, transparent); }
.kpp-widget:hover .kpp-widget-tools { display: inline-flex; }
.kpp-load-state { flex: 1; justify-content: center; font-size: 12px; }
.kpp-load-state.is-error { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.kpsel [hidden] { display: none !important; }
.kpsel-help { margin: 0; color: var(--text-muted); font-size: 12px; }
.kpsel-status { flex: none; color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.kpsel-status:empty { display: none; }
.kpsel-item.is-full { opacity: .5; cursor: default; }
.kpsel-search { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated); }
.kpsel-search:focus-within { border-color: var(--accent); }
.kpsel-search svg { flex: none; color: var(--text-muted); }
.kpsel-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 13px; }
.kpsel-selected { margin: -6px 0 0; color: var(--accent); font-size: 11px; }
.kpsel-no-results { margin: 0; padding: 12px; border-radius: 8px; background: var(--bg-hover); color: var(--text-muted); font-size: 12px; }
.kpp-canvas.is-stack .kpp-card-head, .kpp-canvas.is-stack .kpp-widget { cursor: default; touch-action: auto; }
.kpp-canvas.is-stack .kpp-grip { display: none; }
@media (hover: none) { .kpp-card-x, .kpp-tile .kpp-resize { opacity: .7; } }
@media (max-width: 767px) {
  .kpp { padding: 14px; }
  .kpp-actions { width: 100%; overflow-x: auto; margin-left: 0; }
  .kpp-canvas.is-stack .kpp-spark { flex: none; height: 38px; }
  .kpp-canvas.is-stack .kpp-card.is-chart { min-height: 260px; }
}

/* ── Consultas del mes: medidor del sidebar y su panel (de SageMind) ─────────── */
/* Panel de uso (sesión / semana), estilo Claude. Se ancla sobre el medidor. */
.usage-panel { position: fixed; z-index: 1200; width: 300px; max-width: calc(100vw - 24px); padding: 12px 14px 12px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0,0,0,.18); animation: usagePanelIn .13s cubic-bezier(.16,.8,.3,1); }
.usage-panel-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 650; margin-bottom: 10px; }
.usage-panel-close { background: none; border: none; color: var(--text-muted); width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.usage-panel-close:hover { background: var(--bg-hover); color: var(--text); }
.usage-row { padding: 8px 0; border-top: 1px solid var(--border); }
.usage-row-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; }
.usage-row-title { font-weight: 600; color: var(--text); }
.usage-row-pct { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-weight: 600; }
.usage-row-bar { height: 7px; margin: 6px 0 5px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.usage-row-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s ease; }
.usage-row-reset { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.usage-row-reset-txt { flex: 1 1 auto; min-width: 0; }
.usage-row-reset svg { flex: none; opacity: .7; }
.usage-row-remaining { margin-left: auto; flex: none; white-space: nowrap; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.usage-row-reset > svg + * { min-width: 0; }
.usage-row-sub { margin-top: 2px; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.usage-row.is-warn .usage-row-bar span { background: #f59e0b; }
.usage-row.is-warn .usage-row-pct { color: #b45309; }
.usage-row.is-over .usage-row-bar span { background: #ef4444; }
.usage-row.is-over .usage-row-pct { color: #dc2626; }
[data-theme="dark"] .usage-row.is-warn .usage-row-pct { color: #fbbf24; }
[data-theme="dark"] .usage-row.is-over .usage-row-pct { color: #f87171; }
.usage-blocked { display: flex; align-items: center; gap: 6px; padding: 7px 9px; margin-bottom: 8px; border-radius: var(--radius-sm); background: rgba(239,68,68,.1); color: #dc2626; font-size: 12px; font-weight: 600; }
[data-theme="dark"] .usage-blocked { color: #f87171; }
.usage-panel-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); line-height: 1.45; }
.usage-panel-note svg { flex: none; margin-top: 2px; }
.usage-panel-link { margin-top: 8px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; }
.usage-panel-link:hover { border-color: var(--accent); color: var(--accent-text); }
/* Consultas del mes (plan): reparto por tipo, por usuario y meses anteriores */
.usage-breakdown, .usage-history { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.usage-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; border-radius: 999px; background: var(--bg-hover); font-size: 11px; color: var(--text-secondary); }
.usage-chip b { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.usage-sub-title { margin-top: 10px; font-size: 11px; font-weight: 650; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.usage-users { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.usage-user { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; align-items: center; gap: 8px; font-size: 12px; }
.usage-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.usage-user-bar { height: 5px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.usage-user-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); opacity: .75; }
.usage-user b { font-weight: 650; font-variant-numeric: tabular-nums; min-width: 2.5ch; text-align: right; }
.usage-meter.is-unlimited .usage-meter-bar { display: none; }
/* Medidor de ventanas de uso (sidebar, bajo el email) */
.usage-meter { display: flex; align-items: center; gap: 6px; margin-top: 3px; min-width: 0; cursor: pointer; border-radius: 6px; }
.usage-meter:hover .usage-meter-text { color: var(--text); }
.usage-meter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.usage-meter-bar { flex: 0 0 44px; height: 4px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.usage-meter-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .3s ease; }

/* SageMind visual shell: same layout and spacing, with OdooMind's own accent. */
.login-screen {
  padding: clamp(16px, 4vw, 48px);
  overflow-y: auto;
  background: radial-gradient(120% 90% at 8% 0%, var(--accent-soft) 0%, transparent 58%), var(--bg);
}
.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("topo-login.svg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(105deg, #000 0%, #000 38%, transparent 72%);
  mask-image: linear-gradient(105deg, #000 0%, #000 38%, transparent 72%);
  pointer-events: none;
}
html.theme-dark .login-screen::before,
html[data-theme="dark"] .login-screen::before { background-image: url("topo-login-dark.svg"); }
.login-layout { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(28px, 5vw, 40px); width: 100%; max-width: 420px; margin: auto; }
.login-hero { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.login-eyebrow { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.login-lockup { display: flex; align-items: center; gap: 12px; }
.login-lockup .login-logo { flex: none; }
.login-wordmark { margin: 0; color: var(--text); font-size: clamp(30px, 5vw, 42px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.login-claim { max-width: 46ch; margin: 0; color: var(--text-secondary); font-size: clamp(14.5px, 1.4vw, 16.5px); line-height: 1.5; }
.login-values { display: none; margin: 6px 0 0; padding: 0; list-style: none; }
.login-values li { display: flex; align-items: flex-start; gap: 11px; color: var(--text-secondary); font-size: 14px; line-height: 1.45; }
.login-values li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; }
.login-layout .login-card { width: 100%; max-width: none; padding: clamp(24px, 4vw, 34px); box-shadow: 0 10px 34px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04); }
.login-card-head { margin-bottom: 20px; }
.login-card-head h2 { margin: 0 0 4px; color: var(--text); font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.login-card-head .login-sub { margin: 0; font-size: 13.5px; line-height: 1.45; }
.login-layout .login-form input { width: 100%; }
.login-layout .login-hint { margin: 18px 0 0; text-align: center; font-size: 12.5px; }
.login-layout .login-hint a { color: var(--accent); text-decoration: none; font-weight: 550; }
.login-layout .login-hint a:hover { text-decoration: underline; }
.login-layout .login-btn { font-weight: 600; }
@media (min-width: 860px) and (min-height: 560px) {
  .login-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); align-items: center; gap: clamp(48px, 7vw, 110px); max-width: min(1180px, 88vw); }
  .login-values { display: flex; flex-direction: column; gap: 12px; }
}
@media (max-height: 560px) and (max-width: 859px) {
  .login-screen { align-items: flex-start; padding: 14px; }
  .login-layout { gap: 16px; }
  .login-eyebrow, .login-claim { display: none; }
  .login-wordmark { font-size: 24px; }
}

.topbar { min-height: 52px; padding: 12px 20px; flex-shrink: 0; }
.topbar .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; }
.topbar #toggleSidebar { display: none; }
.app.sidebar-collapsed .topbar #toggleSidebar { display: inline-flex; }
@media (max-width: 767px) { .topbar #toggleSidebar { display: inline-flex; } }

.sidebar-nav { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 1px; padding: 2px 8px 6px; }
.sidebar-nav-btn {
  display: flex; width: 100%; min-width: 0; align-items: center; justify-content: flex-start; gap: 9px;
  padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--text-secondary); font-size: 12.5px; font-weight: 500; line-height: 1.2;
  white-space: nowrap; transition: background .12s ease, color .12s ease;
}
.sidebar-nav-btn > span:not(.capture-badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav-btn svg { flex: none; color: var(--text-muted); transition: color .12s ease; }
.sidebar-nav-btn:hover { background: var(--bg-hover); border-color: transparent; color: var(--text); box-shadow: none; transform: none; }
.sidebar-nav-btn:hover svg, .sidebar-nav-btn.active svg { color: var(--accent); stroke: currentColor; }
.sidebar-nav-btn.active { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }
.sidebar-nav-btn:focus-visible, .sidebar-nav-label:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sidebar-nav-group { margin-top: 6px; }
.sidebar-nav-label { display: flex; align-items: center; gap: 5px; width: 100%; margin: 0 0 1px; padding: 4px 6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: 11px; font-weight: 650; letter-spacing: .3px; text-transform: uppercase; text-align: left; }
.sidebar-nav-label:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-nav-list { display: flex; flex-direction: column; gap: 1px; }
.sidebar-nav-group.collapsed > .sidebar-nav-list { display: none; }
.sidebar-nav-group.collapsed > .sidebar-nav-label .sidebar-caret { transform: rotate(-90deg); }
.sidebar-nav .capture-badge { margin-left: auto; }
.app.sidebar-collapsed .sidebar-nav { align-items: center; padding: 6px 4px; }
.app.sidebar-collapsed .sidebar-nav-btn { width: 38px; height: 38px; justify-content: center; padding: 0; border-radius: var(--radius-sm); }
.app.sidebar-collapsed .sidebar-nav-group { width: 100%; }
.app.sidebar-collapsed .sidebar-nav-label { justify-content: center; padding: 6px; }
.app.sidebar-collapsed .sidebar-nav-label > span:not(.sidebar-caret) { display: none; }
.app.sidebar-collapsed .sidebar-nav-list { align-items: center; }
@media (max-width: 767px) { .sidebar-nav-label { min-height: 40px; font-size: 12px; } }
.usage-meter-text { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usage-meter.is-warn .usage-meter-fill { background: #f59e0b; }
.usage-meter.is-warn .usage-meter-text { color: #b45309; }
.usage-meter.is-over .usage-meter-fill { background: #ef4444; }
.usage-meter.is-over .usage-meter-text { color: #dc2626; font-weight: 600; }
[data-theme="dark"] .usage-meter.is-warn .usage-meter-text { color: #fbbf24; }
[data-theme="dark"] .usage-meter.is-over .usage-meter-text { color: #f87171; }
@keyframes usagePanelIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.usage-meter[hidden], .usage-panel[hidden] { display: none !important; }

/* ── Buzón: envío a otro destinatario y dudas del pedido (de SageMind) ── */
.buzon-review-questions { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-secondary); }
.buzon-review-questions strong { font-size: 13px; }
.buzon-review-questions label { display: grid; gap: 5px; font-size: 12.5px; }
.buzon-review-answer { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; resize: vertical; }
.buzon-review-questions .buzon-review-check { display: flex; align-items: flex-start; gap: 8px; }
.buzon-review-check input { margin-top: 2px; }
.buzon-shipping-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
.buzon-shipping-edit strong,.buzon-shipping-edit p { grid-column: 1 / -1; margin: 0; }
.buzon-shipping-edit input { width: 100%; min-width: 0; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; }
@media (max-width: 640px) { .buzon-shipping-edit { grid-template-columns: 1fr; } }
.buzon-review-questions button { justify-self: start; }
.buzon-review-questions { margin-top: 10px; }
.buzon-shipping-edit p.help { font-size: 12px; color: var(--text-muted); line-height: 1.45; }

/* Buzón: crear cliente/proveedor con datos públicos y sugerencias por línea (de SageMind) */
.buzon-crear { margin-top: 8px; font-size: 13px; }
.buzon-crear > summary { cursor: pointer; color: var(--accent); }
.buzon-crear form { display: grid; gap: 8px; margin-top: 8px; }
.buzon-crear label { display: grid; gap: 4px; font-size: 12.5px; }
.buzon-form-msg { font-size: 12.5px; color: var(--text-muted); }
.buzon-web-results { display: grid; gap: 7px; font-size: 12.5px; }
.buzon-web-results:empty { display: none; }
.buzon-web-results p { margin: 0; }
.buzon-web-field { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 7px; }
.buzon-crear .buzon-web-field label { display: flex; flex-direction: row; align-items: start; gap: 7px; min-width: 0; color: var(--text); font-size: 12.5px; }
.buzon-crear .buzon-web-field input[type="checkbox"] { margin-top: 2px; padding: 0; }
.buzon-web-field small { color: var(--text-muted); }
.buzon-web-field a { white-space: nowrap; }
.buzon-web-sources summary { cursor: pointer; }
.buzon-web-sources ol { margin: 7px 0 0; padding-left: 22px; }
.buzon-web-sources li { margin: 5px 0; overflow-wrap: anywhere; }
.buzon-web-sources small { display: block; color: var(--text-muted); }
.buzon-alta-origen { display: flex; flex-wrap: wrap; gap: 6px 18px; border: 0; padding: 0; margin: 2px 0; min-width: 0; }
.buzon-alta-origen legend { font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--text); }
.buzon-crear .buzon-alta-origen label { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; cursor: pointer; color: var(--text); }
.buzon-alta-copia { font-size: 12.5px; }
.buzon-alta-manual:not([hidden]) { display: grid; gap: 8px; }
.buzon-alta-manual select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.buzon-alta-copia[hidden], .buzon-alta-manual[hidden] { display: none; }
.capture-sugs { margin: 6px 0; }
.capture-sugs-btn { text-align: left; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.capture-sugs .capture-chips:empty { display: none; }
.capture-sugs .capture-chip { text-align: left; }

/* Account menu follows the same single-column structure as SageMind. */
.login-form-row { display: flex; gap: 12px; }
.login-form-row > label { flex: 1 1 0; min-width: 0; }
@media (max-width: 440px) { .login-form-row { flex-direction: column; gap: 14px; } }
.brand-mark { flex: none; width: 18px; height: 18px; object-fit: contain; }
.user-menu { width: 260px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.user-menu .menu-item { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.user-menu .menu-item .icon { flex: none; }
.user-menu .license-badge { width: 100%; }
.user-menu .license-label { flex: 1; }
.user-menu .menu-lang { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; color: var(--text); font-size: 13px; }
.user-menu .menu-lang label { cursor: pointer; }
.user-menu .menu-lang .lang-selector { min-width: 56px; }
.sidebar-customize-popover { z-index: 10001; }
.sidebar-global-search input { padding-right: 38px; }
.gs-clear, .gs-kbd { position: absolute; right: 18px; top: calc(50% - 2px); transform: translateY(-50%); }
.gs-clear { display: none; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 17px; }
.gs-clear:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-global-search input:not(:placeholder-shown) ~ .gs-clear { display: flex; }
.gs-kbd { padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-hover); color: var(--text-muted); font-size: 9.5px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.sidebar-global-search input:not(:placeholder-shown) ~ .gs-kbd, .sidebar-global-search input:focus ~ .gs-kbd { display: none; }


:root { --accent-text: var(--accent); --status-success-bg: #dcfce7; --status-success-text: #15803d; --status-error-bg: #fee2e2; --status-error-text: #b91c1c; }
html.theme-dark, html[data-theme="dark"] { --status-success-bg: #14532d; --status-success-text: #86efac; --status-error-bg: #7f1d1d; --status-error-text: #fca5a5; }
/* ── Dashboard «Centro de mando» (propuesta A, 02/11/2026) ──
   Cabecera con saludo y «Pregúntale a tu Odoo», Pulso en tarjetas, dos columnas de trabajo y el
   Briefing en franja. Las clases dash-* que quedan (esqueleto, vacíos, personalizador) siguen. */
.dash-personal.dsh { width: 100%; max-width: 1120px; padding: 22px 28px 40px; box-sizing: border-box; }
.dsh .dsh-topline { margin-bottom: 14px; }
.dsh .dsh-topline h2 { font-size: 15px; font-weight: 650; color: var(--text-muted); }
.dsh .dsh-topline h2 .icon, .dsh .dsh-topline h2 svg { opacity: .8; }
.dsh-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: start;
  padding: 22px 24px; border-radius: 20px; border: 1px solid var(--border);
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 55%), var(--bg-elevated);
}
.dsh-hello { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.dsh-sub { margin: 4px 0 0; color: var(--text-muted); font-size: 13.5px; }
.dsh-sub::first-letter { text-transform: uppercase; }
.dsh-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.dsh-stat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--bg-hover); font-size: 12.5px; color: var(--text-secondary); }
.dsh-stat b { color: var(--text); font-variant-numeric: tabular-nums; }
.dsh-hero-acts { display: flex; gap: 8px; }
.dsh-ask {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 6px 6px 6px 16px; border: 1px solid var(--border-strong, var(--border)); border-radius: 14px; background: var(--bg);
  color: var(--text-muted); transition: border-color .15s ease, box-shadow .15s ease;
}
.dsh-ask:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dsh-ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; padding: 9px 0; }
.dsh-ask .btn { flex: none; border-radius: 10px; }
.dsh-chips { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; margin-top: -4px; }
.dsh-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-elevated); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .15s ease, color .15s ease;
}
.dsh-chip svg { color: var(--accent); flex: none; }
.dsh-chip:hover, .dsh-chip:focus-visible { border-color: var(--accent); color: var(--accent-text); outline: none; }
.dsh-hint { grid-column: 1 / -1; margin: -4px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }

.dsh-block { margin-top: 26px; }
.dsh-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 650; color: var(--text); }
.dsh-h > svg { color: var(--accent); flex: none; }
.dsh-h small { font-weight: 500; color: var(--text-muted); font-size: 12px; }
.dsh-link { margin-left: auto; border: 0; background: none; padding: 2px 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent-text); cursor: pointer; white-space: nowrap; }
.dsh-link:hover { text-decoration: underline; }
.dsh-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dsh-metric {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 14px 10px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; transition: transform .15s ease, box-shadow .15s ease;
}
.dsh-metric:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .28); }
.dsh-metric-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.dsh-metric-label { font-size: 12px; font-weight: 550; color: var(--text-muted); min-width: 0; }
.dsh-metric-val { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.dsh-metric-vs { font-size: 11.5px; color: var(--text-muted); }
.dsh-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 650; white-space: nowrap; flex: none; }
.dsh-delta.is-bueno { color: var(--status-success-text); background: var(--status-success-bg); }
.dsh-delta.is-malo { color: var(--status-error-text); background: var(--status-error-bg, color-mix(in srgb, var(--status-error-text) 12%, transparent)); }
.dsh-delta.is-plano { color: var(--text-muted); background: var(--bg-hover); }
.dsh-spark { display: block; width: 100%; height: 34px; overflow: visible; }
.dsh-spark-line { fill: none; stroke: var(--accent); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.dsh-spark-area { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.dsh-spark-dot { fill: var(--accent); }
.dsh-spark.is-malo .dsh-spark-line { stroke: var(--status-error-text); }
.dsh-spark.is-malo .dsh-spark-dot { fill: var(--status-error-text); }
.dsh-spark.is-malo .dsh-spark-area { fill: color-mix(in srgb, var(--status-error-text) 12%, transparent); }
.dsh-minis { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.dsh-mini { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px dashed var(--border); border-radius: 12px; font-size: 12.5px; color: var(--text-secondary); max-width: 100%; }
.dsh-mini b { color: var(--text); font-variant-numeric: tabular-nums; }

.dsh-cols { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dsh-cols.is-single { grid-template-columns: minmax(0, 1fr); }
.dsh-card { min-width: 0; padding: 16px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; }
.dsh-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; color: var(--text); }
.dsh-row > svg { color: var(--text-muted); flex: none; }
.dsh-row.dash-conv-item { cursor: pointer; }
.dsh-row.dash-conv-item:hover, .dsh-row.dash-conv-item:focus-visible { background: var(--bg-hover); outline: none; }
.dsh-row.is-read { color: var(--text-secondary); }
.dsh-row-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-row-meta { margin-left: auto; padding-left: 8px; font-size: 12px; color: var(--text-muted); white-space: nowrap; flex: none; }
.dsh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.dsh-dot.is-read { background: transparent; }
.dsh-dot.is-error:not(.is-read) { background: var(--status-error-text); }
.dsh-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--text-on-accent, #fff); font-size: 11px; font-weight: 700; }
.dsh-agent { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; }
.dsh-agent-ava { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); }
.dsh-agent-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; white-space: nowrap; flex: none; }
.dsh-agent-meta .dsh-link { margin-left: 0; }
.dsh-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.dsh-status.is-ok { color: var(--status-success-text); background: var(--status-success-bg); }
.dsh-status.is-error { color: var(--status-error-text); background: var(--status-error-bg, color-mix(in srgb, var(--status-error-text) 12%, transparent)); }
.dsh-sep { height: 1px; background: var(--border); margin: 12px 4px 14px; }

.dsh-briefing {
  margin-top: 16px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border);
  background: linear-gradient(100deg, color-mix(in srgb, #f59e0b 16%, var(--bg-elevated)), var(--bg-elevated) 70%);
}
.dsh-briefing-sol { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: #f59e0b; color: #fff; box-shadow: 0 6px 16px -8px #f59e0b; }
.dsh-briefing-txt { min-width: 0; }
.dsh-briefing-txt b { color: var(--text); }
.dsh-briefing-txt p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.dsh-briefing-acts { margin-left: auto; display: flex; gap: 8px; flex: none; }

/* Esqueleto con la misma forma que el diseño. */
.dsh-skel-hero { display: block; min-height: 196px; border-radius: 20px; }
.dsh-skel-metric { display: block; min-height: 128px; border-radius: 16px; }
.dsh-skel-col { display: block; min-height: 240px; border-radius: 16px; }
/* Compacto: el mismo diseño con menos aire. */
.dash-personal.dsh.is-compact { padding-top: 14px; }
.dsh.is-compact .dsh-hero { padding: 16px 18px; gap: 12px 18px; }
.dsh.is-compact .dsh-block, .dsh.is-compact .dsh-cols { margin-top: 16px; }
.dsh.is-compact .dsh-metric { padding: 11px 12px 8px; }
.dsh.is-compact .dsh-row, .dsh.is-compact .dsh-agent { padding-top: 6px; padding-bottom: 6px; }

@media (max-width: 1100px) { .dsh-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .dsh-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .dash-personal.dsh { padding: 14px 14px 28px; }
  .dsh-hero { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
  .dsh-hero-acts { order: 3; }
  .dsh-hello { font-size: 20px; }
  .dsh-ask .btn span { display: none; }
  .dsh-ask input { font-size: 14px; }
  .dsh-briefing { flex-wrap: wrap; }
  .dsh-briefing-acts { margin-left: 0; width: 100%; }
  .dsh-briefing-acts .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .dsh-metric { transition: none; } .dsh-metric:hover { transform: none; } }

/* Dashboard: recent work is shown as distinct, scannable cards and entries. */
.dsh-cols { grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); gap: 18px; }
.dsh-right-stack { display: grid; align-content: start; gap: 18px; min-width: 0; }
.dsh-card {
  --dsh-icon-color: var(--accent);
  padding: 20px; border-radius: 20px;
  box-shadow: 0 10px 28px -25px rgba(15, 23, 42, .3);
}
.dsh-card[data-dashboard-widget="agents"] { --dsh-icon-color: #7c3aed; }
.dsh-card[data-dashboard-widget="notifications"] { --dsh-icon-color: #b45309; }
.dsh-card[data-dashboard-widget="activity"] { --dsh-icon-color: #0f766e; }
html.theme-dark .dsh-card[data-dashboard-widget="agents"], html[data-theme="dark"] .dsh-card[data-dashboard-widget="agents"] { --dsh-icon-color: #a78bfa; }
html.theme-dark .dsh-card[data-dashboard-widget="notifications"], html[data-theme="dark"] .dsh-card[data-dashboard-widget="notifications"] { --dsh-icon-color: #fbbf24; }
html.theme-dark .dsh-card[data-dashboard-widget="activity"], html[data-theme="dark"] .dsh-card[data-dashboard-widget="activity"] { --dsh-icon-color: #5eead4; }
.dsh-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.dsh-card-symbol { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 13px; background: color-mix(in srgb, var(--dsh-icon-color) 14%, var(--bg-elevated)); color: var(--dsh-icon-color); }
.dsh-card-symbol .icon, .dsh-entry-icon .icon { stroke-width: 2.25; }
.dsh-stat .icon, .dsh-ask > .icon, .dsh-h > .icon { stroke-width: 2.25; }
.dsh-stat .icon { color: var(--accent); }
.dsh-card-heading { min-width: 0; flex: 1; }
.dsh-card-heading h3 { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--text); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.dsh-card-heading p { margin: 3px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.dsh-card-head > .dsh-link { display: inline-flex; align-items: center; gap: 2px; margin-left: 0; flex: none; padding: 7px 0 7px 8px; }
.dsh-card .dsh-badge { min-width: 21px; height: 21px; }
.dsh-entry-list { display: grid; gap: 8px; }
.dsh .dsh-entry {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px;
  min-width: 0; min-height: 62px; padding: 9px 11px; border: 1px solid transparent; border-radius: 12px;
  background: var(--bg); color: var(--text); font-size: 13.5px;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.dsh .dsh-entry[role="button"] { cursor: pointer; }
.dsh .dsh-entry[role="button"]:hover, .dsh .dsh-entry[role="button"]:focus-visible {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); outline: none;
}
.dsh-entry-icon {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--dsh-icon-color) 10%, var(--bg-elevated)); color: var(--dsh-icon-color);
}
.dsh-entry-icon.is-alert { color: #b45309; background: color-mix(in srgb, #f59e0b 15%, var(--bg-elevated)); }
.dsh-entry-icon.is-success { color: var(--status-success-text); background: var(--status-success-bg); }
.dsh-entry-icon.is-report { color: #6d28d9; background: color-mix(in srgb, #8b5cf6 14%, var(--bg-elevated)); }
.dsh-entry-icon.is-inbox { color: #0e7490; background: color-mix(in srgb, #06b6d4 14%, var(--bg-elevated)); }
html.theme-dark .dsh-entry-icon.is-alert, html[data-theme="dark"] .dsh-entry-icon.is-alert { color: #fbbf24; }
html.theme-dark .dsh-entry-icon.is-report, html[data-theme="dark"] .dsh-entry-icon.is-report { color: #c4b5fd; }
html.theme-dark .dsh-entry-icon.is-inbox, html[data-theme="dark"] .dsh-entry-icon.is-inbox { color: #67e8f9; }
.dsh-entry-icon.dsh-agent-ava { width: 44px; height: 44px; }
.dsh-entry-icon.dsh-agent-ava svg { display: block; }
.dsh-entry-main { display: grid; align-content: center; gap: 3px; min-width: 0; }
.dsh-entry-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; line-height: 1.35; }
.dsh-entry-time { color: var(--text-muted); font-size: 11.5px; line-height: 1.35; }
.dsh-entry-arrow { display: grid; place-items: center; color: var(--text-muted); opacity: .7; }
.dsh .dsh-entry:hover .dsh-entry-arrow, .dsh .dsh-entry:focus-visible .dsh-entry-arrow { color: var(--accent-text); opacity: 1; }
.dsh .dash-notif-item { flex-wrap: nowrap; }
.dsh .dash-notif-item .dsh-entry-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.dsh .dash-notif-item.is-read .dsh-entry-title { color: var(--text-secondary); font-weight: 500; }
.dsh .dash-notif-item.is-read .dsh-entry-icon { opacity: .7; }
.dsh .dash-notif-item .dsh-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border: 2px solid var(--bg-elevated); box-sizing: content-box; }
.dsh .dash-notif-item .dsh-dot.is-read { display: none; }
.dsh .dash-notif-detail { grid-column: 2 / -1; width: auto; margin: 1px 0 2px; padding: 9px 11px; border-radius: 9px; overflow-wrap: anywhere; }
.dsh-agent-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; }
.dsh-agent-actions .dash-list-action { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; font-size: 11.5px; }
.dsh-agent-actions .dash-list-action:hover { background: none; color: var(--accent-text); text-decoration: underline; }
.dsh .dash-activity-item .activity-status { justify-self: end; margin: 0; }
@media (min-width: 900px) { .dsh-activity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .dsh-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .dsh-card { padding: 16px; border-radius: 16px; }
  .dsh-card-head { gap: 10px; }
  .dsh-card-symbol { width: 40px; height: 40px; }
  .dsh .dsh-entry { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 9px; padding: 9px; }
  .dsh-entry-icon, .dsh-entry-icon.dsh-agent-ava { width: 40px; height: 40px; }
  .dsh-card-head > .dsh-link { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .dsh .dsh-entry { transition: none; } }

/* Shared chat layout mirrors SageMind; Odoo-specific content stays in its own panels. */
.welcome-title { color: var(--text); background: none; -webkit-text-fill-color: currentColor; }
.sug { color: var(--text); }
.sug[hidden] { display: none; }
.sug-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 9px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.sug-icon .icon { width: 20px; height: 20px; }
.morning-briefing-btn .morning-icon { display: inline-flex; align-items: center; justify-content: center; }
.plan-step-ic { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 19px; color: var(--accent-text, var(--accent)); }
.plan-step.done .plan-step-ic { color: var(--success); }
.plan-step.failed .plan-step-ic { color: var(--danger); }
.plan-step.skipped .plan-step-ic { color: var(--text-muted); }
.tools-group-icon, .tool-head .tool-icon { color: var(--accent-text, var(--accent)); }
.tool-call.done .tool-head .tool-icon { color: var(--success); }
.tools-group-toggle, .tool-head .tmeta, .tool-check { display: inline-flex; align-items: center; justify-content: center; }
.messages { width: 100%; max-width: 1040px; padding: 28px 24px 40px; gap: 28px; }
.composer-wrap { padding: 14px 20px 18px; }
.composer { max-width: 760px; padding: 12px 14px 8px; }
.app.sidebar-collapsed .sidebar-nav-label { display: none; }
.dsh .dash-notif-item:hover, .dsh .dash-notif-item:focus-visible { background: var(--bg-hover); outline: none; }
.dsh .dash-notif-detail { color: var(--text-secondary); }
@media (max-width: 767px) {
  .welcome { justify-content: flex-start; padding: clamp(26px, 7vh, 58px) 12px 28px; }
  .welcome-title { max-width: 330px; margin-bottom: 9px; font-size: clamp(25px, 8vw, 30px); line-height: 1.14; }
  .welcome-sub { max-width: 340px; margin-bottom: 22px; font-size: 13.5px; line-height: 1.5; }
  .suggestions { gap: 8px; max-width: 430px; }
  .sug { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; gap: 1px 10px; min-height: 66px; padding: 11px 12px; border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
  .sug-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; }
  .sug-title { grid-column: 2; margin: 0; font-size: 13.5px; }
  .messages { padding: 18px 14px 28px; gap: 18px; }
  .composer-wrap { padding: 10px 12px 14px; }
}
@media (max-width: 374px) {
  .welcome { padding-top: 22px; }
  .welcome-title { font-size: 24px; }
  .sug { min-height: 62px; padding: 9px 10px; }
}
@media (hover: none) and (max-width: 767px) {
  .sug:hover { transform: none; box-shadow: none; }
}

.settings-panel-layout { grid-template-columns: 236px minmax(0, 1fr); }
.settings-panel-tabs { padding: 18px 12px; }
.settings-panel-tabs .settings-tab { padding: 7px 10px; border-radius: 8px; font-size: 13.5px; }
.settings-panel-tabs .settings-tab.active { font-weight: 600; }
.settings-panel-content { padding: 22px 28px 80px; }
@media (max-width: 768px) {
  .settings-panel-layout { grid-template-columns: 1fr; }
  .settings-panel-tabs { padding: 0 12px 8px; }
  .settings-panel-content { padding: 18px 14px 28px; }
}

/* Agentes: lista, catálogo y chats en un mismo recorrido. */
.agent-area .toplist-body { gap: 10px; }
.agent-area-tabs { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.area-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.area-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; background: var(--bg-elevated); color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; }
.area-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.area-chip-n { opacity: .75; font-size: 11px; }
.toplist-kind { padding: 2px 6px; border-radius: 5px; background: var(--bg-hover); color: var(--text-secondary); font-size: 10px; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.toplist-item-desc { margin-top: 5px; color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.agent-row:focus-visible, .agent-control-row:focus-visible, .agent-chat-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.agent-row .toplist-item-name, .agent-control-row .toplist-item-name { flex-wrap: wrap; white-space: normal; }
.agent-area .toplist-item-meta { white-space: normal; }
.agent-area .toplist-item-actions { opacity: 1; flex-wrap: wrap; justify-content: flex-end; }
.area-intro { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); }
.area-intro-icon { color: var(--accent); flex: none; }
.area-intro-title { margin: 0 0 5px; font-size: 14px; font-weight: 700; }
.area-intro-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.area-intro-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: 12px; }
.area-intro-steps li + li::before { content: '→'; margin-right: 12px; color: var(--accent); }
.catalog-section { margin-bottom: 20px; }
.catalog-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 14px; }
.catalog-section-hint { margin: 0 0 12px; color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.catalog-section .toplist-item { margin-bottom: 6px; }
.catalog-cta { display: flex; align-items: center; gap: 14px; padding: 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elevated); }
.catalog-cta-body { flex: 1; min-width: 0; font-size: 13px; }
.catalog-cta-body p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }
.agent-chat-list { display: flex; flex-direction: column; gap: 6px; }
.agent-chat-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-elevated); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.agent-chat-row:hover { border-color: var(--accent); background: var(--bg-hover); }
.agent-chat-row span { flex: 1; min-width: 0; }
.agent-chat-row b, .agent-chat-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-chat-row b { font-size: 13px; }
.agent-chat-row small { color: var(--text-secondary); font-size: 11px; margin-top: 3px; }
.agent-flow { color: var(--text); font-size: 13px; }
.agent-flow-steps { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; }
.agent-flow-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.agent-flow-steps li > span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.agent-flow-steps li > div { min-width: 0; }
.agent-flow-steps b { display: block; margin-bottom: 3px; }
.agent-flow-steps p { margin: 0; color: var(--text-secondary); line-height: 1.45; }
.agent-flow-prompt { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; padding: 10px; background: var(--bg-hover); border-radius: 6px; }
#tFlowPreviewPanel:not([hidden]) { width: 100%; }
.toast-action { cursor: pointer; pointer-events: auto; }
.toast-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) { .agent-area .toplist-item { flex-wrap: wrap; }.agent-area .toplist-item-actions { width: 100%; justify-content: flex-start; }.catalog-cta { flex-wrap: wrap; }.catalog-cta .btn { width: 100%; justify-content: center; } }

/* Configuración: navegación agrupada y buscador como en Sage Mind. */
.settings-header { flex-wrap: wrap; }
.settings-header .panel-page-title { white-space: nowrap; }
.settings-search { position: relative; flex: 1; max-width: 560px; min-width: 220px; margin-left: auto; }
.settings-search > .icon, .settings-search > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.settings-search input { width: 100%; height: 38px; padding: 0 40px 0 34px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-elevated); color: var(--text); font: inherit; font-size: 13.5px; }
.settings-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.settings-search kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); padding: 0 6px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg-hover); color: var(--text-muted); font-size: 12px; }
.settings-search input:not(:placeholder-shown) ~ kbd { display: none; }
.settings-panel-tabs { gap: 0; }
.settings-panel-tabs .settings-tab { width: 100%; margin: 0; color: var(--text); }
.settings-panel-tabs .settings-tab .icon, .settings-panel-tabs .settings-tab svg { flex: none; }
.settings-panel-tabs .settings-tab.active { color: var(--accent-text, var(--accent)); }
.settings-nav-group h4 { margin: 17px 10px 6px; color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.settings-nav-empty { margin: 14px 10px; color: var(--text-muted); font-size: 12px; }
.settings-panel-content > .settings-pane, .settings-search-results { max-width: 860px; }
.settings-panel-content.is-searching > .settings-pane { display: none; }
.settings-overview h3, .settings-search-results h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 5px; color: var(--text); font-size: 19px; }
.settings-overview > .help { margin: 0 0 22px; font-size: 13.5px; }
.settings-overview-group { margin: 0 0 22px; }
.settings-overview-group h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--text-muted); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.settings-overview-group h4::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.settings-overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 12px; }
.settings-area-card { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.settings-area-card:hover, .settings-area-card:focus-visible { background: var(--bg-hover); border-color: var(--border-strong); outline: none; }
.settings-area-card strong { flex: 1; font-size: 14px; }
.settings-area-card > .icon:last-child, .settings-area-card > svg:last-child { color: var(--text-muted); flex: none; }
.settings-area-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--bg-hover); flex: none; }
.settings-search-results h3 { margin-bottom: 14px; }
.settings-search-results > .help { color: var(--text-muted); }
@media (max-width: 820px) {
  .settings-header .settings-search { order: 2; flex: 1 0 100%; width: 100%; min-width: 0; max-width: none; margin: 0; }
  .settings-header #saveSettingsBtn { margin-left: auto; }
  .settings-header #saveSettingsBtn span { display: none; }
  .settings-header #saveSettingsBtn { width: 36px; height: 36px; padding: 0; justify-content: center; flex: none; }
  .settings-search kbd { display: none; }
  .settings-panel-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .settings-panel-tabs { flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 8px 14px; background: var(--bg-elevated); scrollbar-width: none; }
  .settings-panel-tabs::-webkit-scrollbar { display: none; }
  .settings-panel-tabs .settings-tab { flex: none; width: auto; height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-elevated); font-size: 13px; }
  .settings-panel-tabs .settings-tab.active { background: var(--text); border-color: var(--text); color: var(--bg); }
  .settings-panel-tabs .settings-tab .icon, .settings-panel-tabs .settings-tab svg { display: none; }
  .settings-nav-group { display: flex; gap: 6px; flex: none; }
  .settings-nav-group h4 { display: none; }
  .settings-panel-content { padding: 18px 14px 28px; }
}

/* Application switcher in the top bar */
.app-switch { display:flex; align-items:center; min-width:0; }
.app-switch-btn { display:inline-flex; align-items:center; gap:7px; min-width:0; max-width:320px; padding:5px 8px; border:0; border-radius:10px; background:transparent; color:var(--text); font:inherit; cursor:pointer; }
.app-switch-btn:hover, .app-switch-btn[aria-expanded="true"] { background:var(--bg-hover); }
.app-switch-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.app-switch-btn .brand { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-switch-mark { width:18px; height:18px; border-radius:5px; flex:none; }
.app-switch-waffle { display:grid; grid-template-columns:repeat(3,3px); gap:2px; flex:none; padding:2px; color:var(--text-muted); transition:transform .2s ease; }
.app-switch-waffle i { width:3px; height:3px; border-radius:50%; background:currentColor; }
.app-switch-btn[aria-expanded="true"] .app-switch-waffle { transform:rotate(45deg); color:var(--accent); }
.app-switch-menu { position:fixed; z-index:10000; width:314px; max-width:calc(100vw - 20px); padding:14px 12px 12px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:18px; box-shadow:0 14px 36px rgba(0,0,0,.18); }
.app-switch-menu[hidden] { display:none !important; }
.app-switch-head { display:flex; justify-content:space-between; align-items:baseline; padding:0 6px 11px; color:var(--text); font-size:13px; }
.app-switch-head small { color:var(--text-muted); font-size:11px; }
.app-switch-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.app-tile { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; padding:12px 4px 10px; border:0; border-radius:13px; background:transparent; color:var(--text); font:inherit; text-align:center; text-decoration:none; cursor:pointer; }
.app-tile:hover, .app-tile:focus-visible { background:var(--bg-hover); color:var(--text); outline:none; box-shadow:inset 0 0 0 2px var(--accent); }
.app-tile-icon { position:relative; display:grid; place-items:center; width:46px; height:46px; border-radius:14px; color:#fff; background:linear-gradient(145deg,var(--tile-a),var(--tile-b)); box-shadow:0 6px 14px -6px var(--tile-b); }
.app-tile.is-current .app-tile-icon::after { content:""; position:absolute; right:-3px; bottom:-3px; width:11px; height:11px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-elevated); }
.app-tile-name { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:650; }
.app-tile-sub { color:var(--text-muted); font-size:11px; }
.app-tile.is-current .app-tile-sub { color:var(--accent); font-weight:650; }
.app-switch-foot { margin:10px 6px 0; padding-top:10px; border-top:1px solid var(--border); color:var(--text-muted); font-size:11px; text-align:center; }

/* Mail template designer */
.mailtpl-page { padding:28px clamp(20px,4vw,52px) 56px; max-width:1380px; margin:auto; }
.mailtpl-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:22px; }
.mailtpl-header h1 { margin:4px 0 7px; font-size:28px; color:var(--text); }
.mailtpl-title-icon { display:inline-grid; place-items:center; width:37px; height:37px; margin-right:10px; vertical-align:middle; border-radius:11px; background:linear-gradient(145deg,#fdba74,#ea580c); color:#fff; }
.mailtpl-eyebrow { color:var(--accent); font-size:11px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
.mailtpl-subtitle { max-width:680px; color:var(--text-muted); font-size:14px; line-height:1.5; }
.mailtpl-layout { display:grid; grid-template-columns:270px minmax(330px,1fr) minmax(340px,1fr); gap:18px; align-items:start; }
.mailtpl-card { background:var(--bg-elevated); border:1px solid var(--border); border-radius:16px; box-shadow:0 8px 28px rgba(0,0,0,.04); }
.mailtpl-list { padding:14px; }
.mailtpl-list-head { display:flex; justify-content:space-between; align-items:center; margin:2px 3px 12px; font-weight:700; }
.mailtpl-list-item { display:block; width:100%; padding:12px; margin:4px 0; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.mailtpl-list-item:hover { background:var(--bg-hover); }
.mailtpl-list-item.active { border-color:var(--accent); background:var(--accent-soft); }
.mailtpl-list-item strong { display:block; font-size:13px; }
.mailtpl-list-item span { display:block; margin-top:4px; color:var(--text-muted); font-size:11px; }
.mailtpl-list-item em { float:right; color:var(--accent); font-size:10px; font-style:normal; font-weight:700; }
.mailtpl-editor { padding:20px; }
.mailtpl-editor h2, .mailtpl-preview h2 { margin:0 0 17px; font-size:17px; }
.mailtpl-form { display:grid; gap:10px; }
.mailtpl-section-label { margin-top:5px; padding-bottom:6px; border-bottom:1px solid var(--border); color:var(--text); font-size:13px; font-weight:750; }
.mailtpl-form label { display:grid; gap:5px; font-size:12px; font-weight:650; color:var(--text-muted); }
.mailtpl-form .mailtpl-check { display:flex; align-items:flex-start; gap:9px; color:var(--text); font-size:12px; font-weight:550; }
.mailtpl-form .mailtpl-check input { width:auto; margin:1px 0 0; flex:none; }
.mailtpl-form [hidden] { display:none !important; }
.mailtpl-advanced { padding:11px 12px; border:1px solid var(--border); border-radius:10px; }
.mailtpl-advanced summary { color:var(--text); font-size:12px; font-weight:700; cursor:pointer; }
.mailtpl-advanced[open] { display:grid; gap:12px; }
.mailtpl-advanced[open] summary { margin-bottom:12px; }
.mailtpl-form input, .mailtpl-form textarea, .mailtpl-form select { width:100%; box-sizing:border-box; padding:9px 11px; border:1px solid var(--border); border-radius:9px; background:var(--bg); color:var(--text); font:inherit; font-size:13px; }
.mailtpl-form textarea { resize:vertical; min-height:78px; line-height:1.5; }
.mailtpl-rich-wrap { display:grid; gap:5px; }
.mailtpl-rich-editor { min-height:78px; box-sizing:border-box; padding:9px 11px; border:1px solid var(--border); border-radius:9px; background:var(--bg); color:var(--text); font-size:13px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.mailtpl-rich-editor.mailtpl-rich-short { min-height:55px; }
.mailtpl-rich-editor.mailtpl-rich-body { min-height:120px; }
.mailtpl-rich-editor:focus { outline:2px solid var(--accent); outline-offset:1px; }
.mailtpl-rich-editor:empty::before { content:attr(data-placeholder); color:var(--text-muted); pointer-events:none; }
.mailtpl-rich-editor[contenteditable="false"] { opacity:.72; }
.mailtpl-content-chip { display:inline-block; margin:2px 3px; padding:4px 8px; border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border)); border-radius:7px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:650; white-space:nowrap; vertical-align:middle; user-select:all; }
.mailtpl-content-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.mailtpl-insert-content { justify-self:start; padding:3px 0; border:0; background:none; color:var(--accent); font:inherit; font-size:12px; font-weight:650; cursor:pointer; }
.mailtpl-insert-content:hover { text-decoration:underline; }
.mailtpl-content-example { padding:12px; border:1px solid var(--border); border-radius:9px; background:var(--bg); color:var(--text); }
.mailtpl-content-example[hidden] { display:none; }
.mailtpl-content-example strong { font-size:12px; }
.mailtpl-content-example p { margin:5px 0 10px; color:var(--text-muted); font-size:11px; line-height:1.4; }
.mailtpl-content-example dl { display:grid; grid-template-columns:max-content 1fr; gap:5px 12px; margin:0; font-size:12px; }
.mailtpl-content-example dt { color:var(--text-muted); }
.mailtpl-content-example dd { margin:0; font-weight:650; }
.mailtpl-format { display:flex; flex-wrap:wrap; align-items:center; gap:7px; color:var(--text-muted); font-size:11px; }
.mailtpl-format button { min-width:30px; min-height:30px; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--text); cursor:pointer; }
.mailtpl-format button:hover, .mailtpl-format button:focus-visible { border-color:var(--accent); outline:none; }
.mailtpl-format label { display:flex; align-items:center; gap:6px; margin-left:3px; }
.mailtpl-format input[type="color"] { width:31px; height:30px; padding:2px; cursor:pointer; }
.mailtpl-form input:focus, .mailtpl-form textarea:focus, .mailtpl-form select:focus { outline:2px solid var(--accent); outline-offset:1px; }
.mailtpl-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mailtpl-hint { margin:0; font-size:11px; color:var(--text-muted); line-height:1.5; }
.mailtpl-fields { display:grid; gap:8px; padding:13px; border:1px solid var(--border); border-radius:11px; background:var(--bg); }
.mailtpl-fields[hidden] { display:none; }
.mailtpl-fields > strong { color:var(--text); font-size:13px; }
.mailtpl-fields > p { margin:0; color:var(--text-muted); font-size:11px; line-height:1.45; }
.mailtpl-field-buttons { display:flex; flex-wrap:wrap; gap:6px; }
.mailtpl-field-btn { display:grid; gap:2px; padding:6px 9px; border:1px solid var(--border); border-radius:8px; background:var(--bg-elevated); color:var(--text); font:inherit; font-size:12px; text-align:left; cursor:pointer; }
.mailtpl-field-btn:hover, .mailtpl-field-btn:focus-visible { border-color:var(--accent); background:var(--accent-soft); outline:none; }
.mailtpl-field-btn small { color:var(--text-muted); font-size:10px; }
.mailtpl-custom-fields { margin-top:3px; color:var(--text-muted); font-size:11px; }
.mailtpl-custom-fields summary { cursor:pointer; font-weight:650; }
.mailtpl-custom-fields input { margin:9px 0; }
.mailtpl-writing-helper { display:grid; gap:9px; margin-top:8px; padding:13px; border:1px solid var(--border); border-radius:12px; background:var(--bg); }
.mailtpl-writing-helper h3 { margin:0; color:var(--text); font-size:14px; }
.mailtpl-writing-helper > p { margin:0; color:var(--text-muted); font-size:12px; line-height:1.45; }
.mailtpl-writing-helper textarea, .mailtpl-writing-helper select { width:100%; box-sizing:border-box; padding:9px 11px; border:1px solid var(--border); border-radius:9px; background:var(--bg-elevated); color:var(--text); font:inherit; font-size:13px; }
.mailtpl-writing-helper textarea { resize:vertical; min-height:65px; }
.mailtpl-helper-actions { display:flex; flex-wrap:wrap; align-items:end; gap:8px; }
.mailtpl-helper-actions label { display:grid; gap:4px; min-width:105px; color:var(--text-muted); font-size:11px; }
.mailtpl-helper-actions button { min-height:36px; }
.mailtpl-suggestion { padding:12px; border:1px solid var(--accent); border-radius:10px; background:var(--accent-soft); color:var(--text); }
.mailtpl-suggestion[hidden] { display:none; }
.mailtpl-suggestion strong { font-size:12px; }
.mailtpl-suggestion p { margin:8px 0; white-space:pre-wrap; font-size:13px; line-height:1.5; }
.mailtpl-suggestion button { margin-top:6px; }
.mailtpl-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:17px; }
.mailtpl-dirty-note { align-self:center; color:var(--text-muted); font-size:11px; font-weight:650; }
.mailtpl-dirty-note[hidden] { display:none; }
.mailtpl-preview { overflow:hidden; }
.mailtpl-preview-head { display:flex; justify-content:space-between; align-items:center; padding:18px 18px 0; }
.mailtpl-preview-head h2 { margin:0; }
.mailtpl-preview-subject { display:grid; gap:3px; margin:12px 18px 0; padding:9px 11px; border:1px solid var(--border); border-radius:8px 8px 0 0; background:var(--bg); }
.mailtpl-preview-subject span { color:var(--text-muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.mailtpl-preview-subject strong { color:var(--text); font-size:12px; overflow-wrap:anywhere; }
.mailtpl-preview iframe { display:block; width:100%; height:470px; border:0; background:#fff; }
.mailtpl-preview-note { padding:12px 18px; color:var(--text-muted); font-size:11px; border-top:1px solid var(--border); }
@media(max-width:1150px) { .mailtpl-layout { grid-template-columns:245px 1fr; } .mailtpl-preview { grid-column:1 / -1; } .mailtpl-preview iframe { height:440px; } }
@media(max-width:720px) { .mailtpl-page { padding:20px 14px 40px; } .mailtpl-header { flex-direction:column; } .mailtpl-layout { grid-template-columns:1fr; } .mailtpl-preview { grid-column:auto; } }