/* =============================================================================
 * RIZOMA MAUX · Taller STEM (js/modules/stem.js) — prefijo «st-»
 * -----------------------------------------------------------------------------
 * Secciones: estudio y héroe · configuración · área de trabajo y herramientas ·
 * mapa rizomático y competencias · asistente de inserción (modal) · ejercicio
 * interactivo · modo estudiante y resumen · respaldos sin motor · celular/táctil.
 * El color del área llega en --st-c (matemáticas azul, física violeta, química
 * esmeralda, biología verde). Usa los tokens de css/tokens.css: tema claro y
 * oscuro automáticos. 1.12.0: tipos agrupados (Aprender · Evaluar), diseño de la
 * prueba (ítems, formas, mezcla, puntaje, duración), kit de unidad, galería de
 * simulaciones agrupada por área y la cuarta área (Biología).
 * ========================================================================== */
.st-estudio { --st-c: #2563eb; --st-c2: color-mix(in srgb, var(--st-c) 55%, #f59e0b); --st-suave: color-mix(in srgb, var(--st-c) 10%, transparent); --st-papel: var(--surface-solid); }
.st-oculto { display: none !important; }
@keyframes st-entra { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes st-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes st-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes st-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-giro { to { transform: rotate(360deg); } }
@keyframes st-destello { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--st-c, #2563eb) 55%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
@keyframes st-sacude { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
@keyframes st-celebra { 0% { transform: scale(1); } 40% { transform: scale(1.012); } 100% { transform: scale(1); } }
@keyframes st-trazo { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }

/* ------------------------------- Héroe ------------------------------- */
.st-hero { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 6px 22px; align-items: center; margin-bottom: 16px; overflow: hidden; animation: st-entra .45s cubic-bezier(.2, .9, .25, 1);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--st-c) 16%, transparent), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(245, 158, 11, .12), transparent 60%), var(--surface); }
.st-hero-arte { grid-row: span 2; color: var(--texto); }
.st-hero-svg { width: 100%; height: auto; display: block; }
.st-h-onda { stroke-dasharray: 420; animation: st-trazo 2.4s ease both; }
.st-h-atomo { animation: st-flotar 5s ease-in-out infinite; transform-box: fill-box; }
.st-h-hex { animation: st-flotar 6s ease-in-out -2s infinite; }
.st-h-adn { animation: st-flotar 5.5s ease-in-out -1s infinite; }
.st-hero-areas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.st-hero-areas span { --c: #2563eb; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border-radius: 999px; font-size: .74rem; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); }
.st-hero-areas svg { width: 15px; height: 15px; }
.st-hero-eti { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--st-c); background: var(--st-suave); padding: 4px 10px; border-radius: 999px; }
.st-hero-eti svg { width: 14px; height: 14px; }
.st-hero-txt h2 { font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.15; margin: 10px 0 6px; letter-spacing: -.01em; }
.st-hero-txt p { margin: 0; color: var(--texto-2); max-width: 70ch; }
.st-rapidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.st-rapidas-hero { grid-column: 2; margin-top: 12px; }
.st-rapida { --c: #2563eb; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 12px; text-align: left; padding: 12px 14px; border-radius: 16px; cursor: pointer; font: inherit; color: var(--texto);
  border: 1px solid color-mix(in srgb, var(--c) 28%, var(--borde)); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 9%, var(--surface-solid)), var(--surface-solid) 70%); transition: var(--t); animation: st-entra .4s both; }
