/* ═══════════════════════════════════════════════════════════════════════════
   Victor Engineer 2 — Layout B (Work Mode)
   Tema por defecto: Cian Dark. Temas alternativos: Aurora, Nordic Light.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Cian Dark (defecto) */
  --bg:         #0f1117;
  --surface:    #161820;
  --surface-2:  #1e2029;
  --border:     #2a2d3a;
  --text:       #cdd6f4;
  --muted:      #6c7086;
  --accent:     #89dceb;
  --accent-rgb: 137,220,235;
  --green:      #a6e3a1;
  --amber:      #f9e2af;
  --red:        #f38ba8;
  --radius:     10px;
  --sidebar-w:  200px;
  --right-w:    270px;

  /* Alias legacy (mantiene compatibilidad con componentes existentes) */
  --panel:      var(--surface);
  --panel-2:    var(--surface-2);
  --accent-2:   var(--green);
  --danger:     var(--red);
}

/* ── Tema Aurora ─────────────────────────────────────────────────────────── */
[data-theme="aurora"] {
  --bg:         #1a1625;
  --surface:    #221d2e;
  --surface-2:  #2a2438;
  --border:     #3d3550;
  --text:       #e2d9f3;
  --muted:      #7a6f8a;
  --accent:     #c0a0f8;
  --accent-rgb: 192,160,248;
  --green:      #a0e8b0;
  --amber:      #f5d08a;
  --red:        #f08098;
}

/* ── Tema Nordic Light ────────────────────────────────────────────────────── */
[data-theme="nordic"] {
  --bg:         #f0f2f8;
  --surface:    #ffffff;
  --surface-2:  #e8ecf4;
  --border:     #cdd0dc;
  --text:       #2e3249;
  --muted:      #7a7f96;
  --accent:     #4338ca;
  --accent-rgb: 67,56,202;
  --green:      #1a7a4a;
  --amber:      #92600a;
  --red:        #c0392b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* El atributo HTML [hidden] debe ganar siempre, aunque otra regla de la misma
   especificidad (p. ej. ".lib-bulk-bar { display: flex }") se declare después. */
[hidden] { display: none !important; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────
   LOGIN
   ───────────────────────────────────────────────────────────────────────── */
.login-body {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; overflow: auto;
}
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 40px; width: 340px;
  display: flex; flex-direction: column; gap: 14px; text-align: center;
}
.login-card h1 { font-size: 22px; }
.login-sub { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.login-card input, .login-card button {
  padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px;
}
.login-card input { background: var(--surface-2); color: var(--text); }
.login-card button {
  background: var(--accent); color: var(--bg); border: none;
  cursor: pointer; font-weight: 600;
}
.login-card button:hover { opacity: .88; }
.login-error {
  background: rgba(243,139,168,.12); color: var(--red);
  padding: 8px; border-radius: 6px; font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────────────────
   LAYOUT 3 COLUMNAS
   ───────────────────────────────────────────────────────────────────────── */
.layout {
  display: flex; height: 100vh; overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w); flex: none;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  padding: 0 0 12px;
}
.sidebar-brand {
  padding: 14px 14px 10px;
  font-weight: 800; font-size: 15px; color: var(--accent);
  border-bottom: 1px solid var(--border);
  letter-spacing: -.3px;
}
.sidebar-brand span { color: var(--text); }
.sec-lbl {
  padding: 14px 14px 4px;
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.nav-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 14px;
  background: none; border: none; color: var(--muted);
  font-size: 13px; cursor: pointer; text-align: left;
  border-radius: 0; text-decoration: none;
}
.nav-btn:hover { background: var(--surface-2); color: var(--text); }
.nav-btn.active { background: var(--surface-2); color: var(--accent); }
.nav-btn .badge {
  margin-left: auto;
  background: rgba(var(--accent-rgb),.18); color: var(--accent);
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
}
.nav-btn.logout { margin-top: auto; color: var(--red); }
.sidebar-agents { flex: 1; overflow-y: auto; }
.sidebar-foot {
  padding: 10px 14px 0;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.sidebar-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(var(--accent-rgb),.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--accent); flex: none;
}
.sidebar-user { font-size: 12px; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }

/* ── Main (topbar + workspace) ── */
.main {
  flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}

/* ── Topbar ── */
.topbar {
  height: 48px; flex: none;
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
}
.topbar-title { font-size: 15px; font-weight: 600; flex: none; }
.topbar-search {
  flex: 1; max-width: 320px; position: relative;
}
.topbar-search input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 6px 10px 6px 30px;
  border-radius: 8px; font-size: 13px;
}
.topbar-search::before {
  content: "🔍"; position: absolute; left: 8px; top: 50%;
  transform: translateY(-50%); font-size: 12px; pointer-events: none;
}
.topbar-spacer { flex: 1; }
.icon-btn {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 7px;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.btn-g {
  background: rgba(var(--accent-rgb),.15); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.3);
  padding: 6px 12px; border-radius: 8px; font-size: 12px; cursor: pointer;
}
.btn-g:hover { background: rgba(var(--accent-rgb),.25); }
.btn-p {
  background: var(--accent); color: var(--bg);
  border: none; padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.btn-p:hover { opacity: .88; }

/* ── Workspace ── */
.workspace {
  flex: 1; display: flex; overflow: hidden;
}

/* ── Center panel ── */
.center {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
}

/* Content scrollable (módulos) */
.content {
  flex: 1; overflow-y: auto; padding: 20px 22px; min-height: 0;
}

/* ── Right panel ── */
.right {
  width: var(--right-w); flex: none;
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.right-scroll { flex: 1; overflow-y: auto; padding: 14px 14px; }
.rs-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-bottom: 8px; margin-top: 14px;
}
.rs-title:first-child { margin-top: 0; }

/* Detail card */
.detail-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 12px; font-size: 13px;
}
.detail-card .dc-name { font-weight: 600; margin-bottom: 6px; word-break: break-word; }
.detail-card .dc-meta { color: var(--muted); font-size: 11px; margin-bottom: 8px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tag {
  background: rgba(var(--accent-rgb),.14); color: var(--accent);
  font-size: 10px; padding: 2px 7px; border-radius: 8px;
}
.act-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.abt {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 11px; padding: 4px 9px;
  border-radius: 7px; cursor: pointer;
}
.abt:hover { border-color: var(--accent); color: var(--accent); }

/* Activity list */
.act-list { display: flex; flex-direction: column; gap: 6px; }
.ai {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--border);
}
.ai:last-child { border-bottom: none; }
.ai-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex: none; margin-top: 4px;
}
.ai-dot.green { background: var(--green); }
.ai-dot.amber { background: var(--amber); }
.ai-dot.blue  { background: var(--accent); }
.ai-txt { color: var(--muted); line-height: 1.4; }
.ai-txt strong { color: var(--text); }

