/* TextMD — estilos complementarios (Tailwind hace el resto) */

* { -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { text-rendering: optimizeLegibility; }

.custom-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #e2e2df; border-radius: 8px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #d4d4d1; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  color: #6b7280; transition: background .12s, color .12s;
}
.icon-btn:hover { background: #f0efed; color: #111827; }
.icon-btn.on { background: #111827; color: #fff; }
.icon-btn.on:hover { background: #000; color: #fff; }
.icon-btn:disabled { opacity: .3; pointer-events: none; }
#crumbTitle::placeholder { color: #9ca3af; }
#crumbTitle { caret-color: #111827; }
html.dark #crumbTitle { caret-color: #fafafa; }
html.dark #crumbTitle::placeholder { color: #52525b; }
html.dark #crumbTitle:focus { background-color: #27272a; }
html.dark #crumbTitle::selection { background: #3f3f46; color: #fafafa; }
html.dark .icon-btn.on { background: #fafafa; color: #09090b; }
html.dark .icon-btn.on:hover { background: #e4e4e7; color: #09090b; }

.side-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-size: 13px; color: #374151; padding: 6px 8px; border-radius: 6px;
  transition: background .12s;
}
.side-item:hover { background: #f0efed; }

.seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 5px; color: #6b7280; font-weight: 500;
  transition: all .12s;
}
.seg-btn:hover { color: #111827; }
.seg-btn.active { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,.08); border: 1px solid #e5e7eb; }

.tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 7px; border-radius: 6px;
  color: #6b7280; font-size: 13px; font-weight: 500; gap: 4px;
  transition: background .12s, color .12s;
}
.tool-btn:hover { background: #f0efed; color: #111827; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #111827; color: #fff; font-size: 14px; font-weight: 500;
  padding: 9px 16px; border-radius: 8px; transition: background .12s;
}
.btn-primary:hover { background: #000; }
.btn-primary-sm {
  display: inline-flex; align-items: center; gap: 6px;
  background: #111827; color: #fff; font-size: 12.5px; font-weight: 500;
  padding: 7px 12px; border-radius: 7px; transition: background .12s;
}
.btn-primary-sm:hover { background: #000; }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: #111827; font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: 8px; border: 1px solid #e5e7eb;
  transition: background .12s;
}
.btn-secondary:hover { background: #f7f7f5; }
.btn-danger { background: #dc2626; color: #fff; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
.btn-danger:hover { background: #b91c1c; }
.btn-danger-sm { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 7px 12px; border-radius: 7px; border: 1px solid #fecaca; color: #dc2626; background: #fff; }
.btn-danger-sm:hover { background: #fef2f2; }

.doc-row { transition: background .12s, border-color .12s; }
.doc-row:hover { background: #fafafa; }
.doc-row.active { background: #f5f5f4; border-color: #e5e7eb; }

.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 6px; font-size: 13px; color: #374151; }
.menu-item:hover { background: #f5f5f4; }
.menu-item.danger { color: #dc2626; }
.menu-item.danger:hover { background: #fef2f2; }

.fade-in { animation: fadeUp .16s ease-out; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }

.toast {
  display: flex; align-items: center; gap: 8px;
  background: #111827; color: #fff; font-size: 13px;
  padding: 9px 14px; border-radius: 9px; box-shadow: 0 8px 28px rgba(0,0,0,.18);
  animation: fadeUp .18s ease-out;
}

/* ===== Markdown preview (estilo Notion, sobrio) ===== */
.md-preview { font-size: 15px; line-height: 1.75; color: #1f2937; word-wrap: break-word; }
.md-preview > *:first-child { margin-top: 0; }
.md-preview h1 { font-size: 1.7em; font-weight: 700; letter-spacing: -0.02em; margin: 1.1em 0 .5em; line-height: 1.25; }
.md-preview h2 { font-size: 1.35em; font-weight: 700; letter-spacing: -0.01em; margin: 1.2em 0 .45em; padding-bottom: .3em; border-bottom: 1px solid #f0efed; }
.md-preview h3 { font-size: 1.12em; font-weight: 700; margin: 1.1em 0 .4em; }
.md-preview h4, .md-preview h5, .md-preview h6 { font-weight: 700; margin: 1em 0 .35em; }
.md-preview p { margin: .65em 0; }
.md-preview a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.md-preview strong { font-weight: 700; color: #111827; }
.md-preview del { color: #9ca3af; }
.md-preview ul, .md-preview ol { margin: .6em 0; padding-left: 1.5em; }
.md-preview ul { list-style: disc; }
.md-preview ol { list-style: decimal; }
.md-preview li { margin: .25em 0; }
.md-preview li > ul, .md-preview li > ol { margin: .2em 0; }
.md-preview blockquote { margin: .8em 0; padding: .4em .9em; border-left: 3px solid #e5e7eb; color: #4b5563; background: #fafafa; border-radius: 0 6px 6px 0; }
.md-preview blockquote p { margin: .3em 0; }
.md-preview code { font-family: "Roboto Mono", monospace; font-size: .85em; background: #f3f4f6; border: 1px solid #eef0f2; padding: .15em .4em; border-radius: 5px; color: #b91c1c; }
.md-preview pre { background: #111827; color: #e5e7eb; border-radius: 9px; padding: 14px 16px; overflow-x: auto; margin: .9em 0; font-size: 13px; line-height: 1.65; }
.md-preview pre code { background: transparent; border: none; padding: 0; color: inherit; font-size: inherit; }
.md-preview hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.4em 0; }
.md-preview table { width: 100%; border-collapse: collapse; margin: .9em 0; font-size: 14px; }
.md-preview th, .md-preview td { border: 1px solid #e5e7eb; padding: 7px 10px; text-align: left; }
.md-preview th { background: #f7f7f5; font-weight: 600; }
.md-preview img { max-width: 100%; border-radius: 8px; margin: .8em 0; }
.md-preview input[type="checkbox"] { margin-right: 6px; accent-color: #111827; }

/* ===== Responsive ===== */
#sidebar.open-mobile { transform: translateX(0) !important; }
@media (max-width: 767px) {
  #panes.split-mobile-stack { flex-direction: column; }
  #panes.split-mobile-stack #panePreview { border-left: none; border-top: 1px solid #e5e7eb; }
  #docTitle { font-size: 22px !important; }
  .md-preview { font-size: 14.5px; }
  #toolbar { justify-content: flex-start; }
  #viewSwitcher .seg-btn { padding: 5px 7px; }
}

/* ===== Modo lectura ===== */
.read-bg { background: #fbfbfa; }
.read-toolbar { background: rgba(251,251,250,.9); backdrop-filter: blur(8px); border: 1px solid #e5e7eb; border-top: none; }
.read-body { font-size: var(--read-fs, 17px); line-height: 1.85; }
#readToc { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 8px 28px rgba(0,0,0,.12); }

/* ===== Índice / TOC (opcional, desactivado por defecto) ===== */
#tocPanel { background: rgba(251,251,250,.7); }
.toc-item {
  display: block; width: 100%; text-align: left;
  font-size: 12.5px; line-height: 1.45; color: #6b7280;
  padding: 4px 8px; border-radius: 6px; border-left: 2px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, color .12s;
}
.toc-item:hover { background: #f0efed; color: #111827; }
.toc-item.active { background: #f0efed; color: #111827; border-left-color: #111827; font-weight: 500; }
.toc-l1 { padding-left: 8px; font-weight: 500; color: #374151; }
.toc-l2 { padding-left: 18px; }
.toc-l3 { padding-left: 28px; }
.toc-l4 { padding-left: 38px; }
.toc-l5 { padding-left: 48px; }
.toc-l6 { padding-left: 58px; }
.md-preview h1, .md-preview h2, .md-preview h3,
.md-preview h4, .md-preview h5, .md-preview h6 { scroll-margin-top: 14px; }
.toc-flash { animation: tocFlash 1.1s ease-out; border-radius: 6px; }
@keyframes tocFlash { 0% { background: rgba(17,24,39,.10); } 100% { background: transparent; } }
html.dark .toc-flash { animation-name: tocFlashDark; }
@keyframes tocFlashDark { 0% { background: rgba(250,250,250,.12); } 100% { background: transparent; } }
@media (max-width: 900px) {
  #tocPanel { position: absolute; z-index: 20; top: 0; bottom: 0; left: 0; width: 240px; box-shadow: 0 8px 28px rgba(0,0,0,.14); background: #fbfbfa; }
  html.dark #tocPanel { background: #131316; }
}

/* ===== MODO OSCURO — palette shadcn/zinc ===== */
html.dark { color-scheme: dark; }
html.dark body { background: #09090b; color: #fafafa; }
html.dark .bg-wash { background-color: #09090b !important; }
html.dark .bg-paper, html.dark main.bg-paper, html.dark div.bg-paper { background-color: #09090b !important; }
html.dark #sidebar { background: #09090b !important; border-color: #27272a !important; }
html.dark #rail { background: #09090b !important; border-color: #27272a !important; }
html.dark header { border-color: #27272a !important; background: #09090b; }
html.dark .border-line, html.dark .border-line\/70 { border-color: #27272a !important; }
html.dark .text-ink-900 { color: #fafafa !important; }
html.dark .text-ink-700 { color: #d4d4d8 !important; }
html.dark .text-ink-500 { color: #a1a1aa !important; }
html.dark .text-ink-400 { color: #71717a !important; }
html.dark .icon-btn { color: #a1a1aa; }
html.dark .icon-btn:hover { background: #27272a; color: #fafafa; }
html.dark .side-item { color: #d4d4d8; }
html.dark .side-item:hover { background: #18181b; color: #fafafa; }
html.dark #viewSwitcher { background: #131316 !important; border-color: #27272a !important; }
html.dark .seg-btn { color: #a1a1aa; }
html.dark .seg-btn.active { background: #27272a; color: #fafafa; border-color: transparent; box-shadow: none; }
html.dark .tool-btn { color: #a1a1aa; }
html.dark .tool-btn:hover { background: #27272a; color: #fafafa; }
html.dark #toolbar { background: rgba(9,9,11,.92) !important; border-color: #27272a !important; }
html.dark #editor { color: #f4f4f5; caret-color: #fafafa; }
html.dark #editor::placeholder { color: #3f3f46; }
html.dark #docTitle { color: #fafafa; }
html.dark #docTitle::placeholder { color: #3f3f46 !important; }
html.dark #panePreview { background: #09090b !important; border-color: #27272a !important; }
html.dark .doc-row:hover { background: #131316 !important; }
html.dark .doc-row.active { background: #18181b !important; border-color: #27272a !important; }
html.dark #menuDropdown, html.dark .popup { background: #131316 !important; border-color: #27272a !important; }
html.dark .menu-item { color: #d4d4d8; }
html.dark .menu-item:hover { background: #27272a; color: #fafafa; }
html.dark .menu-item.danger:hover { background: rgba(220,38,38,.15); }
html.dark #searchOverlay > div, html.dark #modalBox { background: #131316 !important; border-color: #27272a !important; }
html.dark #modalInput, html.dark #searchInput { color: #fafafa; }
html.dark #modalInput { background: #09090b; border-color: #27272a !important; }
html.dark kbd { background: #27272a !important; border-color: #3f3f46 !important; color: #a1a1aa !important; }
html.dark .btn-secondary { background: #131316; border-color: #27272a; color: #fafafa; }
html.dark .btn-secondary:hover { background: #1f1f23; }
html.dark .btn-primary, html.dark .btn-primary-sm { background: #fafafa; color: #09090b; }
html.dark .btn-primary:hover, html.dark .btn-primary-sm:hover { background: #e4e4e7; }
html.dark .btn-danger-sm { background: transparent; }
html.dark #toasts .toast { background: #18181b; color: #fafafa; border: 1px solid #27272a; }
html.dark .custom-scroll::-webkit-scrollbar-thumb { background: #27272a; }
html.dark .custom-scroll::-webkit-scrollbar-thumb:hover { background: #3f3f46; }
/* preview Markdown en oscuro */
html.dark .md-preview { color: #d4d4d8; }
html.dark .md-preview strong { color: #fafafa; }
html.dark .md-preview h1, html.dark .md-preview h2, html.dark .md-preview h3,
html.dark .md-preview h4, html.dark .md-preview h5, html.dark .md-preview h6 { color: #fafafa; }
html.dark .md-preview h2 { border-color: #27272a; }
html.dark .md-preview a { color: #93c5fd; }
html.dark .md-preview del { color: #71717a; }
html.dark .md-preview code { background: #27272a; border-color: transparent; color: #f4f4f5; }
html.dark .md-preview pre { background: #09090b; border: 1px solid #27272a; color: #e4e4e7; }
html.dark .md-preview pre code { background: transparent; border: none; }
html.dark .md-preview blockquote { background: #131316; border-left-color: #3f3f46; color: #a1a1aa; }
html.dark .md-preview th { background: #131316; color: #fafafa; }
html.dark .md-preview th, html.dark .md-preview td { border-color: #27272a; }
html.dark .md-preview hr { border-color: #27272a; }
/* superficies claras residuales (clases arbitrarias de Tailwind) */
html.dark .bg-white { background-color: #131316 !important; }
html.dark .bg-gray-100 { background-color: #27272a !important; }
html.dark #trashList > div { background: #131316 !important; border-color: #27272a !important; }
html.dark [class*="bg-[#fbfbfa]"]:not([class*="hover:bg-[#fbfbfa]"]) { background-color: #09090b !important; }
html.dark [class*="bg-[#f0efed]/"]:not([class*="hover:bg-[#f0efed]"]) { background-color: #1c1c20 !important; }
html.dark [class*="bg-[#f0efed]"]:not([class*="hover:bg-[#f0efed]"]):not([class*="bg-[#f0efed]/"]) { background-color: #1c1c20 !important; }
html.dark [class*="bg-[#f5f5f4]"]:not([class*="hover:bg-[#f5f5f4]"]) { background-color: #18181b !important; }
html.dark [class*="hover:bg-[#f0efed]"]:hover { background-color: #1c1c20 !important; }
html.dark [class*="hover:bg-[#f5f5f4]"]:hover { background-color: #1c1c20 !important; }
html.dark [class*="hover:bg-[#e9e8e6]"]:hover { background-color: #1c1c20 !important; }
/* lectura en oscuro */
html.dark .read-bg { background: #09090b; }
html.dark .read-toolbar { background: rgba(9,9,11,.92); border-color: #27272a; }
html.dark #readToc { background: #131316; border-color: #27272a; }
/* índice en oscuro */
html.dark #tocPanel { background: rgba(9,9,11,.7); }
html.dark .toc-item { color: #a1a1aa; }
html.dark .toc-item:hover { background: #18181b; color: #fafafa; }
html.dark .toc-item.active { background: #27272a; color: #fafafa; border-left-color: #fafafa; }
html.dark .toc-l1 { color: #d4d4d8; }