/* ══════════════════════════════════════════
   WIKI FUNCIONAL DE DIGITAL CORE (componente común)
   Layout (índice lateral + artículo), índice automático por página,
   callouts, pasos, checklists y mini-tablas. Lo usan la wiki de Portfolio IA
   y la del Hub Presupuestario (motor en shared/js/ui/wiki.js). Las tarjetas
   de plantilla descargable (.wiki-import-*) y el callout de accesos las usa
   hoy solo Portfolio IA, pero son parte del mismo lenguaje de artículo.
══════════════════════════════════════════ */

.wiki-shell { position: relative; }

.wiki-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; }

.wiki-content { min-width: 0; }

/* El índice se queda fijo al bajar por el artículo; si no cabe en la ventana (pantallas bajas,
   índice largo) se desplaza dentro de su propio hueco para llegar al último grupo. */
.wiki-nav {
  display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; align-self: start;
  max-height: calc(100dvh - var(--header-h) - 64px); overflow-y: auto; overscroll-behavior: contain;
  /* La barra de desplazamiento queda en el hueco entre el índice y el artículo, no pegada a los botones. */
  margin-right: -12px; padding-right: 12px;
}
.wiki-nav > * { flex-shrink: 0; }

.wiki-nav-toggle,
.wiki-nav-backdrop { display: none; }

.wiki-nav button {
  text-align: left; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg2); color: var(--text2); padding: 9px 11px; font-size: 12px;
}

.wiki-nav button.active, .wiki-nav button:hover { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }

/* Etiquetas de grupo del índice (Principal / Análisis / Administración), igual
   que las secciones de la barra lateral de la app, para leer el índice de lo
   general a lo concreto. */
.wiki-nav-group { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text3); padding: 14px 11px 5px; }
.wiki-nav-group:first-child { padding-top: 2px; }

/* Medida fluida: todos los bloques (texto, callouts, rejillas de tarjetas y
   tablas) aprovechan el ancho completo de la tarjeta y se adaptan de forma
   dinámica y ajustable al tamaño de la pantalla. */
.wiki-article { display: none; width: 100%; }

.wiki-article.active { display: block; }

/* Más aire para lectura larga: el contenido de la wiki respira más que las
   tarjetas de datos del resto de la app. */
.wiki-article .card-body { padding: 30px 34px; }

/* El contenido aprovecha todo el ancho disponible de la tarjeta y se adapta
   fluidamente a cualquier resolución de pantalla. */
.wiki-article .card-body > * { width: 100%; max-width: 100%; box-sizing: border-box; }

.wiki-article h2 { font-family: var(--font-display); font-size: 22px; line-height: 1.25; margin: 0 0 10px; }

/* Cada sección (h2 que no es el título de la página) abre con una regla fina y
   aire generoso, para que los bloques se distingan de un vistazo. */
.wiki-article h2:not(:first-of-type) { margin-top: 42px; padding-top: 28px; border-top: 1px solid var(--border2); }

/* Índice automático por página (generado en runtime desde h2/h3). */
.wiki-toc { margin: 8px 0 32px; padding: 16px 18px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; box-sizing: border-box; }
.wiki-toc-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text3); margin-bottom: 11px; }
.wiki-toc-list, .wiki-toc-sub { list-style: none; margin: 0; padding: 0; }
.wiki-toc-list > li { margin: 6px 0; }
.wiki-toc-sub { padding-left: 16px; margin-top: 4px; }
.wiki-toc-sub > li { margin: 4px 0; }
.wiki-toc-link { display: inline-block; background: none; border: none; padding: 3px 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--text2); text-align: left; }
.wiki-toc-link:hover { color: var(--accent); text-decoration: underline; }
.wiki-toc-sub .wiki-toc-link { font-size: 12px; color: var(--text3); }

/* Texto de lectura: interlineado amplio y justificado a lo ancho con separación silábica. */
.wiki-article p {
  color: var(--text2);
  font-size: 14px;
  line-height: 1.75;
  margin: 0 0 16px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.wiki-article h3 { font-family: var(--font-display); font-size: 16px; line-height: 1.3; color: var(--text); margin: 30px 0 10px; }

/* Listas (p. ej. "Reglas" en Tareas): mismo ritmo de lectura que los párrafos. */
.wiki-article ul { margin: 0 0 16px; padding-left: 20px; }
.wiki-article li { color: var(--text2); font-size: 14px; line-height: 1.7; margin: 7px 0; }

.wiki-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 22px 0;
  width: 100%;
  box-sizing: border-box;
}

.wiki-step {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: var(--bg3);
  display: flex; flex-direction: column;
}

.wiki-step .num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; margin-bottom: 11px;
}

.wiki-step > strong { display: block; margin-bottom: 6px; font-size: 13.5px; }

.wiki-step span { color: var(--text2); font-size: 12.5px; line-height: 1.6; text-align: justify; text-justify: inter-word; hyphens: auto; }

.wiki-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin: 22px 0;
  width: 100%;
  box-sizing: border-box;
}

.wiki-check {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: var(--bg3);
}

.wiki-check > strong { display: block; margin-bottom: 6px; font-size: 13.5px; }

.wiki-check span { color: var(--text2); font-size: 12.5px; line-height: 1.6; text-align: justify; text-justify: inter-word; hyphens: auto; }

.wiki-callout {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: var(--accent-soft);
  color: var(--text);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 22px 0;
  font-size: 13px;
  line-height: 1.65;
  width: 100%;
  box-sizing: border-box;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Solo el <strong> inicial es el título del bloque (en su línea); un <strong> en mitad de la
   frase es énfasis y sigue en línea (antes cualquier <strong> del callout partía la frase). */
.wiki-callout > strong:first-child { display: block; margin-bottom: 6px; text-align: left; }

/* Nombre de rol (u otro término corto) dentro de una frase de un callout: en línea,
   sin saltos de línea y con aspecto de etiqueta. */
.wiki-role {
  display: inline-block; white-space: nowrap; padding: 0 7px; margin: 1px 1px;
  border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; line-height: 1.6;
}

/* Lista de responsables de accesos: un responsable por línea, nombre destacado
   y email como enlace, para que se lea con claridad (no todo apelotonado). */
.wiki-access-callout .wiki-access-list {
  list-style: none; margin: 12px 0 4px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.wiki-access-callout .wiki-access-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font-size: 13px; line-height: 1.5;
}
.wiki-access-callout .wiki-access-name { font-weight: 600; color: var(--text); min-width: 120px; }
.wiki-access-callout .wiki-access-list a { color: var(--accent); text-decoration: none; }
.wiki-access-callout .wiki-access-list a:hover { text-decoration: underline; }

/* CTA para solicitar acceso por email desde el callout de permisos. */
.wiki-access-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 9px 14px;
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background-color 140ms ease-out, color 140ms ease-out;
}
.wiki-access-btn svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .wiki-access-btn:hover { background: var(--accent); color: var(--on-accent); }
}
.wiki-access-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wiki-mini-table {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 22px 0;
  width: 100%;
  box-sizing: border-box;
}