/* Quick grid */
.quick-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.qb {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px; cursor: pointer;
  font-size: 11px; text-align: center; color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.qb:hover { border-color: var(--accent); }
.qb span:first-child { font-size: 18px; }

/* System status */
.sys-rows { display: flex; flex-direction: column; gap: 5px; }
.sr {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.sr:last-child { border-bottom: none; }
.sr-lbl { color: var(--muted); }
.sr-ok  { color: var(--green); font-size: 11px; }
.sr-warn { color: var(--amber); font-size: 11px; }
.sr-err  { color: var(--red); font-size: 11px; }

/* ─────────────────────────────────────────────────────────────────────────
   MÓDULO HOME (Dashboard de inicio)
   ───────────────────────────────────────────────────────────────────────── */
.module { display: none; }
.module.active { display: flex; flex-direction: column; height: 100%; }

/* Solo para módulos que no son home: usar display:block */
.module.active.legacy-module { display: block; }

/* Área scrollable superior del home */
.home-scroll {
  flex: 1; overflow-y: auto; min-height: 0;
}

/* Hero banner */
.hero {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.hero-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.hero h2 { font-size: 18px; font-weight: 700; }
.hero h2 span { color: var(--accent); }
.hero-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.stat-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.stat-chip {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px;
  font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.stat-chip strong { color: var(--text); font-size: 15px; }

/* Fila de cards de módulos */
.mod-row {
  display: flex; gap: 10px; padding: 14px 22px;
  flex: none; overflow-x: auto;
  border-bottom: 1px solid var(--border);
}
.mc {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; cursor: pointer;
  min-width: 130px; flex: 1; max-width: 170px;
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color .15s;
}
.mc:hover { border-color: var(--accent); }
.mc-icon { font-size: 20px; }
.mc-name { font-size: 13px; font-weight: 600; }
.mc-desc { font-size: 11px; color: var(--muted); line-height: 1.35; }

/* Documentos recientes */
.home-docs {
  flex: none; padding: 0 22px 12px;
  border-bottom: 1px solid var(--border);
}
.home-docs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 8px;
  font-size: 13px; font-weight: 600;
}
.home-docs-head a {
  font-size: 11px; color: var(--accent); text-decoration: none;
  cursor: pointer;
}
.doc-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.doc-row:last-child { border-bottom: none; }
.doc-row:hover .doc-row-name { color: var(--accent); }
.doc-row-icon { font-size: 15px; flex: none; width: 24px; text-align: center; }
.doc-row-name { font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row-meta { font-size: 11px; color: var(--muted); flex: none; }

/* ── Chat Panel Victor 2.0 ── */
.chat-panel {
  flex: none; flex-shrink: 0;
  display: flex; flex-direction: column;
  height: 240px; border-top: 1px solid var(--border);
}
.chat-panel-header {
  flex: none; padding: 8px 14px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; background: var(--surface);
}
.chat-panel-header .cp-name { font-weight: 600; color: var(--accent); }
.chat-panel-header .cp-sub { font-size: 11px; color: var(--muted); }
.chat-panel-header .cp-spacer { flex: 1; }
.cp-new-btn {
  background: none; border: none; color: var(--muted);
  font-size: 11px; cursor: pointer; padding: 3px 7px; border-radius: 6px;
}
.cp-new-btn:hover { background: var(--surface-2); color: var(--text); }
.chat-panel-log {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 10px;
}
.chat-panel-input {
  flex: none; padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px; align-items: flex-end;
  background: var(--surface);
}
.chat-panel-input textarea {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 9px 11px; border-radius: 9px;
  font-size: 13px; font-family: inherit;
  resize: none; min-height: 38px; max-height: 120px;
}
.cp-send {
  background: var(--accent); color: var(--bg); border: none;
  padding: 9px 14px; border-radius: 9px; font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.cp-send:hover { opacity: .88; }
.cp-attach {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); font-size: 16px;
  width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cp-attach:hover { border-color: var(--accent); color: var(--accent); }
.cp-go-agent {
  background: none; border: 1px solid var(--border); color: var(--muted);
  font-size: 11px; padding: 4px 8px; border-radius: 7px; cursor: pointer;
}
.cp-go-agent:hover { border-color: var(--accent); color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────────────
   MODAL DE CONFIGURACIÓN
   ───────────────────────────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; display: none;
}
.overlay.open { display: flex; }
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px; width: min(640px, 94vw);
  max-height: 85vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
}
.modal-head h3 { font-size: 16px; font-weight: 700; }
.modal-close {
  background: none; border: none; color: var(--muted);
  font-size: 20px; cursor: pointer; line-height: 1;
}
.modal-close:hover { color: var(--text); }

/* Selector de temas */
.themes-row { display: flex; gap: 10px; flex-wrap: wrap; }
.th-btn {
  flex: 1; min-width: 110px; padding: 12px;
  border-radius: 10px; border: 2px solid var(--border); cursor: pointer;
  background: var(--surface-2); text-align: center;
  font-size: 12px; color: var(--muted);
  transition: border-color .15s;
}
.th-btn:hover { border-color: var(--accent); }
.th-btn.active { border-color: var(--accent); color: var(--text); }
.th-btn .th-swatch {
  height: 28px; border-radius: 6px; margin-bottom: 6px;
}

/* Columnas de checkboxes */
.cfg-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.cc { display: flex; flex-direction: column; gap: 6px; }
.cc h4 { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.ci {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; cursor: pointer; color: var(--text);
}
.ci input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }

/* ─────────────────────────────────────────────────────────────────────────
   COMPONENTES EXISTENTES (compatibilidad total con Extractor, Biblioteca,
   Tareas, Agente sin cambios)
   ───────────────────────────────────────────────────────────────────────── */

.module-head { margin-bottom: 20px; }
.module-head h2 { font-size: 24px; margin-bottom: 14px; }
.placeholder { color: var(--muted); font-style: italic; }

.subtabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border); }
.subtab {
  background: none; border: none; color: var(--muted);
  padding: 10px 16px; cursor: pointer; font-size: 14px;
  border-bottom: 2px solid transparent;
}
.subtab:hover:not(.disabled) { color: var(--text); }
.subtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.subtab.disabled { opacity: .4; cursor: not-allowed; }

.tool { display: none; gap: 24px; margin-top: 22px; }
.tool.active { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .tool.active { grid-template-columns: 1fr; } }

.tool-input { display: flex; flex-direction: column; gap: 12px; }
.tool-input label { font-size: 13px; color: var(--muted); }
.tool-input input {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 11px 13px; border-radius: 8px; font-size: 14px;
}
.tool-input .row { display: flex; gap: 10px; }
.tool-input .row input { flex: 1; }
.tool-input textarea {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 11px 13px; border-radius: 8px; font-size: 14px;
  min-height: 200px; resize: vertical; font-family: inherit;
}
.tool-input select {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 11px 13px; border-radius: 8px; font-size: 14px;
}
.tool-input input[type="file"] {
  background: var(--surface-2); border: 1px dashed var(--border);
  color: var(--muted); padding: 16px; border-radius: 8px; font-size: 13px;
}
.hint { font-size: 11.5px; color: var(--muted); }

.btn-primary {
  background: var(--green); color: #0f1117; border: none;
  padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px;
}
.btn-primary:hover { opacity: .88; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-ghost {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.btn-ghost:disabled { opacity: .4; cursor: not-allowed; }
a.btn-ghost { text-decoration: none; display: inline-flex; align-items: center; }

.status { font-size: 13px; min-height: 18px; color: var(--muted); }
.status.working { color: var(--accent); }
.status.ok { color: var(--green); }
.status.err { color: var(--red); }

.tool-output { display: flex; flex-direction: column; gap: 8px; }
.output-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
.md-preview {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  font-family: "Cascadia Code", Consolas, monospace; font-size: 12.5px;
  white-space: pre-wrap; word-break: break-word;
  height: 420px; overflow-y: auto; color: var(--text);
}

/* ── Biblioteca ── */
.lib-areas { display: flex; gap: 8px; margin-top: 6px; border-bottom: 1px solid var(--border); }
.lib-area {
  background: none; border: none; color: var(--muted);
  padding: 9px 14px; cursor: pointer; font-size: 13px;
  border-bottom: 2px solid transparent;
}
.lib-area:hover { color: var(--text); }
.lib-area.active { color: var(--accent); border-bottom-color: var(--accent); }

.lib-toolbar {
  display: flex; gap: 6px; align-items: center; margin-top: 12px;
  flex-wrap: nowrap;
}
.lib-toolbar > * { flex: none; }
.lib-toolbar .btn-ghost { padding: 6px 9px; }
.lib-search { flex: 1 1 90px; min-width: 90px; }
.lib-actions { display: flex; gap: 5px; flex-wrap: nowrap; flex: none; }

.lib-ext {
  font-size: 10px; color: var(--accent); background: rgba(var(--accent-rgb),.15);
  padding: 1px 6px; border-radius: 8px; vertical-align: middle;
}
.lib-binary { display: flex; align-items: center; justify-content: center; padding: 20px; }
.lib-binary img { max-width: 100%; max-height: 380px; border-radius: 8px; border: 1px solid var(--border); }
/* Imagen como documento: se ajusta al ANCHO del panel (igual que el PDF), se alinea
   arriba y desplaza con scroll si es alta; sin el tope de 380px. */
.lib-image { align-items: flex-start; justify-content: center; overflow: auto; padding: 12px; }
.lib-image img { max-width: 100%; max-height: none; height: auto; }

/* Previsualización inline: PDF / Word / Excel / Markdown enriquecido */
.lib-pdf-frame {
  width: 100%; height: 640px; border: 1px solid var(--border);
  border-radius: var(--radius); background: #fff;
}
.lib-binary #lib-office-preview,
#lib-office-preview {
  /* display:block (no el flex centrado de .lib-binary): así el contenido ancho de
     Word/Excel se alinea a la izquierda y se puede DESPLAZAR en horizontal en vez de
     quedar centrado y cortado sin scroll. */
  display: block;
  width: 100%; max-height: 640px; overflow: auto; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
}
.docx-preview-wrapper { background: #fff; border-radius: 6px; }
/* docx-preview aplica el tamaño de fuente del Word original como estilo en
   línea en cada párrafo/span; solo !important puede igualarlo al resto de la
   UI (13px, mismo tamaño que el nombre de archivo en el árbol). */
#lib-office-preview, #lib-office-preview * { font-size: 13px !important; }
/* docx-preview genera su propio wrapper exterior con el nombre de nuestra
   className + "-wrapper" (aquí "docx-preview-wrapper-wrapper") y lo centra
   con `align-items:center`. Combinado con el `overflow:auto` de
   #lib-office-preview, eso produce el clásico bug de "overflow centrado no
   scrolleable": cuando la página es más ancha que el panel (modo dividido),
   el navegador recorta el documento por AMBOS lados y `scrollLeft:0` no
   muestra el borde izquierdo real. Forzar alineación a la izquierda para que
   el documento empiece en scrollLeft:0 y el scroll horizontal (decisión ya
   tomada: preferir scroll con texto legible antes que encoger la tabla)
   funcione como se espera. */
#lib-office-preview .docx-preview-wrapper-wrapper {
  align-items: flex-start !important;
}
.lib-sheet-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.lib-sheet-tabs .btn-ghost.active { color: var(--accent); border-color: var(--accent); }
.lib-xlsx-table { overflow: auto; }
.lib-xlsx-table table { border-collapse: collapse; font-size: 12.5px; }
.lib-xlsx-table td, .lib-xlsx-table th {
  border: 1px solid var(--border); padding: 4px 8px; color: var(--text);
}
.md-render {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 40px;
  color: var(--text); font-size: 14.5px; line-height: 1.75;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  max-height: 640px; overflow-y: auto;
}
.md-render > *:first-child { margin-top: 0; }
.md-render h1, .md-render h2, .md-render h3, .md-render h4 {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--accent); font-weight: 700; line-height: 1.3;
  margin: 1.1em 0 0.5em;
}
.md-render h1 { font-size: 1.55em; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.md-render h2 { font-size: 1.3em; }
.md-render h3 { font-size: 1.1em; }
.md-render p { margin: 0.7em 0; }
.md-render ul, .md-render ol { margin: 0.6em 0; padding-left: 1.6em; }
.md-render li { margin: 0.25em 0; }
.md-render blockquote {
  margin: 0.8em 0; padding: 4px 16px; border-left: 3px solid var(--accent);
  color: var(--muted); font-style: italic;
}
.md-render hr { border: none; border-top: 1px solid var(--border); margin: 1.4em 0; }
.md-render table { border-collapse: collapse; margin: 14px 0; font-size: 0.92em; width: 100%; }
.md-render th { background: var(--surface-2); font-weight: 600; }
.md-render th, .md-render td { border: 1px solid var(--border); padding: 7px 12px; }
.md-render tr:nth-child(even) td { background: rgba(var(--accent-rgb), .04); }
.md-render code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-family: "Cascadia Code", Consolas, monospace; }
.md-render pre { background: var(--surface-2); padding: 12px 14px; border-radius: 8px; overflow-x: auto; line-height: 1.5; }
.md-render pre code { background: none; padding: 0; }
.md-render img { max-width: 100%; border-radius: 6px; }
.md-render a { color: var(--accent); text-decoration: underline; }

.lib-search { margin-top: 0; }
.lib-search input {
  width: 100%; max-width: 480px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 10px 13px; border-radius: 8px; font-size: 14px;
}
.lib-layout {
  display: flex; flex-direction: row;
  margin-top: 12px; height: calc(100vh - 195px); min-height: 0; gap: 0;
}
/* Reparto por defecto ~40/60: el panel derecho (documento) es más ancho para
   que el visor de PDF del navegador tienda a mostrar su barra completa y
   respetar el 100% en vez de caer en el modo compacto "ajustar al ancho".
   El divisor puede reajustar estos anchos arrastrándolo. */
.lib-list { flex: 0 0 40%; min-width: 120px; }
.lib-detail { flex: 0 0 calc(60% - 5px); min-width: 120px; }
.lib-splitter {
  flex: none; width: 5px; cursor: col-resize;
  background: var(--border); border-radius: 3px; margin: 0 6px;
  transition: background .15s;
}
.lib-splitter:hover, .lib-splitter.dragging { background: var(--accent); }
@media (max-width: 1000px) { .lib-splitter { display: none; } .lib-detail { display: none; } .lib-list { flex: 1; } }

/* ── Vista previa a ancho completo del centro (los laterales se mantienen) ── */
.lib-layout.preview-full .lib-list,
.lib-layout.preview-full .lib-splitter { display: none; }
/* El layout crece con su contenido (no se limita al alto de la ventana) y el panel
   deja de recortar, para que la barra de scroll de la PÁGINA (no la del panel) mueva
   toda la cabecera. Así, al bajar la barra hasta el fondo, el buscador, las pestañas,
   la toolbar de carpetas y la barra de archivo se desplazan hacia arriba y desaparecen,
   dejando el documento ocupando casi toda la pantalla. */
.lib-layout.preview-full { height: auto; }
.lib-layout.preview-full .lib-detail { flex: 1 1 100% !important; overflow: visible; }
.lib-layout.preview-full .md-render,
.lib-layout.preview-full .md-preview,
.lib-layout.preview-full #lib-office-preview,
.lib-layout.preview-full .lib-image {
  /* Alto NATURAL (sin min-height): el contenido corto no genera un hueco negro enorme
     ni deja scrollear "de más"; el contenido largo hace crecer la página y desplaza la
     cabecera arriba. Solo el PDF (iframe) usa alto fijo (regla de abajo). */
  height: auto; max-height: none;
  /* Ancho de lectura cómodo (texto y tablas de Word/Excel), centrado en el
     espacio disponible en vez de estirarse borde a borde. */
  max-width: 980px; margin-left: auto; margin-right: auto;
}
/* Visor de PDF casi tan alto como la ventana: al scrollear la cabecera fuera,
   ocupa la pantalla completa. Se usa un alto fijo en calc() (no flexbox), que es lo
   que el visor nativo de PDF necesita para renderizar bien su barra de herramientas. */
.lib-layout.preview-full .lib-pdf-frame { height: calc(100vh - 90px); }

/* ── Vista dividida (split): el visor mide ~el alto completo del panel, de modo que
   la cabecera (ruta + etiquetas) sobra y el panel puede desplazarla hacia arriba con
   su propia barra de scroll. Así, al bajar dentro del panel, la ruta y las etiquetas
   desaparecen y el documento ocupa todo el alto (mismo efecto que "Ancho completo",
   pero con el scroll del panel en vez del de la página, porque aquí el árbol va al
   lado). Alto fijo en calc() (no flex), que es lo que el visor nativo de PDF necesita.
   Los 217px = topbar/pestañas/toolbar/barra de archivo por encima del layout. */
/* PDF (iframe, sin alto intrínseco): alto fijo = alto del panel para llenarlo y que la
   cabecera se pueda desplazar (scroll-away) sin dejar hueco vacío. */
.lib-layout:not(.preview-full) .lib-pdf-frame {
  height: calc(100vh - 217px); max-height: none; flex: none; min-height: 0;
}
/* Resto (texto, Markdown, Word/Excel, imagen): alto NATURAL — el panel (.lib-detail)
   hace scroll. Si el contenido es corto se ve corto (sin vacío); si es largo, el panel
   scrollea y la cabecera se desplaza arriba. */
.lib-layout:not(.preview-full) .md-render,
.lib-layout:not(.preview-full) .md-preview,
.lib-layout:not(.preview-full) #lib-office-preview,
.lib-layout:not(.preview-full) .lib-image {
  height: auto; max-height: none; flex: none; min-height: 0;
}

/* ── Árbol unificado (carpetas + archivos anidados) ── */
.lib-tree-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
  white-space: nowrap; position: relative;
}
.lib-tree-row:hover { background: var(--surface-2); }
.lib-tree-file.active { background: rgba(var(--accent-rgb),.16); }
.lib-tree-file.selected { background: rgba(var(--accent-rgb),.09); }
.lib-tree-folder.is-target { background: rgba(var(--accent-rgb),.14); outline: 1px solid var(--accent); outline-offset: -1px; }
.lib-tree-tog { width: 14px; flex: none; text-align: center; color: var(--muted); font-size: 10px; }
.lib-tree-tog.spacer { visibility: hidden; }
.lib-tree-ic { flex: none; font-size: 13px; }
.lib-tree-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; color: var(--text);
}
.lib-tree-folder > .lib-tree-name { font-weight: 600; }
.lib-tree-ext { color: var(--muted); font-size: 11px; }
.lib-tree-count { flex: none; color: var(--muted); font-size: 11px; opacity: .7; padding-left: 6px; }
.lib-tree-empty { flex: none; color: var(--muted); font-style: italic; font-size: 11.5px; padding-left: 6px; }
.lib-tree-size {
  flex: none; margin-left: auto; padding-left: 10px;
  color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums;
}
.lib-tree-check {
  flex: none; width: 14px; height: 14px; cursor: pointer;
  accent-color: var(--accent); opacity: 0; transition: opacity .12s;
}
.lib-tree-file:hover .lib-tree-check,
.lib-tree-file.selected .lib-tree-check { opacity: 1; }
.lib-tree-facts {
  flex: none; margin-left: auto; padding-left: 8px;
  display: flex; gap: 2px; opacity: 0; transition: opacity .12s;
}
.lib-tree-folder:hover .lib-tree-facts { opacity: 1; }
.lib-tree-fact {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 2px 5px; border-radius: 5px;
}
.lib-tree-fact:hover { background: var(--surface); color: var(--accent); }
.lib-tree-fact.danger:hover { color: var(--red); }

