/* ----------------------------------------------------------------------------
   ACE NUTRITIONS. — Espacio Wiki Clínica (layout estilo Confluence)
   ----------------------------------------------------------------------------
   Ruta propia `/wiki`, fuera del Estudio Clínico. Antes el glosario era una
   pestaña del Estudio y arrastraba el selector de paciente, el chevron del
   flujo de consulta y la barra lateral clínica: tres navegaciones compitiendo
   en pantalla, cuando un espacio de documentación tiene una sola.

   Medidas tomadas de Confluence, no inventadas:
     · árbol de páginas    284px
     · columna de lectura  760px  (antes 589px, demasiado estrecha para leer)
     · rail derecho        240px
     · título de página    29px   (antes 24px)
     · cuerpo              16px / 1.714
   -------------------------------------------------------------------------- */

:root {
  --cf-tree-w: 284px;
  --cf-read-w: 760px;
  --cf-rail-w: 240px;
  --cf-gutter: 40px;
}

/* --- Rejilla del espacio ---------------------------------------------------
   Tres columnas fijas y el lienzo centrado: el artículo mantiene su ancho de
   lectura aunque la ventana crezca, que es lo que hace cómoda una wiki. */
.cf-space {
  display: grid;
  /* Columnas con MEDIDA, no fracciones. Con `1fr` la columna de lectura se
     estiraba a todo el hueco y el lienzo de 840px se centraba dentro: 120px
     muertos entre el riel y la primera letra, y la tabla de contenido pegada
     al borde derecho sin un respiro. Las dos columnas y su calle miden lo
     que deben, y el bloque entero se centra como una sola pieza. */
  grid-template-columns: minmax(0, var(--cf-read-w)) var(--cf-rail-w);
  gap: var(--cf-gutter);
  justify-content: center;
  align-items: start;
  padding: 0 var(--cf-gutter);
  min-height: calc(100vh - 60px);
  background: var(--bg-surface);
  color: var(--ink);
}

/* --- Árbol del espacio, dentro del riel -----------------------------------
   Ya no es una columna propia: con el riel delante había DOS columnas de
   navegación a la izquierda antes de llegar al texto, que es justo el vicio
   que sacó el glosario del Estudio. Confluence tiene una sola barra, y el
   árbol del espacio vive dentro de ella. */
.cf-space-block {
  display: none;
  flex-direction: column;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--border-soft);
}

html[data-active-page='wiki'] .cf-space-block { display: flex; }
html[data-app-rail='collapsed'] .cf-space-block { display: none; }

/* La cabecera del espacio es un conmutador: el arbol es alto y empujaba los
   grupos Clinica, Conocimiento y Administracion fuera de la pantalla.
   Plegandolo se ve el resto del riel sin tener que recorrerlo. */
.cf-space-head {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 6px 8px 12px;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.cf-space-head:hover { background: var(--bg-subtle); }
.cf-space-head:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Triangulo dibujado con bordes, igual que el de las ramas del arbol. */
.cf-space-caret {
  width: 0;
  height: 0;
  margin-left: auto;
  flex: none;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--ink-muted);
  transition: transform 0.12s ease;
}
.cf-space-head[aria-expanded="true"] .cf-space-caret { transform: rotate(90deg); }

.cf-space-head[aria-expanded="false"] + .cf-space-body { display: none; }

/* Plegado, la cabecera deja de llevar su propio separador: pasa a ser una
   fila mas del riel, en linea con los titulos de los otros grupos. */
.cf-space-head[aria-expanded="false"] { padding-bottom: 6px; }
.cf-space-block:has(.cf-space-head[aria-expanded="false"]) {
  padding-bottom: 8px;
}

.cf-space-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: var(--brand);
  color: var(--bg-surface);
  font-size: 14px;
  font-weight: 700;
  flex: none;
}

.cf-space-id { display: flex; flex-direction: column; min-width: 0; }
.cf-space-name { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.cf-space-kind { font-size: 11px; color: var(--ink-muted); line-height: 1.4; }

.cf-tree-search { padding: 0 8px; margin-bottom: 12px; }

.cf-search-input {
  width: 100%;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg-surface);
  border: 1px solid var(--border-med);
  border-radius: 4px;
}
.cf-search-input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}

.cf-tree-group { margin-bottom: 2px; }

.cf-tree-parent {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.cf-tree-parent:hover { background: var(--bg-subtle); }

/* Triángulo de expansión dibujado con bordes: sin iconos externos. */
.cf-tree-caret {
  width: 0;
  height: 0;
  flex: none;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--ink-muted);
  transition: transform 0.12s ease;
}
.cf-tree-parent[aria-expanded="true"] .cf-tree-caret { transform: rotate(90deg); }

.cf-tree-children { display: flex; flex-direction: column; }
.cf-tree-parent[aria-expanded="false"] + .cf-tree-children { display: none; }

.cf-tree-item {
  position: relative;
  padding: 6px 8px 6px 25px;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-secondary);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.cf-tree-item:hover { background: var(--bg-subtle); color: var(--ink); }

/* La página abierta se marca con una barra lateral, como en Confluence. */
.cf-tree-item.is-active {
  font-weight: 600;
  color: var(--brand);
  background: var(--bg-subtle);
}
.cf-tree-item.is-active::before {
  content: "";
  position: absolute;
  inset: 3px auto 3px 0;
  width: 2px;
  border-radius: 1px;
  background: var(--brand);
}

/* --- Lienzo de la página --------------------------------------------------- */
.cf-page {
  width: 100%;
  min-width: 0;
  padding: 32px 0 96px;
}

.cf-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--ink-muted);
}
.cf-crumb { color: var(--ink-muted); text-decoration: none; }
.cf-crumb:hover { color: var(--brand); text-decoration: underline; }
.cf-crumb.is-current {
  color: var(--ink-secondary);
  /* El título completo repetía la cabecera entera en la migaja de pan.
     Confluence la recorta: la migaja sitúa, no vuelve a titular. */
  max-width: 44ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-crumb-sep { color: var(--border-med); }

.cf-page-head { margin-bottom: 32px; }

.cf-page-title {
  margin: 0 0 12px;
  font-size: 29px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--ink);
}

.cf-byline {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-muted);
}
.cf-avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--bg-surface);
  font-size: 10px;
  font-weight: 700;
  flex: none;
}
.cf-byline-text strong { color: var(--ink-secondary); font-weight: 600; }
.cf-byline-sep { margin: 0 4px; }

.cf-page-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cf-label {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-secondary);
  background: var(--bg-elevated);
  border-radius: 3px;
  text-transform: uppercase;
}

/* --- Cuerpo del artículo ---------------------------------------------------
   Tipografía de lectura larga: 16px sobre 1.714, que es la proporción de
   Confluence y deja respirar los párrafos técnicos. */
.cf-page-body { font-size: 16px; line-height: 1.714; color: var(--ink-secondary); }
.cf-page-body > * + * { margin-top: 20px; }
.cf-page-body h2 {
  margin-top: 36px;
  padding-bottom: 6px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  border-bottom: 1px solid var(--border-soft);
}
.cf-page-body h3 {
  margin-top: 28px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

/* --- Paneles de información (la marca de la casa de Confluence) ------------ */
.cf-panel {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 4px;
  border-left: 3px solid var(--brand);
  background: var(--bg-subtle);
  font-size: 15px;
}
.cf-panel-icon { flex: none; font-weight: 700; color: var(--brand); }
.cf-panel.is-warn { border-left-color: var(--warn); background: var(--amber-bg, var(--bg-subtle)); }
.cf-panel.is-warn .cf-panel-icon { color: var(--warn); }
.cf-panel.is-danger { border-left-color: var(--danger); }
.cf-panel.is-danger .cf-panel-icon { color: var(--danger); }

/* --- Rail derecho ---------------------------------------------------------- */
.cf-rail {
  position: sticky;
  top: 64px;
  align-self: start;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 32px 0;
}

.cf-rail-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cf-toc-list { margin: 0 0 32px; padding: 0; list-style: none; }
.cf-toc-list li { margin: 0; }
.cf-toc-link {
  display: block;
  padding: 4px 0 4px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-muted);
  text-decoration: none;
  border-left: 2px solid var(--border-soft);
}
.cf-toc-link:hover { color: var(--brand); }
/* La sección visible se resalta mientras se hace scroll. */
.cf-toc-link.is-current {
  color: var(--brand);
  font-weight: 600;
  border-left-color: var(--brand);
}
.cf-toc-link.is-sub { padding-left: 24px; font-size: 12px; }

.cf-rail-aside {
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
.cf-rail-note { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-secondary); }
.cf-live-list { margin: 0; font-size: 12px; }
.cf-live-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
.cf-live-row dt { color: var(--ink-muted); }
.cf-live-row dd { margin: 0; font-weight: 600; color: var(--ink-secondary); }
.cf-rail-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--brand);
  text-decoration: none;
}
.cf-rail-link:hover { text-decoration: underline; }

/* --- Adaptación a pantallas menores ---------------------------------------
   El rail cae primero y el árbol después: leer el artículo es lo que importa
   cuando el espacio escasea. */
@media (max-width: 1280px) {
  .cf-space { grid-template-columns: minmax(0, 1fr); }
  .cf-rail { display: none; }
}

@media (max-width: 900px) {
  /* La calle de 40px a cada lado se come una quinta parte de una pantalla de
     390px. En movil basta un margen de 16, que es el que respira sin robar
     ancho de lectura. */
  .cf-space { padding: 0 16px; }
  .cf-page { padding: 24px 0 72px; }
  .cf-page-title { font-size: 24px; }
}

/* --- Ajustes de los artículos heredados dentro del espacio -----------------
   Los seis artículos abren con un `h2` numerado que era su título cuando
   convivían apilados en una sola pestaña. Aquí cada uno es una página con su
   propia cabecera, así que ese encabezado diría dos veces lo mismo. */
.cf-page-body .ace-wiki-article > h2:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* El laboratorio interactivo va después del texto que lo explica, no antes:
   se practica con la fórmula una vez leída. */
.cf-page-body #wikiLiveFormulaLab {
  order: 2;
  margin-top: 32px;
}
.cf-page-body {
  display: flex;
  flex-direction: column;
}
.cf-page-body .ace-wiki-article { order: 1; }
.cf-page-body .ace-wiki-article.kx-hidden { display: none; }

/* El recuadro clínico es el panel de información de Confluence: en una
   columna de lectura de 16px, los 13px que traía lo hacían parecer una nota
   al pie en vez del aviso destacado que es. */
.cf-page-body .ace-wiki-callout {
  font-size: 15px;
  line-height: 1.6;
  border-left-width: 3px;
  padding: 16px;
}

.cf-page-body .ace-wiki-callout strong {
  margin-bottom: 6px;
  font-size: 15px;
}

.cf-page-body .ace-table-wrap { overflow-x: auto; }
.cf-page-body .ace-table { font-size: 14px; }

/* El recuadro clinico declara `strong { display: block }` para su titulo,
   pero los `strong` que resaltan terminos DENTRO del parrafo heredan la
   regla: cada enfasis rompia renglon y la frase se leia a trompicones
   ("...demuestra cientificamente que gano" / "+1.73 cm..."). Solo el primero
   es titulo. */
.cf-page-body .ace-wiki-callout strong {
  display: inline;
  margin-bottom: 0;
}

.cf-page-body .ace-wiki-callout > strong:first-child {
  display: block;
  margin-bottom: 6px;
}