/* ===== Binapps Docops — diseño DocuWiki (claro/oscuro vía variables) ===== */

:root {
  --accent: #2f6fd6;
  --accent-tint: rgba(47, 111, 214, .10);
  --accent-tint2: rgba(47, 111, 214, .16);
  --claude: #d97757;
  --claude-deep: #c2603f;

  --bg: #ffffff;
  --bg-side: #fafaf8;
  --bg-chat: #fdfdfc;
  --bg-hover: #eeede8;
  --bg-input: #ffffff;
  --bg-code: #f1f0ec;
  --bg-codecard: #fbfbf9;
  --bg-codehead: #f5f5f1;
  --bg-bubble-user: #f0f0ec;
  --bg-claude-tint: #fdf6f2;

  --border: #ececec;
  --border-soft: #f0f0ec;
  --border-input: #e4e4e0;
  --border-claude: #f0dccf;

  --text-title: #17140f;
  --text-strong: #1b1712;
  --text: #39372f;
  --text-2: #4a4a46;
  --text-muted: #8a8a85;
  --text-faint: #a0a09b;

  --btn-primary-bg: #1b1b1a;
  --btn-primary-bg-hover: #000000;
  --btn-primary-fg: #ffffff;

  --warn-bg: rgba(193, 134, 47, .08);
  --warn-border: rgba(193, 134, 47, .22);
  --warn-edge: #c1862f;
  --warn-text: #5c4a24;
  --ok: #1f8a5b;

  --shadow-pop: 0 14px 40px rgba(0, 0, 0, .16);
  --mono: 'JetBrains Mono', 'Cascadia Code', Consolas, 'SF Mono', Menlo, monospace;
}

[data-theme="dark"] {
  --bg: #171715;
  --bg-side: #1d1d1b;
  --bg-chat: #1a1a18;
  --bg-hover: #282824;
  --bg-input: #232321;
  --bg-code: #2a2a27;
  --bg-codecard: #1f1f1d;
  --bg-codehead: #262624;
  --bg-bubble-user: #2e2e2a;
  --bg-claude-tint: #2b211c;

  --border: #2c2c29;
  --border-soft: #262624;
  --border-input: #3a3a36;
  --border-claude: #4a352b;

  --text-title: #f2f0ea;
  --text-strong: #eceae4;
  --text: #d3d1c9;
  --text-2: #bab8b0;
  --text-muted: #8f8f88;
  --text-faint: #767670;

  --btn-primary-bg: #ececea;
  --btn-primary-bg-hover: #ffffff;
  --btn-primary-fg: #17140f;

  --warn-bg: rgba(193, 134, 47, .12);
  --warn-border: rgba(193, 134, 47, .3);
  --warn-text: #d8b878;

  --shadow-pop: 0 14px 40px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
/* El atributo hidden debe ganar SIEMPRE (los display:flex de .btn-dark/.icon-btn
   lo anulaban: el botón de PR y el de admin se veían sin documento abierto/rol) */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.55;
  color: var(--text); background: var(--bg);
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent-tint2); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: rgba(128,128,120,.35); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes dot { 0%,80%,100% { opacity:.28; transform:translateY(0) } 40% { opacity:1; transform:translateY(-3px) } }
@keyframes toastIn { from { opacity:0; transform:translate(-50%,10px) scale(.98) } to { opacity:1; transform:translate(-50%,0) scale(1) } }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }

/* ===== Barra superior ===== */
.topbar {
  height: 56px; flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.logo-sq {
  width: 29px; height: 29px; border-radius: 8px;
  background: var(--btn-primary-bg); color: var(--btn-primary-fg);
  display: flex; align-items: center; justify-content: center;
}
.brand-name { font-weight: 700; font-size: 15.5px; letter-spacing: -.02em; color: var(--text-title); white-space: nowrap; }
.topbar-sep { width: 1px; height: 22px; background: var(--border); flex: none; }
.crumbs { flex: 1; display: flex; align-items: center; min-width: 0; overflow: hidden; font-size: 13px; white-space: nowrap; }
.crumb { color: var(--text-muted); flex: none; overflow: hidden; text-overflow: ellipsis; }
.crumb.last { color: var(--text-title); font-weight: 600; flex: 0 1 auto; }
.crumb-sep { color: var(--border-input); margin: 0 7px; flex: none; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }

.icon-btn {
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-2);
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text-strong); }
.icon-btn.off { opacity: .4; }
#btn-theme .ic-sun { display: none; }
[data-theme="dark"] #btn-theme .ic-sun { display: block; }
[data-theme="dark"] #btn-theme .ic-moon { display: none; }