.wiki-mini-table div { padding: 13px 18px; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.6; }

.wiki-mini-table div:nth-child(odd) { background: var(--bg3); font-weight: 600; color: var(--text); display: flex; align-items: center; }

.wiki-mini-table div:nth-child(even) { color: var(--text2); text-align: justify; text-justify: inter-word; hyphens: auto; }

.wiki-mini-table div:nth-last-child(-n+2) { border-bottom: none; }

/* ── Página «Importación»: tarjeta de plantilla descargable con vista previa ──
   Cada plantilla se muestra "como es" (pestaña + rejilla de columnas en su orden
   real, con scroll horizontal propio) y su diccionario, más un botón de descarga
   destacado. Sin estilos inline: la CSP de producción no permite style="". */
.wiki-import-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg2); overflow: hidden; margin: 22px 0; }
.wiki-import-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--border); background: var(--bg3); flex-wrap: wrap; }
.wiki-import-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wiki-import-ico { flex: none; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.wiki-import-ico svg { width: 20px; height: 20px; }
.wiki-import-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text); }
.wiki-import-meta { font-size: 11.5px; color: var(--text3); margin-top: 3px; font-family: var(--font-mono); }
.wiki-dl-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); padding: 9px 15px; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.wiki-dl-btn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.wiki-dl-btn svg { width: 15px; height: 15px; }
.wiki-import-body { padding: 15px 18px 18px; }
.wiki-sheet-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wiki-sheet-tab { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: var(--radius-sm); padding: 3px 9px; }
.wiki-sheet-hint { font-size: 11px; color: var(--text3); }
.wiki-sheet-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.wiki-sheet-grid { border-collapse: collapse; min-width: 100%; font-size: 12px; white-space: nowrap; }
.wiki-sheet-grid th, .wiki-sheet-grid td { border: 1px solid var(--border); padding: 7px 11px; text-align: left; }
.wiki-sheet-grid thead th { background: var(--bg4); color: var(--text); font-weight: 600; }
.wiki-sheet-grid tbody td { color: var(--text2); background: var(--bg); }
.wiki-sheet-grid .wiki-cell-empty { color: var(--text3); font-style: italic; }
.wiki-dict-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 16px; }
.wiki-dict-table th, .wiki-dict-table td { border-bottom: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; line-height: 1.5; }
.wiki-dict-table thead th { color: var(--text3); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); border-bottom-color: var(--border2); }
.wiki-dict-table tbody td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }
.wiki-dict-type { font-family: var(--font-mono); font-size: 11px; color: var(--text3); white-space: nowrap; }
.wiki-req { display: inline-block; margin-left: 7px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--red); background: var(--red-soft); border-radius: 4px; padding: 1px 5px; vertical-align: middle; }

@media (max-width: 760px) {
  .wiki-import-head { align-items: flex-start; }
  .wiki-dl-btn { width: 100%; justify-content: center; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .wiki-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 900px) {
  .wiki-shell {
    min-height: calc(100vh - var(--header-h) - 36px);
  }

  .wiki-grid {
    display: block;
  }

  .wiki-nav-toggle {
    position: fixed;
    right: 24px;
    /* Esquina inferior derecha. Si la app muestra un FAB (Portfolio IA con Portia
       activo), su propia hoja de estilos sube este botón para apilarlo encima. La
       izquierda no es opción: la barra lateral se despliega ahí y lo pisaría. */
    bottom: 24px;
    z-index: 43;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
    border-radius: 999px;
    background: var(--bg2);
    color: var(--accent);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow-color) 22%, transparent);
  }

  .wiki-nav-toggle svg {
    width: 16px;
    height: 16px;
  }

  .wiki-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 41;
    display: block;
    background: color-mix(in srgb, var(--shadow-color) 34%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .wiki-nav-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  .wiki-nav {
    position: fixed;
    z-index: 42;
    /* Anula el align-self: start de escritorio: en un elemento fijo haría que el
       panel midiera lo que su contenido y, si no cabe, se saliera por arriba bajo
       la barra superior en vez de desplazarse dentro de su hueco. */
    align-self: stretch;
    max-height: none;
    margin-right: 0;
    top: calc(var(--header-h) + 18px);
    bottom: 18px;
    left: 18px;
    width: min(280px, calc(100vw - 36px));
    padding: 12px;
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg);
    background: var(--bg2);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--shadow-color) 32%, transparent);
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(-100% - 28px));
    transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), opacity 0.22s ease;
  }

  .wiki-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }
}

@media (max-width: 480px) {
  .wiki-nav {
    top: calc(var(--header-h) + 14px);
    bottom: 14px;
    left: 14px;
    width: min(280px, calc(100vw - 28px));
  }
}

/* Lectura en pantallas estrechas: menos relleno y rejillas/recuadros a una
   columna para que cada bloque conserve su aire sin comprimirse. */
@media (max-width: 760px) {
  .wiki-article .card-body { padding: 20px 18px; }
  .wiki-steps { grid-template-columns: 1fr; gap: 12px; }
  .wiki-checklist { grid-template-columns: 1fr; gap: 12px; }
  .wiki-mini-table { grid-template-columns: 140px minmax(0, 1fr); }
  .wiki-mini-table div { padding: 10px 12px; font-size: 12px; }
  .wiki-mini-table div:nth-child(even),
  .wiki-article p,
  .wiki-callout,
  .wiki-step span,
  .wiki-check span { text-align: left; }
}

@media (max-width: 520px) {
  .wiki-mini-table { grid-template-columns: 1fr; }
  .wiki-mini-table div:nth-child(odd) {
    border-bottom: none;
    padding-bottom: 2px;
  }
  .wiki-mini-table div:nth-child(even) {
    padding-top: 4px;
    padding-bottom: 12px;
  }
  .wiki-mini-table div:last-child {
    border-bottom: none;
  }
}

