/* Micrositio de ayudas Casiopea: componentes del sistema de ayudas.
   Reglas (Stella Nova v0.9.0, docs/DISENO.md):
   · Solo tokens SEMÁNTICOS var(--sn-*). Sin primitivas, sin tokens propios de color.
   · --sn-nova queda reservado al skin (foco, isotipo, títulos, menús activos).
   · Ritmo vertical con --sn-baseline*, espaciado horizontal con --sn-s-*.
   · Radios: --sn-radius-s / --sn-radius / --sn-radius-l; --sn-radius-pill solo para contadores numéricos en mono.
   · Antes de crear, reutilizar: sn-badge, sn-seg, cas-aviso, tarjeta, wiki-accordion, wiki-btn, tooltip-box.
   · Compatibles con TemplateStyles: var() sin respaldo, sin :focus-within, sin var() en transition.
   Prefijo mx- solo para lo que el skin no trae. Ver especimen/index.html. */

/* ── 1. Sello de modo (sobre .sn-badge): forma + etiqueta, color neutro ── */
.mx-modo { gap: var(--sn-s-1); color: var(--sn-ink); white-space: nowrap; }
.mx-modo::before { content: ""; width: .6em; height: .6em; background: var(--sn-icon); flex: none; }
.mx-modo--aprender::before { border-radius: 50%; }
.mx-modo--consultar::before { border-radius: 1px; }
.mx-modo--entender::before { transform: rotate(45deg) scale(.85); }
.mx-modo--resolver::before {
	width: 0; height: 0; background: transparent;
	border-left: .33em solid transparent; border-right: .33em solid transparent; border-bottom: .6em solid var(--sn-icon);
}

/* ── 2. Sello de estado (sobre .sn-badge): variante fantasma ── */
.mx-badge-fantasma { background: transparent; border: 1px dashed var(--sn-hairline); color: var(--sn-ink-soft); white-space: nowrap; }
.mx-badge-borde { background: transparent; border-color: var(--sn-hairline); color: var(--sn-ink); white-space: nowrap; }

/* ── 3. Ficha v0.4 (tres capas) ── */
.mw-parser-output .mx-ficha {
	margin: var(--sn-baseline) 0 var(--sn-baseline-2);
	border: var(--sn-hair); border-radius: var(--sn-radius);
	background: var(--sn-paper-edge); font-size: var(--sn-fs-sm);
}
.mx-ficha__capa { padding: var(--sn-baseline-half) var(--sn-s-4); }
.mx-ficha__capa + .mx-ficha__capa { border-top: 1px solid var(--sn-hairline-soft); }
.mx-ficha__fila { display: flex; flex-wrap: wrap; gap: var(--sn-baseline-half) var(--sn-s-4); align-items: baseline; }
.mx-ficha__fila > span { display: inline-flex; flex-wrap: wrap; gap: var(--sn-s-1); align-items: baseline; }
.mw-parser-output .mx-ficha__resultado { font-size: var(--sn-fs-md); color: var(--sn-ink); margin: var(--sn-baseline-half) 0 0; }
.mx-ficha__etq { color: var(--sn-ink-soft); margin-right: var(--sn-s-1); }
.mx-ficha details > summary { cursor: pointer; color: var(--sn-ink-soft); }
.mx-ficha details[open] > summary { margin-bottom: var(--sn-baseline-half); }
.mx-ficha dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 var(--sn-s-3); margin: 0; }
.mx-ficha dt { color: var(--sn-ink-soft); }
.mx-ficha dd { margin: 0; }
.mx-cambio { font-family: var(--sn-font-mono); }

/* ── Esqueleto de redacción (solo prototipo) ── */
.mx-seccion-borrador { border-left: 2px solid var(--sn-hairline); padding-left: var(--sn-s-3); color: var(--sn-ink-soft); }
.mw-parser-output .mx-redaccion { font-size: var(--sn-fs-sm); color: var(--sn-ink-soft); font-style: italic; }

/* ── 4. Pasos: el número es un contador → pill + mono ── */
.mw-parser-output .mx-pasos { counter-reset: paso; list-style: none; padding: 0; margin-left: 0; }
.mw-parser-output .mx-pasos > li { counter-increment: paso; position: relative; padding-left: 2.6em; margin: 0 0 var(--sn-baseline-half); }
.mx-pasos > li::before {
	content: counter(paso); position: absolute; left: 0; top: .1em;
	min-width: 1.8em; padding: 0 .4em; box-sizing: border-box; text-align: center;
	font-family: var(--sn-font-mono); font-size: var(--sn-fs-sm); line-height: 1.6;
	border-radius: var(--sn-radius-pill); background: var(--sn-sunk); color: var(--sn-ink);
}