.btn-dark {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px;
  background: var(--btn-primary-bg); color: var(--btn-primary-fg);
  border: none; border-radius: 9px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.btn-dark:hover { background: var(--btn-primary-bg-hover); }

.userbox { display: flex; align-items: center; flex: none; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(140deg, #6f8fd6, #4a63a8); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--border);
}

/* ===== Layout de 3 paneles (anchos laterales redimensionables) ===== */
.layout {
  flex: 1; display: grid; min-height: 0; position: relative;
  grid-template-columns: var(--nav-w, 290px) 1fr var(--chat-w, 360px);
}
.layout > .sidebar { grid-column: 1; }
.layout > .doc { grid-column: 2; }
.layout > .chat { grid-column: 3; }
body.nav-collapsed .layout { grid-template-columns: 0 1fr var(--chat-w, 360px); }
body.chat-collapsed .layout { grid-template-columns: var(--nav-w, 290px) 1fr 0; }
body.nav-collapsed.chat-collapsed .layout { grid-template-columns: 0 1fr 0; }
body.nav-collapsed .sidebar, body.chat-collapsed .chat { display: none; }

.rsz { position: absolute; top: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 30; }
#rsz-nav { left: calc(var(--nav-w, 290px) - 4px); }
#rsz-chat { right: calc(var(--chat-w, 360px) - 4px); }
.rsz:hover, body.resizing .rsz { background: var(--accent-tint2); }
body.nav-collapsed #rsz-nav, body.chat-collapsed #rsz-chat { display: none; }
body.resizing { cursor: col-resize; }
body.resizing, body.resizing * { -webkit-user-select: none; user-select: none; }

/* ===== Árbol ===== */
.sidebar {
  border-right: 1px solid var(--border); background: var(--bg-side);
  display: flex; flex-direction: column; min-height: 0;
}
.side-search { position: relative; display: flex; align-items: center; padding: 12px; flex: none; }
.side-search svg { position: absolute; left: 23px; color: var(--text-faint); pointer-events: none; }
.side-search input {
  width: 100%; height: 36px; padding: 0 12px 0 34px;
  border: 1px solid var(--border-input); border-radius: 9px;
  background: var(--bg-input); font: inherit; font-size: 13px; color: var(--text); outline: none;
}
.side-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.tree { flex: 1; overflow-y: auto; padding: 0 8px 10px; }
.tree details { margin: 0; }
.tree summary {
  display: flex; align-items: center; gap: 7px; height: 29px;
  padding: 0 8px; border-radius: 7px; cursor: pointer; list-style: none;
  font-size: 13px; color: var(--text-2); font-weight: 500;
  -webkit-user-select: none; user-select: none; white-space: nowrap; overflow: hidden;
  transition: background .12s;
}
.tree summary::-webkit-details-marker { display: none; }
.tree summary:hover { background: var(--bg-hover); }
.tree summary .chev { flex: none; color: var(--text-faint); transition: transform .15s; }
.tree details[open] > summary .chev { transform: rotate(90deg); }
.tree summary .nod-ic { flex: none; }
.tree summary .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tree summary:hover .doclink-menu { opacity: 1; pointer-events: auto; }
.tree .area > summary { font-weight: 700; font-size: 13.5px; color: var(--text-strong); letter-spacing: -.006em; margin-top: 10px; }
.tree .area:first-child > summary { margin-top: 2px; }
.indent { margin-left: 15px; }
.area-body { margin-left: 4px; }
.doclink {
  display: flex; align-items: center; gap: 7px; height: 29px;
  padding: 0 8px 0 21px; margin-top: 1px; font-size: 13px; color: var(--text-2);
  text-decoration: none; border-radius: 7px;
  white-space: nowrap; overflow: hidden; transition: background .12s;
}
.doclink .nod-ic { flex: none; color: var(--text-faint); }
.doclink .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Botón ⋮ por ítem: espacio siempre reservado, visible al pasar el mouse */
.doclink-menu {
  flex: none; width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 6px; background: transparent;
  color: var(--text-muted); cursor: pointer;
  opacity: 0; pointer-events: none;
}
.doclink:hover .doclink-menu, .doclink.active .doclink-menu { opacity: 1; pointer-events: auto; }
.doclink-menu:hover { background: var(--border-input); color: var(--text-strong); }
.doclink:hover { background: var(--bg-hover); text-decoration: none; color: var(--text-strong); }
.doclink.active {
  background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent);
  color: var(--text-strong); font-weight: 600;
}
.doclink.active .nod-ic { color: var(--accent); }
/* Página padre fusionada (doc + carpeta en un solo nodo, como ADO) */
.tree summary.has-doc .nod-ic { color: var(--text-faint); }
.tree summary.active {
  background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent);
  color: var(--text-strong); font-weight: 600;
}
.tree summary.active .nod-ic { color: var(--accent); }
.side-foot { flex: none; border-top: 1px solid var(--border); padding: 9px; }
.side-foot button {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; border: 1px dashed var(--border-input); border-radius: 9px;
  background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.side-foot button:hover { background: var(--bg-hover); color: var(--text-2); }

/* ===== Documento ===== */
.doc { overflow-y: auto; background: var(--bg); }
#docview { max-width: 1060px; margin: 0 auto; padding: 26px 40px 100px; }
.doc-head {
  margin-bottom: 16px; font-size: 13px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  color: var(--text-muted);
}
.badge {
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-edge);
  padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
}
.empty { max-width: 560px; margin: 14vh auto; text-align: center; color: var(--text-muted); }
.empty h1 { color: var(--text-title); letter-spacing: -.02em; }

