:root {
  --flnx-topbar-h: 3.5rem;
  --flnx-rail-w: 5.5rem;
}

/* ---- Barra superior ---------------------------------------------------- */
.flnx-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  height: var(--flnx-topbar-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  background: var(--tblr-bg-surface);
  border-bottom: 1px solid var(--tblr-border-color);
}
.flnx-logo { display: inline-flex; color: var(--flnx-brand); }
.flnx-logo svg { height: 1.75rem; width: auto; aspect-ratio: 1200 / 270; }
.flnx-logo-lg svg { height: 3rem; }
.flnx-user { display: flex; align-items: center; gap: .625rem; padding: .25rem .5rem; border-radius: var(--tblr-border-radius); color: inherit; text-decoration: none; }
.flnx-user:hover, .flnx-user.show { background: var(--tblr-active-bg); color: inherit; text-decoration: none; }
.flnx-avatar { background: rgba(var(--tblr-primary-rgb), .16); color: var(--flnx-brand); font-weight: 600; }

/* ---- Columna lateral de iconos ------------------------------------------ */
.flnx-rail {
  position: fixed;
  top: var(--flnx-topbar-h);
  bottom: 0;
  left: 0;
  z-index: 1020;
  width: var(--flnx-rail-w);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .625rem .375rem;
  overflow-y: auto;
  background: var(--tblr-bg-surface);
  border-right: 1px solid var(--tblr-border-color);
}
.flnx-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .625rem .25rem .5rem;
  border-radius: var(--tblr-border-radius-lg, .5rem);
  color: var(--flnx-rail-fg);
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.flnx-rail-item .ti { font-size: 1.75rem; }
.flnx-rail-item span { font-size: .6875rem; font-weight: 500; line-height: 1.1; text-align: center; }
.flnx-rail-item:hover { background: var(--tblr-active-bg); color: var(--tblr-body-color); }
.flnx-rail-item.active { background: rgba(var(--tblr-primary-rgb), .14); color: var(--flnx-brand); }
.flnx-rail-item.active span { font-weight: 600; }
.flnx-rail-item:focus-visible { outline: 2px solid var(--flnx-brand); outline-offset: -2px; }

/* ---- Contenido ------------------------------------------------------------ */
.flnx-main {
  min-height: 100vh;
  margin-left: var(--flnx-rail-w);
  padding-top: var(--flnx-topbar-h);
}

/* ---- Móvil: la columna pasa a barra inferior ------------------------------ */
@media (max-width: 767.98px) {
  .flnx-rail {
    top: auto;
    width: auto;
    right: 0;
    height: 4.25rem;
    flex-direction: row;
    gap: 0;
    padding: .25rem;
    overflow: auto hidden;
    border-right: 0;
    border-top: 1px solid var(--tblr-border-color);
  }
  .flnx-rail-item { flex: 1 0 4.5rem; padding: .375rem .25rem; }
  .flnx-rail-item .ti { font-size: 1.5rem; }
  .flnx-rail .mt-auto { margin-top: 0 !important; }
  .flnx-main { margin-left: 0; padding-bottom: 4.5rem; }
}

/* ---- Marcadores ------------------------------------------------------------ */
.flnx-tree-row { position: relative; }
.flnx-tree-link {
  display: flex;
  align-items: center;
  padding: .4rem .75rem;
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-body-color);
  text-decoration: none;
  min-width: 0;
}
.flnx-tree-link:hover { background: var(--tblr-active-bg); color: var(--tblr-body-color); }
.flnx-tree-link.active { background: rgba(var(--tblr-primary-rgb), .14); color: var(--flnx-brand); font-weight: 600; }
.flnx-tree-link .ti { color: var(--flnx-rail-fg); }
.flnx-favicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary);
  color: var(--flnx-rail-fg);
}
.flnx-favicon img { object-fit: contain; }