/* ── 5. Más detalle: <details> con el aspecto de .wiki-accordion--naked ── */
.mw-parser-output details.wiki-accordion__item > summary { list-style: none; }
.mw-parser-output details.wiki-accordion__item > summary::-webkit-details-marker { display: none; }
.mw-parser-output details.wiki-accordion__item[open] > .wiki-accordion__header { background: var(--sn-sunk); }
.mw-parser-output details.wiki-accordion__item[open] > .wiki-accordion__header::after { content: "−"; }
.mw-parser-output details.wiki-accordion__item[open] > .wiki-accordion__body { display: block; }
.mw-parser-output .mx-mas.wiki-accordion { margin: var(--sn-baseline) 0; }
.mw-parser-output .mx-mas .wiki-accordion__header { box-sizing: border-box; padding-left: var(--sn-s-3); padding-right: var(--sn-s-3); }
.mw-parser-output .mx-mas .wiki-accordion__body { padding: var(--sn-baseline-half) var(--sn-s-3); }

/* ── 6. Puente de modo (pie): separado por aire, sin filete ── */
.mw-parser-output .mx-ruta {
	display: grid; gap: var(--sn-baseline-half) var(--sn-s-5);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	margin-top: var(--sn-baseline-3); padding: var(--sn-baseline) var(--sn-s-4);
	background: var(--sn-paper-edge); border-radius: var(--sn-radius); font-size: var(--sn-fs-sm);
}
.mw-parser-output .mx-ruta h3 {
	font-family: var(--sn-font-text); font-size: var(--sn-fs-xs); font-weight: 600; text-transform: uppercase;
	letter-spacing: .06em; color: var(--sn-ink-soft); margin: 0 0 var(--sn-baseline-half); line-height: var(--sn-leading);
}
.mw-parser-output .mx-ruta ul { list-style: none; margin: 0; padding: 0; }
.mw-parser-output .mx-ruta li { margin: 0 0 var(--sn-baseline-half); display: flex; flex-wrap: wrap; gap: var(--sn-s-2); align-items: baseline; }

/* ── 7. Enlace a pendiente: enlace + sello fantasma ── */
.mx-pend { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--sn-s-1); }
a.mx-link-pendiente { text-decoration-style: dashed; }
.mx-pend .sn-badge { font-size: calc(var(--sn-fs-xs) * .9); padding-top: 0; padding-bottom: 0; }

/* ── 8. Tarjeta de ayuda (sobre .tarjeta) ── */
.mw-parser-output .mx-tarjeta { display: flex; flex-direction: column; gap: var(--sn-baseline-half); text-align: left; padding: var(--sn-baseline) var(--sn-s-4); }
.mw-parser-output .mx-tarjeta h3.title { margin: 0; }
.mx-tarjeta__sellos { display: flex; flex-wrap: wrap; gap: var(--sn-s-1); }
.mw-parser-output .mx-tarjeta .description { font-size: var(--sn-fs-sm); }
.mw-parser-output .mx-tarjeta--pendiente { box-shadow: none; border: 1px dashed var(--sn-hairline); background: transparent; }
.mw-parser-output .mx-tarjeta--pendiente h3.title a { color: var(--sn-ink-soft); }
.mw-parser-output .mx-tarjeta--modo { cursor: auto; }
.mw-parser-output .mx-tarjeta--modo:hover { transform: none; box-shadow: var(--sn-lift-soft); }
.mw-parser-output .mx-tarjeta--modo h3.title { color: var(--sn-ink); }
.mw-parser-output .mx-tarjeta--modo ul { margin: 0; padding-left: var(--sn-s-4); font-size: var(--sn-fs-sm); }

/* ── 9. Selector de perfil (sobre .sn-seg) + recorrido ── */
.mw-parser-output .mx-perfiles { max-width: 30rem; margin: var(--sn-baseline-half) 0; }
.mw-parser-output .mx-recorrido { margin: var(--sn-baseline-half) 0 var(--sn-baseline-2); }
.mw-parser-output .mx-recorrido ol { display: flex; flex-wrap: wrap; gap: var(--sn-baseline-half) var(--sn-s-2); list-style: none; padding: 0; margin: 0; counter-reset: r; }
.mx-recorrido li { counter-increment: r; display: inline-flex; gap: var(--sn-s-1); align-items: baseline; }
.mx-recorrido li::before { content: counter(r); font-family: var(--sn-font-mono); font-size: var(--sn-fs-xs); color: var(--sn-ink-soft); }
.mx-recorrido li:not(:last-child)::after { content: "→"; margin-left: var(--sn-s-1); color: var(--sn-ink-soft); }

/* ── Índice de temas y navegación del proyecto: badge de categoría existente ── */
.mw-parser-output .mx-temas { display: flex; flex-wrap: wrap; gap: var(--sn-s-2); padding: 0; margin: var(--sn-baseline-half) 0; list-style: none; }
.mw-parser-output .mx-temas li { margin: 0; }
.mw-parser-output .mx-temas a.sn-badge { background: var(--sn-field); color: var(--sn-link); text-decoration: none; font-size: var(--sn-fs-sm); }
.mw-parser-output .mx-temas a.sn-badge:hover { color: var(--sn-link-hover); }
.mw-parser-output .mx-temas a.sn-badge[aria-current="page"] { background: var(--sn-paper); color: var(--sn-ink); border-color: var(--sn-hairline); }