/* Título de la página (derivado del nombre del archivo, como en Azure DevOps Wiki):
   más grande que los H1 del contenido */
.page-title {
  font-size: 41px; font-weight: 700; letter-spacing: -.03em;
  margin: 4px 0 18px; color: var(--text-title); line-height: 1.08;
  max-width: 760px; overflow-wrap: break-word;
}

/* Metadatos bajo el título: último autor + fecha (como en ADO Wiki) */
.page-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted); margin: -8px 0 26px;
}
.user-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, #c98a6a, #b06a4a); color: #fff;
  font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.page-meta-name { color: var(--text-2); font-weight: 500; }
.page-meta-dot { color: var(--border-input); }

.md { max-width: 760px; animation: fadeUp .2s ease-out; }
.md h1 { font-size: 33px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 13px; color: var(--text-title); line-height: 1.12; }
.md h2 { font-size: 20px; font-weight: 650; letter-spacing: -.01em; color: var(--text-strong); margin: 32px 0 12px; }
.md h3 { font-size: 16.5px; font-weight: 600; color: var(--text-strong); margin: 26px 0 10px; }
.md h1, .md h2, .md h3 { scroll-margin-top: 10px; line-height: 1.25; }
.md p, .md li { font-size: 15.5px; line-height: 1.75; color: var(--text); }
.md li { margin: 8px 0; }
.md ul, .md ol { margin: 0 0 18px; padding-left: 22px; }
.md code { font-family: var(--mono); font-size: .86em; background: var(--bg-code); padding: 1px 5px; border-radius: 5px; color: var(--text-strong); }
.md pre { background: transparent; padding: 0; margin: 0; overflow-x: auto; }
.md pre code { display: block; background: none; padding: 14px 16px; font-size: 13px; line-height: 1.75; color: var(--text); }
.md img { max-width: 100%; border-radius: 8px; }
.md table { border-collapse: collapse; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 10px; }
.md th { background: var(--bg-codehead); color: var(--text-strong); }
.md blockquote {
  display: block; margin: 22px 0; padding: 14px 16px;
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-left: 3px solid var(--warn-edge); border-radius: 11px;
  color: var(--warn-text); font-size: 14px; line-height: 1.6;
}
.md blockquote p { color: inherit; margin: 0; font-size: 14px; }

/* Burbujas de alerta estilo ADO Wikis / DocFx (> [!NOTE], [!TIP], …).
   El servidor (render.mts) marca el blockquote con .alert.alert-<tipo>. */