.lib-list { display: block; overflow-y: auto; padding-right: 4px; }

/* Barra de archivo activo */
.lib-file-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(var(--accent-rgb),.05); border: 1px solid rgba(var(--accent-rgb),.2);
  border-radius: 8px; padding: 7px 12px; margin-bottom: 8px;
}
.lib-file-bar-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  flex: 1; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lib-file-bar-acts { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
#lib-fbar-close { opacity: .6; }
#lib-fbar-close:hover { opacity: 1; }

/* Menú «⋯ Más» — agrupa las acciones secundarias del archivo activo */
.lib-fbar-more-wrap { position: relative; }
.lib-fbar-more {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px; min-width: 170px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.lib-fbar-more .btn-ghost { width: 100%; text-align: left; }

/* Barra de acciones masivas */
.lib-bulk-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: rgba(var(--accent-rgb),.1); border: 1px solid rgba(var(--accent-rgb),.35);
  border-radius: 8px; padding: 7px 12px; margin-bottom: 8px;
}
.lib-bulk-count { font-size: 13px; font-weight: 600; color: var(--accent); margin-right: 4px; flex: none; }

.lib-detail {
  display: flex; flex-direction: column; gap: 7px;
  overflow-y: auto; min-height: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px;
}
.lib-detail-head { display: flex; flex-direction: column; gap: 8px; }
/* Cabecera compacta: la ruta ocupa una sola línea (con «…» si es larga; el path
   completo se ve en el tooltip) para dar más alto al visor del documento. */
.lib-detail-path {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--surface-2); border-radius: 6px; padding: 4px 9px;
}
.lib-detail-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-ghost.danger { color: var(--red); border-color: rgba(243,139,168,.4); }
.lib-tags-edit { display: flex; gap: 6px; }