/* ── 10. Definición en línea ── */
a.mx-def { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--sn-ink-soft); text-underline-offset: .2em; cursor: help; }
a.mx-def:hover, a.mx-def[aria-expanded="true"] { color: var(--sn-link-hover); }
a.mx-def:focus-visible { outline: 2px solid var(--sn-focus-border); outline-offset: 2px; border-radius: var(--sn-radius-s); }

/* Ventana flotante (definición y marcador): el aspecto de .tooltip-box del skin */
.mx-pop {
	position: absolute; z-index: var(--sn-z-panel); width: min(24rem, calc(100vw - 2rem)); box-sizing: border-box;
	background: var(--sn-paper); color: var(--sn-ink-soft); border: 1px solid var(--sn-hairline);
	border-radius: var(--sn-radius-l); box-shadow: var(--sn-lift);
	padding: var(--sn-baseline-half) var(--sn-s-4); font-family: var(--sn-font-text); font-size: var(--sn-fs-sm); line-height: var(--sn-leading);
}
.mx-pop p { margin: 0 0 var(--sn-baseline-half); }
.mx-pop h4 { margin: 0 var(--sn-s-5) var(--sn-baseline-half) 0; font-size: var(--sn-fs-sm); }
.mx-pop dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 var(--sn-s-2); margin: 0; }
.mx-pop dt { color: var(--sn-ink-soft); }
.mx-pop dd { margin: 0; color: var(--sn-ink); }
.mx-pop__term { font-weight: 600; color: var(--sn-ink); }
.mx-pop__x { position: absolute; top: var(--sn-s-1); right: var(--sn-s-1); border: 0; background: transparent; color: var(--sn-ink-soft); cursor: pointer; font-size: var(--sn-fs-md); padding: var(--sn-s-1) var(--sn-s-2); border-radius: var(--sn-radius-s); }
.mx-pop__x:hover { color: var(--sn-ink); }
@media (max-width: 48rem) {
	.mx-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto !important; width: auto; border-radius: var(--sn-radius-l) var(--sn-radius-l) 0 0; }
}

/* ── 11. Marcador de revisión (sobre .sn-badge, como botón) ── */
button.mx-rev { font-family: var(--sn-font-text); line-height: var(--sn-leading); cursor: pointer; margin: 0 var(--sn-s-1) 0 0; vertical-align: baseline; white-space: nowrap; }
.mx-rev--decision { color: var(--sn-ink); border-color: var(--sn-warn); }
.mx-rev--recomendacion { background: transparent; border-color: var(--sn-hairline); color: var(--sn-ink); }
.mx-rev[data-estado="resuelta"], .mx-rev[data-estado="aceptada"] { background: transparent; border-style: dashed; color: var(--sn-ink-soft); }
button.mx-rev:hover { border-color: var(--sn-ink-soft); }
button.mx-rev:focus-visible, .mx-revtoggle:focus-visible { outline: 2px solid var(--sn-focus-border); outline-offset: 2px; }
.mx-revs { display: flex; flex-wrap: wrap; gap: var(--sn-s-1); align-items: center; margin: var(--sn-baseline-half) 0; font-size: var(--sn-fs-xs); color: var(--sn-ink-soft); }
html[data-mx-revision="off"] .mx-rev,
html[data-mx-revision="off"] .mx-revs,
html[data-mx-revision="off"] .mx-solo-revision { display: none; }

/* Interruptor «Revisión» en la barra (sobre .sn-badge) */
.mx-revtoggle { cursor: pointer; margin-right: var(--sn-s-2); font-family: var(--sn-font-text); background: transparent; border-color: var(--sn-hairline); padding: var(--sn-s-1) var(--sn-s-2); }
.mx-revtoggle[aria-pressed="true"] { background: var(--sn-warn-wash); border-color: var(--sn-warn); color: var(--sn-ink); }
@media (max-width: 40rem) { .mx-revtoggle .mx-etiqueta { display: none; } }