.md blockquote.alert {
  background: var(--alert-bg); border: 1px solid var(--alert-border);
  border-left: 3px solid var(--alert-edge); color: var(--text);
}
.md .alert p { color: var(--text); }
.md .alert p + p { margin-top: 8px; }
.md .alert .alert-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
  font-weight: 700; font-size: 13px; letter-spacing: .01em; color: var(--alert-edge);
}
.md .alert .alert-title::before {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--alert-icon) no-repeat center / contain;
  mask: var(--alert-icon) no-repeat center / contain;
}
.alert.alert-note {
  --alert-edge: #2f6fd6; --alert-bg: rgba(47,111,214,.07); --alert-border: rgba(47,111,214,.22);
  --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 4.6a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6zM11 11h2v6.5h-2z'/%3E%3C/svg%3E");
}
.alert.alert-tip {
  --alert-edge: #1f8a5b; --alert-bg: rgba(31,138,91,.07); --alert-border: rgba(31,138,91,.22);
  --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4.1 12.7c.7.5 1.1 1.3 1.1 2.1v.2h6v-.2c0-.8.4-1.6 1.1-2.1A7 7 0 0 0 12 2zM9.5 19h5v.8a2.2 2.2 0 0 1-2.2 2.2h-.6a2.2 2.2 0 0 1-2.2-2.2z'/%3E%3C/svg%3E");
}
.alert.alert-important {
  --alert-edge: #8250df; --alert-bg: rgba(130,80,223,.07); --alert-border: rgba(130,80,223,.22);
  --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 4.5h2V14h-2zm1 9.4a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6z'/%3E%3C/svg%3E");
}
.alert.alert-warning {
  --alert-edge: #c1862f; --alert-bg: var(--warn-bg); --alert-border: var(--warn-border);
  --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.2 1.2 21h21.6zM11 9.3h2v5.4h-2zm1 6.8a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z'/%3E%3C/svg%3E");
}
.alert.alert-caution {
  --alert-edge: #c25454; --alert-bg: rgba(194,84,84,.07); --alert-border: rgba(194,84,84,.22);
  --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.7 2h8.6L22 7.7v8.6L16.3 22H7.7L2 16.3V7.7zM11 7h2v7h-2zm1 8.7a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6z'/%3E%3C/svg%3E");
}

/* Front matter YAML: tabla sutil de metadatos al inicio (como en ADO Wikis) */
.frontmatter { margin: 0 0 22px; }
.frontmatter table { border-collapse: collapse; font-size: 12.5px; color: var(--text-muted); }
.frontmatter th, .frontmatter td {
  border: 1px solid var(--border-soft); padding: 4px 12px;
  font-weight: 400; text-align: left; background: none;
}
.frontmatter th { color: var(--text-2); font-weight: 500; font-family: var(--mono); font-size: 11.5px; }

/* Tarjeta de bloque de código (envuelve cada <pre>) */
.codecard { margin: 22px 0; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: var(--bg-codecard); }
.codecard-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 8px 7px 14px; border-bottom: 1px solid var(--border-soft); background: var(--bg-codehead);
}
.codecard-lang { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; }
.codecard-copy {
  display: flex; align-items: center; gap: 6px; height: 27px; padding: 0 9px;
  background: transparent; border: none; border-radius: 7px;
  color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.codecard-copy:hover { background: var(--bg-hover); color: var(--text-2); }

/* Tabla de contenido ("En este artículo") */
.doc-cols { display: flex; gap: 34px; align-items: flex-start; }
.doc-cols article.md { flex: 1; min-width: 0; }
.toc {
  position: sticky; top: 0; flex: 0 0 225px;
  max-height: calc(100vh - 150px); overflow-y: auto;
  font-size: 12.5px; padding: 2px 0;
}
.toc-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--text-title); }
.toc-item {
  display: block; color: var(--text-muted); text-decoration: none;
  padding: 4px 10px; border-left: 2px solid var(--border); line-height: 1.4;
}
.toc-item:hover { color: var(--accent); text-decoration: none; }
.toc-item.toc-h3 { padding-left: 24px; }
.toc-item.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
@media (max-width: 1250px) { .toc { display: none; } }

/* Estado de guardado / PR */
.ok {
  display: flex; align-items: center; gap: 10px;
  background: rgba(31,138,91,.08); border: 1px solid rgba(31,138,91,.25); color: var(--ok);
  padding: 10px 14px; border-radius: 11px; font-size: 13.5px; margin-bottom: 14px;
}
.ok code { background: rgba(31,138,91,.12); border-radius: 5px; padding: 1px 5px; }
.error { color: #c25454; }

/* ===== Botones genéricos ===== */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--btn-primary-bg); color: var(--btn-primary-fg);
  border: none; border-radius: 9px; height: 34px; padding: 0 13px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--btn-primary-bg-hover); }
.btn.subtle {
  background: var(--bg-input); color: var(--text-2); border: 1px solid var(--border-input);
  font-weight: 500;
}
.btn.subtle:hover { background: var(--bg-hover); color: var(--text-strong); border-color: var(--border-input); }
.btn:disabled { opacity: .55; cursor: default; }
.spacer { flex: 1; }

