/* ============================================================
   NeuroLab — activity.css
   Layout split para actividad.php: stage izq | panel der
   ============================================================ */

.nl-act-header {
    padding: 3rem 0 1.5rem;
}
.nl-act-back {
    font-size: .85rem;
    color: var(--violet-light);
    display: inline-block;
    margin-bottom: 1rem;
}
.nl-act-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}
.nl-act-header h1 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: 0;
}

.nl-act-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2rem;
    padding-bottom: 4rem;
}

/* --- Stage (izquierda) --- */
.nl-act-stage {
    background: var(--navy-mid);
    border: 1px solid var(--gray-700);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 480px;
    display: flex;
    flex-direction: column;
}
.nl-act-tabs {
    display: flex;
    gap: .25rem;
    padding: .75rem 1rem 0;
    border-bottom: 1px solid var(--gray-700);
    flex-wrap: wrap;
}
.nl-act-tab {
    background: transparent;
    border: none;
    color: var(--gray-300);
    padding: .5rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);
}
.nl-act-tab:hover { color: var(--white); background: rgba(255,255,255,.05); }
.nl-act-tab.active {
    color: var(--violet-light);
    background: rgba(139,92,246,.1);
    border-bottom: 2px solid var(--violet);
}

.nl-act-recurso {
    flex: 1;
    position: relative;
    background: #000;
}
.nl-act-recurso-pane {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 480px;
    position: relative;
}
.nl-act-recurso-pane.active { display: block; }
.nl-act-img { width: 100%; height: auto; display: block; }
.nl-act-iframe {
    width: 100%;
    height: 100%;
    min-height: 480px;
    border: none;
    display: block;
}
.nl-act-html { padding: 1.5rem; color: var(--gray-100); }
.nl-act-html .comparador-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.nl-act-html .comparador-table th,
.nl-act-html .comparador-table td {
    border: 1px solid var(--gray-700);
    padding: .65rem .9rem;
    text-align: left;
}
.nl-act-html .comparador-table th {
    background: rgba(139,92,246,.1);
    color: var(--violet-light);
}
/* Contenido HTML: guía de observación (lámina) y cuadro resumen (comparador) */
.nl-act-recurso-pane:has(.nl-act-html) { background: var(--navy-mid, #1E1235); }
.nl-act-html h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; color: var(--violet-light); }
.nl-act-html ol { list-style: decimal; padding-left: 1.4rem; margin: .5rem 0; }
.nl-act-html li::marker { color: var(--violet-light); font-weight: 700; }
.nl-act-html li { margin: .4rem 0; line-height: 1.5; }
.nl-guia__intro, .nl-comp-intro p { line-height: 1.55; color: var(--gray-300); margin: 0 0 .5rem; }
.nl-guia__q, .nl-comp-resumen {
    border: 1px solid var(--gray-700);
    border-radius: 10px;
    margin: .6rem 0;
    background: rgba(139,92,246,.05);
}
.nl-guia__q summary, .nl-comp-resumen summary {
    cursor: pointer;
    padding: .7rem .9rem;
    font-weight: 600;
    color: var(--gray-100);
    list-style-position: inside;
}
.nl-guia__q summary:hover, .nl-comp-resumen summary:hover { color: var(--violet-light); }
.nl-guia__q[open] summary { border-bottom: 1px solid var(--gray-700); }
.nl-guia__q p { margin: 0; padding: .7rem .9rem; line-height: 1.55; color: var(--gray-300); }
.nl-comp-resumen { margin-top: 1rem; }
.nl-comp-resumen[open] summary { border-bottom: 1px solid var(--gray-700); }
.nl-comp-resumen .comparador-table { margin: 0; }
.nl-comp-resumen > table { display: block; overflow-x: auto; }

/* Quiz en el panel principal */
.nl-act-quiz-stage { padding: 1.5rem; }
.nl-act-quiz-stage .nl-act-quiz-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }

.nl-act-caption {
    padding: .65rem 1rem;
    font-size: .8rem;
    color: var(--gray-500);
    background: var(--navy-mid);
    border-top: 1px solid var(--gray-700);
    margin: 0;
}

/* --- Panel (derecha) --- */
.nl-act-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.nl-act-section {
    background: var(--navy-mid);
    border: 1px solid var(--gray-700);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}