/* ── 12. Indicador de componente nuevo (solo con la capa de revisión) ── */
html[data-mx-revision="on"] .mx-comp-activo { outline: 1px dashed var(--sn-ink-soft); outline-offset: 3px; border-radius: var(--sn-radius-s); }
.mx-nuevo {
	position: fixed; z-index: var(--sn-z-panel); width: max-content; max-width: min(20rem, calc(100vw - 1rem)); box-sizing: border-box;
	background: var(--sn-paper); color: var(--sn-ink-soft); border: 1px solid var(--sn-hairline);
	border-radius: var(--sn-radius-l); box-shadow: var(--sn-lift);
	padding: var(--sn-baseline-half) var(--sn-s-3); font-family: var(--sn-font-text); font-size: var(--sn-fs-xs); line-height: var(--sn-leading);
	text-align: left; font-weight: 400; text-transform: none; letter-spacing: normal;
}
.mx-nuevo__sellos { display: flex; flex-wrap: wrap; gap: var(--sn-s-1); margin-bottom: var(--sn-s-1); }
.mx-nuevo p { margin: 0 0 var(--sn-s-1); color: var(--sn-ink); font-size: var(--sn-fs-xs); }
.mx-nuevo a { color: var(--sn-link); }
.mx-nuevo a:hover { color: var(--sn-link-hover); }
html[data-mx-revision="off"] .mx-nuevo { display: none; }

/* ── Tablas del área Proyecto ── */
.mx-tabla:not(.wikitable) { width: 100%; border-collapse: collapse; font-size: var(--sn-fs-sm); }
.mx-tabla:not(.wikitable) :is(th, td) { text-align: left; vertical-align: top; padding: var(--sn-baseline-half) var(--sn-s-2); border-bottom: 1px solid var(--sn-hairline-soft); }
.mx-tabla:not(.wikitable) th { color: var(--sn-ink-soft); font-weight: 600; }
.mx-filtros { display: flex; flex-wrap: wrap; gap: var(--sn-s-3); margin: var(--sn-baseline-half) 0; font-size: var(--sn-fs-sm); }
.mx-filtros select { font: inherit; padding: 0 var(--sn-s-1); background: var(--sn-field-bg); color: var(--sn-field-fg); border: 1px solid var(--sn-field-border); border-radius: var(--sn-radius-s); }

/* ── Árbol ── */
.mw-parser-output .mx-arbol, .mw-parser-output .mx-arbol ul { list-style: none; padding-left: var(--sn-s-4); margin: 0; }
.mw-parser-output .mx-arbol { padding-left: 0; font-size: var(--sn-fs-sm); }
.mw-parser-output .mx-arbol li { position: relative; margin: 0; padding: 0 0 0 var(--sn-s-3); border-left: 1px solid var(--sn-hairline); }
.mx-arbol li::before { content: ""; position: absolute; left: 0; top: .9em; width: var(--sn-s-2); border-top: 1px solid var(--sn-hairline); }
.mx-arbol .mx-num { font-family: var(--sn-font-mono); color: var(--sn-ink-soft); margin-right: var(--sn-s-1); }
.mx-arbol details > summary { cursor: pointer; font-weight: 600; }

/* ── Gantt: tintas por prioridad, verde de avance, ámbar de hito y bloqueo ── */
.mx-gantt { overflow-x: auto; margin: var(--sn-baseline) 0; }
.mx-gantt__grid { display: grid; min-width: 52rem; font-size: var(--sn-fs-xs); grid-template-columns: 17rem repeat(var(--mx-semanas), minmax(2.6rem, 1fr)); }
.mx-gantt__h { padding: var(--sn-baseline-half) var(--sn-s-1); color: var(--sn-ink-soft); border-bottom: 1px solid var(--sn-hairline); text-align: center; }
.mx-gantt__h:first-child { text-align: left; }
.mx-gantt__fase { grid-column: 1 / -1; padding: var(--sn-baseline-half) var(--sn-s-1) 0; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sn-ink-soft); border-bottom: 1px solid var(--sn-hairline-soft); }
.mx-gantt__nombre { padding: var(--sn-baseline-half) var(--sn-s-1); border-bottom: 1px solid var(--sn-hairline-soft); line-height: 1.3; }
.mx-gantt__nombre small { display: block; color: var(--sn-ink-soft); }
.mx-gantt__pista {
	grid-column: 2 / -1; display: grid; grid-template-columns: repeat(var(--mx-semanas), 1fr);
	border-bottom: 1px solid var(--sn-hairline-soft);
	background-image: linear-gradient(to right, var(--sn-hairline-soft) 1px, transparent 1px);
	background-size: calc(100% / var(--mx-semanas)) 100%;
}
.mx-gantt__barra { align-self: center; height: 1.1rem; border-radius: var(--sn-radius-s); background: var(--sn-ink-soft); position: relative; z-index: 1; margin: 0 2px; }
.mx-gantt__barra--Alta { background: var(--sn-ink); }
.mx-gantt__barra--Media { background: var(--sn-ink-soft); }
.mx-gantt__barra--Baja { background: var(--sn-hairline); }
.mx-gantt__barra--bloqueada { background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--sn-warn) 5px 8px); }
.mx-gantt__avance { position: absolute; inset: 0 auto 0 0; background: var(--sn-ok); border-radius: inherit; }
.mx-gantt__hito { align-self: center; justify-self: start; width: .9rem; height: .9rem; transform: rotate(45deg); background: var(--sn-warn); margin-left: -.45rem; z-index: 1; }
.mx-leyenda { display: flex; flex-wrap: wrap; gap: var(--sn-s-3); font-size: var(--sn-fs-xs); color: var(--sn-ink-soft); }
.mx-leyenda i { display: inline-block; width: 1.2em; height: .7em; border-radius: var(--sn-radius-s); vertical-align: middle; margin-right: var(--sn-s-1); }
.mx-gantt__lista { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } /* la lista es la versión accesible; la grilla es solo visual */
@media (max-width: 48rem) { .mx-gantt__grid { display: none; } .mx-gantt__lista { position: static; clip: auto; width: auto; height: auto; overflow: visible; white-space: normal; } }
.mx-gantt__carga { position: relative; height: 2.6rem; display: flex; align-items: flex-end; justify-content: center; border-left: 1px dotted var(--sn-hairline-soft); }
.mx-gantt__carga span { position: absolute; left: 20%; right: 20%; bottom: 0; background: var(--sn-ok-wash); border-top: 2px solid var(--sn-ok); }
.mx-gantt__carga b { position: relative; font-weight: 600; color: var(--sn-ink-soft); padding-bottom: 2px; }
.mx-gantt__carga--exceso span { background: var(--sn-danger-wash); border-top-color: var(--sn-danger); }