/* ===== Editor ===== */
.editor { display: flex; flex-direction: column; gap: 12px; } /* llena el ancho del panel (como ADO) */
.ed-fields { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; font-size: 13.5px; color: var(--text-2); }
.ed-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-muted); }
.ed-fields label.grow { flex: 1; min-width: 220px; }
.ed-fields input, .ed-fields select {
  padding: 7px 10px; border: 1px solid var(--border-input); border-radius: 8px;
  font: inherit; font-size: 14px; background: var(--bg-input); color: var(--text); outline: none;
}
.ed-fields input:focus, .ed-fields select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.ed-fields code { font-family: var(--mono); font-size: .9em; background: var(--bg-code); padding: 1px 6px; border-radius: 5px; }
#ed-wysiwyg { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.ed-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ed-actions .tiny { max-width: 520px; }

/* Pestaña Markdown: código fuente monoespaciado (la vista previa no se toca) */
#ed-wysiwyg .toastui-editor-md-container .ProseMirror {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.65;
}
/* Vista "MD plano": conserva colores del highlight, quita tamaños/negritas/decoraciones */
#ed-wysiwyg.md-plain .toastui-editor-md-container .ProseMirror,
#ed-wysiwyg.md-plain .toastui-editor-md-container .ProseMirror * {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.65 !important;
  text-decoration: none !important;
}

/* Acabado del editor tipo ADO Wikis: ocupa todo el ancho/alto disponible,
   toolbar plana integrada al tema y tipografía del portal en el contenido. */
#docview:has(.editor) { max-width: none; padding-bottom: 24px; }
#ed-wysiwyg .toastui-editor-defaultUI { border: none; font-family: inherit; }
#ed-wysiwyg .toastui-editor-defaultUI-toolbar {
  background: var(--bg-side); border-bottom: 1px solid var(--border); padding: 0 10px;
}
#ed-wysiwyg .toastui-editor-toolbar-divider { background-color: var(--border); }

/* Íconos de la toolbar: SVG propios (misma familia de trazo que el menú
   contextual del árbol) vía mask sobre ::before — el color sigue al tema y el
   sprite original de Toast UI se descarta. */