.nl-act-desc-general {
    margin-top: .5rem;
    color: var(--gray-100);
    font-size: .95rem;
    line-height: 1.6;
}
.nl-act-carreras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: .5rem;
}
.nl-act-carrera-card {
    background: var(--navy);
    border: 1px solid var(--gray-700);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    transition: border-color var(--t-base);
}
.nl-act-carrera-card:hover { border-color: rgba(139,92,246,.3); }
.nl-act-carrera-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .35rem;
    font-size: .9rem;
}
.nl-act-carrera-head strong { color: var(--white); }
.nl-act-carrera-card p {
    font-size: .82rem;
    color: var(--gray-300);
    line-height: 1.5;
}

/* Quiz box */
.nl-act-quiz {
    margin-top: .75rem;
    padding: 1rem;
    background: var(--navy);
    border: 1px solid var(--gray-700);
    border-radius: var(--radius);
}
.nl-act-quiz-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .65rem;
    font-size: .9rem;
}
.nl-act-quiz-body { margin-top: 1rem; }

@media (max-width: 900px) {
    .nl-act-layout { grid-template-columns: 1fr; }
    .nl-act-carreras { grid-template-columns: 1fr; }
}

/* ============================================================
   Práctica por niveles (#nl-prac) — js/practica.js
   ============================================================ */
.nl-prac {
    padding-bottom: 4rem;
    margin-top: -1.5rem;
}
.nl-prac__head { margin-bottom: 1rem; }
.nl-prac__head h2 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); margin-top: .25rem; }

/* Pestañas de nivel */
.nl-prac__niveles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .6rem;
    margin-bottom: 1rem;
}
.nl-prac__nivel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    text-align: left;
    padding: .8rem 1rem;
    background: var(--navy-mid);
    border: 1px solid var(--gray-700);
    border-radius: var(--radius);
    color: var(--gray-100);
    font: inherit;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.nl-prac__nivel:hover { border-color: rgba(139,92,246,.45); }
.nl-prac__nivel:focus-visible { outline: 2px solid var(--violet-light); outline-offset: 2px; }
.nl-prac__nivel.active {
    border-color: var(--violet);
    background: rgba(139,92,246,.14);
}
.nl-prac__nivel-num {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--violet-light);
}
.nl-prac__nivel-titulo { font-weight: 700; color: var(--white); line-height: 1.3; }
.nl-prac__nivel-estado { font-size: .78rem; color: var(--gray-500); }
.nl-prac__nivel.is-completo .nl-prac__nivel-estado { color: #4ADE80; }
.nl-prac__nivel.is-pronto,
.nl-prac__nivel.is-bloqueado { opacity: .7; }

/* Panel del nivel */
.nl-prac__panel {
    background: var(--navy-mid);
    border: 1px solid var(--gray-700);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem 1.5rem;
}
.nl-prac__pronto,
.nl-prac__bloqueo {
    text-align: center;
    padding: 2rem 1rem;
}
.nl-prac__pronto strong,
.nl-prac__bloqueo strong { color: var(--white); font-size: 1.05rem; }
.nl-prac__pronto p,
.nl-prac__bloqueo p { font-size: .9rem; margin-top: .35rem; }

.nl-prac__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.nl-prac__instr { font-size: .92rem; color: var(--gray-100); max-width: 60ch; }
.nl-prac__estado { display: flex; align-items: center; gap: .75rem; }
.nl-prac__contador {
    font-weight: 800;
    color: var(--violet-light);
    font-variant-numeric: tabular-nums;
}

/* Frases */
.nl-prac__lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    counter-reset: frase;
}
.nl-prac__item {
    counter-increment: frase;
    position: relative;
    padding: .8rem 1rem .8rem 2.9rem;
    background: var(--navy);
    border: 1px solid var(--gray-700);
    border-radius: var(--radius);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.nl-prac__item::before {
    content: counter(frase);
    position: absolute;
    left: .9rem;
    top: .95rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 800;
    color: var(--violet-light);
    background: rgba(139,92,246,.15);
}
.nl-prac__frase {
    color: var(--gray-100);
    font-size: .98rem;
    line-height: 2.1;
}
.nl-prac__hueco { display: inline-block; vertical-align: baseline; margin: 0 .15rem; }
.nl-prac__input {
    width: 11.5rem;
    max-width: 100%;
    padding: .3rem .6rem;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--white);
    background: rgba(255,255,255,.04);
    border: 1.5px dashed var(--gray-500);
    border-radius: 8px;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.nl-prac__input::placeholder { color: var(--gray-500); font-weight: 400; }
.nl-prac__input:focus {
    outline: none;
    border-style: solid;
    border-color: var(--violet-light);
    background: rgba(139,92,246,.1);
}
.nl-prac__ok {
    display: inline-block;
    padding: .1rem .6rem;
    font-weight: 700;
    color: #BBF7D0;
    background: rgba(34,197,94,.18);
    border: 1.5px solid #22C55E;
    border-radius: 8px;
    line-height: 1.6;
}
.nl-prac__fb {
    font-size: .85rem;
    line-height: 1.5;
    margin-top: .2rem;
}
.nl-prac__fb:empty { display: none; }
.nl-prac__fb.is-ok  { color: #86EFAC; }
.nl-prac__fb.is-mal { color: #FCA5A5; }

.nl-prac__item.is-ok  { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.06); }
.nl-prac__item.is-mal { border-color: rgba(239,68,68,.6); }
.nl-prac__item.is-mal .nl-prac__input {
    border-style: solid;
    border-color: #EF4444;
    background: rgba(239,68,68,.1);
    animation: nl-prac-temblor .35s ease;
}
.nl-prac__item.is-esperando .nl-prac__input { opacity: .6; }

.nl-prac__final:empty { display: none; }
.nl-prac__final {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border-radius: var(--radius);
    font-size: .95rem;
}
.nl-prac__final.is-ok {
    color: #BBF7D0;
    background: rgba(34,197,94,.12);
    border: 1px solid rgba(34,197,94,.4);
}

@keyframes nl-prac-temblor {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .nl-prac__item.is-mal .nl-prac__input { animation: none; }
}

@media (max-width: 600px) {
    .nl-prac__panel { padding: 1rem; }
    .nl-prac__item { padding-left: 2.6rem; }
    .nl-prac__input { width: 100%; }
    .nl-prac__hueco { display: block; margin: .25rem 0; }
    .nl-prac__frase { line-height: 1.55; }
    .nl-prac__niveles { gap: .4rem; }
    .nl-prac__nivel { padding: .6rem .9rem; }
    .nl-arm__pieza { font-size: .76rem; padding: .4rem .45rem; gap: .35rem; }
    .nl-arm__pieza svg { width: 22px; }
}

/* ============================================================
   Nivel "armar" (armar una neurona sobre el soma) — js/armar-neurona.js
   ============================================================ */
.nl-arm__lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .9rem;
}
.nl-prac__item.nl-arm__item {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.nl-arm__item::before { display: none; }       /* sin número: cada tarjeta ya dice qué armar */
.nl-arm__pide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
}
.nl-arm__sello { font-size: .8rem; }

/* Paleta de piezas */
.nl-arm__paleta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem;
}
.nl-arm__pieza {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .55rem;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--gray-300);
    background: rgba(255,255,255,.03);
    border: 1px solid var(--gray-700);
    border-radius: 9px;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.nl-arm__pieza span { white-space: nowrap; }