/* ── Documentos del proyecto (markdown) ── */
.mx-doc table { border-collapse: collapse; font-size: var(--sn-fs-sm); display: block; overflow-x: auto; }
.mx-doc th, .mx-doc td { border-bottom: 1px solid var(--sn-hairline-soft); padding: var(--sn-baseline-half) var(--sn-s-2); text-align: left; vertical-align: top; }
.mx-doc pre { overflow-x: auto; font-size: var(--sn-fs-xs); }

/* ── Glosario (página 26) ── */
.mw-parser-output .mx-glosario dt { margin-top: var(--sn-baseline); }
.mw-parser-output .mx-glosario dd { margin: 0; color: var(--sn-ink); }

/* ── Ajustes del microespécimen ── */
.mx-espec-estado { display: flex; flex-wrap: wrap; gap: var(--sn-s-1); margin: 0 0 var(--sn-baseline-half); }
.spec .mx-reuso td, .spec .mx-reuso th { text-align: left; vertical-align: top; padding: var(--sn-baseline-half) var(--sn-s-2); border-bottom: 1px solid var(--sn-hairline-soft); }
.spec .mx-reuso { border-collapse: collapse; width: 100%; font-size: var(--sn-fs-sm); }
/* El espécimen carga la base de MediaWiki de la captura: devolver la tinta del tema */
.spec :is(h1, h2, h3, h4, code) { color: var(--sn-ink); }
.spec .spec-usage > pre.howto-code { white-space: pre-wrap; overflow-wrap: anywhere; }
.spec .spec-usage { align-items: start; }

/* ── Catálogo de incrustables (wikitable del skin) ── */
.mx-tabla-scroll { overflow-x: auto; }
.mw-parser-output .mx-incrustables { width: 100%; font-size: var(--sn-fs-sm); }
.mw-parser-output .mx-incrustables td { vertical-align: top; }
.mw-parser-output .mx-incrustables td:first-child { min-width: 9rem; }
.mw-parser-output .mx-incrustables .sn-badge { margin-top: var(--sn-s-1); }
.mw-parser-output code.mx-codigo { white-space: pre-wrap; overflow-wrap: anywhere; display: block; font-size: var(--sn-fs-xs); }
.mw-parser-output .mx-incrustables { table-layout: fixed; margin-top: 0; }
.mw-parser-output .mx-incrustables th:nth-child(1) { width: 22%; }
.mw-parser-output .mx-incrustables th:nth-child(2) { width: 32%; }
.mw-parser-output .mx-incrustables th:nth-child(3) { width: 28%; }
.mw-parser-output .mx-tabla-scroll { margin: 0 0 var(--sn-baseline); }
@media (max-width: 48rem) {
	.mw-parser-output .mx-incrustables, .mw-parser-output .mx-incrustables tbody, .mw-parser-output .mx-incrustables tr, .mw-parser-output .mx-incrustables td { display: block; width: auto; }
	.mw-parser-output .mx-incrustables thead { display: none; }
	.mw-parser-output .mx-incrustables tr { padding: var(--sn-baseline-half) 0; border-bottom: 1px solid var(--sn-hairline-soft); }
	.mw-parser-output .mx-incrustables td { border: 0; padding: 0 0 var(--sn-baseline-half); }
}
.sn-body .mw-parser-output .mx-tabla-scroll > table.wikitable.mx-incrustables { margin: 0; }