#ed-wysiwyg .toastui-editor-toolbar-icons {
  border: none; background: none; border-radius: 7px; position: relative;
}
#ed-wysiwyg .toastui-editor-toolbar-icons::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px;
  background: var(--text-2);
  -webkit-mask: var(--tb-icon) no-repeat center / contain;
  mask: var(--tb-icon) no-repeat center / contain;
}
#ed-wysiwyg .toastui-editor-toolbar-icons:not(:disabled):hover { background-color: var(--bg-hover); }
#ed-wysiwyg .toastui-editor-toolbar-icons:not(:disabled):hover::before { background: var(--text-strong); }
#ed-wysiwyg .toastui-editor-toolbar-icons.active { background-color: var(--accent-tint); }
#ed-wysiwyg .toastui-editor-toolbar-icons.active::before { background: var(--accent); }
#ed-wysiwyg .toastui-editor-toolbar-icons:disabled::before { opacity: .35; }
#ed-wysiwyg .toastui-editor-toolbar-icons.heading { --tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5v14M18 5v14M6 12h12'/%3E%3C/svg%3E"); }
#ed-wysiwyg .toastui-editor-toolbar-icons.bold { --tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 4.5H13a3.75 3.75 0 0 1 0 7.5H7.5zM7.5 12h6.3a3.75 3.75 0 0 1 0 7.5H7.5z'/%3E%3C/svg%3E"); }
#ed-wysiwyg .toastui-editor-toolbar-icons.italic { --tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4.5h7M6 19.5h7M14.5 4.5l-5 15'/%3E%3C/svg%3E"); }
#ed-wysiwyg .toastui-editor-toolbar-icons.strike { --tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.2 6.3c-.9-1.2-2.4-1.9-4.2-1.9-2.6 0-4.4 1.3-4.4 3.2 0 1.4 1 2.3 2.7 2.9M9.5 17.7c.9 1.2 2.6 1.9 4.3 1.9 2.6 0 4.4-1.3 4.4-3.2 0-1.3-.8-2.2-2.3-2.8'/%3E%3Cpath d='M4.5 12h15'/%3E%3C/svg%3E"); }
#ed-wysiwyg .toastui-editor-toolbar-icons.link { --tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }
#ed-wysiwyg .toastui-editor-toolbar-icons.image { --tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M5 17.5l4.5-4.5 3 3 3-3 3.5 3.5'/%3E%3C/svg%3E"); }
#ed-wysiwyg .toastui-editor-toolbar-icons.table { --tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='1.8'/%3E%3Cpath d='M3.5 9.5h17M9.5 9.5v10M15.5 9.5v10'/%3E%3C/svg%3E"); }
#ed-wysiwyg .toastui-editor-toolbar-icons.bullet-list { --tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6h11M9.5 12h11M9.5 18h11'/%3E%3Ccircle cx='4.8' cy='6' r='1.15' fill='black' stroke='none'/%3E%3Ccircle cx='4.8' cy='12' r='1.15' fill='black' stroke='none'/%3E%3Ccircle cx='4.8' cy='18' r='1.15' fill='black' stroke='none'/%3E%3C/svg%3E"); }
#ed-wysiwyg .toastui-editor-toolbar-icons.ordered-list { --tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 6h10M10.5 12h10M10.5 18h10'/%3E%3Ctext x='3' y='8.3' font-size='6.6' font-family='sans-serif' fill='black' stroke='none'%3E1%3C/text%3E%3Ctext x='3' y='14.3' font-size='6.6' font-family='sans-serif' fill='black' stroke='none'%3E2%3C/text%3E%3Ctext x='3' y='20.3' font-size='6.6' font-family='sans-serif' fill='black' stroke='none'%3E3%3C/text%3E%3C/svg%3E"); }
#ed-wysiwyg .toastui-editor-toolbar-icons.task-list { --tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='6' height='6' rx='1.3'/%3E%3Cpath d='M5.2 7.6l1.4 1.4 2.3-2.6'/%3E%3Crect x='3.5' y='13.5' width='6' height='6' rx='1.3'/%3E%3Cpath d='M13 7.5h7.5M13 16.5h7.5'/%3E%3C/svg%3E"); }
#ed-wysiwyg .toastui-editor-toolbar-icons.quote { --tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.5v13'/%3E%3Cpath d='M10 7.5h9.5M10 12h9.5M10 16.5h9.5'/%3E%3C/svg%3E"); }
#ed-wysiwyg .toastui-editor-toolbar-icons.code { --tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 7.5 4 12l4.5 4.5M15.5 7.5 20 12l-4.5 4.5'/%3E%3C/svg%3E"); }
#ed-wysiwyg .toastui-editor-toolbar-icons.codeblock { --tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2'/%3E%3Cpath d='M9.5 9.5 7 12l2.5 2.5M14.5 9.5 17 12l-2.5 2.5'/%3E%3C/svg%3E"); }
#ed-wysiwyg .toastui-editor-toolbar-icons.more { --tb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Ccircle cx='5' cy='12' r='1.5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Ccircle cx='19' cy='12' r='1.5'/%3E%3C/svg%3E"); }

/* Citas y burbujas DENTRO del WYSIWYG: mismo lenguaje visual que el documento
   renderizado (el tipo lo marca app.js con .alert.alert-<tipo> leyendo [!TIPO]). */
#ed-wysiwyg .toastui-editor-contents blockquote {
  margin: 18px 0; padding: 12px 14px;
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-left: 3px solid var(--warn-edge); border-radius: 11px;
  color: var(--warn-text);
}
#ed-wysiwyg .toastui-editor-contents blockquote p { color: inherit; }
#ed-wysiwyg .toastui-editor-contents blockquote.alert {
  background: var(--alert-bg); border-color: var(--alert-border);
  border-left-color: var(--alert-edge); color: var(--text);
}
#ed-wysiwyg .toastui-editor-mode-switch {
  background: var(--bg-side); border-top: 1px solid var(--border);
}
#ed-wysiwyg .toastui-editor-mode-switch .tab-item {
  background: transparent; border-color: transparent; color: var(--text-muted);
}
#ed-wysiwyg .toastui-editor-mode-switch .tab-item.active {
  background: var(--bg); color: var(--text-strong); border-color: var(--border);
}
#ed-wysiwyg .toastui-editor-ww-container .ProseMirror,
#ed-wysiwyg .toastui-editor-contents {
  font-family: inherit; font-size: 15px; color: var(--text);
}
#ed-wysiwyg .toastui-editor-contents h1, #ed-wysiwyg .toastui-editor-contents h2 {
  color: var(--text-title); border-bottom: none;
}
#ed-wysiwyg .toastui-editor-contents h3, #ed-wysiwyg .toastui-editor-contents h4 { color: var(--text-strong); }
#ed-wysiwyg .toastui-editor-contents code {
  font-family: var(--mono); background: var(--bg-code); color: var(--text-strong);
}
#ed-wysiwyg .toastui-editor-contents pre { background: var(--bg-codecard); }
#ed-wysiwyg .toastui-editor-contents img { max-width: 100%; border-radius: 8px; }