.st-rapida:nth-child(2) { animation-delay: .04s; } .st-rapida:nth-child(3) { animation-delay: .08s; } .st-rapida:nth-child(4) { animation-delay: .12s; } .st-rapida:nth-child(5) { animation-delay: .16s; } .st-rapida:nth-child(6) { animation-delay: .2s; }
.st-rapida:hover, .st-rapida:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px color-mix(in srgb, var(--c) 22%, transparent); border-color: var(--c); outline: none; }
.st-rapida-ico { grid-row: span 2; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #f59e0b)); box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 32%, transparent); }
.st-rapida-ico svg { width: 21px; height: 21px; }
.st-rapida-txt b { display: block; font-size: .93rem; line-height: 1.25; }
.st-rapida-txt small { display: block; color: var(--texto-2); font-size: .78rem; line-height: 1.35; margin-top: 2px; }
.st-rapida-meta { grid-column: 2; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c); margin-top: 4px; }
.st-modal-rapidas .st-rapidas { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

/* ---------------------------- Configuración ---------------------------- */
.st-plan.planificador { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
.st-plan.planificador.plegada { grid-template-columns: 58px minmax(0, 1fr); }
.st-config { border-top: 4px solid var(--st-c); }
.st-config-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.st-config-cab h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.st-config-cab h3 svg { color: var(--st-c); }
.st-paso { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: .86rem; font-weight: 800; color: var(--texto); }
.st-paso > span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; color: #fff; background: var(--st-c); flex-shrink: 0; }
.st-paso svg { width: 16px; height: 16px; color: var(--st-c); }
.st-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-area { --c: #2563eb; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 10px; border-radius: 14px; cursor: pointer; font: inherit; color: var(--texto);
  border: 1.5px solid var(--borde-2); background: var(--surface-solid); transition: var(--t); min-width: 0; }
.st-area b { font-size: .86rem; }
.st-area small { font-size: .68rem; color: var(--texto-2); line-height: 1.25; }
.st-area-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); transition: var(--t); }
.st-area-ico svg { width: 18px; height: 18px; }
.st-area:hover { border-color: var(--c); transform: translateY(-1px); }
.st-area.activo { border-color: var(--c); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, var(--surface-solid)), var(--surface-solid)); box-shadow: 0 8px 22px color-mix(in srgb, var(--c) 20%, transparent); }
.st-area.activo .st-area-ico { background: var(--c); color: #fff; animation: st-pop .35s ease; }
.st-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.st-tipo { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--borde-2); background: var(--surface-solid); color: var(--texto-2); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; text-align: left; transition: var(--t); min-width: 0; }
.st-tipo svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--st-c); }
.st-tipo span { overflow: hidden; text-overflow: ellipsis; }
.st-tipo:hover { border-color: var(--st-c); color: var(--texto); }
.st-tipo.activo { background: var(--st-c); border-color: var(--st-c); color: #fff; }
.st-tipo.activo svg { color: #fff; }
.st-area-nota { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.st-area-nota svg { width: 14px; height: 14px; color: var(--st-c); flex-shrink: 0; }
/* Tipos agrupados: Aprender · Evaluar */
.st-tipos-zona { display: flex; flex-direction: column; gap: 10px; }
.st-tipos-grupo { display: flex; flex-direction: column; gap: 6px; }
.st-tipos-etq { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-2); }
.st-tipos-etq svg { width: 14px; height: 14px; color: var(--st-c); }
.st-tipos-etq::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--borde-2), transparent); }
.st-tipos-grupo[data-grupo="evaluar"] .st-tipos-etq svg { color: #d97706; }
.st-tipo-eval svg { color: #d97706; }
.st-tipo-eval.activo { background: linear-gradient(135deg, #d97706, color-mix(in srgb, #d97706 55%, var(--st-c))); border-color: #d97706; }
.st-tipos-nota { display: flex; gap: 6px; align-items: flex-start; margin: 0; line-height: 1.35; }
.st-tipos-nota svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.st-tipo-desc { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--st-suave); border: 1px solid color-mix(in srgb, var(--st-c) 22%, transparent); animation: st-entra .25s ease; }
.st-tipo-desc:empty { display: none; }
.st-tipo-desc svg { width: 18px; height: 18px; color: var(--st-c); flex-shrink: 0; margin-top: 1px; }
.st-tipo-desc p { margin: 0; font-size: .8rem; line-height: 1.4; color: var(--texto-2); }
.st-tipo-desc b { color: var(--texto); }
/* Diseño de la prueba (tipos de evaluación) */
.st-eval-zona { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 12px; border-radius: 16px; border: 1.5px solid color-mix(in srgb, #d97706 35%, var(--borde)); background: linear-gradient(160deg, color-mix(in srgb, #f59e0b 9%, var(--surface-solid)), var(--surface-solid) 65%); animation: st-entra .3s ease; }
.st-eval-cab { display: flex; align-items: center; gap: 7px; font-size: .86rem; }
.st-eval-cab svg { width: 17px; height: 17px; color: #d97706; }
.st-eval-fila { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.st-eval-fila.st-eval-col { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.st-eval-etq { font-size: .74rem; font-weight: 800; color: var(--texto-2); }
.st-eval-num { justify-self: end; min-width: 34px; padding: 3px 6px; border-radius: 8px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; background: #d97706; }
.st-eval-zona .st-rango { accent-color: #d97706; }
.st-eval-zona .st-seg button.activo { background: #d97706; }
.st-mezcla-barra { display: flex; height: 22px; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--borde); }
.st-mezcla-barra i { --c: #2563eb; display: grid; place-items: center; min-width: 18px; font-style: normal; font-size: .7rem; font-weight: 800; color: #fff; background: var(--c); transition: flex .35s cubic-bezier(.2, .9, .25, 1); }
.st-mezcla-barra i + i { border-left: 2px solid var(--surface-solid); }
.st-mezcla { display: flex; flex-direction: column; gap: 4px; }
.st-mezcla-paso { --c: #2563eb; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 4px 3px 8px; border-radius: 10px; background: var(--surface-solid); border: 1px solid var(--borde); box-shadow: inset 3px 0 0 var(--c); }
.st-mezcla-n { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: .78rem; font-weight: 700; }
.st-mezcla-n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-mezcla-n svg { width: 15px; height: 15px; color: var(--c); flex-shrink: 0; }
.st-mezcla-ctl { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.st-mezcla-ctl output { min-width: 26px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-mezcla-ctl .btn-icono { width: 30px; height: 30px; }
.st-eval-dos { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.st-eval-pts { gap: 4px; flex-wrap: wrap; align-items: center; }
.st-eval-pts .st-num { width: 74px !important; }
.st-eval-pts .st-chip { padding: 4px 8px; }
.st-eval-resumen { display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: var(--texto-2); line-height: 1.4; }
.st-eval-resumen svg { width: 15px; height: 15px; color: #d97706; flex-shrink: 0; margin-top: 2px; }
.st-eval-resumen b { color: var(--texto); }
.st-eval-resumen em { color: var(--warn); font-style: normal; font-weight: 700; }
.st-dur-nota { display: flex; align-items: center; gap: 6px; margin: 22px 0 0; }
.st-dur-nota svg { width: 14px; height: 14px; color: #d97706; flex-shrink: 0; }
/* Kit de unidad y fábrica por lotes */
.st-kit { margin-top: 14px; padding: 12px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--st-c) 45%, var(--borde-2)); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--st-c) 12%, transparent), transparent 60%), var(--surface-solid); }
.st-kit-txt { display: flex; gap: 10px; align-items: flex-start; }
.st-kit-txt b { display: block; font-size: .88rem; }
.st-kit-txt small { display: block; font-size: .76rem; color: var(--texto-2); line-height: 1.4; margin-top: 2px; }
.st-kit-txt small b { display: inline; font-size: inherit; color: var(--texto); }
.st-kit-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, var(--st-c), var(--st-c2)); box-shadow: 0 8px 18px color-mix(in srgb, var(--st-c) 30%, transparent); }
.st-kit-ico svg { width: 20px; height: 20px; }
.st-kit-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.st-kit-acc .btn { justify-content: center; }
.st-btn-kit { color: #fff; border: 0; background: linear-gradient(135deg, var(--st-c), var(--st-c2)); box-shadow: 0 8px 18px color-mix(in srgb, var(--st-c) 28%, transparent); }
.st-btn-kit:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.st-btn-kit:disabled, .st-kit-off .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.st-kit-off { border-style: dotted; }
.st-kit-off .st-kit-ico { filter: grayscale(.7); opacity: .7; }
.st-fg { margin-top: 2px; }
.st-dokzona .dok-bar { margin: 8px 0 6px; }
.st-dok { display: flex; flex-wrap: wrap; gap: 6px; }
.st-dok .rol:disabled { opacity: .38; cursor: not-allowed; }
.st-comps { display: flex; flex-wrap: wrap; gap: 6px; }
.st-comps .comp-chip { border-color: color-mix(in srgb, var(--st-c) 40%, transparent); color: var(--st-c); }
.st-comps .comp-chip.activo { background: var(--st-c); border-color: var(--st-c); color: #fff; }
.st-comp-desc { margin: 8px 0 0; color: var(--texto-2); line-height: 1.4; }
.st-ctx { display: flex; gap: 8px; align-items: center; }
.st-ctx select { flex: 1; min-width: 0; }
.st-dado { flex-shrink: 0; }
.st-dado.gira svg { animation: st-giro .5s cubic-bezier(.3, 1.3, .5, 1); }
.st-ctx-desc { margin: 6px 0 2px; line-height: 1.4; }
.st-generar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.st-generar .btn { justify-content: center; }
.st-generar .btn:nth-child(3), .st-generar .btn:nth-child(4) { grid-column: span 1; }
.st-estado-ia { display: block; margin-top: 8px; }
.st-riel .plan-riel-abrir { background: linear-gradient(135deg, var(--st-c), var(--st-c2)); }
.st-riel .plan-riel-dato { color: var(--st-c); }

/* --------------------------- Área de trabajo --------------------------- */
.st-trabajo { border-top: 4px solid var(--st-c); min-width: 0; }
.st-trabajo-cab { margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
.st-trabajo-cab h3 svg { color: var(--st-c); }
.st-trabajo-acc { gap: 8px; flex-wrap: wrap; }
.st-titulo { margin-bottom: 10px; }
.st-herr { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin: 0 0 12px; padding: 8px; border-radius: 16px; background: linear-gradient(180deg, var(--st-suave), transparent); border: 1px solid var(--borde); }
.st-herr-b { --c: #2563eb; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 66px; padding: 8px 4px; border-radius: 12px; border: 1px solid transparent; background: var(--surface-solid);
  color: var(--texto); font: inherit; font-size: .74rem; font-weight: 700; line-height: 1.15; text-align: center; cursor: pointer; transition: var(--t); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.st-herr-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); transition: var(--t); }
.st-herr-ico svg { width: 18px; height: 18px; }
.st-herr-b:hover, .st-herr-b:focus-visible { border-color: color-mix(in srgb, var(--c) 50%, transparent); transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 18%, transparent); outline: none; }
.st-herr-b:hover .st-herr-ico, .st-herr-b:focus-visible .st-herr-ico { background: var(--c); color: #fff; transform: scale(1.06); }
.st-herr-ia .st-herr-ico { background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; }
.st-herr-dado .st-herr-ico { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; }
.st-herr-dado:active .st-herr-ico svg { animation: st-giro .45s ease; }
.st-barra-ed { flex-wrap: wrap; gap: 8px; }
.st-stats { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.st-stats svg { width: 14px; height: 14px; color: var(--st-c); }
.st-b-modo { animation: st-entra .5s both; }
.st-pie { margin-top: 14px; gap: 10px; flex-wrap: wrap; }
.st-pie > .fila { flex-wrap: wrap; }
.st-previa .stem-bloque, .st-previa .st-respaldo { scroll-margin-top: 16px; }
.st-destello { animation: st-destello 1.1s ease-out 2; border-radius: 12px; }
h2.st-destello { outline: 2px solid color-mix(in srgb, var(--st-c, #2563eb) 45%, transparent); outline-offset: 4px; }

/* ------------------------ Mapa y competencias ------------------------ */
.st-inferior { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.st-panel { position: relative; min-width: 0; border: 1px solid var(--borde); border-radius: 16px; padding: 12px 14px; background: var(--surface-solid); }
.st-panel-cab { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: .9rem; margin-bottom: 8px; }
.st-panel-cab svg { width: 17px; height: 17px; color: var(--st-c); }
.st-mapa { position: relative; border-radius: 12px; background: radial-gradient(circle at 50% 45%, var(--st-suave), transparent 70%), repeating-radial-gradient(circle at 50% 50%, transparent 0 22px, color-mix(in srgb, var(--texto) 3%, transparent) 22px 23px); }
.st-mapa-svg { display: block; width: 100%; height: auto; overflow: visible; }
.st-ln { fill: none; stroke: var(--texto-3); stroke-width: 1.6; opacity: .55; transition: opacity .2s, stroke-width .2s, stroke .2s; }
.st-ln-camino { stroke: var(--st-c); stroke-width: 2.2; opacity: .45; }
.st-ln-hijo { stroke-width: 1.2; stroke-dasharray: 2 4; opacity: .6; }
.st-ln-fuga { stroke: #f59e0b; stroke-width: 1.8; stroke-dasharray: 7 6; opacity: .75; }
.st-ln.foco { opacity: 1; stroke-width: 3; }
.st-nodo { cursor: pointer; outline: none; animation: st-aparece .5s both; /* solo opacidad: un transform CSS anularía el translate() del SVG */ animation-delay: calc(var(--i) * 25ms); }
.st-disco { fill: var(--st-c); stroke: var(--surface-solid); stroke-width: 3; transition: r .2s; filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--st-c) 35%, transparent)); }
.st-anillo { fill: none; stroke: #f59e0b; stroke-width: 2.5; stroke-dasharray: 4 3; transform-box: fill-box; transform-origin: center; animation: st-giro 14s linear infinite; }
.st-num { fill: #fff; font: 800 13px var(--font); text-anchor: middle; pointer-events: none; }
.st-etq { fill: var(--texto); font: 700 11px var(--font); text-anchor: middle; paint-order: stroke; stroke: var(--surface-solid); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.st-bl { fill: var(--surface-solid); stroke: var(--c); stroke-width: 2.2; transition: var(--t); }
.st-glifo { fill: var(--c); font: 800 12px var(--font); text-anchor: middle; pointer-events: none; }
.st-dokn { fill: var(--texto-2); font: 800 9px var(--font); pointer-events: none; }
.st-nodo-bl.docente .st-bl { stroke-dasharray: 3 2; }
.st-nodo-bl.alerta .st-bl { stroke: var(--error); fill: color-mix(in srgb, var(--error) 12%, var(--surface-solid)); }
.st-nodo:hover .st-disco, .st-nodo.foco .st-disco { r: 20; }
.st-nodo:hover .st-bl, .st-nodo.foco .st-bl { fill: var(--c); }
.st-nodo:hover .st-glifo, .st-nodo.foco .st-glifo { fill: #fff; }
.st-nodo:focus-visible .st-disco, .st-nodo:focus-visible .st-bl { stroke: var(--oro); stroke-width: 4; }
.st-mapa-info { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; color: var(--texto-2); }
.st-mapa-info span { display: inline-flex; align-items: center; gap: 6px; }
.st-ley { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.st-ley-sec { background: var(--st-c); }
.st-ley-bl { border-radius: 4px; border: 2px solid #16a34a; }
.st-ley-ent { border: 2px dashed #f59e0b; }
.st-ley-fuga { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed #f59e0b; }
.st-alerta { color: var(--error); font-weight: 700; }
.st-alerta svg { width: 14px; height: 14px; }
.st-mapa-vacio { display: flex; gap: 12px; align-items: center; padding: 26px 18px; color: var(--texto-2); font-size: .88rem; }
.st-mapa-vacio svg { width: 34px; height: 34px; color: var(--st-c); flex-shrink: 0; }
.st-mapa-vacio p { margin: 0; }
.st-mapa-pop { position: absolute; z-index: 5; min-width: 200px; max-width: min(320px, 92%); padding: 10px 12px; border-radius: 14px; background: var(--surface-solid); border: 1px solid var(--borde-2); box-shadow: var(--sombra-2); animation: st-entra .2s ease; }
.st-mapa-pop > b { display: block; font-size: .82rem; margin-bottom: 8px; line-height: 1.3; }
.st-mapa-pop-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.st-cde-flujo { display: flex; flex-direction: column; gap: 10px; }
.st-cde-fila { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1.2fr) 20px minmax(0, 1.2fr); gap: 6px; align-items: stretch; animation: st-entra .4s both; }
.st-cde-col { border-radius: 12px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--borde); font-size: .8rem; min-width: 0; }
.st-cde-col:first-child { background: color-mix(in srgb, var(--st-c) 10%, var(--surface-solid)); border-color: color-mix(in srgb, var(--st-c) 30%, transparent); }
.st-cde-col ul { margin: 4px 0 0; padding-left: 16px; }
.st-cde-col li { margin: 2px 0; line-height: 1.35; }
.st-cde-col li p { margin: 0; }
.st-cde-tit { display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.st-cde-tit svg { width: 14px; height: 14px; color: var(--st-c); }
.st-cde-flecha { display: grid; place-items: center; color: var(--st-c); }
.st-cde-flecha svg { width: 16px; height: 16px; }
.st-cde-acc { margin-top: 8px; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.st-cde-ej { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--borde-2); }
.st-cde-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.st-dokbarras { display: flex; gap: 6px; align-items: flex-end; height: 74px; margin-top: 6px; }
.st-dokb { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 38px; height: 100%; font-size: .66rem; color: var(--texto-2); }
.st-dokb i { display: block; width: 22px; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--c); transition: height .5s cubic-bezier(.2, .9, .25, 1); }
.st-dokb small { margin-top: 3px; font-weight: 700; } .st-dokb b { color: var(--texto); }
.st-dokb.fuera { opacity: .45; } .st-dokb.fuera i { background: repeating-linear-gradient(45deg, var(--error), var(--error) 3px, transparent 3px, transparent 6px); }

/* ---------------------- Respaldos sin motor STEM ---------------------- */
.st-respaldo { margin: 14px 0; padding: 10px 12px 12px; border-radius: 14px; border: 1px solid var(--borde-2); background: var(--surface-2); }
.st-respaldo figcaption { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 8px; }
.st-respaldo figcaption svg { width: 15px; height: 15px; color: var(--st-c, #2563eb); }
.st-svg-graf { width: 100%; max-width: 640px; height: auto; display: block; margin: 0 auto; color: var(--texto); --st-papel: var(--surface-solid); }
.st-crudo { margin: 0; font-size: .8rem; white-space: pre-wrap; }
.st-ej-mini > p:first-child { margin-top: 0; }

/* ---------------------- Asistente de inserción (modal) ---------------------- */
.modal.st-modal { width: 100%; max-height: 94vh; display: flex; flex-direction: column; }
.modal.st-modal .modal-cuerpo { padding: 0; overflow: hidden; flex: 1; min-height: 0; display: flex; }
.st-asis { --st-h: #2563eb; display: grid; grid-template-columns: 178px minmax(0, 1fr); width: 100%; min-height: min(640px, 80vh); max-height: calc(94vh - 64px); }
.st-asis-nav { display: flex; flex-direction: column; gap: 3px; padding: 12px 8px; border-right: 1px solid var(--borde); background: var(--surface-2); overflow-y: auto; }
.st-asis-tab { --c: #2563eb; display: flex; align-items: center; gap: 9px; padding: 7px 8px; border: 0; border-radius: 11px; background: transparent; color: var(--texto-2); font: inherit; font-size: .84rem; font-weight: 700; text-align: left; cursor: pointer; transition: var(--t); }
.st-asis-tico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); transition: var(--t); }
.st-asis-tico svg { width: 17px; height: 17px; }
.st-asis-tab:hover { background: var(--surface-solid); color: var(--texto); }
.st-asis-tab[aria-selected="true"] { background: var(--surface-solid); color: var(--texto); box-shadow: inset 3px 0 0 var(--c), var(--sombra); }
.st-asis-tab[aria-selected="true"] .st-asis-tico { background: var(--c); color: #fff; }
.st-asis-tab:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.st-asis-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.st-asis-cab { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--borde); background: linear-gradient(90deg, color-mix(in srgb, var(--st-h) 10%, transparent), transparent 70%); }
.st-asis-cab h3 { margin: 0; font-size: 1.05rem; }
.st-asis-cab p { margin: 2px 0 0; font-size: .82rem; color: var(--texto-2); }
.st-asis-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--st-h), color-mix(in srgb, var(--st-h) 50%, #f59e0b)); box-shadow: 0 8px 18px color-mix(in srgb, var(--st-h) 30%, transparent); animation: st-pop .3s ease; flex-shrink: 0; }
.st-asis-ico svg { width: 21px; height: 21px; }
.st-asis-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.st-asis-ancha .st-asis-cuerpo { grid-template-columns: minmax(0, 1fr); }
.st-asis-form { padding: 14px 18px 18px; overflow-y: auto; min-width: 0; animation: st-entra .25s ease; }
.st-asis-lado { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--borde); background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.st-asis-etq { display: flex; align-items: center; gap: 6px; padding: 10px 16px 0; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.st-asis-etq svg { width: 14px; height: 14px; color: var(--st-h); }
.st-asis-previa { flex: 1; overflow: auto; padding: 10px 16px 16px; min-height: 0; }
.st-asis-previa.st-previa-prop { box-shadow: inset 3px 0 0 #9333ea; }
.st-asis-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--borde); background: var(--surface-solid); }
.st-asis-estado { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); min-height: 1.2em; }
.st-asis-estado svg { width: 15px; height: 15px; }
.st-asis-estado[data-tipo="ok"] { color: var(--ok); } .st-asis-estado[data-tipo="error"] { color: var(--error); }
.st-previa-formula { padding: 16px; border-radius: 12px; background: var(--surface-solid); border: 1px dashed var(--borde-2); text-align: center; font-size: 1.15rem; overflow-x: auto; }
.st-previa-nota { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; } .st-previa-nota svg { width: 14px; height: 14px; }

/* Piezas de formulario */
.st-pila { display: flex; flex-direction: column; gap: 10px; }
.st-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-campo > span { font-size: .74rem; font-weight: 700; color: var(--texto-2); }
.st-rejilla { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.st-rejilla > .st-campo { flex: 0 1 auto; }
.st-rejilla > .st-crece, .st-crece { flex: 1 1 180px; }
.st-checks { display: flex; flex-wrap: wrap; gap: 2px; }
.st-num { width: 86px !important; min-width: 0; }
.st-expr, .st-codigo, .st-latex { font-family: var(--font-mono) !important; font-size: .86rem !important; }
.st-sub { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; color: var(--texto); margin-top: 4px; }
.st-sub svg { width: 15px; height: 15px; color: var(--st-h, var(--st-c)); }
.st-seg { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--borde-2); border-radius: 12px; overflow: hidden; background: var(--surface-solid); max-width: 100%; }
.st-seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--texto-2); font: inherit; font-size: .8rem; font-weight: 700; padding: 7px 11px; cursor: pointer; transition: var(--t); }
.st-seg button + button { border-left: 1.5px solid var(--borde-2); }
.st-seg button svg { width: 15px; height: 15px; }
.st-seg button:hover { background: var(--surface-2); color: var(--texto); }
.st-seg button.activo { background: var(--st-h, var(--st-c, var(--marca))); color: #fff; }
.st-seg button:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }
.st-ejemplos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px dashed var(--borde-2); background: var(--surface-solid); color: var(--texto-2); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; transition: var(--t); }
.st-chip svg { width: 13px; height: 13px; }
.st-chip:hover { border-style: solid; border-color: var(--st-h, var(--st-c)); color: var(--texto); }
.st-chip-ej { border-style: solid; background: color-mix(in srgb, var(--st-h, var(--st-c)) 7%, var(--surface-solid)); }
.st-chip-mono { font-family: var(--font-mono); font-weight: 600; }
.st-agregar { display: flex; flex-wrap: wrap; gap: 6px; }
.st-elems { display: flex; flex-direction: column; gap: 6px; }
.st-elem { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid var(--borde); background: var(--surface-solid); animation: st-entra .25s ease; }
.st-elem-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--st-h); background: color-mix(in srgb, var(--st-h) 12%, transparent); }
.st-elem-ico svg { width: 16px; height: 16px; }
.st-elem-campos { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.st-elem-campos .st-campo { flex: 0 1 auto; }
.st-elem-campos .st-campo:not(.st-crece) .input:not(.st-num) { width: 120px; }
.st-elem-campos select { width: auto !important; }
.st-manual .st-elems, .st-manual .st-agregar { opacity: .45; pointer-events: none; }
.st-det { border: 1px solid var(--borde); border-radius: 12px; padding: 8px 12px; background: var(--surface-2); }
.st-det > summary { cursor: pointer; font-size: .82rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.st-det > summary svg { width: 15px; height: 15px; color: var(--st-h); }
.st-det[open] > summary { margin-bottom: 8px; }
.st-gen { background: linear-gradient(135deg, rgba(245, 158, 11, .1), transparent 70%); border-color: rgba(245, 158, 11, .35); }
.st-mf-zona { min-height: 64px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.st-mf { display: block; width: 100%; min-height: 58px; padding: 10px 12px; font-size: 1.45rem; border-radius: 14px; border: 1.5px solid var(--borde-2); background: var(--surface-solid); color: var(--texto); --caret-color: var(--st-h); --selection-background-color: color-mix(in srgb, var(--st-h) 22%, transparent); --primary-color: var(--st-h); }
.st-mf:focus-within { border-color: var(--st-h); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-h) 18%, transparent); }
.st-mf-acc { align-items: center; gap: 10px; }
.st-paleta { border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; background: var(--surface-solid); }
.st-pal-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 4px; background: var(--surface-2); scrollbar-width: thin; }
.st-pal-tabs button { flex-shrink: 0; border: 0; background: transparent; color: var(--texto-2); font: inherit; font-size: .74rem; font-weight: 700; padding: 6px 10px; border-radius: 9px; cursor: pointer; }
.st-pal-tabs button[aria-selected="true"] { background: var(--surface-solid); color: var(--texto); box-shadow: var(--sombra); }
.st-pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; padding: 6px; max-height: 176px; overflow-y: auto; }
.st-pal-b { min-height: 40px; padding: 4px; border-radius: 9px; border: 1px solid var(--borde); background: var(--surface-solid); color: var(--texto); cursor: pointer; font-size: .82rem; overflow: hidden; transition: var(--t); }
.st-pal-b.ancho { grid-column: span 2; }
.st-pal-b:hover, .st-pal-b:focus-visible { border-color: var(--st-h); background: color-mix(in srgb, var(--st-h) 8%, var(--surface-solid)); transform: translateY(-1px); outline: none; }
.st-pal-b mjx-container { pointer-events: none; margin: 0 !important; }
.st-res { min-height: 10px; }
.st-res-f { padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--st-h) 7%, var(--surface-solid)); border: 1px solid color-mix(in srgb, var(--st-h) 30%, transparent); overflow-x: auto; animation: st-entra .3s ease; }
.st-opcion { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
.st-opcion-letra { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--borde-2); cursor: pointer; }
.st-opcion-letra:has(input:checked) { background: var(--ok); border-color: var(--ok); color: #fff; }
.st-opcion-letra input { accent-color: var(--ok); }
.st-pista { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.st-pista-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .74rem; font-weight: 800; color: #92400e; background: rgba(245, 158, 11, .18); }
.st-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px; }
.st-sim { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 8px; border-radius: 14px; border: 1.5px solid var(--borde); background: var(--surface-solid); color: var(--texto); font: inherit; cursor: pointer; transition: var(--t); min-width: 0; }
.st-sim b { font-size: .8rem; line-height: 1.2; }
.st-sim small { font-size: .7rem; color: var(--texto-2); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-sim-mini { display: grid; place-items: center; height: 70px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--st-h) 12%, transparent), transparent); }
.st-sim[data-area="quimica"] .st-sim-mini { background: linear-gradient(135deg, rgba(5, 150, 105, .14), transparent); }
.st-sim[data-area="biologia"] .st-sim-mini { background: linear-gradient(135deg, rgba(22, 163, 74, .16), rgba(132, 204, 22, .06)); }
.st-sim[data-area="biologia"] .st-sim-ico svg { color: #16a34a; }
.st-sim-nuevo { position: relative; }
.st-sim-nuevo::before { content: 'Nuevo'; position: absolute; top: 6px; right: 6px; z-index: 1; padding: 1px 7px; border-radius: 999px; font-size: .6rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: #16a34a; }
.st-galeria-grupo { --c: #2563eb; grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 2px 2px; font-size: .78rem; border-bottom: 1px dashed color-mix(in srgb, var(--c) 35%, var(--borde)); }
.st-galeria-grupo:first-child { margin-top: 0; }
.st-galeria-grupo svg { width: 16px; height: 16px; color: var(--c); }
.st-galeria-grupo small { color: var(--texto-2); font-weight: 600; }
.st-sim-mini svg { max-width: 100%; max-height: 100%; }
.st-sim-ico svg { width: 34px; height: 34px; color: var(--st-h); }
.st-sim:hover { border-color: var(--st-h); transform: translateY(-2px); }
.st-sim.activo { border-color: var(--st-h); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-h) 22%, transparent); }
.st-params { display: flex; flex-direction: column; gap: 8px; }
.st-param { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) 86px; gap: 10px; align-items: center; }
.st-param-n { font-size: .82rem; font-weight: 700; } .st-param-n small { color: var(--texto-2); font-weight: 600; }
.st-rango { width: 100%; accent-color: var(--st-h); }
.st-param > .select, .st-param > .input.st-crece { grid-column: 2 / -1; width: 100%; min-height: 40px; }
.st-param-si { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 40px; }
.st-param-si input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--st-h); flex: none; }
.st-quim .st-campo:nth-child(2) select { width: auto; }
.st-balance { font-size: .84rem; }
.st-balance-cab { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px 12px 0 0; font-size: .86rem; }
.st-balance-cab svg { width: 18px; height: 18px; }
.st-balance-cab.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.st-balance-cab.no { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); }
.st-balance table { width: 100%; border-collapse: collapse; }
.st-balance th, .st-balance td { padding: 4px 10px; border-bottom: 1px solid var(--borde); text-align: center; }
.st-balance tr.no td { color: var(--error); font-weight: 700; }
.st-frag { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.st-frag-cab { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px 12px; font-size: .8rem; background: var(--surface-2); }
.st-frag-cab svg { width: 15px; height: 15px; color: #9333ea; }
.st-frag-txt { margin: 0; padding: 10px 12px; max-height: 150px; overflow: auto; font-size: .76rem; white-space: pre-wrap; background: var(--surface-solid); font-family: var(--font-mono); }
.st-ia-acciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.st-ia-acc { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; border: 1.5px solid var(--borde-2); background: var(--surface-solid); color: var(--texto); font: inherit; font-size: .8rem; font-weight: 700; text-align: left; cursor: pointer; transition: var(--t); }
.st-ia-acc svg { width: 17px; height: 17px; color: #9333ea; flex-shrink: 0; }
.st-ia-acc:hover { border-color: #9333ea; transform: translateY(-1px); }
.st-ia-acc.activo { background: linear-gradient(135deg, #7c3aed, #db2777); border-color: transparent; color: #fff; }
.st-ia-acc.activo svg { color: #fff; }
.st-prop { border: 1.5px solid color-mix(in srgb, #9333ea 40%, transparent); border-radius: 14px; padding: 10px 12px; background: linear-gradient(135deg, rgba(147, 51, 234, .07), transparent 70%); animation: st-entra .3s ease; }
.st-prop-cab { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .86rem; margin-bottom: 8px; }
.st-prop-cab svg { width: 16px; height: 16px; color: #9333ea; }
.st-prop-acc { flex-wrap: wrap; gap: 6px; }
.st-prop-md { margin-top: 8px; max-height: 220px; }
.st-lista { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; }
.st-item { width: 100%; } .st-item svg { color: var(--c, #7c3aed); }

/* MathLive: el teclado virtual va encima de las ventanas de la aplicación */
:root { --keyboard-zindex: 3000; }
.ML__keyboard { z-index: 3000 !important; }

/* --------------------------- Ejercicio interactivo --------------------------- */
.st-ej { position: relative; margin: 16px 0; padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--borde-2); background: var(--surface-solid); box-shadow: var(--sombra); transition: border-color .3s, box-shadow .3s; }
.st-ej-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.st-ej-n { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .86rem; color: var(--st-c, #16a34a); }
.st-ej-n svg { width: 17px; height: 17px; }
.st-ej-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.st-ej-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--texto-2); }
.st-ej-chip svg { width: 12px; height: 12px; }
.st-ej-chip.dok { background: color-mix(in srgb, var(--st-c, #2563eb) 14%, transparent); color: var(--st-c, #2563eb); }
.st-ej-enun { font-size: 1em; }
.st-ej-enun > p:first-child { margin-top: 0; }
.st-ej-resp { margin: 10px 0; }
.st-ej-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.st-ej-input { flex: 1 1 220px; max-width: 340px; font-size: 1.05em !important; }
.st-ej-unidad { font-weight: 700; color: var(--texto-2); }
.st-ej .st-mf { max-width: 420px; font-size: 1.3em; }
.st-ej-ops { display: grid; gap: 6px; }
.st-ej-op { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1.5px solid var(--borde-2); background: var(--surface-solid); color: var(--texto); font: inherit; font-size: 1em; text-align: left; cursor: pointer; transition: var(--t); }
.st-ej-op > b { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: .8em; background: var(--surface-2); transition: var(--t); }
.st-ej-op:hover { border-color: var(--st-c, var(--marca-2)); }
.st-ej-op.activo { border-color: var(--st-c, var(--marca-2)); background: color-mix(in srgb, var(--st-c, #2563eb) 8%, var(--surface-solid)); }
.st-ej-op.activo > b { background: var(--st-c, var(--marca-2)); color: #fff; }
.st-ej-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.st-ej-retro { min-height: 4px; margin-top: 8px; }
.st-ej-msg { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; animation: st-entra .25s ease; }
.st-ej-msg svg { width: 18px; height: 18px; }
.st-ej-msg.ok { color: var(--ok); } .st-ej-msg.no { color: var(--warn); }
.st-ej-pistas { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.st-ej-pista { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 12px; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .3); animation: st-entra .3s ease; font-size: .95em; }
.st-ej-pista svg { width: 17px; height: 17px; color: #d97706; flex-shrink: 0; margin-top: 2px; }
.st-ej-sol { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); animation: st-entra .3s ease; }
.st-ej-sol > b { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
.st-ej-sol > b svg { width: 16px; height: 16px; }
.st-ej.bien { border-color: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 14%, transparent), var(--sombra); }
.st-ej.celebra { animation: st-celebra .5s ease; }
.st-ej.bien::after { content: '✓'; position: absolute; top: -12px; right: -10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-weight: 900; box-shadow: 0 6px 14px color-mix(in srgb, var(--ok) 40%, transparent); animation: st-pop .45s ease; }
.st-ej.mal { animation: st-sacude .45s ease; border-color: var(--warn); }

/* ------------------------- Modo estudiante interactivo ------------------------- */
html.st-modo-abierto, html.st-modo-abierto body { overflow: hidden; }
.st-modo { --st-escala: 1; --st-c: #2563eb; position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: radial-gradient(100% 80% at 0% 0%, var(--aurora-1), transparent 60%), radial-gradient(90% 80% at 100% 100%, var(--aurora-2), transparent 60%), var(--bg); animation: aparecer .25s ease; }
.st-modo.saliendo { animation: desaparecer .22s ease forwards; }
.st-modo-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 18px; padding-top: calc(10px + env(safe-area-inset-top)); background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 1px solid var(--borde); box-shadow: var(--sombra); }
.st-modo-tit { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 260px; }
.st-modo-tit b { display: block; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-modo-tit small { display: block; font-size: .72rem; color: var(--texto-2); }
.st-modo-tit > div { min-width: 0; }
.st-modo-logo { --st-logo: #2563eb; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--st-logo), color-mix(in srgb, var(--st-logo) 50%, #7c3aed)); flex-shrink: 0; }
.st-modo-logo svg { width: 20px; height: 20px; animation: st-giro 12s linear infinite; }
.st-modo-avance { display: flex; flex-direction: column; gap: 4px; min-width: 170px; flex: 0 1 220px; }
.st-modo-cuenta { font-size: .76rem; font-weight: 700; color: var(--texto-2); }
.st-modo-prog { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--borde); }
.st-modo-prog > span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #16a34a, #22d3ee); transition: width .6s cubic-bezier(.2, .9, .25, 1); }
.st-modo-acc { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.st-modo-b.activo { background: var(--marca); color: #fff; }
.st-modo-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 22px 18px 60px; }
.st-modo-doc { max-width: 900px; margin: 0 auto; font-size: calc(1.04rem * var(--st-escala)); line-height: 1.6; padding: 26px 30px; border-radius: 24px; background: var(--surface-solid); box-shadow: var(--sombra-2); animation: st-entra .4s ease; }
.st-modo-doc h1 { font-family: var(--font-display); }
.st-modo-fin { display: flex; justify-content: center; margin: 24px 0 6px; }
.st-modo.st-proyector { --bg: #0b1020; color: #f1f5f9; }
.st-modo.st-proyector .st-modo-doc { --surface-solid: #111832; --surface-2: #1a2342; --texto: #f8fafc; --texto-2: #cbd5e1; --borde: rgba(148, 163, 184, .25); --borde-2: rgba(148, 163, 184, .4); background: #111832; color: #f8fafc; font-size: calc(1.3rem * var(--st-escala)); max-width: 1180px; }
.st-modo.st-proyector .st-modo-barra { background: #0f172a; color: #f8fafc; --texto: #f8fafc; --texto-2: #cbd5e1; }
.st-resumen { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 18px; background: rgba(2, 6, 23, .55); backdrop-filter: blur(4px); animation: aparecer .2s ease; }
.st-resumen-tarjeta { position: relative; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; padding: 24px 24px 18px; border-radius: 26px; background: var(--surface-solid); box-shadow: var(--sombra-2); text-align: center; animation: st-pop .45s cubic-bezier(.2, .9, .25, 1); color: var(--texto); }
.st-resumen-x { position: absolute; top: 10px; right: 10px; }
.st-anillo-res { position: relative; width: 150px; height: 150px; margin: 0 auto 8px; }
.st-anillo-res svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.st-anillo-res .fondo { fill: none; stroke: var(--surface-2); stroke-width: 12; }
.st-anillo-res .valor { fill: none; stroke: #16a34a; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.2, .9, .25, 1); animation: st-anillo 1.2s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes st-anillo { from { stroke-dashoffset: 327; } }
.st-anillo-res > div { position: absolute; inset: 0; display: grid; place-content: center; }
.st-anillo-res b { font-size: 2.2rem; font-family: var(--font-display); line-height: 1; }
.st-anillo-res small { color: var(--texto-2); font-size: .8rem; }
.st-resumen-tarjeta h3 { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 14px; font-size: 1.05rem; }
.st-resumen-tarjeta h3 svg { width: 22px; height: 22px; color: #f59e0b; }
.st-resumen-tarjeta h4 { margin: 14px 0 6px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); text-align: left; }
.st-res-num { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.st-res-num > div { padding: 8px 4px; border-radius: 12px; background: var(--surface-2); }
.st-res-num b { display: block; font-size: 1.3rem; }
.st-res-num small { font-size: .7rem; color: var(--texto-2); }
.st-res-fila { display: grid; grid-template-columns: minmax(0, 1fr) 120px 42px; gap: 8px; align-items: center; font-size: .82rem; text-align: left; margin: 4px 0; }
.st-res-barra { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.st-res-barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2563eb, #16a34a); }
.st-resumen-acc { justify-content: center; margin-top: 14px; }
.st-resumen-tarjeta .mini { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
.st-resumen-tarjeta .mini svg { width: 14px; height: 14px; }

/* ------------------------------ Tableta ------------------------------ */
@media (max-width: 1100px) {
  .st-inferior { grid-template-columns: minmax(0, 1fr); }
  .st-asis { grid-template-columns: 64px minmax(0, 1fr); }
  .st-asis-tab > span:last-child { display: none; }
  .st-asis-tab { justify-content: center; padding: 6px; }
  .st-asis-cuerpo { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .st-asis-form { overflow: visible; }
  .st-asis-lado { border-left: 0; border-top: 1px solid var(--borde); min-height: 260px; }
  .st-asis-previa { overflow: visible; }
}
@media (max-width: 980px) {
  .st-hero { grid-template-columns: 150px minmax(0, 1fr); }
  .st-plan.planificador { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------ Celular ------------------------------ */
@media (max-width: 760px) {
  .st-hero { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .st-hero-arte { grid-row: auto; max-width: 220px; margin: 0 auto -6px; }
  .st-rapidas-hero { grid-column: auto; }
  .st-rapidas { grid-template-columns: minmax(0, 1fr); }
  .st-plan.planificador, .st-plan.planificador.plegada { grid-template-columns: minmax(0, 1fr); }
  .st-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .st-area { flex-direction: row; align-items: center; gap: 8px; padding: 8px; }
  .st-area b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .st-area small { display: none; }
  .st-area-ico { flex-shrink: 0; }
  .st-tipos { grid-template-columns: minmax(0, 1fr); }
  .st-generar { grid-template-columns: minmax(0, 1fr); }
  .st-eval-zona { padding: 10px; }
  .st-eval-fila { grid-template-columns: 70px minmax(0, 1fr) 40px; }
  .st-eval-fila.st-eval-col { grid-template-columns: minmax(0, 1fr); }
  .st-eval-dos { grid-template-columns: minmax(0, 1fr); }
  .st-mezcla-ctl .btn-icono { width: 36px; height: 36px; }
  .st-kit-acc { grid-template-columns: minmax(0, 1fr); }
  .st-trabajo-acc { width: 100%; }
  .st-trabajo-acc .btn { flex: 1 1 auto; justify-content: center; }
  .st-hero-areas span { font-size: .7rem; }
  .st-herr { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px; gap: 5px; }
  .st-herr-b { min-height: 62px; font-size: .68rem; padding: 6px 2px; }
  .st-b-modo { justify-content: center; }
  .st-cde-fila { grid-template-columns: minmax(0, 1fr); }
  .st-cde-flecha { transform: rotate(90deg); height: 16px; }
  .st-cde-ej { grid-template-columns: minmax(0, 1fr); }
  .st-pie > .fila .btn { flex: 1 1 auto; justify-content: center; }
  .st-mapa-pop { left: 8px !important; right: 8px; max-width: none; }
  /* Asistente: pantalla completa desde abajo, herramientas en una fila deslizable */
  .modal.st-modal { max-height: 96vh; }
  .st-asis { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); max-height: calc(96vh - 58px); min-height: 0; }
  .st-asis-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--borde); padding: 8px; scrollbar-width: none; }
  .st-asis-nav::-webkit-scrollbar { display: none; }
  .st-asis-tab { flex-direction: column; flex-shrink: 0; gap: 3px; min-width: 66px; padding: 6px 4px; font-size: .66rem; }
  .st-asis-tab > span:last-child { display: block; }
  .st-asis-tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--c), var(--sombra); }
  .st-asis-cab { padding: 10px 14px; } .st-asis-cab p { display: none; }
  .st-asis-form { padding: 12px 14px 16px; }
  .st-asis-pie { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .st-asis-pie .fila { width: 100%; } .st-asis-pie .btn { flex: 1 1 auto; justify-content: center; }
  .st-param { grid-template-columns: minmax(0, 1fr) 80px; }
  .st-param .st-rango { grid-column: 1 / -1; grid-row: 2; }
  .st-param > .select, .st-param > .input.st-crece { grid-column: 1 / -1; }
  .st-elem { grid-template-columns: minmax(0, 1fr) auto; }
  .st-elem-ico { display: none; }
  .st-elem-campos .st-campo:not(.st-crece) .input:not(.st-num) { width: 100%; }
  .st-elem-campos .st-campo { flex: 1 1 74px; }
  .st-num { width: 100% !important; }
  .st-rejilla > .st-campo { flex: 1 1 120px; }
  .st-ia-acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-seg { display: flex; width: 100%; }
  .st-seg button { flex: 1 1 auto; justify-content: center; }
  /* Modo estudiante */
  .st-modo-barra { gap: 8px; padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .st-modo-tit { flex-basis: 100%; } .st-modo-tit small { display: none; }
  .st-modo-avance { flex: 1 1 140px; min-width: 0; }
  .st-modo-acc .btn span { display: none; }
  .st-modo-pc { display: none; }
  .st-modo-scroll { padding: 12px 8px 50px; }
  .st-modo-doc { padding: 16px 14px; border-radius: 18px; }
  .st-ej { padding: 12px; }
  .st-ej-input { max-width: none; }
  .st-res-num { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-res-fila { grid-template-columns: minmax(0, 1fr) 80px 38px; }
}

/* --------------------------- Pantallas táctiles --------------------------- */
@media (hover: none) and (pointer: coarse) {
  .st-herr-b, .st-tipo, .st-area, .st-chip, .st-ia-acc, .st-seg button, .st-pal-b, .st-asis-tab, .st-ej-op, .st-sim { min-height: 44px; }
  .st-mezcla-ctl .btn-icono { width: 40px; height: 40px; }
  .st-chip { padding: 8px 12px; }
  .st-herr-b:hover, .st-rapida:hover, .st-area:hover, .st-sim:hover, .st-ia-acc:hover, .st-pal-b:hover { transform: none; }
  .st-mf { font-size: 1.6rem; }
  .st-rango { height: 32px; }
  .tactil .st-herr-b:active, .tactil .st-rapida:active, .tactil .st-ej-op:active, .tactil .st-sim:active { filter: brightness(.94); }
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .st-asis input, .st-asis textarea, .st-asis select, .st-ej-input, .st-estudio input, .st-estudio textarea, .st-estudio select { font-size: 16px !important; }
}

/* ------------------------------ Movimiento reducido ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .st-estudio *, .st-asis *, .st-modo, .st-modo *, .st-hero-svg * { animation: none !important; transition: none !important; }
  .st-hero-svg animateMotion { display: none; }
}

/* ------------------------------ Impresión ------------------------------ */
@media print {
  .st-herr, .st-config, .st-riel, .st-inferior, .st-pie, .st-hero, .st-b-modo, .st-trabajo-acc { display: none !important; }
}