/* ══ Piezas visuales de la wiki (comunes a las tres apps) ══════════════════
   Para explicar desde el punto de vista funcional con poco texto:
   · .wiki-flujo > .wiki-flujo-paso (+ .wiki-flujo-num, strong, span): proceso de
     izquierda a derecha con flechas (en móvil, de arriba abajo).
   · .wiki-tarjetas > .wiki-tarjeta (+ .wiki-tarjeta-ico con un SVG, strong, span):
     rejilla de conceptos con icono.
   · .wiki-esquema: contenedor de un diagrama SVG en línea (solo clases y
     currentColor; nada de style ni colores literales): .wiki-svg-caja,
     .wiki-svg-caja.is-acento / .is-valor / .is-aviso / .is-riesgo, .wiki-svg-texto,
     .wiki-svg-texto.is-sub, .wiki-svg-linea, .wiki-svg-flecha (marker).
   · .wiki-ejemplo: caso práctico («Por ejemplo…») con borde discontinuo.
   · .wiki-chips > .wiki-chip(.is-acento|.is-valor|.is-aviso|.is-riesgo): valores posibles.
   · .wiki-resumen: entradilla destacada «En una frase». */
.wiki-resumen { margin: 4px 0 18px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--text); font-size: 14px; line-height: 1.55; }
.wiki-resumen strong { color: var(--accent); }
.wiki-flujo { display: flex; align-items: stretch; gap: 0; margin: 16px 0 22px; overflow-x: auto; padding-bottom: 4px; }
.wiki-flujo-paso {
  position: relative; flex: 1 1 0; min-width: 140px; display: flex; flex-direction: column; gap: 4px;
  padding: 14px 14px 14px 16px; margin-right: 22px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg2);
}
.wiki-flujo-paso:last-child { margin-right: 0; }
.wiki-flujo-paso:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -17px; width: 12px; height: 12px; margin-top: -6px;
  border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg);
}
.wiki-flujo-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; }
.wiki-flujo-paso strong { font-size: 13px; color: var(--text); }
.wiki-flujo-paso span:not(.wiki-flujo-num) { font-size: 12px; line-height: 1.45; color: var(--text2); }
.wiki-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 14px 0 20px; }
.wiki-tarjeta { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg2); }
.wiki-tarjeta-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent); }
.wiki-tarjeta-ico svg { width: 18px; height: 18px; }
.wiki-tarjeta strong { font-size: 13px; color: var(--text); }
.wiki-tarjeta span { font-size: 12px; line-height: 1.45; color: var(--text2); }
.wiki-esquema { margin: 16px 0 22px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg2); overflow-x: auto; }
.wiki-esquema svg { display: block; width: 100%; min-width: 520px; height: auto; color: var(--text2); font-family: var(--font-body); }
.wiki-esquema-pie { margin-top: 8px; font-size: 12px; color: var(--text3); }
.wiki-svg-caja { fill: var(--bg3); stroke: var(--border2); stroke-width: 1.2; }
.wiki-svg-caja.is-acento { fill: var(--accent-soft); stroke: var(--accent); }
.wiki-svg-caja.is-valor { fill: var(--green-soft); stroke: var(--green); }
.wiki-svg-caja.is-aviso { fill: var(--warning-soft); stroke: var(--warning); }
.wiki-svg-caja.is-riesgo { fill: var(--red-soft); stroke: var(--red); }
.wiki-svg-texto { fill: var(--text); font-size: 13px; font-weight: 600; }
.wiki-svg-texto.is-sub { fill: var(--text2); font-size: 11px; font-weight: 400; }
.wiki-svg-linea { fill: none; stroke: var(--text3); stroke-width: 1.5; }
.wiki-svg-flecha { fill: var(--text3); }
.wiki-ejemplo { margin: 14px 0 20px; padding: 12px 14px; border: 1px dashed var(--accent); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.55; color: var(--text2); }
.wiki-ejemplo strong:first-child { display: block; margin-bottom: 4px; color: var(--accent); }
.wiki-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 16px; }
.wiki-chip { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--bg3); color: var(--text2); font-size: 12px; }
.wiki-chip.is-acento { background: var(--accent-soft); color: var(--accent); }
/* Estados v2 de Portfolio IA: Análisis azul claro y Aprobada azul oscuro (tokens --ia-estado-3/4). */
.wiki-chip.is-analisis { background: color-mix(in srgb, var(--ia-estado-3) 18%, var(--bg2)); color: var(--text); }
.wiki-chip.is-aprobada { background: color-mix(in srgb, var(--ia-estado-4) 18%, var(--bg2)); color: var(--ia-estado-4); }
.wiki-chip.is-valor { background: var(--green-soft); color: var(--green); }
.wiki-chip.is-aviso { background: var(--warning-soft); color: var(--text); }
.wiki-chip.is-riesgo { background: var(--red-soft); color: var(--red); }
@media (max-width: 640px) {
  .wiki-flujo { flex-direction: column; overflow: visible; }
  .wiki-flujo-paso { margin-right: 0; margin-bottom: 22px; }
  .wiki-flujo-paso:last-child { margin-bottom: 0; }
  .wiki-flujo-paso:not(:last-child)::after { top: auto; bottom: -17px; right: 50%; margin: 0 -6px 0 0; transform: rotate(135deg); }
}

/* Textos largos de tarjetas, pasos, avisos y tablas: una frase por línea (más fácil de leer). */
.wiki-frase { display: block; }
.wiki-frase + .wiki-frase { margin-top: 6px; }
.wiki-step span.wiki-frase, .wiki-check span.wiki-frase { text-align: left; }

/* ══ Renovación visual de la wiki (oct 2026, «wiki3») ══════════════════════
   Mismas clases y mismo HTML: solo cambia cómo se ven. Plano (profundidad por tono
   --bg..--bg4), acento azul para lo activo y tonos semánticos en los esquemas.
   Todos los colores salen de tokens (color-mix sobre variables). */

/* Esquemas SVG: lienzo con retícula de puntos, cajas con relleno suave y borde
   del tono, conectores azules redondeados con flujo discontinuo animado. */