/* ===== Chat ===== */
.chat {
  border-left: 1px solid var(--border); background: var(--bg-chat);
  display: flex; flex-direction: column; min-height: 0;
}
.chat-head { display: flex; gap: 10px; align-items: center; height: 52px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border); flex: none; }
.chat-head-text { flex: 1; min-width: 0; }
.chat-head-text strong { font-size: 14px; font-weight: 700; color: var(--text-title); display: block; line-height: 1.1; }
.claude-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--claude), var(--claude-deep));
  display: flex; align-items: center; justify-content: center;
}
.claude-avatar.big { width: 44px; height: 44px; margin: 0 auto 14px; }
#chat-model {
  max-width: 140px; font: inherit; font-size: 12px; padding: 4px 6px;
  border: 1px solid var(--border-input); border-radius: 8px; background: var(--bg-input); color: var(--text-2); outline: none;
}
.chat-body { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 0; }
.chat-intro { text-align: center; margin: auto 0; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 20px 8px; }
.chat-intro p { margin: 0; }
.chat-intro > p strong { font-size: 15px; color: var(--text-title); }
.chip {
  width: 100%; max-width: 290px; text-align: left;
  background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 10px;
  padding: 10px 13px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text-2); line-height: 1.4;
}
.chip:hover { border-color: var(--claude); background: var(--bg-claude-tint); color: var(--text-strong); }

.msg { margin: 0 0 16px; animation: fadeUp .25s ease-out; }
.msg.user { display: flex; justify-content: flex-end; }
.msg.user .bubble {
  max-width: 86%; background: var(--bg-bubble-user); color: var(--text-strong);
  padding: 9px 13px; border-radius: 15px 15px 5px 15px; font-size: 14px; line-height: 1.55;
  overflow-wrap: break-word;
}
.msg.assistant { margin-bottom: 22px; }
.msg-who { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.msg-who .claude-avatar { width: 22px; height: 22px; }
.msg-who span { font-size: 12.5px; font-weight: 600; color: var(--claude-deep); }
.msg-body { font-size: 14px; line-height: 1.66; color: var(--text); overflow-wrap: break-word; }
.msg-body p { margin: 0 0 10px; }
.msg-body pre {
  background: var(--bg-codecard); border: 1px solid var(--border); padding: 10px;
  border-radius: 8px; overflow-x: auto; font-size: 12.5px; font-family: var(--mono);
}
.msg-body code { font-family: var(--mono); font-size: .88em; background: var(--bg-code); padding: 1px 4px; border-radius: 4px; }
.msg-body a { color: var(--accent); }
.typing { display: flex; gap: 4px; padding: 6px 0; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--claude-deep); animation: dot 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }

.chat-input { padding: 12px 12px 0; border-top: 1px solid var(--border); flex: none; margin: 0; }
.chat-input-box {
  border: 1px solid var(--border-input); border-radius: 13px;
  padding: 8px 8px 8px 13px; display: flex; align-items: flex-end; gap: 8px; background: var(--bg-input);
}
.chat-input-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.chat-input textarea {
  flex: 1; resize: none; border: none; outline: none; background: transparent;
  font: inherit; font-size: 14px; line-height: 1.5; max-height: 120px; color: var(--text); padding: 6px 0;
}
.chat-input button {
  width: 32px; height: 32px; flex: none; border: none; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--claude-deep); color: #fff; transition: background .15s;
}
.chat-input button:disabled { background: var(--bg-code); color: var(--text-faint); cursor: default; }

/* ===== Toast ===== */
#toast[hidden] { display: none; }
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 9px; padding: 10px 16px;
  background: #1b1b1a; color: #fff; border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; font-size: 13px; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,.24); animation: toastIn .22s ease-out; white-space: nowrap;
}