/* ── Modo comentarios (clon): solo tokens de la skin; la variante con --sn-note es una propuesta del espécimen ── */
.mx-comtoggle { cursor: pointer; margin-right: var(--sn-s-2); font-family: var(--sn-font-text); background: transparent; border-color: var(--sn-hairline); padding: var(--sn-s-1) var(--sn-s-2); gap: var(--sn-s-1); min-height: 24px; }
.mx-comtoggle[aria-pressed="true"] { background: var(--sn-ink); color: var(--sn-paper); border-color: var(--sn-ink); }
.mx-comtoggle:focus-visible { outline: 2px solid var(--sn-focus-border); outline-offset: 2px; }
.mx-com-ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 40rem) { .mx-comtoggle .mx-etiqueta { display: none; } }
html[data-mx-comentar="on"] .mw-parser-output [data-mx-bloque] { cursor: pointer; }
html[data-mx-comentar="on"] .mw-parser-output [data-mx-bloque]:hover,
html[data-mx-comentar="on"] .mw-parser-output [data-mx-bloque]:focus-visible { outline: 1px dashed var(--sn-ink-soft); outline-offset: 2px; }
html[data-mx-comentar="on"] .mw-parser-output [data-mx-bloque]:focus-visible { outline: 2px solid var(--sn-focus-border); }
.mw-parser-output .mx-com-elegido { outline: 2px solid var(--sn-ink) !important; outline-offset: 2px; }
.mx-com-cuenta {
	display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; box-sizing: border-box;
	margin: 0 var(--sn-s-1) 0 0; padding: 0 var(--sn-s-1); vertical-align: middle;
	font: 600 var(--sn-fs-xs) / 1 var(--sn-font-mono); border-radius: var(--sn-radius-pill);
	background: var(--sn-ink); color: var(--sn-paper); border: 0; cursor: pointer;
}
.mx-com-cuenta:focus-visible { outline: 2px solid var(--sn-focus-border); outline-offset: 2px; }
html[data-mx-revision="off"] .mx-com-cuenta { display: none; }
.mx-com-panel {
	position: fixed; z-index: var(--sn-z-panel); right: 0; bottom: 0; left: 0; max-height: 75vh; overflow-y: auto; box-sizing: border-box;
	background: var(--sn-paper); color: var(--sn-ink); border-top: 1px solid var(--sn-hairline); box-shadow: var(--sn-lift);
	border-radius: var(--sn-radius-l) var(--sn-radius-l) 0 0; padding: var(--sn-baseline-half) var(--sn-s-4) var(--sn-baseline);
	font-family: var(--sn-font-text); font-size: var(--sn-fs-sm); line-height: var(--sn-leading);
}
@media (min-width: 48rem) {
	.mx-com-panel { top: var(--sn-header-h); left: auto; width: min(24rem, 100vw); max-height: none; border-top: 0; border-left: 1px solid var(--sn-hairline); border-radius: 0; }
}
.mx-com-panel[hidden] { display: none; }
.mx-com-panel__cab { display: flex; justify-content: space-between; align-items: center; gap: var(--sn-s-2); }
.mx-com-panel h2 { font-size: var(--sn-fs-md); font-weight: 700; margin: 0; padding: 0; border: 0; color: var(--sn-ink); line-height: var(--sn-leading); }
.mx-com-cerrar { min-width: 32px; min-height: 32px; border: 0; background: transparent; color: var(--sn-ink-soft); font-size: var(--sn-fs-lg); cursor: pointer; border-radius: var(--sn-radius-s); }
.mx-com-cerrar:hover { color: var(--sn-ink); }
.mx-com-panel :is(button, input, textarea, summary):focus-visible { outline: 2px solid var(--sn-focus-border); outline-offset: 2px; }
.mx-com-estado:empty { display: none; }
.mx-com-estado { margin: var(--sn-baseline-half) 0; padding: var(--sn-s-1) var(--sn-s-2); background: var(--sn-sunk); border-radius: var(--sn-radius-s); }
.mx-com-ayuda { color: var(--sn-ink-soft); margin: var(--sn-baseline-half) 0; }
.mx-com-cita { margin: 0 0 var(--sn-baseline-half); padding-left: var(--sn-s-3); border-left: 2px solid var(--sn-hairline); color: var(--sn-ink-soft); font-style: italic; }
.mx-com-lista, .mx-com-todos ol { list-style: none; padding: 0; margin: 0; }
.mx-com-lista li, .mx-com-todos li { padding: var(--sn-baseline-half) 0; border-bottom: 1px solid var(--sn-hairline-soft); }
.mx-com-lista p, .mx-com-todos p { margin: 0; }
.mx-com-meta { color: var(--sn-ink-soft); }
.mx-com-meta b { color: var(--sn-ink); }
.mx-com-form, .mx-com-codigo { display: grid; gap: var(--sn-s-1); margin: var(--sn-baseline-half) 0; }
.mx-com-form[hidden], .mx-com-codigo[hidden] { display: none; }
.mx-com-panel label { font-weight: 600; }
.mx-com-panel input, .mx-com-panel textarea {
	font: inherit; color: var(--sn-field-fg); background: var(--sn-field-bg); border: 1px solid var(--sn-field-border);
	border-radius: var(--sn-radius-s); padding: var(--sn-s-1) var(--sn-s-2); min-height: 32px; box-sizing: border-box; width: 100%;
}
.mx-com-panel textarea { resize: vertical; }
.mx-com-publicar, .mx-com-exportar, .mx-com-guardar-codigo { justify-self: start; cursor: pointer; min-height: 32px; font-family: var(--sn-font-text); }
.mx-com-publicar { background: var(--sn-ink); color: var(--sn-paper); }
.mx-com-todos { margin-top: var(--sn-baseline); }
.mx-com-todos summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.mx-com-ir { all: unset; cursor: pointer; color: var(--sn-link); text-decoration: underline; }
.mx-com-ir:focus-visible { outline: 2px solid var(--sn-focus-border); }
@media (prefers-reduced-motion: no-preference) { .mx-com-panel { scroll-behavior: smooth; } }
@media (forced-colors: active) { .mx-com-cuenta, .mx-comtoggle[aria-pressed="true"], .mx-com-publicar { border: 1px solid CanvasText; } }