.nl-arm__pieza svg { width: 28px; height: 16px; flex: none; overflow: visible; }
.nl-arm__pieza:hover:not(:disabled) { border-color: rgba(139,92,246,.5); color: var(--white); }
.nl-arm__pieza.active {
    color: var(--white);
    border-color: var(--violet);
    background: rgba(139,92,246,.18);
}
.nl-arm__pieza:disabled { opacity: .45; cursor: default; }
.nl-arm__pieza:focus-visible { outline: 2px solid var(--violet-light); outline-offset: 2px; }

/* Lienzo */
.nl-arm__lienzo {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1;
    margin: 0 auto;
    background: radial-gradient(circle at 50% 50%, rgba(139,92,246,.10), transparent 70%);
    border: 1px dashed var(--gray-700);
    border-radius: var(--radius);
    touch-action: manipulation;
}
.nl-arm__lienzo path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Colores de las piezas (también usados en los íconos de la paleta) */
.p-dend  { stroke: #A78BFA; stroke-width: 3.5; fill: none; stroke-linecap: round; }
.p-axon  { stroke: #F472B6; stroke-width: 3.5; fill: none; stroke-linecap: round; }
.p-t     { stroke: #38BDF8; stroke-width: 3.5; fill: none; stroke-linecap: round; }
.p-mielina { fill: #EEF1F8; opacity: .85; }
.p-boton { fill: #F472B6; }
.p-t ~ .p-boton { fill: #38BDF8; }
.p-soma  { fill: #6D28D9; stroke: #A78BFA; stroke-width: 2.5; }
.p-nucleo { fill: #1A0E2E; stroke: #C4B5FD; stroke-width: 1.5; }

/* Puntos donde se agregan piezas */
.punto { cursor: pointer; outline: none; }
.punto__area { fill: transparent; }
.punto__aro {
    fill: rgba(26,14,46,.85);
    stroke: var(--gray-500);
    stroke-width: 1.5;
    stroke-dasharray: 3 2;
    transition: stroke var(--t-fast), fill var(--t-fast);
}
.punto__mas { stroke: var(--gray-300); stroke-width: 1.8; stroke-linecap: round; }
.punto.is-lleno .punto__aro { fill: rgba(26,14,46,.55); stroke-dasharray: none; stroke: rgba(255,255,255,.35); }
.punto:hover .punto__aro,
.punto:focus-visible .punto__aro { stroke: var(--white); stroke-dasharray: none; fill: rgba(139,92,246,.45); }
.punto:focus-visible .punto__aro { stroke-width: 2.5; }

.nl-arm__resumen { font-size: .82rem; color: var(--gray-300); text-align: center; min-height: 1.3em; }
.nl-arm__acciones { display: flex; justify-content: center; gap: .5rem; }
.nl-arm__item.is-ok .nl-arm__paleta,
.nl-arm__item.is-ok .nl-arm__acciones { display: none; }
.nl-arm__acciones .btn:disabled { opacity: .45; cursor: default; transform: none; }

/* Estados */
.nl-arm__item.is-mal .nl-arm__lienzo { border-color: #EF4444; border-style: solid; animation: nl-prac-temblor .35s ease; }
.nl-arm__item.is-ok  .nl-arm__lienzo { border-color: #22C55E; border-style: solid; background: radial-gradient(circle at 50% 50%, rgba(34,197,94,.12), transparent 70%); }
.nl-arm__item.is-esperando .nl-arm__lienzo { opacity: .6; }
@media (prefers-reduced-motion: reduce) {
    .nl-arm__item.is-mal .nl-arm__lienzo { animation: none; }
}

/* La identificación necesita todo el ancho: el diagrama es la actividad. */
.nl-act-layout--ancho { grid-template-columns: 1fr; }
.nl-act-layout--ancho .nl-act-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    align-items: start;
}

/* ============================================================
   Actividad de identificación (labeling)
   Rectángulos sobre la imagen: se escribe el nombre de la parte.
   ============================================================ */
.nl-lab { padding: 1.1rem 1.25rem 1.25rem; }
.nl-lab__head { margin-bottom: 1rem; }
.nl-lab__instruccion {
    font-size: .85rem;
    line-height: 1.55;
    color: var(--gray-300);
    margin: 0 0 .65rem;
    max-width: 62ch;
}
.nl-lab__estado {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.nl-lab__contador {
    padding: .2rem .7rem;
    border-radius: 100px;
    background: rgba(139,92,246,.15);
    color: var(--violet-light);
    font-size: .78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.nl-lab.is-completa .nl-lab__contador {
    background: rgba(34,197,94,.18);
    color: #4ADE80;
}
.nl-lab__reset {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: .74rem;
    font-weight: 700;
    color: var(--gray-500);
    cursor: pointer;
    transition: color var(--t-fast);
}
.nl-lab__reset:hover { color: var(--violet-light); }

/* --- Lienzo --- */
.nl-lab__canvas {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;               /* la lámina viene con fondo blanco */
    line-height: 0;
    container-type: inline-size;    /* los rótulos escalan con la imagen */
}
.nl-lab__img { width: 100%; height: auto; display: block; }
.nl-lab__lineas,
.nl-lab__capa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.nl-lab__lineas { pointer-events: none; }
.nl-lab__capa {
    pointer-events: none;
    line-height: 1.2;
    /* Todo lo de adentro va en em, así los rectángulos crecen y se achican
       junto con la lámina y nunca se pisan entre ellos. */
    font-size: clamp(8px, 1.12cqw, 14px);
}
.nl-lab__capa > * { pointer-events: auto; }

.nl-lab__linea {
    stroke: #7C3AED;
    stroke-width: 1.6;
    stroke-dasharray: 4 3;
    opacity: .8;
}
.nl-lab__linea.is-ok { stroke: #16A34A; stroke-dasharray: none; opacity: .9; }

/* Punto que marca la estructura exacta */
.nl-lab__punto {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: #7C3AED;
    border: .15em solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    color: #fff;
    font-size: .8em;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast);
}
.nl-lab__punto.is-ok { background: #16A34A; }

/* --- Rectángulo de respuesta --- */
.nl-lab__slot {
    position: absolute;
    transform: translate(-50%, -50%);
}
.nl-lab__campo {
    display: flex;
    align-items: center;
    gap: .3em;
    padding: .2em .35em .2em .25em;
    border: .16em solid #7C3AED;
    border-radius: .6em;
    background: rgba(255,255,255,.9);
    box-shadow: 0 2px 8px rgba(26,14,46,.22);
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.nl-lab__num {
    flex-shrink: 0;
    min-width: 1.5em;
    height: 1.5em;
    border-radius: .35em;
    background: rgba(124,58,237,.14);
    color: #6D28D9;
    font-size: .8em;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nl-lab__input {
    width: 8em;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    color: #1A0E2E;
    padding: .1em;
}
.nl-lab__input::placeholder { color: #9C8AB5; font-weight: 500; }

.nl-lab__campo:focus-within {
    background: #fff;
    border-color: #6D28D9;
    box-shadow: 0 0 0 .18em rgba(139,92,246,.3), 0 2px 8px rgba(26,14,46,.25);
}
.nl-lab__slot:focus-within { z-index: 5; }
.nl-lab__campo.is-esperando { opacity: .65; }

.nl-lab__campo.is-mal {
    border-color: #DC2626;
    background: rgba(254,226,226,.97);
    animation: nlLabMal 320ms ease;
}
.nl-lab__campo.is-mal .nl-lab__num { background: rgba(220,38,38,.16); color: #B91C1C; }

.nl-lab__campo.is-ok {
    border-color: #16A34A;
    background: rgba(220,252,231,.97);
    box-shadow: 0 2px 8px rgba(22,163,74,.25);
}
.nl-lab__campo.is-ok .nl-lab__num { background: rgba(22,163,74,.18); color: #15803D; }
.nl-lab__ok {
    padding: .1em;
    font-size: 1em;
    font-weight: 800;
    color: #14532D;
    white-space: nowrap;
}
.nl-lab__ok::after { content: ' ✓'; }

@keyframes nlLabMal {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-.35em); }
    75%      { transform: translateX(.35em); }
}

/* --- Retroalimentación --- */
.nl-lab__feedback {
    /* Pegada al borde inferior de la pantalla: la lámina es alta y la
       retroalimentación tiene que verse sin tener que buscarla. */
    position: sticky;
    bottom: .75rem;
    z-index: 6;
    margin: 1rem 0 0;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--gray-300);
    padding: 0;
    border-radius: var(--radius);
    transition: background var(--t-fast);
}
.nl-lab__feedback.is-ok,
.nl-lab__feedback.is-mal {
    padding: .7rem .9rem;
    box-shadow: 0 6px 20px rgba(26,14,46,.45);
    backdrop-filter: blur(6px);
}
.nl-lab__feedback.is-ok  { background: rgba(21,89,48,.92);  color: #BBF7D0; }
.nl-lab__feedback.is-mal { background: rgba(127,25,25,.92); color: #FECACA; }
.nl-lab__feedback strong { color: var(--white); }

/* --- Autoverificación: revelar, comparar y decidir --- */
.nl-lab__nose {
    flex-shrink: 0;
    width: 1.5em;
    height: 1.5em;
    border: 0;
    border-radius: 50%;
    background: rgba(124,58,237,.14);
    color: #6D28D9;
    font: inherit;
    font-size: .85em;
    font-weight: 800;
    cursor: pointer;
}
.nl-lab__nose:hover:not(:disabled) { background: #7C3AED; color: #fff; }
.nl-lab__input:disabled, .nl-lab__nose:disabled { opacity: .45; cursor: default; }

button.nl-lab__campo {
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.nl-lab__resp { padding: .1em; font-weight: 700; color: #78350F; white-space: nowrap; }

.nl-lab__campo.is-revelada {
    border-color: #D97706;
    border-style: dashed;
    background: rgba(254,243,199,.97);
    box-shadow: 0 0 0 .18em rgba(217,119,6,.3);
}
.nl-lab__campo.is-repasar {
    border-color: #D97706;
    background: rgba(254,243,199,.97);
    box-shadow: 0 2px 8px rgba(217,119,6,.25);
}
.nl-lab__campo.is-repasar .nl-lab__num,
.nl-lab__campo.is-revelada .nl-lab__num { background: rgba(217,119,6,.18); color: #B45309; }
.nl-lab__campo.is-repasar .nl-lab__ok { color: #78350F; }
.nl-lab__ok::after { content: none; }
.nl-lab__punto.is-repasar, .nl-lab__punto.is-revelada { background: #D97706; }
.nl-lab__linea.is-repasar, .nl-lab__linea.is-revelada { stroke: #D97706; stroke-dasharray: none; opacity: .9; }

.nl-lab__feedback.is-decidir,
.nl-lab__feedback.is-repasar,
.nl-lab__feedback.is-aviso {
    padding: .8rem 1rem;
    box-shadow: 0 6px 20px rgba(26,14,46,.45);
    backdrop-filter: blur(6px);
}
.nl-lab__feedback.is-decidir { background: rgba(46,26,80,.96); border: 1px solid var(--violet); color: var(--gray-100); }
.nl-lab__feedback.is-repasar { background: rgba(120,72,6,.94); color: #FDE68A; }
.nl-lab__feedback.is-aviso   { background: rgba(127,25,25,.92); color: #FECACA; }

.nl-lab__comp {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .6rem 1.5rem;
}
.nl-lab__etq {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--violet-light);
    opacity: .9;
}
.nl-lab__suya { font-size: 1.05rem; font-weight: 700; color: #FDE68A; }
.nl-lab__correcta { font-size: 1.05rem; }
.nl-lab__alt, .nl-lab__tuya { display: block; font-size: .8rem; opacity: .9; margin-top: .15rem; }
.nl-lab__funcion { margin: .55rem 0 0; font-size: .84rem; }
.nl-lab__funcion .nl-lab__etq { display: inline; margin-right: .35rem; }
.nl-lab__decision {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
    font-weight: 700;
}
.nl-lab__decision span { margin-right: .25rem; }
.nl-lab__si { background: #16A34A; color: #fff; border: 0; }
.nl-lab__no { background: #D97706; color: #fff; border: 0; }
.nl-lab__si:hover { background: #15803D; }
.nl-lab__no:hover { background: #B45309; }

/* --- Pantallas angostas: los campos bajan a una lista --- */
.nl-lab__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .6rem;
    margin-top: 1rem;
}
.nl-lab__lista .nl-lab__campo { width: 100%; font-size: .9rem; }
.nl-lab__lista .nl-lab__input { width: 100%; flex: 1; }
.nl-lab.is-lista .nl-lab__capa { font-size: clamp(9px, 2.6cqw, 15px); }
/* En modo lista los rectángulos ya no están sobre la lámina: las guías sobran. */
.nl-lab.is-lista .nl-lab__lineas { display: none; }

@media (prefers-reduced-motion: reduce) {
    .nl-lab__campo.is-mal { animation: none; }
    .nl-lab__campo, .nl-lab__punto, .nl-lab__reset { transition: none; }
}

/* En la identificación (layout ancho) las tarjetas de carrera van una sobre otra */
.nl-act-layout--ancho .nl-act-carreras { grid-template-columns: 1fr; }

/* ===============================================================
   Identificación v2: nombre por lista + función por alternativas
   =============================================================== */
.nl-lab__select {
    width: 9.5em;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    color: #1A0E2E;
    padding: .1em 0;
    cursor: pointer;
}
.nl-lab__select:disabled { opacity: .45; cursor: default; }
.nl-lab__select option { color: #1A0E2E; }
.nl-lab__campo.is-activa {
    border-color: #F59E0B;
    background: rgba(254,243,199,.98);
    box-shadow: 0 0 0 .18em rgba(245,158,11,.35), 0 2px 8px rgba(26,14,46,.25);
    cursor: pointer;
}
.nl-lab__campo.is-activa .nl-lab__num { background: rgba(245,158,11,.22); color: #B45309; }
.nl-lab__campo.is-activa .nl-lab__ok { color: #78350F; }
.nl-lab__falta {
    font-size: .72em; font-weight: 800; color: #fff;
    background: #F59E0B; border-radius: 99px; padding: .05em .5em; white-space: nowrap;
}
.nl-lab__punto.is-activa { background: #F59E0B; }
.nl-lab__linea.is-activa { stroke: #F59E0B; stroke-dasharray: none; opacity: .95; }

.nl-lab__feedback.is-pregunta {
    padding: .8rem .9rem;
    background: rgba(36,20,64,.97);
    border: 1.5px solid #F59E0B;
    color: var(--gray-100);
    box-shadow: 0 6px 24px rgba(26,14,46,.55);
}
.nl-lab__q { margin: 0 0 .6rem; font-size: .95rem; }
.nl-lab__q .nl-lab__etq { display: block; color: #FCD34D; margin-bottom: .15rem; }
.nl-lab__alts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .45rem; }
.nl-lab__alt-btn {
    display: flex; align-items: flex-start; gap: .55rem;
    text-align: left; font: inherit; font-size: .86rem; line-height: 1.4;
    padding: .55rem .7rem;
    color: var(--gray-100);
    background: rgba(255,255,255,.05);
    border: 1.5px solid var(--gray-700);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.nl-lab__alt-btn:hover:not(:disabled) { border-color: #F59E0B; background: rgba(245,158,11,.1); }
.nl-lab__alt-btn.is-mal { border-color: #EF4444; background: rgba(239,68,68,.12); opacity: .7; cursor: default; }
.nl-lab__alt-btn.is-esperando { opacity: .6; }
.nl-lab__alt-letra {
    flex: 0 0 1.5rem; height: 1.5rem; border-radius: 50%;
    display: grid; place-items: center; font-size: .75rem; font-weight: 800;
    background: rgba(245,158,11,.2); color: #FCD34D;
}
.nl-lab__alt-btn.is-mal .nl-lab__alt-letra { background: #EF4444; color: #fff; }
.nl-lab__q-fb { margin: .55rem 0 0; color: #FECACA; font-size: .84rem; }
.nl-lab__detalle { margin: .35rem 0 0; font-size: .82rem; opacity: .9; }
.nl-lab__errores { font-size: .8rem; font-weight: 700; color: #FCA5A5; }
.nl-lab__verde { color: #4ADE80; font-weight: 700; }

.nl-lab__niveles { display: flex; flex-wrap: wrap; gap: .4rem; padding: .9rem 1.25rem 0; }
.nl-lab__nivel {
    font-size: .82rem; font-weight: 700; padding: .35rem .8rem; border-radius: 99px;
    border: 1.5px solid var(--gray-700); color: var(--gray-300); text-decoration: none;
}
.nl-lab__nivel:hover { border-color: var(--violet); color: var(--violet-light); }
.nl-lab__nivel.is-actual { background: var(--violet); border-color: var(--violet); color: #fff; }
.nl-lab__nivel.is-pronto { opacity: .55; }
.nl-lab__candado { padding: 2rem 1rem; text-align: center; color: var(--gray-300); }
.nl-lab.is-bloqueada > :not(.nl-lab__candado) { display: none; }

.nl-lab__calibrar {
    margin: .8rem 0 0; padding: .7rem; font-size: .8rem; white-space: pre-wrap;
    background: #0B0616; color: #A7F3D0; border-radius: 8px; max-height: 14rem; overflow: auto;
}

/* --- Llamado "Sumar a mi guía" (todas las actividades) --- */
.nl-guia-cta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
    margin-top: 1rem; padding: .9rem 1rem;
    border: 1.5px dashed var(--violet);
    border-radius: 12px;
    background: rgba(139,92,246,.1);
    animation: nlGuiaAparece .35s ease;
}
.nl-guia-cta.is-sumada { border-style: solid; border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.08); }
.nl-guia-cta__txt { flex: 1 1 220px; color: var(--gray-100); }
@keyframes nlGuiaAparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- Nivel "elegir": botones con dibujo --- */
.nl-eleg__item { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.nl-eleg__frase { flex: 1 1 260px; margin: 0; }
.nl-eleg__opciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.nl-eleg__op {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .7rem .3rem .35rem;
    font: inherit; font-size: .85rem; font-weight: 700;
    color: var(--gray-100);
    background: rgba(255,255,255,.04);
    border: 1.5px solid var(--gray-700);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
}
.nl-eleg__op:hover:not(:disabled) { border-color: var(--violet); background: rgba(139,92,246,.12); transform: translateY(-1px); }
.nl-eleg__op .nl-ico { width: 54px; height: 54px; flex: none; border-radius: 8px; background: #fff; padding: 2px; object-fit: contain; }
.nl-eleg__op.is-mal { border-color: #EF4444; background: rgba(239,68,68,.12); opacity: .55; cursor: default; }
.nl-eleg__op.is-ok { border-color: #22C55E; background: rgba(34,197,94,.14); color: #BBF7D0; cursor: default; opacity: 1; }
.nl-eleg__op.is-esperando { opacity: .6; }
.nl-eleg__item .nl-prac__fb { flex-basis: 100%; }
.nl-eleg__op[hidden] { display: none; }

/* --- Marcas sobre la imagen: puntos más grandes y formas de estructuras generales --- */
.nl-lab__punto { width: 1.85em; height: 1.85em; font-size: .85em; border-width: .17em; }
.nl-lab__forma {
    fill: rgba(124,58,237,.08);
    stroke: #7C3AED;
    stroke-width: 2.4;
    stroke-dasharray: 6 4;
}
.nl-lab__corchete { fill: none; stroke-width: 3; stroke-dasharray: none; stroke-linecap: round; opacity: .85; }
.nl-lab__forma.is-ok      { stroke: #16A34A; fill: rgba(22,163,74,.08); stroke-dasharray: none; }
.nl-lab__forma.is-repasar { stroke: #D97706; fill: rgba(217,119,6,.08); stroke-dasharray: none; }
.nl-lab__forma.is-activa  { stroke: #F59E0B; fill: rgba(245,158,11,.12); stroke-dasharray: none; }
.nl-lab__corchete.is-ok, .nl-lab__corchete.is-repasar, .nl-lab__corchete.is-activa { fill: none; }

/* ===============================================================
   Trabajo autocorregible (js/tareas.js): capturas + preguntas
   =============================================================== */
.nl-tar { margin-top: 2.5rem; }
.nl-tar__intro { color: var(--gray-300); line-height: 1.55; margin: .4rem 0 0; max-width: 70ch; }
.nl-tar__caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.nl-tar__cap {
    padding: 1rem; border: 1.5px solid var(--gray-700); border-radius: 14px; background: var(--navy-mid);
    display: flex; flex-direction: column; gap: .6rem;
}
.nl-tar__cap.is-ok { border-color: rgba(34,197,94,.55); }
.nl-tar__cap h3 { margin: 0; font-size: 1rem; }
.nl-tar__n { color: var(--violet-light); }
.nl-tar__ins { margin: 0; font-size: .86rem; color: var(--gray-300); line-height: 1.5; }
.nl-tar__zona {
    min-height: 170px; border: 2px dashed var(--violet); border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
    text-align: center; padding: 1rem; cursor: pointer; color: var(--gray-100);
    background: rgba(139,92,246,.06); transition: background .15s, border-color .15s; outline: none;
}
.nl-tar__zona:focus, .nl-tar__zona.is-sobre { background: rgba(139,92,246,.16); border-color: var(--violet-light); box-shadow: 0 0 0 3px rgba(139,92,246,.3); }
.nl-tar__zona span, .nl-tar__zona small { font-size: .8rem; color: var(--gray-300); }
.nl-tar__zona-ico { font-size: 1.6rem !important; }
.nl-tar__zona.tiene { padding: .4rem; border-style: solid; border-color: rgba(34,197,94,.5); }
.nl-tar__zona.tiene img { max-width: 100%; max-height: 320px; border-radius: 8px; display: block; }
.nl-tar__cambiar { margin-top: .3rem; }
.nl-tar__subir { align-self: flex-start; }
.nl-tar__checks { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .88rem; }
.nl-tar__checks legend { font-weight: 700; color: var(--gray-300); font-size: .82rem; margin-bottom: .3rem; width: 100%; }
.nl-tar__checks label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.nl-tar__checks input { width: 1.05rem; height: 1.05rem; accent-color: #22C55E; }

.nl-tar__pregs { list-style: none; counter-reset: preg; padding: 0; margin: 1.4rem 0 0; display: flex; flex-direction: column; gap: .8rem; }
.nl-tar__preg {
    counter-increment: preg; padding: .9rem 1rem; border: 1.5px solid var(--gray-700); border-radius: 14px; background: var(--navy-mid);
}
.nl-tar__preg.is-ok { border-color: rgba(34,197,94,.55); }
.nl-tar__preg.is-sacude { animation: nlLabMal 320ms ease; }
.nl-tar__p { margin: 0 0 .6rem; font-weight: 600; line-height: 1.5; }
.nl-tar__p::before { content: counter(preg) '. '; color: var(--violet-light); font-weight: 800; }
.nl-tar__ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .45rem; }
.nl-tar__op {
    text-align: left; font: inherit; font-size: .88rem; line-height: 1.4; padding: .6rem .75rem;
    color: var(--gray-100); background: rgba(255,255,255,.04);
    border: 1.5px solid var(--gray-700); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s;
}
.nl-tar__op:hover:not(:disabled) { border-color: var(--violet); background: rgba(139,92,246,.12); }
.nl-tar__op.is-mal { border-color: #EF4444; background: rgba(239,68,68,.1); opacity: .55; text-decoration: line-through; cursor: default; }
.nl-tar__op.is-ok { border-color: #22C55E; background: rgba(34,197,94,.14); color: #BBF7D0; cursor: default; opacity: 1; }
.nl-tar__op[hidden] { display: none; }
.nl-tar__fb { margin: .5rem 0 0; font-size: .86rem; line-height: 1.5; }
.nl-tar__fb.is-ok { color: #86EFAC; }
.nl-tar__fb.is-mal { color: #FCA5A5; }
.nl-tar__final { margin-top: 1.2rem; padding: .8rem 1rem; border-radius: 12px; background: rgba(255,255,255,.04); color: var(--gray-300); font-weight: 600; }
.nl-tar__final.is-ok { background: rgba(34,197,94,.1); color: #BBF7D0; }

/* Línea discreta "Guardado en tu guía" (reemplaza al botón "Sumar a mi guía") */
.nl-guia-ok { margin-top: .6rem; font-size: .8rem; color: var(--gray-500); }
.nl-guia-ok a { color: var(--violet-light); font-weight: 700; }