/* ===== Menú contextual del árbol ===== */
.ctx-menu {
  position: fixed; z-index: 70; min-width: 210px;
  background: var(--bg-input); border: 1px solid var(--border-input);
  border-radius: 11px; padding: 5px; box-shadow: var(--shadow-pop);
  animation: fadeUp .12s ease-out; display: flex; flex-direction: column;
}
.ctx-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 11px; border: none; border-radius: 7px; background: transparent;
  font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; text-align: left;
}
.ctx-item svg { flex: none; color: var(--text-muted); }
.ctx-item:hover { background: var(--bg-hover); color: var(--text-strong); }
.ctx-item.danger:hover { background: rgba(194, 84, 84, .12); color: #c25454; }
.ctx-item.danger:hover svg { color: #c25454; }

/* ===== Drag & drop ===== */
/* Cursor normal de enlace al pasar; la "manito" de agarre solo mientras se arrastra */
.doclink { cursor: pointer; }
body.dragging, body.dragging .doclink { cursor: grabbing; }
.drop-hover { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-tint) !important; border-radius: 7px; }

/* ===== Modal (mover página) ===== */
.modal-back {
  position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  width: 420px; max-width: calc(100vw - 40px);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 13px; padding: 18px; box-shadow: var(--shadow-pop);
  animation: fadeUp .15s ease-out;
}
.modal h3 { margin: 0 0 10px; font-size: 16px; color: var(--text-title); }
.modal code { font-family: var(--mono); font-size: .88em; background: var(--bg-code); padding: 1px 6px; border-radius: 5px; }
.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-muted); margin: 10px 0; }
.modal input, .modal select {
  padding: 8px 10px; border: 1px solid var(--border-input); border-radius: 8px;
  font: inherit; font-size: 14px; background: var(--bg-input); color: var(--text); outline: none;
}
.modal input:focus, .modal select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.modal-actions { display: flex; gap: 10px; margin-top: 14px; }

/* ===== Reporte de enlaces ===== */
.lk-progress { max-width: 620px; margin: 6px 0 20px; }
.lk-bar {
  height: 9px; border-radius: 999px; overflow: hidden;
  background: var(--bg-code); border: 1px solid var(--border);
}
.lk-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #6f9de8);
  transition: width .25s ease;
}
.lk-progress .small { margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 26px; }
.stat {
  min-width: 110px; padding: 12px 16px; border: 1px solid var(--border);
  border-radius: 11px; background: var(--bg-codecard);
}
.stat-n { font-size: 26px; font-weight: 700; color: var(--text-title); line-height: 1.1; }
.stat-l { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.stat.bad { border-color: rgba(194, 84, 84, .4); }
.stat.bad .stat-n { color: #c25454; }
.stat.good { border-color: rgba(31, 138, 91, .35); }
.stat.good .stat-n { color: var(--ok); }
.rep-h { font-size: 18px; font-weight: 650; color: var(--text-strong); margin: 28px 0 10px; }
.rep-h .btn { margin-left: 10px; vertical-align: middle; height: 28px; font-size: 12px; }
.rep-table { border-collapse: collapse; font-size: 13px; max-width: 100%; }
.rep-table th, .rep-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.rep-table th { background: var(--bg-codehead); color: var(--text-strong); }
.rep-table code { font-family: var(--mono); font-size: .88em; background: var(--bg-code); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.rep-table a { overflow-wrap: anywhere; }

/* ===== Utilidades ===== */
.muted { color: var(--text-muted); }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; }
.center { text-align: center; padding: 6px 0 10px; }

/* ===== Responsivo (móviles y pantallas angostas) =====
   El documento ocupa todo el ancho; árbol y chat pasan a ser overlays que se
   abren/cierran con sus botones del header (arrancan colapsados: app.js). */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr !important; }
  .layout > .sidebar, .layout > .doc, .layout > .chat { grid-column: 1; }
  .sidebar, .chat {
    position: fixed; top: 56px; bottom: 0; z-index: 45;
    width: min(88vw, 340px); box-shadow: var(--shadow-pop);
  }
  .sidebar { left: 0; }
  .chat { right: 0; }
  .rsz { display: none; }
  .crumbs, .topbar-sep, .brand-name { display: none; }
  .topbar { gap: 6px; padding: 0 10px; }
  .topbar-right { gap: 6px; }
  /* PR solo-ícono: el texto se colapsa con font-size 0 (el svg conserva su tamaño) */
  #btn-pr-top { font-size: 0; gap: 0; padding: 0 10px; }
  #docview { padding: 20px 16px 90px; }
  .page-title { font-size: 29px; }
  .md h1 { font-size: 25px; }
  .md p, .md li { font-size: 15px; }
  .doc-cols { display: block; }
  .md table, .rep-table { display: block; overflow-x: auto; }
  .editor { max-width: none; }
  .stats { gap: 8px; }
  .stat { min-width: 96px; padding: 10px 12px; }
  /* inputs a 16px: evita el auto-zoom de iOS al enfocar */
  .side-search input, .chat-input textarea { font-size: 16px; }
}