/* ladocencIA — Asistente de planeación, mapa curricular y galería de proyectos SEP.
   El mapa usa container queries: en el asistente (ancho) se ve como mapa; en columnas angostas se apila. */

:root {
  --c: #4E6E9A;
  --campo-lenguajes: #D2552F;
  --campo-saberes: #2F64C8;
  --campo-etica: #2F8A6B;
  --campo-humano: #B4448F;
  --asis-radio: 18px;
}
[data-color="lenguajes"] { --c: var(--campo-lenguajes); }
[data-color="saberes"], [data-campo="saberes"] { --c: var(--campo-saberes); }
[data-color="etica"], [data-campo="etica"] { --c: var(--campo-etica); }
[data-color="humano"], [data-campo="humano"] { --c: var(--campo-humano); }
.nem-rama-principal[data-campo="lenguajes"] { --c: var(--campo-lenguajes); }

/* ------------------------------------------------------------ selector: modo como tarjetas */
.nem-box { container-type: inline-size; }
.nem-modo { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; }
.nem-modo-op {
  display: flex !important; flex-direction: row !important; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; cursor: pointer;
  border: 1.5px solid var(--ld-line, #E1E7EF); border-radius: 14px; background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.nem-modo-op:hover { border-color: var(--ld-blue, #4E6E9A); }
.nem-modo-op:has(input:checked) { border-color: var(--ld-coral, #F29F2B); box-shadow: 0 0 0 3px rgba(242,159,43,.18); background: var(--ld-cream, #FFF9F0); }
.nem-modo-op input { margin-top: .2rem; accent-color: var(--ld-coral, #F29F2B); }
.nem-modo-op strong { display: block; color: var(--ld-ink, #1C2B4B); }
.nem-modo-op small { display: block; color: var(--ld-muted, #5A6A85); font-size: .82rem; line-height: 1.35; margin-top: .15rem; }

/* ------------------------------------------------------------ galería de proyectos SEP */
.nem-proyecto { display: flex; flex-direction: column; gap: .75rem; }
.nem-proyecto.cargando { opacity: .75; pointer-events: none; }
.nem-gal-head { display: flex; flex-direction: column; gap: .55rem; }
.nem-gal-buscar { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .86rem; }
.nem-gal-buscar input { padding: .65rem .85rem; border-radius: 12px; border: 1.5px solid var(--ld-line, #E1E7EF); font-size: .95rem; }
.nem-gal-filtros { display: flex; flex-wrap: wrap; gap: .4rem; }
.nem-chip {
  border: 1.5px solid var(--ld-line, #E1E7EF); background: #fff; color: var(--ld-ink, #1C2B4B);
  border-radius: 999px; padding: .32rem .75rem; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.nem-chip[data-color] { border-color: color-mix(in srgb, var(--c) 35%, #fff); }
.nem-chip.activo { background: var(--ld-ink, #1C2B4B); border-color: var(--ld-ink, #1C2B4B); color: #fff; }
.nem-chip[data-color].activo { background: var(--c); border-color: var(--c); }
.nem-gal-cuenta { margin: 0; font-size: .8rem; color: var(--ld-muted, #5A6A85); }
.nem-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .65rem; margin-top: .4rem; }
.nem-pcard {
  display: flex; flex-direction: column; gap: .35rem; text-align: left; cursor: pointer;
  padding: .85rem .9rem .75rem; border-radius: 14px; background: #fff;
  border: 1.5px solid var(--ld-line, #E1E7EF); border-top: 4px solid var(--c);
  transition: transform .15s, box-shadow .15s, border-color .15s; font: inherit; color: var(--ld-ink, #1C2B4B);
}
.nem-pcard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,32,60,.10); }
.nem-pcard:focus-visible { outline: 3px solid rgba(242,159,43,.5); outline-offset: 2px; }
.nem-pcard.activo { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); background: color-mix(in srgb, var(--c) 5%, #fff); }
.nem-pcard-campo { font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--c); }
.nem-pcard strong { font-size: .97rem; line-height: 1.25; }
.nem-pcard-prop { font-size: .82rem; line-height: 1.38; color: var(--ld-muted, #5A6A85); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nem-pcard-pie { margin-top: auto; padding-top: .3rem; font-size: .74rem; color: var(--ld-muted, #5A6A85); }
.nem-gal-mas { justify-self: center; margin: .6rem auto 0; display: block; border: 0; background: none; color: var(--ld-blue, #4E6E9A); font-weight: 700; cursor: pointer; text-decoration: underline; }
.nem-proyecto-propio { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; padding: .8rem; border-radius: 14px; background: var(--ld-bg, #F4F7FB); }
@container (max-width: 520px) { .nem-proyecto-propio { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ mapa curricular */
.nem-mapa { display: grid; gap: .9rem; }
.nem-mapa-etq { display: block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ld-muted, #5A6A85); margin-bottom: .2rem; }
.nem-mapa-centro {
  position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 1rem;
  border-radius: var(--asis-radio); background: var(--ld-ink, #1C2B4B); color: #fff;
}
.nem-mapa-centro .nem-mapa-etq { color: rgba(255,255,255,.7); }
.nem-mapa-centro > label { color: #fff; font-weight: 600; display: flex; flex-direction: column; gap: .3rem; }
.nem-mapa-centro > label input { background: #fff; color: var(--ld-ink, #1C2B4B); border-radius: 10px; }
#nem-hub-titulo { font-family: var(--serif, Georgia, serif); font-size: 1.08rem; line-height: 1.25; }
#nem-hub-titulo.vacio { opacity: .55; font-style: italic; font-weight: 400; }
.nem-mapa-centro > label + #nem-hub-titulo { display: none; }
.nem-mapa-centro .nem-ejes { border: 0; padding: 0; margin: 0; }
.nem-mapa-centro .nem-ejes legend { color: rgba(255,255,255,.85); font-size: .8rem; font-weight: 700; padding: 0; margin-bottom: .35rem; }
.nem-mapa-centro .nem-ejes-grid { display: flex; flex-wrap: wrap; gap: .35rem; }
.nem-mapa-centro .nem-check { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: .3rem; padding: .25rem .55rem; border-radius: 999px; background: rgba(255,255,255,.1); font-size: .76rem; color: #fff; cursor: pointer; }
.nem-mapa-centro .nem-check:has(input:checked) { background: var(--ld-coral, #F29F2B); color: var(--ld-ink, #1C2B4B); font-weight: 700; }
.nem-mapa-centro .nem-check input { accent-color: var(--ld-ink, #1C2B4B); }

.nem-rama {
  position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 1rem;
  border-radius: var(--asis-radio); background: #fff; border: 1.5px solid var(--ld-line, #E1E7EF); border-left: 5px solid var(--c);
}
.nem-rama-principal[data-campo="lenguajes"] { --c: var(--campo-lenguajes); }
.nem-rama-principal[data-campo="saberes"] { --c: var(--campo-saberes); }
.nem-rama-principal[data-campo="etica"] { --c: var(--campo-etica); }
.nem-rama-principal[data-campo="humano"] { --c: var(--campo-humano); }
.nem-rama-principal .nem-mapa-etq { color: var(--c); }

.nem-extras { display: flex; flex-direction: column; gap: .55rem; }
.nem-extra { padding: .7rem; border-radius: 12px; background: color-mix(in srgb, var(--c) 6%, #fff); border: 1px dashed color-mix(in srgb, var(--c) 40%, #fff); }
.nem-extra-top { display: grid; grid-template-columns: 1fr auto; gap: .4rem; align-items: end; }
.nem-extra-top label { display: flex; flex-direction: column; gap: .25rem; font-size: .84rem; font-weight: 600; }
.nem-extra-quitar { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--ld-line, #E1E7EF); background: #fff; font-size: 1.1rem; cursor: pointer; }
.nem-extra-pda:not(:empty) { margin-top: .45rem; }
.nem-extra-add { align-self: flex-start; border: 1.5px dashed color-mix(in srgb, var(--c) 55%, #fff); background: none; color: var(--c); font-weight: 700; padding: .5rem .8rem; border-radius: 12px; cursor: pointer; }
.nem-extra-add:disabled { opacity: .45; cursor: not-allowed; }

.nem-ramas { border: 0; padding: 0; margin: 0; min-width: 0; }
.nem-ramas legend { font-weight: 700; font-size: .88rem; margin-bottom: .45rem; padding: 0; }
.nem-ramas-grid { display: grid; gap: .55rem; }
.nem-vcard {
  position: relative; display: flex; flex-direction: column; gap: .4rem; padding: .7rem .8rem;
  border-radius: 14px; background: #fff; border: 1.5px solid var(--ld-line, #E1E7EF); border-left: 5px solid var(--c);
  transition: opacity .15s;
}
.nem-vcard.apagado { opacity: .55; border-left-color: var(--ld-line, #E1E7EF); }
.nem-vcard-top { display: flex !important; flex-direction: row !important; align-items: center; gap: .45rem; font-weight: 700; color: var(--c); cursor: pointer; }
.nem-vcard-top input { accent-color: var(--c); width: 18px; height: 18px; }
.nem-vcard-cont { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: var(--ld-muted, #5A6A85); }
.nem-vcard-cont select { font-size: .85rem; }

/* Mapa amplio: principal ⟵ centro ⟶ campos vinculados, con conectores. */
@container (min-width: 860px) {
  .nem-mapa { grid-template-columns: minmax(0, 1.25fr) minmax(220px, .8fr) minmax(0, 1fr); align-items: center; gap: 2.2rem; }
  .nem-rama-principal { order: 1; }
  .nem-mapa-centro { order: 2; }
  .nem-ramas { order: 3; }
  .nem-mapa-centro::before, .nem-mapa-centro::after {
    content: ""; position: absolute; top: 50%; width: 2.2rem; height: 2px; background: var(--ld-line, #CBD5E3);
  }
  .nem-mapa-centro::before { right: 100%; }
  .nem-mapa-centro::after { left: 100%; }
  .nem-box:not(:has(#nem-vincular:not([hidden]))) .nem-mapa-centro::after { display: none; }
  .nem-vcard::before { content: ""; position: absolute; right: 100%; top: 50%; width: 1.1rem; height: 2px; background: var(--ld-line, #CBD5E3); }
  .nem-ramas-grid { position: relative; padding-left: 1.1rem; border-left: 2px solid var(--ld-line, #CBD5E3); margin-left: -1.1rem; }
  .nem-vcard::before { right: calc(100% + 1.5px); }
}

/* Otros recursos (examen, rúbrica…): sin modo proyecto, sin vincular y sin contenidos extra. */
.nem-box.nem-solo-curriculo .nem-modo,
.nem-box.nem-solo-curriculo #nem-proyecto-wrap,
.nem-box.nem-solo-curriculo #nem-vincular,
.nem-box.nem-solo-curriculo #nem-extras,
.nem-box.nem-solo-curriculo #nem-extra-add { display: none !important; }

/* ------------------------------------------------------------ asistente a pantalla completa */
.mesa.asistente { grid-template-columns: minmax(0, 1fr); max-width: 1200px; }
.mesa.asistente .panel-documento { display: none; }
.mesa.asistente .panel-intake { position: static; padding: 0; overflow: visible; max-height: none; height: auto; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
.mesa.asistente .panel-intake [data-asis]:not(.asis-visible) { display: none !important; }
.mesa:not(.asistente) #asis-cabecera, .mesa:not(.asistente) #asis-pie, .mesa:not(.asistente) #asis-resumen { display: none !important; }
.mesa:not(.asistente-documento) #asis-volver { display: none; }

.asis-cabecera { margin-bottom: 1.1rem; }
.asis-titulo { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .9rem; }
.asis-kicker { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ld-coral, #F29F2B); }
.asis-titulo h2 { margin: 0; font-family: var(--serif, Georgia, serif); font-size: clamp(1.45rem, 2.4vw, 2rem); color: var(--ld-ink, #1C2B4B); }
.asis-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; counter-reset: paso; }
.asis-paso {
  width: 100%; height: 100%; display: flex; gap: .6rem; align-items: flex-start; text-align: left; cursor: pointer;
  padding: .7rem .75rem; border-radius: 14px; border: 1.5px solid var(--ld-line, #E1E7EF); background: #fff; font: inherit; color: var(--ld-ink, #1C2B4B);
  transition: border-color .15s, background .15s;
}
.asis-paso:hover { border-color: var(--ld-blue, #4E6E9A); }
.asis-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ld-bg, #F4F7FB); font-weight: 800; font-size: .85rem; }
.asis-txt strong { display: block; font-size: .9rem; }
.asis-txt small { display: block; font-size: .74rem; line-height: 1.3; color: var(--ld-muted, #5A6A85); margin-top: .1rem; }
.asis-paso.activo { border-color: var(--ld-coral, #F29F2B); background: var(--ld-cream, #FFF9F0); box-shadow: 0 0 0 3px rgba(242,159,43,.16); }
.asis-paso.activo .asis-num { background: var(--ld-coral, #F29F2B); color: var(--ld-ink, #1C2B4B); }
.asis-paso.hecho .asis-num { background: var(--ld-mint, #2F8A6B); color: #fff; }
.asis-paso.hecho .asis-num { font-size: 0; }
.asis-paso.hecho .asis-num::after { content: "✓"; font-size: .9rem; }

/* El cuerpo de cada paso va en una tarjeta amplia. */
.mesa.asistente #generator-form {
  background: #fff; border: 1px solid var(--ld-line, #E1E7EF); border-radius: 22px; box-shadow: var(--ui-shadow-sm, 0 8px 22px rgba(20,32,60,.06));
}
#asis-intro { display: flex; flex-direction: column; gap: .8rem; }
#asis-intro .estado-ia:empty { display: none; }
#asis-intro #btn-completar-ia { align-self: flex-start; }
.mesa.asistente #generator-form { padding: 1.3rem; display: flex; flex-direction: column; gap: 1rem; }
.mesa.asistente .nem-box { border: 0; background: transparent; padding: 0; }
.mesa.asistente .panel-intake[data-paso-actual="4"] #generator-form { display: block; columns: 2 360px; column-gap: 1.3rem; }
.mesa.asistente .panel-intake[data-paso-actual="4"] #generator-form > * { break-inside: avoid; margin-bottom: 1rem; }

.asis-pie {
  position: sticky; bottom: 12px; z-index: 5; margin-top: 1rem; display: flex; align-items: center; gap: .8rem;
  padding: .7rem .8rem; border-radius: 18px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border: 1px solid var(--ld-line, #E1E7EF); box-shadow: 0 10px 30px rgba(20,32,60,.12);
}
.panel-intake[data-paso-actual="5"] .asis-pie { position: static; }
.asis-progreso { flex: 1; text-align: center; font-size: .85rem; color: var(--ld-muted, #5A6A85); }
.asis-progreso.error { color: var(--terracota, #C4553F); font-weight: 700; }
.asis-atras, .asis-siguiente { border-radius: 12px; padding: .7rem 1.2rem; font-weight: 700; cursor: pointer; font: inherit; font-weight: 700; }
.asis-atras { background: #fff; border: 1.5px solid var(--ld-line, #E1E7EF); color: var(--ld-ink, #1C2B4B); }
.asis-siguiente { margin-left: auto; background: var(--ld-ink, #1C2B4B); color: #fff; border: 0; }
.asis-siguiente:hover { background: var(--ld-primary-2, #2B3E66); }
.asis-falta { animation: asis-falta .5s; }
.asis-falta select, .asis-falta input { border-color: var(--terracota, #C4553F) !important; }
@keyframes asis-falta { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.asis-resumen h3 { margin: 0 0 .7rem; font-family: var(--serif, Georgia, serif); }
.asis-dl { margin: 0; display: grid; gap: 0; }
.asis-dl > div { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: .8rem; align-items: start; padding: .65rem 0; border-bottom: 1px solid var(--ld-line, #E1E7EF); }
.asis-dl dt { font-weight: 700; color: var(--ld-muted, #5A6A85); font-size: .86rem; }
.asis-dl dd { margin: 0; }
.asis-dl ul { margin: 0; padding-left: 1.1rem; }
.asis-editar { border: 0; background: none; color: var(--ld-blue, #4E6E9A); font-weight: 700; cursor: pointer; text-decoration: underline; font-size: .82rem; }
.asis-aviso { margin: .8rem 0 0; padding: .65rem .8rem; border-radius: 12px; background: var(--ld-coral-soft, #FEF4E4); color: #7A4A06; font-size: .88rem; }
.asis-listo { margin: .8rem 0 0; color: var(--ld-mint, #2F8A6B); font-weight: 600; font-size: .88rem; }
.mesa.asistente #btn-generar { font-size: 1.05rem; padding: 1rem 1.4rem; }

/* Documento a todo lo ancho después de generar. */
.mesa.asistente-documento { grid-template-columns: minmax(0, 1fr); max-width: 1200px; }
.mesa.asistente-documento .panel-intake { display: none; }
.asis-volver { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--ld-line, #E1E7EF); }
.asis-volver button { border: 1.5px solid var(--ld-line, #E1E7EF); background: #fff; border-radius: 12px; padding: .5rem .9rem; font-weight: 700; cursor: pointer; color: var(--ld-ink, #1C2B4B); }
.asis-volver span { font-size: .84rem; color: var(--ld-muted, #5A6A85); }

@media (max-width: 900px) {
  .asis-pasos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .asis-txt small { display: none; }
  .asis-paso { flex-direction: column; align-items: center; text-align: center; padding: .55rem .3rem; gap: .3rem; }
  .asis-txt strong { font-size: .74rem; }
  .asis-dl > div { grid-template-columns: 1fr auto; }
  .asis-dl dd { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 520px) {
  .asis-txt { display: none; }
  .mesa.asistente #generator-form { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .nem-pcard, .asis-falta { transition: none; animation: none; } }
/* Ejes del nodo central: legibles marcados y sin marcar. */
.nem-mapa-centro .nem-check { background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.18) !important; color: #fff !important; }
.nem-mapa-centro .nem-check span { color: inherit !important; }
.nem-mapa-centro .nem-check:has(input:checked) { background: var(--ld-coral, #F29F2B) !important; border-color: var(--ld-coral, #F29F2B) !important; color: var(--ld-ink, #1C2B4B) !important; }