/* Objetivos de 24 px en listas de enlaces (WCAG 2.5.8) */
.mw-parser-output :is(.mx-recorrido, .mx-tarjeta--modo, .mx-ruta, .mx-com-todos) li a { display: inline-flex; align-items: center; min-height: 24px; }

/* Controles de revisión: en la barra en escritorio; en móvil, flotantes abajo para no alterar la cabecera de la wiki */
.mx-revbar { display: inline-flex; align-items: center; }
@media (max-width: 48rem) {
	.mx-revbar { position: fixed; z-index: var(--sn-z-panel); left: var(--sn-s-3); bottom: var(--sn-s-3); gap: var(--sn-s-1);
		padding: var(--sn-s-1); background: var(--sn-paper); border: 1px solid var(--sn-hairline); border-radius: var(--sn-radius-l); box-shadow: var(--sn-lift); }
	.mx-revbar .mx-comtoggle, .mx-revbar .mx-revtoggle { margin: 0; min-height: 44px; min-width: 44px; justify-content: center; }
	html[data-mx-com-panel] .mx-revbar { display: none; }
}
/* «Componente nuevo»: el badge warn de la skin queda en 4,47:1 sobre algunas superficies; texto en tinta y borde ámbar (igual que el marcador de decisión) */
:is(.mx-nuevo__sellos, .mx-espec-estado) .sn-badge-warn { color: var(--sn-ink); border-color: var(--sn-warn); }

/* ── Diálogos del prototipo: aviso de salida y recorrido (tokens de la skin) ── */
.mx-dialogo {
	box-sizing: border-box; width: min(30rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto;
	margin: auto; padding: var(--sn-baseline) var(--sn-s-5); border: 1px solid var(--sn-hairline); border-radius: var(--sn-radius-l);
	background: var(--sn-paper); color: var(--sn-ink); box-shadow: var(--sn-lift);
	font-family: var(--sn-font-text); font-size: var(--sn-fs-base); line-height: var(--sn-leading);
}
.mx-dialogo::backdrop { background: var(--sn-scrim); }
.mx-dialogo__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sn-s-3); }
.mx-dialogo__titulo { margin: 0 0 var(--sn-baseline-half); padding: 0; border: 0; font-family: var(--sn-font-text); font-size: var(--sn-fs-lg); font-weight: 700; line-height: var(--sn-leading); color: var(--sn-ink); }
.mx-dialogo__x { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--sn-ink-soft); font-size: var(--sn-fs-lg); cursor: pointer; border-radius: var(--sn-radius); }
.mx-dialogo__x:hover { background: var(--sn-sunk); color: var(--sn-ink); }
.mx-dialogo__cuerpo p { margin: 0 0 var(--sn-baseline-half); }
.mx-dialogo__volver { padding: var(--sn-baseline-half) var(--sn-s-3); background: var(--sn-sunk); border-radius: var(--sn-radius); font-size: var(--sn-fs-sm); }
.mx-dialogo__volver .sn-badge { background: var(--sn-paper); color: var(--sn-ink); margin-right: var(--sn-s-1); }
.mx-dialogo__recordar { display: flex; align-items: center; gap: var(--sn-s-2); min-height: 44px; font-size: var(--sn-fs-sm); color: var(--sn-ink-soft); cursor: pointer; }
.mx-dialogo__recordar input { width: 1.1rem; height: 1.1rem; accent-color: var(--sn-ink); }
.mx-dialogo__acciones { display: flex; flex-direction: column; gap: var(--sn-s-2); margin-top: var(--sn-baseline-half); }
@media (min-width: 30rem) { .mx-dialogo__acciones { flex-direction: row; flex-wrap: wrap; } }
.mx-boton {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--sn-s-4); box-sizing: border-box;
	border: 1px solid var(--sn-btn-border); border-radius: var(--sn-radius); background: var(--sn-btn-bg); color: var(--sn-btn-fg);
	font: inherit; font-size: var(--sn-fs-sm); font-weight: 600; text-decoration: none; cursor: pointer;
}
.mx-boton:hover { background: var(--sn-btn-bg-hover); border-color: var(--sn-btn-border-hover); }
.mx-boton--principal { background: var(--sn-btn-primary-bg); color: var(--sn-btn-primary-fg); border-color: var(--sn-btn-primary-bg); }
.mx-boton--principal:hover { background: var(--sn-btn-primary-bg-hover); }
.mx-boton--texto { border-color: transparent; background: transparent; color: var(--sn-ink-soft); font-weight: 500; }
.mx-dialogo :is(button, a, input):focus-visible { outline: 2px solid var(--sn-focus-border); outline-offset: 2px; }
html[data-mx-dialogo] { overflow: hidden; }

