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

/* Fuentes servidas desde el propio dominio (2026-09-30): antes venían de
   Google Fonts y cada visita enviaba la IP del usuario a Google sin
   consentimiento. Licencias OFL en fonts/. */
@font-face { font-family: 'Inter'; src: url('fonts/inter-latin.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-latin.woff2') format('woff2'); font-style: normal; font-weight: 400 500; font-display: swap; }

: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:       #767676;
  --text-on-accent:   #ffffff;
  --accent:           #15803d;
  --accent-hover:     #166534;
  --accent-soft:      #ecfdf3;
  --accent-text:      var(--accent);
  --danger-text:      #b91c1c;
  --accent-solid:     var(--accent);
  --success:          #16a34a;
  --warning:          #f59e0b;
  --danger:           #dc2626;
  --status-success-bg: #dcfce7;
  --status-success-text: #15803d;
  --status-success-border: #bbf7d0;
  --status-warning-bg: #fef3c7;
  --status-warning-text: #92400e;
  --status-warning-border: #fde68a;
  --status-error-bg: #fee2e2;
  --status-error-text: #b91c1c;
  --status-error-border: #fecaca;
  --status-running-bg: #dcfce7;
  --status-running-text: #166534;
  --status-running-border: #bbf7d0;
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  /* Escala única de elevación (menús · modales · popovers). Las sombras
     ad-hoc existentes van migrando a estos tres tokens. */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 10px 30px -8px rgba(0,0,0,.28), 0 2px 8px -2px rgba(0,0,0,.16);
  --shadow-lg:  0 18px 48px -12px rgba(0,0,0,.32), 0 4px 12px -4px rgba(0,0,0,.18);
  --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(21, 128, 61, 0.08);
  --bg-surface: var(--bg-elevated);
  /* Aliases de tokens referenciados sin definir (F2/T8). Se resuelven vía var()
     indirection a tokens existentes que ya cambian por tema → no requieren override
     en los bloques light/dark. Mapeos = fallback escrito en cada uso donde lo había. */
  --bg-secondary: var(--bg-elevated);
  --bg-main: var(--bg);
  --bg-card: var(--bg-elevated);
  --bg-tertiary: var(--bg-code);
  --text-tertiary: var(--text-muted);
  --text-primary: var(--text);
  --border-light: var(--border);
  --surface-hover: var(--bg-hover);
  --bg-subtle: var(--bg-hover);
  --accent-light: var(--accent-hover);
  --success-soft: var(--status-success-bg);
}

/* Modo AUTOMÁTICO: sin data-theme fijo, seguimos el sistema operativo. */
@media (prefers-color-scheme: dark) {
  :root {
    --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:       #8a8a8a;
    --accent:           #15803d;
    --accent-hover:     #166534;
    --accent-soft:      #10271b;
    --accent-text:      #4ade80;
    --danger-text:      #f87171;
    /* Fondo de botón primario: el verde claro deja el texto blanco en 3,7:1.
       Uno más profundo lo devuelve a 5,2:1 sin perder identidad de marca. */
    --accent-solid:     #15803d;
    --status-success-bg: #14532d;
    --status-success-text: #86efac;
    --status-success-border: #166534;
    --status-warning-bg: #78350f;
    --status-warning-text: #fcd34d;
    --status-warning-border: #92400e;
    --status-error-bg: #7f1d1d;
    --status-error-text: #fca5a5;
    --status-error-border: #991b1b;
    --status-running-bg: #14532d;
    --status-running-text: #86efac;
    --status-running-border: #166534;
  }
}

/* Tema ELEGIDO en la app (applyTheme pone data-theme="light|dark", resolviendo
   "auto" según el SO). :root[data-theme=…] tiene más especificidad que el :root
   del media query, así que anula el prefers-color-scheme en AMBOS sentidos:
   forzar claro con el SO en oscuro, o forzar oscuro con el SO en claro. */
:root[data-theme="light"] {
  --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:       #767676;
  --accent:           #15803d;
  --accent-hover:     #166534;
  --accent-soft:      #ecfdf3;
  --accent-text:      var(--accent);
  --danger-text:      #b91c1c;
  --accent-solid:     var(--accent);
  --status-success-bg: #dcfce7;
  --status-success-text: #15803d;
  --status-success-border: #bbf7d0;
  --status-warning-bg: #fef3c7;
  --status-warning-text: #92400e;
  --status-warning-border: #fde68a;
  --status-error-bg: #fee2e2;
  --status-error-text: #b91c1c;
  --status-error-border: #fecaca;
  --status-running-bg: #dcfce7;
  --status-running-text: #166534;
  --status-running-border: #bbf7d0;
}
:root[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:       #8a8a8a;
  --accent:           #15803d;
  --accent-hover:     #166534;
  --accent-soft:      #10271b;
  --accent-text:      #4ade80;
  --danger-text:      #f87171;
  --accent-solid:     #15803d;
  --status-success-bg: #14532d;
  --status-success-text: #86efac;
  --status-success-border: #166534;
  --status-warning-bg: #78350f;
  --status-warning-text: #fcd34d;
  --status-warning-border: #92400e;
  --status-error-bg: #7f1d1d;
  --status-error-text: #fca5a5;
  --status-error-border: #991b1b;
  --status-running-bg: #14532d;
  --status-running-text: #86efac;
  --status-running-border: #166534;
}

* { 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
   ============================================================ */
/* Acceso a dos columnas (marca + formulario). El telón usa un degradado muy
   contenido sobre los tokens del tema: así funciona igual en claro y en oscuro
   sin una sola tinta escrita a mano que haya que mantener por duplicado. */
.login-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background:
    radial-gradient(120% 90% at 8% 0%, var(--accent-soft) 0%, transparent 58%),
    var(--bg);
  z-index: 1000;
  overflow-y: auto;
}
/* Curvas de nivel de fondo (idea tomada de BBHUD, aquí en gris hueso).
   Va en un ::before y no en `background` del propio telón porque el degradado
   de acento debe quedar POR ENCIMA de las curvas: al revés, el degradado las
   apagaba justo en la esquina donde está la marca.
   El trazo y su opacidad viven DENTRO del SVG: al cargarse como imagen de
   fondo no hereda el CSS de la página, así que hay una variante por tema. */
.login-screen::before {
  content: "";
  position: absolute; inset: 0;
  background: url("topo-login.svg") center / cover no-repeat;
  /* Se desvanece hacia la derecha: las curvas acompañan a la marca y dejan
     limpia la zona del formulario, donde compiten con los campos. */
  -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;
}
[data-theme="dark"] .login-screen::before { background-image: url("topo-login-dark.svg"); }
/* El contenido va por delante del telón (::before es hijo, no fondo real). */
.login-layout { position: relative; z-index: 1; }
.login-layout {
  display: flex; flex-direction: column; gap: clamp(28px, 5vw, 40px);
  width: 100%; max-width: 420px;
  margin: auto;                 /* centra aunque el contenido desborde a scroll */
}
/* Columna de marca: en móvil se queda el lockup y el claim; los bullets ocupan
   demasiado y empujan el formulario fuera de pantalla. */
.login-hero { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.login-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  /* --accent-text, no --accent: aquí el acento hace de TEXTO sobre el telón, y en
     oscuro el azul de marca se queda en 3,8:1. El token ya viene aclarado. */
  color: var(--accent-text, var(--accent));
}
.login-lockup { display: flex; align-items: center; gap: 12px; }
.login-logo { display: flex; align-items: center; color: var(--accent-text); flex-shrink: 0; }
.login-wordmark {
  margin: 0; color: var(--text);
  font-size: clamp(30px, 5vw, 42px); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1;
}
.login-claim {
  margin: 0; max-width: 42ch;
  color: var(--text-secondary);
  font-size: clamp(14.5px, 1.4vw, 16.5px); line-height: 1.5;
}
.login-values { display: none; }   /* se activan en la vista a 2 columnas */
.login-values li {
  display: flex; align-items: flex-start; gap: 11px;
  color: var(--text-secondary); font-size: 14px; line-height: 1.45;
}
.login-values .icon { color: var(--accent-text); flex-shrink: 0; margin-top: 1px; }

.login-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 34px);
  width: 100%;
  box-shadow: 0 10px 34px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme="dark"] .login-card { box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
.login-card-head { margin-bottom: 20px; }
.login-card-head h2 {
  margin: 0 0 4px; font-size: 19px; font-weight: 650; letter-spacing: -0.02em;
  color: var(--text);
}
.login-sub {
  color: var(--text-secondary);
  margin: 0;
  font-size: 13.5px; line-height: 1.45;
}
.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; min-width: 0;
}
.login-form-row { display: flex; gap: 12px; }
.login-form-row > label { flex: 1 1 0; min-width: 0; }
.login-form input {
  width: 100%;
  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);
}
/* Mostrar/ocultar contraseña: sin esto, un fallo de tecleo obliga a reescribirla
   entera a ciegas, que es donde se abandona un login. */
.login-pass-wrap { position: relative; display: flex; align-items: stretch; }
.login-pass-wrap input { padding-right: 42px; }
.login-pass-toggle {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted); cursor: pointer; transition: color .15s;
}
.login-pass-toggle:hover { color: var(--text); }
.login-pass-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.login-error {
  background: var(--status-error-bg);
  border: 1px solid var(--status-error-border);
  color: var(--status-error-text);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13.5px; line-height: 1.4;
}
.login-btn {
  background: var(--accent-solid, var(--accent));
  color: var(--text-on-accent, #fff);
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s, transform 0.1s;
}
.login-btn:hover { background: var(--accent-hover); }
.login-btn:active { transform: translateY(1px); }
.login-btn:disabled { opacity: .6; cursor: default; transform: none; }
.login-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  margin: 18px 0 0;
}
.login-hint a { color: var(--accent-text, var(--accent)); text-decoration: none; font-weight: 550; cursor: pointer; }
.login-hint a:hover { text-decoration: underline; }
/* Información legal (2026-09-30): pie discreto de la tarjeta de acceso y
   primera capa de privacidad en «Crear cuenta». Abren legal.html aparte. */
.login-legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 11.5px;
}
.login-legal a, .login-privacy-note a { color: var(--text-muted); text-decoration: none; }
.login-legal a:hover, .login-privacy-note a:hover { color: var(--text-secondary); text-decoration: underline; }
.login-legal a { min-height: 24px; display: inline-flex; align-items: center; }
.login-privacy-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.login-privacy-note a { text-decoration: underline; text-underline-offset: 2px; }
a.menu-item { text-decoration: none; color: var(--text); }
.login-hint code {
  background: var(--bg-hover);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

/* Pantalla baja (móvil tumbado, ventana aplastada): con el layout apilado, la
   marca empuja el formulario fuera de vista y hay que hacer scroll a ciegas
   para encontrarlo. Se reduce el bloque de marca a una línea. */
@media (max-height: 560px) and (max-width: 859px) {
  .login-screen { padding: 14px; align-items: flex-start; }
  .login-layout { gap: 16px; }
  .login-eyebrow, .login-claim { display: none; }
  .login-wordmark { font-size: 24px; }
  .login-logo .icon { width: 24px; height: 24px; }
  .login-card { padding: 20px; }
  .login-card-head { margin-bottom: 14px; }
  .login-form { gap: 11px; }
}

/* Dos columnas solo con ancho Y alto suficientes: un móvil tumbado tiene ancho
   pero no altura, y ahí la rejilla dejaría el formulario recortado. */
@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);
    /* Ancho proporcional al viewport, no fijo: a 1000px sobre una pantalla de
       1440 el bloque quedaba flotando entre márgenes enormes. */
    max-width: min(1180px, 88vw);
  }
  .login-values {
    display: flex; flex-direction: column; gap: 12px;
    list-style: none; margin: 6px 0 0; padding: 0;
  }
  /* Tope de medida de lectura: sin él el claim se estira hasta la tarjeta; con
     uno muy corto parte la frase en dos líneas desiguales. ~46ch cae en una
     línea holgada y sigue siendo cómodo de leer. */
  .login-claim { max-width: 46ch; }
}

/* ============================================================
   APP LAYOUT
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w, 280px) 4px 1fr 0 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  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) — se oculta POR COMPLETO.
   Se reabre con la hamburguesa (#toggleSidebar), que solo aparece en la topbar
   cuando .app está en sidebar-collapsed (ver regla de #toggleSidebar más abajo). */
.app.sidebar-collapsed { grid-template-columns: 0 0 1fr 0 0; }
.app.sidebar-collapsed .resizer { display: none; }
.app.sidebar-collapsed .sidebar {
  /* Sin `width: 0 !important`: el ancho lo lleva la columna de la rejilla,
     que ya anima (.25s). Con el ancho forzado a 0 el sidebar desaparecía de
     golpe y la rejilla se animaba sobre un hueco vacío. `visibility` lo saca
     del tabulador y del lector de pantalla cuando termina de plegarse. */
  min-width: 0 !important;
  overflow: hidden;
  border-right: none;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .25s;
}
/* Show the topbar toggle button (hamburguesa) when sidebar is collapsed,
   so the user can bring the sidebar back after hiding it. */
.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 {
  /* Era 9px + opacity .7 sobre --text-muted: ilegible de facto (contraste ~1,7).
     Un separador puede ser discreto, pero tiene que poder leerse. */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 8px 2px;
  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: 650;
  /* --text-muted daba 2,13:1 sobre el fondo del menú: por debajo del mínimo
     legible (3:1) para un texto de 11px en mayúsculas, que ya es el caso más
     difícil de leer. Con --text-secondary sube a ~5:1 sin dejar de ser un
     rótulo secundario frente al nombre de cada chat. */
  color: var(--text-secondary);
  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); }
.sidebar-caret {
  display: inline-block;
  font-size: 10px;
  width: 12px;
  text-align: center;
  transition: transform 0.15s;
  /* Hereda del encabezado: es parte del rótulo, no un adorno aparte, y con
     --text-muted quedaba por debajo del contraste mínimo. */
  color: inherit;
}
.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-text); }
.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;
  /* Es un BOTÓN, no decoración: con --text-muted daba 2,13:1 y además invitaba
     poco a pulsarlo. Cursor incluido: faltaba, y sin él no parecía accionable. */
  color: var(--text-secondary);
  width: 20px; height: 20px;
  border-radius: 4px;
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.sidebar-add:hover { background: var(--bg-hover); color: var(--accent-text); }
.sidebar-add:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.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; }
.conv-title-wrap {
  display: flex; flex: 1; min-width: 0; flex-direction: column;
  justify-content: center; cursor: pointer; line-height: 1.25;
}
.conv-title-wrap .conv-title { flex: none; width: 100%; }
.conv-run-phase {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  margin-top: 2px; color: var(--status-running-text); font-size: 10.5px;
  font-weight: 600; white-space: nowrap;
}
.conv-run-phase > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.conv-run-spinner {
  width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%;
  border: 1.5px solid var(--status-running-border); border-top-color: var(--accent);
  animation: spin .75s linear infinite;
}
.conv-item.is-running { min-height: 43px; background: color-mix(in srgb, var(--status-running-bg) 42%, transparent); }
.conv-item.is-run-error .conv-run-phase { color: var(--status-error-text); }
.conv-item.is-run-error .conv-run-spinner,
.conv-item.is-run-cancelled .conv-run-spinner {
  border: 0; width: 7px; height: 7px; animation: none; background: currentColor;
}
.conv-item.is-run-cancelled .conv-run-phase { color: var(--text-muted); }

/* Identificador del chat: el UUID pelado en la línea del pie, con el mismo
   tamaño y color que el aviso. Nada de chapa ni de botón — solo texto que se
   puede copiar. Se resetea todo por si algún estilo de botón lo alcanzara. */
.chat-id {
  padding: 0; margin: 0; border: 0; background: none; box-shadow: none;
  color: var(--text-muted); opacity: .8;
  font: inherit; font-size: 11.5px; letter-spacing: .01em;
  cursor: pointer; user-select: all;
  transition: opacity .15s, color .15s;
}
.chat-id:hover { opacity: 1; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.chat-id.is-copied { color: var(--text-secondary); opacity: 1; text-decoration: none; }
.chat-id:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* 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:focus-within .conv-more,
.conv-item.dropdown-open .conv-more { opacity: 1; }
.conv-more:hover { background: var(--border); color: var(--text); }
.conv-more:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* 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 button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  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-text); }
.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-text); 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-text); 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(21,128,61,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(21,128,61,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-text); }

/* Legacy conv-del — keep for backward compat */




/* 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-text);
  background: var(--accent-soft, rgba(21,128,61,.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; }

.anomaly-item:focus-within .anomaly-actions,
.wf-item:focus-within .anomaly-actions,
.pipe-item:focus-within .anomaly-actions { opacity: 1; }

.anomaly-run-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
}
.anomaly-run-btn:hover { color: var(--accent-text); background: var(--bg-hover); }
/* WhatsApp: formulario de vinculación por código (Ajustes → Integraciones) */
.wa-link-form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.wa-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.wa-row .input { flex: 1 1 160px; min-width: 140px; }
.wa-actions { margin-top: 8px; }

/* Memorias aprendidas por la memoria agentiva (átomos): badge discontinuo y botón promover */
.memory-cat-badge.learned {
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border, rgba(0,0,0,.18));
}
.memory-learned-hint {
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px 10px 2px;
}
.memory-promote-btn { font-size: 12px; display: inline-flex; align-items: center; }
.memory-promote-btn:hover { color: var(--accent-text); }
.data-list-item.memory-learned .data-promote-btn:hover { color: var(--accent-text); }

.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-item:focus-within .conv-delete-btn { opacity: 1; }
.conv-delete-btn:hover { color: var(--danger); }

.anomaly-run-btn:focus-visible,
.wf-toggle-btn:focus-visible,
.wf-dup-btn:focus-visible,
.conv-delete-btn:focus-visible,
.toplist-item-actions .btn:focus-visible,
.toplist-item-actions .btn-ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.anomaly-catalog-item .btn-sm {
  font-size: 11px;
  padding: 3px 10px;
  margin-top: 4px;
}

/* Auto-import cards */





















/* Auto-import detail modal */








/* Log list */









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

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

/* La botonera de iconos sueltos (usuarios / ayuda / personalizar / licencia)
   se retiró el 2026-09-11: todo vive ahora en el menú ⋮ (ver bloque
   «PIE DEL SIDEBAR EN UNA FILA» al final). */

/* User row */
.user-info {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 6px;
  position: relative;
  min-width: 0;
  border-radius: var(--radius);
  /* La fila entera abre el menú ⋮ (área de pulsación de 28px → toda la
     fila); el botón ⋮ sigue siendo el control accesible por teclado. */
  cursor: pointer;
  transition: background .12s;
}
.user-info:hover, .user-info.is-open { background: var(--bg-hover); }
.user-info.is-open .user-menu-btn { color: var(--text); }
.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 color-mix(in srgb, var(--accent) 20%, transparent);
}

.user-menu {
  position: fixed;
  bottom: auto; left: auto; right: auto;
  /* 220px partían «Tema visual» en dos líneas junto al selector de tema. */
  width: 248px;
  max-width: calc(100vw - 24px);
  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);
  white-space: nowrap;
}
.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-text); }

.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; height: 100dvh; min-width: 0; min-height: 0; background: var(--bg); overflow: hidden; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg); min-height: 52px;
  /* La cabecera vive en una columna flex a 100dvh: si algo de abajo se hincha
     (pasó con un bug de la barra KPI), sin esto el header ENCOGE y sus botones
     se pintan fuera, encima del contenido. La cabecera nunca debe ceder alto. */
  flex-shrink: 0;
}
/* Botones de icono de la topbar (campana, exportar, pantalla completa).
   Antes el base era display:none (pensado solo para la hamburguesa) y en
   escritorio dejaba invisible TODA la botonera derecha; solo móvil la
   re-mostraba. El base ahora es visible y únicamente la hamburguesa se
   oculta mientras el sidebar está desplegado. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: transparent; border: none;
  color: var(--text-secondary); border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
/* La hamburguesa solo aparece con el sidebar plegado (regla .sidebar-collapsed,
   más específica) o en móvil, donde el sidebar es un overlay. */
#toggleSidebar { display: none; }
@media (max-width: 767px) { #toggleSidebar { display: inline-flex; } }
.brand { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.topbar-spacer { flex: 1; }

/* ── Selector de empresas de Sage (topbar, selección múltiple) ──
   El popup del <select> nativo no admite CSS (se pintaba con el aspecto del SO);
   por eso el desplegable es propio: botón-pill + menú con checkboxes. */
.empresa-selector { position: relative; display: inline-flex; }
.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; }
/* Con empresas concretas marcadas, el pill lo señala con el acento. */
.empresa-btn.has-selection {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent-text);
}
#empresaBtnLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empresa-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 10000;
  min-width: 230px; max-height: 320px; overflow-y: auto; padding: 4px 0;
  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);
}
.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; }
@media (max-width: 640px) { .empresa-btn { max-width: 150px; } }

/* ── 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 color-mix(in srgb, var(--accent) 25%, transparent);
  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;
  /* `flex-wrap` va aquí, no en una segunda regla más abajo: la fila de avisos
     necesita saltar de línea (flex-basis 100%), y con `overflow-x:auto` en su
     lugar el wrap ganaba igual y el scroll horizontal era código muerto. */
  flex-wrap: wrap;
  padding: 6px 20px;
  /* La banda se funde con el fondo de la página y lo elevado son las TARJETAS:
     con la banda en --bg-elevated y las tarjetas en --bg, en oscuro la
     elevación quedaba invertida (tarjetas casi negras sobre franja más clara)
     y partía el fondo en franjas de distinto tono. */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.kpi-bar[hidden] { display: none; }
.kpi-bar-grid {
  display: flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0;
}
/* Rejilla SOLO en escritorio: tarjetas de ancho idéntico que bajan de fila en
   vez de comprimirse hasta "Facturación de…". En móvil NO: allí el diseño es
   scroll horizontal con flex (bloque max-width:767px), y meter display:grid a
   nivel base mataba sus propiedades flex — las tarjetas se apilaban a 395px de
   alto, el flex de la página desbordaba y ENCOGÍA la cabecera, cuyos botones
   quedaban pintados encima de los KPIs. Todo era esta única regla. */
@media (min-width: 768px) {
  .kpi-bar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    align-items: stretch;
  }
}
.kpi-bar .kpi-card {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
  min-width: 0;
}
.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-text);
  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;
}
/* La etiqueta cortada ("Facturación de…", "Pedidos por se…") no dice nada: el
   title de la tarjeta lleva el nombre completo, pero hay que pasar el ratón.
   A partir de cierto ancho caben enteras en dos líneas. */
@media (min-width: 1180px) {
  .kpi-bar .kpi-label {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    line-height: 1.25;
  }
}
.kpi-bar .kpi-card.has-warning { border-color: color-mix(in srgb, var(--warning, #f59e0b) 45%, var(--border)); }
/* El motivo del aviso NO cabe dentro de la tarjeta: ensancharla comprimía al
   resto hasta dejarlas en "Tesorería …". Va en una segunda línea a todo lo
   ancho, donde se lee entero sin robar sitio a nadie. */
.kpi-bar-notes {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 2px;
  padding-left: 2px;
}
.kpi-bar-notes:empty { display: none; }
.kpi-bar-notes .kpi-bar-note {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.3;
}
.kpi-bar-notes .kpi-bar-note svg { color: var(--warning, #d97706); flex-shrink: 0; }
.kpi-bar-notes .kpi-bar-note b { color: var(--text-secondary); font-weight: 600; }
.kpi-bar.collapsed .kpi-bar-notes { display: none; }

.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); }
/* Antigüedad del dato + refresco manual, a la derecha junto al plegado. */
.kpi-updated {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.kpi-bar-refresh {
  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-refresh:hover { background: var(--bg-hover); color: var(--text); }
/* Engranaje: mismo tamaño y comportamiento que el refresco, a su lado. */
.kpi-bar-config {
  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-config:hover { background: var(--bg-hover); color: var(--text); }
.kpi-bar-refresh.is-busy { opacity: 0.6; pointer-events: none; }
.kpi-bar-refresh.is-busy svg { animation: kpi-spin 0.9s linear infinite; }
@keyframes kpi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kpi-bar-refresh.is-busy svg { animation: none; }
}
/* Plegada, la barra deja solo los controles. */
.kpi-bar.collapsed .kpi-updated { display: none; }
.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-text, var(--accent));
  /* Peso extra en el activo: el color de acento sobre su propio tono suave se
     queda rozando el mínimo de contraste (4,5:1), y este chip dice en qué modo
     estás trabajando — tiene que leerse sin dudar. */
  font-weight: 650;
}

.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; }
/* Tinta sólida: el degradado texto→acento restaba acabado empresarial
   (la jerarquía la dan el cuerpo y el peso, no el color). */
.welcome-title { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 8px; color: var(--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); color: var(--text); 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); }
/* El botón es un <button>: sin `color` propio hereda `buttontext` (negro) del
   navegador, no el token del tema — en oscuro el título y el SVG (stroke:
   currentColor) quedaban ilegibles. `.sug` fija la tinta y el icono va en
   acento, que también funciona sobre --accent-soft del hover. */
.sug-icon { font-size: 20px; margin-bottom: 6px; color: var(--accent-text, var(--accent)); }
.sug-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; color: var(--text); }
.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-text); 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.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-text); 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-text); 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); }
/* Ayuda por página (2026-09-30): índice a la izquierda y la página elegida a
   la derecha; en pantallas estrechas el índice pasa a un desplegable. */
.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-text); 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-text); 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-text); }
.help-legal-link { margin-right: auto; align-self: center; font-size: 12px; color: var(--text-muted); text-decoration: none; }
.help-legal-link:hover { color: var(--text-secondary); text-decoration: underline; }
.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%; }
}

/* 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-text); 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 { width: 100%; max-width: 1040px; margin: 0 auto; padding: 28px 24px 40px; display: flex; flex-direction: column; gap: 28px; }

.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); }
/* Duración pregunta→respuesta bajo el globo del asistente (messages.duration_ms) */
.msg-duration { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.msg-duration svg { flex: none; opacity: .8; }
.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.65; }
.msg-bubble p { margin: 0 0 12px; }
.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 strong { color: var(--text); font-weight: 650; }
.msg-bubble table { border-collapse: collapse; width: 100%; min-width: 100%; margin: 0; font-size: 14px; border: 0; }
.msg-bubble th, .msg-bubble td { text-align: left; vertical-align: middle; 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; }
.msg-bubble th:not(:last-child), .msg-bubble td:not(:last-child) { border-right: 1px solid var(--border); }
/* Alineación por columna de las tablas del chat. OJO purgas: estas clases se
   componen DINÁMICAMENTE en el renderer (`col-${alignment}`) — no aparecen
   literales en el JS y un escaneo ingenuo las da por muertas (pasó 2026-08-31;
   lo cazó test_chat_table_alignment_is_consistent_for_the_whole_column). */
.msg-bubble th.col-left, .msg-bubble td.col-left { text-align: left; }
.msg-bubble th.col-center, .msg-bubble td.col-center { text-align: center; }
.msg-bubble th.col-right, .msg-bubble td.col-right { text-align: right; }
.msg-bubble td.col-right { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 13px; }
.table-wrap td.col-right { white-space: nowrap; }





/* Tablas del chat: las cortas aprovechan todo el lienzo; solo las realmente
   anchas crean desplazamiento horizontal. */
.table-wrap {
  position: relative; display: block; width: 100%; clear: both; max-width: 100%;
  margin: 12px 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated);
}
.result-table-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 38px; padding: 5px 8px 5px 12px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 86%, var(--bg-hover));
}
.result-table-count { color: var(--text-muted); font-size: 11.5px; font-weight: 600; }
.result-table-actions { display: inline-flex; align-items: center; gap: 4px; }
.result-table-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 28px; padding: 4px 8px; color: var(--text-secondary); background: transparent;
  border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 11.5px; cursor: pointer;
}
.result-table-btn:hover, .result-table-btn.is-active {
  color: var(--accent-text); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.result-table-scroll {
  width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--border-strong) transparent;
}
.result-table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.table-wrap.table-compact table { width: 100%; min-width: 100%; table-layout: auto; }
.table-wrap.table-compact th,
.table-wrap.table-compact td { white-space: normal; overflow-wrap: break-word; }
.table-wrap.table-wide table { width: max-content; min-width: 100%; }
/* Celdas de texto largo: se parten en líneas en vez de estirar toda la tabla (app-v2.js, cell-long). */
.table-wrap .cell-long { min-width: 16ch; max-width: 42ch; white-space: normal; overflow-wrap: anywhere; }
.table-monthly-invoices th { background: #305174; color: #fff; }
.table-monthly-invoices td.invoice-present,
.table-monthly-invoices tr:nth-child(even) td.invoice-present { background: #d7ecda; color: #222; }
.table-monthly-invoices td.invoice-none,
.table-monthly-invoices tr:nth-child(even) td.invoice-none { background: #f4d7dc; color: #222; }
.table-monthly-invoices td.invoice-unknown,
.table-monthly-invoices tr:nth-child(even) td.invoice-unknown { background: #ebebeb; color: #222; }
.table-monthly-invoices td:not(:first-child) { text-align: center; font-variant-numeric: tabular-nums; }

.table-wrap th { position: sticky; top: 0; z-index: 1; }
.table-wrap th.is-sortable { cursor: pointer; padding-right: 25px; }
.table-wrap th.is-sortable::after { content: "↕"; position: absolute; right: 8px; color: var(--text-muted); opacity: .45; }
.table-wrap th[aria-sort="ascending"]::after { content: "↑"; color: var(--accent-text); opacity: 1; }
.table-wrap th[aria-sort="descending"]::after { content: "↓"; color: var(--accent-text); opacity: 1; }
.table-wrap.is-dense th, .table-wrap.is-dense td { padding-top: 6px; padding-bottom: 6px; font-size: 12px; }
.table-wrap tbody tr[hidden] { display: none !important; }
.result-table-pagination {
  min-height: 44px; padding: 7px 10px; display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(140px, 1fr);
  align-items: center; gap: 10px; border-top: 1px solid var(--border);
  color: var(--text-secondary); background: color-mix(in srgb, var(--bg-elevated) 86%, var(--bg-hover));
  font-size: 11px;
}
.result-page-range { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.result-page-controls { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.result-page-controls button {
  width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-secondary); background: var(--bg-surface); cursor: pointer;
}
.result-page-controls button:hover:not(:disabled) { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }
.result-page-controls button:disabled { opacity: .35; cursor: default; }
.result-page-position { min-width: 98px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.result-page-position strong { color: var(--text); }
.result-page-size { justify-self: end; display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); white-space: nowrap; }
.result-page-size select { min-width: 62px; height: 30px; padding: 0 22px 0 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--bg-surface); font-size: 11px; }

.sage-result-limit-notice { margin: 14px 0 4px; padding: 8px 10px; display: flex; align-items: flex-start; gap: 7px; border: 1px solid var(--status-warning-border); border-radius: var(--radius-sm); color: var(--status-warning-text); background: var(--status-warning-bg); font-size: 10.5px; line-height: 1.4; }
.sage-result-limit-notice svg { flex-shrink: 0; margin-top: 1px; }
@media (max-width: 560px) {
  .result-table-btn span { display: none; }
  .result-table-btn { width: 30px; padding: 4px; }
  .result-table-pagination { grid-template-columns: 1fr; justify-items: center; gap: 6px; padding: 8px; }
  .result-page-range { order: 2; }
  .result-page-controls { order: 1; }
  .result-page-size { order: 3; justify-self: center; }
  .msg-bubble th, .msg-bubble td { padding-left: 10px; padding-right: 10px; }
}
.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); 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-text);
  padding: 6px 14px; border-radius: 8px;
  text-decoration: none; font-weight: 600; font-size: 13px;
  margin: 6px 0; transition: background 0.2s;
  animation: fadeUp 0.3s both;
}
.msg-bubble a.download-link:hover { background: var(--accent); color: #fff; }

/* Estado recuperable de una consulta al volver a su conversación. */
.conversation-run-card {
  display: flex; align-items: flex-start; gap: 11px; padding: 15px;
  color: var(--status-running-text); background: var(--status-running-bg);
  border: 1px solid var(--status-running-border); border-radius: var(--radius-lg);
}
.conversation-run-state-icon {
  display: flex; width: 22px; height: 22px; flex: 0 0 auto;
  align-items: center; justify-content: center;
}
.conversation-run-spinner {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--status-running-border); border-top-color: var(--status-running-text);
  animation: spin .75s linear infinite;
}
.conversation-run-copy { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; line-height: 1.4; }
.conversation-run-title { color: inherit; font-size: 13px; }
.conversation-run-phase { color: inherit; font-size: 12px; overflow-wrap: anywhere; opacity: .9; }
.conversation-run-progress { height: 6px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--status-running-border) 40%, var(--bg)); }
.conversation-run-progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--status-running-text); transition: width .35s ease; }
.conversation-run-progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; color: var(--text-muted); font-size: 10.5px; }
.conversation-run-progress-value { color: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
.conversation-run-heartbeat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-run-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.conversation-run-stage { position: relative; min-width: 0; padding-top: 9px; color: var(--text-muted); font-size: 9.5px; text-align: center; white-space: nowrap; }
.conversation-run-stage::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--border-strong) 70%, transparent); }
.conversation-run-stage.is-active { color: var(--status-running-text); font-weight: 650; }
.conversation-run-stage.is-active::before { background: var(--status-running-text); animation: pulse 1.25s ease-in-out infinite; }
.conversation-run-stage.is-done::before { background: var(--status-success-text); }
.conversation-run-elapsed { margin-top: 5px; color: var(--text-muted); font-size: 11px; }
.conversation-run-card.is-error {
  color: var(--status-error-text); background: var(--status-error-bg);
  border-color: var(--status-error-border);
}
.conversation-run-card.is-cancelled {
  color: var(--text-secondary); background: var(--bg-elevated); border-color: var(--border-strong);
}
.conversation-run-card:not(.is-running) .conversation-run-spinner {
  width: 9px; height: 9px; border: 0; background: currentColor; animation: none;
}
.conversation-run-actions {
  display: flex; flex: 0 0 auto; align-self: center; gap: 7px; margin-left: auto;
}
.conversation-run-resume, .conversation-run-cancel { white-space: nowrap; }
.conversation-run-cancel { color: var(--status-error-text); border-color: var(--status-error-border); }
@media (max-width: 760px) {
  .background-run-notice { flex-wrap: wrap; }
  .background-run-copy { flex: 1 1 calc(100% - 26px); }
}
@media (max-width: 620px) {
  .conversation-run-card { flex-wrap: wrap; }
  .conversation-run-copy { flex: 1 1 calc(100% - 34px); }
  .conversation-run-stage { overflow: hidden; text-overflow: ellipsis; }
  .conversation-run-actions { width: 100%; margin-left: 33px; }
  .conversation-run-actions button { flex: 1 1 auto; }
}

/* Contexto verificable de cada consulta Sage. */
.sage-context-strip {
  margin: 0 0 12px; overflow: hidden; color: var(--text-secondary);
  background: color-mix(in srgb, var(--accent-soft) 50%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: var(--radius-lg);
}
.sage-context-strip { container-type: inline-size; }
.sage-context-summary {
  display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto;
  align-items: center; gap: 12px; min-height: 52px; padding: 8px 11px;
}
.sage-context-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--accent-text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; }
.sage-context-strip.is-working .sage-context-icon svg { animation: spin .8s linear infinite; }
.sage-context-item { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.sage-context-item small, .sage-context-detail-label { color: var(--text-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.sage-context-item strong { overflow: hidden; color: var(--text); font-size: 11.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.sage-context-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; color: var(--text-secondary); background: transparent; border: 0; border-radius: 6px; font-size: 10.5px; cursor: pointer; }
.sage-context-toggle:hover { color: var(--accent-text); background: var(--accent-soft); }
.sage-context-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 18px; padding: 10px 12px 12px 51px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg-elevated) 85%, transparent); }
.sage-context-details > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.sage-context-details strong { color: var(--text); font-size: 11.5px; overflow-wrap: anywhere; }
.sage-context-tables, .sage-context-concepts { grid-column: 1 / -1; }
.sage-context-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sage-context-chips code { padding: 3px 6px; color: var(--accent-text); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); font-size: 10.5px; }
.sage-context-chips em { color: var(--text-muted); font-size: 11px; }
.sage-context-concept-list { display: flex; flex-wrap: wrap; gap: 5px; }
.sage-context-concept-list em { color: var(--text-muted); font-size: 11px; }
.sage-context-concept-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; color: var(--status-success-text); background: var(--status-success-bg); border: 1px solid var(--status-success-border); border-radius: 999px; font-size: 10.5px; font-weight: 650; }
.sage-context-concept-chip svg { flex: 0 0 auto; }

/* Consulta SQL original: desplegable copiable para depurar qué le pasa a la consulta. */
.sage-context-sql { grid-column: 1 / -1; }
.sage-sql-block { margin-top: 5px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); }
.sage-sql-block + .sage-sql-block { margin-top: 8px; }
.sage-sql-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; background: var(--bg-hover); border-bottom: 1px solid var(--border); }
.sage-sql-tag { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.sage-sql-copy { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 7px; font-size: 10.5px; font-weight: 650; cursor: pointer; }
.sage-sql-copy:hover { color: var(--accent-text); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.sage-sql-copy svg { flex: 0 0 auto; }
.sage-sql-code { margin: 0; max-height: 240px; overflow: auto; padding: 9px 11px; color: var(--text); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11.5px; line-height: 1.5; white-space: pre; tab-size: 2; }
.sage-sql-code code { padding: 0; font: inherit; color: inherit; background: none; border: 0; }

/* Briefing manual: un informe progresivo por bloques, no una respuesta corrida. */
.briefing-report { margin: 0 0 14px; overflow: hidden; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.briefing-report-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 70%, var(--bg-elevated)), var(--bg-elevated)); border-bottom: 1px solid var(--border); }
.briefing-report-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; color: #b45309; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 10px; }
.briefing-report-head > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.briefing-report-head strong { color: var(--text); font-size: 13px; }
.briefing-report-head small { color: var(--text-muted); font-size: 10.5px; }
.briefing-report-status { padding: 4px 8px; color: var(--status-running-text); background: var(--status-running-bg); border: 1px solid var(--status-running-border); border-radius: 999px; font-size: 10px; font-weight: 700; }
.briefing-report.is-done .briefing-report-status { color: var(--status-success-text); background: var(--status-success-bg); border-color: var(--status-success-border); }
.briefing-report-blocks, .briefing-final-grid { display: grid; gap: 10px; padding: 12px; }
.briefing-block, .briefing-final-block { min-width: 0; overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.briefing-block > header, .briefing-final-block > header { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg-hover); }
.briefing-block-number { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; flex: 0 0 auto; color: var(--accent-text); background: var(--accent-soft); border-radius: 7px; font-size: 10.5px; font-weight: 750; }
.briefing-block h3, .briefing-final-block h3 { min-width: 0; flex: 1; margin: 0; color: var(--text); font-size: 12px; font-weight: 650; text-transform: none; letter-spacing: 0; }
.briefing-block-state { color: var(--text-muted); font-size: 10px; font-weight: 650; white-space: nowrap; }
.briefing-block.is-running { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.briefing-block.is-running .briefing-block-state { color: var(--accent-text); }
.briefing-block.is-done .briefing-block-state { color: var(--status-success-text); }
.briefing-block.is-error .briefing-block-state, .briefing-block-error { color: var(--status-error-text); }
.briefing-block-body, .briefing-final-body { padding: 10px; color: var(--text-secondary); font-size: 12px; }
.briefing-block-loading { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-text); }
.briefing-block-loading svg { animation: spin .8s linear infinite; }
.briefing-block-meta { margin-top: 7px; color: var(--text-muted); font-size: 10.5px; text-align: right; }
.briefing-executive-summary { margin: 12px 12px 0; padding: 11px 12px; color: var(--text-secondary); background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.briefing-final-body > :first-child { margin-top: 0; }
.briefing-final-body > :last-child { margin-bottom: 0; }
.briefing-report .table-wrap { margin-bottom: 4px; }
/* Según el ancho del propio bloque, no de la pantalla: en la vista partida o en tableta
   con el lateral abierto la columna del chat es estrecha aunque la pantalla no lo sea. */
@container (max-width: 520px) {
  .sage-context-summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .sage-context-item:nth-of-type(3), .sage-context-item:nth-of-type(4) { display: none; }
  .sage-context-details { grid-template-columns: 1fr; padding-left: 12px; }
}
@media (max-width: 760px) {
  .briefing-report-head { align-items: flex-start; }
  .briefing-report-status { margin-left: auto; }
}
[data-theme="dark"] .briefing-report-icon { color: #fcd34d; background: #451a03; border-color: #92400e; }

/* Inline Charts */
.structured-chart {
  width: 100%; max-width: 720px; margin: 16px 0; overflow: hidden;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .05);
}
:root[data-theme="dark"] .structured-chart { box-shadow: none; }
/* Cabecera: icono · título + meta · acciones */
.structured-chart .sc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text);
}
.sc-head-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sc-head-icon {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-text);
}
.sc-head-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.sc-title { font-size: 13px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.sc-meta { font-size: 11px; color: var(--text-muted); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-actions { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.sc-action {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  color: var(--text-secondary); font: 500 12px/1 var(--font-sans); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.sc-action:hover { background: var(--bg-hover); color: var(--text); }
.sc-action.active { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.sc-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sc-action-icon { width: 28px; padding: 0; justify-content: center; }
.sc-action svg { flex: 0 0 auto; }
/* Lienzo */
.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;
}
.structured-chart .inline-chart-wrap { max-width: none; margin: 0; border: 0; border-radius: 0; background: transparent; padding: 18px 16px 12px; height: 320px; }
.inline-chart-wrap canvas { width: 100% !important; height: 100% !important; }
/* Datos del gráfico: el botón «Datos» de la cabecera abre este bloque */
.structured-chart-data { border-top: 1px solid var(--border); color: var(--text-secondary); }
.structured-chart-data > summary { display: none; }
.structured-chart-data-body { padding: 0; }
.structured-chart-data-body .sc-table-wrap { max-height: 320px; margin: 0; border: 0; border-radius: 0; overflow: auto; }
.sc-table { width: 100%; min-width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.sc-table th, .sc-table td { padding: 8px 14px; border: 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sc-table-wrap tbody tr:nth-child(even) td { background: transparent; }
.sc-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-surface); color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; text-align: left; }
.sc-table th.col-number, .sc-table td.col-number { text-align: right; }
.sc-table td.sc-col-label { color: var(--text); font-weight: 500; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.sc-table tbody tr:hover td { background: var(--bg-hover); }
.sc-table tbody tr:last-child td { border-bottom: 0; }
.sc-table tfoot td { border-top: 1px solid var(--border); border-bottom: 0; background: var(--bg-surface); font-weight: 600; color: var(--text); }
.sc-table .sc-share { color: var(--text-muted); }
.sc-table .sc-null { color: var(--text-muted); }
.sc-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.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); }





/* 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 */


/* Progreso persistente en su mensaje para briefings y consultas múltiples. */
.query-progress-box {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
  animation: msgAppear .25s ease both;
}
.query-progress-box .qp-main { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--bg-hover); }
.query-progress-box .qp-spinner { width: 16px; height: 16px; flex: 0 0 auto; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: qp-spin .8s linear infinite; }
@keyframes qp-spin { to { transform: rotate(360deg); } }
.query-progress-box .qp-info { min-width: 0; flex: 1; }
.query-progress-box .qp-title { overflow: hidden; color: var(--text); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.query-progress-box .qp-phase { margin-top: 1px; color: var(--text-muted); font-size: 11.5px; }
.query-progress-box .qp-steps { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 5px 14px 7px; list-style: none; }
.query-progress-box .qp-step { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 6px 0; color: var(--text-secondary); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); line-height: 1.35; }
.query-progress-box .qp-step:last-child { border-bottom: 0; }
.query-progress-box .qp-step-state { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; border: 2px solid var(--border-strong); border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; }
.query-progress-box .qp-step.is-running .qp-step-state { border-color: var(--accent); border-top-color: transparent; animation: qp-spin .75s linear infinite; }
.query-progress-box .qp-step.is-done .qp-step-state { border-color: #16a34a; background: #16a34a; }
.query-progress-box .qp-step.is-done .qp-step-label { color: var(--text-muted); }
.query-progress-box .qp-step.is-error .qp-step-state { border-color: #dc2626; background: #dc2626; }
.query-progress-box .qp-step.is-error .qp-step-label { color: #dc2626; }
/* Fila de paso: rótulo + asunto real + métricas alineadas a la derecha.
   El detalle técnico de la herramienta se despliega DENTRO de su paso. */
.query-progress-box .qp-step-body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; }
.query-progress-box .qp-step-sub {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.query-progress-box .qp-step-meta {
  flex: 0 0 auto;
  margin-left: 10px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.query-progress-box .qp-step.is-expandable { cursor: pointer; }
.query-progress-box .qp-step.is-expandable:hover .qp-step-label { color: var(--text); }
.query-progress-box .qp-step-detail { margin-top: 7px; }
.query-progress-box .qp-step-detail .tool-call { margin: 0; }
/* Dentro del paso, la cabecera de la tarjeta repetía el rótulo del propio
   paso: el conmutador es la fila y aquí solo interesa el contenido. */
.query-progress-box .qp-step-detail .tool-call .tool-head { display: none; }
.query-progress-box .qp-step-detail .tool-call .tool-body { display: block; }
.query-progress-box .qp-step.is-warn .qp-step-state { border-color: #d97706; background: #d97706; }
.query-progress-box .qp-step.is-warn .qp-step-sub { color: #b45309; }
.query-progress-box .qp-step.is-skipped .qp-step-state { border-color: var(--border-strong); background: var(--border-strong); }
.query-progress-box .qp-step.is-skipped .qp-step-label,
.query-progress-box .qp-step.is-skipped .qp-step-sub { color: var(--text-muted); }
.query-progress-box .qp-bar { height: 3px; overflow: hidden; background: var(--accent-soft); }
.query-progress-box .qp-bar-fill { width: 38%; height: 100%; background: var(--accent); animation: qp-indeterminate 1.2s ease-in-out infinite; }
@keyframes qp-indeterminate { from { margin-left: -38%; } to { margin-left: 100%; } }
/* Detalle de la respuesta: los pasos reales, con SQL y tiempos. */
.trace-head { margin-bottom: 10px; font-size: 13px; color: var(--text-secondary); }
.trace-head .trace-hint { margin-top: 3px; font-size: 11.5px; color: var(--text-muted); }
.trace-list { display: flex; flex-direction: column; gap: 6px; max-height: 58vh; overflow: auto; }
.trace-step { border: 1px solid var(--border); border-radius: 9px; background: var(--bg-hover); }
.trace-step.is-error { border-color: var(--status-error-border, #dc2626); }
.trace-step > summary {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  cursor: pointer; list-style: none; font-size: 12.5px;
}
.trace-step > summary::-webkit-details-marker { display: none; }
.trace-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 700;
}
.trace-label { flex: 1; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trace-state { color: #16a34a; font-weight: 700; }
.trace-step.is-error .trace-state { color: #dc2626; }
.trace-time { color: var(--text-muted); font-family: var(--font-mono, monospace); font-size: 11px; white-space: nowrap; }
/* Mismo vocabulario que el panel de pasos del chat: una aclaración del motor
   no es un fallo, y cada paso enseña su asunto real bajo el rótulo. */
.trace-step.is-warn { border-color: #d97706; }
.trace-step.is-warn .trace-state { color: #d97706; }
.trace-step.is-skipped .trace-state { color: var(--text-muted); }
.trace-label { display: flex; flex-direction: column; gap: 1px; white-space: normal; }
.trace-label em {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.35;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.trace-step.is-warn .trace-label em { color: #b45309; }
.trace-step.is-error .trace-label em { color: #dc2626; }
[data-theme="dark"] .trace-step.is-warn .trace-label em { color: #f0b357; }
.trace-body { padding: 0 11px 10px; }
.trace-meta { margin-bottom: 6px; color: var(--text-muted); font-size: 11px; }
.trace-sub {
  margin: 8px 0 4px; color: var(--text-muted); font-size: 10.5px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.trace-pre {
  margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text-secondary); font-size: 11.5px;
  white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto;
}

/* Inserción propuesta: decisión pendiente, no una sugerencia más. */
.pending-insert {
  margin-top: 12px; padding: 12px 14px; border: 1px solid var(--status-warning-border, #d97706);
  border-left: 3px solid #d97706; border-radius: 10px;
  background: color-mix(in srgb, #d97706 8%, transparent);
}
.pending-insert-head { display: flex; align-items: center; gap: 7px; color: #d97706; font-weight: 700; font-size: 12.5px; }
.pending-insert-motivo { margin-top: 6px; color: var(--text); font-size: 13px; }
.pending-insert-tabla { margin-top: 2px; color: var(--text-muted); font-size: 11.5px; }
.pending-insert-sql {
  margin: 8px 0 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-hover); color: var(--text-secondary); font-size: 11.5px;
  white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto;
}
.pending-insert-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pending-insert-actions .btn-confirm {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid #d97706; background: #d97706; color: #fff; font-weight: 650; cursor: pointer;
}
.pending-insert-actions .btn-cancel {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.pending-insert-actions button:disabled { opacity: .55; cursor: default; }
.pending-insert-status { font-size: 12px; color: var(--text-muted); }
.pending-insert.is-done { border-color: #16a34a; border-left-color: #16a34a; background: color-mix(in srgb, #16a34a 8%, transparent); }
.pending-insert.is-done .pending-insert-head { color: #16a34a; }
.pending-insert.is-cancelled { opacity: .55; }

/* Cada bloque de previsualización lleva su encabezado: "se va a crear",
   "va a cambiar esto", "registro actual". Sin él, dos tablas seguidas en un
   UPDATE no se distinguen y no se sabe cuál es el antes y cuál el después. */
.pending-insert-block { margin-top: 9px; }
.pending-insert-block-title {
  margin-bottom: 4px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted);
}
.pending-insert-block.is-secondary { opacity: .78; }

/* Qué va a cambiar, en datos y no en SQL: es lo que se lee para confirmar. */
.pending-insert-table {
  width: 100%; border-collapse: collapse;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; font-size: 12.5px;
}
.pending-insert-table th, .pending-insert-table td {
  padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border);
}
.pending-insert-table tr:last-child td { border-bottom: 0; }
.pending-insert-table th {
  color: var(--text-muted); font-size: 10.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .03em; background: var(--bg-hover);
}

/* ── Lote de escrituras ─────────────────────────────────────────────────────
   Varias propuestas del mismo turno en UNA tarjeta con «Confirmar todo».
   Antes: 14 tarjetas completas = 14 clics de 2-3 s (conv d958bb8b). Cada fila
   es compacta y su tarjeta completa se despliega bajo demanda («Detalle»). */
.pending-batch {
  margin-top: 12px; padding: 12px 14px; border: 1px solid var(--status-warning-border, #d97706);
  border-left: 3px solid #d97706; border-radius: 10px;
  background: color-mix(in srgb, #d97706 8%, transparent);
}
.pending-batch-head { display: flex; align-items: center; gap: 7px; color: #d97706; font-weight: 700; font-size: 12.5px; }
.pending-batch-sub { margin-top: 3px; color: var(--text-muted); font-size: 11.5px; }
.pending-batch-groups { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.pending-batch-group-title {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-secondary);
}
.pending-batch-group-title .icon { opacity: .6; }
.pending-batch-group-count {
  padding: 0 6px; border-radius: 999px; background: var(--bg-hover);
  color: var(--text-muted); font-size: 10.5px; font-weight: 650;
}
.pending-batch-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  font-size: 12.5px;
}
.pending-batch-row + .pending-batch-row,
.pending-batch-row-detail + .pending-batch-row { margin-top: 4px; }
.pending-batch-row .pbr-op {
  padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: #fff; background: #d97706;
}
.pending-batch-row.op-update .pbr-op { background: #15803d; }
.pending-batch-row.op-delete .pbr-op { background: #dc2626; }
.pending-batch-row .pbr-tabla { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
.pending-batch-row .pbr-resumen { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pending-batch-row .pbr-detail,
.pending-batch-row .pbr-discard {
  -webkit-appearance: none; appearance: none; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
  font-size: 11.5px; cursor: pointer; line-height: 1.3;
}
.pending-batch-row .pbr-discard { padding: 3px 5px; display: inline-flex; align-items: center; }
.pending-batch-row .pbr-detail:hover:not(:disabled),
.pending-batch-row .pbr-discard:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
.pending-batch-row button:disabled { opacity: .45; cursor: default; }
.pending-batch-row .pbr-status { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pending-batch-row.is-running { border-color: #d97706; }
.pending-batch-row.is-done { border-color: #16a34a; background: color-mix(in srgb, #16a34a 8%, transparent); }
.pending-batch-row.is-done .pbr-status { color: #16a34a; font-weight: 700; }
.pending-batch-row.is-error { border-color: #dc2626; background: color-mix(in srgb, #dc2626 7%, transparent); }
.pending-batch-row.is-error .pbr-status { color: #dc2626; }
.pending-batch-row.is-skipped { opacity: .7; border-style: dashed; }
.pending-batch-row.is-cancelled { opacity: .5; }
.pending-batch-row.is-cancelled .pbr-resumen { text-decoration: line-through; }
.pending-batch-row-detail { margin: 4px 0 6px 10px; padding-left: 10px; border-left: 2px solid var(--border); }
.pending-batch-row-detail > .pending-insert { margin-top: 4px; }
.pending-batch-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pending-batch-actions .btn-confirm {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid #d97706; background: #d97706; color: #fff; font-weight: 650; cursor: pointer;
}
.pending-batch-actions .btn-cancel {
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.pending-batch-actions button:disabled { opacity: .55; cursor: default; }
.pending-batch-progress { font-size: 12px; color: var(--text-muted); }
.pending-batch.is-done { border-color: #16a34a; border-left-color: #16a34a; background: color-mix(in srgb, #16a34a 8%, transparent); }
.pending-batch.is-done .pending-batch-head, .pending-batch.is-done .pending-batch-progress { color: #16a34a; }
.pending-batch.is-partial .pending-batch-progress { color: #dc2626; font-weight: 650; }
.pending-batch.is-cancelled { opacity: .6; }
@media (max-width: 767px) {
  .pending-batch-row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .pending-batch-row .pbr-tabla { display: none; }
  .pending-batch-row .pbr-status { grid-column: 1 / -1; max-width: none; white-space: normal; }
  .pending-batch-actions .btn-confirm, .pending-batch-actions .btn-cancel { flex: 1 1 auto; justify-content: center; }
}
.pending-insert-table td:first-child { color: var(--text-secondary); width: 38%; }
.pending-insert-table td:last-child { color: var(--text); font-weight: 600; word-break: break-word; }

/* Cuántas filas se van a tocar: en UPDATE/DELETE es el dato que más importa. */
.pending-insert-rows {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 12px; color: var(--text-secondary);
}
.pending-insert-rows.is-many { color: #d97706; font-weight: 600; }
/* El WHERE no encaja con nada: confirmar no haría nada, conviene saberlo ANTES. */
.pending-insert-rows.is-none { color: #d97706; font-weight: 600; }

/* El SQL pasa a segundo plano: disponible, pero sin dominar la tarjeta. */
.pending-insert-detail { margin-top: 9px; }
.pending-insert-detail > summary {
  cursor: pointer; font-size: 11.5px; color: var(--text-muted);
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.pending-insert-detail > summary::-webkit-details-marker { display: none; }
.pending-insert-detail > summary::before { content: "▸"; font-size: 9px; }
.pending-insert-detail[open] > summary::before { content: "▾"; }
.pending-insert-detail > summary:hover { color: var(--text-secondary); }

/* Un borrado no debe parecer un alta: el color lo distingue de un vistazo. */






.pending-insert-status.is-error { color: #dc2626; }
/* El agente del cliente no admite aún la operación: reintentar no arregla nada. */
.pending-insert.needs-agent-update { border-color: var(--border); border-left-color: var(--text-muted); background: var(--bg-hover); }
.pending-insert.needs-agent-update .pending-insert-head { color: var(--text-muted); }

.query-progress-box.is-done { border-left-color: #16a34a; }
.query-progress-box.is-collapsed .qp-steps { display: none; }
.query-progress-box.is-collapsed .qp-bar { display: none; }
.query-progress-box.is-done .qp-main::after { content: "▾"; margin-left: auto; color: var(--text-muted); font-size: 11px; }
.query-progress-box.is-done.is-collapsed .qp-main::after { content: "▸"; }
.query-progress-box.is-done .qp-spinner { border-color: #16a34a; animation: none; }
.query-progress-box.is-done .qp-bar-fill { width: 100%; margin-left: 0; background: #16a34a; animation: none; }
/* Terminado con incidencias: ni verde de éxito ni rojo de fallo total. */
.query-progress-box.is-warn { border-left-color: #d97706; }
.query-progress-box.is-warn .qp-spinner { border-color: #d97706; animation: none; }
.query-progress-box.is-warn .qp-bar-fill { width: 100%; margin-left: 0; background: #d97706; animation: none; }
.query-progress-box.is-warn .qp-main::after { content: "▾"; margin-left: auto; color: var(--text-muted); font-size: 11px; }
.query-progress-box.is-warn.is-collapsed .qp-main::after { content: "▸"; }
.query-progress-box.is-error { border-left-color: #dc2626; }
.query-progress-box.is-error .qp-spinner { border-color: #dc2626; animation: none; }
.query-progress-box.is-error .qp-bar-fill { margin-left: 0; background: #dc2626; animation: none; }
.query-progress-box.is-error .qp-main::after { content: "▾"; margin-left: auto; color: var(--text-muted); font-size: 11px; }
.query-progress-box.is-error.is-collapsed .qp-main::after { content: "▸"; }
[data-theme="dark"] .query-progress-box { background: #15181d; border-color: #343a43; }
[data-theme="dark"] .query-progress-box .qp-main { background: #20242a; }
[data-theme="dark"] .query-progress-box .qp-title { color: #f3f4f6; }
[data-theme="dark"] .query-progress-box .qp-phase { color: #aeb6c2; }
[data-theme="dark"] .query-progress-box .qp-step { color: #d1d5db; border-bottom-color: #2f343c; }
[data-theme="dark"] .query-progress-box .qp-step.is-done .qp-step-label { color: #aeb6c2; }
[data-theme="dark"] .query-progress-box .qp-step-sub,
[data-theme="dark"] .query-progress-box .qp-step-meta { color: #9aa3b0; }
[data-theme="dark"] .query-progress-box .qp-step.is-warn .qp-step-sub { color: #f0b357; }
.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; }

@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; }

.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-text); 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-text); 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, #15803d);
  border-radius: 999px; padding: 4px 14px 4px 10px;
  font-size: 13px; font-weight: 500; line-height: 1.4;
  color: var(--accent-text, #15803d); cursor: pointer;
  transition: all 0.2s ease; vertical-align: baseline;
  white-space: nowrap; max-width: 100%;
}
.suggestion-chip:hover {
  background: var(--accent, #15803d); 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, #15803d); 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; }

/* Esqueleto al cargar una conversación */
.conv-skeleton { display: flex; flex-direction: column; gap: 14px; padding: 18px 4px; }
.skel-bubble { border-radius: var(--radius); background: var(--bg-tertiary, rgba(128,128,128,0.14)); animation: skel-pulse 1.2s ease-in-out infinite; height: 44px; max-width: 70%; }
.skel-bubble.skel-user { align-self: flex-end; width: 45%; }
.skel-bubble.skel-assistant { align-self: flex-start; width: 70%; height: 72px; }
.skel-bubble.skel-assistant.short { width: 55%; height: 48px; }
@keyframes skel-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* 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: 14px 20px 18px; background: var(--bg); border-top: 1px solid var(--border); }
.composer { max-width: 760px; margin: 0 auto; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); padding: 12px 14px 8px; 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.has-background-run { opacity: .72; }
.background-run-notice {
  max-width: 760px; margin: 0 auto 9px; padding: 9px 11px;
  display: flex; align-items: center; gap: 9px; color: var(--status-running-text);
  background: var(--status-running-bg); border: 1px solid var(--status-running-border);
  border-radius: var(--radius); font-size: 12px;
}
.background-run-notice[hidden] { display: none; }
.background-run-spinner {
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--status-running-border); border-top-color: var(--status-running-text);
  animation: spin .75s linear infinite;
}
.background-run-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; line-height: 1.35; }
.background-run-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .88; }
.background-run-notice button {
  flex: 0 0 auto; padding: 5px 9px; color: var(--status-running-text);
  background: var(--bg-elevated); border: 1px solid var(--status-running-border);
  border-radius: var(--radius-sm); font: inherit; font-weight: 650; cursor: pointer;
}
.background-run-notice button:hover { filter: brightness(.97); }
.background-run-notice .background-run-cancel {
  color: var(--status-error-text); border-color: var(--status-error-border);
}
.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); }
/* El aviso y el identificador comparten la línea del pie. */
.footer-line { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.footer-note { text-align: center; font-size: 11.5px; color: var(--text-muted); }

/* ============================================================
   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: 767px) {
  .modal-backdrop { padding: 10px; }
  .modal { max-height: 95vh; max-height: 95dvh; 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; max-height: 90dvh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.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;
}






.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 8px 12px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text-secondary); cursor: pointer; font-size: 13px;
  font-family: var(--font-sans); line-height: 1.2; text-decoration: none;
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
.btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.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 {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; 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); line-height: 1.2; text-decoration: none;
}
.btn-primary { background: var(--accent-solid, var(--accent)); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-secondary { background: var(--bg-hover); color: var(--text); border: 1px solid var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--border); }
.btn-danger { background: rgba(220,38,38,0.1); color: var(--danger-text); border: 1px solid rgba(220,38,38,0.3); }
.btn-danger:hover:not(:disabled) { 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-icon.btn-danger {
  color: var(--danger-text);
  background: rgba(220,38,38,.07);
  border: 1px solid rgba(220,38,38,.18);
}
.btn-icon.btn-danger:hover:not(:disabled) {
  color: var(--danger);
  background: rgba(220,38,38,.16);
  border-color: rgba(220,38,38,.35);
}
.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; }

/* Control de formulario reutilizable. Algunos paneles dinámicos (pipelines,
   briefing y filtros) no viven dentro de .form-grid, pero usan .input. */
.input,
.input-sm {
  max-width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.25;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.input { width: 100%; min-height: 38px; }
.input-sm { min-height: 32px; padding: 5px 8px; font-size: 12px; }
textarea.input { min-height: 60px; resize: vertical; }
.input:focus,
.input-sm:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input:disabled,
.input-sm:disabled,
.input[readonly],
.input-sm[readonly] {
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: not-allowed;
}
.input::placeholder,
.input-sm::placeholder { color: var(--text-muted); opacity: 1; }

/* Cloud OAuth auth box (auto-import modal) */









/* Cloud provider cards (settings Cloud tab) */











/* Setup wizard card — vertical layout */


















/* Dark theme */


/* File upload drop zone */





/* File list (selected + server files) */









/* Column mapping rows */










.checkbox-label { flex-direction: row !important; align-items: center; gap: 10px !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: 767px) {
  /* 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: min(280px, 85vw) !important; min-width: min(280px, 85vw) !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: min(280px, 85vw) !important;
    min-width: min(280px, 85vw) !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;
  }

  /* ── Documento en móvil: hoja deslizante desde abajo ──
     No hay sitio para pantalla dividida, así que el documento sube ocupando
     el 92% y deja asomar el chat detrás: se ve de dónde vienes y se cierra
     arrastrando el asa hacia abajo (o con la X). */
  /* El chat conserva su columna: la hoja va por encima en `position: fixed`,
     no dentro del grid. Sin esto `artifact-open` la colapsa a 0 y detrás de la
     hoja solo quedaría el fondo. */
  .app.artifact-open.doc-open { grid-template-columns: 1fr !important; }
  .app.doc-open > .artifact-panel {
    position: fixed; left: 0; right: 0; bottom: 0;
    top: 8vh;                     /* el chat asoma por arriba */
    z-index: 120;
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--border); border-bottom: 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,.28);
    animation: doc-sheet-up .22s cubic-bezier(.2,.8,.3,1);
    display: flex; flex-direction: column;
  }
  @keyframes doc-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) {
    .app.doc-open > .artifact-panel { animation: none; }
  }
  /* Asa de arrastre: sin ella la hoja no se lee como algo deslizable. */
  .app.doc-open > .artifact-panel::before {
    content: ""; position: absolute; top: 7px; left: 50%;
    width: 38px; height: 4px; margin-left: -19px;
    background: var(--border); border-radius: 3px;
  }
  .app.doc-open > .artifact-panel .artifact-head { padding-top: 16px; }
  /* El chat sigue VISIBLE detrás de la hoja: se ve de dónde vienes y al cerrar
     no se recarga ni salta. `.artifact-open .main` lo esconde para el modo
     artefacto a pantalla completa, así que aquí hay que ganarle en
     especificidad (dos clases) y devolverle su ancho. */
  .app.artifact-open.doc-open > .main {
    visibility: visible !important;
    width: auto !important; min-width: 0;
    pointer-events: none;   /* la hoja manda mientras está abierta */
  }
  .app.doc-open::after {
    content: ""; position: fixed; inset: 0;
    background: rgba(0,0,0,.35); z-index: 119;
  }
  /* En una hoja no cabe el botón de expandir (no hay split en móvil). */
  .app.doc-open #artifactExpand { display: none; }

  /* 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: 16px; }
  .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; }

  /* (El ajuste móvil del desplegable de notificaciones vive en el bloque
     mobile del final del fichero: cualquier regla aquí la pisa la base de
     .notif-dropdown, que está declarada MÁS ABAJO — orden en cascada.) */
}

/* ============================================================
   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;
}

/* ── Gestión documental: PANTALLA PROPIA ─────────────────────
   Carpetas | lista | previsualización. El chat es una burbuja, así los
   documentos se quedan quietos: no hay saltos entre paneles. */
.gd-page { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
.gd-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 12px; flex-shrink: 0; flex-wrap: wrap;
}
.gd-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.gd-head-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.gd-head-actions .docs-input { min-width: 190px; }
.gd-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 210px minmax(280px, 1fr) minmax(320px, 1.2fr);
  gap: 0; border-top: 1px solid var(--border);
}
.gd-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.gd-col-folders {
  gap: 2px; padding: 10px 8px; overflow-y: auto;
  border-right: 1px solid var(--border);
}
.gd-col-list { padding: 10px 12px; overflow: hidden; border-right: 1px solid var(--border); }
.gd-col-list .docs-list { flex: 1; max-height: none; overflow-y: auto; }
.gd-col-preview { background: var(--bg-hover); overflow: hidden; }
.gd-preview-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: var(--bg);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.gd-preview-name {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gd-preview-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.gd-preview-img { flex: 1; min-height: 0; object-fit: contain; padding: 12px; }
.gd-preview-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 24px; text-align: center;
  color: var(--text-muted); font-size: 12.5px;
}
.gd-preview-empty.is-error { color: #dc2626; }

/* Burbuja de chat: flota sobre la pantalla, no le roba sitio a nada. */
.gd-chat-fab {
  position: absolute; right: 22px; bottom: 22px; z-index: 20;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: var(--accent); color: #fff; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.22); transition: transform .15s;
}
.gd-chat-fab:hover { transform: scale(1.06); }
.gd-chat-pop {
  position: absolute; right: 22px; bottom: 80px; z-index: 21;
  width: min(340px, calc(100vw - 44px));
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.24);
  animation: gd-pop-in .16s ease;
}
@keyframes gd-pop-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gd-chat-pop { animation: none; } }
.gd-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600;
}
.gd-chat-head span { display: flex; align-items: center; gap: 6px; }
.gd-chat-body { padding: 12px; }
.gd-chat-hint { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.gd-chat-form { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); }
.gd-chat-form input {
  flex: 1; min-width: 0; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px;
}
.gd-chat-form input:focus { outline: none; border-color: var(--accent); }

@media (max-width: 1100px) {
  /* Sin sitio para tres columnas: la previsualización pasa debajo. */
  .gd-grid { grid-template-columns: 190px 1fr; grid-template-rows: 1fr auto; }
  .gd-col-preview { grid-column: 1 / -1; border-top: 1px solid var(--border); min-height: 300px; }
}
@media (max-width: 760px) {
  .gd-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .gd-col-folders {
    flex-direction: row; overflow-x: auto; border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .gd-col-folders .docs-folder { flex: 0 0 auto; }
  .gd-col-folders .docs-folder-sep, .gd-col-folders .docs-folder-empty { display: none; }
  .gd-col-list { border-right: 0; }
  .gd-head-actions { width: 100%; margin-left: 0; }
  .gd-head-actions .docs-input { flex: 1; min-width: 0; }
  /* Visor en móvil: vacío NO existe (el hueco "selecciona un documento" se
     comía media pantalla y dejaba la lista en una fila); con documento pasa a
     ocupar la pantalla entera, con su botón de cerrar en la cabecera. */
  .gd-col-preview:not(.has-doc) { display: none; }
  .gd-col-preview.has-doc {
    position: fixed; inset: 0; z-index: 130;
    background: var(--bg-elevated);
    border-top: 0; min-height: 0;
    display: flex; flex-direction: column;
    padding-top: env(safe-area-inset-top);
  }
  .gd-col-preview.has-doc .gd-preview-frame,
  .gd-col-preview.has-doc .gd-preview-img { flex: 1; min-height: 0; }
  .gd-preview-close { min-width: 40px; min-height: 40px; }
}

/* ── Gestión documental EN PANEL (junto al chat) ─────────────── */
.gesdoc { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.gesdoc-bar {
  display: flex; gap: 6px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.gesdoc-bar .docs-input { flex: 1; }
.gesdoc-body { display: flex; flex: 1; min-height: 0; }
.gesdoc-folders {
  width: 190px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px; overflow-y: auto;
  border-right: 1px solid var(--border);
}
.gesdoc-list-wrap {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  padding: 8px 10px; overflow: hidden;
}
.gesdoc-list-wrap .docs-list { flex: 1; max-height: none; overflow-y: auto; }
.docs-folder.is-disk em::before { content: "▸"; }
/* Carpeta cuyos documentos no se pueden abrir aquí (viven fuera del alcance
   del agente): se lista, pero se distingue de las que sí funcionan. */
.docs-folder.is-unreachable { opacity: .6; }
.docs-folder.is-unreachable span { text-decoration: underline dotted var(--text-muted); }
@media (max-width: 900px) {
  /* En la hoja móvil no caben dos columnas: las carpetas van arriba. */
  .gesdoc-body { flex-direction: column; }
  .gesdoc-folders {
    width: auto; flex-direction: row; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  .gesdoc-folders .docs-folder { flex: 0 0 auto; }
  .gesdoc-folders .docs-folder-sep, .gesdoc-folders .docs-folder-empty { display: none; }
}

/* ── Gestión documental (modal antiguo) ──────────────────────── */
.modal.modal-wide { max-width: min(1100px, 94vw); width: min(1100px, 94vw); }


.docs-folder {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-secondary);
  font-size: 12.5px; text-align: left; cursor: pointer; transition: all .12s;
}
.docs-folder:hover { background: var(--bg-hover); color: var(--text); }
.docs-folder.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.docs-folder span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-folder em { font-style: normal; font-size: 11px; color: var(--text-muted); }
.docs-folder-sep {
  margin: 9px 0 3px; padding: 0 8px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}


.docs-input {
  flex: 1 1 200px; min-width: 0; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px;
}
.docs-input:focus { outline: none; border-color: var(--accent); }
.docs-input-sm { flex: 0 1 130px; }
.docs-meta { margin-bottom: 6px; font-size: 11.5px; color: var(--text-muted); }
.docs-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 52vh; overflow: auto;
}
.docs-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); transition: border-color .12s;
}
.docs-row:hover { border-color: var(--accent); }
.docs-row-icon { color: var(--accent-text); flex-shrink: 0; display: flex; }
.docs-row-main { flex: 1; min-width: 0; }
.docs-row-title {
  font-size: 12.5px; color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.docs-row-sub { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.docs-tag {
  padding: 1px 6px; border-radius: 4px; background: var(--bg-hover);
  color: var(--text-muted); font-size: 10.5px; white-space: nowrap;
}
/* Documento sin ubicación registrada: se ve, pero se distingue de un vistazo
   para que nadie cuente con poder abrirlo. */
.docs-row.is-unavailable { border-style: dashed; opacity: .72; }
.docs-row.is-unavailable .docs-row-icon { color: var(--warning, #d97706); }
.docs-tag.is-warn {
  background: color-mix(in srgb, var(--warning, #d97706) 16%, transparent);
  color: var(--warning, #d97706); cursor: help;
}
/* Carpetas vacías plegadas: son mayoría y llenaban la barra de ruido. */
.docs-folder-empty { margin-top: 6px; }
.docs-folder-empty > summary {
  padding: 5px 8px; font-size: 11px; color: var(--text-muted);
  cursor: pointer; list-style: none; border-radius: 6px;
}
.docs-folder-empty > summary::-webkit-details-marker { display: none; }
.docs-folder-empty > summary::before { content: "▸ "; font-size: 9px; }
.docs-folder-empty[open] > summary::before { content: "▾ "; }
.docs-folder-empty > summary:hover { background: var(--bg-hover); color: var(--text-secondary); }
.docs-folder-empty .docs-folder { opacity: .7; }

.docs-row-date, .docs-row-size {
  flex-shrink: 0; font-size: 11.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.docs-row-size { width: 58px; text-align: right; }
.docs-empty { padding: 12px; color: var(--text-muted); font-size: 12px; }
.docs-loading {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 34px 12px; color: var(--text-secondary); font-size: 12.5px;
}
.docs-path {
  margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-hover); color: var(--text); font-size: 12px;
  white-space: pre-wrap; word-break: break-all; user-select: all;
}
@media (max-width: 900px) {
  /* En móvil las carpetas pasan a una tira horizontal: en columna se comerían
     la mitad de la pantalla y la lista quedaría inservible. */
  
  
  .docs-folder { flex: 0 0 auto; }
  .docs-folder-sep { display: none; }
  .docs-row-date, .docs-row-size { display: none; }
}

/* Permisos de escritura en Sage, dentro de la ficha de usuario. Se separan
   visualmente de los módulos: no dan acceso a una pantalla, autorizan a
   modificar el ERP del cliente. */
.user-write-perms {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.user-write-perms .form-section-label {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--warning, #d97706);
}
.mod-toggle.is-write.active {
  border-color: color-mix(in srgb, var(--warning, #d97706) 55%, var(--border));
  background: color-mix(in srgb, var(--warning, #d97706) 10%, transparent);
}
.mod-toggle.is-write.active .mod-toggle-icon { color: var(--warning, #d97706); }

/* ── Auditoría: PANTALLA PROPIA ──────────────────────────────── */
.au-page .au-body { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.au-page #auList {
  flex: 1; max-height: none; overflow-y: auto;
  padding: 12px 18px 18px; max-width: 1100px; margin: 0 auto; width: 100%;
}
.au-page .au-stats { border-top: 1px solid var(--border); }
.au-scope {
  align-self: center; margin-left: auto;
  font-size: 11.5px; color: var(--text-muted);
}
.au-row-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 6px; font-size: 11px; color: var(--text-muted);
}
.au-row-meta span { display: inline-flex; align-items: center; gap: 4px; }
.au-row-meta .au-ok { color: #16a34a; }
.au-row-meta .au-warn { color: var(--warning, #d97706); cursor: help; }
.au-row.is-failed { opacity: .72; border-style: dashed; }

/* ── Auditoría EN PANEL ──────────────────────────────────────── */
.au-stats {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.au-stat {
  display: flex; flex-direction: column; align-items: center;
  min-width: 74px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
}
.au-stat strong { font-size: 16px; color: var(--text); line-height: 1.1; }
.au-stat span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.au-stat.is-warn { border-color: color-mix(in srgb, var(--warning, #d97706) 45%, var(--border)); }
.au-stat.is-warn strong { color: var(--warning, #d97706); }
#auList { padding: 8px 12px; }
.au-row {
  padding: 9px 11px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg);
}
.au-row-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.au-row-table { font-size: 12px; color: var(--text); font-weight: 600; }
.au-row-when { margin-left: auto; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.au-row-motivo { margin-top: 4px; font-size: 12.5px; color: var(--text-secondary); }
.au-row-foot { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.au-sql-box {
  margin: 7px 0 0; padding: 8px 10px; border-radius: 7px;
  background: var(--bg-hover); color: var(--text-secondary);
  font-size: 11.5px; white-space: pre-wrap; word-break: break-word;
  max-height: 160px; overflow: auto;
}

/* ── Auditoría de escrituras (tabla del modal antiguo) ───────── */






/* El motivo puede ser largo: se recorta a una línea (completo en el title) para
   que la fila no crezca en vertical y la tabla siga siendo legible. */



.audit-tag {
  display: inline-block; padding: 2px 7px; border-radius: 5px;
  font-size: 10.5px; font-weight: 650; white-space: nowrap;
  background: var(--bg-hover); color: var(--text-secondary);
}
.audit-tag.is-insert { background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }
.audit-tag.is-update { background: color-mix(in srgb, #15803d 15%, transparent); color: #15803d; }
.audit-tag.is-delete { background: color-mix(in srgb, #dc2626 15%, transparent); color: #dc2626; }
.audit-tag.is-failed { background: var(--bg-hover); color: var(--text-muted); text-decoration: line-through; }
/* "sin copia" con el motivo en el title: una celda vacía no explicaría nada. */


/* ── Visor de documentos ──────────────────────────────────────
   Vive dentro del panel de artefactos: mismo sitio, mismo resizer y mismo
   modo split, así el usuario no aprende dos comportamientos distintos. */
.doc-viewer {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  /* Gris neutro también en tema oscuro: el visor de PDF del navegador pinta
     la página en blanco y sobre fondo negro el contraste es agresivo. */
  background: #f1f2f4;
  overflow: auto;
}
:root[data-theme="dark"] .doc-viewer { background: #2a2a2e; }
/* El frame ocupa TODO el panel: los controles de zoom y paginación son del
   visor del navegador y quedan dentro, no se les puede robar alto. */
.doc-frame { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.doc-image { max-width: calc(100% - 24px); max-height: calc(100% - 24px); object-fit: contain; margin: 12px; }
.doc-text {
  width: 100%; height: 100%; margin: 0; padding: 18px 20px;
  background: var(--bg); color: var(--text);
  font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; overflow: auto;
}
.doc-loading, .doc-error {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 22px; color: var(--text-secondary); font-size: 13px; text-align: center;
}
.doc-error { color: var(--text-secondary); flex-direction: column; gap: 12px; max-width: 340px; margin: auto; }
.doc-error svg { color: #d97706; }
/* Entrada suave del contenido: sin esto el documento aparece de golpe al
   terminar de descargarse y da la sensación de parpadeo. */
.doc-frame:not([hidden]), .doc-image:not([hidden]), .doc-text:not([hidden]) {
  animation: doc-fade .18s ease;
}
@keyframes doc-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .doc-frame, .doc-image, .doc-text { animation: none !important; }
}
.doc-spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: doc-spin .8s linear infinite;
}
@keyframes doc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .doc-spinner { animation-duration: 2.4s; } }

/* Con un documento abierto, la barra solo deja lo que aplica: las pestañas
   "Vista previa / Código" y los export a HTML/Word son de los artefactos. */
.app.doc-open .artifact-tabs,
.app.doc-open #artifactWord,
.app.doc-open #artifactPdf { display: none; }
.app.doc-open .artifact-title {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* Chip para abrir un documento desde la respuesta del chat. */
.doc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 3px 5px 3px 0; padding: 5px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text-secondary);
  font-size: 12px; cursor: pointer; transition: all .15s;
  max-width: 100%;
}
.doc-chip:hover { border-color: var(--accent); color: var(--text); }
.doc-chip svg { flex-shrink: 0; color: var(--accent-text); }
.doc-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 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; height: 100dvh;
  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-text);
  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: 1279px) {
  .app.artifact-open.artifact-split {
    grid-template-columns: var(--sidebar-w, 280px) 4px 1fr 4px var(--artifact-w, 480px);
  }
}
@media (max-width: 767px) {
  /* 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-text);
  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:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
.settings-pane label > select,
.settings-pane label > textarea {
  display: block; width: 100%; margin-top: 4px;
  padding: 7px 10px;
  min-height: 38px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 13px; font-family: var(--font-sans);
  transition: border-color .15s, box-shadow .15s;
}
.settings-pane label > textarea { min-height: 72px; resize: vertical; }
.settings-pane label > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):focus,
.settings-pane label > select:focus,
.settings-pane label > textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.settings-pane label > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):disabled,
.settings-pane label > select:disabled,
.settings-pane label > textarea:disabled {
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: not-allowed;
}
.settings-pane label > input::placeholder,
.settings-pane label > textarea::placeholder { color: var(--text-muted); opacity: 1; }
.settings-pane input[type="date"],
.settings-pane input[type="time"],
.input[type="date"],
.input[type="time"],
.input-sm[type="date"],
.input-sm[type="time"] { color-scheme: light; }
:root[data-theme="dark"] .settings-pane input[type="date"],
:root[data-theme="dark"] .settings-pane input[type="time"],
:root[data-theme="dark"] .input[type="date"],
:root[data-theme="dark"] .input[type="time"],
:root[data-theme="dark"] .input-sm[type="date"],
:root[data-theme="dark"] .input-sm[type="time"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .settings-pane input[type="date"],
  :root:not([data-theme="light"]) .settings-pane input[type="time"],
  :root:not([data-theme="light"]) .input[type="date"],
  :root:not([data-theme="light"]) .input[type="time"],
  :root:not([data-theme="light"]) .input-sm[type="date"],
  :root:not([data-theme="light"]) .input-sm[type="time"] { color-scheme: dark; }
}
.settings-pane .checkbox-label {
  display: flex; align-items: flex-start; gap: 8px;
  font-weight: 400;
  flex-wrap: wrap;
}
.settings-pane .checkbox-label input { margin: 0; flex-shrink: 0; }
.settings-pane .checkbox-label .help { margin: 2px 0 8px; flex-basis: 100%; padding-left: 48px; }

/* Toggle booleano unificado. Los controles que ya tienen una presentación
   especializada (permisos, conexión Sage y personalización del sidebar)
   conservan sus componentes propios; todos los checkbox nativos usan este. */
.ui-toggle {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: inline-block;
  flex: 0 0 38px;
  width: 38px !important;
  min-width: 38px;
  height: 22px;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px !important;
  background-color: var(--border-strong) !important;
  background-image: radial-gradient(circle, #fff 0 7px, transparent 7.5px) !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  background-position: 0 center !important;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
  cursor: pointer;
  transition: background-color .2s ease, background-position .2s ease,
              border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.ui-toggle:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ui-toggle:checked {
  border-color: var(--accent) !important;
  background-color: var(--accent) !important;
  background-position: 100% center !important;
  box-shadow: 0 2px 7px rgba(37,99,235,.28);
}
.ui-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ui-toggle:disabled {
  opacity: .48;
  cursor: not-allowed;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .ui-toggle { transition: none; }
}

/* Sidebar visibility customization */

.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);
}
.sidebar-vis-item input:focus-visible + .toggle-switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 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-icon {
  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;
}

.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-divider {
  border: none; border-top: 1px solid var(--border);
  margin: 18px 0;
}

/* Filas y botoneras de Ajustes (2026-09-16): antes iban con estilos en línea
   repetidos en cada pestaña. Una sola definición, con su versión móvil abajo. */
.conn-form { display: block; }
.settings-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-field-row > label { min-width: 0; }
.settings-audit-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-bottom: 12px; }
.settings-audit-filters > label { margin-bottom: 0; }
.settings-audit-filters .btn-sm { min-height: 38px; }
.settings-action-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.settings-action-row > span:empty { display: none; }
.settings-pane label > .help { margin: 6px 0 0; }
.settings-note { margin: 8px 0 0; }
.settings-color-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.settings-color-row input[type="color"] { width: 44px; height: 38px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); cursor: pointer; }
.settings-color-row input[type="text"] { width: 120px; min-height: 38px; padding: 7px 10px; background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font: 13px var(--font-sans); font-variant-numeric: tabular-nums; outline: none; transition: border-color .15s, box-shadow .15s; }
.settings-color-row input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.license-actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.license-status-area { margin-top: 4px; }
.loading-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; margin-right: 4px; animation: loadingDotPulse 1s ease-in-out infinite; }
@keyframes loadingDotPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.integration-status strong { display: inline-flex; align-items: center; gap: 6px; }
.integration-status.is-ok strong { color: var(--status-success-text); }
.integration-status.is-warn strong { color: var(--status-warning-text); }
.integration-status.is-error strong { color: var(--status-error-text); }
.integration-status small { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.integration-status code { font-size: 11px; padding: 1px 5px; border-radius: 4px; background: var(--bg-hover); color: var(--text); }
.integration-status code:empty::before { content: "—"; color: var(--text-muted); }






/* KPI config list */
/* Menú de KPIs por empresa. */
/* El editor de KPIs (modal por empresa) se retiró el 2026-09-17: ahora vive en
   el PANEL DE KPIs (bloque al final de este fichero, prefijo .kpp-). */

/* Tarjeta "KPI fijado" en el chat, tras `sage_add_kpi`. Verde, no ámbar como
   las escrituras: aquí no hay nada que confirmar ni riesgo sobre los datos del
   cliente — es un aviso de que ya está hecho, con la salida para deshacerlo. */
.kpi-added {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #16a34a 45%, transparent);
  border-left: 3px solid #16a34a; border-radius: 10px;
  background: color-mix(in srgb, #16a34a 8%, transparent);
  animation: kpi-added-in .22s ease-out;
}
@keyframes kpi-added-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .kpi-added { animation: none; } }
.kpi-added-head {
  display: flex; align-items: center; gap: 7px;
  color: #16a34a; font-weight: 700; font-size: 12.5px;
}
.kpi-added-body { display: flex; align-items: baseline; gap: 9px; margin-top: 8px; flex-wrap: wrap; }
.kpi-added-value { font-size: 21px; font-weight: 700; color: var(--text); line-height: 1.1; }
.kpi-added-label { font-size: 13px; color: var(--text-secondary); }
.kpi-added-note {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 8px;
  font-size: 11.5px; color: var(--text-muted);
}
.kpi-added-note svg { flex-shrink: 0; margin-top: 1px; }
.kpi-added-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.kpi-added-actions .btn-cancel {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.kpi-added-actions .btn-secondary { padding: 6px 12px; }
.kpi-added-actions button:disabled { opacity: .55; cursor: default; }
.kpi-added-status { font-size: 12px; color: var(--text-muted); }
.kpi-added-status.is-error { color: var(--danger, #dc2626); }
.kpi-added.is-cancelled { opacity: .55; }
.kpi-added.is-error {
  border-color: color-mix(in srgb, #dc2626 45%, transparent);
  border-left-color: #dc2626;
  background: color-mix(in srgb, #dc2626 8%, transparent);
}
.kpi-added.is-error .kpi-added-head { color: #dc2626; }
.kpi-added-motivo { margin-top: 6px; color: var(--text); font-size: 13px; }

@media (max-width: 767px) {
  .settings-tab { padding: 7px 10px; font-size: 12px; }
}

/* ============================================================
   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-text);
  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: var(--status-warning-bg);
  border-left: 3px solid var(--status-warning-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--status-warning-text);
}

/* ============================================================
   CONVERSATION SEARCH
   ============================================================ */







.conv-empty {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* ============================================================
   LICENSE BADGE (sidebar)
   ============================================================ */
/* La licencia es una fila más del menú ⋮ (2026-09-11): «Licencia · 212 días».
   Solo el valor lleva el color de estado; icono y rótulo van en tinta normal. */
.license-text { font-variant-numeric: tabular-nums; }
.user-menu .license-badge .icon, .user-menu .license-badge .license-label { color: var(--text); }
.user-menu .license-badge .license-text { margin-left: auto; font-size: 12px; font-weight: 600; }
.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-text, #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;
}

/* ============================================================
   USAGE BADGE
   ============================================================ */






/* ============================================================
   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-text);
  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 color-mix(in srgb, var(--accent) 25%, transparent);
}
.quick-chip:active {
  transform: translateY(0);
}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.notif-wrap {
  position: relative;
}
.notif-btn {
  position: relative;
}
.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-width: calc(100vw - 24px);
  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-text);
  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-text);
}
.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-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;
}

/* Usage panel chart bars */
.usage-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.usage-bar::after {
  content: '';
  width: 100%;
  max-width: 32px;
  height: var(--h, 0%);
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}
.usage-bar-val {
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 2px;
}
.usage-bar-label {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Per-message cost indicator */
.msg-cost-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 2px 8px;
  font-size: 10px;
  color: var(--text-muted);
  cursor: default;
}
.msg-cost-tokens {
  font-weight: 500;
  opacity: 0.7;
}
.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-last-run {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.anomaly-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 600;
}
.anomaly-status-ok { color: var(--status-success-text); background: var(--status-success-bg); border-color: var(--status-success-border); }
.anomaly-status-warning { color: var(--status-warning-text); background: var(--status-warning-bg); border-color: var(--status-warning-border); }
.anomaly-status-error { color: var(--status-error-text); background: var(--status-error-bg); border-color: var(--status-error-border); }
.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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 10px;
  font-size: 11px;
  line-height: 1.2;
  font-family: var(--font-sans);
  color: var(--text);
  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:not(:disabled) {
  background: var(--accent-hover); border-color: var(--accent-hover);
}
.btn-sm.btn-secondary, .btn-secondary.btn-sm {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-sm.btn-secondary:hover:not(:disabled), .btn-secondary.btn-sm:hover:not(:disabled) {
  background: var(--border);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-sm.btn-danger, .btn-danger.btn-sm {
  background: rgba(220,38,38,.1);
  color: var(--danger);
  border-color: rgba(220,38,38,.3);
}
.btn-sm.btn-danger:hover:not(:disabled), .btn-danger.btn-sm:hover:not(:disabled) {
  background: rgba(220,38,38,.2);
  color: var(--danger);
  border-color: rgba(220,38,38,.42);
}
.btn-sm.btn-ghost, .btn-ghost.btn-sm {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-sm.btn-ghost:hover:not(:disabled), .btn-ghost.btn-sm:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text);
  border-color: transparent;
}
.btn-sm:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-ghost):not(.btn-outline):hover:not(:disabled),
.btn-sm:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-ghost):not(.btn-outline).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
   ============================================================ */





/* 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: #15803d; }

/* 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; }
.anomaly-catalog-item-added { opacity: .78; }
.anomaly-catalog-item-added .btn-sm:disabled {
  opacity: 1;
  cursor: not-allowed;
  color: var(--status-success-text);
  background: var(--status-success-bg);
  border-color: var(--status-success-border);
}
[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
   ============================================================ */




/* ============================================================
   INLINE PANEL PAGES (Users, Settings — full main area)
   ============================================================ */
.panel-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  /* Hueco de la barra de scroll siempre reservado: si aparecía al llegar los
     datos, el contenido centrado (Actividad, Dashboard…) saltaba de lado. */
  scrollbar-gutter: stable;
  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,
.btn-back {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  line-height: 0;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, transform .06s ease;
}
.panel-back-btn:hover:not(:disabled),
.btn-back:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border);
}
.panel-back-btn:active:not(:disabled),
.btn-back:active:not(:disabled) { transform: translateY(1px); }
.panel-back-btn:disabled,
.btn-back:disabled { opacity: .5; cursor: not-allowed; }
.panel-back-btn svg,
.btn-back svg { display: block; pointer-events: none; }
.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: 1023px) {
  .users-panel-grid { grid-template-columns: 1fr; }
}

/* ── User card ── */
.user-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  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: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
/* Una sola tinta: el administrador va en sólido, el resto en su tono suave. */
.user-card-avatar.is-admin { background: var(--accent); color: #fff; }
.user-card-header .user-del-btn { margin-left: 2px; }
.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-text);
}
.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: var(--status-warning-bg);
  color: var(--status-warning-text);
}
/* 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:not(:disabled) {
  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;
  order: -1;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  transition: transform .15s;
}
.user-card-perms summary > span:first-of-type { margin-right: auto; }
.user-perm-count {
  color: var(--text-muted);
  font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.user-card-perms summary:hover { color: var(--text); }
.user-card-perms[open] summary::after { transform: rotate(-90deg); }
.user-card-perms summary::after { transform: rotate(-90deg) rotate(90deg); }

/* ── Module toggle (reusable across perms + module ACL) ── */
.mod-toggle-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.mod-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
  background: var(--bg);
  user-select: none;
}
.mod-toggle,
.form-grid-compact .mod-toggle { flex-direction: row; gap: 5px; font-size: 12px; font-weight: 400; }
.mod-toggle:hover { border-color: var(--border-strong); color: var(--text); }
.mod-toggle.active {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 500;
}
.mod-toggle input:disabled ~ * { opacity: .55; }
.mod-toggle:has(input:disabled) { cursor: not-allowed; }
.mod-toggle input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mod-toggle:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.mod-toggle-icon {
  flex-shrink: 0;
  color: currentColor;
  opacity: .7;
  display: flex;
}
.mod-toggle.active .mod-toggle-icon { color: currentColor; opacity: 1; }
.mod-toggle-label {
  font-size: 12px;
  font-weight: inherit;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── User card footer ── */
.user-card-self {
  display: flex; align-items: center; gap: 6px;
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px;
}
.user-card-self svg { flex: none; opacity: .7; }
.user-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.user-role-select-wrap select.role-select { width: auto; min-width: 132px; min-height: 32px; padding: 5px 30px 5px 10px; }
.user-card-footer .btn-sm { min-height: 32px; }
.user-card-footer-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}


.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:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-text);
  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: 767px) {
  .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"],
.form-grid-compact select {
  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 select,
.user-role-select-wrap select.role-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 37px;
  padding-right: 34px;
  cursor: pointer;
  color-scheme: light;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 15px) calc(50% - 1px),
    calc(100% - 10px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-grid-compact select:hover:not(:disabled) {
  border-color: var(--border-strong);
  background-color: var(--bg-hover);
}
.form-grid-compact input:focus,
.form-grid-compact select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-grid-compact select option,
.form-grid-compact select optgroup {
  background: var(--bg-elevated);
  color: var(--text);
  font-family: var(--font-sans);
}
.form-grid-compact select:disabled {
  cursor: not-allowed;
  color: var(--text-muted);
  background-color: var(--bg-hover);
}
:root[data-theme="dark"] .form-grid-compact select,
:root[data-theme="dark"] .user-role-select-wrap select.role-select {
  color-scheme: dark;
}
.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: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.new-user-section h4 .icon { display: none; }
.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: 767px) {
  .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; }
  .settings-field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .settings-audit-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-audit-filters .btn-sm { grid-column: 1 / -1; }
}

/* ============================================================
   MODULE ACCESS MODAL — Simplified (module toggles)
   ============================================================ */








.btn-xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 26px;
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1.2;
  font-family: var(--font-sans);
}










/* ── 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); }





/* ============================================================
   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);
}


/* Global search results panel - REMOVED */

.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; }
/* ── Consumo (informe del tenant) ── */
.usage-page .panel-page-header { gap: 12px; }
.usage-page .panel-page-title { flex: 1; margin: 0; font-size: 1.2rem; }
.usage-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.usage-periods { display: inline-flex; padding: 3px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px; }
.usage-period { padding: 4px 11px; border: none; background: transparent; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.usage-period.active { background: var(--accent-soft); color: var(--accent-text); }
.usage-insights { padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--bg-elevated); margin-bottom: 16px; }
.usage-insights h3 { margin: 0 0 8px; font-size: .95rem; }
.usage-insights ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.usage-insights li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.usage-insights li svg { flex: none; margin-top: 3px; color: var(--accent-text); }
.usage-insights li b { color: var(--text); font-weight: 650; }
.usage-insights li.warn svg { color: #d97706; }
.usage-insights a { color: var(--accent-text); }
.usage-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.usage-kpi { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); min-width: 0; }
.usage-kpi-label { font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.usage-kpi-value { font-size: 22px; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -.01em; }
.usage-kpi-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.usage-kpi.is-warn .usage-kpi-value { color: #d97706; }
.usage-delta.is-up { color: #dc2626; font-weight: 600; }
.usage-delta.is-down { color: #16a34a; font-weight: 600; }
[data-theme="dark"] .usage-delta.is-up { color: #f87171; }
[data-theme="dark"] .usage-delta.is-down { color: #4ade80; }
.usage-tok-split { display: block; height: 5px; margin: 4px 0 4px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 25%, transparent); overflow: hidden; }
.usage-tok-split span { display: block; height: 100%; background: var(--accent); }
.usage-charts { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 8px; }
.usage-chart-card { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); min-width: 0; }
.usage-chart-card h3 { margin: 0 0 8px; font-size: .9rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.usage-chart-wrap { position: relative; height: 220px; }
.usage-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.usage-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.usage-legend i.line { width: 14px; height: 2px; background: var(--text-muted); border-radius: 1px; }
.usage-table td.num, .usage-table th { white-space: nowrap; }
.usage-table td.muted, .usage-table .muted { color: var(--text-muted); }
.usage-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-model { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
.usage-model.is-deep { color: #b45309; }
[data-theme="dark"] .usage-model.is-deep { color: #fbbf24; }
.usage-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: rgba(245,158,11,.15); color: #b45309; font-size: 10px; font-weight: 700; vertical-align: middle; }
[data-theme="dark"] .usage-tag { color: #fbbf24; }
.usage-share-cell { min-width: 140px; }
.usage-share-cell span:last-child { font-size: 12px; font-variant-numeric: tabular-nums; }
.usage-share { display: inline-block; vertical-align: middle; width: 80px; height: 6px; margin-right: 8px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.usage-share-fill { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.usage-share-fill.is-deep { background: #f59e0b; }
.usage-conv-link { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--border-strong); }
.usage-conv-link:hover { color: var(--accent-text); border-bottom-color: var(--accent); }
.usage-log, .usage-help { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); }
.usage-log summary, .usage-help summary { padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.usage-log > *:not(summary), .usage-help > *:not(summary) { margin: 0 14px 14px; }
.usage-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 10px !important; }
.usage-filters label { font-size: 12px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 3px; }
.usage-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 12.5px; }
.usage-help dt { font-weight: 650; color: var(--text); }
.usage-help dd { margin: 0; color: var(--text-secondary); line-height: 1.5; }
@media (max-width: 900px) { .usage-charts { grid-template-columns: 1fr; } .usage-help dl { grid-template-columns: 1fr; } .usage-legend { margin-left: 0; } }












/* ============================================================
   FULLSCREEN MODE
   ============================================================ */
body.fullscreen-mode .sidebar {
  display: none !important;
}
body.fullscreen-mode .resizer {
  display: none !important;
}
/* El contenedor en rejilla es `.app` (no `.layout`, que no existe): sin esto
   la barra lateral se ocultaba pero su columna seguía ocupando 280 px en
   blanco, y el botón parecía no hacer nada. */
body.fullscreen-mode .app {
  grid-template-columns: 0 0 1fr 0 0 !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-text);
}
.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-text);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ============================================================
   EMBED MODE — compact view for embedded 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; height: 100dvh;
}

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



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 */








/* 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 */










/* History timeline */







/* Dry run */





/* Wizard */














/* Model grid */







/* Template grid */







/* Condition rows */






/* Preview count */



/* Action rows */








/* Summary step */








/* Wizard nav */


/* 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); }

.sage-toggle-control {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  user-select: none;
}
.sage-toggle-control .toggle-switch { flex: 0 0 38px; }
.sage-toggle-control:focus-within .toggle-slider {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}



/* ── Wizard step transition animations ── */

@keyframes wfStepFadeIn {
  0%   { opacity: 0; transform: translateX(24px); }
  100% { opacity: 1; transform: translateX(0); }
}









@keyframes wfCardPop {
  0%   { opacity: 0; transform: scale(.85) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}







@keyframes wfRowSlide {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Step indicator pulse on active */

@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 ── */


















/* ── Smart condition value inputs ── */





/* ── Tips box ── */



/* ── Empty state ── */




/* ── Action type cards (empty state) ── */




/* ── Action row enhancements ── */






/* ── Summary card (Step 4) ── */














/* ── Config grid (Step 4) ── */






#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 ── */


/* ── Dry-run section ── */






/* ── AI Chat Drawer (FAB + panel) ── */




.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-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-msg { display: flex; gap: 10px; align-items: flex-start; }
.wf-ai-msg-user { flex-direction: row-reverse; }

.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-user .wf-ai-msg-bubble {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border-bottom-right-radius: 4px;
}
















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

/* ── Warning box (no action fields) ── */


/* ═══════════════════════════════════════════════════════════
   AI Workflow Chat — Full-panel conversational builder
   ═══════════════════════════════════════════════════════════ */







/* Welcome screen */
















/* 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-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-user .wfc-msg-bubble {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border-top-right-radius: 4px;
}



/* Typing animation */




@keyframes wfc-bounce {
  0%, 100% { transform: translateY(0); opacity: .4; }
  50% { transform: translateY(-6px); opacity: 1; }
}



/* Workflow preview card */















/* Input area */









@media (max-width: 767px) {
  
  
  
  
  .wfc-msg { max-width: 100%; }
  
}

/* ── Sparkline chart ── */


/* ── History enhancements ── */








/* ── Sidebar workflow item hover shine ── */



/* Loader spin only for controls that actually represent an in-flight action.
   A generic disabled button must keep its icon still. */
.anomaly-run-btn .icon, .wf-wizard-nav .icon {
  transition: none;
}
.anomaly-run-btn:disabled .icon,
.wf-wizard-nav:disabled .icon,
button.is-loading .icon,
button[aria-busy="true"] .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: 767px) {
  .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: #dcfce7; color: #166534; }
.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: #14532d; color: #86efac; }
  .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: #dcfce7; color: #166534; }
@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: #14532d; color: #86efac; }
}
.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, #15803d);
  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: 767px) {
  .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-icon {
    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-text);
}

/* ============================================================
   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, #ecfdf3);
  color: var(--accent-text, #15803d);
  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-secondary, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  transition: all 150ms ease;
}
.toplist-item:hover {
  background: var(--bg-hover, #f3f4f6);
  border-color: var(--accent, #15803d);
  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-primary, #111);
  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-item:focus-within .toplist-item-actions {
  opacity: 1;
}
.anomaly-list-item { cursor: default; }
.anomaly-list-item .toplist-item-actions { opacity: 1; }
.anomaly-list-item .toplist-item-actions .btn {
  width: 32px;
  min-width: 32px;
  padding-inline: 0;
}
.anomaly-view-action:hover:not(:disabled) {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.anomaly-rescan-action:hover:not(:disabled) {
  color: var(--status-success-text);
  background: var(--status-success-bg);
}
.anomaly-delete-action:hover:not(:disabled) {
  color: var(--danger);
  background: var(--status-error-bg);
}
.anomaly-list-item .btn:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.toplist-item[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.toplist-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
}
.toplist-badge.running {
  background: var(--status-running-bg);
  color: var(--status-running-text);
  border-color: var(--status-running-border);
}
.toplist-badge.completed {
  background: var(--status-success-bg);
  color: var(--status-success-text);
  border-color: var(--status-success-border);
}
.toplist-badge.error {
  background: var(--status-error-bg);
  color: var(--status-error-text);
  border-color: var(--status-error-border);
}
.toplist-badge.active {
  background: var(--status-success-bg);
  color: var(--status-success-text);
  border-color: var(--status-success-border);
}
.toplist-badge.paused {
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
  border-color: var(--status-warning-border);
}
.toplist-badge.warning {
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
  border-color: var(--status-warning-border);
}
.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 */
@media (prefers-color-scheme: dark) {
  .toplist-item {
    background: var(--bg-secondary, #1f2937);
    border-color: var(--border, #374151);
  }
  .toplist-item:hover {
    background: var(--bg-hover, #374151);
  }
  .toplist-badge.running { background: #14532d; color: #86efac; }
  .toplist-badge.completed { background: #064e3b; color: #6ee7b7; }
  .toplist-badge.error { background: #7f1d1d; color: #fca5a5; }
  .toplist-badge.active { background: #064e3b; color: #6ee7b7; }
  .toplist-badge.paused { background: #78350f; color: #fcd34d; }
  .toplist-badge.warning { background: #78350f; color: #fcd34d; }
}
[data-theme="dark"] .toplist-item {
  background: var(--bg-secondary, #1f2937);
  border-color: var(--border, #374151);
}
[data-theme="dark"] .toplist-item:hover {
  background: var(--bg-hover, #374151);
}
[data-theme="dark"] .toplist-badge.running { background: #14532d; color: #86efac; }
[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; }

/* Unified status palette across Agents/Workflows/Pipelines/Tasks */
.wf-badge.wf-active,
.toplist-badge.completed,
.toplist-badge.active,
.pipe-run-status.completed,
.pipe-info-chip.chip-active {
  background: var(--status-success-bg) !important;
  color: var(--status-success-text) !important;
  border-color: var(--status-success-border) !important;
}

.wf-badge.wf-paused,
.toplist-badge.paused,
.toplist-badge.warning,
.pipe-run-status.rejected,
.pipe-info-chip.chip-paused {
  background: var(--status-warning-bg) !important;
  color: var(--status-warning-text) !important;
  border-color: var(--status-warning-border) !important;
}

.wf-badge.wf-error,
.toplist-badge.error,
.pipe-run-status.error {
  background: var(--status-error-bg) !important;
  color: var(--status-error-text) !important;
  border-color: var(--status-error-border) !important;
}

.toplist-badge.running,
.pipe-run-status.running {
  background: var(--status-running-bg) !important;
  color: var(--status-running-text) !important;
  border-color: var(--status-running-border) !important;
}

.pipe-status-dot.running { color: var(--status-running-text); }
.pipe-status-dot.completed { color: var(--status-success-text); }
.pipe-status-dot.error { color: var(--status-error-text); }


/* ============================================================
   DARK MODE FIXES — Agents / Workflows / Pipelines / Tasks
   ============================================================ */
[data-theme="dark"] .agent-name { color: var(--text); }
[data-theme="dark"] .agent-meta { color: #9ca3af; }
[data-theme="dark"] .agent-meta svg { opacity: 0.85; }
[data-theme="dark"] .agent-badge-paused {
  background: #374151;
  color: #e5e7eb;
  opacity: 1;
}





[data-theme="dark"] .pipe-steps-badge { background: #3b1d7a; color: #c4b5fd; }
[data-theme="dark"] .pipe-running { background: rgba(99,102,241,.14); }
[data-theme="dark"] .pipe-status-dot.running { color: #a5b4fc; }
[data-theme="dark"] .pipe-status-dot.completed { color: #86efac; }
[data-theme="dark"] .pipe-status-dot.error { color: #fca5a5; }
[data-theme="dark"] .pipe-sched-badge { opacity: .9; color: #cbd5e1; }

[data-theme="dark"] .anomaly-run-btn,
[data-theme="dark"] .wf-toggle-btn,
[data-theme="dark"] .wf-dup-btn,
[data-theme="dark"] .conv-delete-btn {
  color: #cbd5e1;
}
[data-theme="dark"] .conv-delete-btn {
  opacity: .8;
}
[data-theme="dark"] .conv-item:hover .conv-delete-btn {
  opacity: 1;
  background: rgba(239,68,68,0.12);
  border-radius: 4px;
}

[data-theme="dark"] .toplist-item-name { color: var(--text); }
[data-theme="dark"] .toplist-item-meta { color: #9ca3af; }
[data-theme="dark"] .toplist-item-actions {
  opacity: 1;
}

/* ============================================================
   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-text); border-color: var(--accent); }
.msg-action-btn.saved { color: var(--accent-text); }
/* (Los botones Detalle/PDF/Excel por mensaje se retiraron 2026-08-31: viven
   en la barra fija junto al export. .msg-action-btn sigue vivo para el ⭐ de
   la consulta del usuario y el 👍/👎 de aprendizaje.) */
.msg.assistant { position: relative; }
/* Para que el ⭐ "Guardar consulta como favorita" se ancle a la burbuja del usuario. */
.msg.user { position: relative; }
/* «Tú» (+ insignia Profundo) y los botones ⭐/Profundizar van en la misma fila
   (.msg-head, en flujo): antes las acciones iban en absoluto sobre la etiqueta y,
   con dos botones, se pisaban. Los botones siguen apareciendo al pasar el ratón,
   pero reservan su sitio para que la fila no salte. */
.msg.user .msg-head { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 28px; max-width: 100%; }
.msg.user .msg-head .msg-role { line-height: 28px; }
.msg.user .msg-head .msg-actions { position: static; margin-top: 0; }

/* ============================================================
   COMPARE TOGGLE BUTTON
   ============================================================ */
/* Modo Profundo POR MENSAJE (compositor). Mismo lenguaje que el botón «vs». */
.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-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-text); }
.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-text); }
.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: var(--danger); }
.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-text); font-size: 10px; font-weight: 650; letter-spacing: .02em; vertical-align: middle; }
.msg-deepen-btn { width: auto; padding: 0 8px; gap: 4px; font-size: 11px; font-weight: 600; }
@media (max-width: 480px) { .deep-btn .deep-label { display: none; } .deep-btn { padding: 4px 7px; } }
/* 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: menuIn .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; }
.usage-meter[hidden], .usage-panel[hidden] { display: none !important; }
/* 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; }
.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; }

/* ============================================================
   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-text); }
.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-text); 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-text); 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-time-group {
  min-width: 0;
}
.conv-group-label {
  width: calc(100% - 12px);
  min-height: 34px;
  margin: 4px 6px 1px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.conv-group-label:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.conv-group-label:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.conv-group-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.conv-group-heading > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-group-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  transition: transform .16s ease;
}
.conv-time-group.collapsed .conv-group-chevron {
  transform: rotate(-90deg);
}
.conv-group-count {
  min-width: 21px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}
.conv-group-items {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.conv-time-group.collapsed:not(.search-expanded) .conv-group-items {
  display: none;
}

/* "EN CURSO": lo que está trabajando ahora mismo, siempre arriba del todo.
   Se separa del resto con color de acento y un punto latiendo — entre veinte
   chats viejos ordenados por fecha, un agente en marcha era indistinguible. */
.conv-time-group[data-group="active"] {
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.conv-time-group[data-group="active"] .conv-group-label { color: var(--accent-text); }
.conv-time-group[data-group="active"] .conv-group-heading > span:last-child {
  display: inline-flex; align-items: center; gap: 6px;
}
/* Punto latiendo antes del rótulo: señal de "vivo" sin ocupar sitio. */
.conv-time-group[data-group="active"] .conv-group-heading > span:last-child::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto;
  animation: convActivePulse 1.6s ease-in-out infinite;
}
.conv-time-group[data-group="active"] .conv-group-count {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--accent-soft);
  color: var(--accent-text);
}
@keyframes convActivePulse { 50% { opacity: .3; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) {
  .conv-time-group[data-group="active"] .conv-group-heading > span:last-child::before { animation: none; }
}

/* ============================================================
   SIDEBAR NAVIGATION BUTTONS
   ============================================================ */
.sidebar {
  container-name: sagemind-sidebar;
  container-type: inline-size;
}
/* Navegación rápida: LISTA vertical (2026-09-11). Las píldoras en rejilla
   dejaban «Actividad» huérfana en una 2ª fila a 280px y partían «Briefing
   diario» en dos líneas en móvil; la lista lee igual que las categorías de
   abajo y el estado activo usa la misma tinta suave que el chat activo, en
   vez de un segundo bloque azul macizo bajo «Nuevo chat». */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  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: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
#navScreensSidebar[hidden] { display: none !important; }
.sidebar-nav-btn > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-nav-btn svg { flex-shrink: 0; color: var(--text-muted); transition: color .12s ease; }
.sidebar-nav-btn:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-nav-btn:hover svg { color: var(--accent-text); }
.sidebar-nav-btn.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.sidebar-nav-btn.active svg { color: var(--accent-text); }
.sidebar-nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ============================================================
   DASHBOARD IMPROVEMENTS
   ============================================================ */
.dash-personal {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  color: var(--text);
}
.dash-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.dash-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
/* Esqueleto del dashboard mientras llega /api/dashboard/personal. */
/* .dash-personal lleva `margin: 0 auto` dentro de un flex en columna: los
   márgenes auto anulan el stretch y el bloque se encoge a su contenido. Los
   esqueletos no tienen ancho intrínseco → sin esto salían en una columna
   estrecha en escritorio. */
.dash-skeleton { width: 100%; }
.dash-skeleton .dash-skel-kpi { min-height: 78px; border-radius: var(--radius); margin: 0; }
.dash-skeleton .dash-skel-card { min-height: 74px; border-radius: var(--radius); margin: 0 0 24px; }
.dash-skeleton .dash-skel-row { min-height: 40px; margin-top: 10px; }
.dash-load-error { margin-top: 24px; }
.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;
  color: var(--text);
}
.dash-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-text);
}
.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);
  color: var(--text);
  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;
  color: var(--text);
  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-text);
  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-customize-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.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; }
/* Texto solo para lectores de pantalla. Faltaba la clase y los <span class="sr-only">
   del configurador de dashboard se pintaban VISIBLES pegados a cada toggle. */
.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;
}
/* Selects dentro de modales (p. ej. «Actualización automática» del modal de KPIs):
   antes quedaba el control nativo del navegador, único sin la piel de la app. */
.modal-body select {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 9px; font-size: 13px;
  color: var(--text); font-family: inherit; outline: none;
  transition: border-color .15s;
}
.modal-body select:focus-visible { border-color: var(--accent); }
.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-text); }
.dashboard-config-name { min-width: 0; color: var(--text); font-size: 13px; font-weight: 600; }
.dashboard-visibility-toggle { display: inline-flex; }
.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, .export-switch { 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); }
.dashboard-compact-option > span, .export-switch > span { display: flex; flex-direction: column; gap: 3px; color: var(--text); font-size: 13px; }
.dashboard-compact-option small, .export-switch small { color: var(--text-muted); font-size: 11px; font-weight: 400; }

/* Actividad global */
.activity-page { width: min(980px, 100%); margin: 0 auto; padding: 24px; color: var(--text); }
.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 { padding: 12px; display: flex; flex-direction: column; gap: 2px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); }
.activity-summary strong { color: var(--text); font-size: 20px; }
.activity-summary span { color: var(--text-muted); font-size: 10.5px; }
.activity-summary .is-running strong { color: var(--accent-text); }
.activity-summary .is-success strong { color: var(--status-success-text); }
.activity-summary .is-error strong { color: var(--status-error-text); }
.activity-filters { display: grid; grid-template-columns: minmax(220px, 1fr) 180px 180px; 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: 10px; 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); }
.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-feed { position: relative; }
.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 { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--accent-text); background: var(--accent-soft); }


.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: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.activity-status { padding: 2px 6px; border-radius: 999px; font-size: 9px; font-weight: 700; }





.activity-event time { margin-left: auto; color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.activity-event h3 { margin: 5px 0 2px; color: var(--text); font-size: 13px; }
.activity-event p { margin: 0; color: var(--text-secondary); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.activity-open { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 0; border: 0; background: transparent; color: var(--accent-text); font-size: 11px; font-weight: 600; cursor: pointer; }
.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: 11px; }

/* Exportación configurable */
.export-options section > h4 { margin: 0 0 9px; color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.export-format-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.export-format-card { position: relative; min-width: 0; padding: 11px 9px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 7px; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text); cursor: pointer; }
.export-format-card input { position: absolute; opacity: 0; pointer-events: none; }
.export-format-card:hover, .export-format-card.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.export-format-icon { grid-row: 1 / span 2; display: inline-flex; color: var(--accent-text); }
.export-format-card strong { font-size: 12px; }
.export-format-card small { min-width: 0; color: var(--text-muted); font-size: 9.5px; line-height: 1.25; }
.export-options-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.export-options-columns > section { padding: 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); }
.export-switch { margin-top: 7px; padding: 9px 10px; }
.export-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; color: var(--text-secondary); font-size: 11px; font-weight: 600; }
.export-field input, .export-field select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); }
.export-pdf-settings { transition: opacity .15s; }
.export-pdf-settings.is-disabled { opacity: .45; }
.export-pdf-settings.is-disabled .export-field:not(:last-child) { pointer-events: none; }
.export-preview-note { margin-top: 12px; padding: 9px 11px; display: flex; align-items: center; gap: 7px; border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--accent-soft); font-size: 11px; }
.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-text);
}

/* 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;
  display: inline-flex; align-items: center; color: var(--accent-text);
}
.briefing-sun-icon, .morning-icon { display: inline-flex; align-items: center; color: var(--accent-text); }
.help-cat-icon svg { display: block; }
.dash-briefing-info {
  flex: 1;
}
.dash-briefing-info h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.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-text);
}
.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, #15803d) 30%, transparent);
  border-left: 3px solid var(--accent, #15803d);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #15803d) 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 ── */





/* Field grid: label on the left, value on the right — reads like a receipt. */




/* Line items (order lines, invoice lines…) as compact stacked chips. */
















/* ── 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; }

/* ============================================================
   RESPONSIVE FOUNDATIONS (F1) — breakpoints estándar del proyecto:
   xs<=374 · sm<=479 · md<=767 · lg<=1023 · xl<=1279 · 2xl>=1440
   Regla: solo estos breakpoints en @media. Desktop-first (max-width).
   ============================================================ */

/* Guard global: el body nunca scrollea horizontal (clip = no crea scroll container nuevo) */
html, body { overflow-x: clip; }

/* Iconografía dinámica normalizada por app-v2.js sobre el catálogo SVG Lucide. */
.ui-lucide-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
  flex: 0 0 auto;
}
.briefing-sun-emoji { display: inline-block; line-height: 1; flex: 0 0 auto; }
/* (la variante .sidebar-nav-btn se retiró 2026-08-31: el nav usa SVG) */
.panel-page-title .briefing-sun-emoji { font-size: 22px; }

/* Contenido ancho scrollea dentro de su contenedor, nunca el body */
.table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* Medios fluidos (contenedor real de mensajes del chat = .msg-bubble, no .chat-content) */
.responsive-media, .msg-bubble img, .msg-bubble canvas, .msg-bubble svg { max-width: 100%; height: auto; }

/* ============================================================
   RESPONSIVE FIXES (F2 — Área Chat) — T2.4 · T3 · T4 · T5 · T6 · T9
   Fixes aditivos agrupados; cada regla solo aplica dentro de su media query.
   Breakpoints estándar: sm<=479 · md<=767 · lg<=1023 · 2xl>=1440
   ============================================================ */

/* T4 — Acciones hover-only accesibles en táctil (@media hover:none cubre también
   tablets grandes táctiles; en estos dispositivos el :hover nunca dispara). */
@media (hover: none) {
  .copy-table-btn   { opacity: 0.7; }
  .msg-actions      { opacity: 0.8; }
  
  .tpl-del          { opacity: 0.7; }
  .help-example-try { opacity: 0.7; }
}

/* T5 — Touch targets ≥40px visual / ≥44px táctil en ≤lg (DoD §4; criterio elegido:
   max-width:1023px para casar exactamente con el DoD, no (hover:none)). */
@media (max-width: 1023px) {
  .send { width: 44px; height: 44px; }
  .attach-btn, .voice-btn { width: 40px; height: 40px; }
  .conv-item { padding: 8px 10px; min-height: 40px; }
  .conv-more { min-width: 40px; min-height: 40px; padding: 6px; }
  .artifact-btn { width: 40px; height: 40px; }
  .kpi-bar-toggle, .kpi-bar-refresh, .kpi-bar-config { width: 40px; height: 40px; }
  /* Volver de gesdoc/auditoría: 26px era imposible de acertar con el dedo. */
  .btn-icon.gd-back { min-width: 40px; min-height: 40px; }
  /* Borrar usuario en la ficha: 38×24 rozaba el fallo táctil. */
  .btn-icon.btn-danger-subtle { min-width: 40px; min-height: 40px; }
  .modal-close { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .menu-theme-opt { min-width: 40px; min-height: 40px; }
  .sidebar-add { width: 40px; height: 40px; }
}

/* T2.4 + T3 + T6 — Ajustes móvil (≤md) */
@media (max-width: 767px) {
  /* T2.4 — Celdas de tabla SQL más compactas en móvil */
  .msg-bubble th, .msg-bubble td { padding: 8px 10px; font-size: 13px; }
  /* T3 — Inputs ≥16px para evitar el zoom automático de iOS al enfocar */
  .login-form input,
  .sidebar-global-search input,
  .settings-pane label > input,
  .settings-pane label > select,
  .form-grid-compact input[type="email"],
  .form-grid-compact input[type="text"],
  .form-grid-compact input[type="password"],
  .form-grid-compact select,
  .audit-export-section input[type="date"],
  input.input-sm,
  #wfAiPrompt,
  .module-acl-filter { font-size: 16px; }
  /* T6 — El chart inline no exagera su altura en pantallas estrechas */
  .inline-chart-wrap { height: min(300px, 65vw); }

  /* Dashboard personal — todos los hijos pueden contraerse dentro del panel. */
  .panel-page { width: 100%; min-width: 0; }
  .dash-personal {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 16px 14px 24px;
  }
  .dash-header,
  .dash-section,
  .dash-list,
  .dash-list-item,
  .dash-briefing-card,
  .dash-briefing-info,
  .dash-quick-queries { min-width: 0; max-width: 100%; }
  .dash-header { margin-bottom: 18px; }
  .dash-header h2 { min-width: 0; display: flex; align-items: center; gap: 8px; }
  .dash-header h2 .icon { width: 20px; height: 20px; flex-shrink: 0; }
  .dash-kpi-label { display: flex; align-items: center; justify-content: center; gap: 5px; }
  .dash-section h3 { display: flex; align-items: center; gap: 7px; }
  .dash-briefing-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 12px;
    padding: 14px;
  }
  .dash-briefing-icon { display: flex; align-items: center; justify-content: center; }
  .dash-briefing-icon .icon { width: 26px; height: 26px; }
  .dash-briefing-info p { overflow-wrap: anywhere; }
  .dash-briefing-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .dash-briefing-actions button {
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: normal;
  }
  .dash-quick-btn {
    max-width: 100%;
    min-height: 40px;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: left;
  }
  .dash-list-item {
    display: grid;
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }
  .dash-list-icon { display: inline-flex; align-items: center; justify-content: center; }
  .dash-list-meta,
  .dash-list-action { min-width: 0; }
}

/* T6 — Cabecera del visor Artifacts en móvil pequeño (≤sm). Los botones ya son
   icon-only (SVG), así que no hay labels de texto que ocultar: basta con permitir
   wrap y bajar el título a su propia fila (mantiene su ellipsis existente). */
@media (max-width: 479px) {
  .artifact-head { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; min-height: 0; }
  .artifact-title { flex: 1 1 100%; min-width: 0; }
  .artifact-tabs { flex-wrap: wrap; }
  .artifact-actions { flex-wrap: wrap; }

  .dash-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 20px;
  }
  .dash-kpi { min-width: 0; padding: 12px 8px; }
  .dash-kpi-value { font-size: 21px; }
  .dash-kpi-label { overflow-wrap: anywhere; }
  .dash-list-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 3px;
    padding: 9px 10px;
  }
  .dash-list-icon { grid-column: 1; grid-row: 1 / span 2; }
  .dash-list-title { grid-column: 2; grid-row: 1; }
  .dash-list-meta {
    grid-column: 2 / -1;
    grid-row: 2;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .dash-list-action {
    grid-column: 3;
    grid-row: 1;
    min-width: 44px;
    min-height: 40px;
  }
}

@media (max-width: 374px) {
  .dash-personal { padding-inline: 12px; }
  .dash-header { gap: 8px; }
  .dash-briefing-actions { grid-template-columns: minmax(0, 1fr); }
}

/* T9 — Desktop grande (≥2xl): aprovechar ancho de contenido (mejora, no fix) */
@media (min-width: 1440px) {
  .messages { max-width: 1200px; }
  .composer { max-width: 860px; }
}

@media (max-width: 767px) {
  .structured-chart { max-width: 100%; }
  .structured-chart .sc-head { padding: 8px 8px 8px 12px; }
  .structured-chart .sc-meta { display: none; }
  .structured-chart .sc-action span { display: none; }
  .structured-chart .sc-action { width: 28px; padding: 0; justify-content: center; }
  .structured-chart .inline-chart-wrap { padding: 12px 8px 8px; }
  .sc-table th, .sc-table td { padding: 7px 10px; }
  .dash-customize-btn { padding-inline: 9px; }
  .dash-customize-btn svg { margin: 0; }
  .activity-page { width: 100%; padding: 16px 13px 24px; }
  .activity-header { align-items: flex-start; }
  .activity-header > .btn { padding-inline: 9px; }
  .activity-header > .btn svg { margin: 0; }
  .activity-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .activity-filters { grid-template-columns: 1fr 1fr; }
  .activity-search { grid-column: 1 / -1; }
  .activity-event { padding-inline: 11px; }
  .export-format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .export-options-columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 479px) {
  .dash-header { flex-wrap: wrap; }
  .dash-customize-btn { order: 3; width: 100%; justify-content: center; margin-left: 0; }
  .activity-header p { display: none; }
  .activity-header > .btn { font-size: 0; width: 38px; justify-content: center; }
  .activity-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-filters { grid-template-columns: minmax(0, 1fr); }
  .activity-search { grid-column: auto; }
  .activity-event { grid-template-columns: 32px minmax(0, 1fr); gap: 9px; }
  .activity-event-icon { width: 32px; height: 32px; }
  .activity-event-top { flex-wrap: wrap; }
  .activity-event time { width: 100%; margin-left: 0; }
  .dashboard-config-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dashboard-config-order { grid-column: 2 / -1; justify-content: flex-end; }
  .export-format-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Regeneración Sage/Obsidian: diálogo bloqueante con progreso tipo Windows. */
.knowledge-progress-overlay {
  position: fixed; inset: 0; z-index: 10050; display: none; place-items: center;
  padding: 20px; background: rgba(3, 12, 28, .82); backdrop-filter: blur(8px);
}
.knowledge-progress-overlay.open { display: grid; }
.knowledge-progress-card {
  width: min(460px, 94vw); border: 1px solid rgba(255,255,255,.2); border-radius: 22px;
  padding: 30px 26px 24px; text-align: center; color: #fff;
  background: linear-gradient(145deg, #0878d1, #0755a5 65%, #073d7c);
  box-shadow: 0 26px 80px rgba(0,0,0,.45);
}
.knowledge-progress-card h3 { margin: 18px 0 6px; color: #fff; font-size: 21px; }
.knowledge-progress-ring {
  --knowledge-progress: 0deg; position:relative; width: 154px; height: 154px; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(#fff var(--knowledge-progress), rgba(255,255,255,.2) 0);
  box-shadow: 0 0 30px rgba(255,255,255,.14);
}
.knowledge-progress-ring::before {
  content: ""; position: absolute; width: 126px; height: 126px; border-radius: 50%;
  background: #0863b5;
}
.knowledge-progress-ring span { position: relative; z-index: 1; font-size: 31px; font-weight: 650; }
.knowledge-progress-stage { min-height: 22px; color: rgba(255,255,255,.94); font-size: 14px; }
.knowledge-progress-detail { min-height: 20px; margin-top: 5px; color: rgba(255,255,255,.72); font-size: 12px; }
.knowledge-progress-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:22px; }
.knowledge-progress-actions button {
  min-height: 40px; padding: 9px 15px; border-radius: 10px; border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.12); color:#fff; font:inherit; font-weight:600; cursor:pointer;
}
.knowledge-progress-actions button:hover { background: rgba(255,255,255,.22); }
.knowledge-progress-actions button:disabled { opacity:.55; cursor:wait; }
.knowledge-progress-actions [data-action="resume"] { background:#fff; color:#0755a5; }

/* ============================================================
   PHASE 2 — QOL & UI POLISH (2026-07)
   Capa aditiva: refina botoneras, menús, paneles de información,
   estados vacíos, skeletons, toasts y accesibilidad. No cambia
   la estructura ni el render de bloques ```chart.
   ============================================================ */

/* ---- Contraste AA en texto secundario / muted ---- */
:root, :root[data-theme="light"] { --text-muted: #6b6b6b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --text-muted: #8f8f8f; } }
:root[data-theme="dark"] { --text-muted: #8f8f8f; }
.help, .form-hint { line-height: 1.5; }

/* ---- Foco de teclado unificado (focus-visible) ---- */
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible,
.btn-ghost:focus-visible, .btn-sm:focus-visible, .btn-xs:focus-visible, .btn-outline:focus-visible,
.btn-danger-subtle:focus-visible, .btn-icon:focus-visible, .icon-btn:focus-visible, .topbar-action:focus-visible,
.menu-item:focus-visible, .menu-theme-opt:focus-visible, .help-example:focus-visible,
.help-cta:focus-visible, .sug:focus-visible, .user-menu-btn:focus-visible,
.notif-mark-all:focus-visible, .export-dropdown button:focus-visible, .kpi-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* ---- Transición y feedback al pulsar ---- */
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .btn-sm, .btn-xs, .btn-outline,
.btn-danger-subtle, .icon-btn, .topbar-action, .help-cta {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .06s ease;
}
.btn-primary:active, .btn-secondary:active, .btn-danger:active, .btn-sm:active,
.icon-btn:active, .topbar-action:active, .help-cta:active { transform: translateY(1px); }
.btn-primary:hover { box-shadow: 0 1px 3px rgba(37,99,235,.25); }

/* ---- Estados deshabilitados coherentes ---- */
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled, .btn-ghost:disabled,
.btn-sm:disabled, .btn-xs:disabled, .btn-outline:disabled, .btn-danger-subtle:disabled,
.icon-btn:disabled, .topbar-action:disabled {
  opacity: .5; cursor: not-allowed; box-shadow: none !important; transform: none !important;
}
button:disabled { cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--accent); }
.btn-secondary:disabled:hover { background: var(--bg-hover); }

/* ---- Botones de icono: color e hover coherentes ---- */
.icon-btn:hover, .topbar-action:hover { color: var(--text); }
.icon-btn svg, .topbar-action svg { pointer-events: none; }

/* ---- Áreas táctiles >= 40px en móvil ---- */
@media (max-width: 640px) {
  .icon-btn, .topbar-action, .user-menu-btn, .conv-more,
  .kpi-bar-toggle, .notif-btn, .panel-back-btn, .btn-back {
    min-width: 40px; min-height: 40px;
  }
  .menu-item, .export-dropdown button, .notif-item { min-height: 44px; }
  .btn-sm, .btn-xs { min-height: 36px; }
}

/* ============================================================
   MENÚS (usuario / notificaciones / exportar / contextuales)
   ============================================================ */
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.985); }
                    to   { opacity: 1; transform: translateY(0) scale(1); } }
.user-menu, .notif-dropdown, .export-dropdown, .conv-dropdown, #_floatingDropdown,
.empresa-menu {
  animation: menuIn .13s cubic-bezier(.16,.8,.3,1);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
  overflow: hidden;
}
.notif-dropdown, .export-dropdown, .user-menu, .empresa-menu { max-height: min(72vh, 520px); overflow-y: auto; }
/* Ítems de menú: spacing y alineación coherentes */
.menu-item, .export-dropdown button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 14px; font-size: 13.5px;
  border-radius: var(--radius-sm); transition: background-color .12s ease;
}
.menu-item:hover, .export-dropdown button:hover { background: var(--bg-hover); }
.menu-item .icon, .export-dropdown button .icon { flex-shrink: 0; opacity: .85; }
.menu-item-danger { color: var(--danger); }
.menu-item-danger:hover { background: rgba(220,38,38,.10); }
/* Separadores por grupos */
.menu-divider { height: 1px; margin: 6px 8px; background: var(--border); border: 0; }
.export-dropdown { padding: 6px; }
.user-menu { padding: 6px; }

/* ============================================================
   PANELES / POPOVERS DE INFORMACIÓN
   ============================================================ */
/* Modal de capacidades / ayuda */
.help-intro { color: var(--text-secondary); line-height: 1.6; margin: 0 0 18px; font-size: 14px; }
.help-category {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 14px;
}
.help-cat-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.help-cat-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--bg-hover);
}
.help-cat-icon.yellow { background: rgba(245,158,11,.14); }
.help-cat-icon.purple { background: rgba(139,92,246,.14); }
.help-cat-icon.green  { background: rgba(22,163,74,.14); }
.help-cat-icon.blue   { background: rgba(37,99,235,.14); }
.help-cat-icon.orange { background: rgba(234,88,12,.14); }
.help-cat-icon.red    { background: rgba(220,38,38,.14); }
.help-cat-name { font-weight: 650; font-size: 15px; color: var(--text); }
.help-cat-intro { color: var(--text-secondary); line-height: 1.55; margin: 0 0 12px; font-size: 13px; }
.help-examples { display: flex; flex-direction: column; gap: 6px; }
.help-example {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; width: 100%;
  padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--bg); cursor: pointer; transition: background-color .12s, border-color .12s, transform .06s;
}
.help-example:hover { background: var(--accent-soft); border-color: var(--accent); }
.help-example:active { transform: translateY(1px); }
.help-example-arrow { color: var(--accent-text); font-weight: 700; margin-top: 1px; flex-shrink: 0; }
.help-example-text { flex: 1; min-width: 0; }
.help-example-prompt { font-weight: 550; font-size: 13px; color: var(--text); line-height: 1.4; }
.help-example-desc { font-size: 12px; color: var(--text-muted); line-height: 1.45; margin-top: 2px; }
.help-example-try {
  flex-shrink: 0; align-self: center; font-size: 11px; font-weight: 600; color: var(--accent-text);
  opacity: 0; transform: translateX(-4px); transition: opacity .12s, transform .12s; white-space: nowrap;
}
.help-example:hover .help-example-try, .help-example:focus-visible .help-example-try { opacity: 1; transform: none; }
.help-scope-note {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 0 0 16px;
  color: var(--text-secondary); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--radius); font-size: 12.5px; line-height: 1.5;
}
.help-scope-note-icon { display: inline-flex; flex-shrink: 0; color: var(--accent-text); margin-top: 1px; }
.help-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.help-feature {
  display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.help-feature-check { display: inline-flex; flex-shrink: 0; color: var(--success, #16a34a); margin-top: 2px; }
.help-feature div { display: grid; min-width: 0; gap: 2px; }
.help-feature strong { color: var(--text); font-size: 12.5px; line-height: 1.35; }
.help-feature span:not(.help-feature-check) { color: var(--text-muted); font-size: 11.5px; line-height: 1.45; }
.help-tip {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 4px 0 16px;
  background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.28);
  border-radius: var(--radius); font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}
.help-tip-icon { flex-shrink: 0; }
.help-shortcuts {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 18px;
}
.help-shortcuts-title { font-weight: 650; font-size: 13.5px; margin-bottom: 10px; color: var(--text); }
.help-shortcuts-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; }
.help-shortcuts-grid span { font-size: 13px; color: var(--text-secondary); }
.help-shortcuts-grid kbd, kbd {
  display: inline-block; min-width: 20px; text-align: center; padding: 2px 7px;
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text); background: var(--bg-hover);
  border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px;
}
.help-cta { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 600px) {
  .help-features { grid-template-columns: minmax(0, 1fr); }
  .help-category { padding: 14px; }
  .help-example { padding: 10px; }
  .help-example-try { display: none; }
}

/* Popover de información genérico (reutilizable) */




/* ============================================================
   ESTADOS VACÍOS
   ============================================================ */
.settings-empty-state, .empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 40px 24px; color: var(--text-secondary);
}
.settings-empty-icon, .empty-state-icon {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-hover); color: var(--text-muted); margin-bottom: 4px;
}
.settings-empty-title, .empty-state-title { font-weight: 650; font-size: 15px; color: var(--text); }
.settings-empty-desc, .empty-state-desc { font-size: 13px; color: var(--text-muted); max-width: 340px; line-height: 1.55; }

/* ============================================================
   SKELETON & SPINNER (estados de carga)
   ============================================================ */
@keyframes sm-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
.skeleton {
  display: block; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--bg-hover) 25%, var(--border) 37%, var(--bg-hover) 63%);
  background-size: 840px 100%; animation: sm-shimmer 1.3s ease-in-out infinite;
  min-height: 12px;
}
.skeleton + .skeleton { margin-top: 8px; }
.spinner {
  display: inline-block; width: 16px; height: 16px; vertical-align: -3px;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}


/* ============================================================
   TOASTS — consistencia (incl. warning que faltaba)
   ============================================================ */
.toast { display: flex; align-items: center; gap: 8px; border-radius: var(--radius); }
.toast-warning { background: #f59e0b; color: #1a1200; }
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-info { background: var(--accent); }

/* ============================================================
   UTILIDADES
   ============================================================ */


/* ============================================================
   BOTÓN "IR ABAJO" DEL CHAT
   ============================================================ */
.composer-wrap { position: relative; }
.scroll-bottom-btn {
  position: absolute; right: 22px; bottom: calc(100% + 10px); z-index: 30;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 50%; box-shadow: 0 4px 14px -4px rgba(0,0,0,.35); cursor: pointer;
  opacity: 0; transform: translateY(8px) scale(.9); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, background-color .15s ease;
}
.scroll-bottom-btn.visible { opacity: 1; transform: none; pointer-events: auto; }
.scroll-bottom-btn:hover { background: var(--bg-hover); }
.scroll-bottom-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .scroll-bottom-btn { right: 14px; width: 42px; height: 42px; } }

/* ---- Respeta prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .user-menu, .notif-dropdown, .export-dropdown, .conv-dropdown, #_floatingDropdown { animation: none; }
  .skeleton { animation: none; }
  .scroll-bottom-btn { transition: opacity .01s; }
  .btn-primary:active, .btn-secondary:active, .btn-danger:active,
  .icon-btn:active, .topbar-action:active { transform: none; }
}

/* ============================================================
   MOBILE RESPONSIVE AUDIT (2026-07-16)
   Correcciones verificadas a 320, 360 y 390 px. Mantener esta
   capa al final para que prevalezca sobre los estilos históricos.
   ============================================================ */

/* Los elementos flex/grid no deben imponer su ancho intrínseco al panel. */
.toplist-panel,
.toplist-header,
.toplist-header h2,
.toplist-body,
.toplist-item,
.panel-page-header,
.panel-page-title,
.panel-page-body,
.users-panel-grid,
.user-card,
.new-user-section,
.form-grid-compact,
.form-row-2col,
.settings-panel-layout,
.settings-panel-content,
/* Sin esto, la página de Uso (y cualquier panel-page-content) toma como ancho
   MÍNIMO el de su tabla más ancha (flex item: min-width auto = min-content) y
   arrastra toda la página más allá del viewport, con la tercera columna de
   estadísticas cortada e inaccesible. Con min-width:0 la tabla desliza en su
   .table-scroll y el resto se reajusta al ancho real. */
.panel-page-content {
  min-width: 0;
  max-width: 100%;
}

.toplist-panel {
  width: 100%;
  max-width: 800px;
  box-sizing: border-box;
}
.toplist-header,
.toplist-body,
.toplist-item { width: 100%; max-width: 100%; }
.toplist-header h2 { overflow-wrap: anywhere; }

.sidebar-global-search input {
  width: 100%;
  min-width: 0;
}

@media (max-width: 767px) {
  /* Login/registro: si el formulario supera la altura, se desplaza desde arriba. */
  .login-screen {
    justify-content: flex-start;
    overflow-y: auto;
    padding: 16px;
  }
  .login-card {
    max-width: 380px;
    margin-block: auto;
    padding: 26px 22px;
  }

  /* Barra superior: utilidades en la primera fila y accesos principales debajo. */
  .topbar {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 8px 10px;
    min-height: 0;
    overflow: visible;
  }
  .topbar > .brand {
    flex: 1 1 60px;
    min-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar > .topbar-spacer { display: none; }
  .topbar > #fullscreenBtn { display: none !important; }
  .topbar > .notif-wrap,
  .topbar > .export-wrapper,
  .topbar > .thinking-toggle { flex: 0 0 auto; }
  .topbar-actions {
    order: 20;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    gap: 6px;
    margin: 0;
  }
  .topbar-action {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 7px;
    border-radius: var(--radius-sm);
    justify-content: center;
  }

  /* Cabeceras internas: el título ocupa la primera línea y las acciones envuelven. */
  .panel-page-header {
    flex-wrap: wrap;
    gap: 8px;
    overflow: hidden;
  }
  .panel-page-header > .panel-page-title {
    flex: 1 1 calc(100% - 52px);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .panel-page-header > [style*="flex:1"] { display: none; }
  #bpTestBtn {
    margin-left: 48px;
  }
  #bpTestBtn,
  #bpSaveBtn {
    flex: 1 1 100px;
    min-width: 0;
    justify-content: center;
  }
  #bpStatus {
    flex: 1 0 calc(100% - 48px);
    margin-left: 48px;
  }
  #saveSettingsBtn {
    flex: 1 0 calc(100% - 48px);
    margin-left: 48px;
    justify-content: center;
  }

  /* Listados de agentes, tareas, pipelines y anomalías. */
  .toplist-panel { padding: 16px 12px 24px; }
  .toplist-header { gap: 8px; margin-bottom: 14px; }
  .toplist-header h2 {
    min-width: 0;
    font-size: 16px;
    line-height: 1.3;
    flex-wrap: wrap;
  }
  .toplist-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 8px 10px;
    padding: 11px 12px;
  }
  .toplist-item-icon {
    grid-column: 1;
    grid-row: 1;
  }
  .toplist-item-body {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .toplist-item-name,
  .toplist-item-meta {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .toplist-item-name { flex-wrap: wrap; }
  .toplist-item-meta { align-items: flex-start; }
  .toplist-item-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    padding-top: 7px;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
    flex-wrap: wrap;
    opacity: 1;
  }
  .toplist-item-actions .btn {
    min-width: 40px;
    min-height: 40px;
    padding-inline: 9px;
  }
  .anomaly-list-item .toplist-item-actions .btn {
    width: 40px;
    min-width: 40px;
  }

  /* Gestión de usuarios y formulario de alta. */
  .users-panel-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .user-card,
  .new-user-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .user-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
  .user-card-avatar { grid-column: 1; grid-row: 1 / span 2; }
  .user-card-info { grid-column: 2; grid-row: 1; }
  .user-card-badges {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    min-width: 0;
    margin-top: 3px;
  }
  .user-card-footer,
  .user-card-footer-actions,
  .user-role-select-wrap { min-width: 0; }
  .user-role-select-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }
  .user-role-select-wrap select.role-select {
    width: 100%;
    min-width: 0;
  }
  .user-card-footer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-left: 0;
  }
  .user-card-footer-actions .btn-sm {
    min-width: 0;
    white-space: normal;
  }
  .form-grid-compact,
  .form-row-2col,
  .form-grid-compact label,
  .new-user-perms-section { width: 100%; min-width: 0; }
  /* Los permisos son etiquetas, no campos: en móvil siguen fluyendo en línea
     en vez de estirarse a todo el ancho una debajo de otra. */
  .form-grid-compact .mod-toggle { width: auto; }
  .form-grid-compact input[type="email"],
  .form-grid-compact input[type="text"],
  .form-grid-compact input[type="password"],
  .form-grid-compact select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .new-user-actions .btn-primary { width: 100%; }

  /* Paneles y modales con contenido tabular conservan el scroll local. */
  .license-history-table { min-width: 560px; }
  .credit-packages-grid { grid-template-columns: minmax(0, 1fr); }
  .modal,
  .modal-head,
  .modal-body,
  .modal-foot { min-width: 0; }
  .modal-head h3 {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .modal-foot { flex-wrap: wrap; }
}

@media (max-width: 374px) {
  .topbar { padding-inline: 8px; gap: 6px; }
  .topbar > .brand { min-width: 48px; font-size: 13px; }
  .panel-page-header { padding-inline: 10px; }
  .panel-page-body { padding-inline: 10px; }
  .toplist-panel { padding-inline: 9px; }
  .user-card { padding-inline: 14px; }
  .new-user-section { padding-inline: 14px; }
}

/* TOPBAR ACTIONS: conservar icono + etiqueta en todos los anchos.
   Con sidebar fijo, una tablet/portátil estrecho deja menos ancho real al main. */
@media (max-width: 1279px) {
  .topbar { flex-wrap: wrap; }
  .topbar-actions {
    order: 20;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    gap: 6px;
    margin: 0;
  }
  .topbar-action {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    justify-content: center;
  }
  .topbar-action span {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 1023px) {
  .topbar {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 8px 10px;
    min-height: 0;
    overflow: visible;
  }
  .topbar > .brand {
    flex: 1 1 60px;
    min-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar > .topbar-spacer { display: none; }
  .topbar > #fullscreenBtn { display: none !important; }
  .topbar > .notif-wrap,
  .topbar > .export-wrapper,
  .topbar > .thinking-toggle { flex: 0 0 auto; }
  .topbar .notif-btn,
  .topbar .export-wrapper .icon-btn { display: flex; }
  .thinking-option span { display: none; }
  .thinking-option { padding: 6px 9px; }
  .topbar-actions {
    order: 20;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    gap: 6px;
    margin: 0;
  }
  .topbar-action {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 7px;
    border-radius: var(--radius-sm);
    justify-content: center;
  }
}

/* En móvil se conserva una única fila compacta. En pantallas especialmente
   estrechas se recuperan dos columnas más abajo. */
@media (max-width: 560px) {
  .topbar-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .topbar-action {
    min-height: 42px;
    gap: 5px;
    padding-inline: 5px;
    font-size: 10px;
  }
}

/* ============================================================
   MOBILE EXPERIENCE POLISH (2026-07-20)
   Capa visual final para la aplicación de tenant. Mantiene la lógica y
   convierte los controles existentes en una interfaz táctil más clara.
   ============================================================ */
@media (max-width: 767px) {
  :root { --mobile-gutter: 12px; }

  html,
  body,
  .app,
  .main { min-height: 100dvh; }

  body { overscroll-behavior-y: none; }

  /* La cabecera conserva una primera fila compacta y presenta las áreas de
     trabajo como botones con texto, no como iconos circulares ambiguos. */
  .topbar {
    position: relative;
    z-index: 60;
    padding: max(8px, env(safe-area-inset-top)) var(--mobile-gutter) 9px;
    border-bottom-color: color-mix(in srgb, var(--border) 82%, transparent);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .topbar > .icon-btn,
  .topbar .notif-btn,
  .topbar .export-wrapper .icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elevated);
  }
  .topbar-actions { padding-top: 2px; }
  .topbar-action {
    gap: 7px;
    min-height: 44px;
    border-color: var(--border);
    border-radius: 10px;
    background: var(--bg-elevated);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 650;
  }
  .topbar-action svg { width: 16px; height: 16px; color: var(--accent-text); }
  .topbar-action:active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-text);
    transform: none;
    box-shadow: none;
  }
  .thinking-toggle {
    min-height: 40px;
    padding: 3px;
    border-radius: 10px;
    background: var(--bg-elevated);
  }
  .thinking-option { min-width: 34px; min-height: 32px; justify-content: center; }

  /* Sidebar móvil: más ancho útil, mejor separación y zona segura de iOS. */
  .sidebar,
  .app.sidebar-collapsed .sidebar {
    width: min(340px, 92vw) !important;
    min-width: min(340px, 92vw) !important;
    border-right: 1px solid var(--border);
    border-radius: 0 18px 18px 0;
    box-shadow: 18px 0 48px rgba(0, 0, 0, .28);
  }
  .sidebar-header {
    padding: max(12px, env(safe-area-inset-top)) 12px 9px;
    background: var(--bg-sidebar);
  }
  .sidebar-global-search { padding: 5px 12px 9px; }
  .sidebar-global-search input {
    min-height: 42px;
    padding-inline: 11px;
    border-radius: 10px;
    background: var(--bg-elevated);
  }
  .sidebar-nav {
    gap: 2px;
    padding: 4px 10px 8px;
  }
  .sidebar-nav-btn {
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 14px;
  }
  .sidebar-section { padding-bottom: 12px; }
  .sidebar-cat-head { min-height: 44px; }
  .conv-group-label { min-height: 40px; }
  .sidebar-footer { padding-bottom: max(8px, env(safe-area-inset-bottom)); }

  /* Inicio: tarjetas más compactas, legibles y fáciles de pulsar. */
  .welcome {
    justify-content: flex-start;
    padding: clamp(26px, 7vh, 58px) var(--mobile-gutter) 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;
    font-size: 21px;
  }
  .sug-title { grid-column: 2; margin: 0; font-size: 13.5px; }
  .sug-desc { grid-column: 2; font-size: 11.5px; }
  .morning-briefing-btn {
    width: min(100%, 430px);
    min-height: 46px;
    justify-content: center;
    margin-top: 14px;
    padding: 10px 14px;
  }
  .help-link { min-height: 42px; margin-top: 12px; }

  /* Chat: ancho aprovechado, acciones sin hover y controles sin solaparse con
     el texto de la respuesta. */
  .messages {
    width: 100%;
    padding: 18px var(--mobile-gutter) 24px;
    gap: 18px;
  }
  .msg { width: 100%; min-width: 0; }
  .msg.user .msg-bubble {
    max-width: 92%;
    padding: 9px 13px;
    border-radius: 16px 16px 5px 16px;
  }
  .msg.assistant .msg-bubble { width: 100%; min-width: 0; }
  .msg-bubble { font-size: 14px; line-height: 1.6; }
  .msg-actions {
    position: static;
    align-self: flex-end;
    justify-content: flex-end;
    margin-top: 5px;
    opacity: 1;
  }
  .msg-action-btn { min-width: 38px; min-height: 38px; }
  .sage-context-strip,
  .conversation-run-card,
  .query-progress-box,
  .briefing-report { border-radius: 12px; }
  .conversation-run-card { padding: 11px; gap: 10px; }
  .conversation-run-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .briefing-report-blocks,
  .briefing-final-grid { padding: 8px; gap: 8px; }

  /* Tablas: toolbar flexible y paginación táctil. El contenido continúa
     desplazándose dentro de la tabla, nunca en toda la página. */
  .table-wrap { margin-block: 10px; border-radius: 10px; }
  .result-table-toolbar {
    flex-wrap: wrap;
    gap: 5px 8px;
    min-height: 46px;
    padding: 7px 8px;
  }
  .result-table-actions { margin-left: auto; }
  .result-table-btn { min-width: 38px; min-height: 38px; }
  .result-page-controls { width: 100%; }
  .result-page-controls button { width: 40px; height: 40px; }
  .result-page-position { flex: 1; min-width: 86px; }
  .result-page-size select { min-height: 38px; }

  /* Páginas internas: cabecera estable y contenido con gutters coherentes. */
  .panel-page-header {
    position: sticky;
    top: 0;
    z-index: 25;
    padding: 10px var(--mobile-gutter);
    background: color-mix(in srgb, var(--bg) 95%, transparent);
    box-shadow: 0 4px 16px rgba(15, 23, 42, .05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .panel-page-body { padding: 14px var(--mobile-gutter) 26px; }
  /* La página de Uso traía padding de escritorio (24px 32px). */
  .usage-page { padding: 14px var(--mobile-gutter) 26px; }
  .usage-page h2 { font-size: 1.1rem; }
  .panel-back-btn,
  .btn-back { width: 42px; height: 42px; border-color: var(--border); background: var(--bg-elevated); }
  /* Con min-height 100% y una sola columna, el grid repartía el alto sobrante
     entre las filas y dejaba un hueco de ~75px entre pestañas y contenido. */
  .settings-panel-layout { height: auto; min-height: 100%; overflow: visible; grid-auto-rows: max-content; align-content: start; }
  .settings-panel-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    /* Gutter lateral aquí: el cuerpo de la página lleva padding:0 en línea
       (lo pone openSettingsModal), así que sin esto pestañas y contenido
       quedaban pegados al borde físico de la pantalla. */
    padding: 10px var(--mobile-gutter) 12px;
    border-bottom-color: var(--border);
    overflow: visible;
  }
  .settings-panel-tabs .settings-tab {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elevated);
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .settings-panel-tabs .settings-tab .icon { flex: 0 0 auto; }
  .settings-panel-tabs .settings-tab.active { border-color: var(--accent); }
  .settings-panel-content {
    width: 100%;
    padding: 16px var(--mobile-gutter) 32px;
    overflow: visible;
  }
  .settings-pane { width: 100%; min-width: 0; }
  #saveSettingsBtn {
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
    min-height: 44px;
  }
  .settings-pane label > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  .settings-pane label > select,
  .settings-pane label > textarea { min-height: 44px; }

  .activity-page,
  .dash-personal { padding: 14px var(--mobile-gutter) 28px; }
  .activity-header,
  .dash-header { gap: 9px; }
  .activity-summary > div,
  .dash-kpi { border-radius: 11px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
  .activity-event { border-left-color: var(--border); border-right-color: var(--border); }
  .dash-section,
  .dash-briefing-card { border-radius: 12px; }

  /* Formularios y listados de operaciones. */
  .toplist-item { border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
  .toplist-header > .btn,
  .toplist-header > button { min-height: 42px; }
  .form-grid-compact input,
  .form-grid-compact select,
  .form-row-2col input,
  .form-row-2col select { min-height: 44px; }

  /* El compositor respeta el indicador inferior y permanece compacto cuando
     aparece el teclado virtual. */
  .composer-wrap {
    padding: 9px var(--mobile-gutter) max(10px, env(safe-area-inset-bottom));
    border-top-color: color-mix(in srgb, var(--border) 82%, transparent);
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .05);
  }
  .composer {
    padding: 9px 10px 7px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
  }
  .composer-left { gap: 5px; }
  .composer-hint { display: none; }
  .attach-btn,
  .voice-btn { min-width: 40px; min-height: 40px; }
  .send { flex: 0 0 44px; }

  /* Menús flotantes limitados al viewport. */
  .notif-dropdown,
  .export-dropdown,
  .user-menu {
    max-width: calc(100vw - 2 * var(--mobile-gutter));
    max-height: min(70dvh, 520px);
    overflow-y: auto;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  }
  /* Notificaciones ancladas al VIEWPORT, no a la campana: con la cabecera
     reordenada la campana cae a mitad de fila y el menú absoluto nacía 48px
     fuera de pantalla. OJO: si la topbar llevara transform/backdrop-filter,
     `fixed` se ancla a ella — left/right siguen siendo correctos porque la
     topbar ocupa todo el ancho. */
  .notif-dropdown {
    position: fixed;
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
    top: calc(env(safe-area-inset-top, 0px) + 58px);
    width: auto;
  }
  .user-menu {
    width: min(280px, calc(100vw - 2 * var(--mobile-gutter)));
    padding: 7px;
  }
  .user-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 10px;
  }
  .user-menu .menu-row { min-height: 52px; padding: 6px 12px; }
  .user-menu .menu-theme-opt {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }
}

@media (max-width: 560px) {
  /* En teléfonos los diálogos se comportan como una hoja inferior: más espacio
     útil, acciones grandes y sin márgenes estrechos alrededor. */
  .modal-backdrop {
    align-items: flex-end;
    padding: max(12px, env(safe-area-inset-top)) 0 0;
  }
  .modal {
    max-width: none;
    max-height: 92dvh;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 54px rgba(0, 0, 0, .3);
  }
  .modal-head { min-height: 54px; padding: 11px var(--mobile-gutter); }
  .modal-close { min-width: 42px; min-height: 42px; }
  .modal-body { padding: 15px var(--mobile-gutter); }
  .modal-foot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px var(--mobile-gutter) max(10px, env(safe-area-inset-bottom));
    border-radius: 0;
  }
  .modal-foot > button { min-width: 0; min-height: 44px; }
  .modal-foot > button:only-child,
  .modal-foot > button:nth-last-child(3):first-child { grid-column: 1 / -1; }

  .topbar-action { font-size: 11px; }
  .footer-note { display: none; }
  .activity-event-top { flex-wrap: wrap; }
  .activity-event time { width: 100%; margin-left: 0; }
  .dash-kpis { gap: 7px; }
  .dash-kpi { padding: 11px 7px; }
}

@media (max-width: 374px) {
  :root { --mobile-gutter: 9px; }
  .topbar-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar-action { gap: 5px; padding-inline: 5px; font-size: 10px; }
  .topbar-action svg { width: 14px; height: 14px; }
  .welcome { padding-top: 22px; }
  .welcome-title { font-size: 24px; }
  .sug { min-height: 62px; padding: 9px 10px; }
  .modal-foot { grid-template-columns: minmax(0, 1fr); }
  .modal-foot > button { grid-column: 1; }
}

@media (hover: none) and (max-width: 767px) {
  .sug:hover,
  .toplist-item:hover,
  .topbar-action:hover,
  .chip:hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .sidebar,
  .sug,
  .panel-page { transition: none; animation: none; }
}

/* ============================================================
   FRONTEND RESPONSIVE AUDIT (2026-07-24)
   Correcciones exclusivas de la aplicación de usuario.
   ============================================================ */
.empresa-selector[hidden] { display: none !important; }

@media (max-width: 767px) {
  /* El selector de empresa tiene su propia fila y el desplegable nunca sale
     fuera del viewport. La regla [hidden] preserva su estado inicial. */
  .topbar > .empresa-selector {
    order: 15;
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
  }
  .topbar > .empresa-selector[hidden] { display: none !important; }
  .empresa-btn {
    width: 100%;
    max-width: none;
    min-height: 40px;
    justify-content: flex-start;
    padding-inline: 11px;
    border-radius: 10px;
  }
  #empresaBtnLabel {
    flex: 1;
    min-width: 0;
    text-align: left;
  }
  .empresa-menu {
    right: 0;
    left: 0;
    width: 100%;
    min-width: 0;
    max-height: min(45dvh, 320px);
  }
  .empresa-option { min-height: 44px; }

  /* Barras auxiliares compactas, con tarjetas KPI desplazables en lugar de
     encoger sus cifras hasta hacerlas ilegibles. */
  .project-banner {
    gap: 8px;
    padding: 7px var(--mobile-gutter);
  }
  .pb-icon { font-size: 18px; }
  .pb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
  }
  .kpi-bar {
    gap: 4px;
    padding: 6px var(--mobile-gutter);
    overflow: hidden;
  }
  .kpi-bar-grid {
    /* Línea COMPLETA para el carril: compartida con los controles ("actualizado
       hace…" + recarga + engranaje) quedaba estrangulado a una tarjeta cortada.
       Los controles saltan a una segunda línea, baja y discreta. */
    flex: 1 0 100%;
    flex-wrap: nowrap !important;
    gap: 7px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  /* Segunda línea: la antigüedad a la izquierda, botones a la derecha. */
  .kpi-updated { margin-right: auto; }
  .kpi-bar-grid::-webkit-scrollbar { display: none; }
  .kpi-bar .kpi-card {
    flex: 0 0 min(150px, 64vw);
    min-width: 0;
    scroll-snap-align: start;
    padding: 7px 10px;
  }

  /* El briefing contenía controles con anchos de escritorio fijados inline. */
  .briefing-config { width: 100%; min-width: 0; }
  .briefing-panel-header #bpTestBtn { margin-left: 0; }
  .briefing-panel-header #bpTestBtn,
  .briefing-panel-header #bpSaveBtn {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
  }
  .briefing-panel-header #bpStatus {
    flex: 1 0 100%;
    margin-left: 0;
  }
  .briefing-schedule-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end !important;
    gap: 10px !important;
  }
  .briefing-schedule-grid label,
  .briefing-format-grid label { min-width: 0; }
  #bpTime,
  #bpTimezone {
    display: block;
    width: 100% !important;
    min-height: 44px;
    margin: 5px 0 0 !important;
  }
  .briefing-days {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px !important;
  }
  .briefing-days .sched-dow-btn {
    width: 100%;
    max-width: 40px;
    height: auto;
    min-height: 36px;
    aspect-ratio: 1;
    justify-self: center;
  }
  .briefing-section-head {
    align-items: flex-start !important;
    flex-wrap: wrap;
  }
  .briefing-section-head > label {
    flex: 1 1 180px;
    min-width: 0;
  }
  .briefing-section-head .bp-section-edit-btn { min-height: 36px; }
  .briefing-email-row { margin-left: 0 !important; }
  #bpEmailTo { width: 100% !important; min-height: 44px; }
  .briefing-format-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch !important;
    gap: 11px !important;
  }
  .briefing-format-grid label > select,
  .briefing-format-grid label > span {
    display: flex !important;
    width: 100% !important;
    min-height: 44px;
    margin: 5px 0 0 !important;
  }
  .briefing-format-grid #bpMaxWords { flex: 1; width: auto !important; }
  .briefing-global-prompt-head { flex-wrap: wrap; }

  /* Formularios de Configuración: columnas flexibles y acciones que pueden
     saltar de línea sin recortar botones ni textos de estado. */
  .settings-action-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px !important;
  }
  .settings-action-row > button,
  .settings-action-row > a {
    flex: 1 1 150px;
    min-width: 0;
    min-height: 42px;
    justify-content: center;
  }
  .settings-action-row > span {
    flex: 1 0 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .settings-field-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end !important;
    gap: 10px !important;
  }
  .settings-field-row > label { min-width: 0; }
  .settings-audit-filters > button {
    grid-column: 1 / -1;
    min-height: 42px;
  }
  .integration-cards { grid-template-columns: minmax(0, 1fr); }
  
  
  
  
  
  

  /* Listados largos: la información ocupa una fila y sus operaciones otra. */
  .data-list { max-height: min(42dvh, 320px); }
  .data-list-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .data-list-info {
    flex: 1 1 calc(100% - 42px);
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }
  .data-list-actions {
    flex: 1 0 100%;
    justify-content: flex-end;
    padding-top: 6px;
    border-top: 1px solid var(--border);
  }
  .webhook-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .webhook-info .help {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .webhook-item > button {
    min-height: 40px;
    margin-left: auto;
  }

  /* Menús del sidebar y avisos siempre quedan dentro del área segura. */
  .sidebar-customize-popover {
    top: auto !important;
    right: var(--mobile-gutter) !important;
    bottom: max(var(--mobile-gutter), env(safe-area-inset-bottom)) !important;
    left: var(--mobile-gutter) !important;
    width: auto;
    max-height: min(72dvh, 520px);
    border-radius: 14px;
  }
  #toastBox {
    top: max(12px, env(safe-area-inset-top));
    right: var(--mobile-gutter);
    left: var(--mobile-gutter);
  }
  .toast {
    width: 100%;
    max-width: none;
    transform: translateY(-12px);
  }
  .toast.show { transform: translateY(0); }

  /* Tarjetas interactivas generadas dentro del chat. */
  .conversation-run-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-left: 0;
  }
  .conversation-run-actions button { width: 100%; min-width: 0; min-height: 42px; }
  
  
  
  .plan-head { flex-wrap: wrap; }
  .plan-count { margin-left: auto; }

  /* Ayuda y paneles secundarios: recuperan el ancho perdido por sangrías de
     escritorio y se mantienen cómodos en táctil. */
  .help-cat-intro,
  .help-examples { padding-left: 0; }
  .help-shortcuts-grid { grid-template-columns: minmax(0, 1fr); }
  .anomaly-meta-bar { flex-wrap: wrap; gap: 6px 10px; }
  

  /* Pipelines y asistente flotante también pertenecen a la app de usuario. */
  .ppv-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ppv-stat { min-width: 0; border-bottom: 1px solid var(--border); }
  .ppv-stat:nth-child(2n) { border-right: 0; }
  .ppv-stat:nth-last-child(-n + 2) { border-bottom: 0; }
  .pipe-step-name { padding-right: 38px; }
  .wf-ai-drawer {
    right: var(--mobile-gutter);
    bottom: max(72px, calc(60px + env(safe-area-inset-bottom)));
    width: calc(100vw - 2 * var(--mobile-gutter));
    height: min(560px, calc(100dvh - 96px));
    max-height: none;
  }
  .wf-ai-drawer-input textarea,
  .pipe-search { font-size: 16px; }

  /* Controles inferiores del sidebar con área táctil consistente. */
  .user-menu-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
  .lang-selector { min-height: 40px; }
}



@media (max-width: 374px) {
  .briefing-schedule-grid,
  .settings-field-row { grid-template-columns: minmax(0, 1fr); }
  .settings-audit-filters > button { grid-column: 1; }
  .pb-desc { display: none; }
  
  .pipe-cat-desc { display: none; }
}

/* ============================================================
   OPTIMIZACIÓN DE BOTONERAS Y MENÚS (2026-08-31)
   Auditoría visual con arnés Puppeteer (desktop 1440 / móvil 390,
   claro y oscuro). Solo retoques: mismos tokens, mismo estilo.
   ============================================================ */

/* Móvil: objetivos táctiles que quedaban por debajo de 40px. */
@media (max-width: 767px) {
  .new-chat { min-height: 42px; }
  /* El toggle Normal/Profundo queda solo-icono en móvil: 34×32 era
     demasiado fino para el pulgar. */
  .thinking-option { min-height: 40px; min-width: 44px; justify-content: center; }
  .dash-customize-btn { min-height: 44px; }
  .lang-selector { min-width: 44px; }
}

/* Desplegable «Automatizaciones» de la topbar (agrupa Agentes/Tareas/
   Pipelines/Anomalías: 4 botones permanentes → 1). Los ítems reutilizan
   .menu-item; el contenedor hereda la familia de menús de la app. */
.topbar-actions { position: relative; }
.topbar-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 10000;
  min-width: 230px; padding: 6px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius);
  animation: menuIn .13s cubic-bezier(.16,.8,.3,1);
  box-shadow: var(--shadow-md);
}
#automationsBtn[aria-expanded="true"] { background: var(--bg-hover); color: var(--text); }

/* Directorio de indicadores: empresa → área → KPI. Comparte los tokens del panel. */
.settings-kpi-menu { max-width: 1100px; margin-inline: auto; }
.settings-kpi-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.settings-kpi-heading > div { min-width: 0; }
.settings-kpi-heading h4 { font-size: 19px; margin: 0 0 8px; gap: 8px; }
.settings-kpi-heading .help { margin: 0; max-width: 560px; line-height: 1.6; }
.settings-kpi-heading .btn-primary { flex-shrink: 0; min-height: 40px; gap: 8px; }
.settings-kpi-companies { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-bottom: 24px; }
.settings-kpi-company { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated); color: var(--text); text-align: left; cursor: pointer; }
.settings-kpi-company:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.settings-kpi-company[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.settings-kpi-company-icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; color: var(--text-secondary); background: var(--bg-elevated); }
.settings-kpi-company[aria-pressed="true"] .settings-kpi-company-icon { color: var(--accent-text); border-color: transparent; }
.settings-kpi-company-copy { display: grid; gap: 7px; flex: 1; min-width: 0; }
.settings-kpi-company-copy strong { font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.settings-kpi-company-copy > span { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.settings-kpi-company > .icon { flex: 0 0 auto; color: var(--text-muted); }
.settings-kpi-directory { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated); }
.settings-kpi-toolbar { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.settings-kpi-filters { display: flex; padding: 4px; gap: 4px; border-radius: 9px; background: var(--bg-sidebar); }
.settings-kpi-filters button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 7px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; }
.settings-kpi-filters button[aria-pressed="true"] { background: var(--bg-elevated); color: var(--text); border-color: var(--border); }
.settings-kpi-search { display: flex; align-items: center; flex: 0 1 260px; gap: 8px; min-width: 0; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--text-muted); }
.settings-kpi-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.settings-kpi-search > .icon { flex-shrink: 0; }
.settings-kpi-search input { width: 100%; min-width: 0; min-height: 40px; border: 0; outline: 0; padding: 8px 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; box-shadow: none; }
.settings-kpi-count { margin: 18px 0 12px; color: var(--text-muted); font-size: 12px; }
.settings-kpi-area { margin-bottom: 8px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.settings-kpi-area summary { display: flex; align-items: center; gap: 12px; padding: 14px; min-height: 60px; list-style: none; cursor: pointer; }
.settings-kpi-area summary::-webkit-details-marker { display: none; }
.settings-kpi-area summary:hover { background: var(--bg-hover); }
.settings-kpi-area summary > .icon { flex-shrink: 0; color: var(--text-muted); }
.settings-kpi-area[open] summary > .icon { transform: rotate(180deg); }
.settings-kpi-area-icon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: var(--bg-sidebar); color: var(--text-secondary); }
.settings-kpi-area-title { display: grid; flex: 1; min-width: 0; gap: 4px; }
.settings-kpi-area-title strong { font-size: 13px; overflow-wrap: anywhere; }
.settings-kpi-area-title small { font-size: 12px; color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; }
.settings-kpi-area-count { padding: 3px 8px; border-radius: 6px; background: var(--bg-sidebar); color: var(--text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.settings-kpi-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; gap: 0 20px; margin: 0; padding: 0 14px 8px; border-top: 1px solid var(--border); }
.settings-kpi-items li { display: flex; align-items: center; gap: 9px; padding: 12px 0; min-width: 0; border-bottom: 1px solid var(--border); }
.settings-kpi-item-icon { flex: 0 0 18px; color: var(--text-muted); }
.settings-kpi-item-copy { display: grid; gap: 4px; flex: 1; min-width: 0; }
.settings-kpi-item-copy strong { font-size: 12px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.settings-kpi-item-copy small { font-size: 11px; color: var(--text-muted); }
.settings-kpi-mini { display: inline-flex; gap: 4px; align-items: center; padding: 4px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-text); font-size: 10px; font-weight: 600; white-space: nowrap; }
.settings-kpi-note { display: flex; align-items: flex-start; gap: 7px; margin: 18px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.settings-kpi-note .icon { flex-shrink: 0; margin-top: 2px; }
.settings-kpi-empty { display: grid; justify-items: center; gap: 12px; padding: 32px 16px; text-align: center; color: var(--text-secondary); }
.settings-kpi-empty strong { color: var(--text); font-size: 14px; }
.settings-kpi-empty p { margin: 0; font-size: 13px; line-height: 1.5; }
.settings-kpi-menu button:focus-visible, .settings-kpi-area summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.settings-kpi-area summary:focus-visible { outline-offset: -3px; }
@media (max-width: 1100px) {
  .settings-kpi-heading { flex-direction: column; gap: 14px; }
  .settings-kpi-items { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .settings-kpi-heading .btn-primary { width: 100%; justify-content: center; min-height: 44px; }
  .settings-kpi-companies { gap: 8px; margin-bottom: 16px; }
  .settings-kpi-company { padding: 14px; }
  .settings-kpi-directory { padding: 12px; }
  .settings-kpi-toolbar { gap: 10px; }
  .settings-kpi-filters { width: 100%; }
  .settings-kpi-filters button { flex: 1; min-height: 40px; }
  .settings-kpi-search { flex-basis: 100%; }
  .settings-kpi-area summary { padding: 12px 10px; gap: 8px; }
  .settings-kpi-mini { font-size: 10px; }
}
/* En topbar apilada (tablet/móvil) el disparador ocupa su fila y el menú
   se abre a todo el ancho del contenedor. Anula los grids de 4 columnas
   de las capas responsive anteriores. */
@media (max-width: 1279px) {
  .topbar-actions { display: flex; }
  .topbar-actions .topbar-action { width: 100%; justify-content: center; }
  .topbar-menu { left: 0; right: 0; min-width: 0; }
  .topbar-menu .menu-item { min-height: 44px; }
}

/* ============================================================
   OPTIMIZACIÓN DEL SIDEBAR (2026-08-31)
   Botones redundantes fuera, búsqueda conectada al FTS del
   servidor, grupo «Fijadas», estado de conexión sin fila fija
   y objetivos táctiles de la lista en móvil.
   ============================================================ */

/* ── Buscador: botón limpiar + pista Ctrl+K ──
   input, .gs-clear y .gs-kbd son hermanos dentro del form
   (display:contents), así que :placeholder-shown ~ decide cuál
   de los dos se ve sin una línea de JS. */
.sidebar-global-search input { padding-right: 30px; }
.gs-clear {
  position: absolute; right: 18px; top: calc(50% - 2px);
  transform: translateY(-50%);
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: none; border-radius: 50%;
  color: var(--text-muted); cursor: pointer;
  transition: background .12s, color .12s;
}
.gs-clear:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-global-search input:not(:placeholder-shown) ~ .gs-clear { display: flex; }
.gs-kbd {
  position: absolute; right: 18px; top: calc(50% - 2px);
  transform: translateY(-50%);
  font-size: 9.5px; font-weight: 600; letter-spacing: .3px;
  font-family: inherit;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  pointer-events: none;
  user-select: none;
}
.sidebar-global-search input:not(:placeholder-shown) ~ .gs-kbd,
.sidebar-global-search input:focus ~ .gs-kbd { display: none; }

/* ── Resultados del FTS del servidor (chats antiguos + contenido) ── */
.gs-results {
  padding: 2px 8px 8px;
  border-bottom: 1px solid var(--border);
  max-height: 38vh;
  overflow-y: auto;
  scrollbar-width: thin;
  flex-shrink: 0;
}
.gs-results[hidden] { display: none !important; }
.gs-results-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-secondary);
  padding: 2px 6px 4px;
}
.gs-result {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; text-align: left;
  background: transparent; border: none;
  border-radius: var(--radius-sm);
  padding: 5px 8px; cursor: pointer;
  min-width: 0;
  /* Sin esto los spans nowrap desbordan el botón por la derecha y el
     recorte lo hace el contenedor de fuera: texto cortado a lo bruto
     en vez del ellipsis. */
  overflow: hidden;
  transition: background .12s;
}
.gs-result:hover { background: var(--bg-hover); }
.gs-result:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gs-result-title {
  font-size: 12.5px; color: var(--text);
  display: block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gs-result-snip {
  font-size: 11px; color: var(--text-muted);
  display: block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gs-result-snip mark {
  background: transparent; color: var(--accent-text); font-weight: 600;
}

/* ── Estado de conexión: punto en el avatar; la fila de texto solo
   aparece cuando hay algo que contar (error/desconexión). ── */
.user-avatar { position: relative; }
.user-avatar[data-conn]::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--bg-sidebar);
  background: var(--text-muted);
}
.user-avatar[data-conn="ok"]::after { background: var(--success); }
.user-avatar[data-conn="error"]::after { background: var(--danger); }
.status.connected { display: none; }
.status { padding: 4px 12px 8px; margin-top: 0; }

/* ── Lista vacía de conversaciones ── */
.conv-empty {
  padding: 6px 10px 8px;
  font-size: 12px; color: var(--text-muted); line-height: 1.4;
}

/* ── Móvil: objetivos táctiles de la LISTA (la capa de botoneras ya
   cubrió topbar y cabeceras; faltaban los items y el pie). ── */
@media (max-width: 767px) {
  .conv-item { min-height: 40px; padding: 6px 8px; }
  .sidebar-add { width: 32px; height: 32px; }
  .conv-more { padding: 6px; }
  .user-menu-btn { width: 38px; height: 38px; }
  .gs-result { min-height: 44px; justify-content: center; }
  .gs-kbd { display: none !important; }
}

/* ============================================================
   PROYECTOS EN EL SIDEBAR (2026-08-31, 2ª pasada)
   Picker de proyecto (fuera el <select>), banner de contexto
   con kicker, contadores por carpeta y selección múltiple digna.
   ============================================================ */

/* ── Picker de proyecto: lista clicable, un toque = mover ── */
.pp-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 46vh; overflow-y: auto; scrollbar-width: thin;
  margin: 2px 0 10px;
}
.pp-row {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  min-width: 0;
}
.pp-row:hover { background: var(--bg-hover); }
.pp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pp-row.current {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  cursor: default;
}
.pp-icon { display: flex; align-items: center; flex-shrink: 0; color: var(--text-secondary); }
.pp-row:hover .pp-icon { color: var(--accent-text); }
.pp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-current {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  color: var(--accent-text); flex-shrink: 0;
}
.pp-new-row {
  display: flex; gap: 8px; align-items: center;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.pp-new-row input {
  flex: 1; min-width: 0;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 10px;
  font-size: 13px; color: var(--text);
}
.pp-new-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pp-new-row .btn-secondary { flex-shrink: 0; white-space: nowrap; }

/* ── Banner de proyecto: contexto, no decoración ── */
.project-banner {
  border-left: 3px solid var(--accent);
  padding: 7px 20px 7px 17px;
  gap: 10px;
}
.pb-icon { display: flex; align-items: center; color: var(--accent-text); }
.pb-kicker {
  font-size: 9.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--accent-text);
  line-height: 1.2;
}
.pb-name { font-size: 13.5px; line-height: 1.25; }
.pb-desc { font-size: 11.5px; }

/* ── Contador de chats por carpeta (espejo del de secciones) ── */
.proj-count {
  font-size: 10px;
  background: var(--bg-hover);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
  line-height: 1.5;
  flex-shrink: 0;
}
.proj-count:empty { display: none; }

/* Carpeta del proyecto ACTIVO: se ve cuál está en contexto. */
.project-folder.active > .project-item {
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
}

/* ── Barra de selección múltiple: barra de herramientas, no botones sueltos ── */
.conv-bulk-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 6px;
  margin: 4px 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.conv-bulk-bar[hidden] { display: none !important; }

/* ── «Opciones avanzadas» plegadas en modales (crear proyecto) ── */
.adv-options { margin-top: 12px; }
.adv-options summary {
  cursor: pointer; user-select: none;
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  padding: 4px 0;
}
.adv-options summary:hover { color: var(--accent-text); }
.adv-options[open] summary { margin-bottom: 8px; }

@media (max-width: 767px) {
  .pp-row { min-height: 44px; }
  .pp-new-row input { min-height: 40px; }
  .pb-desc { display: none; }
}

/* ── Sencillo vs profesional: interruptor maestro del personalizador ── */
.sidebar-vis-item.vis-master {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 6px;
}
.vis-master .sidebar-vis-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vis-master-title { font-weight: 600; font-size: 13px; color: var(--text); }
.vis-master-sub { font-size: 11px; color: var(--text-muted); line-height: 1.35; }
.vis-simple-hint {
  margin: 4px 2px 2px;
  font-size: 12px; color: var(--text-secondary); line-height: 1.45;
}
/* El interruptor maestro no se atenúa al estar OFF: es el control principal
   del popover, no una sección apagada. */
.sidebar-vis-item.vis-master:has(input:not(:checked)) .sidebar-vis-label { opacity: 1; }

/* ============================================================
   ACCIONES DE RESPUESTA EN LA BARRA FIJA (2026-08-31)
   La botonera flotante por mensaje se retiró: Detalle, favorito
   y compartir viven junto al export multiformato de la topbar.
   ============================================================ */
/* display:contents → los botones son hijos flex directos de la topbar
   (heredan su gap y alineación, como campana/export/pantalla completa). */
.resp-actions { display: contents; }

@media (max-width: 767px) {
  /* En móvil la topbar no da para todo: se quedan Detalle y Exportar;
     favorito/compartir son acciones de escritorio. */
  #favResponseBtn, #shareResponseBtn { display: none; }
}

/* ── Detalle de respuesta: resumen narrado + hechos por paso ── */
.trace-summary {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.trace-summary p { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--text); }
.trace-summary p:last-child { margin-bottom: 0; }
.trace-summary.is-error {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-left-color: var(--danger);
}
.trace-fact {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 12px; line-height: 1.45; margin: 2px 0;
  min-width: 0;
}
.trace-fact b {
  flex: 0 0 auto; font-weight: 650; color: var(--text-secondary);
  font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
}
.trace-fact span { min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.trace-fact-error b, .trace-fact-error span { color: var(--danger); }
/* trace-hint también se usa suelto (pie del modal de detalle) */
.trace-hint { font-size: 11.5px; color: var(--text-muted); }

/* ── Detalle: contexto de proyecto y conversación completa ── */
.trace-context {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--bg-elevated);
}
.trace-conv { margin-top: 12px; }
.trace-transcript { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; scrollbar-width: thin; }
.tt-msg { display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.45; }
.tt-msg b { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); font-weight: 650; }
.tt-msg.tt-user b { color: var(--text-secondary); }
.tt-msg span { color: var(--text); overflow-wrap: anywhere; }
.tt-target { border-left: 2px solid var(--accent); padding-left: 8px; }
.tt-target b { color: var(--accent-text); }

/* ── Marcar diagnóstico para analizar ── */
.trace-flag-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; }
.trace-flag-row textarea {
  flex: 1; min-width: 0; resize: vertical;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: 13px; color: var(--text); font-family: inherit;
}
.trace-flag-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.trace-flag-row .btn-primary { flex-shrink: 0; }

/* ============================================================
   PANEL ENFOCADO — administración a pantalla completa
   ------------------------------------------------------------
   Ajustes y Gestión de usuarios son tareas de ADMINISTRACIÓN, no de chat:
   editar permisos o dar de alta a alguien no tiene nada que ver con el
   sidebar de conversaciones ni con los controles del chat de la topbar.
   Antes se abrían dentro del hueco del chat, dejando sidebar (280px),
   topbar (59px) y el banner del proyecto activo (47px) a la vista: ruido
   que compite por la atención, invita a salirse a medio editar, y deja el
   contenido en el 78% del ancho.

   Se reutiliza la técnica ya probada de `body.embed-mode`: colapsar el
   grid de `.app`. El grid ya tiene `transition: grid-template-columns`,
   así que el colapso se anima sin trabajo extra.
   ============================================================ */
body.panel-focus #toggleSidebar,
body.panel-focus .topbar,
body.panel-focus .kpi-bar,
body.panel-focus .project-banner {
  display: none !important;
}
/* El sidebar NO se quita con display:none: la rejilla de .app anima sus
   columnas (.25s) y con el sidebar ya desaparecido el contenido se estiraba
   sobre un hueco vacío (se percibía como una «carga extraña»). Se pliega
   como .sidebar-collapsed, en sincronía con la rejilla. En móvil el sidebar
   es un overlay fijo: ahí sí se retira del todo. */
@media (min-width: 768px) {
  body.panel-focus .sidebar {
    min-width: 0 !important;
    overflow: hidden;
    border-right: none;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .25s;
  }
  body.panel-focus .resizer,
  body.panel-focus #sidebarResizer { display: none !important; }
}
@media (max-width: 767px) {
  body.panel-focus .sidebar,
  body.panel-focus .resizer,
  body.panel-focus #sidebarResizer { display: none !important; }
}

/* Solo escritorio: en móvil (<=767px) `.app` ya es de UNA columna y `.main`
   vive en grid-column 1. Colapsar aquí las 5 columnas dejaba el contenido en
   una columna de ancho 0 -> pantalla en blanco. MEDIDO a 390px. */
@media (min-width: 768px) {
  body.panel-focus .app {
    grid-template-columns: 0 0 1fr 0 0 !important;
  }
}

body.panel-focus .main {
  border-radius: 0;
}

/* La cabecera del panel pasa a ser la ÚNICA barra: sticky, para que el
   botón de volver siga alcanzable en listas largas de usuarios. */
body.panel-focus .panel-page-header,
body.panel-focus .toplist-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding-block: 16px;
  background: var(--bg);
}

/* La miga se inserta ANTES del título; en las cabeceras de lista el h2 lleva
   `margin` propio y quedaría desalineada verticalmente. */
body.panel-focus .toplist-header { align-items: center; }
body.panel-focus .toplist-header > .panel-context { margin-right: 2px; }

/* El contenido respira y se centra: sin el sidebar hay 1280px de ancho y
   estirar las tarjetas de usuario hasta el borde las volvería ilegibles. */
body.panel-focus .panel-page-body {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 32px;
  padding-bottom: 64px;
}

/* El foco entra por JS al abrir para que el lector de pantalla anuncie la
   página y el tabulador siga aquí. Pero el título NO es un control: pintarle
   un anillo es ruido. Chrome trata el foco programático como :focus-visible,
   así que no basta con :not(:focus-visible) — se quita el contorno siempre.
   No se pierde accesibilidad: el título no es interactivo, solo el destino
   del anuncio, y los controles reales conservan su propio foco visible. */
body.panel-focus .panel-page-title[tabindex="-1"]:focus,
.panel-page-title[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}

/* A pantalla completa, el borde de las pestañas de Ajustes dibujaba una línea
   de 1000px hasta el fondo de la ventana. Se convierte en un separador que
   solo acompaña a las pestañas. */
body.panel-focus .settings-panel-tabs {
  border-right: none;
  padding-right: 8px;
  border-inline-end: 1px solid var(--border);
  align-self: start;
  max-height: calc(100dvh - 140px);
}

/* Migas de contexto: al ocultar el sidebar y el banner, el usuario pierde
   la referencia de DÓNDE estaba. Esta línea se la devuelve y el botón de
   volver dice a qué vuelve exactamente. */
.panel-context {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
.panel-context-sep { opacity: .45; }
.panel-context-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.panel-context-item.is-project {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}

@media (max-width: 767px) {
  body.panel-focus .panel-page-body {
    padding-inline: 14px;
  }
  .panel-context-item { max-width: 120px; }
}

/* ============================================================
   PIE DEL SIDEBAR EN UNA FILA + MENÚ ⋮ AGRUPADO (2026-09-11)
   Antes: botonera de iconos sin rótulo (usuarios/ayuda/personalizar/
   licencia) + fila de usuario con idioma + menú ⋮ con el resto. Ahora la
   fila de usuario es la única puerta y el menú agrupa todo con rótulo:
   trabajo/administración · preferencias · cuenta.
   ============================================================ */
.user-menu { width: 256px; }
/* Las entradas ocultas por rol no deben ocupar sitio aunque .menu-item
   fuerce display:flex. */
.user-menu [hidden] { display: none !important; }
/* Filas con control a la derecha (tema, idioma): misma sangría e icono que
   los .menu-item para que la columna de iconos quede alineada. */
.menu-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 5px 10px 5px 14px; min-height: 36px;
}
.menu-row-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--text); white-space: nowrap; cursor: default;
}
.menu-row-label .icon { flex-shrink: 0; opacity: .85; }
/* Selector de idioma dentro del menú: mismo tamaño de texto que el resto y
   un chevron (antes, sin appearance, no parecía desplegable). */
.user-menu .lang-selector {
  min-width: 58px; min-height: 28px;
  padding: 3px 22px 3px 9px;
  font-size: 12px; letter-spacing: .3px;
  border-radius: 6px;
  background-color: var(--bg-hover);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 7px center;
  text-align: left;
}
.user-menu .lang-selector:hover { background-color: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
/* Pista de atajo a la derecha del ítem (Ayuda · Ctrl H). */
.menu-kbd {
  margin-left: auto;
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 5px;
  white-space: nowrap;
}
.menu-item:hover .menu-kbd { color: var(--text-secondary); }
@media (max-width: 767px) { .menu-kbd { display: none; } }

/* ============================================================
   AUTOMATIZACIONES EN EL SIDEBAR + PÁGINAS DE ÁREA (2026-09-14)
   Las 4 áreas (Agentes, Tareas de negocio, Pipelines, Anomalías)
   pasan del desplegable de la topbar a un grupo plegable de la
   navegación. Sus páginas comparten cabecera con Dashboard/Briefing
   (.panel-page-header) y estrenan una tarjeta de intro que explica
   qué hace cada área y dónde se ve el resultado.
   ============================================================ */
.sidebar-nav-group { margin-top: 6px; }
.sidebar-nav-label {
  display: flex; align-items: center; gap: 5px;
  width: 100%; padding: 4px 6px; margin: 0 0 1px;
  border: none; border-radius: var(--radius-sm); background: transparent;
  font-size: 11px; font-weight: 650; letter-spacing: .3px; text-transform: uppercase;
  color: var(--text-secondary); cursor: pointer; user-select: none;
  transition: background .12s, color .12s;
}
.sidebar-nav-label:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-nav-label:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sidebar-nav-list { display: flex; flex-direction: column; gap: 1px; }
.sidebar-nav-group.collapsed .sidebar-caret { transform: rotate(-90deg); }
.sidebar-nav-group.collapsed .sidebar-nav-list { display: none; }
@media (max-width: 767px) {
  .sidebar-nav-label { min-height: 40px; font-size: 12px; }
  .sidebar-nav-list { gap: 2px; }
}

/* Páginas de área: la lista vive dentro de .panel-page-body, que ya pone
   el margen; .toplist-panel solo centra y limita el ancho. */
.panel-page-body > .toplist-panel { padding: 0; }
.panel-page-header .btn-primary.btn-sm { white-space: nowrap; }

/* Tarjeta de intro: qué es esto y dónde veo el resultado. */
.area-intro {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; margin: 0 0 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elevated);
}
.area-intro-icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
}
.area-intro-body { flex: 1; min-width: 0; }
.area-intro-title { margin: 0 0 3px; font-size: 14px; font-weight: 600; }
.area-intro-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.area-intro-text b { color: var(--text); font-weight: 600; }
.area-intro-steps {
  display: flex; flex-wrap: wrap; gap: 6px 0; margin: 9px 0 0; padding: 0; list-style: none;
  font-size: 12px; color: var(--text-secondary);
}
.area-intro-steps li { display: inline-flex; align-items: center; gap: 5px; }
.area-intro-steps li .icon { color: var(--accent-text); flex-shrink: 0; }
.area-intro-steps li + li::before { content: "→"; color: var(--text-muted); margin: 0 9px; }
.area-intro-link {
  padding: 0; border: 0; background: none; color: var(--accent-text);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.area-intro-link:hover { color: var(--accent-hover); }

/* Listas: descripción opcional bajo el nombre, rótulo de categoría y
   acciones siempre visibles donde no hay hover (táctil). */
.toplist-item-desc {
  font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toplist-cat-label {
  margin: 14px 0 6px; font-size: 11px; font-weight: 650; letter-spacing: .3px;
  text-transform: uppercase; color: var(--text-secondary);
}
.toplist-cat-label:first-child { margin-top: 0; }
@media (hover: none) { .toplist-item-actions { opacity: 1; } }

/* Estado vacío con explicación y acción, no solo un icono gris. */
.toplist-empty { padding: 44px 20px; }
.toplist-empty-icon {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 4px;
  background: var(--accent-soft); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
}
.toplist-empty-title { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--text); }
.toplist-empty p { margin: 6px 0 0; max-width: 460px; line-height: 1.5; font-size: 13px; }
.toplist-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }

/* Briefing: bloques en tarjetas, resumen vivo arriba y cuerpo atenuado
   cuando el briefing está apagado. Mismos ids que antes. */
.briefing-config { max-width: 760px; }
.bp-summary {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin: 0 0 16px;
  border-radius: var(--radius); background: var(--accent-soft);
  color: var(--text); font-size: 13px; line-height: 1.5;
}
.bp-summary .icon { flex-shrink: 0; color: var(--accent-text); margin-top: 2px; }
.bp-summary b { font-weight: 600; }
.bp-summary.is-off { background: var(--bg-hover); color: var(--text-secondary); }
.bp-summary.is-off .icon { color: var(--text-muted); }
.bp-summary.is-warn { background: rgba(245,158,11,.12); }
.bp-summary.is-warn .icon { color: #b45309; }
[data-theme="dark"] .bp-summary.is-warn .icon { color: #fbbf24; }
.bp-master {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.bp-master small { font-weight: 400; color: var(--text-secondary); font-size: 12.5px; }
#bpConfigBody.is-disabled { opacity: .45; pointer-events: none; }
.bp-card {
  padding: 16px 18px; margin: 0 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated);
}
.bp-card-head {
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.bp-card-head .icon { color: var(--accent-text); flex-shrink: 0; }
.bp-card-head small { font-weight: 500; font-size: 11.5px; color: var(--text-muted); }
.bp-card-hint { margin: -6px 0 12px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.bp-grid { display: flex; gap: 14px 18px; flex-wrap: wrap; align-items: center; }
.bp-field { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text); }
.bp-field .input { margin: 0; }
.bp-days-label { display: block; margin: 12px 0 6px; font-size: 13px; }
.bp-days { display: flex; gap: 6px; flex-wrap: wrap; }
.bp-section { padding: 12px 0; border-bottom: 1px solid var(--border); }
.bp-section:last-child { padding-bottom: 0; border-bottom: 0; }
.bp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.bp-section-label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; cursor: pointer; }
.bp-section-label .icon { color: var(--text-secondary); }
.bp-hint { margin: 0 0 4px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.bp-hint strong { color: var(--text-secondary); font-weight: 600; }
.bp-example { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); font-style: italic; }
.bp-section-custom-wrap textarea { width: 100%; resize: vertical; font-size: 12px; margin: 6px 0; }
.bp-channels { display: flex; flex-direction: column; gap: 10px; }
.bp-channel { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; cursor: pointer; }
.bp-channel .icon { color: var(--text-secondary); }
.briefing-email-row { margin-left: 44px; }
.briefing-email-row .input { width: min(280px, 100%); }
.bp-inline-edit { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; }
@media (max-width: 560px) {
  .bp-card { padding: 14px; }
  .briefing-email-row { margin-left: 0; }
}
/* Móvil: los pasos de la intro se apilan (las flechas en línea quedaban
   huérfanas al principio de cada salto de línea). */
@media (max-width: 640px) {
  .area-intro { gap: 12px; padding: 12px; }
  .area-intro-steps { flex-direction: column; gap: 5px; }
  .area-intro-steps li + li::before { content: none; }
}

/* ============================================================
   SIDEBAR: CABECERAS CON TINTA PROPIA, EMPRESAS Y HUB (2026-09-14)
   Las cabeceras que agrupan (Automatizaciones, Proyectos, Favoritos,
   Conversaciones, Hoy/Ayer/…, y ahora la empresa) llevan una tinta
   azulada sutil distinta de la de los chats, para distinguir «qué es
   qué» sin leer. Los chats siguen en --text-secondary.
   ============================================================ */
:root { --nav-head-ink: color-mix(in srgb, var(--accent) 48%, var(--text-secondary)); }
[data-theme="dark"] { --nav-head-ink: color-mix(in srgb, var(--accent) 55%, var(--text-secondary)); }
.sidebar-cat-head,
.sidebar-nav-label,
.conv-group-label,
.conv-company-label { color: var(--nav-head-ink); }
.sidebar-cat-head .sidebar-cat-icon { color: var(--nav-head-ink); opacity: .9; }
.conv-group-label { font-size: 10.5px; }
.conv-group-label:hover, .conv-company-label:hover { color: var(--accent-text); }

/* Fila de cabecera del grupo Automatizaciones: caret que pliega + rótulo que abre el hub. */
.sidebar-nav-label-row { display: flex; align-items: center; gap: 0; margin: 0 0 1px; }
.sidebar-nav-caret {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 24px; padding: 0; flex-shrink: 0;
  border: none; border-radius: var(--radius-sm); background: transparent;
  color: var(--nav-head-ink); cursor: pointer; font-size: 10px;
}
.sidebar-nav-caret:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-nav-caret:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sidebar-nav-caret .sidebar-caret { transition: transform .15s; }
.sidebar-nav-group.collapsed .sidebar-nav-caret .sidebar-caret { transform: rotate(-90deg); }
.sidebar-nav-label-row .sidebar-nav-label { flex: 1; padding-left: 2px; }
.sidebar-nav-label.active { background: var(--accent-soft); color: var(--accent-text); }

/* Nivel «empresa» por encima de los tramos de fecha. Banda tenue para que
   la jerarquía se lea: empresa (banda) > tramo (tinta) > chat (plano). */
.conv-company-group { min-width: 0; margin: 4px 0 2px; }
.conv-company-label {
  width: calc(100% - 8px); min-height: 32px; margin: 0 4px 1px;
  padding: 6px 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 0; border-radius: 7px;
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  text-align: left; text-transform: uppercase; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.conv-company-label:hover { background: var(--accent-soft); }
.conv-company-label:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.conv-company-label .conv-group-heading svg:not(.conv-group-chevron svg) { flex-shrink: 0; opacity: .85; }
.conv-company-group.collapsed .conv-company-label .conv-group-chevron { transform: rotate(-90deg); }
.conv-company-group.collapsed:not(.search-expanded) .conv-company-items { display: none; }
.conv-company-items { min-width: 0; display: flex; flex-direction: column; padding-left: 4px; }
.conv-company-items .conv-group-label { margin-left: 2px; }
@media (max-width: 767px) { .conv-company-label { min-height: 42px; font-size: 12px; } }

.area-intro-steps.no-arrows li + li::before { content: none; }
.area-intro-steps.no-arrows { gap: 6px 16px; }

/* Agentes unificados (2026-09-14): filtros, etiqueta de tipo y catálogo «Nuevo». */
.area-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.area-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-elevated); color: var(--text-secondary);
  font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.area-chip:hover { border-color: var(--accent); color: var(--text); }
.area-chip.active { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; font-weight: 600; }
.area-chip-n { font-size: 11px; opacity: .75; }
.conversation-area-tabs { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.conversation-history-hint { margin: 0 0 14px; color: var(--text-secondary); font-size: 13px; }
.conversation-history-list .conv-item { padding: 12px; min-height: 64px; border-bottom: 1px solid var(--border); border-radius: var(--radius-sm); }
.conversation-history-list .conv-title { font-size: 14px; }
.conversation-history-list .conv-more { opacity: 1; }
.conversation-history-more[hidden] { display: none; }
.conversation-history-date { margin-top: 4px; color: var(--text-muted); font-size: 11px; }
.conversation-history-list .conv-title-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.toplist-kind {
  font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  padding: 1px 6px; border-radius: 6px; background: var(--bg-hover); color: var(--text-secondary); white-space: nowrap;
}
.catalog-section { margin: 0 0 24px; }
.catalog-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.catalog-section-title .icon { color: var(--accent-text); }
.catalog-section-hint { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.catalog-section .agent-tpl-grid { margin: 0; }
.catalog-section .agent-tpl-card { cursor: pointer; }
.catalog-cta {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated);
}
.catalog-cta-body { flex: 1; min-width: 0; }
.catalog-cta-title { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; }
.catalog-cta-text { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.catalog-cta .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 560px) { .catalog-cta { flex-wrap: wrap; } .catalog-cta .btn { width: 100%; justify-content: center; } }

/* Compartir por enlace (2026-09-14): caja del enlace creado y lista de enlaces. */
.share-link-box { display: flex; gap: 8px; align-items: center; }
.share-link-box input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-hover); color: var(--text); font: inherit; font-size: 12.5px; }
.share-link-box .btn-primary { white-space: nowrap; }
.share-link-item.is-dead .toplist-item-name, .share-link-item.is-dead .toplist-item-icon { opacity: .55; }

/* Pista de atajos del compositor como teclas (2026-09-14). */
.composer-hint { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-muted); }
.composer-hint .hint-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.composer-hint kbd {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
  background: var(--bg-elevated); color: var(--text-secondary);
  font: 600 10px/1.4 inherit; font-family: inherit; letter-spacing: .2px;
}
.composer-hint .kbd-plus { margin: 0 1px; color: var(--text-muted); font-size: 10px; }
.composer-hint svg { color: var(--text-secondary); }

/* ============================================================
   ÁRBOL DEL SIDEBAR: NIVELES LEGIBLES (2026-09-14)
   Sangría fija por nivel y una guía vertical bajo cada contenedor
   desplegado, como en un explorador de archivos:
     nivel 0  PROYECTOS / FAVORITOS / CONVERSACIONES (cabecera de categoría)
     nivel 1  carpeta de proyecto · favorito · FIJADAS · empresa
     nivel 2  chat de proyecto · tramo de fecha (HOY, AYER…)
     nivel 3  chat dentro del tramo
   La guía se ilumina al pasar el ratón por el bloque, para ver de un
   vistazo qué cuelga de qué.
   ============================================================ */
.sidebar { --tree-step: 10px; --tree-guide: var(--border); }
.tree-branch,
.conv-company-items,
.conv-group-items,
.project-conv-list {
  margin-left: calc(var(--tree-step) + 3px);
  padding-left: var(--tree-step);
  border-left: 1px solid var(--tree-guide);
  transition: border-color .15s ease;
}
.conv-company-items:hover,
.conv-group-items:hover,
.project-conv-list:hover { border-left-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* Nivel 1: la LISTA de cada categoría es también una rama con guía, así las
   carpetas de proyecto, los favoritos, «Fijadas» y las empresas cuelgan
   visiblemente de su cabecera y quedan alineados entre sí (antes «Cierre
   mensual» se pintaba casi a la altura de PROYECTOS). */
.sidebar-cat > .conv-list {
  margin-left: calc(var(--tree-step) + 3px);
  padding-left: var(--tree-step);
  border-left: 1px solid var(--tree-guide);
  transition: border-color .15s ease;
}
.sidebar-cat > .conv-list:hover { border-left-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.conv-company-label { width: 100%; margin: 0 0 1px; }
.conv-group-label { margin: 3px 0 1px; width: 100%; padding: 6px 8px 6px 6px; }
.conv-company-items { padding-top: 2px; padding-bottom: 2px; }
.conv-group-items { padding-top: 1px; padding-bottom: 2px; }
.project-conv-list { padding-top: 1px; padding-bottom: 3px; }
/* Los chats no llevan sangría propia además de la del contenedor. */
.conv-group-items .conv-item,
.project-conv-list .conv-item { margin-left: 0; }
/* Cabecera de carpeta: caret + icono + nombre, como las categorías. */
.project-folder .project-item { padding-left: 4px; }
.project-caret { opacity: .75; }
/* Pista de sección vacía: ya cuelga de la guía de su categoría. */
.sidebar-cat .conv-list > .conv-empty { padding-left: 2px; }
/* Móvil: un poco más de aire por nivel para el pulgar. */
@media (max-width: 767px) { .sidebar { --tree-step: 12px; } }

/* ============================================================
   MOVIMIENTO, SCROLL Y ESTADOS (2026-09-16)
   Tokens de duración/curva, reduced-motion global, scrollbars
   unificadas, botones ocupados, barra de progreso al navegar,
   esqueleto y error de página, caja de error del chat, toasts.
   ============================================================ */
:root {
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-std: cubic-bezier(.4, 0, .2, 1);
  --scroll-thumb: rgba(15, 23, 42, .18); --scroll-thumb-hover: rgba(15, 23, 42, .34);
}
:root[data-theme="dark"] { --scroll-thumb: rgba(255, 255, 255, .16); --scroll-thumb-hover: rgba(255, 255, 255, .3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --scroll-thumb: rgba(255, 255, 255, .16); --scroll-thumb-hover: rgba(255, 255, 255, .3); }
}
/* Scrollbars: finas, sin pista, con el mismo tono en toda la app (Firefox + WebKit). */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
#messages, .panel-page, .sidebar-scroll, .conv-list { overscroll-behavior: contain; }
/* Reduced motion: todo lo decorativo se apaga; lo funcional (spinners) queda casi instantáneo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
/* Botón ocupado: el texto se atenúa y un anillo gira encima; el ancho no cambia. */
.is-busy { position: relative; pointer-events: none; color: transparent !important; }
.is-busy > * { visibility: hidden; }
.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  color: var(--text-inverse, #fff); animation: spin .7s linear infinite;
}
.btn-secondary.is-busy::after, .btn-ghost.is-busy::after, .sc-action.is-busy::after { color: var(--text-secondary); }
/* Barra de progreso indeterminada bajo el borde superior mientras se carga un área. */
body.nav-loading::before {
  content: ""; position: fixed; top: 0; left: 0; height: 2px; width: 40%; z-index: 100001;
  background: var(--accent); border-radius: 0 2px 2px 0;
  animation: navProgress 1.1s var(--ease-std) infinite;
}
@keyframes navProgress { 0% { left: -40%; width: 40%; } 60% { width: 55%; } 100% { left: 100%; width: 30%; } }
/* Esqueleto de página de área */
.panel-skeleton { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.panel-skeleton .panel-skel-intro { height: 72px; border-radius: var(--radius); margin-bottom: 8px; }
.panel-skeleton .panel-skel-row { height: 52px; border-radius: var(--radius); }
.panel-skeleton .skeleton + .skeleton { margin-top: 0; }
/* Página de error de área */
.panel-error {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  max-width: 460px; margin: 48px auto; padding: 28px 24px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px);
  animation: panelSlideIn var(--dur-3) var(--ease-out) both;
}
.panel-error-icon { color: var(--danger-text); }
.panel-error-msg { margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; }
.panel-error-actions { margin-top: 6px; }
/* Caja de error de una respuesta del chat */
.error-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 8px; padding: 12px 14px; color: var(--text);
  background: var(--status-danger-bg, rgba(220,38,38,.07)); border: 1px solid rgba(220,38,38,.22);
  border-left: 3px solid var(--danger); border-radius: var(--radius);
  animation: fadeUp var(--dur-3) var(--ease-out) both;
}
.error-box-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 240px; color: var(--danger-text); }
.error-box-main > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.error-box strong { display: block; margin: 0; font-size: 13.5px; color: var(--text); }
.error-box-msg { font-size: 12.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
.error-box-actions { flex: 0 0 auto; }
/* Toasts: icono, cierre, apilado, y en móvil abajo centrados */
#toastBox { top: 16px; right: 16px; left: auto; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px;
  border-radius: var(--radius); font-size: 13px; line-height: 1.35; color: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18); pointer-events: auto;
  opacity: 0; transform: translateY(-6px) scale(.98);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.toast.show { opacity: 1; transform: none; }
.toast-clickable { cursor: pointer; }
.toast-icon { flex: 0 0 auto; display: inline-flex; opacity: .95; }
.toast-msg { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.toast-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: rgba(255,255,255,.14); color: inherit; cursor: pointer; }
.toast-close:hover { background: rgba(255,255,255,.26); }
.toast-warning { background: #b45309; color: #fff; }
@media (max-width: 640px) {
  #toastBox { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; right: 16px; max-width: none; }
  .toast { transform: translateY(8px) scale(.98); }
}
/* Datos del gráfico: el bloque entra deslizando */
.structured-chart-data[open] > .structured-chart-data-body { animation: fadeUp var(--dur-2) var(--ease-out) both; }
/* Listas: cada fila entra escalonada (solo las 12 primeras, el resto ya está) */
.toplist-body > .toplist-item { animation: itemFadeIn var(--dur-3) var(--ease-out) both; }
.toplist-body > .toplist-item:nth-child(1) { animation-delay: 0ms; } .toplist-body > .toplist-item:nth-child(2) { animation-delay: 25ms; }
.toplist-body > .toplist-item:nth-child(3) { animation-delay: 50ms; } .toplist-body > .toplist-item:nth-child(4) { animation-delay: 75ms; }
.toplist-body > .toplist-item:nth-child(5) { animation-delay: 100ms; } .toplist-body > .toplist-item:nth-child(6) { animation-delay: 125ms; }
/* Foco por teclado coherente en toda la app */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   RESPONSIVE (barrido 2026-09-16: iPhone SE→15 Pro Max, Android,
   iPad 768/820/1024, portátiles 1280-1536, escritorio 1920)
   ============================================================ */
/* Tablet (768-1023): la tarjeta del briefing no podía partirse y su ancho mínimo
   estiraba el dashboard 60 px más allá de la columna → botones cortados. */
.dash-personal { min-width: 0; width: 100%; box-sizing: border-box; }
.dash-briefing-info { min-width: 0; }
.dash-header { flex-wrap: wrap; }
@media (max-width: 1023px) {
  .dash-briefing-card { flex-wrap: wrap; }
  .dash-briefing-actions { flex: 1 1 100%; justify-content: flex-end; }
}
/* Móvil: las pistas de teclado (Enter envía, Shift+Enter, Ctrl+M) no aplican a
   una pantalla táctil y empujaban el botón de enviar 3 px fuera del viewport. */
@media (max-width: 767px) {
  .composer-hint { display: none; }
  .composer-actions { gap: 8px; }
  /* Objetivos táctiles mínimos de 34 px en controles pequeños. */
  .deep-btn { min-height: 34px; padding: 6px 11px; }
  .usage-period { min-height: 34px; padding: 6px 12px; }
}
.panel-error-title { font-size: 15px; color: var(--text); }
@media (max-width: 767px) { .chat-id { min-height: 30px; padding: 6px 8px; display: inline-flex; align-items: center; } }


/* ============================================================
   BARRA DE KPIs COMPACTA POR EMPRESA (2026-09-16)
   Una fila por empresa: nombre a la izquierda, tarjetas en línea con scroll
   horizontal si no caben. Tarjeta: etiqueta arriba, cifra abajo con dato
   secundario y color por signo. Sustituye a la rejilla + título de grupo.
   ============================================================ */
.kpi-bar { padding: 5px 20px; }
/* align-items: stretch — la regla base del grid centra (align-items:center) y en móvil
   dejaba cada fila al ancho de su contenido, centrada y cortada por ambos lados. */
.kpi-bar .kpi-bar-grid { display: flex; flex-direction: column; align-items: stretch; gap: 4px; flex: 1 1 auto; min-width: 0; overflow: visible; }
.kpi-row { width: 100%; }
.kpi-row { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.kpi-row-head { flex: 0 0 132px; width: 132px; display: flex; align-items: center; min-width: 0; padding-right: 8px; border-right: 1px solid var(--border); }
.kpi-row-head span { font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-row-cards { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.kpi-row-cards::-webkit-scrollbar { display: none; }
.kpi-bar .kpi-card { flex: 1 1 0; min-width: 122px; max-width: 220px; padding: 4px 10px; gap: 6px; align-items: center; scroll-snap-align: start; }
.kpi-bar .kpi-card:hover { transform: none; box-shadow: none; }
.kpi-bar .kpi-data { flex: 1 1 auto; }
.kpi-bar .kpi-label { font-size: 10.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; order: 0; }
.kpi-bar .kpi-value { display: flex; align-items: baseline; gap: 5px; font-size: 14.5px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0; order: 1; }
/* La cifra principal nunca se corta; el dato secundario cede (y se elide) si no cabe. */
.kpi-bar .kpi-value .kpi-sub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 10px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.kpi-bar .kpi-card.is-neg .kpi-value { color: var(--danger-text, #b91c1c); }
.kpi-bar .kpi-card.is-pos .kpi-value { color: var(--status-success-text, #15803d); }
.kpi-bar .kpi-flag { flex: none; display: inline-flex; color: var(--status-warning-text, #92400e); }
.kpi-bar .kpi-card.has-warning { border-color: var(--status-warning-border, #fde68a); }
.kpi-bar .kpi-card.has-fixed-dates .kpi-flag { color: var(--text-muted); }
.kpi-bar .kpi-card.has-warning.has-fixed-dates { border-color: var(--border); }
.kpi-bar-notes .kpi-bar-note.is-fixed-dates svg { color: var(--text-muted); }
.kpi-bar-notes .kpi-bar-note:not(.is-fixed-dates) b { color: var(--status-warning-text); }
.kpi-bar-notes { font-size: 10.5px; }
@media (min-width: 1180px) { .kpi-row-head { flex-basis: 160px; width: 160px; } }
@media (max-width: 767px) {
  /* El carril antiguo hacía scroll horizontal del grid entero con snap: ahora
     desplaza cada fila por separado y el nombre de la empresa queda fijo. */
  .kpi-bar .kpi-bar-grid { flex: 1 0 100%; overflow: visible; scroll-snap-type: none; gap: 4px; }
  .kpi-row { gap: 6px; }
  .kpi-row-head { flex-basis: 92px; width: 92px; padding-right: 6px; }
  .kpi-bar .kpi-card { flex: 0 0 136px; min-width: 136px; }
  .kpi-bar-notes { flex: 1 0 100%; min-width: 0; }
  .kpi-bar-note { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ============================================================
   PANEL DE KPIs (2026-09-17)
   Página del sidebar con tarjetas: icono en pastilla, etiqueta, cifra grande,
   variación (chip verde/rojo según si subir es bueno), sparkline de 30 días,
   interruptor «Mini-KPI» (barra del chat) y «Preguntar». Una sección por
   empresa. Tokens de la app; en oscuro lo elevado es más claro.
   ============================================================ */
.kpp-updated { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.kpp-updated:empty { display: none; }
.kpp-company { margin-bottom: 22px; }
.kpp-company-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; min-width: 0; }
.kpp-company-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kpp-company-name strong { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpp-company-name small { font-size: 11px; color: var(--text-muted); }
.kpp-company-count { flex: none; font-size: 11px; font-weight: 600; color: var(--text-secondary); padding: 3px 9px; border-radius: 999px; background: var(--bg-hover); white-space: nowrap; }
.kpp-company-empty { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
.kpp-error { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--status-error-text); background: var(--status-error-bg); border: 1px solid var(--status-error-border); border-radius: var(--radius); padding: 10px 12px; }
.kpp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px; }

.kpp-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 8px 10px 8px; border-radius: var(--radius);
  background: var(--bg-elevated); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.kpp-card:hover { border-color: var(--border-strong); }
.kpp-card.is-mini { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
.kpp-card-head { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 24px; }
.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-text);
}
.kpp-card-label { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Asa de arrastre y botones de cabecera: discretos, visibles al pasar el ratón. */
.kpp-grip { flex: none; display: inline-flex; align-items: center; color: var(--text-muted); opacity: .35; cursor: grab; margin-left: -4px; }
.kpp-card:hover .kpp-grip, .kpp-widget:hover .kpp-grip { opacity: .9; }
.kpp-hbtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text-muted); cursor: pointer; opacity: .55; transition: opacity .12s, background .12s, color .12s;
}
.kpp-card:hover .kpp-hbtn, .kpp-widget:hover .kpp-hbtn, .kpp-hbtn:focus-visible { opacity: 1; }
.kpp-hbtn:hover { background: var(--bg-hover); color: var(--text); }
.kpp-hbtn[hidden] { display: none; }
.kpp-mini-btn.is-on { opacity: 1; color: var(--accent-text); background: var(--accent-soft); }
.kpp-mini-btn.is-on:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.kpp-card-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.kpp-card-sub { font-size: 11px; color: var(--text-muted); margin-top: -2px; }
.kpp-badge { flex: none; padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.kpp-card-value {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--text); font-variant-numeric: tabular-nums; cursor: pointer;
}
.kpp-card-value.is-neg { color: var(--danger-text); }
.kpp-card-value.is-pos { color: var(--status-success-text); }
.kpp-sub { font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.kpp-card-meta { display: inline-flex; align-items: center; gap: 5px; min-height: 0; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; min-width: 0; }
.kpp-delta {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--bg-hover); color: var(--text-secondary);
}
.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-delta svg { flex: none; }
.kpp-delta-ref { white-space: nowrap; }
.kpp-nohist { font-style: italic; }
.kpp-spark { height: 34px; margin: 2px -2px 0; }
.kpp-spark-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kpp-spark-line { fill: none; stroke: color-mix(in srgb, var(--text-muted) 70%, transparent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kpp-spark-area { fill: color-mix(in srgb, var(--accent) 9%, transparent); }
.kpp-spark-dot { fill: var(--accent); stroke: var(--bg-elevated); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.kpp-spark-svg.is-empty line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.kpp-warning { display: flex; align-items: flex-start; gap: 5px; margin: 0; font-size: 11px; line-height: 1.35; color: var(--status-warning-text); }
.kpp-warning svg { flex: none; margin-top: 1px; }

/* FECHAS FIJAS (2026-09-18): un KPI propio cuyo SQL guardado lleva fechas literales
   se ejecuta siempre con ese periodo. No es un error (el número sale), así que se
   marca en gris apagado con icono de calendario, distinto del ámbar de los avisos
   de dato: el ámbar pide mirar el número, esto pide rehacer el KPI. */
.kpp-warning.is-fixed-dates { color: var(--text-muted); }
.kpp-fixed-flag { flex: none; display: inline-flex; align-items: center; color: var(--text-muted); cursor: help; }
.kpp-card.has-fixed-dates:not(.has-warning) { border-color: var(--border); }
.kpp-fixed-note {
  display: flex; align-items: flex-start; gap: 7px; margin: 0 0 12px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-subtle, var(--bg)); color: var(--text-secondary);
  font-size: 11.5px; line-height: 1.45;
}
.kpp-fixed-note svg { flex: none; margin-top: 1px; color: var(--text-muted); }
.kpp-ask:hover { color: var(--accent-text); background: var(--accent-soft); }

/* Menú ⋯ de la tarjeta */
.kpp-menu {
  position: absolute; top: 40px; right: 10px; z-index: 5; min-width: 220px;
  padding: 6px; border-radius: var(--radius); background: var(--bg-elevated);
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
.kpp-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px;
  border: 0; border-radius: 7px; background: transparent; color: var(--text);
  font-size: 12.5px; text-align: left; cursor: pointer;
}
.kpp-menu-item:hover, .kpp-menu-item:focus-visible { background: var(--bg-hover); outline: none; }
.kpp-menu-item.is-danger { color: var(--danger-text); }
.kpp-menu-sep { height: 1px; margin: 4px 2px; background: var(--border); }
/* El menú se recuelga del <body> al abrirse: dentro de la tarjeta del lienzo
   lo recortaba el overflow y solo se veía la primera opción. En flotante manda
   el posicionamiento en píxeles que calcula _kppMenuEl. */
.kpp-menu.is-floating { position: fixed; right: auto; bottom: auto; z-index: 900; }
.kpp-sql { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-code); color: var(--text-secondary); font-size: 11.5px; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }
.kpp-foot-help { margin: 18px 0 0; font-size: 12px; color: var(--text-muted); }
.area-intro { position: relative; }
.kpp-intro-close { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kpp-intro-close:hover { background: var(--bg-hover); color: var(--text); }

/* Modales: elegir KPIs, editar, empresas */
.kpp-pick-help { margin-top: 0; }
.kpp-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 46vh; overflow: auto; padding: 2px; }
.kpp-pick { display: flex !important; align-items: center; gap: 9px; margin: 0 !important; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); cursor: pointer; font-weight: 400 !important; min-width: 0; }
.kpp-pick:hover { border-color: var(--border-strong); }
.kpp-pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.kpp-pick.is-present, .kpp-pick.is-full { opacity: .6; cursor: default; }
.kpp-pick input { flex: none; margin: 0; accent-color: var(--accent); width: 15px; height: 15px; }
.kpp-pick-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-text); }
.kpp-pick-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kpp-pick-body strong { font-size: 12.5px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpp-pick-body small { font-size: 10px; color: var(--accent-text); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.kpp-pick-tag { flex: none; font-size: 10px; color: var(--text-muted); }
.kpp-edit-mini { display: flex !important; align-items: center; gap: 10px; margin-top: 6px !important; font-weight: 400 !important; cursor: pointer; }
.kpp-edit-mini span { display: flex; flex-direction: column; font-size: 13px; color: var(--text); }
.kpp-edit-mini small { font-size: 11px; color: var(--text-muted); }
.kpp-companies-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }
.kpp-company-row { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); cursor: pointer; font-weight: 400 !important; }
.kpp-company-row:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.kpp-company-row-name { display: flex; flex-direction: column; min-width: 0; }
.kpp-company-row-name strong { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpp-company-row-name small { font-size: 11px; color: var(--text-muted); }

/* Tarjetas de GRÁFICO: ocupan dos columnas y llevan un lienzo Chart.js. */
.kpp-card.is-chart { grid-column: span 2; }
.kpp-chart-wrap { position: relative; height: 180px; margin: 0; }
.kpp-chart-wrap.is-donut { display: flex; align-items: center; gap: 12px; }
.kpp-donut-canvas { flex: 1 1 55%; min-width: 0; height: 100%; position: relative; }
.kpp-donut-legend { flex: 0 1 45%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; min-width: 0; max-height: 100%; overflow: auto; }
.kpp-donut-legend li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.kpp-donut-legend i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.kpp-donut-legend span { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; color: var(--text-secondary); }
.kpp-donut-legend b { flex: none; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.kpp-chart-canvas { display: block; width: 100% !important; height: 100% !important; }
.kpp-chart-meta { min-height: 0; }
.kpp-chart-headline { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpp-chart-note { font-size: 11px; color: var(--text-muted); }
.kpp-chart-empty { display: flex; align-items: center; justify-content: center; gap: 6px; height: 120px; border: 1px dashed var(--border); border-radius: var(--radius); font-size: 12px; color: var(--text-muted); padding: 0 12px; text-align: center; }

/* ===== COMPONENTES NUEVOS DEL PANEL (2026-09-18) =====
   Ranking en tabla, medidor semicircular y mapa coroplético de provincias. Todos
   se dibujan con CSS/SVG propio: ni Chart.js ni librerías de mapas. */
.kpp-rank { display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; overflow: auto; }
.kpp-rank-row { display: grid; grid-template-columns: 16px minmax(60px, 1.4fr) minmax(40px, 1fr) auto 48px;
  align-items: center; gap: 8px; padding: 2px 2px; font-size: 11.5px; border-radius: 5px; }
.kpp-rank-row.is-head .kpp-rank-bar { background: transparent; }
.kpp-rank-row:hover { background: var(--bg-hover); }
.kpp-rank-row.is-head { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom: 1px solid var(--border); border-radius: 0; padding-bottom: 4px; margin-bottom: 1px; position: sticky; top: 0; background: var(--bg-elevated); }
.kpp-rank-row.is-head:hover { background: var(--bg-elevated); }
.kpp-rank-row.is-head .kpp-rank-val, .kpp-rank-row.is-head .kpp-rank-pct { font-weight: 600; color: var(--text-muted); }
.kpp-rank-val.is-neg { color: var(--danger-text); }
.kpp-rank-pos { color: var(--text-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; text-align: right; }
.kpp-rank-name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; color: var(--text); }
.kpp-rank-bar { height: 6px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; }
.kpp-rank-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.kpp-rank-val { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpp-rank-pct { color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }

.kpp-gauge { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 0; gap: 2px; overflow: hidden; }
.kpp-gauge svg { width: auto; max-width: 100%; height: 100%; max-height: 118px; flex: 1 1 auto; min-height: 0; overflow: visible; }
.kpp-gauge-valtxt { font: 700 13px Inter, system-ui, sans-serif; fill: var(--text); letter-spacing: -0.02em; }
.kpp-gauge.is-ok .kpp-gauge-valtxt { fill: var(--status-success-text); }
.kpp-gauge.is-warn .kpp-gauge-valtxt { fill: var(--status-warning-text); }
.kpp-gauge.is-bad .kpp-gauge-valtxt { fill: var(--danger-text); }
.kpp-gauge-zone { fill: none; stroke-width: 9; stroke-linecap: butt; }
.kpp-gauge-zone.is-ok { stroke: color-mix(in srgb, var(--success) 22%, var(--bg-hover)); }
.kpp-gauge-zone.is-warn { stroke: color-mix(in srgb, var(--warning) 28%, var(--bg-hover)); }
.kpp-gauge-zone.is-bad { stroke: color-mix(in srgb, var(--danger) 22%, var(--bg-hover)); }
.kpp-gauge-fg { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.kpp-gauge-knob { fill: var(--bg-elevated); stroke: var(--accent); stroke-width: 2.2; }
.kpp-gauge-tick { font: 500 7px Inter, system-ui, sans-serif; fill: var(--text-muted); }
.kpp-gauge.is-ok  .kpp-gauge-fg, .kpp-gauge.is-ok .kpp-gauge-knob { stroke: var(--success); }
.kpp-gauge.is-warn .kpp-gauge-fg, .kpp-gauge.is-warn .kpp-gauge-knob { stroke: var(--warning); }
.kpp-gauge.is-bad .kpp-gauge-fg, .kpp-gauge.is-bad .kpp-gauge-knob { stroke: var(--danger); }
.kpp-gauge-val { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: -14px; line-height: 1.1; }
.kpp-gauge-zona { flex: none; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; background: var(--bg-hover); color: var(--text-secondary); }
.kpp-gauge.is-ok .kpp-gauge-val { color: var(--status-success-text); }
.kpp-gauge.is-ok .kpp-gauge-zona { background: var(--status-success-bg); color: var(--status-success-text); }
.kpp-gauge.is-warn .kpp-gauge-val { color: var(--status-warning-text); }
.kpp-gauge.is-warn .kpp-gauge-zona { background: var(--status-warning-bg); color: var(--status-warning-text); }
.kpp-gauge.is-bad .kpp-gauge-val { color: var(--danger-text); }
.kpp-gauge.is-bad .kpp-gauge-zona { background: var(--status-error-bg); color: var(--status-error-text); }

.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-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; }
[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; }
.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; }
/* Gráfico propio (creado desde el chat): mismo distintivo que una cifra propia. */
.kpp-card.is-chart.is-custom .kpp-card-icon { background: color-mix(in srgb, var(--accent) 22%, var(--accent-soft)); }
.kpp-chart-meta { flex-wrap: wrap; row-gap: 2px; }
.kpp-chart-desc { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kpp-badge.is-type { background: var(--bg-hover); color: var(--text-secondary); }
.kpp-type-select { flex: 0 1 auto; min-width: 66px; max-width: 130px; width: auto;
  min-height: 28px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-hover); color: var(--text-secondary); font: inherit; font-size: 10.5px;
  text-overflow: ellipsis; cursor: pointer; }
.kpp-type-select:not(:disabled) { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--accent-text); }
.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-type-select[aria-busy="true"] { cursor: progress; }
.kpp-type-select option { background: var(--bg); color: var(--text); }
.kpp-type-warning { color: var(--warning, #b45309); white-space: normal; }
.kpp-type-preview { position: fixed; left: -10000px; top: 0; visibility: hidden; pointer-events: none; }
.kpp-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.kpp-suggest-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); margin-right: 2px; }
.kpp-suggest-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; background: transparent; color: var(--accent-text); font-size: 11.5px; font-weight: 500; cursor: pointer; }
.kpp-suggest-chip:hover { background: var(--accent-soft); border-style: solid; }
.kpp-suggest-chip.is-busy { opacity: .6; pointer-events: none; }
.kpp-pick-group { margin: 12px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }

/* SELECTOR POR ÁREAS (2026-09-18). El catálogo tiene 21 indicadores: en lista
   plana no se elige, se hojea. Cada área es un bloque con su descripción, y la
   lista de cada bloque deja de tener scroll propio (el scroll es del diálogo:
   con varios bloques, uno por bloque era una ratonera). */
.kpp-pick-area { border-top: 1px solid var(--border); padding-top: 2px; }
.kpp-pick-area:first-of-type { border-top: 0; }
.kpp-pick-area .kpp-pick-group { display: flex; align-items: center; gap: 6px; text-transform: none; font-size: 12.5px; letter-spacing: 0; color: var(--text); }
.kpp-pick-area .kpp-pick-group svg { color: var(--text-muted); }
.kpp-pick-area .kpp-pick-group small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 11px; }
.kpp-pick-area .kpp-pick-list { max-height: none; overflow: visible; }
#kppPickWrap { max-height: 56vh; overflow: auto; padding-right: 4px; }
.kpp-pick-search { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); }
.kpp-pick-search svg { flex: none; color: var(--text-muted); }
.kpp-pick-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font-size: 13px; outline: none; }
.kpp-pick-none { margin: 18px 0; text-align: center; color: var(--text-muted); font-size: 12.5px; }
.kpp-pick-sel { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 6px 10px;
  border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); font-size: 11.5px; font-weight: 600; }

/* Cabecera del menú «Añadir» y contador de mini-KPIs de la barra del panel. */
.kpp-menu-label { margin: 6px 10px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.kpp-menu-item small { margin-left: auto; padding-left: 8px; color: var(--text-muted); font-size: 11px; font-weight: 600; }
.kpp-mini-count { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px;
  background: var(--bg-hover); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; cursor: help; }
.kpp-mini-count svg { color: var(--accent-text); }
.kpp-pick.is-chart .kpp-pick-body small { color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- LIENZO LIBRE (2026-09-17): páginas + tarjetas posicionadas en rejilla de 12 col ---- */
.toplist-panel[data-area="kpis"] { max-width: none; padding-left: 4px; padding-right: 4px; }
body.kpp-open .kpi-bar { display: none; }
.kpp-tabs { display: flex; align-items: center; gap: 4px; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.kpp-tabs::-webkit-scrollbar { display: none; }
.kpp-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.kpp-tab small { font-size: 10.5px; font-weight: 600; color: var(--text-muted); padding: 1px 6px; border-radius: 999px; background: var(--bg-hover); }
.kpp-tab:hover { background: var(--bg-hover); color: var(--text); }
.kpp-tab.is-active { background: var(--accent-soft); color: var(--accent-text); }
.kpp-tab.is-active small { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); }
.kpp-tab-add, .kpp-tab-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; flex: none; }
.kpp-tab-add:hover, .kpp-tab-menu-btn:hover { background: var(--bg-hover); color: var(--text); }
.kpp-tabs-spacer { flex: 1; }
.kpp-tabs { position: relative; }
.kpp-menu.is-page { top: 36px; right: 0; }
.kpp-canvas { position: relative; min-height: 200px; border-radius: var(--radius-lg); }
.kpp-tile { position: absolute; box-sizing: border-box; transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease; }
.kpp-tile .kpp-card { height: 100%; box-sizing: border-box; overflow: hidden; }
.kpp-tile .kpp-chart-wrap { flex: 1; min-height: 70px; height: auto; }
.kpp-tile .kpp-spark { flex: 1; min-height: 22px; }
.kpp-tile.is-short .kpp-spark, .kpp-tile.is-short .kpp-warning, .kpp-tile.is-short .kpp-card-sub { display: none; }
.kpp-tile .kpp-warning { flex: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kpp-tile .kpp-warning span { display: inline; }
.kpp-tile .kpp-card-foot { flex: none; margin-top: auto; }
.kpp-tile .kpp-card-value { flex: none; }
.kpp-tile.is-dragging { transition: none; z-index: 20; }
.kpp-tile.is-dragging .kpp-card { box-shadow: var(--shadow-md); opacity: .95; }
.kpp-ghost { position: absolute; z-index: 1; border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: var(--radius-lg); pointer-events: none; }
.kpp-ghost[hidden] { display: none; }
.kpp-resize { position: absolute; right: 4px; bottom: 4px; width: 14px; height: 14px; cursor: nwse-resize; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); border-radius: 0 0 4px 0; opacity: 0; z-index: 3; transition: opacity .12s; }
.kpp-tile:hover .kpp-resize { opacity: .7; }
.kpp-card-head { cursor: grab; }
.kpp-tile.is-dragging .kpp-card-head, .kpp-tile.is-dragging .kpp-widget { cursor: grabbing; }
/* Elementos libres: título, texto, separador */
.kpp-widget { position: relative; display: flex; align-items: center; gap: 6px; height: 100%; box-sizing: border-box; padding: 0 6px; cursor: grab; border-radius: var(--radius-sm); }
.kpp-widget:hover { background: color-mix(in srgb, var(--text-muted) 7%, transparent); }
.kpp-widget .kpp-grip { position: static; }
.kpp-widget-title, .kpp-widget-text { flex: 1; min-width: 0; margin: 0; color: var(--text); overflow: hidden; }
.kpp-widget-title { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; }
.kpp-widget-title.is-sm { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.kpp-widget-title.is-lg { font-size: 20px; }
.kpp-widget-text { font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); white-space: pre-wrap; align-self: flex-start; padding-top: 6px; }
.kpp-widget-text.is-sm { font-size: 11px; }
.kpp-widget-text.is-lg { font-size: 14.5px; }
.is-center { text-align: center; }
.is-right { text-align: right; }
.kpp-widget-hr { flex: 1; margin: 0; border: 0; border-top: 1px solid var(--border-strong); }
.kpp-widget .kpp-hbtn { opacity: 0; }
.kpp-widget:hover .kpp-hbtn { opacity: 1; }
.kpp-add-wrap { position: relative; display: inline-flex; }
.kpp-menu.is-add { top: 34px; right: 0; left: auto; }
.kpp-field-row { display: flex; gap: 10px; }
.kpp-field-row .kpp-field { flex: 1; }
.kpp-co { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; max-width: 100%; margin: -2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.kpp-co svg { flex: none; opacity: .8; }
.kpp-page-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--text-muted); font-size: 13px; gap: 6px; padding: 24px; }
.kpp-page-empty .toplist-empty-title { margin: 0; font-weight: 600; color: var(--text); }
.kpp-page-empty p { margin: 0; }
/* Móvil: apiladas, sin posiciones ni edición. */
.kpp-canvas.is-stack { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.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-tile .kpp-chart-wrap { height: 170px; flex: none; }
.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-canvas.is-stack .kpp-tile .kpp-rank { max-height: 320px; }
.kpp-canvas.is-stack .kpp-tile .kpp-spark { flex: none; height: 38px; }
.kpp-canvas.is-stack .kpp-page-empty { position: static; }
.kpp-canvas.is-stack .kpp-resize, .kpp-canvas.is-stack .kpp-ghost, .kpp-canvas.is-stack .kpp-grip { display: none !important; }
.kpp-canvas.is-stack .kpp-card-head, .kpp-canvas.is-stack .kpp-widget { cursor: default; }
.kpp-canvas.is-stack .kpp-tile.is-widget { height: auto !important; }
.kpp-field { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--text); }
.kpp-field input, .kpp-field textarea, .kpp-field select { display: block; width: 100%; margin-top: 5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text); font: inherit; font-weight: 400; box-sizing: border-box; }
.kpp-field textarea { resize: vertical; min-height: 72px; }
.kpp-field input:focus, .kpp-field textarea:focus, .kpp-field select:focus { outline: none; border-color: var(--accent); }
.kpp-field .help { margin-top: 5px; font-weight: 400; }
@media (max-width: 767px) {
  .kpp-btn-text { display: none; }
  .kpp-updated { display: none; }
  .kpp-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .kpp-card { padding: 12px 12px 8px; }
  .kpp-card-value { font-size: 22px; }
  .kpp-company-head { flex-wrap: wrap; }
  .kpp-company-count { order: 3; }
  .kpp-pick-list { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .kpp-grid { grid-template-columns: 1fr; }
  .kpp-card.is-chart { grid-column: span 1; }
  .kpp-chart-wrap { height: 170px; }
}
@media (prefers-reduced-motion: reduce) { .kpp-card { transition: none; } }

/* ===== PERMISOS DE SAGE EN EL PANEL DE USUARIOS (2026-09-21) =====
   Dos ejes: operaciones (qué puede hacer) y área de acceso (a qué datos llega).
   Reutilizan `.mod-toggle` para que la ficha se lea como una sola cosa. */
.user-write-perms + .user-write-perms { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.perm-scope-switch { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.perm-scope-switch input { flex: none; }
.perm-scope-switch:has(input:checked) { color: var(--text); font-weight: 500; }
.perm-scope-switch input:disabled { cursor: not-allowed; }
.perm-scope-switch:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.perm-scope-grid[hidden] { display: none; }
.perm-scope-grid { margin-bottom: 4px; }
/* Código de empresa: en Sage hay nombres repetidos (la 1 y la 10000 se llaman
   igual), así que sin el código el administrador marcaría a ciegas. */
.perm-emp-code { opacity: .55; font-variant-numeric: tabular-nums; font-size: 10.5px; }
/* El interruptor marcado tiene que LEERSE como marcado, no solo por el borde. */
.mod-toggle:has(input:checked) { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.mod-toggle:has(input:checked) .mod-toggle-label { color: var(--text); font-weight: 500; }
/* Nota del canal: es una norma del sistema, no un permiso que se pueda tocar. */
.perm-channel-note { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--bg-hover); color: var(--text-secondary); }
.perm-channel-note svg { flex: none; margin-top: 1px; }

/* Gestión de usuarios: directorio y un único editor de acceso compartido por altas y cambios. */
.ua-page { max-width: 1480px; margin: 0 auto; width: 100%; }
.ua-new-button { margin-left: auto; flex-shrink: 0; }
.ua-intro { margin: 0 0 22px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; max-width: 850px; }
.ua-workspace { display: grid; grid-template-columns: 290px minmax(0, 1fr); align-items: start; gap: 26px; }
.ua-directory { position: sticky; top: 16px; min-width: 0; }
.ua-directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.ua-directory-heading h3 { margin: 0; font-size: 15px; }
.ua-directory-heading h3 span { margin-left: 6px; color: var(--text-muted); font-size: 12px; font-weight: 400; }
#userPendingCount { color: var(--status-warning-text); font-size: 11px; }
.ua-search, .ua-company-search { display: grid; gap: 6px; color: var(--text-secondary); font-size: 12px; margin-bottom: 12px; }
.ua-page input[type="search"], .ua-page select { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background-color: var(--bg-elevated); color: var(--text); font: inherit; }
.ua-page input:focus-visible, .ua-page select:focus-visible, .ua-page button:focus-visible, .ua-page summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:root[data-theme="dark"] .ua-page select { color-scheme: dark; }
.ua-directory-list { display: grid; gap: 6px; max-height: 58vh; overflow-y: auto; padding: 3px; margin: 0 -3px; }
.ua-user { display: flex; width: 100%; align-items: center; gap: 10px; padding: 13px 11px; border: 1px solid transparent; border-radius: var(--radius); text-align: left; color: var(--text); background: transparent; cursor: pointer; font: inherit; }
.ua-user:hover { background: var(--bg-hover); }
.ua-user.is-selected { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--accent-soft); }
.ua-user > svg { flex-shrink: 0; color: var(--text-muted); margin-left: auto; }
.ua-user-identity { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ua-user-identity > strong { font-size: 13px; overflow-wrap: anywhere; }
.ua-user-identity > small { color: var(--text-muted); font-size: 11px; overflow-wrap: anywhere; }
.ua-user-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-secondary); }
.ua-dirty-dot { color: var(--status-warning-text); }
.ua-dirty-dot::before { content: "●"; font-size: 8px; margin-right: 4px; }
.ua-directory-note { padding: 14px 3px 0; border-top: 1px solid var(--border); margin-top: 15px !important; }
.ua-editor { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); }
.ua-editor-heading { padding: 25px 26px 18px; border-bottom: 1px solid var(--border); }
.ua-eyebrow { color: var(--text-muted); font-size: 10px; font-weight: 650; letter-spacing: 1.1px; }
.ua-editor-heading h3 { font-size: 23px; font-weight: 600; margin: 6px 0; overflow-wrap: anywhere; letter-spacing: -.4px; }
.ua-editor-heading h3:focus { outline: none; }
.ua-editor-heading p { margin: 0; color: var(--text-secondary); font-size: 13px; overflow-wrap: anywhere; }
.ua-editor-fields { border: 0; padding: 22px 26px; margin: 0; min-width: 0; }
.ua-page .ua-role-block { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 20px; }
.ua-role-block label { font-size: 12px; }
.ua-help { font-size: 12px; line-height: 1.65; color: var(--text-secondary); margin: 0; }
.ua-account-fields { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.ua-notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--bg-hover); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text-secondary); font-size: 12px; line-height: 1.6; margin: 0 0 18px; }
.ua-notice.is-warning, .ua-inline-warning, .ua-scope-result.is-warning { color: var(--status-warning-text); background: var(--status-warning-bg); }
.ua-editor-error { margin: 18px 26px 0; }
.ua-access-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 15px 0; margin-bottom: 22px; border-block: 1px solid var(--border); }
.ua-access-overview > div { min-width: 0; padding: 0 14px; border-left: 1px solid var(--border); }
.ua-access-overview > div:first-child { padding-left: 0; border-left: 0; }
.ua-access-overview span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 5px; }
.ua-access-overview strong { display: block; font-size: 12px; color: var(--text); font-weight: 550; line-height: 1.6; overflow-wrap: anywhere; }
.ua-permission-group { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; overflow: clip; }
.ua-permission-group > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 15px 16px; list-style: none; color: var(--text); }
.ua-permission-group > summary::-webkit-details-marker { display: none; }
.ua-permission-group > summary::after { content: ""; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); width: 6px; height: 6px; transform: rotate(45deg); margin-left: auto; flex-shrink: 0; }
.ua-permission-group[open] > summary::after { transform: rotate(225deg); }
.ua-permission-group > summary:hover { background: var(--bg-hover); }
.ua-step { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-muted); font-size: 12px; }
.ua-permission-group summary strong { display: block; font-weight: 600; font-size: 13px; line-height: 1.4; }
.ua-permission-group summary small { display: block; color: var(--text-muted); font-size: 11px; margin-top: 3px; }
.ua-group-count { margin-left: auto; font-size: 11px; white-space: nowrap; color: var(--text-muted); }
.ua-group-body { padding: 0 16px 16px; }
.ua-group-body > .ua-help { margin: 0 0 14px; }
.ua-permission-list { display: grid; }
.ua-permission-row { display: flex; align-items: center; gap: 11px; padding: 13px 0; border-top: 1px solid var(--border); cursor: pointer; }
.ua-permission-row input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--accent); margin: 0; cursor: inherit; }
.ua-permission-icon { color: var(--text-muted); display: flex; flex-shrink: 0; }
.ua-permission-copy { display: grid; gap: 4px; flex: 1; min-width: 0; }
.ua-permission-copy strong { font-size: 12px; line-height: 1.5; font-weight: 550; color: var(--text); }
.ua-permission-copy > span { font-size: 11px; line-height: 1.6; color: var(--text-secondary); }
.ua-permission-copy small { font-size: 10px; line-height: 1.5; color: var(--status-warning-text); }
.ua-permission-state { font-size: 10px; white-space: nowrap; padding: 3px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); }
.ua-permission-row.is-allowed .ua-permission-state { color: var(--accent-text); background: var(--accent-soft); border-color: transparent; }
.ua-permission-row:has(input:disabled) { cursor: default; }
.ua-permission-row:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ua-channel-note { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; line-height: 1.6; color: var(--text-muted); margin: 12px 0 0; }
.ua-channel-note svg { flex-shrink: 0; margin-top: 2px; }
.ua-scope { min-width: 0; margin: 16px 0 0; border: 0; padding: 0; }
.ua-scope + .ua-scope { padding-top: 16px; border-top: 1px solid var(--border); }
.ua-scope legend { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; padding: 0 0 10px; color: var(--text); }
.ua-scope-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ua-scope-option { display: flex; align-items: flex-start; gap: 7px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.ua-scope-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.ua-scope-option:has(input:disabled) { cursor: default; }
.ua-scope-option input { accent-color: var(--accent); margin: 2px 0 0; flex-shrink: 0; width: 14px; height: 14px; }
.ua-scope-option strong { display: block; font-size: 11px; font-weight: 550; line-height: 1.5; color: var(--text); }
.ua-scope-option small { display: block; font-size: 10px; line-height: 1.5; color: var(--text-secondary); margin-top: 3px; }
.ua-scope-items { margin-top: 12px; max-height: 360px; overflow-y: auto; padding: 3px; }
.ua-scope-result { font-size: 11px; line-height: 1.6; margin: 10px 0 0; padding: 7px 10px; border-radius: 5px; color: var(--text-secondary); background: var(--bg-hover); overflow-wrap: anywhere; }
.ua-account-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 10px; }
.ua-account-actions > span { margin-right: auto; color: var(--text-muted); font-size: 11px; }
.ua-account-actions .ua-delete { color: var(--danger); }
/* El pie sigue el flujo del formulario, también al editar o crear usuarios. */
.ua-save-bar { position: static; background: var(--bg-elevated); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 15px 26px; }
.ua-change-summary { font-size: 12px; color: var(--text-secondary); line-height: 1.65; max-height: 180px; overflow-y: auto; overflow-wrap: anywhere; }
.ua-change-summary > strong { color: var(--text); font-size: 12px; font-weight: 600; }
.ua-change-summary p { margin: 3px 0 0; }
.ua-change-summary ul { padding-left: 18px; margin: 6px 0; }
.ua-change-summary .ua-inline-warning { padding: 6px 9px; margin-top: 7px; border-radius: 4px; }
.ua-save-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.ua-save-actions button { min-height: 38px; }
.ua-page button:disabled { cursor: default; opacity: .55; }
.ua-empty { padding: 22px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.ua-page [hidden] { display: none !important; }
@media (max-width: 1100px) {
  .ua-workspace { grid-template-columns: 245px minmax(0, 1fr); gap: 18px; }
  .ua-editor-heading, .ua-editor-fields, .ua-save-bar { padding-left: 18px; padding-right: 18px; }
  .ua-scope-modes { grid-template-columns: minmax(0, 1fr); }
  .ua-scope-option { align-items: center; }
  .ua-scope-option > span { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; }
}
@media (max-width: 800px) {
  .ua-workspace { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ua-directory { position: static; }
  .ua-directory-list { max-height: 240px; }
  .ua-directory-note { display: none; }
  .ua-intro { margin-bottom: 18px; font-size: 13px; }
  .ua-editor { scroll-margin-top: 15px; }
  .ua-page .ua-role-block { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ua-editor-heading h3 { font-size: 20px; }
  .ua-editor-heading, .ua-editor-fields, .ua-save-bar { padding-left: 14px; padding-right: 14px; }
  .ua-permission-group > summary { padding: 13px 11px; gap: 8px; }
  .ua-group-body { padding: 0 11px 12px; }
  .ua-permission-icon { display: none; }
  .ua-permission-row { gap: 9px; flex-wrap: wrap; }
  .ua-permission-copy { flex-basis: calc(100% - 30px); }
  .ua-permission-state { margin-left: 26px; }
  .ua-access-overview { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ua-access-overview > div { padding: 0; border-left: 0; }
  .ua-access-overview span { margin-bottom: 2px; }
  .ua-save-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ua-save-actions button { min-width: 0; padding: 9px; white-space: normal; min-height: 44px; }
  .ua-change-summary { max-height: 130px; }
  .ua-account-actions > span { flex-basis: 100%; }
  .ua-editor input[type="email"], .ua-editor input[type="text"], .ua-editor input[type="password"], .ua-page input[type="search"], .ua-page select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ua-page *, .ua-page *::before, .ua-page *::after { scroll-behavior: auto !important; transition: none !important; }
}
body.panel-focus .panel-page-body.ua-page { max-width: 1480px; padding-bottom: 0; }
@media (max-width: 800px) {
  body.panel-focus .panel-page-body.ua-page { padding-inline: 12px; }
}

/* Herramientas: un permiso operativo y, debajo, sus opciones de navegación. */
.ua-tool-section h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.ua-tool-section + .ua-tool-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.ua-tool-section > .ua-help { margin-bottom: 12px; }
.ua-menu-options { margin-top: 5px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.ua-menu-options > summary { padding: 12px 0; cursor: pointer; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.ua-menu-options > summary span { margin-left: 8px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ua-menu-options > .ua-help { margin: 0 0 12px; }

/* Datos reutilizables de KPI: comparación de todas las series en tabla. */
.kpp-data-table { flex: 1; min-height: 70px; overflow: auto; }
.kpp-data-table table { width: 100%; border-collapse: collapse; font-size: 11px; }
.kpp-data-table th, .kpp-data-table td { padding: 7px 9px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.kpp-data-table th:first-child { text-align: left; white-space: normal; min-width: 90px; }
.kpp-data-table thead th { position: sticky; top: 0; background: var(--bg-elevated); color: var(--text-secondary); z-index: 1; }
.kpp-data-table tbody th { font-weight: 500; }
.kpp-type-reason { white-space: normal; line-height: 1.4; }
.kpp-type-preview > .kpp-card { height: 100%; box-sizing: border-box; }
.kpp-type-preview .kpp-chart-wrap { flex: 1; min-height: 70px; height: auto; }
.kpp-canvas.is-stack .kpp-data-table { max-height: 260px; }

/* UI audit: readable state feedback and document navigation. */
.kpp-load-state { flex: 1; min-height: 26px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 8px 12px; color: var(--text-secondary); font-size: 12px; }
.kpp-load-line { display: block; width: min(65%, 190px); height: 8px; border-radius: 4px; background: var(--border); }
.kpp-load-state.is-error { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.kpp-load-state .kpp-retry { min-height: 32px; }
.kpp-card-loading.is-chart { min-height: 0; }
.kpp-canvas.is-stack .kpp-card-loading.is-chart { min-height: 260px; }
#kppUpdatedAt { display: flex; align-items: center; min-height: 2.8em; max-width: 340px; white-space: normal; line-height: 1.4; }
@media (max-width: 767px) {
  #kppUpdatedAt { order: 2; flex-basis: 100%; max-width: none; }
}
.kpp-tab { overflow-wrap: anywhere; }
.docs-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;flex-shrink:0;font-size:12px}
.docs-pagination button{min-height:40px}
.activity-search input{min-width:0}
.dash-list-title,.panel-page-title,.gd-head h2{overflow-wrap:anywhere;min-width:0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============================================================
   KPIs: ELEGIR EMPRESA AL ENTRAR (2026-09-30)
   Sin empresa activa el panel suma todas y no deja montar páginas:
   se propone cuál activar con un clic. Misma piel que .area-intro,
   con el borde en acento porque es un paso pendiente, no ayuda.
   ============================================================ */
.kpp-pick {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; margin: 0 0 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: var(--radius);
  background: var(--bg-elevated);
}
.kpp-pick-icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
}
.kpp-pick-body { flex: 1; min-width: 0; }
.kpp-pick-title { margin: 0 0 3px; font-size: 14px; font-weight: 600; }
.kpp-pick-text { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.kpp-pick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kpp-pick-actions .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpp-pick .kpp-pick-actions .btn .kpp-pick-hint { display: inline; color: inherit; font-size: 11px; opacity: .85; font-weight: 500; margin-left: 6px; }
@media (max-width: 767px) {
  .kpp-pick { gap: 12px; padding: 12px; }
  .kpp-pick-actions .btn { flex: 1 1 100%; }
}

/* Lectura por voz de las respuestas (de OdooMind) */
.msg-listen { display: flex; margin-top: 2px; }
.msg-listen .msg-action-btn.speaking { color: var(--accent-text); }

/* Novedades del producto (de OdooMind) */
.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);
  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-sub { font-size: 12.8px; color: var(--text-muted, #6b6b6b); margin: -6px 0 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; }

/* ── Pulso diario (de OdooMind) ── */
.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; }

/* Regenerar / editar el último mensaje (de OdooMind) */
.msg-edit-area {
  width: 100%; min-width: 260px; resize: vertical; padding: 8px 10px; box-sizing: border-box;
  font: inherit; font-size: 14px; border: 1px solid var(--accent); border-radius: 8px;
  background: var(--bg); color: var(--text);
}
.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;
}
.msg-listen { gap: 2px; }

/* Agentes v2 (de OdooMind): nivel, historial y pausa global */
.agent-level-chip { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 6px; letter-spacing: .3px;
  background: var(--bg-hover, #f1f5f9); color: var(--text-muted, #475569); vertical-align: middle; }
.agent-runs { display: flex; flex-direction: column; gap: 10px; max-height: 65vh; overflow: auto; }
.agent-run { border: 1px solid var(--border); 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); margin-top: 4px; }
.agent-run-summary { font-size: 13px; margin-top: 6px; white-space: pre-line; max-height: 7.5em; overflow: hidden; }
.agents-paused-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--text); font-size: 13px; }
.agents-paused-note svg { color: var(--warning); flex-shrink: 0; }
.agent-run-head b { font-size: 13px; }
.agent-run-meta { font-size: 12px; color: var(--text-muted); }
.agent-level-help { font-size: 12.5px; margin: -4px 0 8px; }

/* Outlook / Microsoft 365 en Configuración → Correo (de OdooMind) */
.mso-box { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.mso-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mso-status { flex: 1; min-width: 200px; margin: 0; }
.mso-device { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 6%, transparent); }
.mso-steps { font-size: 13px; margin-bottom: 6px; }
.mso-code { font-size: 22px; letter-spacing: 3px; padding: 6px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }

/* Buzón de pedidos por correo (de OdooMind) */
.buzon-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); font-size: 12px; }
.buzon-selection label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.buzon-selection input,.buzon-row-check,.buzon-batch-check { accent-color: var(--accent); }
.buzon-selection #buzonSelectionCount { color: var(--text-muted); margin-right: auto; }
.buzon-list-row { cursor: default; }
.buzon-list-row .buzon-row-check { flex: none; width: 17px; height: 17px; margin: 0 1px; cursor: pointer; }
.buzon-row-open { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.buzon-row-open .toplist-item-body { display: block; }
.buzon-row-open .toplist-item-name,.buzon-row-open .toplist-item-meta { display: flex; }
.buzon-row-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.toplist-panel[data-area="buzon"] .toplist-body { gap: 8px; }
.toplist-panel[data-area="buzon"] .area-chips { margin-bottom: 4px; }
.buzon-list-heading { display: flex; align-items: end; justify-content: space-between; margin: 6px 0 4px; }
.modal.modal-wide:has(.buzon-voice-entry) { width: min(860px, 94vw); max-width: min(860px, 94vw); max-height: 94dvh; }
.buzon-voice-entry { display: grid; gap: 18px; }
.buzon-voice-entry [hidden] { display: none !important; }
.buzon-voice-entry p { margin: 0; }
.buzon-voice-eyebrow { color: var(--text-muted); font-size: 10px; font-weight: 750; letter-spacing: .11em; line-height: 1.4; }
.buzon-voice-intro { display: grid; gap: 5px; }
.buzon-voice-intro p { color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.buzon-voice-session { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 15px 18px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 16px; background: linear-gradient(105deg, var(--accent-soft), var(--bg-elevated) 72%); }
.buzon-voice-progress { width: 100%; height: 8px; margin-top: -10px; accent-color: var(--accent); }
.buzon-voice-session > div { display: grid; gap: 2px; }
.buzon-voice-session strong { color: var(--text); font-size: 16px; line-height: 1.35; }
.buzon-voice-phase { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: var(--bg-elevated); color: var(--text-secondary); font-size: 12px; font-weight: 650; white-space: nowrap; }
.buzon-voice-phase i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.buzon-voice-phase[data-phase="listening"], .buzon-voice-phase[data-phase="recording"] { color: var(--accent-text); background: var(--accent-soft); }
.buzon-voice-phase[data-phase="listening"] i, .buzon-voice-phase[data-phase="recording"] i { background: var(--accent); animation: buzonVoicePulse 1.35s ease-in-out infinite; }
.buzon-voice-phase[data-phase="saving"] { color: var(--status-warning-text); background: var(--status-warning-bg); }
.buzon-voice-phase[data-phase="saving"] i { background: var(--warning); animation: buzonVoicePulse 1.35s ease-in-out infinite; }
.buzon-voice-phase[data-phase="reconnecting"] { color: var(--status-warning-text); background: var(--status-warning-bg); }
.buzon-voice-phase[data-phase="reconnecting"] i { background: var(--warning); animation: buzonVoicePulse 1.35s ease-in-out infinite; }
.buzon-voice-phase[data-phase="error"] { color: var(--status-error-text); background: var(--status-error-bg); }
.buzon-voice-phase[data-phase="error"] i { background: var(--danger); }
@keyframes buzonVoicePulse { 50% { opacity: .35; transform: scale(.75); } }
.buzon-voice-active, .buzon-voice-history { border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
.buzon-voice-active { display: grid; gap: 16px; padding: 20px; }
.buzon-voice-active-head { display: flex; align-items: center; gap: 12px; }
.buzon-voice-number, .buzon-voice-queue-number { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-text); font-size: 18px; font-weight: 760; font-variant-numeric: tabular-nums; }
.buzon-voice-active-head h4, .buzon-voice-history-head h4 { margin: 1px 0 0; font-size: 18px; line-height: 1.2; }
.buzon-voice-saving { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.buzon-voice-state { padding: 10px 12px; border-radius: 10px; background: var(--bg); color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.buzon-voice-feedback { padding: 10px 12px; border: 1px solid var(--status-warning-border); border-radius: 10px; background: var(--status-warning-bg); color: var(--status-warning-text); font-size: 13px; font-weight: 600; }
.buzon-voice-feedback[data-kind="success"] { border-color: var(--status-success-border); background: var(--status-success-bg); color: var(--status-success-text); }
.buzon-voice-feedback[data-kind="error"] { border-color: var(--status-error-border); background: var(--status-error-bg); color: var(--status-error-text); }
.buzon-voice-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.buzon-voice-fields label, .buzon-voice-controls label, .buzon-voice-transcript { display: grid; gap: 6px; color: var(--text-secondary); font-size: 12px; font-weight: 650; }
.buzon-voice-entry input, .buzon-voice-entry select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-input); color: var(--text); font-size: 13px; }
.buzon-voice-entry input:focus, .buzon-voice-entry select:focus, .buzon-voice-entry textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.buzon-voice-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.buzon-voice-controls #buzonVoiceRecord, .buzon-voice-controls #buzonVoicePause { min-height: 40px; }
.buzon-voice-controls > span { color: var(--text-muted); font-size: 12px; }
.buzon-voice-controls label { flex: 1 1 220px; }
.buzon-voice-audio-notice { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--status-success-border); border-radius: 10px; background: var(--status-success-bg); color: var(--status-success-text); font-size: 12px; font-weight: 600; }
.buzon-voice-audio-notice span { display: inline-flex; align-items: center; gap: 7px; }
.buzon-voice-audio-notice button { padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.buzon-voice-transcript > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.buzon-voice-transcript small { color: var(--text-muted); font-size: 11px; font-weight: 500; }
.buzon-voice-entry textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-input); color: var(--text); font: inherit; font-size: 13px; line-height: 1.55; resize: vertical; }
.buzon-voice-commands { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); }
.buzon-voice-command { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-elevated); }
.buzon-voice-command b { color: var(--accent-text); font-size: 13px; white-space: nowrap; }
.buzon-voice-command span { color: var(--text-secondary); font-size: 12px; }
.buzon-voice-commands small { color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.buzon-voice-history { overflow: hidden; }
.buzon-voice-history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--border); }
.buzon-voice-history-head > span { padding: 5px 9px; border-radius: 999px; background: var(--bg); color: var(--text-secondary); font-size: 12px; font-weight: 650; white-space: nowrap; }
.buzon-voice-queue { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; max-height: 360px; overflow-y: auto; }
.buzon-voice-queue-item { display: flex; align-items: flex-start; gap: 13px; padding: 15px 20px; animation: buzonVoiceAppear .22s ease-out; }
.buzon-voice-queue-item + .buzon-voice-queue-item { border-top: 1px solid var(--border); }
.buzon-voice-queue-number { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.buzon-voice-queue-content { min-width: 0; flex: 1; }
.buzon-voice-queue-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 10px; }
.buzon-voice-queue-head strong { font-size: 13px; }
.buzon-voice-queue-head span { color: var(--status-success-text); font-size: 11px; font-weight: 650; }
.buzon-voice-queue-item[data-state="saving"] .buzon-voice-queue-head span,
.buzon-voice-queue-item[data-state="queued"] .buzon-voice-queue-head span { color: var(--status-warning-text); }
.buzon-voice-queue-item[data-state="error"] .buzon-voice-queue-head span { color: var(--status-error-text); }
.buzon-voice-queue-content > p, .buzon-voice-queue-content details p { margin: 5px 0 4px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.buzon-voice-queue-content small { color: var(--text-muted); font-size: 11px; }
.buzon-voice-queue-content details { margin: 4px 0; font-size: 12px; }
.buzon-voice-queue-content summary { color: var(--accent-text); cursor: pointer; }
.buzon-voice-tail { display: grid; gap: 3px; margin-top: 9px; padding: 9px 10px; border: 1px solid var(--status-warning-border); border-radius: 10px; background: var(--status-warning-bg); color: var(--status-warning-text); font-size: 12px; overflow-wrap: anywhere; }
.buzon-voice-tail > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.buzon-voice-retry { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 9px; padding: 9px 10px; border-radius: 10px; background: var(--status-error-bg); color: var(--status-error-text); font-size: 12px; }
.buzon-voice-retry label { display: grid; flex: 1 1 100%; gap: 5px; font-weight: 600; }
.buzon-voice-retry textarea { min-height: 70px; background: var(--bg-elevated); }
.buzon-voice-empty { padding: 26px 20px; color: var(--text-muted); font-size: 13px; text-align: center; }
@keyframes buzonVoiceAppear { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .modal.modal-wide:has(.buzon-voice-entry) { width: 100%; max-width: 100%; }
  .buzon-voice-entry { gap: 13px; }
  .buzon-voice-active { padding: 15px; gap: 13px; }
  .buzon-voice-fields { grid-template-columns: 1fr; }
  .buzon-voice-command { display: grid; gap: 3px; }
  .buzon-voice-command b { white-space: normal; }
  .buzon-voice-history-head, .buzon-voice-queue-item { padding-left: 15px; padding-right: 15px; }
  .modal:has(.buzon-voice-entry) .modal-foot { flex-wrap: wrap; }
  .modal:has(.buzon-voice-entry) .modal-foot #buzonVoiceFinish { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .buzon-voice-phase i, .buzon-voice-queue-item { animation: none !important; }
}
.buzon-voice-correction { display: grid; gap: 6px; margin: 14px 0 8px; font-weight: 600; }
.buzon-voice-correction textarea { width: 100%; padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; line-height: 1.45; resize: vertical; }
.buzon-list-heading h3 { margin: 0; color: var(--text); font-size: 16px; }
.buzon-list-heading p { margin: 3px 0 0; color: var(--text-muted); font-size: 12px; }
.buzon-list-row { min-height: 70px; padding: 10px 14px; background: var(--bg-elevated); }
.buzon-list-row:has(.buzon-row-check:checked) { border-color: var(--accent); background: var(--accent-soft); }
.buzon-check-space { width: 17px; flex: none; }
.buzon-row-open { align-self: stretch; }
.buzon-row-open .toplist-item-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--bg-hover); color: var(--accent-text, var(--accent)); }
.buzon-row-open .toplist-item-name { gap: 8px; min-width: 0; white-space: normal; overflow: visible; }
.buzon-row-open .toplist-badge { flex: none; }
.buzon-subject { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzon-row-open .toplist-item-meta { min-width: 0; gap: 6px; margin-top: 6px; white-space: normal; flex-wrap: wrap; line-height: 1.35; }
.buzon-sender { color: var(--text); font-weight: 550; }
.buzon-meta-separator { color: var(--text-muted); }
.buzon-row-aside { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 86px; margin-left: auto; font-size: 12px; color: var(--text-muted); }
.buzon-row-aside strong { font-size: 13px; color: var(--text); font-weight: 650; }
.buzon-row-chevron { flex: none; color: var(--text-muted); }
.buzon-detail-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 14px; color: var(--text-muted); font-size: 12px; }
.buzon-detail-summary > span + span::before { content: "·"; margin-right: 14px; color: var(--border-strong); }
.buzon-detail-summary .toplist-badge + span::before { content: none; }
@media (max-width: 640px) {
  .buzon-list-row { padding: 10px; gap: 8px; }
  .buzon-row-open { gap: 8px; flex-wrap: wrap; }
  .buzon-row-open .toplist-item-icon { width: 32px; height: 32px; }
  .buzon-row-open .toplist-item-body { flex: 1 1 calc(100% - 48px); }
  .buzon-row-open .toplist-item-name { flex-wrap: wrap; }
  .buzon-subject { max-width: 100%; }
  .buzon-row-aside { flex: 1 0 calc(100% - 40px); flex-direction: row; justify-content: flex-start; align-items: center; margin-left: 40px; gap: 12px; }
  .buzon-row-chevron { display: none; }
  .buzon-meta-separator { display: none; }
}
.buzon-batch-list { display: grid; gap: 7px; max-height: min(48vh, 460px); overflow: auto; }
.buzon-batch-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; }
.buzon-batch-item > label { display: flex; align-items: flex-start; gap: 9px; min-width: 0; cursor: pointer; }
.buzon-batch-item label:has(input:disabled) { cursor: default; opacity: .7; }
.buzon-batch-item label span { min-width: 0; overflow-wrap: anywhere; }
.buzon-batch-item small { display: block; margin-top: 3px; color: var(--text-muted); }
.buzon-batch-lines { margin: 5px 0 0; padding-left: 16px; color: var(--text-muted); font-size: 11px; }
.buzon-batch-item .buzon-batch-blocked { color: var(--warning); font-weight: 600; }
.buzon-batch-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 0 0 25px; }
.buzon-batch-fields label { display: grid; gap: 4px; font-size: 11px; font-weight: 600; }
.buzon-batch-fields input,.buzon-batch-fields textarea { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: var(--bg); color: var(--text); font: inherit; font-weight: 400; }
.buzon-batch-fields textarea { resize: vertical; }
#buzonBatchResult { margin-top: 10px; font-size: 13px; font-weight: 600; }
.buzon-document-fields { display: grid; grid-template-columns: minmax(170px, .55fr) minmax(220px, 1fr); gap: 9px 14px; margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-secondary); }
.buzon-document-fields label { display: grid; align-content: start; gap: 5px; font-size: 12px; font-weight: 600; }
.buzon-document-fields input,.buzon-document-fields textarea { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px; background: var(--bg); color: var(--text); font: inherit; font-weight: 400; }
.buzon-document-fields textarea { resize: vertical; }
.buzon-document-fields p { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) { .buzon-document-fields { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .buzon-selection #buzonSelectionCount { margin-right: 0; } .buzon-selection .btn { flex: 1 1 130px; } .buzon-batch-fields { grid-template-columns: 1fr; } }
.nav-badge { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
/* La propuesta (tabla de líneas) se lleva el ancho; el correo queda a la izquierda, fijo al hacer scroll. */
.buzon-detalle { display: grid; grid-template-columns: minmax(240px, 0.7fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.buzon-detalle > .buzon-col:first-child { position: sticky; top: 0; }
@media (max-width: 1200px) { .buzon-detalle { grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.8fr); } }
@media (max-width: 860px) { .buzon-detalle { grid-template-columns: 1fr; } .buzon-detalle > .buzon-col:first-child { position: static; } }
.buzon-detalle .buzon-col { overflow-x: auto; }
.buzon-detalle .buzon-lineas { min-width: 560px; }
.buzon-detalle .buzon-totales { flex-wrap: wrap; }
@media (max-width: 640px) {
  .buzon-detalle .buzon-col { padding: 12px; }
  .buzon-detalle .buzon-kv { grid-template-columns: 1fr; gap: 2px; }
  .buzon-detalle .buzon-totales { justify-content: flex-start; gap: 6px 14px; }
}
.buzon-col { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg); min-width: 0; }
.buzon-col h3 { margin: 0 0 10px; font-size: 15px; }
.buzon-kv { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; font-size: 13px; padding: 3px 0; }
.buzon-kv span { color: var(--text-muted); }
.buzon-kv b { font-weight: 500; overflow-wrap: anywhere; }
.buzon-cuerpo { white-space: pre-wrap; font: inherit; font-size: 13px; background: var(--bg-hover); border-radius: 8px;
  padding: 10px 12px; margin: 10px 0 0; max-height: 360px; overflow: auto; }
.buzon-avisos { margin: 0 0 10px; padding: 10px 12px 10px 28px; border-radius: 8px; font-size: 13px;
  background: color-mix(in srgb, var(--warning) 12%, transparent); }
.buzon-lineas { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.buzon-lineas th, .buzon-lineas td { padding: 6px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.buzon-lineas .n { text-align: right; white-space: nowrap; }
.buzon-uds { width: 80px; text-align: right; }
.buzon-totales { display: flex; gap: 16px; justify-content: flex-end; margin-top: 8px; font-size: 13px; }
.buzon-decision { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--warning); border-radius: 10px; }
.buzon-decision-q { font-size: 13px; margin-bottom: 6px; }
.buzon-opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.buzon-opcion { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 8px; padding: 5px 10px;
  font-size: 12.5px; cursor: pointer; }
.buzon-opcion:hover, .buzon-opcion.activa { border-color: var(--accent); color: var(--accent-text, var(--accent)); }
.buzon-manual { display: flex; gap: 6px; margin-top: 6px; }
.buzon-manual input { flex: 1; min-width: 0; }
.buzon-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.buzon-ok { color: var(--success, #15803d); font-size: 13px; }
.buzon-cfg-row { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 8px 0; }
.buzon-cfg-row > label { flex: 1 1 180px; }
.buzon-auto { margin: 8px 0; font-size: 13px; }
.buzon-stock { display: inline-flex; vertical-align: middle; color: var(--text-muted); margin-left: 4px; }

/* Editor del Buzón: buscar, habituales y crear */
.buzon-editor { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.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-bloque { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.buzon-bloque > summary { cursor: pointer; font-size: 13px; }
.buzon-bloque-t { font-size: 13px; margin-bottom: 6px; }
.buzon-buscar { margin-top: 8px; }
.buzon-buscar input { width: 100%; box-sizing: border-box; }
.buzon-resultados { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.buzon-res { text-align: left; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 8px;
  padding: 6px 10px; font-size: 12.5px; cursor: pointer; }
.buzon-res:hover { border-color: var(--accent); }
.buzon-habituales { margin-top: 8px; }
.buzon-habituales .buzon-opciones { margin-top: 6px; }
.buzon-crear { margin-top: 8px; font-size: 13px; }
.buzon-crear > summary { cursor: pointer; color: var(--accent-text, var(--accent)); }
.buzon-crear form { display: grid; gap: 8px; margin-top: 8px; }
.buzon-crear label { display: grid; gap: 4px; font-size: 12.5px; }
.buzon-plantilla { font-size: 12.5px; }
.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; }
.buzon-crear .buzon-alta-origen label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.buzon-alta-manual:not([hidden]) { display: grid; gap: 8px; }
.buzon-alta-manual input,.buzon-alta-manual select { width: 100%; min-width: 0; box-sizing: border-box; }
.buzon-alta-copia[hidden],.buzon-alta-manual[hidden] { display: none; }
.buzon-alta-aviso { margin: 2px 0; padding: 8px 10px; border: 1px solid #e6cc91; border-radius: 7px; background: #fff8e8; color: #795617; font-size: 12px; line-height: 1.45; }
.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; align-items: start; gap: 7px; min-width: 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); }

/* Buzón: lo que suele comprar el cliente / vendernos el proveedor (referencia) */
.buzon-habitual { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.buzon-habitual summary { cursor: pointer; font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.buzon-habitual .buzon-hab { margin-top: 6px; }
.buzon-habitual .buzon-hab td .help { font-size: 11px; }
.buzon-habitual tr.en-doc td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.buzon-tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent-text, var(--accent)); margin-left: 4px; }
@media (max-width: 640px) { .buzon-habitual { overflow-x: auto; } }
.buzon-leido { margin-top: 12px; }
.buzon-leido h4 { margin: 0; font-size: 13px; display: flex; align-items: center; gap: 6px; color: var(--text-secondary, inherit); }
.buzon-precio { width: 90px; text-align: right; }
.buzon-revisado { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 13px; cursor: pointer; }
.buzon-revisado input { margin-top: 3px; flex: none; }

/* Buzón al estilo de OdooMind: una tabla, la elección dentro de la fila */
.bz-tabla td { vertical-align: top; }
.bz-tabla .bz-leido { color: var(--text-secondary, inherit); font-size: 12px; }
.bz-tabla .bz-art { margin-top: 2px; }
.bz-tabla tr.bz-sin td { background: color-mix(in srgb, #f59e0b 7%, transparent); }
.bz-falta-tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #fef3c7; color: #92400e; }
.bz-link { background: none; border: 0; padding: 0 2px; color: var(--accent-text, var(--accent)); cursor: pointer; font-size: 12px; text-decoration: underline; display: inline-flex; align-items: center; gap: 4px; }
.bz-fix { margin-top: 6px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; display: grid; gap: 6px; }
.bz-fix .buzon-opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.bz-elegido { margin-top: 4px; font-size: 12px; color: var(--accent-text, var(--accent)); }
.bz-tercero { margin: 4px 0 10px; }
.buzon-totales.bz-doc { opacity: .8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bz-falta-tag { background: #422006; color: #fcd34d; } }
:root[data-theme="dark"] .bz-falta-tag { background: #422006; color: #fcd34d; }
.bz-fix .buzon-opcion { width: auto; max-width: 100%; text-align: left; padding: 4px 9px; font-size: 12px; line-height: 1.3; }
.bz-fix .buzon-buscar input { max-width: 340px; }

/* Campos del Buzón: mismo aspecto en la revisión y en la importación por lotes. */
.buzon-editor :is(input:not([type]), input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="date"], textarea, select),
.buzon-batch-fields :is(input[type="text"], input[type="date"], textarea) {
  box-sizing: border-box;
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-input);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.buzon-editor :is(input:not([type]), input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="date"], textarea, select):focus,
.buzon-batch-fields :is(input[type="text"], input[type="date"], textarea):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.buzon-editor textarea,
.buzon-batch-fields textarea { min-height: 72px; resize: vertical; }
.buzon-editor .buzon-lineas input[type="number"] { min-height: 38px; padding: 7px 8px; border-radius: 10px; }
@media (max-width: 640px) {
  .buzon-editor :is(input:not([type]), input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="date"], textarea, select),
  .buzon-batch-fields :is(input[type="text"], input[type="date"], textarea) { font-size: 16px; }
}

/* 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; }

/* Buzón: propuestas de agentes */
.bz-pasos { margin: 0; padding-left: 20px; font-size: 13px; display: grid; gap: 3px; }
.bz-sql { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; max-height: 180px; }
.bz-descartar { margin-top: 0; }
.bz-descartar[open] { display: grid; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.bz-descartar label { display: grid; gap: 4px; font-size: 13px; }
.anomaly-sched-lbl { display: inline-flex; align-items: center; gap: 4px; }
.anomaly-sched { font: inherit; font-size: 12px; padding: 1px 4px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: inherit; }

/* Avisos push: botón al pie de la campana (de OdooMind) */
.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); color: var(--accent); }
.notif-push-toggle[data-state="on"] { color: var(--text-muted, #888); }

/* Sugerencias vivas (cifras reales de Sage) */
.sug.live { border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated)); }
.sug.live .sug-desc { color: var(--accent-text, var(--accent)); font-weight: 600; }

/* Memoria y avisos del agente (editor) */
.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); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.agent-mem-list li span { min-width: 0; word-break: break-word; }

/* ScanZen dentro de SageMind (openScanzenPanel): la app o su landing ocupan todo el panel */
.scanzen-header { padding-top: 10px; padding-bottom: 10px; }
.scanzen-frame-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; background: var(--bg); }
.scanzen-frame { flex: 1; width: 100%; min-height: 70vh; border: 0; display: block; background: #fff; }
.scanzen-frame-status { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: var(--bg); color: var(--text-secondary); font-size: 14px; text-align: center; padding: 24px; }
.scanzen-frame-wrap.is-loading .scanzen-frame-status { display: flex; }
.scanzen-frame-loading { display: inline-flex; align-items: center; gap: 8px; }
.scanzen-frame-loading .icon { animation: spin 1s linear infinite; }
@media (max-width: 640px) {
  .scanzen-header { padding: 8px 10px; gap: 6px; flex-wrap: nowrap; }
  .scanzen-header .panel-page-title { min-width: 0; white-space: nowrap; }
  .scanzen-header .btn { white-space: nowrap; flex: none; }
  .scanzen-tab-label { display: none; }
  .scanzen-frame { min-height: 0; height: 100%; }
}
.toplist-count:empty { display: none; }

/* APPMailing dentro de SageMind (openAppmailingPanel) y tarjetas del chat (PDF, envío) */
.appmailing-note { max-width: 520px; margin: 48px auto; padding: 0 20px; text-align: center; color: var(--text-secondary); }
.appmailing-note h3 { margin: 12px 0 6px; color: var(--text); font-size: 17px; }
.appmailing-card { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary, var(--bg)); }
.appmailing-card > .icon { flex: none; color: var(--accent, currentColor); }
.appmailing-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.appmailing-card-body small { color: var(--text-secondary); overflow-wrap: anywhere; }
.appmailing-card-actions { display: flex; gap: 8px; flex: none; }
.appmailing-card.is-done { border-color: var(--success, #16a34a); }
.appmailing-card.is-closed { opacity: .75; }
.appmailing-card-result { font-size: 13px; color: var(--text-secondary); }
/* Plantilla propuesta: resumen arriba, el correo real debajo y las acciones al pie */
.appmailing-template { flex-wrap: wrap; align-items: flex-start; }
.appmailing-template .appmailing-card-actions { width: 100%; justify-content: flex-end; }
.appmailing-template-blocks { margin-top: 4px; font-size: 12px; color: var(--text-secondary); }
.appmailing-template-blocks ul { margin: 4px 0 0; padding-left: 18px; }
.appmailing-template-preview { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.appmailing-template-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.appmailing-template-tabs small { flex: 1 1 auto; }
.appmailing-template iframe { width: 100%; height: 360px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.appmailing-template.is-expanded iframe { height: 75vh; }
@media (max-width: 640px) {
  .appmailing-card { flex-wrap: wrap; }
  .appmailing-card-actions { width: 100%; justify-content: flex-end; }
}
.menu-item[hidden] { display: none !important; }   /* APPMailing: oculto hasta que el backend lo permita */

/* Aviso de versión nueva: arriba al centro, lejos del campo de escritura y de los toasts */
.app-update { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 9998; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 10px 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.app-update[hidden] { display: none; }
.app-update > .icon { flex: none; color: var(--accent, currentColor); }
.app-update-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-update-copy b { font-size: 13.5px; font-weight: 600; }
.app-update-copy span { font-size: 12.5px; color: var(--text-secondary); }
.app-update .btn { flex: none; white-space: nowrap; }
@media (max-width: 640px) { .app-update { top: 8px; width: calc(100vw - 16px); } }

/* Configurar el Buzón: formulario de Ajustes dentro de una página del Buzón. */
.buzon-config-page { max-width: 760px; }
.buzon-config-page > h4:first-child { margin-top: 0; }

/* ============================================================
   CONFIGURACIÓN EN UNA PÁGINA (30/10/2026, boceto C)
   Un solo interruptor, un solo campo (36 px), desplegables con la misma
   flecha y botones del mismo alto. Todo bajo .cfg-* para no tocar el resto.
   ============================================================ */
.cfg-header { gap: 12px; flex-wrap: wrap; }
.cfg-search { position: relative; flex: 1; max-width: 560px; margin-left: auto; min-width: 220px; }
.cfg-search > .icon, .cfg-search > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.cfg-search .cfg-input { height: 38px; padding-left: 34px; padding-right: 40px; border-radius: 10px; }
.cfg-search kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font: 12px inherit; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 6px; padding: 0 6px; background: var(--bg-hover); }
.cfg-search .cfg-input:not(:placeholder-shown) ~ kbd { display: none; }
.cfg-body { padding: 0 !important; scroll-behavior: smooth; }
.cfg-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100%; }
.cfg-nav { position: sticky; top: 0; align-self: start; max-height: 100%; overflow-y: auto; padding: 18px 12px; border-right: 1px solid var(--border); }
.cfg-nav h4 { margin: 16px 10px 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.cfg-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13.5px; }
.cfg-nav a:hover { background: var(--bg-hover); }
.cfg-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.cfg-nav-lbl { flex: 1; min-width: 0; }
.cfg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning, #b45309); flex: none; }
.cfg-dot[hidden] { display: none; }
.cfg-tabs-m { display: none; }
.cfg-main { padding: 22px 28px 80px; min-width: 0; }
#cfgPage, #cfgResults { max-width: 860px; }
.cfg-grp { margin: 8px 0 18px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.cfg-grp::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.cfg-sec { scroll-margin-top: 16px; padding: 0 0 28px; margin: 0 0 28px; border-bottom: 1px solid var(--border); }
.cfg-sec:last-child { border-bottom: 0; }
.cfg-sec-hd { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; }
.cfg-sec-txt { flex: 1; min-width: 0; }
.cfg-sec-hd h2 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 10px; }
.cfg-sec-hd p { margin: 5px 0 0; color: var(--text-muted); font-size: 13.5px; }
.cfg-state .badge, .cfg-area-hd .badge { white-space: nowrap; }
.cfg-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; margin: 0 0 14px; overflow: hidden; }
.cfg-card-hd { padding: 14px 18px 0; }
.cfg-card-hd h3 { margin: 0; font-size: 14.5px; }
.cfg-card-hd p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }
.cfg-card-bd { padding: 14px 18px 4px; }
.cfg-card-bd:empty { display: none; }
.cfg-card-ft { padding: 12px 18px; border-top: 1px solid var(--border); background: var(--bg-hover); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cfg-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--border); }
.cfg-card > .cfg-row:first-child { border-top: 0; }
.cfg-card-bd .cfg-row { padding: 12px 0; }
.cfg-card-bd > .cfg-row:first-child { padding-top: 0; border-top: 0; }
.cfg-row-txt { min-width: 0; }
.cfg-row-txt strong { display: block; font-weight: 600; font-size: 13.5px; }
.cfg-row-txt small { display: block; color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.cfg-row-ctl { flex: none; display: flex; align-items: center; gap: 8px; }
.cfg-saved { font-size: 12px; color: var(--success, #15803d); opacity: 0; transition: opacity .2s; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cfg-saved.on { opacity: 1; }
.cfg-gl .cfg-saved { display: none; } .cfg-gl .cfg-saved.on { display: inline-flex; }
.cfg-card-ft[hidden] { display: none; }
.cfg-field { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; }
.cfg-field > label, .cfg-label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; color: var(--text); }
.cfg-hint { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.cfg-input, .cfg-select { height: 36px; width: 100%; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-input, var(--bg-elevated)); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 400; transition: border-color .15s, box-shadow .15s; }
.cfg-input:hover, .cfg-select:hover { border-color: var(--text-muted); }
.cfg-input:focus, .cfg-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cfg-select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238e8e8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.cfg-row-ctl .cfg-select { width: auto; min-width: 200px; }
.cfg-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; }
.cfg-w-s { max-width: 140px; } .cfg-w-m { max-width: 320px; } .cfg-w-l { max-width: 520px; }
.cfg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.cfg-grid-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.cfg-grid-dates { grid-template-columns: repeat(2, minmax(0, 200px)) auto; align-items: end; }
.cfg-field-btn { justify-content: flex-end; }
.cfg-affix { display: flex; gap: 6px; align-items: center; }
.cfg-affix .cfg-input { flex: 1; min-width: 0; }
.cfg-icon-btn { width: 36px; height: 36px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cfg-color { display: flex; gap: 8px; align-items: center; }
.cfg-color input[type=color] { width: 36px; height: 36px; padding: 3px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-elevated); cursor: pointer; }
.cfg-color .cfg-input { max-width: 120px; }
.cfg-toggle { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.cfg-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cfg-toggle span { width: 36px; height: 20px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .15s; }
.cfg-toggle span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.cfg-toggle input:checked + span { background: var(--accent); }
.cfg-toggle input:checked + span::after { transform: translateX(16px); }
.cfg-toggle input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }
.cfg-check { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-weight: 400; font-size: 13px; }
.cfg-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--bg-hover); border: 1px solid var(--border); }
.cfg-seg button { border: 0; background: transparent; height: 28px; padding: 0 12px; border-radius: 7px; cursor: pointer; color: var(--text-muted); font: inherit; font-size: 13px; }
.cfg-seg button[aria-pressed="true"] { background: var(--bg-elevated); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 600; }
.cfg-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 4px; }
.cfg-result { font-size: 13px; }
.cfg-inline { border: 1px solid var(--border); border-radius: 10px; padding: 14px; background: var(--bg-hover); margin: 0 0 12px; }
.cfg-inline[hidden] { display: none; }
.cfg-more { border: 1px solid var(--border); border-radius: 10px; margin: 10px 0 12px; background: var(--bg-elevated); }
.cfg-more > summary { cursor: pointer; padding: 10px 12px; font-weight: 600; font-size: 13px; }
.cfg-more > div { padding: 0 12px 12px; font-size: 13px; }
.cfg-more p { margin: 0 0 8px; }
.cfg-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: var(--bg-hover); color: var(--text-muted); white-space: nowrap; }
.cfg-muted { color: var(--text-muted); font-size: 13px; }
.cfg-hl { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
/* Botones de la página: mismo alto */
.cfg-body .btn-primary.btn-sm, .cfg-body .btn-secondary.btn-sm, .cfg-body .btn-ghost.btn-sm, .cfg-body a.btn-secondary.btn-sm { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 13px; text-decoration: none; }
/* Lo que pintan las secciones por su cuenta, con el mismo aire */
.cfg-body .data-list { max-height: none; overflow: visible; margin: 0 0 12px; gap: 0; border: 1px solid var(--border); border-radius: 10px; }
.cfg-body .data-list:empty { display: none; }
.cfg-body .data-list .data-list-item { border: 0; border-top: 1px solid var(--border); border-radius: 0; margin: 0; }
.cfg-body .data-list .data-list-item:first-child { border-top: 0; }
.cfg-body .empty-list { text-align: left; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 10px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.cfg-body .data-list .empty-list { border: 0; margin: 0; }
.cfg-body .webhooks-list { margin: 0 0 12px; }
.cfg-body .integration-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.cfg-body .integration-card { margin: 0; }
.cfg-body #sageKnowledgeStatus { margin: 0 0 12px; }
.cfg-body #learningPendingBadge { margin: 0 0 10px; }
.cfg-body .settings-divider { display: none; }
/* Marca y logo */
.cfg-brand-prev { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-hover); margin: 0 0 16px; }
.cfg-brand-prev strong { display: block; } .cfg-brand-prev small { display: block; color: var(--text-muted); }
.cfg-brand-prev .cfg-tag { margin-left: auto; }
.cfg-brand-logo { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); overflow: hidden; display: grid; place-items: center; flex: none; }
.cfg-brand-logo img, .cfg-drop-prev img { width: 100%; height: 100%; object-fit: contain; background: var(--bg-elevated); }
.cfg-drop { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1.5px dashed var(--border-strong); border-radius: 12px; background: var(--bg-hover); cursor: pointer; max-width: 520px; transition: border-color .15s, background .15s; }
.cfg-drop:hover, .cfg-drop:focus-visible, .cfg-drop.is-over { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.cfg-drop-prev { width: 56px; height: 56px; border-radius: 12px; background: var(--bg-elevated); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-muted); flex: none; overflow: hidden; }
.cfg-drop-txt strong { display: block; font-size: 13.5px; overflow-wrap: anywhere; } .cfg-drop-txt small { display: block; color: var(--text-muted); font-size: 12.5px; margin-top: 2px; font-weight: 400; }
/* Resumen */
.cfg-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.cfg-chip { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text); cursor: pointer; font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.cfg-chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.cfg-setup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; }
.cfg-setup strong { font-size: 13.5px; }
.cfg-meter { width: 120px; height: 6px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.cfg-meter i { display: block; height: 100%; background: var(--accent); }
.cfg-todo { height: 28px; border-radius: 8px; border: 1px dashed var(--warning, #b45309); background: var(--status-warning-bg, #fdf6e3); color: var(--status-warning-text, #92400e); padding: 0 10px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; }
.cfg-areas-grp h3 { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px; font-weight: 600; }
.cfg-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; align-items: start; margin: 0 0 18px; }
.cfg-area { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cfg-area.is-warn { border-color: var(--status-warning-border, #e9c46a); }
.cfg-area-hd { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 0; background: transparent; cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.cfg-area-hd:hover { background: var(--bg-hover); }
.cfg-area-hd strong { flex: 1; min-width: 0; font-size: 14px; }
.cfg-area-hd > svg:last-child { color: var(--text-muted); flex: none; }
.cfg-area-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-hover); flex: none; }
.cfg-glance { border-top: 1px solid var(--border); }
.cfg-gl { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; border: 0; border-top: 1px solid var(--border); background: transparent; text-align: left; cursor: pointer; font: inherit; font-size: 13px; color: var(--text); min-height: 38px; }
.cfg-gl:first-child { border-top: 0; }
.cfg-gl:hover { background: var(--bg-hover); }
.cfg-gl-tg { cursor: default; } .cfg-gl-tg:hover { background: transparent; }
.cfg-gl-k { color: var(--text-muted); flex: 1; min-width: 0; }
.cfg-gl-v { font-weight: 600; text-align: right; overflow-wrap: anywhere; max-width: 62%; }
.cfg-gl-v.is-warn { color: var(--status-warning-text, #92400e); } .cfg-gl-v.is-off { color: var(--text-muted); font-weight: 500; } .cfg-gl-v.is-ok { color: var(--success, #15803d); }
.cfg-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }
/* Resultados del buscador */
.cfg-rinfo { color: var(--text-muted); font-size: 13px; margin: 0 0 10px; }
.cfg-rgrp { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 0 0 12px; }
.cfg-rgrp-hd { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; background: var(--bg-hover); font-weight: 700; font-size: 13.5px; }
.cfg-rgrp-hd button { margin-left: auto; }
.cfg-res { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; width: 100%; padding: 10px 14px; border: 0; border-top: 1px solid var(--border); background: transparent; text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.cfg-res:hover, .cfg-res.is-sel { background: var(--accent-soft); }
.cfg-res-l { font-weight: 600; } .cfg-res-v { font-weight: 600; text-align: right; max-width: 340px; overflow-wrap: anywhere; }
.cfg-res small { grid-column: 1 / -1; color: var(--text-muted); font-size: 12.5px; }
.cfg-body mark { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }
[data-theme="dark"] .cfg-body mark { background: #854d0e; }
@media (max-width: 820px) {
  .cfg-search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
  .cfg-search kbd { display: none; }
  .cfg-layout { grid-template-columns: 1fr; }
  .cfg-nav { display: none; }
  .cfg-tabs-m { display: flex; gap: 6px; overflow-x: auto; padding: 8px 14px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; scrollbar-width: none; }
  .cfg-tabs-m::-webkit-scrollbar { display: none; }
  .cfg-tabs-m a { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; color: var(--text); text-decoration: none; font-size: 13px; background: var(--bg-elevated); }
  .cfg-tabs-m a[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }
  .cfg-sec { scroll-margin-top: 58px; }
  .cfg-main { padding: 14px 14px 70px; }
  .cfg-row { flex-wrap: wrap; }
  .cfg-row-ctl .cfg-select { min-width: 0; width: 100%; }
  .cfg-row-ctl:has(.cfg-select) { width: 100%; }
  .cfg-grid, .cfg-grid-3 { grid-template-columns: 1fr; }
  .cfg-grid-dates { grid-template-columns: 1fr 1fr; }
  .cfg-areas { grid-template-columns: 1fr; }
  .cfg-res { grid-template-columns: 1fr; } .cfg-res-v { text-align: left; }
}
/* Marca de la barra superior: SageMind y, debajo, la empresa (30/10/2026) */
.brand-wrap { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; min-width: 0; }
.brand-company { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.brand-company[hidden] { display: none; }
.cfg-res-more { display: block; color: var(--accent-text); font-weight: 600; font-size: 13px; }
/* Aprendizaje editado en su fila y zona de peligro (30/10/2026) */
.cfg-body .learn-edit { flex: 1; min-width: 0; }
.cfg-body .learn-edit textarea.cfg-input { height: auto; min-height: 76px; padding: 8px 11px; resize: vertical; line-height: 1.45; }
.cfg-body .data-list-item:has(.learn-edit) { display: block; }
.cfg-danger { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin: 4px 0 12px; border: 1px solid var(--status-error-border, #f5c2c2); background: var(--status-error-bg, #fdecec); border-radius: 10px; }
.cfg-danger p { margin: 0; font-size: 12.5px; color: var(--text-secondary, var(--text-muted)); flex: 1; min-width: 220px; }
.cfg-btn-danger { color: var(--danger, #b91c1c) !important; }
.cfg-btn-danger:hover { border-color: var(--danger, #b91c1c) !important; }
.brand-logo { height: 28px; width: auto; max-width: 120px; object-fit: contain; border-radius: 6px; flex: none; }
.brand-logo[hidden] { display: none; }

/* ── Importar informe de Power BI (.pbix) — 2026-11-02 ── */
.pbx { display: flex; flex-direction: column; gap: 14px; }
.pbx-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 20px; border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.pbx-drop:hover, .pbx-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.pbx-drop.is-busy { opacity: .6; pointer-events: none; }
.pbx-drop-icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 4px; }
.pbx-drop strong { font-size: 15px; }
.pbx-drop small { color: var(--text-secondary); }
.pbx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.pbx-steps li { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); font-size: 13px; color: var(--text-secondary); }
.pbx-steps li svg { flex: none; margin-top: 2px; color: var(--accent-text); }
.pbx-status { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.pbx-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: pbx-spin .8s linear infinite; vertical-align: -2px; }
@keyframes pbx-spin { to { transform: rotate(360deg); } }
.pbx-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pbx-sum > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); min-width: 0; }
.pbx-sum > div > span { display: block; font-size: 11.5px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.pbx-sum strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbx-src { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pbx-src b { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); }
.pbx-src b.is-ok { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }
.pbx-src b.is-bad { color: var(--danger-text); }
.pbx-progress { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.pbx-progress span { display: inline-flex; align-items: center; gap: 6px; }
.pbx-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.pbx-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.pbx-page { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pbx-page-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 9px 12px; background: var(--bg-hover); border-bottom: 1px solid var(--border); }
.pbx-page-h label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; cursor: pointer; }
.pbx-page-h label input { accent-color: var(--accent); margin: 0; }
.pbx-page-h small { color: var(--text-secondary); }
.pbx-filters { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.pbx-filters span { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); }
.pbx-row { display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) minmax(130px, auto); gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.pbx-row:last-child { border-bottom: 0; }
.pbx-row.is-bad { background: color-mix(in srgb, var(--danger-text) 6%, transparent); }
.pbx-check { accent-color: var(--accent); margin: 0; width: 15px; height: 15px; }
.pbx-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-text); }
.pbx-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pbx-main small { color: var(--text-secondary); font-size: 12px; }
.pbx-name { border: 1px solid transparent; background: transparent; padding: 2px 4px; margin-left: -4px; border-radius: 6px; font-weight: 600; font-size: 13.5px; width: 100%; max-width: 420px; color: inherit; }
.pbx-name:hover { border-color: var(--border); }
.pbx-name:focus { border-color: var(--accent); background: var(--bg); outline: none; }
.pbx-series { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 4px; }
.pbx-chip { border: 1px solid var(--border-strong); background: var(--bg); color: var(--text-secondary); border-radius: 999px; padding: 2px 9px; font-size: 12px; cursor: pointer; }
.pbx-chip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.pbx-state { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; text-align: right; }
.pbx-state .pbx-why { font-size: 11px; color: var(--text-secondary); max-width: 220px; }
.pbx-ok { color: var(--accent-text); display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.pbx-bad { color: var(--danger-text); display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.pbx-warn { color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; }
.pbx-wait { color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.pbx-err { color: var(--danger-text); display: inline-flex; align-items: center; gap: 6px; }
.pbx-omit summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; }
.pbx-omit ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-secondary); }
.pbx-foot-hint { flex: 1; font-size: 12.5px; color: var(--text-secondary); align-self: center; }
.pbx-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 10px; }
.pbx-done-icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.pbx-done strong { font-size: 16px; }
.pbx-done p { margin: 0; color: var(--text-secondary); max-width: 520px; }
.pbx-done ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pbx-done li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; }
@media (max-width: 640px) { .pbx-row { grid-template-columns: 18px 26px minmax(0, 1fr); } .pbx-state { grid-column: 3; align-items: flex-start; text-align: left; } }

/* ── Asistente pbix: destino por componente ── */
.pbx-dest { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.pbx-dest small { color: var(--text-secondary); font-size: 11.5px; margin-left: 4px; }
.pbx-informe { display: grid; gap: 4px; }
.pbx-informe label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; max-width: 520px; }
.pbx-informe input { padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg); color: inherit; font: inherit; }
.pbx-informe p { margin: 0; color: var(--text-secondary); font-size: 12.5px; }
.pbx-row.is-aa .pbx-main small { color: var(--accent-text); }

/* ── SageBI — 2026-11-02 ── */
.sbi-list { display: grid; gap: 10px; }
.sbi-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.sbi-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.sbi-item-body { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.sbi-item-body strong { font-size: 14.5px; }
.sbi-item-body small { color: var(--text-secondary); font-size: 12.5px; }
.sbi { display: flex; flex-direction: column; gap: 12px; }
.sbi-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.sbi-tab { border: 0; background: transparent; color: var(--text-secondary); padding: 8px 12px; cursor: pointer; font: inherit; font-size: 13.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sbi-tab.is-on { color: var(--text); border-color: var(--accent); font-weight: 600; }
.sbi-tab:hover { color: var(--text); }
.sbi-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.sbi-f { display: flex; flex-direction: column; gap: 3px; min-width: 140px; font-weight: 400; margin: 0; }
.sbi-f span { font-size: 11.5px; color: var(--text-secondary); }
.sbi-f select, .sbi-f input { height: 32px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg); color: inherit; font: inherit; font-size: 13px; }
.sbi-f-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; align-self: center; }
.sbi-f-chips i { font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.sbi-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.sbi-desc { grid-column: span 12; margin: 0; color: var(--text-secondary); font-size: 13px; }
.sbi-tile { grid-column: span 6; min-width: 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sbi-tile.w3 { grid-column: span 3; } .sbi-tile.w6 { grid-column: span 6; } .sbi-tile.w12 { grid-column: span 12; }
.sbi-tile header { display: flex; align-items: flex-start; gap: 8px; }
.sbi-tile h4 { margin: 0; font-size: 12.5px; color: var(--text-secondary); font-weight: 600; flex: 1; min-width: 0; line-height: 1.3; }
.sbi-ask { border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; padding: 2px; border-radius: 6px; flex: none; }
.sbi-ask:hover { background: var(--bg-hover); color: var(--accent-text); }
.sbi-tile-body { min-height: 36px; display: flex; flex-direction: column; gap: 4px; }
.sbi-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.sbi-tile small { font-size: 12px; color: var(--text-secondary); }
.sbi-tile small i { font-style: normal; font-weight: 600; }
.sbi-tile small i.up { color: var(--accent-text); } .sbi-tile small i.down { color: var(--danger-text); }
.sbi-canvas { position: relative; height: 260px; }
.sbi-canvas canvas { width: 100% !important; height: 100% !important; }
.sbi-table-wrap { overflow: auto; max-height: 420px; border: 1px solid var(--border); border-radius: 8px; }
.sbi-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.sbi-table th, .sbi-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left; }
.sbi-table th { position: sticky; top: 0; background: var(--bg-hover); color: var(--text-secondary); font-weight: 600; font-size: 11.5px; z-index: 1; }
.sbi-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.sbi-table tfoot td { font-weight: 700; background: var(--bg-hover); position: sticky; bottom: 0; }
.sbi-table-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.sbi-wait { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12.5px; }
.sbi-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: pbx-spin .8s linear infinite; }
.sbi-bad { color: var(--danger-text); font-size: 12.5px; display: inline-flex; gap: 5px; align-items: center; }
.sbi-muted { color: var(--text-secondary); }
.sbi-foot { margin: 0; color: var(--text-secondary); font-size: 12.5px; }
@media (max-width: 900px) { .sbi-tile.w3 { grid-column: span 6; } .sbi-tile.w6 { grid-column: span 12; } }
@media (max-width: 560px) { .sbi-tile.w3 { grid-column: span 12; } .sbi-f-chips { margin-left: 0; } }
.sbi-store { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; padding-top: 6px; border-top: 1px solid var(--border); }
/* ── SageBI v2 ── */
.sbi-f-chips i b { cursor: pointer; margin-left: 3px; opacity: .7; } .sbi-f-chips i b:hover { opacity: 1; }
.sbi-clear { border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 12px; text-decoration: underline; }
.sbi-insights { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--bg); padding: 10px 14px; }
.sbi-insights h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--text-secondary); display: flex; gap: 6px; align-items: center; }
.sbi-insights ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; }
.sbi-insights li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.sbi-insights li svg { flex: none; position: relative; top: 2px; }
.sbi-insights i.up, .sbi-tile i.up, .sbi-explore-sec i.up { color: var(--accent-text); font-style: normal; font-weight: 600; }
.sbi-insights i.down, .sbi-tile i.down, .sbi-explore-sec i.down { color: var(--danger-text); font-style: normal; font-weight: 600; }
.sbi-tile header { flex-wrap: wrap; }
.sbi-tool { height: 26px; font-size: 12px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-secondary); }
.sbi-search { width: 150px; }
.sbi-tool-btn { border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; padding: 3px; border-radius: 6px; flex: none; }
.sbi-tool-btn:hover { background: var(--bg-hover); color: var(--accent-text); }
.sbi-spark { width: 100%; height: 34px; margin-top: 4px; cursor: pointer; }
.sbi-spark polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; } .sbi-spark .cur { stroke: var(--accent); } .sbi-spark .aa { stroke: #cbd5e1; } .sbi-spark .dot { fill: var(--accent); }
.sbi-explore { align-self: flex-start; border: 0; background: transparent; color: var(--accent-text); font-size: 12px; cursor: pointer; padding: 2px 0; display: inline-flex; gap: 4px; align-items: center; margin-top: 2px; }
.sbi-explore:hover { text-decoration: underline; }
.sbi-hint { margin-top: 2px; font-size: 11.5px; }
.sbi-table th { cursor: pointer; user-select: none; } .sbi-table th.is-sort { color: var(--text); }
.sbi-table td.is-link { cursor: pointer; color: var(--accent-text); } .sbi-table td.is-link:hover { text-decoration: underline; }
.sbi-pager { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.sbi-explore-body { display: flex; flex-direction: column; gap: 14px; }
.sbi-explore-sec h4 { margin: 0 0 6px; font-size: 13px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sbi-explore-sec h4 small { color: var(--text-secondary); font-weight: 400; }
.sbi-explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.sbi-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sbi-bars li { display: grid; grid-template-columns: minmax(70px, 1fr) 2fr auto; gap: 8px; align-items: center; font-size: 12.5px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.sbi-bars li:hover { background: var(--bg-hover); }
.sbi-bars .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbi-bars .b { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; } .sbi-bars .b i { display: block; height: 100%; background: var(--accent); }
.sbi-bars .v { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.sbi-grid.is-edit .sbi-tile { border-style: dashed; }
.sbi-tile.is-hidden { opacity: .45; }
.sbi-tile.is-dragging { opacity: .4; } .sbi-tile.is-over { outline: 2px solid var(--accent); }
.sbi-edit-tools { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.sbi-edit-tools button { border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); border-radius: 6px; font-size: 11px; padding: 2px 6px; cursor: pointer; }
.sbi-edit-tools button.is-on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.sbi-drag { cursor: grab; color: var(--text-secondary); display: inline-flex; }
.sbi-tile h4[contenteditable] { outline: 1px dashed var(--border-strong); border-radius: 4px; padding: 1px 4px; }
.sbi-tab-del { margin-left: 4px; color: var(--danger-text); font-weight: 700; }
.sbi-f-cmp { margin-left: 4px; }
/* SageBI: filtros configurables y tamaño libre */
.sbi-f-col { position: relative; } .sbi-f-del { position: absolute; right: 4px; top: 0; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; } .sbi-f-del:hover { color: var(--danger-text); }
.sbi-f-add select { color: var(--text-secondary); }
.sbi-tile { position: relative; }
.sbi-tile.w2 { grid-column: span 2; } .sbi-tile.w4 { grid-column: span 4; } .sbi-tile.w5 { grid-column: span 5; } .sbi-tile.w7 { grid-column: span 7; } .sbi-tile.w8 { grid-column: span 8; } .sbi-tile.w9 { grid-column: span 9; } .sbi-tile.w10 { grid-column: span 10; } .sbi-tile.w11 { grid-column: span 11; }
.sbi-tile[data-h="2"] { min-height: 300px; } .sbi-tile[data-h="3"] { min-height: 420px; } .sbi-tile[data-h="4"] { min-height: 540px; }
.sbi-tile[data-h="2"] .sbi-canvas { height: 380px; } .sbi-tile[data-h="3"] .sbi-canvas { height: 500px; } .sbi-tile[data-h="4"] .sbi-canvas { height: 620px; }
.sbi-tile[data-h="2"] .sbi-table-wrap { max-height: 540px; } .sbi-tile[data-h="3"] .sbi-table-wrap { max-height: 660px; } .sbi-tile[data-h="4"] .sbi-table-wrap { max-height: 780px; }
.sbi-tile[data-h="2"] .sbi-value { font-size: 34px; } .sbi-tile[data-h="3"] .sbi-value, .sbi-tile[data-h="4"] .sbi-value { font-size: 44px; }
.sbi-resize { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent); border-radius: 0 0 4px 0; opacity: .7; touch-action: none; }
.sbi-resize:hover { opacity: 1; }
.sbi-dim { font-size: 11px; color: var(--text-secondary); padding: 0 4px; }
@media (max-width: 900px) { .sbi-tile.w2, .sbi-tile.w4, .sbi-tile.w5 { grid-column: span 6; } .sbi-tile.w7, .sbi-tile.w8, .sbi-tile.w9, .sbi-tile.w10, .sbi-tile.w11 { grid-column: span 12; } }
/* SageBI: mover y redimensionar siempre, con cuadrícula */
.sbi-tile.w1 { grid-column: span 1; }
.sbi-tile[data-h="5"] { min-height: 660px; } .sbi-tile[data-h="6"] { min-height: 780px; }
.sbi-tile[data-h="5"] .sbi-canvas { height: 740px; } .sbi-tile[data-h="6"] .sbi-canvas { height: 860px; }
.sbi-tile[data-h="5"] .sbi-table-wrap, .sbi-tile[data-h="6"] .sbi-table-wrap { max-height: 900px; }
.sbi-tile .sbi-drag { opacity: 0; margin-right: 2px; cursor: grab; } .sbi-tile:hover .sbi-drag { opacity: .7; } .sbi-tile .sbi-drag:hover { opacity: 1; }
.sbi-tile .sbi-resize { opacity: 0; } .sbi-tile:hover .sbi-resize, .sbi-tile.is-resizing .sbi-resize { opacity: .8; }
.sbi-tile .sbi-dim { position: absolute; right: 20px; bottom: 2px; opacity: 0; font-size: 10.5px; } .sbi-tile.is-resizing .sbi-dim { opacity: 1; }
.sbi-tile.is-resizing { outline: 2px dashed var(--accent); }
.sbi-grid { grid-auto-rows: minmax(0, auto); }
/* SageBI: pestañas de página (mismo lenguaje que el panel de KPIs) */
.sbi-tabs { display: flex; align-items: center; gap: 4px; margin: 0; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); overflow-x: auto; scrollbar-width: none; }
.sbi-tabs::-webkit-scrollbar { display: none; }
.sbi-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; margin: 0; transition: background .12s, color .12s; }
.sbi-tab:hover { background: var(--bg-hover); color: var(--text); }
.sbi-tab.is-on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.sbi-tab-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--bg-hover); color: var(--text-secondary); font-size: 11px; font-weight: 700; }
.sbi-tab.is-on .sbi-tab-n { background: var(--accent); color: #fff; }
.sbi-tab small { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); padding: 1px 6px; border-radius: 999px; background: var(--bg-hover); }
.sbi-tab.is-on small { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); }
.sbi-tab-del { display: inline-flex; color: var(--danger-text); margin-left: 2px; border-radius: 4px; } .sbi-tab-del:hover { background: color-mix(in srgb, var(--danger-text) 12%, transparent); }
.sbi-tabs-spacer { flex: 1; }
.sbi-tabs-hint { font-size: 11.5px; color: var(--text-secondary); padding: 0 8px; white-space: nowrap; }
/* SageBI: ancho completo (como el panel de KPIs) y tablas que caben */
.toplist-panel[data-area="sagebi"] { max-width: none; padding-left: 8px; padding-right: 8px; }
.sbi-table { font-size: 12px; }
.sbi-table th { white-space: normal; line-height: 1.2; vertical-align: bottom; max-width: 140px; }
.sbi-table th, .sbi-table td { padding: 5px 7px; }
.sbi-table-wrap { scrollbar-width: thin; }
.sbi-tile.sbi-tabla .sbi-tile-body { min-width: 0; }
.sbi-table th small { display: block; font-size: 10px; font-weight: 500; color: var(--text-muted, var(--text-secondary)); text-transform: uppercase; letter-spacing: .03em; line-height: 1.1; }
/* ── SageBI v3: pestañas, indicadores, tablas y gráficos ── */
.sbi-tabs { display: flex; align-items: center; gap: 4px; padding: 0; margin: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; overflow: visible; }
.sbi-tabs-row { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.sbi-tabs-row::-webkit-scrollbar { display: none; }
.sbi-tabs .sbi-tab { position: relative; padding: 10px 14px 11px; border: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--text-secondary); font-size: 13.5px; font-weight: 500; white-space: nowrap; box-shadow: none; margin: 0; }
.sbi-tabs .sbi-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; transition: background .15s; }
.sbi-tabs .sbi-tab:hover { color: var(--text); background: var(--bg-hover); }
.sbi-tabs .sbi-tab.is-on { color: var(--text); font-weight: 600; background: transparent; box-shadow: none; }
.sbi-tabs .sbi-tab.is-on::after { background: var(--accent); }
.sbi-pg-nav { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-secondary); cursor: pointer; }
.sbi-pg-nav:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.sbi-pg-nav:disabled { opacity: .35; cursor: default; }
.sbi-pg-count { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary); padding: 0 6px 0 2px; }
.sbi-pg-count i { font-style: normal; opacity: .5; margin: 0 2px; }
/* cifras */
.sbi-tile.sbi-cifra { gap: 4px; }
.sbi-tile.sbi-cifra.is-up { box-shadow: inset 3px 0 0 #16a34a; } .sbi-tile.sbi-cifra.is-down { box-shadow: inset 3px 0 0 #dc2626; }
.sbi-kpi-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sbi-value { font-variant-numeric: tabular-nums; }
.sbi-value .u { font-size: .55em; font-weight: 600; color: var(--text-secondary); margin-left: 3px; letter-spacing: 0; }
.sbi-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sbi-chip.up { color: #15803d; background: #dcfce7; } .sbi-chip.down { color: #b91c1c; background: #fee2e2; }
@media (prefers-color-scheme: dark) { .sbi-chip.up { color: #4ade80; background: #14351f; } .sbi-chip.down { color: #f87171; background: #3a1717; } }
:root[data-theme="dark"] .sbi-chip.up { color: #4ade80; background: #14351f; } :root[data-theme="dark"] .sbi-chip.down { color: #f87171; background: #3a1717; }
.sbi-prev { font-size: 12px; color: var(--text-secondary); white-space: nowrap; } .sbi-prev b { color: var(--text); font-weight: 600; }
.sbi-tile .sbi-spark { position: relative; height: 48px; margin-top: 6px; width: auto; cursor: pointer; }
.sbi-tile[data-h="2"] .sbi-spark { height: 120px; } .sbi-tile[data-h="3"] .sbi-spark, .sbi-tile[data-h="4"] .sbi-spark { height: 200px; }
.sbi-tile .sbi-spark canvas { width: 100% !important; height: 100% !important; }
/* tablas */
.sbi-table td.desc { max-width: 240px; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.sbi-table td.has-bar { background: linear-gradient(to left, color-mix(in srgb, var(--accent) 16%, transparent) var(--w, 0%), transparent var(--w, 0%)); }
.sbi-table td.is-neg, .sbi-table .neg { color: #dc2626; font-weight: 600; }
.sbi-pill { display: inline-block; min-width: 54px; text-align: right; padding: 1px 7px; border-radius: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sbi-pill.up { color: #15803d; background: #dcfce7; } .sbi-pill.mid { color: #a16207; background: #fef3c7; } .sbi-pill.down { color: #b91c1c; background: #fee2e2; }
@media (prefers-color-scheme: dark) { .sbi-pill.up { color: #4ade80; background: #14351f; } .sbi-pill.mid { color: #fbbf24; background: #33290f; } .sbi-pill.down { color: #f87171; background: #3a1717; } }
.sbi-table tbody tr:hover td { background-color: var(--bg-hover); }
.sbi-table tbody tr:hover td.has-bar { background: linear-gradient(to left, color-mix(in srgb, var(--accent) 22%, transparent) var(--w, 0%), var(--bg-hover) var(--w, 0%)); }
/* gráficos */
.sbi-canvas { height: 300px; }
/* barra de datos fina bajo la cifra, no un bloque de color */
.sbi-table td.has-bar { background: linear-gradient(color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 55%, transparent)) no-repeat right 7px bottom 4px / calc(var(--w, 0%) * .85) 3px; }
.sbi-table tbody tr:hover td.has-bar { background: linear-gradient(color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 70%, transparent)) no-repeat right 7px bottom 4px / calc(var(--w, 0%) * .85) 3px, var(--bg-hover); }
/* minigráfico: más alto (con eje de meses), a todo el ancho y detalle flotante */
.sbi-tile .sbi-spark { height: 64px; width: 100%; align-self: stretch; }
.sbi-tile[data-h="2"] .sbi-spark { height: 130px; } .sbi-tile[data-h="3"] .sbi-spark, .sbi-tile[data-h="4"] .sbi-spark { height: 210px; }
.sbi-spark-tip { position: fixed; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .1s; min-width: 130px; padding: 7px 10px; border-radius: 8px; background: #171717; color: #fff; font-size: 12px; line-height: 1.45; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.sbi-spark-tip strong { display: block; font-size: 11.5px; text-transform: capitalize; margin-bottom: 2px; }
.sbi-spark-tip div { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sbi-spark-tip div i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.sbi-spark-tip b { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }
.sbi-spark-tip .v i.up { color: #4ade80; } .sbi-spark-tip .v i.down { color: #f87171; } .sbi-spark-tip .v i { font-style: normal; font-weight: 700; width: auto; height: auto; background: none !important; }
.sbi-tile .sbi-dim { white-space: nowrap; }
/* cifras en tamaño estándar: más aire y minigráfico más alto, sin recortes */
.sbi-tile.sbi-cifra { min-height: 236px; padding: 14px 16px 12px; }
.sbi-tile.sbi-cifra .sbi-value { font-size: 30px; }
.sbi-tile.sbi-cifra .sbi-spark { height: 88px; margin-top: 8px; }
.sbi-tile.sbi-cifra[data-h="2"] .sbi-spark { height: 170px; } .sbi-tile.sbi-cifra[data-h="3"] .sbi-spark, .sbi-tile.sbi-cifra[data-h="4"] .sbi-spark { height: 260px; }
.sbi-tile.sbi-cifra h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbi-tile.sbi-cifra .sbi-kpi-top { flex-wrap: nowrap; } .sbi-tile.sbi-cifra .sbi-chip { flex: none; }
@media (max-width: 1280px) { .sbi-tile.sbi-cifra .sbi-value { font-size: 26px; } }
/* SageBI: comparativa de conceptos (ventas · coste · margen) */
.sbi-cmp { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; }
.sbi-cmp-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 82px; gap: 12px; align-items: center; }
.sbi-cmp-lab { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.sbi-cmp-lab i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sbi-cmp-bars { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sbi-cmp-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sbi-cmp-bar .b { display: block; height: 18px; border-radius: 4px; min-width: 2px; flex: none; max-width: calc(100% - 110px); }
.sbi-cmp-bar.prev .b { height: 8px; background: #cbd5e1; }
.sbi-cmp-bar b { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sbi-cmp-bar.prev b { font-size: 11.5px; font-weight: 500; color: var(--text-secondary); }
.sbi-cmp-bar small { font-size: 10.5px; color: var(--text-secondary); }
.sbi-cmp-var { text-align: right; }
.sbi-cmp-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-secondary); }
.sbi-cmp-foot b { color: var(--text); font-size: 14px; }
.sbi-canvas.sbi-canvas-cmp { height: 280px; }
.sbi-donut { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 18px; align-items: center; }
.sbi-donut-c { position: relative; height: 210px; }
.sbi-donut-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.sbi-donut-mid b { font-size: 22px; font-weight: 700; } .sbi-donut-mid b .u { font-size: .6em; color: var(--text-secondary); margin-left: 2px; }
.sbi-donut-mid small { font-size: 11.5px; color: var(--text-secondary); }
.sbi-donut-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sbi-donut-leg li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 52px auto; gap: 8px; align-items: center; font-size: 13px; }
.sbi-donut-leg li i { width: 10px; height: 10px; border-radius: 3px; }
.sbi-donut-leg li b { font-variant-numeric: tabular-nums; } .sbi-donut-leg li em { font-style: normal; color: var(--text-secondary); font-size: 12px; text-align: right; }
.sbi-donut-leg li.aa { grid-template-columns: 12px minmax(0, 1fr) auto; color: var(--text-secondary); font-size: 12px; border-top: 1px dashed var(--border); padding-top: 8px; } .sbi-donut-leg li.aa span { grid-column: 2; }
@media (max-width: 700px) { .sbi-cmp-row { grid-template-columns: 100px minmax(0, 1fr) 70px; } .sbi-donut { grid-template-columns: 1fr; } }
.sbi-kpi-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 18px; }
.sbi-verif { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; white-space: nowrap; cursor: help; }
.sbi-verif.ok { color: #15803d; background: color-mix(in srgb, #16a34a 10%, transparent); }
.sbi-verif.ko { color: #b45309; background: color-mix(in srgb, #f59e0b 14%, transparent); }
.sbi-table-foot .sbi-spacer { flex: 1; }
/* SageBI: paginación de tablas y gráficos vacíos */
.sbi-table-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.sbi-pager { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.sbi-pager-txt { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-right: 6px; } .sbi-pager-txt i { font-style: normal; opacity: .7; }
.sbi-pager .sbi-pg-nav { width: 28px; height: 28px; font-size: 15px; line-height: 1; font-weight: 600; padding: 0; }
.sbi-empty { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 160px; color: var(--text-secondary); font-size: 13px; text-align: center; padding: 16px; border: 1px dashed var(--border); border-radius: 8px; }
.sbi-empty svg { color: #16a34a; flex: none; }

/* ── Selector de aplicaciones en la marca de la barra superior, al estilo de Google (02/11/2026) ──
   Logo pequeño + «SageMind» + rejilla de 9 puntos; al abrir, los puntos giran y las apps entran
   como baldosas de color. Sustituye a ScanZen y APPMailing del menú ⋮ de la barra lateral. */
.app-switch { display: flex; min-width: 0; }
.app-switch-btn {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%;
  margin: -3px 0; padding: 3px 7px; border: 0; border-radius: 9px;
  background: transparent; color: var(--text); font: inherit; cursor: pointer;
  transition: background .15s ease;
}
.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: 1px; }
.app-switch-btn .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-switch-mark { width: 18px; height: 18px; flex: none; border-radius: 5px; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.app-switch-btn:hover .app-switch-mark { transform: rotate(-10deg) scale(1.1); }
.app-switch-waffle {
  display: grid; grid-template-columns: repeat(3, 3px); gap: 2px; flex: none;
  padding: 2px; margin-left: 1px; color: var(--text-muted);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), color .15s ease;
}
.app-switch-waffle i { display: block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; transition: transform .25s ease; }
.app-switch-btn:hover .app-switch-waffle { color: var(--accent); }
.app-switch-btn:hover .app-switch-waffle i:nth-child(odd) { transform: scale(1.35); }
.app-switch-btn[aria-expanded="true"] .app-switch-waffle { transform: rotate(45deg); color: var(--accent); }

/* Sin márgenes negativos en el botón (restaban 14 px al ancho y cortaban «SageMind»): la
   empresa se alinea con el logo con su propio sangrado. */
.app-switch + .brand-company { padding-left: 7px; margin-top: 6px; }   /* aire entre «SageMind» y la empresa (02/11) */
.app-switch-menu {
  position: fixed; top: 60px; left: 10px; z-index: 10000;   /* top/left los pone el JS bajo el botón */
  width: 304px; 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, .16), 0 2px 6px rgba(0, 0, 0, .06);
  transform-origin: 18px 0; animation: appSwitchIn .2s ease-out;
}
.app-switch-menu[hidden] { display: none; }
.app-switch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 6px 10px; font-size: 13px; font-weight: 650; color: var(--text); }
.app-switch-head small { font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: .02em; }
.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; cursor: pointer;
  transition: background .15s ease; animation: appTileIn .32s cubic-bezier(.34, 1.56, .64, 1) both;
}
.app-tile:nth-child(2) { animation-delay: .05s; }
.app-tile:nth-child(3) { animation-delay: .1s; }
.app-tile[hidden] { display: none; }
.app-tile:hover { background: var(--bg-hover); }
.app-tile:focus-visible { outline: none; background: var(--bg-hover); 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), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.quality-tile-icon { width: 58px; height: 58px; background: transparent; box-shadow: none; overflow: hidden; }
.quality-tile-icon img { display: block; width: 58px; height: 58px; object-fit: cover; border-radius: 13px; }
.app-tile:hover .app-tile-icon, .app-tile:focus-visible .app-tile-icon { transform: translateY(-2px) rotate(-5deg); }
.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: 12.5px; font-weight: 600; line-height: 1.2; }
.app-tile-sub { font-size: 11px; line-height: 1.25; color: var(--text-muted); }
.app-tile.is-current .app-tile-sub { color: var(--accent-text); font-weight: 600; }
.app-switch-foot { margin: 10px 6px 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted); text-align: center; }
@keyframes appSwitchIn { from { opacity: 0; transform: translateY(-4px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes appTileIn { from { opacity: 0; transform: translateY(7px) scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .app-switch-menu { width: 288px; }
  .app-switch-btn { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-switch-menu, .app-tile { animation: none; }
  .app-switch-mark, .app-switch-waffle, .app-switch-waffle i, .app-tile-icon { transition: none; }
}

/* 06/11/2026: la rejilla que gira, un poco más grande y centrada con «SageMind»; la empresa pasa
   a la DERECHA del selector, en la misma línea, separada por un filete (antes iba debajo). */
.app-switch-btn .brand { line-height: 1.2; }
.app-switch-waffle {
  grid-template-columns: repeat(3, 4px); gap: 2.5px; padding: 1px; margin-left: 2px;
  align-self: center; transform-origin: 50% 50%;
}
.app-switch-waffle i { width: 4px; height: 4px; }
@media (min-width: 768px) {
  .brand-wrap { flex-direction: row; align-items: center; gap: 0; }
  .app-switch + .brand-company {
    margin: 0 0 0 4px; padding: 2px 0 2px 11px;
    border-left: 1px solid var(--border); font-size: 13px; line-height: 1.2;
    max-width: 280px;
  }
}

/* ── Dashboard «Centro de mando» (propuesta A, 02/11/2026) ──
   Cabecera con saludo y «Pregúntale a tu Sage», 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; } }

/* ── APPMailing: presentación para quien no lo tiene contratado (02/11/2026) ── */
.app-tile.is-discover .app-tile-icon::after {
  content: ""; position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%;
  background: #f97316; border: 2px solid var(--bg-elevated); animation: amlPing 2.4s ease-out infinite;
}
.app-tile.is-discover .app-tile-sub { color: #c2410c; font-weight: 600; }
[data-theme="dark"] .app-tile.is-discover .app-tile-sub { color: #fdba74; }
@keyframes amlPing { 0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(249, 115, 22, 0); } }
.aml { --aml-a: #fdba74; --aml-b: #ea580c; --aml-t: #c2410c; width: 100%; max-width: 1100px; margin: 0 auto; padding: 18px 28px 48px; box-sizing: border-box; color: var(--text); }
[data-theme="dark"] .aml { --aml-t: #fdba74; }
.aml h2 { margin: 0 0 14px; font-size: 18px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.aml h2 svg { color: var(--aml-b); }
.aml-muted { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.aml-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px; align-items: center;
  padding: 30px; border-radius: 22px; border: 1px solid var(--border); overflow: hidden;
  background: radial-gradient(110% 130% at 100% 0%, color-mix(in srgb, var(--aml-b) 18%, transparent) 0%, transparent 60%), var(--bg-elevated);
}
.aml-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 650;
  color: var(--aml-t); background: color-mix(in srgb, var(--aml-a) 30%, transparent); }
.aml-hero h1 { margin: 14px 0 10px; font-size: 30px; line-height: 1.15; letter-spacing: -.025em; }
.aml-hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--aml-b), #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aml-hero p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); max-width: 520px; }
.aml-cta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.aml-cta-row .btn { text-decoration: none; }
.aml-trust { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-muted); }
.aml-trust li { display: inline-flex; align-items: center; gap: 5px; } .aml-trust svg { color: var(--aml-b); }
/* Demostración */
.aml-demo { display: grid; gap: 10px; scroll-margin-top: 16px; }
.aml-demo-ctrl { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.aml-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--bg-hover); border: 1px solid var(--border); }
.aml-seg-btn { border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.aml-seg.is-small .aml-seg-btn { padding: 6px 8px; font-size: 12px; }
.aml-seg-btn[aria-pressed="true"] { background: var(--bg-elevated); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.aml-seg-btn:focus-visible, .aml-chip:focus-visible, .aml-pdf:focus-visible, .aml-faq summary:focus-visible { outline: 2px solid var(--aml-b); outline-offset: 2px; }
.aml-mail { position: relative; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .35); overflow: hidden; }
.aml-mail-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.aml-mail-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong, var(--border)); }
.aml-mail-bar span { margin-left: auto; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.aml-mail-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; }
.aml-mail-head b { display: block; font-size: 14px; } .aml-mail-head small { color: var(--text-muted); font-size: 12px; }
.aml-mail-logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: linear-gradient(145deg, var(--aml-a), var(--aml-b)); flex: none; }
.aml-mail-body { padding: 4px 16px 8px; font-size: 13.5px; line-height: 1.5; } .aml-mail-body p { margin: 0 0 4px; }
.aml-pdf { display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); margin: 4px 16px 0; padding: 9px 12px; border-radius: 11px; border: 1px dashed var(--border);
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.aml-pdf:hover { background: var(--bg-hover); }
.aml-pdf-ico { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #dc2626; background: color-mix(in srgb, #dc2626 12%, transparent); flex: none; }
.aml-pdf:not(.is-ready) .aml-pdf-ico::after { content: ""; position: absolute; inset: -3px; border-radius: 10px; border: 2px solid transparent; border-top-color: var(--aml-b); animation: amlSpin .8s linear infinite; }
.aml-pdf.is-ready { border-style: solid; border-color: color-mix(in srgb, var(--aml-b) 45%, var(--border)); }
.aml-pdf-txt { min-width: 0; display: grid; } .aml-pdf-txt b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aml-pdf-txt small { font-size: 11.5px; color: var(--text-muted); } .aml-pdf.is-ready .aml-pdf-txt small { color: var(--aml-t); font-weight: 600; }
.aml-pdf-see { margin-left: auto; font-size: 12px; font-weight: 650; color: var(--aml-t); }
@keyframes amlSpin { to { transform: rotate(360deg); } }
.aml-sheet { margin: 10px 16px 0; padding: 14px; border-radius: 10px; background: #fff; color: #111827; border: 1px solid #e5e7eb; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .4); animation: amlIn .25s ease; }
.aml-sheet[hidden] { display: none; }
@keyframes amlIn { from { opacity: 0; transform: translateY(-4px); } }
.aml-sheet-top { display: flex; align-items: center; gap: 10px; }
.aml-sheet-logo { display: grid; place-items: center; width: 54px; height: 28px; border-radius: 4px; border: 1px dashed #9ca3af; font-size: 8.5px; font-weight: 700; color: #6b7280; letter-spacing: .05em; }
.aml-sheet-top b { display: block; font-size: 12.5px; letter-spacing: .02em; } .aml-sheet-top small { font-size: 11px; color: #6b7280; }
.aml-sheet-rows { display: grid; gap: 6px; margin: 12px 0; } .aml-sheet-rows i { height: 7px; border-radius: 2px; background: #eef0f3; }
.aml-sheet-rows i:nth-child(2) { width: 85%; } .aml-sheet-rows i:nth-child(3) { width: 92%; } .aml-sheet-rows i:nth-child(4) { width: 60%; }
.aml-sheet-foot { display: flex; align-items: center; gap: 10px; }
.aml-barcode { width: 92px; height: 26px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 3px, #111 3px 4px, transparent 4px 7px, #111 7px 10px, transparent 10px 11px); }
.aml-qr { width: 30px; height: 30px; background: conic-gradient(#111 25%, transparent 0 50%, #111 0 75%, transparent 0) 0 0 / 7.5px 7.5px; outline: 3px solid #111; outline-offset: -3px; }
.aml-qr[hidden] { display: none; }
.aml-sheet-tot { margin-left: auto; font-size: 11.5px; color: #374151; } .aml-sheet-tot b { font-size: 13px; color: #111827; }
.aml-sheet-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 11.5px; color: #6b7280; }
.aml-mail-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px 16px; }
.aml-sent { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--status-success-text); } .aml-sent small { color: var(--text-muted); }
/* Antes / con APPMailing */
.aml-compare { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; }
.aml-col { padding: 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-elevated); }
.aml-col h2 { font-size: 15px; }
.aml-col ol { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 13.5px; color: var(--text-secondary); }
.aml-col.is-before ol { color: var(--text-muted); } .aml-col.is-before h2 svg { color: var(--text-muted); }
.aml-col.is-after { border-color: color-mix(in srgb, var(--aml-b) 40%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--aml-a) 16%, var(--bg-elevated)), var(--bg-elevated) 70%); }
.aml-col.is-after b { color: var(--text); }
.aml-arrow { display: grid; place-items: center; color: var(--aml-b); }
.aml-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.aml-card { display: flex; flex-direction: column; padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-elevated); transition: transform .15s ease, box-shadow .15s ease; }
.aml-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .3); }
.aml-card-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, var(--aml-a), var(--aml-b)); }
.aml-card h3 { margin: 12px 0 6px; font-size: 14.5px; }
.aml-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.aml-card small { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--aml-t); font-weight: 600; }
/* Calculadora + chat */
.aml-duo { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.aml-calc, .aml-chat { padding: 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-elevated); display: grid; gap: 12px; align-content: start; }
.aml-calc h2, .aml-chat h2 { margin: 0; font-size: 15px; }
.aml-calc label { display: grid; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.aml-calc label span { display: flex; justify-content: space-between; gap: 8px; } .aml-calc label b { color: var(--text); font-variant-numeric: tabular-nums; }
.aml-calc input[type="range"] { width: 100%; accent-color: var(--aml-b); }
.aml-calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aml-calc-out div { padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--aml-a) 18%, var(--bg)); display: grid; }
.aml-calc-out b { font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--aml-t); }
.aml-calc-out small { font-size: 12px; color: var(--text-muted); }
.aml-bubble { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.aml-bubble.is-me { justify-self: end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.aml-bubble.is-bot { justify-self: start; background: var(--bg-hover); border-bottom-left-radius: 4px; display: grid; gap: 8px; width: 88%; box-sizing: border-box; }
.aml-confirm { padding: 10px 12px; border-radius: 11px; background: var(--bg-elevated); border: 1px solid var(--border); display: grid; gap: 6px; font-size: 12.5px; }
.aml-confirm-row { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; } .aml-confirm-row svg { color: var(--text-muted); flex: none; }
.aml-confirm-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.aml-confirm-done { display: flex; align-items: center; gap: 6px; color: var(--status-success-text); font-weight: 600; }
.aml-confirm-done.is-off { color: var(--text-muted); }
.aml-confirm > .btn { justify-self: start; } .aml-confirm-done small { font-weight: 500; color: var(--text-muted); }
/* Preguntas */
.aml-faq { margin-top: 30px; }
.aml-faq details { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated); margin-bottom: 8px; }
.aml-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 12px; }
.aml-faq summary::-webkit-details-marker { display: none; }
.aml-faq summary svg { flex: none; color: var(--text-muted); transition: transform .2s ease; }
.aml-faq details[open] summary svg { transform: rotate(180deg); }
.aml-faq details p { margin: 0; padding: 0 16px 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.aml-steps { margin-top: 30px; }
.aml-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: aml; }
.aml-steps li { position: relative; padding: 14px 16px 14px 56px; border-radius: 14px; background: var(--bg-elevated); border: 1px solid var(--border); counter-increment: aml; }
.aml-steps li::before { content: counter(aml); position: absolute; left: 16px; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-weight: 750; font-size: 13px; color: var(--aml-t); background: color-mix(in srgb, var(--aml-a) 32%, transparent); }
.aml-steps li b { display: block; font-size: 14px; } .aml-steps li span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }
/* Formulario */
.aml-form { margin-top: 30px; padding: 22px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--aml-b) 30%, var(--border)); background: var(--bg-elevated); scroll-margin-top: 16px; }
.aml-form form { display: grid; gap: 12px; max-width: 660px; }
.aml-form form[hidden] { display: none; }
.aml-form-who { margin: -6px 0 2px; font-size: 13px; color: var(--text-muted); }
.aml-chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.aml-chips legend { width: 100%; padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; } .aml-chips legend small { font-weight: 500; color: var(--text-muted); }
.aml-chip { border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.aml-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--aml-a) 28%, var(--bg)); border-color: var(--aml-b); color: var(--text); font-weight: 600; }
.aml-chip[aria-pressed="true"]::before { content: "✓ "; color: var(--aml-t); }
.aml-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.aml-form label small { font-weight: 500; color: var(--text-muted); }
.aml-form input, .aml-form textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input, var(--bg)); color: var(--text); font: inherit; font-size: 14px; resize: vertical; }
.aml-form input:focus, .aml-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.aml-form-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aml-err { font-size: 13px; color: var(--status-error-text); }
.aml-done { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--status-success-bg); color: var(--status-success-text); margin-bottom: 12px; }
.aml-done p { margin: 3px 0 0; color: var(--text-secondary); font-size: 13px; } .aml-done b { color: var(--text); }
/* 06/11/2026: maqueta «todo desde el mismo sitio» y lista de problemas de siempre → con APPMailing */
.aml-app { border-radius: 16px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .35); overflow: hidden; min-width: 0; }
.aml-tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.aml-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 11px; border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; margin-bottom: -1px; }
.aml-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--aml-b); }
.aml-tab[aria-selected="true"] svg { color: var(--aml-b); }
.aml-tab:focus-visible, .aml-switch:focus-visible { outline: 2px solid var(--aml-b); outline-offset: 2px; }
.aml-pane { display: grid; padding: 6px 0; } .aml-pane[hidden] { display: none; }
.aml-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); transition: background .3s ease; }
.aml-row:last-child { border-bottom: 0; }
.aml-row.is-flash { background: color-mix(in srgb, var(--aml-a) 22%, transparent); }
.aml-row.is-ko { background: color-mix(in srgb, var(--status-error-bg, #fdecec) 70%, transparent); }
[data-theme="dark"] .aml-row.is-ko { background: color-mix(in srgb, var(--status-error-bg, #fdecec) 35%, transparent); }
.aml-row-main { display: grid; min-width: 0; flex: 1; gap: 1px; }
.aml-row-main b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aml-row-main small { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aml-row-main .aml-row-why { display: flex; align-items: center; gap: 4px; color: var(--status-error-text); white-space: normal; }
.aml-row .btn { flex: none; }
.aml-st { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; }
.aml-st.is-ok { color: var(--status-success-text); background: var(--status-success-bg); }
.aml-st.is-ko { color: var(--status-error-text); background: var(--status-error-bg, #fdecec); }
.aml-switch { position: relative; flex: none; width: 34px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: var(--border); cursor: pointer; transition: background .2s ease; }
.aml-switch i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s ease; }
.aml-switch[aria-checked="true"] { background: var(--aml-b); } .aml-switch[aria-checked="true"] i { transform: translateX(14px); }
.aml-app-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); background: var(--bg-elevated); min-height: 20px; }
.aml-app-foot small { color: var(--text-muted); } .aml-app-foot svg { color: var(--aml-b); flex: none; }
.aml-fix { margin-top: 26px; scroll-margin-top: 16px; }
.aml-fix > .aml-muted { margin: -6px 0 14px; }
.aml-fix-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.aml-fix-item { padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-elevated); display: grid; gap: 12px; align-content: start; }
.aml-fix-item h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; }
.aml-fix-item h3 .aml-card-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; }
.aml-fix-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.aml-fix-cols > div { padding: 10px 12px; border-radius: 12px; }
.aml-fix-cols small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.aml-fix-cols p { margin: 0; font-size: 13px; line-height: 1.5; }
.aml-fix-hoy { background: var(--bg-hover); } .aml-fix-hoy small { color: var(--text-muted); } .aml-fix-hoy p { color: var(--text-secondary); }
.aml-fix-con { background: color-mix(in srgb, var(--aml-a) 18%, var(--bg)); border: 1px solid color-mix(in srgb, var(--aml-b) 30%, transparent); }
.aml-fix-con small { color: var(--aml-t); } .aml-fix-con p { color: var(--text); }
@media (max-width: 1100px) { .aml-fix-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .aml-fix-cols { grid-template-columns: minmax(0, 1fr); } .aml-row { flex-wrap: wrap; } .aml-row-main { flex-basis: 100%; } }
@media (max-width: 1000px) { .aml-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aml-hero { grid-template-columns: minmax(0, 1fr); } .aml-demo { max-width: 560px; } }
@media (max-width: 767px) {
  .aml { padding: 12px 14px 32px; }
  .aml-hero { padding: 22px 16px; gap: 22px; }
  .aml-hero h1 { font-size: 24px; }
  .aml-demo-ctrl { justify-content: flex-start; }
  .aml-grid, .aml-steps ol, .aml-duo { grid-template-columns: minmax(0, 1fr); }
  .aml-compare { grid-template-columns: minmax(0, 1fr); } .aml-arrow { transform: rotate(90deg); }
  .aml-form { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { .app-tile.is-discover .app-tile-icon::after, .aml-pdf-ico::after, .aml-sheet { animation: none; } .aml-card, .aml-faq summary svg { transition: none; } }

/* WhatsApp de la empresa (Configuración, administradores) · API oficial de Meta. Copiado del
   backoffice (#waBody, que venía de MedDocs → Integraciones → WhatsApp) el 11/11/2026. */
#waEmpresaBody { font-size: 13px; }
#waEmpresaBody .note { font-size: 12.5px; color: var(--text-secondary); margin: 8px 0 0; line-height: 1.5; }
#waEmpresaBody .warn-box { margin-top: 10px; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.5;
  background: var(--status-warning-bg); border: 1px solid var(--status-warning-border); color: var(--status-warning-text); }
#waEmpresaBody code { font-family: var(--font-mono); font-size: 11.5px; }
#waEmpresaBody .wa-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
#waEmpresaBody .wa-cab { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
#waEmpresaBody .wa-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
#waEmpresaBody .wa-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--border-strong); }
#waEmpresaBody .wa-dot.ok { background: var(--success); box-shadow: 0 0 0 4px var(--status-success-bg); }
#waEmpresaBody .wa-dot.warn { background: var(--warning); box-shadow: 0 0 0 4px var(--status-warning-bg); }
#waEmpresaBody .wa-dot.bad { background: var(--danger); box-shadow: 0 0 0 4px var(--status-error-bg); }
#waEmpresaBody .wa-dot.info { background: var(--accent); }
#waEmpresaBody .wa-mal { color: var(--status-error-text); }
#waEmpresaBody .wa-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
#waEmpresaBody .wa-datos > div { background: var(--bg-subtle, var(--bg-secondary)); border-radius: 8px; padding: 8px 11px; min-width: 0; }
#waEmpresaBody .wa-datos span { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
#waEmpresaBody .wa-datos b { display: block; font-size: 13.5px; margin-top: 2px; overflow-wrap: anywhere; }
#waEmpresaBody .wa-acc { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
#waEmpresaBody .wa-fila { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 300px; max-width: 460px; align-items: center; }
#waEmpresaBody .wa-fila input { flex: 1 1 160px; min-width: 0; }
#waEmpresaBody .wa-fld > .wa-fila { flex: 0 0 auto; }
#waEmpresaBody .wa-fld { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; min-width: 0; }
#waEmpresaBody .wa-fld > label { font-size: 12.5px; font-weight: 600; }
#waEmpresaBody .wa-fld > input { width: 100%; }
#waEmpresaBody .wa-sec { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-top: 12px; background: var(--bg-card, var(--bg)); }
#waEmpresaBody .wa-sec > h3 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 0 0 6px; }
#waEmpresaBody .wa-sec > h3 .grow { flex: 1; }
#waEmpresaBody .wa-ajustes { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-subtle, var(--bg-secondary)); }
#waEmpresaBody .wa-ajustes > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px; cursor: pointer; list-style: none; font-weight: 700; }
#waEmpresaBody .wa-ajustes > summary::-webkit-details-marker { display: none; }
#waEmpresaBody .wa-ajustes > summary::after { content: "▾"; color: var(--text-muted); margin-left: auto; }
#waEmpresaBody .wa-ajustes[open] > summary::after { content: "▴"; }
#waEmpresaBody .wa-ajustes > .wa-in { padding: 0 12px 12px; }
#waEmpresaBody .wa-pasos { list-style: none; margin: 0; padding: 0; }
#waEmpresaBody .wa-pasos li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
#waEmpresaBody .wa-pasos li:last-child { border-bottom: 0; }
#waEmpresaBody .wa-pasos .n { font-size: 11px; font-weight: 700; color: var(--text-muted); width: 16px; flex: none; padding-top: 1px; }
#waEmpresaBody .wa-pasos .wa-dot { margin-top: 4px; }
#waEmpresaBody .wa-pasos .grow { flex: 1 1 150px; min-width: 0; }
#waEmpresaBody .sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.5; }
#waEmpresaBody .wa-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
#waEmpresaBody .wa-donde-btn { background: none; border: 0; color: var(--accent-text, var(--accent)); font-size: 11.5px; cursor: pointer; padding: 0 0 0 6px; font-weight: 600; }
#waEmpresaBody .wa-donde { background: var(--bg-subtle, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; margin-top: 6px; font-size: 12px; line-height: 1.5; }
#waEmpresaBody .wa-donde p { margin: 6px 0 0; }
#waEmpresaBody .wa-ruta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 11.5px; font-weight: 600; }
#waEmpresaBody .wa-ruta span { background: var(--bg-card, var(--bg)); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
#waEmpresaBody .wa-ruta i { font-style: normal; color: var(--text-muted); }
#waEmpresaBody .wa-mock { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 8px; background: var(--bg-card, var(--bg)); }
#waEmpresaBody .wa-mock-cab { font-size: 11px; font-weight: 700; padding: 5px 9px; background: var(--bg-subtle, var(--bg-secondary)); border-bottom: 1px solid var(--border); }
#waEmpresaBody .wa-mock-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 9px; font-size: 11.5px; }
#waEmpresaBody .wa-mock-row.hl { background: var(--status-warning-bg); }
#waEmpresaBody .wa-fmt { font-size: 11.5px; color: var(--status-error-text); }
#waEmpresaBody .wa-fmt:empty { display: none; }
#waEmpresaBody .wa-enlace { font-size: 12px; font-weight: 600; color: var(--accent-text, var(--accent)); }
#waEmpresaBody .wa-guia ol { margin: 6px 0 0; padding-left: 18px; }
#waEmpresaBody .wa-guia li { margin: 0 0 10px; }
#waEmpresaBody .wa-guia summary { cursor: pointer; }
#waEmpresaBody .wa-guia summary h3 { display: inline; font-size: 13.5px; }
#waEmpresaBody .wa-tabla-wrap { overflow-x: auto; }
#waEmpresaBody .wa-tabla { width: 100%; border-collapse: collapse; }
#waEmpresaBody .wa-tabla td, #waEmpresaBody .wa-tabla th { white-space: normal; text-align: left; vertical-align: top; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
#waEmpresaBody .wa-flash { animation: waFlash 1.1s ease-out; }
@keyframes waFlash { from { box-shadow: 0 0 0 3px var(--accent-soft, var(--status-warning-bg)); } to { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 760px) { #waEmpresaBody .wa-campos { grid-template-columns: 1fr; } }