/* ---- Notas ----------------------------------------------------------------- */
.flnx-note-list { list-style: none; margin: 0; padding: 0; }
.flnx-note-list .flnx-note-list { padding-left: 1.1rem; margin-left: .55rem; border-left: 1px dashed var(--tblr-border-color); }
.flnx-note-list ul[hidden] { display: none; }
.flnx-note-list ul:not(:has(> li)) { display: none; }
.is-dragging .flnx-note-list ul:not(:has(> li)) { display: block; min-height: .75rem; margin: .125rem 0 .125rem 1.65rem; border: 1px dashed var(--tblr-border-color); border-radius: var(--tblr-border-radius); }
.flnx-note-row { display: flex; align-items: center; gap: .125rem; padding: .125rem .25rem; border-radius: var(--tblr-border-radius); }
.flnx-note-row:hover { background: var(--tblr-active-bg); }
.flnx-note-row.active { background: rgba(var(--tblr-primary-rgb), .14); }
.flnx-note-row.active .flnx-note-link { color: var(--flnx-brand); font-weight: 600; }
.flnx-note-link { flex: 1 1 auto; min-width: 0; padding: .3rem .25rem; color: var(--tblr-body-color); text-decoration: none; }
.flnx-twisty { display: inline-flex; padding: .15rem; border: 0; background: none; color: var(--flnx-rail-fg); cursor: pointer; }
.flnx-twisty .ti { transition: transform .12s; }
.flnx-twisty[aria-expanded="true"] .ti { transform: rotate(90deg); }
.flnx-drag { display: inline-flex; color: var(--flnx-rail-fg); opacity: 0; cursor: grab; touch-action: none; }
.flnx-note-row:hover .flnx-drag, .is-dragging .flnx-drag { opacity: .8; }
@media (hover: none) { .flnx-drag { opacity: .6; } }
.flnx-vis { color: var(--flnx-rail-fg); font-size: .8rem; opacity: .75; }
.flnx-ghost > .flnx-note-row { background: rgba(var(--tblr-primary-rgb), .22); }

/* Markdown renderizado */
.flnx-md { overflow-wrap: anywhere; line-height: 1.6; }
.flnx-md > :first-child { margin-top: 0; }
.flnx-md > :last-child { margin-bottom: 0; }
.flnx-md h1, .flnx-md h2, .flnx-md h3, .flnx-md h4 { margin: 1.4em 0 .5em; font-weight: 600; line-height: 1.25; }
.flnx-md h1 { font-size: 1.5rem; } .flnx-md h2 { font-size: 1.25rem; } .flnx-md h3 { font-size: 1.1rem; } .flnx-md h4 { font-size: 1rem; }
.flnx-md code:not(pre code) { padding: .1rem .35rem; border-radius: .25rem; background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); font-size: .875em; }
.flnx-md blockquote { margin: 1em 0; padding: .25rem 1rem; border-left: 3px solid var(--flnx-tertiary); color: var(--flnx-rail-fg); }
.flnx-md img { max-width: 100%; height: auto; }
.flnx-md ul:has(> li > input[type="checkbox"]) { list-style: none; padding-left: .25rem; }
.flnx-md li > input[type="checkbox"] { margin-right: .4rem; }
.flnx-code { position: relative; margin: 1em 0; }
.flnx-code pre { margin: 0; padding: .85rem 3rem .85rem 1rem; overflow-x: auto; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); background: light-dark(#f4f0ec, #17120d); color: var(--tblr-body-color); font-size: .85rem; line-height: 1.5; }
.flnx-code pre code { padding: 0; background: none; border: 0; font-size: inherit; color: inherit; white-space: pre; }
.flnx-copy { position: absolute; top: .4rem; right: .4rem; opacity: .65; }
.flnx-code:hover .flnx-copy, .flnx-copy:focus-visible { opacity: 1; }

/* Resaltado de código (highlight.js) con la paleta */
.hljs-comment, .hljs-quote { color: light-dark(#8a8279, #8f877e); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name, .hljs-built_in { color: light-dark(#8c4a1e, #e0a574); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string { color: light-dark(#4f6a1d, #a9c46a); }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-variable, .hljs-template-variable, .hljs-params { color: light-dark(#a0541a, #ffb45c); }
.hljs-title, .hljs-section, .hljs-selector-id, .hljs-selector-class, .hljs-function .hljs-title { color: light-dark(#5a4a8a, #b9a8e8); }
.hljs-type, .hljs-class .hljs-title, .hljs-attr { color: light-dark(#7a5a14, #e6c36a); }
.hljs-meta, .hljs-link, .hljs-subst { color: light-dark(#6b625a, #b8b1aa); }
.hljs-deletion { color: light-dark(#a6310a, #ff8a5c); }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; }