/* Dropdown selector de agente al enviar doc al chat */
.lib-agent-picker {
  position: fixed; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 6px; z-index: 9999; min-width: 200px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.lib-agent-picker button {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border: none; background: none;
  color: var(--text); cursor: pointer; border-radius: 6px; font-size: 13px;
}
.lib-agent-picker button:hover { background: var(--surface); color: var(--accent); }
.lib-tags-edit input {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 5px 10px; border-radius: 7px; font-size: 13px;
}
.lib-tags-edit .btn-ghost { padding: 5px 10px; }
.lib-detail .md-preview { flex: 1; height: auto; }

/* ── Tareas ── */
.task-new { display: flex; gap: 10px; margin-bottom: 22px; max-width: 620px; }
.task-new input {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 11px 13px; border-radius: 8px; font-size: 14px;
}
.task-new select {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 11px 13px; border-radius: 8px; font-size: 14px;
}
.task-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .task-board { grid-template-columns: 1fr; } }
.task-col {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; min-height: 120px;
}
.task-col h3 { font-size: 13px; color: var(--muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
.task-col .task-list { display: flex; flex-direction: column; gap: 8px; }

.task-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--muted); border-radius: 8px; padding: 10px 12px;
}
.task-card.prio-alta  { border-left-color: var(--red); }
.task-card.prio-media { border-left-color: var(--accent); }
.task-card.prio-baja  { border-left-color: var(--muted); }
.task-card-title { font-size: 14px; margin-bottom: 8px; word-break: break-word; }
.task-card-foot { display: flex; justify-content: space-between; align-items: center; }
.task-prio { font-size: 10px; color: var(--muted); text-transform: uppercase; }
.task-card-actions { display: flex; gap: 4px; }
.task-card-actions button {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 2px 5px; border-radius: 5px;
}
.task-card-actions button:hover { background: var(--surface); color: var(--text); }
.task-card-actions button.danger:hover { color: var(--red); }