/* Recorrido: tarjeta junto al elemento señalado; en móvil, panel inferior */
.mx-guia { position: fixed; margin: 0; inset: auto 0 0 0; width: 100%; max-width: none; border-radius: var(--sn-radius-l) var(--sn-radius-l) 0 0; }
.mx-guia::backdrop { background: transparent; }
.mx-guia.mx-guia--centro { inset: 0; margin: auto; width: min(30rem, calc(100vw - 2rem)); height: fit-content; border-radius: var(--sn-radius-l); }
@media (min-width: 48rem) {
	.mx-guia:not(.mx-guia--centro) { inset: auto; width: min(24rem, calc(100vw - 2rem)); border-radius: var(--sn-radius-l); }
}
.mx-guia__paso { margin: 0 0 var(--sn-s-1); font-size: var(--sn-fs-xs); color: var(--sn-ink-soft); font-family: var(--sn-font-mono); }
.mx-guia-foco { position: fixed; z-index: 999; pointer-events: none; border-radius: var(--sn-radius-l);
	box-shadow: 0 0 0 2px var(--sn-ink), 0 0 0 100vmax var(--sn-scrim); }
@media (prefers-reduced-motion: no-preference) { .mx-guia-foco { transition: top .2s, left .2s, width .2s, height .2s; } }
@media (forced-colors: active) { .mx-guia-foco { outline: 3px solid Highlight; } }
.mx-guiabtn { cursor: pointer; margin-right: var(--sn-s-2); font-family: var(--sn-font-text); background: transparent; border-color: var(--sn-hairline); padding: var(--sn-s-1) var(--sn-s-2); min-height: 24px; }
.mx-guiabtn > span[aria-hidden] { font-family: var(--sn-font-serif); font-style: italic; font-weight: 700; }
@media (max-width: 40rem) { .mx-guiabtn .mx-etiqueta { display: none; } }
@media (max-width: 48rem) { .mx-revbar .mx-guiabtn { margin: 0; min-height: 44px; min-width: 44px; justify-content: center; } }

.mx-com-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Botones que son enlaces: sin el color de «visitado» de la skin (gana a :root[data-sn-theme] a:visited) */
.mx-dialogo .mx-boton:is(:link, :visited) { color: var(--sn-btn-fg); }
.mx-dialogo .mx-boton--principal:is(:link, :visited) { color: var(--sn-btn-primary-fg); }
.mx-dialogo .mx-boton--texto:is(:link, :visited) { color: var(--sn-ink-soft); }

/* Tablas desplazables: enfocables con el teclado y con foco visible */
.mx-tabla-scroll:focus-visible, table.wikitable:focus-visible { outline: 2px solid var(--sn-focus-border); outline-offset: 2px; }

/* «Ir a la documentación» en la barra del prototipo: acción principal de salida, botón primario de la skin */
.mx-revbar .mx-docbtn { display: inline-flex; align-items: center; gap: var(--sn-s-1); text-decoration: none; background: var(--sn-btn-primary-bg); border-color: var(--sn-btn-primary-bg); }
.mx-revbar .mx-docbtn:is(:link, :visited, :hover) { color: var(--sn-btn-primary-fg); }
.mx-revbar .mx-docbtn:hover { background: var(--sn-btn-primary-bg-hover); }
.mx-revbar .mx-docbtn .mx-com-ico { stroke: currentColor; }
.mx-revbar .mx-docbtn:focus-visible { outline: 2px solid var(--sn-focus-border); outline-offset: 2px; }
@media (max-width: 40rem) { .mx-docbtn .mx-etiqueta { display: none; } }
@media (max-width: 48rem) { .mx-revbar .mx-docbtn { margin: 0; min-height: 44px; min-width: 44px; justify-content: center; } }

/* Panel de comentarios: qué se comenta en cada superficie */
.mx-com-que { margin: 0 0 var(--sn-s-2); font-size: var(--sn-fs-sm); color: var(--sn-ink-soft); }