.wiki-esquema {
  position: relative; padding: 34px 18px 16px; border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background: var(--bg2);
}
.wiki-esquema::before {
  content: "Esquema"; position: absolute; top: 10px; left: 14px; padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
/* Bloque normal (no flex): un <em> o <strong> dentro del pie sigue en la misma línea. */
.wiki-esquema-pie {
  position: relative; margin-top: 12px; padding: 10px 0 0 24px;
  border-top: 1px dashed var(--border2); color: var(--text2); line-height: 1.5;
}
.wiki-esquema-pie::before {
  content: "i"; position: absolute; left: 0; top: 12px; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 700; font-style: italic;
}
.wiki-svg-caja { fill: var(--bg); stroke: var(--border2); stroke-width: 1.4; }
.wiki-svg-caja.is-acento { fill: color-mix(in srgb, var(--accent) 16%, var(--bg2)); stroke: color-mix(in srgb, var(--accent) 75%, transparent); stroke-width: 1.8; }
.wiki-svg-caja.is-analisis { fill: color-mix(in srgb, var(--ia-estado-3) 16%, var(--bg2)); stroke: var(--ia-estado-3); stroke-width: 1.8; }
.wiki-svg-caja.is-aprobada { fill: color-mix(in srgb, var(--ia-estado-4) 16%, var(--bg2)); stroke: var(--ia-estado-4); stroke-width: 1.8; }
.wiki-svg-caja.is-valor { fill: color-mix(in srgb, var(--green) 15%, var(--bg2)); stroke: color-mix(in srgb, var(--green) 70%, transparent); stroke-width: 1.8; }
.wiki-svg-caja.is-aviso { fill: color-mix(in srgb, var(--warning) 17%, var(--bg2)); stroke: color-mix(in srgb, var(--warning) 75%, transparent); stroke-width: 1.8; }
.wiki-svg-caja.is-riesgo { fill: color-mix(in srgb, var(--red) 14%, var(--bg2)); stroke: color-mix(in srgb, var(--red) 70%, transparent); stroke-width: 1.8; }
.wiki-svg-texto { fill: var(--text); font-weight: 650; }
.wiki-svg-texto.is-sub { fill: var(--text2); font-weight: 450; }
.wiki-svg-linea {
  stroke: color-mix(in srgb, var(--accent) 70%, var(--text3)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 5 4; animation: wikiFlujoLinea 1.6s linear infinite;
}
.wiki-svg-flecha { fill: color-mix(in srgb, var(--accent) 80%, var(--text3)); }
@keyframes wikiFlujoLinea { to { stroke-dashoffset: -18; } }

/* Flujos: pasos con franja azul y nodo numerado grande con anillo. */
.wiki-flujo { padding-top: 6px; }
.wiki-flujo-paso {
  gap: 6px; padding: 16px; border-top: 3px solid var(--accent);
  background: var(--bg2);
}
.wiki-flujo-num { width: 30px; height: 30px; font-size: 13px; margin-bottom: 4px; box-shadow: 0 0 0 4px var(--accent-ring); }
.wiki-flujo-paso strong { font-size: 14px; }

/* Tarjetas: icono grande con tono propio (paleta decorativa), franja superior
   y frases como viñetas cortas. */
.wiki-tarjetas { gap: 14px; }
.wiki-tarjeta {
  --wt-tono: var(--accent); gap: 8px; padding: 18px 16px 16px; position: relative; overflow: hidden;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.wiki-tarjeta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--wt-tono); }
.wiki-tarjeta:hover { border-color: color-mix(in srgb, var(--wt-tono) 55%, var(--border)); background: var(--bg3); transform: translateY(-1px); }
.wiki-tarjeta:nth-child(5n+2) { --wt-tono: var(--view-6); }
.wiki-tarjeta:nth-child(5n+3) { --wt-tono: var(--view-9); }
.wiki-tarjeta:nth-child(5n+4) { --wt-tono: var(--view-5); }
.wiki-tarjeta:nth-child(5n+5) { --wt-tono: var(--view-2); }
.wiki-tarjeta-ico {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--wt-tono) 18%, transparent); color: color-mix(in srgb, var(--wt-tono) 75%, var(--text));
}
.wiki-tarjeta-ico svg { width: 21px; height: 21px; }
.wiki-tarjeta > strong { font-size: 14px; }
.wiki-tarjeta .wiki-frase { position: relative; padding-left: 12px; }
.wiki-tarjeta .wiki-frase::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--wt-tono); }

/* Pasos: número sólido con anillo y franja superior. */
.wiki-step { position: relative; overflow: hidden; background: var(--bg2); }
.wiki-step::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); }
.wiki-step .num { width: 30px; height: 30px; background: var(--accent); color: var(--on-accent); font-size: 12px; box-shadow: 0 0 0 4px var(--accent-ring); }

/* Checklist: marca verde delante del título. */
.wiki-check { background: var(--bg2); border-top: 3px solid var(--green); }
.wiki-check > strong { display: flex; align-items: center; gap: 8px; }
.wiki-check > strong::before {
  content: "\2713"; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 700;
}

/* Callouts: acento superior y título con icono «i». */
.wiki-callout { border-top: 4px solid var(--accent); }
.wiki-callout > strong:first-child { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.wiki-callout > strong:first-child::before {
  content: "i"; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; font-style: italic;
}
.wiki-callout .wiki-frase { position: relative; padding-left: 14px; }
.wiki-callout .wiki-frase::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* Ejemplo: tarjeta con etiqueta. */
.wiki-ejemplo { border-style: solid; border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); border-top: 4px solid var(--accent); background: var(--bg2); }
.wiki-ejemplo strong:first-child { display: inline-block; padding: 1px 9px; border-radius: var(--radius-pill); background: var(--accent-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }

/* Resumen: entradilla con acento superior. */
.wiki-resumen { border-top: 4px solid var(--accent); font-size: 14.5px; }

/* Chips con punto de color. */
.wiki-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.wiki-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.wiki-chip.is-aviso::before { background: var(--warning); opacity: 1; }

/* ══ Wiki para negocio (oct 2026, «wiki4») ═════════════════════════════════
   Piezas de contenido: «Lo esencial» al principio de cada artículo largo, avisos
   «Ojo»/«Importante», chips con los tonos de la app (coste, CAPEX/OPEX,
   conocimiento, cumplimiento), matriz de permisos con marcas de color,
   semáforo, fórmula visual, pestañas y acordeones (interactivos y sin JS en
   línea: las pestañas las cablea shared/js/ui/wiki.js con [data-wiki-pestana]). */

/* Lo esencial: 3-5 ideas clave con marca verde, en rejilla. */
.wiki-claves { margin: 0 0 24px; padding: 14px 18px 12px; border: 1px solid color-mix(in srgb, var(--green) 30%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--green) 6%, var(--bg2)); }
.wiki-claves-titulo { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green); }
.wiki-claves-titulo::before { content: "\2605"; font-size: 12px; }
.wiki-article .wiki-claves ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 22px; }
.wiki-article .wiki-claves li { position: relative; margin: 0; padding-left: 24px; font-size: 13.5px; line-height: 1.55; color: var(--text2); }
.wiki-claves li::before {
  content: "\2713"; position: absolute; left: 0; top: .2em; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 10.5px; font-weight: 700;
}
.wiki-claves li strong { color: var(--text); }

/* Listas escaneables: viñeta de color y entrada en negrita. */
.wiki-article ul.wiki-lista { list-style: none; padding-left: 0; }
.wiki-article ul.wiki-lista > li { position: relative; padding-left: 18px; }
.wiki-article ul.wiki-lista > li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.wiki-lista > li > strong:first-child { color: var(--text); }

/* Avisos con tono: Ojo (amarillo de aviso), Importante (rojo, riesgo), Bien (verde). */
.wiki-callout.is-ojo { border-top-color: var(--warning); background: color-mix(in srgb, var(--warning) 9%, var(--bg2)); }
.wiki-callout.is-ojo > strong:first-child { color: var(--text); }
.wiki-callout.is-ojo > strong:first-child::before { content: "!"; font-style: normal; background: var(--warning); color: var(--bg); }
.wiki-callout.is-ojo .wiki-frase::before { background: var(--warning); }
.wiki-callout.is-riesgo { border-top-color: var(--red); background: color-mix(in srgb, var(--red) 7%, var(--bg2)); }
.wiki-callout.is-riesgo > strong:first-child { color: var(--red); }
.wiki-callout.is-riesgo > strong:first-child::before { content: "!"; font-style: normal; background: var(--red); color: var(--on-accent); }
.wiki-callout.is-riesgo .wiki-frase::before { background: var(--red); }
.wiki-callout.is-valor { border-top-color: var(--green); }
.wiki-callout.is-valor > strong:first-child { color: var(--green); }
.wiki-callout.is-valor > strong:first-child::before { content: "\2713"; font-style: normal; background: var(--green); color: var(--on-accent); }
.wiki-callout.is-valor .wiki-frase::before { background: var(--green); }

/* Chips con los tonos semánticos de la app. */
.wiki-chip.is-coste { background: var(--amber-soft); color: var(--amber); }
.wiki-chip.is-capex { background: var(--capex-soft); color: var(--capex); }
.wiki-chip.is-opex { background: var(--opex-soft); color: var(--opex); }
.wiki-chip.is-conocimiento { background: var(--pink-soft); color: var(--pink); }
.wiki-chip.is-cumplimiento { background: var(--teal-soft); color: var(--teal); }
.wiki-chip.is-gris { background: var(--bg4); color: var(--text3); }
.wiki-article p .wiki-chip, .wiki-article li .wiki-chip, .wiki-article td .wiki-chip, .wiki-frase .wiki-chip { padding: 1px 8px; font-size: 11.5px; vertical-align: 1px; }

/* Semáforo: tramos con su color y su significado. */
.wiki-semaforo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 12px 0 18px; }
.wiki-semaforo-tramo { --ws: var(--green); display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--radius-sm); border-top: 4px solid var(--ws); background: color-mix(in srgb, var(--ws) 9%, var(--bg2)); }
.wiki-semaforo-tramo.is-aviso { --ws: var(--warning); }
.wiki-semaforo-tramo.is-riesgo { --ws: var(--red); }
.wiki-semaforo-tramo.is-gris { --ws: var(--text3); }
.wiki-semaforo-tramo strong { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); }
.wiki-semaforo-tramo strong::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--ws); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws) 22%, transparent); }
.wiki-semaforo-tramo span { font-size: 12px; line-height: 1.5; color: var(--text2); }

/* Matriz de permisos: quién puede qué, con marcas de color. */
.wiki-matriz-wrap { margin: 14px 0 20px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.wiki-matriz { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wiki-matriz th, .wiki-matriz td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: center; }
.wiki-matriz thead th { background: var(--table-head-bg, var(--bg3)); color: var(--text); font-weight: 600; font-size: 12px; white-space: nowrap; }
.wiki-matriz tbody th { text-align: left; font-weight: 500; color: var(--text2); min-width: 170px; }
.wiki-matriz tbody tr:last-child > * { border-bottom: none; }
.wiki-matriz tbody tr:hover > * { background: var(--bg3); }
.wiki-si, .wiki-no, .wiki-parcial { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; }
.wiki-si { background: var(--green-soft); color: var(--green); }
.wiki-si::before { content: "\2713"; }
.wiki-no { background: var(--bg4); color: var(--text3); }
.wiki-no::before { content: "\2013"; }
.wiki-parcial { background: var(--warning-soft); color: var(--text); }
.wiki-parcial::before { content: "\25D0"; font-size: 11px; }
.wiki-matriz-leyenda { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 12px; border-top: 1px solid var(--border); background: var(--bg2); font-size: 11.5px; color: var(--text3); }
.wiki-matriz-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.wiki-matriz-leyenda .wiki-si, .wiki-matriz-leyenda .wiki-no, .wiki-matriz-leyenda .wiki-parcial { width: 16px; height: 16px; font-size: 9.5px; }

/* Pestañas (interactivas): botones [data-wiki-pestana] + paneles [data-wiki-panel]. */
.wiki-pestanas { margin: 14px 0 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg2); overflow: hidden; }
.wiki-pestanas-barra { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--border); background: var(--bg3); }
.wiki-pestana { --wp: var(--accent); display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text2); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.wiki-pestana::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wp); }
.wiki-pestana:hover { color: var(--text); background: var(--bg2); }
.wiki-pestana.is-activa { background: color-mix(in srgb, var(--wp) 14%, var(--bg2)); color: var(--text); border-color: color-mix(in srgb, var(--wp) 45%, transparent); }
.wiki-pestana:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wiki-pestana.is-valor { --wp: var(--green); }
.wiki-pestana.is-aviso { --wp: var(--warning); }
.wiki-pestana.is-riesgo { --wp: var(--red); }
.wiki-pestana.is-coste { --wp: var(--amber); }
.wiki-pestana.is-conocimiento { --wp: var(--pink); }
.wiki-pestana.is-cumplimiento { --wp: var(--teal); }
.wiki-pestana.is-gris { --wp: var(--text3); }
.wiki-panel { padding: 14px 18px 6px; }
.wiki-panel[hidden] { display: none; }
.wiki-panel.is-entrando { animation: wikiPanelEntra .22s ease; }
@keyframes wikiPanelEntra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.wiki-panel > :first-child { margin-top: 0; }

/* Acordeón (nativo <details>): detalle que se despliega al pulsar. */
.wiki-acordeon { margin: 8px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg2); }
.wiki-acordeon > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 11px 44px 11px 14px; position: relative; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600; color: var(--text); }
.wiki-acordeon > summary::-webkit-details-marker { display: none; }
.wiki-acordeon > summary::after { content: "+"; position: absolute; right: 12px; top: 50%; margin-top: -11px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; transition: transform .2s ease; }
.wiki-acordeon[open] > summary::after { transform: rotate(45deg); }
.wiki-acordeon > summary:hover { color: var(--accent); }
.wiki-acordeon > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wiki-acordeon > summary .wiki-chip { font-weight: 500; }
.wiki-acordeon-cuerpo { padding: 2px 16px 12px; border-top: 1px dashed var(--border2); }
.wiki-acordeon[open] .wiki-acordeon-cuerpo { animation: wikiPanelEntra .2s ease; }
.wiki-acordeon-cuerpo > :first-child { margin-top: 10px; }

/* Fórmula visual: piezas con operadores. */
.wiki-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 18px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg2); border: 1px solid var(--border); }
.wiki-formula-pieza { --wf: var(--accent); display: inline-flex; flex-direction: column; padding: 6px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--wf) 12%, var(--bg)); border: 1px solid color-mix(in srgb, var(--wf) 40%, transparent); font-size: 13px; font-weight: 600; color: var(--text); }
.wiki-formula-pieza small { font-size: 11px; font-weight: 400; color: var(--text3); }
.wiki-formula-pieza.is-valor { --wf: var(--green); }
.wiki-formula-pieza.is-coste { --wf: var(--amber); }
.wiki-formula-pieza.is-aviso { --wf: var(--warning); }
.wiki-formula-pieza.is-riesgo { --wf: var(--red); }
.wiki-formula-op { font-size: 18px; font-weight: 700; color: var(--text3); }

@media (max-width: 640px) {
  .wiki-claves { padding: 12px 14px 10px; }
  .wiki-article .wiki-claves ul { grid-template-columns: 1fr; }
  .wiki-pestanas-barra { flex-wrap: nowrap; overflow-x: auto; }
  .wiki-pestana { flex: 0 0 auto; }
  .wiki-panel { padding: 12px 14px 4px; }
  .wiki-matriz th, .wiki-matriz td { padding: 8px; }
  .wiki-matriz tbody th { min-width: 130px; }
  .wiki-formula-op { font-size: 15px; }
}
.wiki-tarjeta > .wiki-chip { align-self: flex-start; }
.wiki-ejemplo .wiki-frase + .wiki-frase { margin-top: 6px; }
.wiki-acordeon-cuerpo .wiki-semaforo, .wiki-acordeon-cuerpo .wiki-matriz-wrap { margin: 10px 0 8px; }
.wiki-chips-titulo { width: 100%; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text3); }
.wiki-acordeones { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 20px; }
.wiki-acordeones > .wiki-acordeon { margin: 0; }
.wiki-acordeon-cuerpo p, .wiki-acordeon-cuerpo .wiki-frase { font-size: 13.5px; line-height: 1.65; color: var(--text2); }
.wiki-acordeon-cuerpo .wiki-frase { position: relative; padding-left: 14px; }
.wiki-acordeon-cuerpo .wiki-frase::before { content: ""; position: absolute; left: 2px; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.wiki-acordeon-cuerpo .wiki-frase:last-child { margin-bottom: 4px; }
.wiki-article p.wiki-pista { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; font-size: 12.5px; color: var(--text3); font-style: italic; }
.wiki-article p.wiki-pista::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-style: normal; font-weight: 700; font-size: 11px; }
/* La matriz no hereda el estilo de cabecera de las tablas de datos (mayúsculas, mono). */
.wiki-article .wiki-matriz th { font-family: inherit; text-transform: none; letter-spacing: normal; }
.wiki-article .wiki-matriz tbody th { background: none; font-size: 12.5px; }
@media (max-width: 640px) {
  .wiki-article .wiki-matriz thead th { white-space: normal; font-size: 11px; line-height: 1.3; }
  .wiki-article .wiki-matriz tbody th { min-width: 120px; font-size: 12px; }
}
/* Matriz en móvil (≤ 640 px): sin scroll lateral. Cada fila es una rejilla; la
   etiqueta de la fila (y la esquina de la cabecera) ocupa todo el ancho y debajo
   van las columnas de roles, alineadas con la cabecera. El nº de columnas se
   deduce de la cabecera (3 por defecto, 2-5 con :has). */
@media (max-width: 640px) {
  .wiki-matriz-wrap { overflow-x: visible; }
  .wiki-article .wiki-matriz { --wm-cols: 3; display: block; width: 100%; }
  .wiki-article .wiki-matriz:has(thead th:nth-child(3):last-child) { --wm-cols: 2; }
  .wiki-article .wiki-matriz:has(thead th:nth-child(5)) { --wm-cols: 4; }
  .wiki-article .wiki-matriz:has(thead th:nth-child(6)) { --wm-cols: 5; }
  .wiki-article .wiki-matriz thead,
  .wiki-article .wiki-matriz tbody { display: block; }
  .wiki-article .wiki-matriz tr { display: grid; grid-template-columns: repeat(var(--wm-cols), minmax(0, 1fr)); align-items: center; }
  .wiki-article .wiki-matriz th,
  .wiki-article .wiki-matriz td { display: block; min-width: 0; padding: 7px 4px; }
  .wiki-article .wiki-matriz thead tr { align-items: end; background: var(--table-head-bg, var(--bg3)); border-bottom: 1px solid var(--border); }
  .wiki-article .wiki-matriz thead th { background: none; border-bottom: none; font-size: 10.5px; text-align: center; }
  .wiki-article .wiki-matriz:has(thead th:nth-child(5)) thead th:not(:first-child) { font-size: 10px; padding-left: 1px; padding-right: 1px; letter-spacing: -.01em; }
  .wiki-article .wiki-matriz:has(thead th:nth-child(6)) thead th:not(:first-child) { writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; text-align: left; white-space: nowrap; padding: 8px 0; font-size: 10.5px; }
  .wiki-article .wiki-matriz thead th:first-child { grid-column: 1 / -1; text-align: left; padding: 8px 12px 4px; border-bottom: none; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text3); }
  .wiki-article .wiki-matriz tbody th { grid-column: 1 / -1; min-width: 0; padding: 9px 12px 0; border-bottom: none; color: var(--text); font-weight: 600; }
  .wiki-article .wiki-matriz tbody td { padding: 6px 4px 9px; }
  .wiki-article .wiki-matriz tbody tr { border-bottom: 1px solid var(--border); }
  .wiki-article .wiki-matriz tbody tr:last-child { border-bottom: none; }
  .wiki-article .wiki-matriz tbody tr > * { border-bottom: none; }
  .wiki-article .wiki-matriz tbody tr:hover > * { background: none; }
  .wiki-matriz-leyenda { gap: 6px 14px; }
}

/* ══ Wiki: roles de los flujos y capturas de pantalla (oct 2026) ═══════════
   Un tono por rol, el mismo en los esquemas, las etiquetas del texto y los portales
   de formularios (--view-N de tokens.css). Las capturas llevan su pie y, mientras
   no se haya hecho la imagen, un marcador de posición bien señalizado. */
.wiki-svg-caja[class*="is-rol-"] { fill: color-mix(in srgb, var(--rol-tono) 16%, var(--bg2)); stroke: color-mix(in srgb, var(--rol-tono) 70%, transparent); stroke-width: 1.8; }
.wiki-svg-caja.is-rol-sponsor { --rol-tono: var(--view-2); }
.wiki-svg-caja.is-rol-equipo-ia { --rol-tono: var(--view-8); }
.wiki-svg-caja.is-rol-legal { --rol-tono: var(--view-10); }
.wiki-svg-caja.is-rol-ciso { --rol-tono: var(--view-6); }
.wiki-svg-caja.is-rol-proveedor { --rol-tono: var(--view-13); }

.wiki-rol { --rol-tono: var(--view-12); display: inline-block; white-space: nowrap; padding: 0 8px; margin: 1px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--rol-tono) 50%, transparent); background: color-mix(in srgb, var(--rol-tono) 18%, transparent); color: color-mix(in srgb, var(--rol-tono) 60%, var(--text)); font-size: 11.5px; font-weight: 600; line-height: 1.7; }
.wiki-rol[data-rol="sponsor"] { --rol-tono: var(--view-2); }
.wiki-rol[data-rol="equipo-ia"] { --rol-tono: var(--view-8); }
.wiki-rol[data-rol="legal"] { --rol-tono: var(--view-10); }
.wiki-rol[data-rol="ciso"] { --rol-tono: var(--view-6); }
.wiki-rol[data-rol="proveedor"] { --rol-tono: var(--view-13); }

.wiki-captura { margin: 16px 0 22px; padding: 0; }
.wiki-captura img { display: block; width: 100%; height: auto; border: 1px solid var(--border2); border-radius: var(--radius-sm); background: var(--bg2); }
.wiki-captura-pendiente {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; padding: 18px 16px;
  border: 1px dashed var(--border2); border-radius: var(--radius-sm); background: var(--bg2); color: var(--text3); text-align: center;
}
.wiki-captura-pendiente::before { content: "Captura pendiente"; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--warning-soft); color: var(--text); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.wiki-captura-pendiente span { max-width: 52ch; font-size: 12.5px; line-height: 1.5; color: var(--text2); }
.wiki-captura figcaption { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--text3); }

/* ── Revisión visual de la wiki (nov 2026) ───────────────────────────────────
   Diagramas más legibles (líneas y flechas más gruesas, texto mayor, sin encogerse), cada
   Estado con su color y chips/roles con contraste AA en claro y oscuro. */
.wiki-esquema svg { min-width: 560px; }
.wiki-esquema-titulo { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text3); }
.wiki-svg-texto { font-size: 14px; }
.wiki-svg-texto.is-sub { font-size: 12px; }
.wiki-svg-linea { stroke-width: 2.6; }
.wiki-svg-eje { stroke: var(--border2); stroke-width: 1.5; }
.wiki-svg-caja { stroke-width: 2; }
.wiki-svg-caja[class*="is-estado-"] { fill: color-mix(in srgb, var(--ee) 22%, var(--bg2)); stroke: var(--ee); stroke-width: 2.4; }
.wiki-svg-caja.is-estado-1 { --ee: var(--ia-estado-1); }
.wiki-svg-caja.is-estado-2 { --ee: color-mix(in srgb, var(--ia-estado-2) 55%, var(--text3)); }
.wiki-svg-caja.is-estado-3 { --ee: var(--ia-estado-3); }
.wiki-svg-caja.is-estado-4 { --ee: var(--ia-estado-4); }
.wiki-svg-caja.is-estado-5 { --ee: var(--ia-estado-5); }
.wiki-svg-caja.is-estado-6 { --ee: var(--ia-estado-6); }
.wiki-svg-caja.is-estado-7 { --ee: var(--ia-estado-7); }
.wiki-svg-caja.is-estado-8 { --ee: var(--ia-estado-8); }
.wiki-svg-caja.is-estado-9 { --ee: var(--ia-estado-9); }

/* Contraste: el texto de chips, roles y botones azules/verdes/rojos se mezcla con el texto del tema. */
.wiki-chip.is-acento, .wiki-chip.is-valor, .wiki-chip.is-riesgo, .wiki-chip.is-coste, .wiki-chip.is-capex,
.wiki-chip.is-opex, .wiki-chip.is-conocimiento, .wiki-chip.is-cumplimiento, .wiki-chip.is-aprobada,
.wiki-role, .wiki-dl-btn, .wiki-access-btn { color: color-mix(in srgb, var(--wc, var(--accent)) 55%, var(--text)); }
.wiki-chip.is-valor { --wc: var(--green); }
.wiki-chip.is-riesgo { --wc: var(--red); }
.wiki-chip.is-coste { --wc: var(--amber); }
.wiki-chip.is-capex { --wc: var(--capex); }
.wiki-chip.is-opex { --wc: var(--opex); }
.wiki-chip.is-conocimiento { --wc: var(--pink); }
.wiki-chip.is-cumplimiento { --wc: var(--teal); }
.wiki-chip.is-aprobada { --wc: var(--ia-estado-4); }
.wiki-chip.is-gris { color: var(--text2); }

/* Colores con significado fijo también en los diagramas (mismos que las páginas y los chips). */
.wiki-svg-caja.is-coste { fill: color-mix(in srgb, var(--amber) 16%, var(--bg2)); stroke: var(--amber); stroke-width: 2.2; }
.wiki-svg-caja.is-capex { fill: color-mix(in srgb, var(--capex) 18%, var(--bg2)); stroke: var(--capex); stroke-width: 2.2; }
.wiki-svg-caja.is-opex { fill: color-mix(in srgb, var(--opex) 18%, var(--bg2)); stroke: var(--opex); stroke-width: 2.2; }
.wiki-svg-caja.is-conocimiento { fill: color-mix(in srgb, var(--pink) 16%, var(--bg2)); stroke: var(--pink); stroke-width: 2.2; }
.wiki-svg-caja.is-cumplimiento { fill: color-mix(in srgb, var(--teal) 16%, var(--bg2)); stroke: var(--teal); stroke-width: 2.2; }
.wiki-svg-caja.is-gris { fill: var(--bg3); stroke: var(--text3); stroke-width: 2; }
.wiki-svg-barra { stroke: none; }
.wiki-svg-barra.is-valor { fill: var(--green); }
.wiki-svg-barra.is-capex { fill: var(--capex); }
.wiki-svg-barra.is-opex { fill: var(--opex); }
.wiki-svg-barra.is-acento { fill: var(--accent); }
.wiki-svg-barra.is-riesgo { fill: var(--red); }
.wiki-svg-barra.is-aviso { fill: var(--warning); }
.wiki-svg-barra.is-gris { fill: var(--text3); }
.wiki-svg-meta { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 7 5; }
.wiki-svg-texto.is-sobre { fill: var(--on-accent); }

/* Hub Presupuestario: comprometido (pedidos) y recepcionado con los colores de sus gráficas. */
.wiki-svg-caja.is-comprometido { fill: color-mix(in srgb, var(--chart-comprometido) 18%, var(--bg2)); stroke: var(--chart-comprometido); stroke-width: 2.2; }
.wiki-svg-caja.is-recepcionado { fill: color-mix(in srgb, var(--chart-recepcionado) 18%, var(--bg2)); stroke: var(--chart-recepcionado); stroke-width: 2.2; }
.wiki-svg-barra.is-comprometido { fill: var(--chart-comprometido); }
.wiki-svg-barra.is-recepcionado { fill: var(--chart-recepcionado); }
/* Portfolio Data: los siete estados con sus colores. */
.wiki-svg-caja[class*="is-pd-"] { fill: color-mix(in srgb, var(--pe) 24%, var(--bg2)); stroke: var(--pe); stroke-width: 2.4; }
.wiki-svg-caja.is-pd-1 { --pe: var(--pd-estado-1); } .wiki-svg-caja.is-pd-2 { --pe: var(--pd-estado-2); }
.wiki-svg-caja.is-pd-3 { --pe: var(--pd-estado-3); } .wiki-svg-caja.is-pd-4 { --pe: var(--pd-estado-4); }
.wiki-svg-caja.is-pd-5 { --pe: var(--pd-estado-5); } .wiki-svg-caja.is-pd-6 { --pe: var(--pd-estado-6); }
.wiki-svg-caja.is-pd-7 { --pe: var(--pd-estado-7); }

/* ── Recorridos con capturas (figuras interactivas) ──────────────────────────
   Captura real de la aplicación con los controles marcados y numerados; la lista de pasos
   resalta cada marca al pasar o pulsar, y recorre sola mientras no se toca nada. */
.wiki-recorrido { margin: 18px 0 24px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg2); }
.wiki-recorrido-titulo { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text3); }
.wiki-recorrido-cuerpo { display: flex; flex-direction: column; gap: 14px; }
.wiki-recorrido-pantalla { border: 1px solid var(--border2); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); }
.wiki-recorrido-pantalla svg { display: block; width: 100%; height: auto; }
.wiki-recorrido-pasos, .wiki-article .wiki-recorrido-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.wiki-recorrido-pasos > li, .wiki-article .wiki-recorrido-pasos > li { margin: 0; padding: 0; }
.wiki-recorrido-pasos > li::before, .wiki-article .wiki-recorrido-pasos > li::before { content: none; }
.wiki-paso { display: flex; gap: 10px; width: 100%; padding: 7px 9px; text-align: left; font: inherit; font-size: 12.5px; line-height: 1.4; color: var(--text2); background: none; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: background .15s var(--ease-out), border-color .15s var(--ease-out); }
.wiki-paso b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg4); color: var(--text); font-size: 11.5px; transition: background .15s, color .15s, transform .2s var(--ease-out); }
.wiki-paso strong { display: block; color: var(--text); font-size: 13px; }
.wiki-paso:hover { background: var(--bg3); }
.wiki-paso.is-activo { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.wiki-paso.is-activo b { background: var(--accent); color: var(--on-accent); transform: scale(1.15); }
/* Marcas sobre la captura. */
.wiki-hot-caja { fill: transparent; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; opacity: .55; transition: opacity .2s, fill .2s; }
.wiki-hot-num { fill: var(--accent); stroke: var(--bg2); stroke-width: 2; }
.wiki-hot-txt { fill: var(--on-accent); font-size: 12px; font-weight: 700; font-family: var(--font-body); pointer-events: none; }
.wiki-recorrido.is-enfocado .wiki-hot { opacity: .35; transition: opacity .2s; }
.wiki-recorrido.is-enfocado .wiki-hot.is-activo { opacity: 1; }
.wiki-hot.is-activo .wiki-hot-caja { opacity: 1; stroke-dasharray: none; stroke-width: 3; fill: color-mix(in srgb, var(--accent) 14%, transparent); animation: wikiHotLatido 1.2s ease-in-out infinite; }
.wiki-hot.is-activo .wiki-hot-num { animation: wikiHotNum 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wikiHotLatido { 50% { stroke-width: 5; } }
@keyframes wikiHotNum { 50% { transform: scale(1.22); } }
@media (max-width: 760px) { .wiki-recorrido-pasos, .wiki-article .wiki-recorrido-pasos { grid-template-columns: 1fr; } }

/* Diagramas: nunca más grandes que su contenido natural, centrados. */
.wiki-esquema { text-align: center; }
.wiki-esquema svg { max-width: 640px; margin-inline: auto; text-align: left; }
.wiki-esquema > .wiki-esquema-titulo, .wiki-esquema > .wiki-esquema-pie { text-align: left; }