/* ── Agente (chat) ── */
.agent-picker { display: flex; align-items: center; gap: 8px; }
.agent-picker label { color: var(--muted); font-size: 13px; }
.agent-picker select {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  padding: 7px 10px; border-radius: 8px; font-size: 14px; cursor: pointer;
}
.agent-hint { color: var(--muted); font-size: 13px; margin: 2px 0 10px; min-height: 1em; }
.agent-desc {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 11px; font-size: 12px; color: var(--muted);
  margin-bottom: 8px; display: none;
}
.agent-desc.visible { display: block; }
.chat { display: flex; flex-direction: column; height: calc(100vh - 230px); }
.chat-log {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 4px 4px 16px;
}
.chat-msg {
  max-width: 78%; padding: 11px 14px; border-radius: 12px; font-size: 14px;
  line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.chat-msg.user { align-self: flex-end; background: #1e6875; color: #e8f8fb; border-bottom-right-radius: 3px; }
.chat-msg.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.chat-msg.thinking { color: var(--muted); font-style: italic; }
.chat-msg.error { color: var(--red); }
.chat-msg-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-att-img {
  max-width: 220px; max-height: 200px; border-radius: 8px; display: block;
  border: 1px solid rgba(255,255,255,.25); cursor: zoom-in;
}
.chat-input { display: flex; gap: 10px; align-items: flex-end; padding-top: 12px; border-top: 1px solid var(--border); }
.chat-input textarea {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 11px 13px; border-radius: 8px; font-size: 14px;
  resize: none; min-height: 48px; max-height: 160px; font-family: inherit;
}
.chat-input .btn-primary { white-space: nowrap; }

.btn-sm {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: 7px; font-size: 12.5px; cursor: pointer;
}
.btn-sm:hover { border-color: var(--accent); }
.btn-danger { color: var(--red); border-color: transparent; }
.btn-icon {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  width: 40px; min-height: 48px; border-radius: 8px; font-size: 17px; cursor: pointer;
}
.btn-icon:hover { border-color: var(--accent); }
.btn-icon.rec { background: var(--red); border-color: var(--red); color: #fff; }
.muted { color: var(--muted); font-style: italic; font-size: 13px; }

.agent-manage {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px;
}
.agent-manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agent-manage label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.agent-manage input, .agent-manage textarea, .agent-manage select {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 10px; border-radius: 7px; font-size: 14px; font-family: inherit;
}
.agent-manage textarea { resize: vertical; }
.agent-manage-actions { display: flex; gap: 8px; align-items: center; }
.agent-manage-actions .btn-danger { margin-left: auto; }
.agent-status { font-size: 13px; color: var(--muted); min-height: 16px; }
.agent-docs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.agent-docs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.agent-docs-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 10px; font-size: 13px;
}

.chat-refs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; }
.ref-chip {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  padding: 3px 8px; font-size: 12px; display: inline-flex; align-items: center; gap: 4px;
}
.ref-chip button { background: none; border: none; color: var(--muted); cursor: pointer; }

.ref-picker {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.ref-picker-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  width: min(820px, 92vw); max-height: 86vh; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.ref-picker-head { display: flex; align-items: center; justify-content: space-between; }
.ref-picker select,
.ref-picker input[type="search"] { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 7px 10px; border-radius: 8px; font-size: 13px; }
.ref-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.ref-filters #ref-search { flex: 1; min-width: 150px; }
.ref-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; flex: 1; }
.ref-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 50vh; border: 1px solid var(--border); border-radius: 8px; }
.ref-list li { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--border); word-break: break-word; }
.ref-list li.muted { display: block; }
.ref-list li:hover { background: var(--surface-2); }
.ref-list li.sel { background: var(--surface-2); }
.ref-list li.sel .ref-title { color: var(--accent); }
.ref-title { font-size: 12.5px; }
.ref-path { font-size: 11px; color: var(--muted); }
.ref-preview {
  margin: 0; overflow: auto; max-height: 50vh; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 12px;
  white-space: pre-wrap; word-break: break-word;
}
.ref-img { max-width: 100%; max-height: 46vh; border-radius: 6px; display: block; margin: 0 auto; }
.ref-picker-actions { display: flex; justify-content: flex-end; }

.chat-msg { position: relative; }
.chat-save-btn {
  position: absolute; bottom: 6px; right: 8px;
  background: none; border: none; cursor: pointer;
  font-size: 13px; opacity: 0; transition: opacity .15s;
  padding: 2px 4px; border-radius: 4px;
}
.chat-msg:hover .chat-save-btn { opacity: .55; }
.chat-save-btn:hover { opacity: 1 !important; background: var(--surface-2); }
.chat-saved-ok { font-size: 12px !important; opacity: .7; padding: 6px 12px !important; }

/* Spinner */
.spinner {
  display: inline-block; width: 13px; height: 13px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }