/* NeuroLab — mesa.css
   "Mesa de trabajo": vista ajustada al alto de la pantalla + panel fijo a la derecha.
   Lo usan la identificación (labeling) y la lámina con tareas (_partials/mesa.php). */

.nl-mesa-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
    max-width: 1500px; padding-top: .8rem; padding-bottom: .6rem;
}
.nl-mesa-head h1 { margin: 0; font-size: clamp(1.05rem, 2vw, 1.35rem); flex: 1 1 auto; }
.nl-mesa-head .nl-act-back { font-size: .85rem; }
.nl-mesa-head .nl-lab__niveles { padding: 0; }

.nl-mesa {
    --alto: calc(100vh - 84px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1rem;
    align-items: start;
    max-width: 1500px;
    padding-top: .6rem;
    padding-bottom: 1rem;
}
.nl-mesa--lamina { grid-template-columns: minmax(0, 1fr) 400px; }
.nl-mesa__vista {
    position: sticky; top: .5rem;
    display: flex; flex-direction: column; align-items: center;
    min-width: 0;
}
.nl-mesa__panel {
    position: sticky; top: .5rem;
    max-height: var(--alto);
    overflow-y: auto;
    display: flex; flex-direction: column; gap: .8rem;
    padding: 1rem;
    border: 1px solid var(--gray-700);
    border-radius: 14px;
    background: var(--navy-mid);
    scrollbar-width: thin;
}
.nl-mesa.is-bloqueada > :not(.nl-lab__candado) { display: none; }
.nl-mesa .nl-lab__candado { grid-column: 1 / -1; }

/* --- Identificación: la imagen nunca supera el alto disponible --- */
.nl-mesa .nl-lab__canvas {
    width: min(100%, calc(var(--alto) * var(--ar, 1.5)));
    aspect-ratio: var(--ar, 1.5);
}
.nl-mesa .nl-lab__img { width: 100%; height: 100%; object-fit: contain; }
.nl-lab__img-prev {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    background: #fff; z-index: 3; opacity: 1; transform: scale(1);
    transition: opacity 1.4s ease, transform 1.4s ease;
}
.nl-lab__img-prev.is-fuera { opacity: 0; transform: scale(1.12); }
.nl-lab__canvas.is-transicion .nl-lab__img { animation: nlZoomIn 1.6s ease; }
@keyframes nlZoomIn { from { transform: scale(.92); opacity: .4; } to { transform: none; opacity: 1; } }

/* Números sobre la imagen (botones) */
.nl-mesa .nl-lab__punto {
    cursor: pointer; padding: 0; font-family: inherit; line-height: 1;
    width: 2.1em; height: 2.1em; font-size: .95em;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.nl-mesa .nl-lab__punto:hover { transform: translate(-50%, -50%) scale(1.15); }
.nl-mesa .nl-lab__punto.is-sel {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 0 0 .3em rgba(245,158,11,.75), 0 2px 8px rgba(0,0,0,.4);
    z-index: 2;
}
.nl-lab__punto.is-repasar { background: #D97706; }
.nl-lab__punto.is-activa { background: #F59E0B; }
.nl-lab__forma.is-sel { stroke: #F59E0B; stroke-dasharray: none; fill: rgba(245,158,11,.12); }
.nl-lab__corchete.is-sel { fill: none; }

/* Panel: estado, chips, trabajo */
.nl-mesa .nl-lab__estado { justify-content: space-between; }
.nl-lab__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.nl-lab__chip {
    width: 2rem; height: 2rem; border-radius: 50%;
    font: inherit; font-size: .8rem; font-weight: 800;
    color: var(--violet-light); background: rgba(139,92,246,.14);
    border: 1.5px solid transparent; cursor: pointer;
}
.nl-lab__chip.is-ok { background: rgba(22,163,74,.25); color: #4ADE80; }
.nl-lab__chip.is-repasar { background: rgba(217,119,6,.25); color: #FCD34D; }
.nl-lab__chip.is-activa { background: #F59E0B; color: #1A0E2E; }
.nl-lab__chip.is-sel { border-color: #F59E0B; box-shadow: 0 0 0 2px rgba(245,158,11,.35); }

.nl-lab__trabajo {
    display: flex; flex-direction: column; gap: .55rem;
    padding: .9rem; border-radius: 12px;
    background: rgba(255,255,255,.04); border: 1.5px solid var(--gray-700);
    font-size: .9rem; line-height: 1.5; color: var(--gray-100);
}
.nl-lab__trabajo.is-pregunta { border-color: #F59E0B; }
.nl-lab__trabajo.is-ok { border-color: rgba(34,197,94,.6); background: rgba(34,197,94,.07); }
.nl-lab__trabajo.is-repasar { border-color: rgba(217,119,6,.6); background: rgba(217,119,6,.07); }
.nl-lab__trabajo.is-esperando { opacity: .6; }
.nl-lab__trabajo p { margin: 0; }
.nl-lab__paso { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-weight: 800; font-size: 1rem; color: var(--white, #fff); }
.nl-lab__badge {
    display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
    background: #F59E0B; color: #1A0E2E; font-size: .85rem; font-weight: 800;
}
.nl-lab__ayuda { font-size: .82rem; color: var(--gray-300); }
.nl-lab__resp-fila { display: flex; gap: .4rem; }
.nl-mesa .nl-lab__input {
    flex: 1; min-width: 0; width: auto;
    padding: .55rem .7rem; font-size: .95rem; font-weight: 600;
    color: #1A0E2E; background: #fff; border: 2px solid #C4B5FD; border-radius: 10px;
}
.nl-mesa .nl-lab__input:focus { outline: none; border-color: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,.3); }
.nl-mesa .nl-lab__nose {
    align-self: flex-start; width: auto; height: auto; padding: .2rem 0;
    background: none; border: 0; border-radius: 0; color: var(--gray-300);
    font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer;
}
.nl-mesa .nl-lab__nose:hover { color: var(--violet-light); background: none; }
.nl-lab__estado-nombre { font-size: .72rem; font-weight: 800; padding: .1rem .5rem; border-radius: 99px; }
.nl-lab__estado-nombre.ok { background: rgba(34,197,94,.2); color: #86EFAC; }
.nl-lab__estado-nombre.rep { background: rgba(217,119,6,.25); color: #FCD34D; }
.nl-mesa .nl-lab__alts { grid-template-columns: 1fr; }
.nl-lab__alts.is-sacude { animation: nlLabMal 320ms ease; }
.nl-mesa .nl-lab__comp { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.nl-mesa .nl-lab__etq { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); }
.nl-mesa .nl-lab__decision { display: flex; flex-wrap: wrap; gap: .4rem; }
.nl-lab__bien { color: #86EFAC; font-weight: 800; }
.nl-lab__aviso-act { color: #FCD34D; font-size: .82rem; font-weight: 700; }
.nl-lab__resumen { padding: .7rem; border-radius: 10px; background: rgba(34,197,94,.12); color: #BBF7D0; }
.nl-lab__resumen .nl-lab__alt { display: block; margin-top: .25rem; }
.nl-lab__sig, .nl-lab__sig-nivel { align-self: flex-start; }
.nl-mesa #nl-lab-guia .nl-guia-cta { margin-top: 0; }
.nl-mesa #nl-lab-guia { display: flex; flex-direction: column; gap: .6rem; }
.nl-mesa #nl-lab-guia[hidden] { display: none; }

.nl-mesa__info { font-size: .82rem; color: var(--gray-300); border-top: 1px solid var(--gray-700); padding-top: .6rem; }
.nl-mesa__info summary { cursor: pointer; font-weight: 700; color: var(--gray-300); }
.nl-mesa__info p { margin: .5rem 0 0; line-height: 1.5; }
.nl-mesa__carrera strong { color: var(--violet-light); }

/* --- Lámina: iframe al alto disponible + pestañas en el panel --- */
.nl-mesa__iframe { width: 100%; height: calc(var(--alto) - 1.6rem); border: 0; border-radius: 12px; background: #000; }
.nl-mesa__caption { margin: .3rem 0 0; font-size: .75rem; color: var(--gray-500); align-self: flex-start; }
.nl-mesa__tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--gray-700); }
.nl-mesa__tab {
    font: inherit; font-size: .85rem; font-weight: 700; padding: .45rem .8rem;
    color: var(--gray-300); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.nl-mesa__tab.active { color: var(--violet-light); border-bottom-color: var(--violet); }
.nl-mesa__pane.nl-act-html { padding: 0; }
.nl-mesa__pane .nl-guia__tareas li { font-size: .88rem; }
.nl-mesa__ir { margin-top: .8rem; }
.nl-mesa .nl-tar__caps { grid-template-columns: 1fr; margin-top: .6rem; }
.nl-mesa .nl-tar__zona { min-height: 120px; }
.nl-mesa .nl-tar__zona.tiene img { max-height: 200px; }
.nl-mesa .nl-tar__ops { grid-template-columns: 1fr; }
.nl-mesa .nl-tar__intro { font-size: .85rem; margin: 0; }
.nl-mesa .nl-tar__final { position: sticky; bottom: -1rem; z-index: 2; box-shadow: 0 -6px 14px rgba(26,14,46,.5); background: #2A1A4A; }
.nl-mesa .nl-tar__final.is-ok { background: #1E3A2A; }

/* --- Pantallas angostas: una columna; el panel sigue a la imagen --- */
@media (max-width: 900px) {
    .nl-mesa, .nl-mesa--lamina { grid-template-columns: 1fr; --alto: 70vh; }
    .nl-mesa__vista, .nl-mesa__panel { position: static; max-height: none; }
    .nl-mesa .nl-lab__canvas { width: 100%; }
    .nl-mesa__iframe { height: 60vh; }
    .nl-mesa .nl-lab__capa { font-size: clamp(9px, 2.6cqw, 14px); }
}
.nl-mesa .nl-lab__capa { font-size: clamp(10px, 1.45cqw, 17px); }
.nl-lab__fin { display: flex; flex-direction: column; gap: .6rem; }
.nl-lab__fin[hidden] { display: none; }
.nl-lab__fin .nl-guia-cta { margin-top: 0; }
.nl-lab__sig-nivel[hidden] { display: none; }
.nl-mesa .nl-tar { margin-top: 0; }

/* Instrucciones arriba del panel y conexión con la carrera al completar */
.nl-mesa__instr {
    font-size: .84rem; line-height: 1.5; color: var(--gray-100);
    padding: .55rem .75rem; border-radius: 10px;
    background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.35);
}
.nl-mesa__instr summary { cursor: pointer; font-weight: 800; color: var(--violet-light); }
.nl-mesa__instr p { margin: .45rem 0 0; }
.nl-mesa__instr strong { color: #fff; }
.nl-mesa__instr strong.nl-c-verde { color: #86EFAC; }
.nl-mesa__instr strong.nl-c-rojo { color: #FFB4AE; }
.nl-mesa__instr strong.nl-c-naranjo { color: #FCD34D; }
.nl-mesa__desc { color: var(--gray-300); font-size: .8rem; }
.nl-mesa__aviso {
    font-size: .84rem; line-height: 1.5; color: var(--gray-100);
    padding: .55rem .75rem; border-radius: 10px;
    background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.45);
}
.nl-mesa__aviso summary { cursor: pointer; font-weight: 800; color: #FCD34D; }
.nl-mesa__aviso p { margin: .45rem 0 0; font-size: .84rem; line-height: 1.5; }
.nl-mesa__aviso strong { color: #FDE68A; }
.nl-mesa__conexion {
    padding: .7rem .85rem; border-radius: 10px; font-size: .84rem; line-height: 1.5;
    background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.45); color: var(--gray-100);
}
.nl-mesa__conexion[hidden] { display: none; }
.nl-mesa__conexion p { margin: .3rem 0 0; }
.nl-mesa__conexion-tit { margin: 0 !important; font-weight: 800; color: #FCD34D; }
.nl-mesa__conexion strong { color: #FDE68A; }
.nl-tar .nl-mesa__conexion { margin-top: .8rem; }
.nl-mesa__instr p, .nl-mesa__conexion p { font-size: .84rem; line-height: 1.5; }

/* Cierre del nivel: una sola tarjeta ordenada */
.nl-lab__trabajo.is-cierre { border-color: rgba(34,197,94,.6); background: rgba(34,197,94,.08); gap: .6rem; }
.nl-lab__cierre-tit { font-size: 1.15rem; font-weight: 800; color: #BBF7D0; }
.nl-lab__trabajo.is-cierre .nl-lab__sig-nivel { align-self: stretch; text-align: center; }
.nl-lab__conexion { font-size: .82rem; line-height: 1.5; color: var(--gray-300); }
.nl-lab__conexion summary { cursor: pointer; font-weight: 700; color: #FCD34D; }
.nl-lab__conexion p { margin: .35rem 0 0; font-size: .82rem; }
.nl-lab__conexion strong { color: #FDE68A; }
.nl-lab__trabajo .nl-guia-ok { margin-top: .2rem; }
.nl-tar__final .nl-lab__conexion { margin-top: .4rem; font-weight: 400; }
.nl-tar__final .nl-guia-ok { display: block; margin-top: .3rem; font-weight: 400; }
.nl-tar__ruta { margin-left: .4rem; color: #86EFAC; font-weight: 700; }

/* Línea guía gris del número a la estructura (naranja en la activa) */
.nl-lab__guia-linea { stroke: rgba(90, 80, 110, .55); stroke-width: 1.2; }
.nl-lab__guia-linea.is-ok { stroke: rgba(22, 163, 74, .55); }
.nl-lab__guia-linea.is-repasar { stroke: rgba(217, 119, 6, .6); }
.nl-lab__guia-linea.is-sel { stroke: #F59E0B; stroke-width: 2.2; }
.nl-lab__diana {
    position: absolute; transform: translate(-50%, -50%);
    width: .55em; height: .55em; border-radius: 50%;
    background: rgba(90, 80, 110, .75); border: .1em solid #fff;
    pointer-events: none;
}
.nl-lab__diana.is-ok { background: #16A34A; }
.nl-lab__diana.is-repasar { background: #D97706; }
.nl-lab__diana.is-sel { background: #F59E0B; width: .8em; height: .8em; box-shadow: 0 0 0 .25em rgba(245,158,11,.35); }

/* Ficha de una estructura: bloques separados para leer con calma */
.nl-ficha__tambien { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .78rem; color: var(--gray-500); }
.nl-ficha__tambien span {
    padding: .1rem .55rem; border-radius: 99px; font-size: .78rem;
    background: rgba(255,255,255,.07); color: var(--gray-100);
}
.nl-ficha__bloque {
    padding: .6rem .75rem; border-radius: 10px;
    background: rgba(255,255,255,.05); border-left: 3px solid var(--violet);
}
.nl-ficha__bloque--extra { background: transparent; border-left-color: var(--gray-700); }
.nl-ficha__bloque p { margin: .2rem 0 0; font-size: .88rem; line-height: 1.55; }
.nl-ficha__bloque--extra p { color: var(--gray-300); font-size: .84rem; }
.nl-ficha__etq { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--violet-light); }
.nl-ficha__bloque--extra .nl-ficha__etq { color: var(--gray-500); }
.nl-lab__trabajo.is-ok .nl-ficha__bloque { border-left-color: #22C55E; }
.nl-lab__trabajo.is-repasar .nl-ficha__bloque { border-left-color: #D97706; }
.nl-ficha__acciones { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .2rem; }
.nl-ficha__acciones:empty { display: none; }

/* "Por repasar": salmón suave (distinto del naranjo de la estructura activa) */
.nl-mesa { --repasar: #E0524A; --repasar-claro: #FFB4AE; }
.nl-mesa .nl-lab__punto.is-repasar,
.nl-mesa .nl-lab__diana.is-repasar { background: var(--repasar); }
.nl-mesa .nl-lab__chip.is-repasar { background: rgba(224,82,74,.24); color: var(--repasar-claro); }
.nl-mesa .nl-lab__guia-linea.is-repasar { stroke: rgba(224,82,74,.7); }
.nl-mesa .nl-lab__forma.is-repasar { stroke: var(--repasar); fill: rgba(224,82,74,.1); }
.nl-mesa .nl-lab__trabajo.is-repasar { border-color: rgba(224,82,74,.65); background: rgba(224,82,74,.08); }
.nl-mesa .nl-lab__trabajo.is-repasar .nl-ficha__bloque { border-left-color: var(--repasar); }
.nl-lab__repasar { color: var(--repasar-claro); }

/* Aparición progresiva de cada estructura sobre la imagen */
.nl-lab__punto.is-aparece { animation: nlAparece .45s cubic-bezier(.3,1.5,.5,1); }
.nl-lab__diana.is-aparece { animation: nlFade .45s ease; }
.nl-lab__guia-linea.is-aparece { animation: nlFade .6s ease; }
@keyframes nlAparece { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } to { opacity: 1; } }
@keyframes nlFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .nl-lab__punto.is-aparece, .nl-lab__diana.is-aparece, .nl-lab__guia-linea.is-aparece { animation: none; }
}

/* Identificación: la imagen toma su ancho real y el panel ocupa el resto (sin espacio muerto) */
.nl-mesa:not(.nl-mesa--lamina) {
    grid-template-columns: minmax(0, auto) minmax(360px, 1fr);
    justify-content: center;
}
.nl-mesa:not(.nl-mesa--lamina) .nl-mesa__vista { align-items: stretch; }
.nl-mesa:not(.nl-mesa--lamina) .nl-mesa__panel { max-width: 620px; }
.nl-mesa:not(.nl-mesa--lamina) .nl-lab__canvas { width: calc(var(--alto) * var(--ar, 1.5)); max-width: 100%; }
@media (max-width: 900px) {
    .nl-mesa:not(.nl-mesa--lamina) { grid-template-columns: 1fr; }
    .nl-mesa:not(.nl-mesa--lamina) .nl-lab__canvas { width: 100%; }
}

/* --- Tipos de neurona (js/tipos.js): misma mesa; vista = lienzo o frase + tarjetas --- */
.nl-mesa--tipos .nl-tip__vista { width: var(--alto); max-width: 100%; animation: nlFade .5s ease; }
.nl-mesa--tipos[data-tipo="elegir"] .nl-tip__vista { width: calc(var(--alto) * 1.3); }
.nl-tip__lienzo-caja {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem;
    height: var(--alto); padding: .7rem; border-radius: var(--radius, 16px);
    background: radial-gradient(circle at 50% 55%, #fff 0 45%, #F7F4FF 100%); border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px #EDE9FE;
    transition: border-color .3s;
}
.nl-tip__lienzo-caja.is-ok { border-color: #22C55E; }
.nl-tip__lienzo-caja.is-repasar { border-color: var(--repasar); }
.nl-tip__lienzo-caja.is-sacude { animation: nlLabMal 320ms ease; border-color: var(--repasar); }
.nl-tip__paleta { grid-template-columns: repeat(4, auto); justify-content: center; }
.nl-tip__paleta { display: flex; flex-wrap: wrap; gap: .4rem; }
.nl-tip__paleta .nl-arm__pieza { color: #3B2F55; background: #fff; border: 1.5px solid #DDD6FE; cursor: pointer; box-shadow: 0 1px 2px rgba(46,16,101,.08); }
.nl-tip__paleta .nl-arm__pieza:hover { color: #2E1065; border-color: #A78BFA; }
.nl-tip__pz { display: inline-flex; align-items: stretch; }
.nl-tip__pz .nl-arm__pieza { border-radius: 10px 0 0 10px; border-right: 0; }
.nl-tip__pz--dendrita { --pz: #0D9488; } .nl-tip__pz--axon { --pz: #DB2777; } .nl-tip__pz--t { --pz: #2563EB; }
.nl-tip__pz .nl-arm__pieza.active { color: #fff; background: var(--pz); border-color: var(--pz); }
.nl-tip__pz .nl-arm__pieza.active svg path, .nl-tip__pz .nl-arm__pieza.active svg rect { stroke: #fff; }
.nl-tip__que {
    font: 800 .78rem/1 inherit; width: 1.9rem; cursor: pointer; color: var(--pz); background: #fff;
    border: 1.5px solid #DDD6FE; border-left: 1px dashed #DDD6FE; border-radius: 0 10px 10px 0;
}
.nl-tip__que:hover, .nl-tip__que.is-on { color: #fff; background: var(--pz); border-color: var(--pz); }
.nl-tip__def {
    margin: 0; max-width: 34rem; padding: .45rem .7rem; border-radius: 10px; font-size: .84rem; line-height: 1.45;
    color: #2E1065; background: #fff; border: 1.5px solid #DDD6FE; border-left: 4px solid var(--pz, #7C3AED);
}
.nl-tip__def--dendrita { --pz: #0D9488; } .nl-tip__def--axon { --pz: #DB2777; } .nl-tip__def--t { --pz: #2563EB; }
.nl-tip__def strong { color: var(--pz); }
.nl-tip__lienzo { flex: 1 1 auto; min-height: 0; width: 100%; touch-action: manipulation; }
.nl-tip__sello { margin: 0; font-weight: 800; color: #15803D; }
.nl-tip__lienzo-caja.is-repasar .nl-tip__sello { color: #B42318; }
/* Paso 2: sentido de la información (zonas que se tocan, etiquetas y ruta del impulso) */
.nl-tip__sello.is-flecha { color: #B45309; }
.nl-tip__zonas .zona { fill: none; stroke: rgba(245,158,11,.001); stroke-width: 28; stroke-linecap: round; cursor: pointer; pointer-events: stroke; }
.nl-tip__zonas .zona:hover, .nl-tip__zonas .zona:focus-visible { stroke: rgba(245,158,11,.25); outline: none; }
.nl-tip__zonas .zona.is-entra { stroke: rgba(13,148,136,.25); }
.nl-tip__lienzo .pieza.is-entra, .nl-tip__mini .pieza.is-entra { filter: drop-shadow(0 0 4px rgba(13,148,136,.9)); }
.nl-tip__lienzo .pieza.is-sale { filter: drop-shadow(0 0 4px rgba(219,39,119,.8)); }
.p-flecha-halo { fill: none; stroke: rgba(245,158,11,.28); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.p-flecha { fill: none; stroke: #F59E0B; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.p-flecha-punta { fill: #F59E0B; stroke: #fff; stroke-width: 1.2; }
.p-flecha-flujo { fill: none; stroke: #FEF3C7; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 12; animation: nlFlujo .9s linear infinite; }
.p-impulso { fill: #FDE047; stroke: #B45309; stroke-width: 1.5; filter: drop-shadow(0 0 5px rgba(253,224,71,.95)); }
.p-etq rect { stroke: #fff; stroke-width: 1.5; }
.p-etq text { font: 800 10px/1 'Plus Jakarta Sans', Arial, sans-serif; letter-spacing: .06em; fill: #fff; }
.p-etq--entra rect { fill: #0D9488; }
.p-etq--sale rect { fill: #DB2777; }
@keyframes nlFlujo { to { stroke-dashoffset: -15; } }
@media (prefers-reduced-motion: reduce) { .p-flecha-flujo { animation: none; } .p-impulso { display: none; } }
/* piezas sobre fondo blanco (mismos colores que en la guía) */
.nl-mesa--tipos .p-dend  { stroke: #0D9488; }
.nl-mesa--tipos .p-axon  { stroke: #DB2777; }
.nl-mesa--tipos .p-t     { stroke: #2563EB; }
.nl-mesa--tipos .p-mielina { fill: #E0E7FF; stroke: #818CF8; stroke-width: 1; opacity: 1; }
.nl-mesa--tipos .p-boton { fill: #DB2777; }
.nl-mesa--tipos .p-t ~ .p-boton { fill: #2563EB; }
.nl-mesa--tipos .p-soma  { fill: #8B5CF6; stroke: #5B21B6; }
.nl-mesa--tipos .p-nucleo { fill: #2E1065; stroke: #DDD6FE; }
.nl-tip__lienzo .punto__aro { fill: #F5F3FF; stroke: #A78BFA; }
.nl-tip__lienzo .punto__mas { stroke: #7C3AED; }
.nl-tip__lienzo .punto.is-lleno .punto__aro { fill: rgba(245,243,255,.85); stroke: #C4B5FD; }
.nl-tip__lienzo .punto:hover .punto__aro,
.nl-tip__lienzo .punto:focus-visible .punto__aro { fill: #F59E0B; stroke: #B45309; stroke-dasharray: none; }
.nl-tip__lienzo .punto:hover .punto__mas, .nl-tip__lienzo .punto:focus-visible .punto__mas { stroke: #fff; }
.nl-tip__resumen { font-size: .85rem; color: var(--gray-300); }
/* Al cerrar: las neuronas armadas lado a lado */
.nl-tip__lienzo-caja.is-galeria { flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; height: auto; min-height: 40vh; }
.nl-tip__mini { margin: 0; width: calc(33% - .4rem); min-width: 150px; text-align: center; border-radius: 12px; border: 2px solid #DDD6FE; padding: .3rem; }
.nl-tip__mini.is-ok { border-color: #86EFAC; }
.nl-tip__mini.is-repasar { border-color: #FFB4AE; }
.nl-tip__mini svg { width: 100%; height: auto; display: block; }
.nl-tip__mini figcaption { font-size: .85rem; font-weight: 700; color: #2E1065; }

@media (max-width: 900px) {
    .nl-mesa--tipos .nl-tip__vista, .nl-mesa--tipos[data-tipo="elegir"] .nl-tip__vista { width: 100%; }
    .nl-tip__lienzo-caja { height: auto; }
    .nl-tip__lienzo { width: min(100%, 52vh); }
    .nl-tip__paleta { grid-template-columns: repeat(2, 1fr); width: 100%; }
}
.nl-mesa.nl-mesa--tipos { grid-template-columns: auto minmax(360px, 620px); }
@media (max-width: 900px) { .nl-mesa.nl-mesa--tipos { grid-template-columns: 1fr; } }

/* Nivel "elegir": frase grande + 3 tarjetas que se dan vuelta */
.nl-tip__frase-caja {
    display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
    min-height: var(--alto); padding: 1.4rem 1.6rem; border-radius: var(--radius, 16px);
    background: #fff; color: #1A0E2E;
}
.nl-tip__frase-caja.is-cierre { justify-content: flex-start; min-height: 0; }
.nl-tip__fila-etq { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #7C3AED; }
.nl-tip__frase { margin: 0; font-size: clamp(1.1rem, 2.1vw, 1.45rem); font-weight: 700; line-height: 1.4; color: #1A0E2E; min-height: 3.6em; }
.nl-tip__hueco { color: #D97706; letter-spacing: .05em; }
.nl-tip__cartas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.nl-tip__carta {
    padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
    perspective: 900px; aspect-ratio: 3 / 3.6; min-height: 0;
}
.nl-tip__carta-in {
    position: relative; display: block; width: 100%; height: 100%;
    transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,1.3,.5,1);
}
.nl-tip__carta:not([disabled]):hover .nl-tip__carta-in { transform: translateY(-6px); }
.nl-tip__carta.is-vuelta .nl-tip__carta-in { transform: rotateY(180deg); }
.nl-tip__cara, .nl-tip__dorso {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; padding: .7rem; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border: 2px solid #DDD6FE; background: #F5F3FF; box-shadow: 0 4px 12px rgba(46,16,101,.12);
}
.nl-tip__carta:not([disabled]):hover .nl-tip__cara { border-color: #F59E0B; box-shadow: 0 8px 18px rgba(245,158,11,.25); }
.nl-tip__cara .nl-ico { width: 78%; max-width: 150px; height: auto; aspect-ratio: 1; object-fit: contain; }
.nl-tip__carta-nom { font-weight: 800; font-size: clamp(.78rem, 1.2vw, .98rem); color: #2E1065; }
.nl-tip__dorso { transform: rotateY(180deg); text-align: center; font-size: .9rem; line-height: 1.4; }
.nl-tip__dorso strong { font-size: 1rem; }
.nl-tip__dorso small { font-size: .82rem; color: #4A3A6A; }
.nl-tip__carta.is-ok .nl-tip__dorso { background: #DCFCE7; border-color: #22C55E; color: #15803D; }
.nl-tip__carta.is-mal .nl-tip__dorso { background: #FFF1F0; border-color: var(--repasar); color: #B42318; cursor: default; }
.nl-tip__carta.is-apagada { opacity: .35; cursor: default; }
.nl-tip__carta.is-esperando { opacity: .6; }
.nl-tip__carta[disabled] { cursor: default; }
@media (prefers-reduced-motion: reduce) { .nl-tip__carta-in { transition: none; } }

/* Cuadro comparativo (panel; y grande en la vista al cerrar) */
.nl-tip__cuadro { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; font-size: .74rem; line-height: 1.35; }
.nl-tip__cuadro th { font-weight: 800; color: var(--violet-light); text-align: center; vertical-align: bottom; font-size: .72rem; }
.nl-tip__cuadro thead th { padding: 0 .1rem .15rem; hyphens: manual; }
.nl-tip__cuadro thead th:first-child { width: 22%; }
.nl-tip__cuadro thead .nl-ico { display: block; width: 34px; height: 34px; margin: 0 auto .15rem; border-radius: 8px; background: #fff; padding: 1px; object-fit: contain; }
.nl-tip__cuadro tbody th { text-align: left; vertical-align: middle; color: var(--gray-300); padding: .3rem; }
.nl-tip__cuadro td { vertical-align: top; padding: .3rem .35rem; border-radius: 7px; background: rgba(255,255,255,.05); color: var(--gray-100); }
.nl-tip__cuadro tr.is-actual td, .nl-tip__cuadro tr.is-actual th { background: rgba(245,158,11,.12); }
.nl-tip__cuadro tr.is-actual th { color: #FCD34D; border-radius: 7px; }
.nl-tip__celda { display: block; }
.nl-tip__celda + .nl-tip__celda { margin-top: .25rem; padding-top: .25rem; border-top: 1px dashed rgba(255,255,255,.15); }
.nl-tip__celda.is-nueva { animation: nlCelda 1.6s ease; color: #BBF7D0; }
@keyframes nlCelda { 0% { background: rgba(34,197,94,.45); } 100% { background: transparent; } }
.nl-tip__vacia { color: var(--gray-500); }
.nl-tip__cuadro.is-grande { font-size: .9rem; border-spacing: 4px; }
.nl-tip__cuadro.is-grande th { color: #5B21B6; font-size: .85rem; }
.nl-tip__cuadro.is-grande td { background: #F5F3FF; color: #1A0E2E; padding: .5rem .6rem; }
.nl-tip__cuadro.is-grande .nl-tip__celda + .nl-tip__celda { border-top-color: #DDD6FE; }
/* Cuadro con más de 4 columnas (p. ej. las 6 células gliales): palabras largas cortadas con guion */
.nl-tip__cuadro.is-ancho td, .nl-tip__cuadro.is-ancho thead th { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.nl-tip__cuadro.is-ancho thead th:first-child { width: 13%; }
.nl-tip__cuadro.is-grande.is-ancho { font-size: .8rem; }
.nl-tip__cuadro.is-grande.is-ancho td { padding: .45rem .4rem; }

@media (max-width: 900px) {
    .nl-tip__frase-caja { min-height: 0; padding: 1rem; gap: .8rem; }
    .nl-tip__frase { min-height: 0; font-size: 1.05rem; }
    .nl-tip__cartas { gap: .5rem; }
    .nl-tip__cara, .nl-tip__dorso { padding: .4rem; }
    .nl-tip__dorso { font-size: .75rem; }
    .nl-tip__dorso small { font-size: .7rem; }
    .nl-tip__cuadro.is-grande { font-size: .74rem; }
}
.nl-tip__logro { margin-left: auto; font-size: .75rem; font-weight: 800; padding: .15rem .55rem; border-radius: 99px; background: rgba(34,197,94,.2); color: #86EFAC; }
.nl-lab__trabajo.is-repasar .nl-tip__logro { background: rgba(224,82,74,.22); color: var(--repasar-claro); }
.nl-tip__carta.is-ok .nl-tip__dorso .nl-ico { width: 55%; max-width: 110px; height: auto; }

/* --- Lámina por niveles (js/lamina.js): lámina o captura en la vista; pasos en el panel --- */
.nl-lam__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; width: 100%; margin-bottom: .4rem; }
.nl-lam__tinciones, .nl-lam__ver { display: inline-flex; padding: 3px; gap: 3px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid var(--gray-700); }
.nl-lam__tinciones[hidden] { display: none; }
.nl-lam__tincion, .nl-lam__ver-btn {
    font: inherit; font-size: .8rem; font-weight: 700; padding: .3rem .8rem; border-radius: 99px; border: 0;
    color: var(--gray-300); background: none; cursor: pointer;
}
.nl-lam__tincion.active, .nl-lam__ver-btn.active { background: var(--violet); color: #fff; }
.nl-lam__ver-btn:disabled { opacity: .4; cursor: default; }
.nl-lam__nombre { font-size: .8rem; font-weight: 700; color: var(--gray-300); }
.nl-mesa--capturas .nl-mesa__iframe { height: calc(var(--alto) - 2.9rem); }
.nl-lam__editor {
    width: 100%; height: calc(var(--alto) - 2.9rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    border-radius: 12px; background: #0F0820; border: 1px solid var(--gray-700); overflow: auto;
}
.nl-lam__editor[hidden] { display: none; }
.nl-lam__lienzo { position: relative; display: inline-block; line-height: 0; max-width: 100%; }
.nl-lam__lienzo img { display: block; max-width: 100%; max-height: calc(var(--alto) - 6rem); user-select: none; -webkit-user-drag: none; }
.nl-lam__lienzo.is-recorte { cursor: crosshair; touch-action: none; overflow: hidden; }
.nl-lam__lienzo.is-poner { cursor: crosshair; }
.nl-lam__sel { position: absolute; border: 2px dashed #F59E0B; box-shadow: 0 0 0 9999px rgba(15,8,32,.55); pointer-events: none; }
.nl-lam__ayuda-vista { margin: 0; font-size: .85rem; color: var(--gray-300); line-height: 1.4; }
.nl-lam__ayuda-vista strong { color: #FCD34D; }

/* Etiquetas sobre la captura: punto + rótulo con línea */
.nl-lam__pin { position: absolute; width: 0; height: 0; pointer-events: none; line-height: 1.2; animation: nlFade .3s ease; }
.nl-lam__pin i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #F59E0B; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.nl-lam__pin b {
    position: absolute; left: 28px; top: 0; transform: translateY(-50%); white-space: nowrap;
    font-size: .78rem; font-weight: 800; color: #fff; padding: .15rem .5rem; border-radius: 99px; background: rgba(26,14,46,.85);
}
.nl-lam__pin b::before { content: ''; position: absolute; right: 100%; top: 50%; width: 22px; height: 2px; background: #F59E0B; }
.nl-lam__pin.is-izq b { left: auto; right: 28px; }
.nl-lam__pin.is-izq b::before { right: auto; left: 100%; }
.nl-lam__pin.is-sel i { background: #FCD34D; box-shadow: 0 0 0 4px rgba(245,158,11,.45); }

/* Al cerrar: las capturas etiquetadas */
.nl-lam__galeria { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; padding: .8rem; }
.nl-lam__mini { margin: 0; flex: 1 1 260px; max-width: 48%; text-align: center; }
.nl-lam__mini .nl-lam__lienzo img { max-height: 40vh; border-radius: 8px; border: 2px solid #86EFAC; }
.nl-lam__mini.is-repasar .nl-lam__lienzo img { border-color: var(--repasar-claro); }
.nl-lam__mini:only-child { max-width: 100%; flex-basis: 100%; }
.nl-lam__mini:only-child .nl-lam__lienzo img { max-height: calc(var(--alto) - 8rem); width: auto; }
.nl-lam__mini figcaption { margin-top: .3rem; font-size: .85rem; font-weight: 700; color: var(--gray-100); line-height: 1.3; }

/* Panel: capturas, pasos, pegar, etiquetas */
.nl-lam__cap {
    display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem .25rem .25rem; border-radius: 99px;
    font: inherit; font-size: .8rem; font-weight: 700; color: var(--violet-light); background: rgba(139,92,246,.14);
    border: 1.5px solid transparent; cursor: pointer;
}
.nl-lam__cap span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(139,92,246,.3); font-size: .75rem; }
.nl-lam__cap.is-activa span { background: #F59E0B; color: #1A0E2E; }
.nl-lam__cap.is-ok { background: rgba(22,163,74,.22); color: #86EFAC; }
.nl-lam__cap.is-ok span { background: #16A34A; color: #fff; }
.nl-lam__cap.is-repasar { background: rgba(224,82,74,.22); color: var(--repasar-claro); }
.nl-lam__cap.is-repasar span { background: var(--repasar); color: #fff; }
.nl-lam__cap.is-sel { border-color: #F59E0B; }
.nl-lam__pasos { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.nl-lam__pasos li {
    flex: 1; text-align: center; font-size: .7rem; font-weight: 700; padding: .25rem .2rem; border-radius: 6px;
    color: var(--gray-500); background: rgba(255,255,255,.04); counter-increment: paso;
}
.nl-lam__pasos li::before { content: counter(paso) '. '; }
.nl-lam__pasos li.is-ok { color: #86EFAC; background: rgba(22,163,74,.15); }
.nl-lam__pasos li.is-actual { color: #1A0E2E; background: #F59E0B; }
.nl-lam__pegar {
    display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center;
    padding: 1rem .8rem; border-radius: 12px; border: 2px dashed rgba(245,158,11,.6); background: rgba(245,158,11,.06);
    font-size: .82rem; color: var(--gray-300); line-height: 1.5;
}
.nl-lam__pegar strong { color: #FCD34D; font-size: .95rem; }
.nl-lam__pegar kbd { font-size: .72rem; padding: .05rem .3rem; border-radius: 4px; background: rgba(255,255,255,.12); color: #fff; }
.nl-lam__subir { cursor: pointer; }
.nl-lam__capt {
    display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
    padding: .8rem .85rem; border-radius: 12px; border: 2px solid rgba(245,158,11,.7); background: rgba(245,158,11,.1);
    font-size: .84rem; color: var(--gray-100); line-height: 1.5;
}
.nl-lam__capt strong { color: #FDE68A; }
.nl-lam__pegar.is-respaldo { padding: .6rem .8rem; border-width: 1.5px; border-color: rgba(255,255,255,.18); background: transparent; }
.nl-lam__pegar.is-respaldo strong { color: var(--gray-100); font-size: .84rem; }
.nl-lam__etqs { display: flex; flex-wrap: wrap; gap: .35rem; }
.nl-lam__etq {
    font: inherit; font-size: .82rem; font-weight: 700; padding: .35rem .75rem; border-radius: 99px; cursor: pointer;
    color: var(--violet-light); background: rgba(139,92,246,.14); border: 1.5px solid transparent;
}
.nl-lam__etq.is-ok { color: #86EFAC; background: rgba(22,163,74,.2); }
.nl-lam__etq.is-sel { color: #1A0E2E; background: #F59E0B; }
.nl-lam__etq.is-mal { color: var(--repasar-claro, #FFB4AE); background: rgba(220,38,38,.18); }
.nl-lam__etq.is-mal.is-sel { color: #1A0E2E; background: #F59E0B; }
.nl-lam__pin.is-mal i { background: #EF4444; }
.nl-lam__pin.is-mal b { background: rgba(127,29,29,.92); }
.nl-lam__pin.is-mal b::before { background: #EF4444; }
.nl-lam__lienzo.is-esperando { cursor: progress; }

/* Encaje del molde (js/molde.js): silueta translúcida que se mueve y escala sobre la captura */
.nl-lam__lienzo.is-encaje { overflow: hidden; touch-action: none; }
.nl-lam__molde { position: absolute; cursor: move; touch-action: none; outline: 2px dashed rgba(252,211,77,.9); box-shadow: 0 0 0 9999px rgba(15,8,32,.45); }
.nl-molde { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nl-molde__medula, .nl-molde__ganglio, .nl-molde__hueso { fill: none; vector-effect: non-scaling-stroke; stroke-width: 2.5; }
.nl-molde__medula { stroke: #22D3EE; fill: rgba(34,211,238,.10); }
.nl-molde__ganglio { stroke: #FCD34D; fill: rgba(252,211,77,.14); }
.nl-molde__hueso { stroke: #F472B6; stroke-dasharray: 6 4; }
.nl-molde__txt { font: 700 3.4px Arial, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(26,14,46,.85); stroke-width: .9px; text-anchor: middle; }
.nl-lam__tam-etq { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--gray-300); margin: .4rem 0 .2rem; }
.nl-lam__tam { width: 100%; accent-color: #F59E0B; }

@media (max-width: 900px) {
    .nl-mesa--capturas .nl-mesa__iframe { height: 60vh; }
    .nl-lam__editor { height: auto; min-height: 40vh; padding: .5rem 0; }
    .nl-lam__lienzo img { max-height: 65vh; }
    .nl-lam__mini { max-width: 100%; }
}

/* --- Quiz en mesa (js/quiz-mesa.js) --- */
.nl-quiz__caja { justify-content: flex-start; padding-top: 2rem; }
.nl-quiz__pool { margin-left: .5rem; padding: .1rem .5rem; border-radius: 99px; font-size: .68rem; letter-spacing: .04em; background: #EDE9FE; color: #5B21B6; }
.nl-quiz__pool.is-terapia-ocupacional, .nl-quiz__pool.is-fonoaudiologia { background: linear-gradient(135deg, #8B5CF6, #EC4899); color: #fff; }
.nl-quiz__ops { display: flex; flex-direction: column; gap: .55rem; }
.nl-quiz__op {
    display: flex; align-items: center; gap: .7rem; text-align: left; width: 100%;
    padding: .7rem .9rem; border-radius: 12px; border: 2px solid #DDD6FE; background: #F5F3FF;
    font: inherit; font-size: .98rem; font-weight: 600; line-height: 1.4; color: #1A0E2E; cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.nl-quiz__op:not([disabled]):hover { border-color: #F59E0B; transform: translateX(3px); }
.nl-quiz__op .nl-lab__alt-letra { flex: none; }
.nl-quiz__op.is-ok { border-color: #22C55E; background: #DCFCE7; color: #14532D; }
.nl-quiz__op.is-mal { border-color: var(--repasar); background: #FFF1F0; color: #7F1D1D; }
.nl-quiz__op.is-apagada { opacity: .45; }
.nl-quiz__op[disabled] { cursor: default; }
.nl-quiz__chip { width: 1.75rem; height: 1.75rem; font-size: .72rem; }
.nl-quiz__chip[disabled] { opacity: .45; cursor: default; }
.nl-quiz__puntos { font-size: .8rem; font-weight: 700; color: #86EFAC; }
.nl-quiz__res { align-items: center; text-align: center; justify-content: center; }
.nl-quiz__nota { margin: 0; font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 800; line-height: 1; color: #5B21B6; }
.nl-quiz__nota span { font-size: .4em; color: #8B7AA8; }
.nl-quiz__barra { width: min(420px, 90%); height: 12px; border-radius: 99px; background: #EDE9FE; overflow: hidden; }
.nl-quiz__barra i { display: block; height: 100%; background: linear-gradient(90deg, #8B5CF6, #22C55E); }
.nl-quiz__msj { margin: 0; font-size: 1.05rem; font-weight: 700; color: #2E1065; }
@media (max-width: 900px) { .nl-quiz__caja { padding-top: 1rem; } .nl-quiz__op { font-size: .9rem; } }
.nl-quiz__op .nl-lab__alt-letra {
    display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: #DDD6FE; color: #4C1D95; font-size: .8rem; font-weight: 800; opacity: 1;
}
.nl-quiz__op.is-ok .nl-lab__alt-letra { background: #22C55E; color: #fff; }
.nl-quiz__op.is-mal .nl-lab__alt-letra { background: var(--repasar); color: #fff; }
.nl-tip__dorso strong, .nl-tip__carta-nom { hyphens: manual; overflow-wrap: anywhere; }

/* ============================================================
   NeuroLab — práctica en mesa (js/mesa-practica.js) y mesa genérica
   ============================================================ */
#nl-mprac .nl-tip__vista { width: calc(var(--alto) * 1.25); }
.nl-cartas { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.nl-cartas .nl-tip__carta-nom { font-size: clamp(.78rem, 1.15vw, .95rem); overflow-wrap: anywhere; hyphens: auto; }
/* 6 tarjetas (p. ej. las 6 glías): 3 arriba y 3 abajo, más bajas, y la caja blanca se ajusta a su contenido */
.nl-cartas[data-n="6"] { grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.nl-cartas[data-n="6"] .nl-tip__carta { aspect-ratio: 3 / 2.55; }
.nl-cartas[data-n="6"] .nl-tip__cara { gap: .25rem; padding: .45rem; }
.nl-cartas[data-n="6"] .nl-tip__cara .nl-ico { width: 62%; max-width: 104px; }
.nl-tip__frase-caja.is-compacta { min-height: 0; justify-content: flex-start; gap: .8rem; padding: 1.1rem 1.4rem; }
.nl-tip__frase-caja.is-compacta .nl-tip__frase { min-height: 2.8em; }
/* 3 tarjetas (p. ej. la barrera): una fila baja; 8 tarjetas (estados de la glía): 4 + 4 */
.nl-cartas[data-n="3"] { grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.nl-cartas[data-n="3"] .nl-tip__carta { aspect-ratio: 3 / 2.5; }
.nl-cartas[data-n="3"] .nl-tip__cara .nl-ico { width: 60%; max-width: 120px; }
.nl-cartas[data-n="8"] { grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.nl-cartas[data-n="8"] .nl-tip__carta { aspect-ratio: 3 / 2.9; }
.nl-cartas[data-n="8"] .nl-tip__cara { gap: .2rem; padding: .4rem; }
.nl-cartas[data-n="8"] .nl-tip__cara .nl-ico { width: 58%; max-width: 90px; }
.nl-cartas[data-n="8"] .nl-tip__carta-nom { font-size: clamp(.72rem, 1vw, .86rem); line-height: 1.2; }
.nl-cartas[data-n="8"] .nl-tip__dorso { font-size: .78rem; line-height: 1.3; }
.nl-cartas[data-n="8"] .nl-tip__dorso small { font-size: .72rem; }
/* Imagen complementaria en miniatura junto a la frase; se amplía en el visor */
.nl-mprac__con-mini { display: flex; align-items: flex-start; gap: 1rem; }
.nl-mprac__con-mini .nl-tip__frase { flex: 1; }
.nl-mprac__mini { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 132px; padding: .3rem; border: 2px solid #DDD6FE; border-radius: 12px; background: #F5F3FF; cursor: zoom-in; font: inherit; }
.nl-mprac__mini:hover { border-color: #F59E0B; }
.nl-mprac__mini img { width: 100%; height: 84px; object-fit: cover; border-radius: 8px; background: #fff; }
.nl-mprac__mini span { font-size: .72rem; font-weight: 800; color: #5B21B6; }
.nl-mprac__visor { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: rgba(10,4,24,.82); animation: nlFade .25s ease; }
.nl-mprac__visor-caja { position: relative; max-width: min(960px, 100%); max-height: 100%; overflow: auto; padding: 1rem 1rem .8rem; border-radius: 16px; background: #fff; color: #1A0E2E; }
.nl-mprac__visor-caja img { display: block; max-width: 100%; max-height: 68vh; margin: 0 auto; border-radius: 10px; }
.nl-mprac__visor-ctx { margin: .7rem 0 0; font-size: .95rem; line-height: 1.5; color: #1A0E2E; }
.nl-mprac__visor-pie { margin: .4rem 0 0; font-size: .78rem; color: #6B5B86; }
.nl-mprac__visor-x { position: absolute; top: .4rem; right: .4rem; width: 34px; height: 34px; border: 0; border-radius: 99px; background: #EDE9FE; color: #2E1065; font-size: 1rem; cursor: pointer; }
@media (max-width: 900px) {
    .nl-cartas[data-n="6"] { gap: .4rem; }
    .nl-cartas[data-n="6"] .nl-tip__carta { aspect-ratio: 3 / 3.7; }
    .nl-cartas[data-n="6"] .nl-tip__cara .nl-ico { width: 70%; }
    .nl-cartas[data-n="6"] .nl-tip__carta-nom { font-size: .72rem; line-height: 1.15; }
    .nl-cartas[data-n="3"] .nl-tip__carta { aspect-ratio: 3 / 3.2; }
    /* en el celular, 2 columnas de tarjetas horizontales (dibujo a la izquierda) */
    .nl-cartas[data-n="8"] { grid-template-columns: repeat(2, 1fr); gap: .4rem; }
    .nl-cartas[data-n="8"] .nl-tip__carta { aspect-ratio: auto; height: 64px; }
    .nl-cartas[data-n="8"] .nl-tip__cara { flex-direction: row; justify-content: flex-start; gap: .4rem; padding: .3rem .45rem; text-align: left; }
    .nl-cartas[data-n="8"] .nl-tip__cara .nl-ico { width: 48px; max-width: 48px; flex: 0 0 48px; }
    .nl-cartas[data-n="8"] .nl-tip__carta-nom { font-size: .74rem; line-height: 1.15; }
    .nl-cartas[data-n="8"] .nl-tip__dorso { font-size: .66rem; }
    .nl-cartas[data-n="8"] .nl-tip__dorso small { display: none; }
    .nl-mprac__mini { width: 96px; }
    .nl-mprac__mini img { height: 64px; }
}
.nl-tip__hueco.is-lleno { color: #4ADE80; letter-spacing: 0; border-bottom: 2px solid rgba(74,222,128,.5); }
.nl-mprac__fig { margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.nl-mprac__fig img { max-height: calc(var(--alto) * .5); max-width: 100%; width: auto; border-radius: 12px; background: #fff; }
.nl-mprac__fig figcaption { font-size: .8rem; color: #6B5B86; }
.nl-mprac__resumen td:first-child { width: 2.2rem; text-align: center; }

/* Mesa genérica: recursos en la vista */
.nl-gen__vista { align-items: stretch; }
.nl-gen__recursos { width: 100%; }
.nl-gen__pane { display: none; }
.nl-gen__pane.active { display: block; }
.nl-gen__pane .nl-act-iframe { height: calc(var(--alto) - 3.5rem); min-height: 420px; border-radius: 12px; }
.nl-gen__pane .nl-act-img { border-radius: 12px; background: #fff; max-height: calc(var(--alto) - 3rem); object-fit: contain; }
.nl-gen__pane--texto_html { background: var(--navy-mid); border: 1px solid var(--gray-700); border-radius: 14px; }
.nl-gen__vista .nl-act-tabs { margin-bottom: .5rem; }
@media (max-width: 900px) {
    #nl-mprac .nl-tip__vista { width: 100%; }
    .nl-gen__pane .nl-act-iframe { height: 65vh; }
}

/* --- Circuito sobre la captura (js/circuito.js) --- */
.nl-circ__lienzo .nl-circ__etq i { width: 9px; height: 9px; left: -4.5px; top: -4.5px; background: rgba(245,158,11,.85); }
.nl-circ__lienzo .nl-circ__etq b { font-size: .68rem; opacity: .85; }
.nl-circ__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.nl-circ__halo { fill: none; stroke: rgba(253,230,138,.45); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-width: 12px; }
.nl-circ__ruta { fill: none; stroke: #F59E0B; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-width: 4px; }
.nl-circ__ruta.is-animada { stroke-dasharray: 6 4; animation: nlCircFlujo 1.2s linear infinite; }
@keyframes nlCircFlujo { to { stroke-dashoffset: -10; } }
.nl-circ__impulso { fill: #FEF3C7; filter: drop-shadow(0 0 3px #FCD34D) drop-shadow(0 0 6px #F59E0B); }
.nl-circ__fin {
    position: absolute; transform: translate(-50%, -50%); padding: .15rem .55rem; border-radius: 99px; line-height: 1.2;
    font-size: .75rem; font-weight: 800; color: #FDE68A; background: rgba(26,14,46,.88); border: 2px solid #F59E0B; pointer-events: none; white-space: nowrap;
}
.nl-circ__neu {
    position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: 0; border: 0; background: none; font: inherit; line-height: 1.1; cursor: default; animation: nlFade .3s ease;
}
.nl-circ__neu .nl-circ__ico {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
    background: rgba(26,14,46,.85); border: 3px solid var(--c); box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.nl-circ__neu.is-mal .nl-circ__ico { border-color: var(--repasar); box-shadow: 0 0 0 4px rgba(224,82,74,.35); }
.nl-circ__neu .nl-ico { width: 40px; height: 40px; object-fit: contain; }
.nl-circ__nom { font-size: .7rem; font-weight: 800; color: #fff; background: rgba(26,14,46,.85); padding: .1rem .45rem; border-radius: 99px; white-space: nowrap; }
.nl-circ__neu.is-tocable { cursor: pointer; }
.nl-circ__neu.is-tocable:hover .nl-circ__ico { transform: scale(1.08); }
.nl-circ__neu.is-elegida .nl-circ__ico { box-shadow: 0 0 0 5px rgba(252,211,77,.5); }
.nl-circ__num {
    position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
    font-size: .72rem; font-weight: 800; color: #2E1065; background: #FCD34D;
}
.nl-circ__piezas { display: flex; flex-direction: column; gap: .45rem; margin: .5rem 0; }
.nl-circ__pieza {
    display: flex; align-items: center; gap: .6rem; padding: .35rem .7rem .35rem .35rem; border-radius: 12px; cursor: pointer; text-align: left;
    font: inherit; color: var(--gray-100); background: rgba(139,92,246,.12); border: 2px solid transparent;
}
.nl-circ__pieza .nl-circ__ico { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: rgba(26,14,46,.7); border: 2px solid var(--c); }
.nl-circ__pieza .nl-ico { width: 34px; height: 34px; object-fit: contain; }
.nl-circ__pieza strong { display: block; font-size: .88rem; }
.nl-circ__pieza small { display: block; font-size: .75rem; color: var(--gray-400); }
.nl-circ__pieza.is-sel { border-color: #F59E0B; background: rgba(245,158,11,.14); }
.nl-circ__pieza.is-ok { border-color: rgba(134,239,172,.5); }
.nl-circ__pieza.is-ok strong { color: #86EFAC; }
.nl-circ__seq { font-size: .85rem; line-height: 1.6; color: var(--gray-200); }
.nl-circ__seq span { font-weight: 800; color: var(--c); }
@media (max-width: 900px) {
    .nl-circ__neu .nl-circ__ico { width: 36px; height: 36px; }
    .nl-circ__neu .nl-ico { width: 30px; height: 30px; }
    .nl-circ__nom { font-size: .62rem; }
}
@media (max-width: 900px) { .nl-circ__lienzo.is-armado .nl-circ__etq b { display: none; } }
@media (max-width: 600px) {
    .nl-tip__cuadro.is-grande th, .nl-tip__cuadro.is-grande td { hyphens: auto; overflow-wrap: break-word; padding-left: .2rem; padding-right: .2rem; }
    .nl-tip__cuadro.is-grande { font-size: .64rem; border-spacing: 2px; }
    .nl-tip__cuadro.is-grande thead th:first-child { width: 18%; }
    .nl-tip__cuadro.is-grande tbody th { overflow-wrap: normal; hyphens: manual; }
}

/* Circuito sobre la captura encajada (js/circuito.js): esquema, rutas, cortes y secciones A · B · C */
.nl-circ__lienzo .nl-circ__esquema { pointer-events: none; }
.nl-circ__svg.is-tenue { opacity: .45; }
.nl-circ__fin.is-entra, .nl-circ__fin.is-sale { transform: translate(0, -50%); font-size: .7rem; }
.nl-circ__corte {
    position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    font-size: 1rem; color: #fff; background: #DC2626; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); pointer-events: none; animation: nlFade .3s ease;
}
.nl-circ__corte b { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; border-radius: 50%; font-size: .68rem; line-height: 18px; text-align: center; color: #1A0E2E; background: #FCD34D; }
.nl-circ__corte.is-mal { background: rgba(127,29,29,.75); opacity: .75; }
.nl-circ__sub { font-size: .75rem; font-weight: 600; color: var(--gray-400); }
.nl-circ__estimulo { margin: .2rem 0 .5rem; padding: .45rem .6rem; border-radius: 8px; font-size: .85rem; line-height: 1.4; color: #FDE68A; background: rgba(245,158,11,.1); border-left: 3px solid #F59E0B; }
.nl-circ__mini { margin-bottom: .5rem; }
#nl-circ-pasos { margin-bottom: .6rem; }
#nl-circ-pasos li { padding: 0; }
#nl-circ-pasos li::before { content: none; }
#nl-circ-pasos button { width: 100%; padding: .35rem .2rem; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: 6px; }
#nl-circ-pasos button[disabled] { cursor: default; }
#nl-circ-pasos li.is-viendo { outline: 2px solid #FCD34D; outline-offset: 1px; }

/* Rompecabezas (js/rompecabezas.js) */
.nl-rompe__tablero { background: #fff; border-radius: 8px; }
.nl-rompe__tablero > img:first-child { border-radius: 8px; }
.nl-rompe__puesta { position: absolute; max-width: none; max-height: none; pointer-events: none; animation: nlFade .35s ease; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.nl-rompe__marca {
    position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 800; color: #fff; background: #DC2626; border: 2px solid #fff; pointer-events: none; animation: nlFade .3s ease;
}
.nl-rompe__bandeja { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .45rem; margin: .5rem 0; }
.nl-rompe__pieza {
    display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .45rem; border-radius: 10px; cursor: grab; touch-action: none;
    font: inherit; color: var(--gray-100); background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.12);
}
.nl-rompe__pieza strong { font-size: .8rem; line-height: 1.2; text-align: center; }
.nl-rompe__mini { width: 100%; height: 64px; display: grid; place-items: center; background: #fff; border-radius: 6px; }
.nl-rompe__mini img { max-width: 92%; max-height: 58px; object-fit: contain; }
.nl-rompe__bandeja.is-grande { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.nl-rompe__bandeja.is-grande .nl-rompe__mini { height: 120px; }
.nl-rompe__bandeja.is-grande .nl-rompe__mini img { max-height: 112px; }
.nl-rompe__pieza.is-sel { border-color: #F59E0B; background: rgba(245,158,11,.14); }
.nl-rompe__pieza.is-ok { opacity: .55; cursor: default; border-color: rgba(134,239,172,.5); }
.nl-rompe__pieza.is-ok strong { color: #86EFAC; }
.nl-rompe__fantasma { position: fixed; z-index: 1000; transform: translate(-50%, -50%); pointer-events: none; opacity: .85; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.nl-rompe__marca.is-pendiente { background: #F59E0B; animation: nlPulso 1.2s ease-in-out infinite; }
@keyframes nlPulso { 50% { box-shadow: 0 0 0 8px rgba(245,158,11,.25); } }

/* Circuito por capas sobre un esquema fijo (js/circuito.js con `fondo`) */
.nl-circ__lienzo--fijo { background: #fff; border-radius: 8px; }
.nl-circ__lienzo--fijo > img { border-radius: 8px; }
.nl-circ__capa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.nl-neu__halo { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.nl-neu__ax { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.nl-neu__ax.is-fino { stroke-width: 3; }
.nl-neu__halo.is-fino { stroke-width: 7; }
.nl-neu.is-nueva .nl-neu__ax { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nlDibujo 1.4s ease-out forwards; }
.nl-neu.is-nueva .nl-neu__halo, .nl-neu.is-nueva .nl-neu__boton { opacity: 0; animation: nlFadeIn .4s ease 1.1s forwards; }
.nl-neu.is-nueva .nl-neu__soma { animation: nlFade .4s ease; transform-box: fill-box; transform-origin: center; }
@keyframes nlDibujo { to { stroke-dashoffset: 0; } }
@keyframes nlFadeIn { to { opacity: .85; } }
.nl-neu.is-inhibida .nl-neu__axones { opacity: .4; }
.nl-neu.is-inhibida .nl-neu__ax { stroke-dasharray: 10 8; }
.nl-neu__aura { fill: transparent; }
.nl-neu__soma.is-tocable { pointer-events: auto; cursor: pointer; }
.nl-neu__soma.is-tocable .nl-neu__aura { fill: rgba(252,211,77,.18); stroke: #F59E0B; stroke-width: 3; stroke-dasharray: 6 5; }
.nl-neu__soma.is-tocable:hover .nl-neu__aura { fill: rgba(252,211,77,.35); }
.nl-neu__soma.is-elegida .nl-neu__aura { fill: rgba(252,211,77,.5); stroke-dasharray: none; }
.nl-neu__num circle { fill: #FCD34D; stroke: #fff; stroke-width: 3; }
.nl-neu__num text { font: 800 18px Arial, sans-serif; text-anchor: middle; fill: #2E1065; }
.nl-neu__nom, .nl-neu__inh { font: 800 20px Arial, sans-serif; fill: #1A0E2E; stroke: #fff; stroke-width: 5px; paint-order: stroke; }
.nl-neu__inh { fill: #6D28D9; }
.nl-circ__capa .nl-circ__halo { stroke-width: 14px; }
.nl-circ__impulso.is-inh { fill: #EDE9FE; filter: drop-shadow(0 0 3px #A78BFA) drop-shadow(0 0 6px #7C3AED); }
.nl-circ__chip {
    position: absolute; transform: translate(-6px, -50%); display: flex; align-items: center; gap: .3rem; line-height: 1.2;
    padding: .12rem .5rem .12rem .3rem; border-radius: 99px; font-size: .75rem; font-weight: 800; color: #fff; white-space: nowrap;
    background: rgba(26,14,46,.85); border: 2px solid #F59E0B; pointer-events: none; animation: nlFade .3s ease;
}
.nl-circ__chip i { width: 8px; height: 8px; border-radius: 50%; background: #F59E0B; flex: none; }
.nl-circ__lupa, .nl-circ__sitio {
    position: absolute; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    padding: 0; font: 800 1.05rem/1 Arial, sans-serif; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.35); animation: nlFade .3s ease;
}
.nl-circ__lupa { background: #fff; border: 3px solid #1A0E2E; animation: nlPulso 1.6s ease-in-out infinite; }
.nl-circ__lupa.is-ok { border-color: #16A34A; animation: none; }
.nl-circ__lupa.is-abierta { outline: 3px solid #F59E0B; outline-offset: 2px; }
.nl-circ__sitio { color: #FCD34D; background: #1A0E2E; border: 3px solid #FCD34D; }
.nl-circ__sitio.is-activo { animation: nlPulso 1.2s ease-in-out infinite; }
.nl-circ__sitio.is-ok { border-color: #4ADE80; }
.nl-circ__sitio b { position: absolute; top: -10px; right: -16px; padding: .1rem .3rem; border-radius: 99px; font-size: .62rem; color: #1A0E2E; background: #4ADE80; }
.nl-circ__piezas.is-etiquetas { flex-direction: row; flex-wrap: wrap; }
.nl-circ__piezas.is-etiquetas .nl-circ__pieza { padding: .35rem .7rem; }
.nl-circ__pieza[disabled] { cursor: default; }
.nl-circ__via { margin-top: .6rem; }
.nl-circ__lupas { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; margin: .5rem 0; }
.nl-circ__lupa-btn {
    display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .45rem; border-radius: 10px; cursor: pointer;
    font: inherit; color: var(--gray-100); background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.12);
}
.nl-circ__lupa-btn img { width: 72%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid #fff; }
.nl-circ__lupa-btn span { font-size: .78rem; font-weight: 700; line-height: 1.25; text-align: center; }
.nl-circ__lupa-btn.is-ok { border-color: rgba(134,239,172,.5); }
.nl-circ__lupa-btn.is-ok span { color: #86EFAC; }
.nl-circ__zoom { margin: .3rem auto .6rem; text-align: center; }
.nl-circ__zoom img { width: min(230px, 70%); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.nl-circ__zoom figcaption { margin-top: .3rem; font-size: .82rem; font-weight: 700; }
.nl-circ__volver { margin-top: .6rem; }
.nl-circ__casos { display: flex; flex-direction: column; gap: .45rem; margin: .5rem 0; }
.nl-circ__caso {
    display: block; width: 100%; text-align: left; font: inherit; color: var(--gray-100); padding: .5rem .7rem; border-radius: 10px;
    background: rgba(139,92,246,.10); border: 2px solid transparent; cursor: pointer;
}
.nl-circ__caso p { margin: 0; font-size: .85rem; line-height: 1.4; }
.nl-circ__caso .nl-circ__caso-tit { font-weight: 800; margin-bottom: .2rem; }
.nl-circ__caso.is-sel { border-color: #F59E0B; background: rgba(245,158,11,.14); }
div.nl-circ__caso.is-ok { cursor: default; border-color: rgba(134,239,172,.45); }
div.nl-circ__caso.is-ok .nl-circ__caso-tit { color: #86EFAC; }
.nl-circ__sitios { display: flex; gap: .5rem; margin: .3rem 0 .5rem; }
.nl-circ__sitio-btn { width: 44px; height: 44px; border-radius: 50%; font: 800 1.1rem/1 Arial, sans-serif; color: #FCD34D; background: #1A0E2E; border: 3px solid #FCD34D; cursor: pointer; }
@media (max-width: 900px) {
    .nl-circ__lupa, .nl-circ__sitio { width: 32px; height: 32px; font-size: .9rem; }
    .nl-circ__chip { font-size: .62rem; padding: .05rem .35rem .05rem .2rem; }
}
.nl-circ__capa .nl-circ__ruta { stroke-width: 3px; opacity: .6; }
.nl-circ__toque { flex-direction: row; flex-wrap: wrap; }
.nl-circ__toque .nl-circ__pieza { flex: 1 1 45%; padding: .25rem .5rem .25rem .25rem; }
.nl-circ__toque .nl-circ__pieza strong { font-size: .8rem; }
.nl-circ__o { margin: .6rem 0 0; }

/* Etiquetas que se tocan en orden (nivel «circuito» con etiquetas y vías) */
.nl-circ__chip.is-tocable { pointer-events: auto; cursor: pointer; font-family: inherit; animation: nlPulso 1.6s ease-in-out infinite; }
.nl-circ__chip.is-tocable:hover { background: #3B1F66; }
.nl-circ__chip.is-elegida { border-color: #22C55E; background: #14532D; animation: none; }
.nl-circ__chip.is-tocable i { width: auto; min-width: 8px; height: auto; min-height: 8px; padding: 0 .2rem; font-style: normal; font-size: .7rem; line-height: 1.1; color: #1A0E2E; border-radius: 99px; }
.nl-circ__chip.is-elegida i { background: #86EFAC; }
/* Funciones (vías de una etiqueta): la función se lee grande y se toca quién la cumple */
.nl-circ__funcion { margin: .2rem 0 .5rem; padding: .7rem .85rem; border-radius: 12px; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.45); color: #FEF3C7; font-weight: 700; font-size: 1rem; line-height: 1.4; }
.nl-circ__hechas { margin-top: .7rem; }
.nl-circ__hechas summary { cursor: pointer; font-size: .8rem; color: var(--gray-300); }
@media (max-width: 900px) {
    .nl-circ__lupa { width: 26px; height: 26px; font-size: .75rem; border-width: 2px; }
}

/* Práctica «elegir» tocando la célula en la imagen (data-img) */
.nl-mprac__lienzo { position: relative; width: fit-content; max-width: 100%; margin: .6rem auto 0; line-height: 0; }
.nl-mprac__lienzo img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(var(--alto, 640px) * .62); border-radius: 12px; background: #fff; user-select: none; }
.nl-mprac__lienzo.is-tocable { cursor: crosshair; }
.nl-mprac__marca { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: #DC2626; color: #fff; font: 700 14px/26px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 3px #fff; pointer-events: none; }
.nl-mprac__marca.is-ok { background: #16A34A; }
.nl-mprac__marca em { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 12px/1.2 system-ui, sans-serif; font-style: normal; background: rgba(26,14,46,.85); color: #fff; padding: 2px 6px; border-radius: 6px; }
.nl-mprac__marca em:empty { display: none; }
.nl-circ__mascara { stroke: #fff; stroke-width: .3; stroke-dasharray: 1 .8; }
.nl-mprac__marca.is-izq em { left: auto; right: 30px; }
@media (max-width: 900px) { .nl-tip__cuadro thead th { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } }

/* Caja blanca de las tarjetas (mesa-practica): misma proporción que «¿Quién es quién?» (682 × 506; celular 342 × 392).
   Es una altura mínima: las tarjetas ocupan lo que deja la frase y, si el contenido no cabe (p. ej. una imagen), la caja crece */
#nl-mprac .nl-tip__vista { container-type: inline-size; }
#nl-mprac .nl-tip__frase-caja.is-compacta { min-height: calc(100cqw * 506 / 682); }
#nl-mprac .nl-tip__frase-caja.is-compacta > * { flex-shrink: 0; }
#nl-mprac .nl-tip__frase-caja.is-compacta .nl-cartas { flex: 1 0 auto; grid-auto-rows: minmax(104px, 1fr); }
#nl-mprac .nl-tip__frase-caja.is-compacta .nl-cartas .nl-tip__carta { aspect-ratio: auto; height: 100%; }
#nl-mprac .nl-tip__frase-caja.is-compacta .nl-tip__cara .nl-ico { width: auto; max-width: 62%; max-height: calc(100% - 2.8em); min-height: 0; }
#nl-mprac .nl-tip__frase-caja.is-compacta .nl-mprac__fig img { max-height: 210px; }
#nl-mprac .nl-tip__frase-caja.is-compacta .nl-cartas[data-n="3"] .nl-tip__cara .nl-ico { max-width: 92%; border-radius: 10px; }
@media (max-width: 900px) {
    #nl-mprac .nl-tip__frase-caja.is-compacta { min-height: calc(100cqw * 392 / 342); }
    #nl-mprac .nl-tip__frase-caja.is-compacta .nl-cartas { grid-auto-rows: minmax(96px, 1fr); }
    #nl-mprac .nl-tip__frase-caja.is-compacta .nl-cartas[data-n="8"] { grid-auto-rows: minmax(60px, 1fr); }
    #nl-mprac .nl-tip__frase-caja.is-compacta .nl-cartas[data-n="8"] .nl-tip__cara .nl-ico { max-width: 48px; max-height: 48px; }
    /* 3 tarjetas en el celular: una bajo otra, dibujo a la izquierda */
    #nl-mprac .nl-tip__frase-caja.is-compacta .nl-cartas[data-n="3"] { grid-template-columns: 1fr; grid-auto-rows: minmax(76px, 1fr); }
    #nl-mprac .nl-tip__frase-caja.is-compacta .nl-cartas[data-n="3"] .nl-tip__cara { flex-direction: row; justify-content: flex-start; gap: .7rem; padding: .35rem .6rem; }
    #nl-mprac .nl-tip__frase-caja.is-compacta .nl-cartas[data-n="3"] .nl-tip__cara .nl-ico { max-width: 40%; max-height: 100%; }
    #nl-mprac .nl-tip__frase-caja.is-compacta .nl-cartas[data-n="3"] .nl-tip__carta-nom { font-size: .95rem; text-align: left; }
}

/* ============================================================
   Escenas (js/escenas.js): predice → mira, o dónde → célula → por qué
   ============================================================ */
.nl-esc__vista { flex-direction: column; gap: .5rem; }
.nl-esc__lienzo { touch-action: manipulation; }
.nl-esc__lienzo.is-tocable { cursor: crosshair; }
.nl-esc__lienzo.is-tocable > img { box-shadow: 0 0 0 3px #F59E0B; }
.nl-esc__capa .nl-esc__ef { opacity: 0; animation: nlFade .6s ease forwards; }
.nl-esc__pulso { animation: nlEscPulso 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.nl-esc__crece { animation: nlEscCrece 2.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes nlEscPulso { 50% { opacity: .45; } }
@keyframes nlEscCrece { from { transform: scale(.94); } to { transform: scale(1.06); } }
.nl-esc__zona-ok { animation: nlFade .4s ease; }
.nl-esc__rot {
    position: absolute; transform: translate(-6px, -50%); display: flex; align-items: center; gap: .3rem; line-height: 1.2;
    padding: .14rem .55rem .14rem .3rem; border-radius: 99px; font-size: .76rem; font-weight: 800; color: #fff; white-space: nowrap;
    background: rgba(26,14,46,.88); border: 2px solid #F59E0B; pointer-events: none; opacity: 0; animation: nlFade .5s ease forwards;
}
.nl-esc__rot i { width: 8px; height: 8px; border-radius: 50%; background: #F59E0B; flex: none; }
.nl-esc__rot.is-izq { transform: translate(calc(-100% + 6px), -50%); flex-direction: row-reverse; padding: .14rem .3rem .14rem .55rem; }
.nl-esc__rot.is-base { font-size: .68rem; font-weight: 700; border-color: rgba(196,181,253,.8); background: rgba(26,14,46,.72); }
.nl-esc__rot.is-base i { background: #C4B5FD; }
.nl-esc__barra { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; width: 100%; justify-content: center; }
.nl-esc__barra .nl-lam__ayuda-vista { flex: 1 1 100%; text-align: center; }
.nl-esc__ley { display: flex; flex-wrap: wrap; gap: .25rem .7rem; font-size: .74rem; color: var(--gray-300); }
.nl-esc__ley span { display: inline-flex; align-items: center; gap: .25rem; }
.nl-esc__ley svg { width: 16px; height: 16px; }
.nl-esc__botones { display: inline-flex; gap: .4rem; }
.nl-esc__btn { font: 700 .74rem/1 inherit; padding: .35rem .7rem; border-radius: 99px; border: 1px solid rgba(196,181,253,.5); background: rgba(139,92,246,.18); color: #EDE9FE; cursor: pointer; }
.nl-esc__btn:hover { background: rgba(139,92,246,.35); }
.nl-esc__btn[aria-pressed="false"] { opacity: .65; }
.nl-esc__situacion { margin: .5rem 0 .6rem; padding: .65rem .8rem; border-radius: 10px; background: rgba(255,255,255,.06); border-left: 3px solid #A78BFA; font-size: .88rem; line-height: 1.5; color: var(--gray-100); }
.nl-esc__poe { margin: 0 0 .3rem; font-size: .8rem; color: #FCD34D; }
.nl-esc__pred { margin: .4rem 0; font-weight: 800; font-size: .88rem; }
.nl-esc__pred.is-ok { color: #86EFAC; }
.nl-esc__pred.is-mal { color: var(--repasar-claro); }
.nl-esc__cartas { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: .4rem; }
.nl-esc__carta { display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; border-radius: 12px; border: 2px solid #DDD6FE; background: #F5F3FF; color: #2E1065; font: 800 .82rem/1.2 inherit; cursor: pointer; text-align: left; }
.nl-esc__carta:hover:not([disabled]) { border-color: #F59E0B; }
.nl-esc__carta .nl-ico { width: 52px; height: 52px; flex: none; object-fit: contain; border-radius: 8px; background: #fff; }
.nl-esc__carta.is-mal { opacity: .45; border-color: var(--repasar); background: #FFF1F0; cursor: default; }
.nl-esc__cartas.is-sacude { animation: nlLabMal 320ms ease; }
.nl-esc__mini { margin: .4rem 0; }
.nl-esc__cuadro-caja { width: 100%; max-width: 900px; padding: 1.2rem 1.4rem; border-radius: var(--radius, 16px); background: #fff; color: #1A0E2E; }
.nl-esc__cuadro td, .nl-esc__cuadro th { hyphens: auto; overflow-wrap: anywhere; }
#nl-esc-pasos { margin-bottom: .6rem; flex-wrap: wrap; }
#nl-esc-pasos li { padding: 0; flex: 1 1 18%; }
#nl-esc-pasos li::before { content: none; }
#nl-esc-pasos li.is-repasar { color: var(--repasar-claro); background: rgba(224,82,74,.15); }
#nl-esc-pasos button { width: 100%; padding: .35rem .2rem; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: 6px; }
#nl-esc-pasos button[disabled] { cursor: default; }
#nl-esc-pasos li.is-viendo { outline: 2px solid #FCD34D; outline-offset: 1px; }
.nl-circ__mini li.is-repasar { color: var(--repasar-claro); background: rgba(224,82,74,.15); }
.nl-mesa--esc .nl-mprac__mini img { object-fit: cover; }
@media (max-width: 900px) {
    .nl-esc__rot { font-size: .6rem; padding: .05rem .35rem .05rem .2rem; }
    .nl-esc__rot.is-base { font-size: .56rem; }
    .nl-esc__cartas { grid-template-columns: 1fr 1fr; }
    .nl-esc__carta .nl-ico { width: 40px; height: 40px; }
    .nl-esc__cuadro-caja { padding: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .nl-esc__pulso, .nl-esc__crece { animation: none; } }
.nl-esc__lienzo > img { max-height: calc(var(--alto) - 9.5rem); }
@media (max-width: 900px) { .nl-esc__lienzo > img { max-height: 62vh; } }

/* Casos con imagen real (escenas «casos» con foto): ficha del caso + imagen; SNC o SNP en el panel */
.nl-esc__vista:has(.nl-esc__caso) { justify-content: flex-start; }
.nl-esc__caso { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: .9rem; width: 100%; padding: .8rem; align-items: start; animation: nlFade .4s ease; }
.nl-esc__ficha { padding: .85rem 1rem; border-radius: 14px; background: #fff; color: #1A0E2E; font-size: .88rem; line-height: 1.5; }
.nl-esc__enf { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 800; line-height: 1.25; color: #5B21B6; }
.nl-esc__ok { padding: .15rem .55rem; border-radius: 99px; background: #DCFCE7; color: #166534; font-size: .72rem; font-weight: 800; }
.nl-esc__pac { margin: 0 0 .55rem; font-size: .88rem; line-height: 1.5; color: #2E1A47; }
.nl-esc__pac strong { color: #1A0E2E; }
.nl-esc__sobre { padding: .55rem .75rem; border-radius: 10px; background: #F5F3FF; border-left: 4px solid #8B5CF6; }
.nl-esc__sobre-etq { display: block; margin-bottom: .15rem; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #6D28D9; }
.nl-esc__sobre p { margin: 0; font-size: .84rem; line-height: 1.45; color: #2E1A47; }
.nl-esc__col { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.nl-esc__sitios { padding: .6rem .7rem .7rem; border-radius: 14px; background: rgba(255,255,255,.06); border: 2px solid transparent; }
.nl-esc__sitios.is-activo { border-color: #F59E0B; background: rgba(245,158,11,.08); }
.nl-esc__sitios-etq { margin: 0 0 .45rem; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #FCD34D; }
.nl-esc__mcartas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.nl-esc__mcartas.is-sacude { animation: nlLabMal 320ms ease; }
.nl-esc__mcarta { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .35rem .3rem .45rem; border-radius: 12px; border: 2px solid #DDD6FE; background: #fff; color: #2E1065; font: 800 .74rem/1.15 inherit; text-align: center; cursor: pointer; }
.nl-esc__mcarta .nl-ico { width: 100%; max-width: 92px; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 8px; }
.nl-esc__mcarta:hover:not([disabled]) { border-color: #F59E0B; transform: translateY(-2px); }
.nl-esc__mcarta[disabled] { cursor: default; }
.nl-esc__mcarta.is-mal { opacity: .4; border-color: var(--repasar); background: #FFF1F0; }
.nl-esc__mcarta.is-ok { border-color: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.35); }
.nl-esc__mcarta.is-off { opacity: .35; }
@media (max-width: 900px) { .nl-esc__mcartas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nl-esc__foto { display: flex; flex-direction: column; align-items: center; gap: .45rem; margin: 0; min-width: 0; }
.nl-esc__foto-btn { position: relative; max-width: 100%; padding: 0; border: 0; background: none; line-height: 0; cursor: zoom-in; }
.nl-esc__foto-btn img { display: block; max-width: 100%; max-height: calc(var(--alto) - 10.5rem); border-radius: 10px; background: #000; }
.nl-esc__foto-btn span { position: absolute; right: .4rem; bottom: .4rem; padding: .2rem .55rem; border-radius: 99px; background: rgba(26,14,46,.82); color: #fff; font: 700 .72rem/1.2 system-ui, sans-serif; }
.nl-esc__foto figcaption { font-size: .78rem; line-height: 1.4; color: var(--gray-100); text-align: center; }
.nl-esc__foto figcaption small { display: block; margin-top: .2rem; font-size: .68rem; color: var(--gray-500); }
.nl-esc__leer { margin: .3rem 0 .5rem; font-size: .8rem; color: var(--violet-light); }
.nl-esc__sis { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .4rem; }
.nl-esc__sis-btn { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .7rem; border: 2px solid; border-radius: 12px; font: inherit; text-align: left; cursor: pointer; }
.nl-esc__sis-btn strong { font-size: 1.15rem; font-weight: 800; }
.nl-esc__sis-btn small { font-size: .72rem; line-height: 1.3; }
.nl-esc__sis-btn.is-snc { border-color: #A78BFA; background: #F5F3FF; color: #4C1D95; }
.nl-esc__sis-btn.is-snp { border-color: #FBBF24; background: #FFFBEB; color: #78350F; }
.nl-esc__sis-btn:hover:not([disabled]) { box-shadow: 0 0 0 3px #F59E0B; }
.nl-esc__sis-btn.is-mal { opacity: .45; border-color: var(--repasar); background: #FFF1F0; cursor: default; }
.nl-esc__sis.is-sacude { animation: nlLabMal 320ms ease; }
@media (max-width: 900px) {
    .nl-esc__caso { grid-template-columns: 1fr; padding: .5rem; }
    .nl-esc__foto-btn img { max-height: 46vh; }
}

/* Secuencia por etapas (escenas «etapas»): la etapa se destapa; SNP/SNC en el panel; 3 respuestas */
.nl-esc__destapa { animation: nlEscDestapa 1s ease forwards; }
@keyframes nlEscDestapa { from { opacity: 1; } to { opacity: 0; } }
.nl-esc__narr p { margin: .45rem 0; padding: .55rem .75rem; border-radius: 10px; border-left: 4px solid; background: rgba(255,255,255,.05); font-size: .87rem; line-height: 1.45; color: var(--gray-100); }
.nl-esc__narr b { display: block; margin-bottom: .15rem; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.nl-esc__narr .is-snp { border-color: #FBBF24; }
.nl-esc__narr .is-snp b { color: #FCD34D; }
.nl-esc__narr .is-snc { border-color: #A78BFA; }
.nl-esc__narr .is-snc b { color: #C4B5FD; }
.nl-esc__sis[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.nl-esc__sis[data-n="3"] .nl-esc__sis-btn { align-items: center; text-align: center; padding: .7rem .4rem; }
.nl-esc__sis[data-n="3"] .nl-esc__sis-btn strong { font-size: 1rem; }
.nl-esc__sis-btn.is-ambos { border-color: #F59E0B; background: linear-gradient(90deg, #FFFBEB, #F5F3FF); color: #3B1D6E; }
@media (prefers-reduced-motion: reduce) { .nl-esc__destapa { animation-duration: .01s; } }
/* Etapa en grande: la columna recortada por fila, SNP | SNC, y la miniatura de la secuencia */
.nl-esc__etapa { display: flex; justify-content: center; align-items: flex-start; gap: .9rem; width: 100%; padding: .5rem .6rem 0; }
.nl-esc__rec { margin: 0; width: min(46%, calc((var(--alto) - 11rem) * var(--rw, .7))); animation: nlEscEntra .7s ease; }
.nl-esc__rec figcaption { margin-bottom: .3rem; font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.nl-esc__rec.is-snp figcaption { color: #FCD34D; }
.nl-esc__rec.is-snc figcaption { color: #C4B5FD; }
.nl-esc__rec-lienzo { position: relative; width: 100%; border-radius: 12px; background: #fff; }
.nl-esc__rec-lienzo svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.nl-esc__rec.is-snp .nl-esc__rec-lienzo { box-shadow: 0 0 0 3px #FBBF24; }
.nl-esc__rec.is-snc .nl-esc__rec-lienzo { box-shadow: 0 0 0 3px #A78BFA; }
@keyframes nlEscEntra { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.nl-esc__mapa { flex: none; padding: 0; border: 1px solid var(--gray-700); border-radius: 8px; background: #fff; line-height: 0; cursor: zoom-in; }
.nl-esc__mapa svg { display: block; width: auto; height: 64px; aspect-ratio: 1200 / 984; border-radius: 8px; }
.nl-esc__barra:has(.nl-esc__mapa) .nl-lam__ayuda-vista { flex: 0 1 auto; text-align: left; }
.nl-esc__mapa-txt { font-size: .72rem; color: var(--gray-500); }
@media (max-width: 900px) {
    .nl-esc__etapa { gap: .5rem; padding: .3rem .45rem 0; }
    .nl-esc__rec { width: calc(50% - .25rem); min-width: 0; }
    .nl-esc__rec figcaption { font-size: .62rem; }
    .nl-esc__mapa svg { height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .nl-esc__rec { animation: none; } }
.nl-esc__puntos { display: flex; gap: 4px; margin: .5rem 0 .2rem; padding: 0; list-style: none; }
.nl-esc__puntos li { flex: 1; height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); }
.nl-esc__puntos li.is-ok { background: #22C55E; }
.nl-esc__puntos li.is-repasar { background: var(--repasar); }
.nl-esc__puntos li.is-actual { background: #F59E0B; }
.nl-esc__prog { margin: 0 0 .3rem; font-size: .74rem; font-weight: 700; color: var(--gray-300); }
.nl-esc__etapa.is-quieta .nl-esc__rec { animation: none; }

/* --- Escenas con simulador (sim), medidas («numero») y trazas --- */
.nl-esc__simbarra { margin-bottom: .4rem; }
.nl-esc__simlink { font-size: .78rem; font-weight: 700; color: var(--violet-light); text-decoration: none; }
.nl-esc__simlink:hover { text-decoration: underline; }
.nl-esc__sim { height: calc(var(--alto) - 2.9rem); background: #fff; }
.nl-esc__simaviso { margin: .2rem 0 .4rem; font-size: .8rem; color: #FCD34D; }
.nl-esc__lista { margin: .2rem 0 .5rem; padding-left: 1.2rem; font-size: .86rem; line-height: 1.5; color: var(--gray-100); }
.nl-esc__lista li { margin-bottom: .25rem; }
.nl-esc__num { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.nl-esc__num input { width: 7rem; padding: .45rem .6rem; border-radius: 10px; border: 2px solid #C4B5FD; background: #fff; color: #1A0E2E; font: 800 1.05rem/1 inherit; text-align: right; }
.nl-esc__num input:focus { outline: none; border-color: #F59E0B; }
.nl-esc__num span { font-weight: 800; color: var(--gray-100); }
.nl-esc__num.is-sacude { animation: nlLabMal 320ms ease; }
.nl-esc__traza > * { stroke-dasharray: 1; stroke-dashoffset: 1; animation-name: nlEscTraza; animation-timing-function: linear; animation-fill-mode: forwards; animation-delay: inherit; animation-duration: inherit; }
@keyframes nlEscTraza { to { stroke-dashoffset: 0; } }
@media (max-width: 900px) { .nl-esc__sim { height: 70vh; } }
@media (prefers-reduced-motion: reduce) { .nl-esc__traza > * { animation: none; stroke-dashoffset: 0; } }

/* --- Simulador propio de membrana (js/sim-membrana.js) --- */
.nl-msim { width: 100%; }
.nl-msim[hidden] { display: none; }
.nl-msim__caja { display: flex; gap: .6rem; align-items: flex-start; width: 100%; }
.nl-msim__herr { flex: 0 0 196px; display: flex; flex-direction: column; gap: .4rem; max-height: calc(var(--alto) - 1rem); overflow-y: auto; scrollbar-width: thin; }
.nl-msim__lienzo { flex: 1 1 auto; min-width: 0; display: block; width: 100%; height: auto; max-height: calc(var(--alto) - 1rem); object-fit: contain; aspect-ratio: 1200 / 720; border-radius: 12px; background: #fff; cursor: crosshair; }
.nl-msim__etq { margin: .25rem 0 0; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); }
.nl-msim__paleta { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.nl-msim__ion { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .45rem .2rem; border-radius: 12px; border: 2px solid transparent; background: rgba(255,255,255,.06); color: var(--gray-100); font: 700 .72rem/1 inherit; cursor: pointer; }
.nl-msim__ion i { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-style: normal; font-weight: 800; font-size: .85rem; color: #fff; }
.nl-msim__ion.is-na i { background: #22C55E; box-shadow: 0 0 0 3px #166534 inset; }
.nl-msim__ion.is-k i { background: #3B82F6; box-shadow: 0 0 0 3px #1E3A8A inset; }
.nl-msim__ion[aria-pressed="true"].is-na { border-color: #4ADE80; background: rgba(34,197,94,.18); }
.nl-msim__ion[aria-pressed="true"].is-k { border-color: #60A5FA; background: rgba(59,130,246,.2); }
.nl-msim__ayuda { margin: 0; font-size: .72rem; line-height: 1.35; color: var(--gray-300); }
.nl-msim__fila { display: flex; gap: .3rem; flex-wrap: wrap; }
.nl-msim__chico { font: 700 .72rem/1 inherit; padding: .35rem .6rem; border-radius: 99px; border: 1px solid rgba(196,181,253,.45); background: rgba(139,92,246,.16); color: #EDE9FE; cursor: pointer; }
.nl-msim__chico.is-reposo { border-color: #FCD34D; color: #FEF3C7; background: rgba(245,158,11,.2); }
.nl-msim__card { display: flex; gap: .45rem; align-items: center; padding: .4rem .45rem; border-radius: 12px; background: #fff; color: #1A0E2E; border-left: 5px solid #A78BFA; }
.nl-msim__card.is-na { border-left-color: #22C55E; }
.nl-msim__card.is-k { border-left-color: #3B82F6; }
.nl-msim__ico { flex: 0 0 52px; }
.nl-msim__ico svg { display: block; width: 52px; height: auto; }
.nl-msim__cuerpo { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.nl-msim__cuerpo strong { font-size: .76rem; line-height: 1.1; }
.nl-msim__cont { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; }
.nl-msim__cont button { width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 1px solid #C4B5FD; background: #F5F3FF; color: #4C1D95; font: 800 .9rem/1 inherit; cursor: pointer; padding: 0; }
.nl-msim__cont b { min-width: .8rem; text-align: center; }
.nl-msim__sw { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: none; font: 700 .7rem/1.1 inherit; color: #475569; cursor: pointer; text-align: left; }
.nl-msim__sw i { position: relative; flex: none; width: 2rem; height: 1.1rem; border-radius: 99px; background: #CBD5E1; transition: background .2s; }
.nl-msim__sw i::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .8rem; height: .8rem; border-radius: 50%; background: #fff; transition: transform .2s; }
.nl-msim__sw[aria-pressed="true"] i { background: #F59E0B; }
.nl-msim__sw[aria-pressed="true"] i::after { transform: translateX(.9rem); }
.nl-msim__card.is-na .nl-msim__sw[aria-pressed="true"] i { background: #22C55E; }
.nl-msim__card.is-k .nl-msim__sw[aria-pressed="true"] i { background: #3B82F6; }
.nl-msim__card.is-bomba .nl-msim__sw[aria-pressed="true"] i { background: #8B5CF6; }
.nl-msim__sw:disabled { opacity: .45; cursor: default; }
.nl-msim__card.is-estim { border-left-color: #F59E0B; }
.nl-msim__cont button:disabled { opacity: .4; cursor: default; }
.nl-msim__cuerpo--int { flex: 1; }
.nl-msim__card[hidden] { display: none; }
.nl-msim__niveles button[data-int] { font-size: .8rem; }
.nl-msim__niveles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.nl-msim__niveles button { height: 1.9rem; border-radius: 8px; border: 1px solid #FCD34D; background: #FFFBEB; color: #92400E; font: 800 .85rem/1 inherit; cursor: pointer; padding: 0; }
.nl-msim__niveles button[aria-pressed="true"] { background: #F59E0B; border-color: #B45309; color: #1A0E2E; }
.nl-msim__escala { display: flex; justify-content: space-between; font-size: .66rem; color: #64748B; }
.nl-msim__escala i { font-style: normal; }
.nl-msim__estim { padding: .6rem .5rem; border-radius: 12px; border: 0; background: #F59E0B; color: #1A0E2E; font: 800 .9rem/1 inherit; cursor: pointer; box-shadow: 0 3px 0 #B45309; }
.nl-msim__estim:disabled { opacity: .45; cursor: default; box-shadow: none; }
.nl-msim__estim:active { transform: translateY(2px); box-shadow: 0 1px 0 #B45309; }
.nl-msim__card.is-ca { border-left-color: #A855F7; }
.nl-msim__card.is-recap { border-left-color: #10B981; }
.nl-msim__card.is-nt, .nl-msim__card.is-rec { border-left-color: #EC4899; }
.nl-msim__card.is-ca .nl-msim__sw[aria-pressed="true"] i { background: #A855F7; }
.nl-msim__card.is-recap .nl-msim__sw[aria-pressed="true"] i { background: #10B981; }
.nl-msim__opc { display: grid; grid-template-columns: 1fr; gap: 4px; }
.nl-msim__opc--2 { grid-template-columns: 1fr 1fr; }
.nl-msim__opc button { display: flex; align-items: center; gap: .4rem; min-height: 1.9rem; padding: 0 .5rem; border-radius: 8px; border: 1px solid #F9A8D4; background: #FDF2F8; color: #831843; font: 800 .74rem/1 inherit; cursor: pointer; }
.nl-msim__opc button i { flex: none; width: .7rem; height: .7rem; border-radius: 3px; }
.nl-msim__opc button[aria-pressed="true"] { background: #EC4899; border-color: #9D174D; color: #fff; }
.nl-msim__opc button:disabled, .nl-msim__estim:disabled { opacity: .45; cursor: default; }
.nl-msim__der { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.nl-msim__der .nl-msim__lienzo { max-height: calc(var(--alto) - 3.4rem); }
.nl-msim__play { display: flex; align-items: center; gap: .45rem; padding: .25rem .5rem; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--gray-300); font-size: .72rem; }
.nl-msim__play.is-vacia { opacity: .45; }
.nl-msim__play > button { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 0; background: rgba(196,181,253,.16); color: #EDE9FE; font-size: .8rem; line-height: 1; cursor: pointer; padding: 0; }
.nl-msim__play > button:hover { background: rgba(196,181,253,.3); }
.nl-msim__play input[type=range] { flex: 1 1 auto; min-width: 60px; accent-color: #F59E0B; height: 1rem; }
.nl-msim__t { flex: none; min-width: 3.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.nl-msim__vel { flex: none; display: inline-flex; gap: 2px; }
.nl-msim__vel button { padding: .2rem .4rem; border-radius: 99px; border: 0; background: transparent; color: var(--gray-300); font: 700 .7rem/1 inherit; cursor: pointer; }
.nl-msim__vel button[aria-pressed="true"] { background: #F59E0B; color: #1A0E2E; }
@media (max-width: 900px) {
    .nl-msim__der .nl-msim__lienzo { max-height: none; }
    .nl-msim__play { flex-wrap: wrap; border-radius: 14px; }
    .nl-msim__play input[type=range] { order: 5; flex-basis: 100%; }
}
.nl-msim__lienzo--pa { cursor: default; touch-action: pan-y; }
@media (max-width: 900px) {
    .nl-msim__caja { flex-direction: column; }
    .nl-msim__herr { flex: none; width: 100%; max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
    .nl-msim__card { min-width: 0; }
    .nl-msim__ico { flex-basis: 40px; }
    .nl-msim__ico svg { width: 40px; }
    .nl-msim__herr > .nl-msim__etq, .nl-msim__herr > .nl-msim__ayuda, .nl-msim__herr > .nl-msim__paleta { grid-column: 1 / -1; }
    .nl-msim__lienzo { max-height: none; }
}
.nl-esc__checks { list-style: none; margin: .3rem 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.nl-esc__checks li { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: 10px; background: rgba(255,255,255,.06); font-size: .86rem; color: var(--gray-100); transition: background .3s; }
.nl-esc__chk { width: 1.15rem; height: 1.15rem; flex: none; border-radius: 50%; border: 2px solid var(--gray-500); }
.nl-esc__checks li.is-ok { background: rgba(34,197,94,.18); color: #DCFCE7; }
.nl-esc__checks li.is-ok .nl-esc__chk { border-color: #22C55E; background: #22C55E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.5'/%3E%3C/svg%3E") center/80% no-repeat; }
.nl-esc__simq { margin-top: .3rem; padding-top: .5rem; border-top: 1px dashed rgba(196,181,253,.35); transition: opacity .3s; }
.nl-esc__simq.is-bloq { opacity: .4; pointer-events: none; }
.nl-esc__simq.is-bloq::before { content: "🔒 Se habilita cuando completes la lista"; display: block; margin-bottom: .3rem; font-size: .74rem; font-weight: 700; color: #FCD34D; }
.nl-esc__tocado { margin: .2rem 0 .4rem; padding: .45rem .6rem; border-radius: 10px; background: rgba(34,197,94,.15); color: #DCFCE7; font-size: .84rem; }
.nl-esc__lienzo > img.nl-esc__capa-img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; pointer-events: none; box-shadow: none; }
.nl-esc__capa-img.is-nueva { animation: nlEscCapa .7s ease-out both; }
@keyframes nlEscCapa { from { opacity: 0; } to { opacity: 1; } }