/* Malla interactiva · identidad CEFUNT */
.malla-page {
  --malla-yellow: var(--yellow);
  --malla-ink: var(--ink);
  --malla-paper: var(--paper);
  --malla-white: var(--white);
  --malla-line: var(--line);
  background: var(--malla-paper);
}

.malla-hero {
  min-height: 520px;
  padding: clamp(4.5rem, 8vw, 8rem) var(--pad);
  background: var(--ink);
  color: var(--white);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .5fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
  position: relative;
  overflow: hidden;
}

.malla-hero::after {
  content: "";
  position: absolute;
  width: 34rem;
  height: 34rem;
  right: -17rem;
  top: -17rem;
  border: 1px solid rgba(255, 180, 4, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgba(255, 180, 4, .025), 0 0 0 10rem rgba(255, 180, 4, .025);
  pointer-events: none;
}

.malla-hero-copy { position: relative; z-index: 1; }
.malla-hero h1 {
  max-width: 10ch;
  font: 600 clamp(3.4rem, 7vw, 7rem)/.92 var(--display);
  letter-spacing: -.065em;
}
.malla-hero h1 em { color: var(--yellow); font-style: normal; }
.malla-hero-copy > p:not(.eyebrow) {
  max-width: 650px;
  color: rgba(255,255,255,.62);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  margin-top: 1.8rem;
}
.malla-hero-actions { margin-top: 2.4rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }

.malla-hero-aside {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: 1.2rem;
}
.malla-index { color: var(--yellow); font: 700 .75rem var(--display); letter-spacing: .14em; }
.malla-hero-aside strong { display: block; font: 600 clamp(1.4rem, 2vw, 2rem)/1.06 var(--display); letter-spacing: -.035em; margin: 1.2rem 0 .8rem; }
.malla-hero-aside p { color: rgba(255,255,255,.52); font-size: .9rem; }

.malla-tool { background: var(--paper); }
.malla-tool-head {
  max-width: var(--max);
  margin: 0 auto 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
}
.malla-tool-head h2 { font: 600 clamp(2.6rem, 5vw, 5.1rem)/.98 var(--display); letter-spacing: -.055em; }
.malla-progress-meta { text-align: right; }
.malla-progress-meta p { color: var(--muted); font-size: .78rem; margin-top: .65rem; }

.contador-creditos {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .7rem 1rem;
  background: var(--yellow);
  color: var(--ink);
  border: 1px solid rgba(17,17,15,.24);
  font: 700 .8rem var(--body);
  letter-spacing: .02em;
}

.malla-legend {
  max-width: var(--max);
  margin: 0 auto 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: clamp(1rem, 3vw, 2.2rem);
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
}
.malla-legend span { display: inline-flex; align-items: center; gap: .55rem; }
.legend-dot { width: 10px; height: 10px; border: 1px solid var(--line); display: inline-block; }
.legend-dot.disponible { background: var(--white); }
.legend-dot.aprobado { background: var(--yellow); border-color: #b57c00; }
.legend-dot.bloqueado { background: #d9d7cf; }
.legend-dot.electivo { background: var(--white); border: 2px dashed #987000; }

.scroll-hint {
  max-width: var(--max);
  margin: 0 auto 1rem;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  text-align: left;
}

.malla-board {
  max-width: var(--max);
  margin: auto;
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 1rem;
  overflow: hidden;
}

.tabla-ciclos {
  display: flex;
  flex-direction: row;
  gap: .75rem;
  overflow-x: auto;
  padding: .15rem .15rem 1rem;
  scroll-behavior: smooth;
  scrollbar-color: var(--yellow) rgba(255,255,255,.12);
  scrollbar-width: thin;
}
.tabla-ciclos::-webkit-scrollbar { height: 7px; }
.tabla-ciclos::-webkit-scrollbar-track { background: rgba(255,255,255,.1); }
.tabla-ciclos::-webkit-scrollbar-thumb { background: var(--yellow); }

.columna-ciclo {
  flex: 0 0 158px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
}

.ciclo {
  min-height: 48px;
  color: var(--yellow);
  font: 700 .7rem/1.2 var(--body);
  letter-spacing: .13em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.16);
  padding: .75rem .35rem;
  text-align: left;
}

.curso {
  width: 100%;
  min-height: 82px;
  padding: .85rem .8rem;
  border-radius: 0;
  border: 1px solid rgba(17,17,15,.14);
  background: var(--white);
  color: var(--ink);
  box-shadow: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  position: relative;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.curso:hover { transform: translateY(-2px); background: #fff8df; border-color: var(--yellow); box-shadow: none; }
.nombre-curso { font: 600 .8rem/1.12 var(--display); letter-spacing: -.018em; }
.creditos { color: var(--muted); font-size: .65rem; margin-top: .45rem; }

.curso.aprobado,
.curso.electivo.aprobado {
  background: var(--yellow) !important;
  color: var(--ink) !important;
  border-color: #b57c00 !important;
  box-shadow: none !important;
}
.curso.aprobado::after {
  content: "✓";
  position: absolute;
  top: .45rem;
  right: .55rem;
  font-weight: 800;
  font-size: .72rem;
}
.curso.aprobado .creditos,
.curso.electivo.aprobado .nombre-curso,
.curso.electivo.aprobado .creditos,
.curso.electivo.aprobado .estado-electivo { color: rgba(17,17,15,.68) !important; }

.curso.bloqueado {
  background: #292925;
  color: rgba(255,255,255,.36);
  border-color: rgba(255,255,255,.08);
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
}
.curso.bloqueado .creditos { color: rgba(255,255,255,.26); }
.curso.bloqueado:hover { transform: none; background: #292925; border-color: rgba(255,255,255,.08); }

.curso.electivo {
  background: var(--white);
  border: 1px dashed var(--yellow);
}
.curso.electivo:hover { border-color: var(--yellow); background: #fff8df; }
.estado-electivo { color: #7b5700; font-size: .58rem; font-weight: 700; margin-top: .35rem; line-height: 1.2; }

.popover-electivos {
  position: fixed;
  width: min(380px, calc(100vw - 24px));
  max-height: min(500px, calc(100vh - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 9999;
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 1.15rem;
  box-shadow: 14px 14px 0 rgba(17,17,15,.13);
  font-family: var(--body);
  text-align: left;
  color: var(--ink);
  animation: aparecerPopover .16s ease-out;
}

.popover-electivos h3,
.popover-electivos h4 { font-family: var(--display); }
.popover-electivos button {
  border-radius: 0 !important;
}

/* Recolorea controles generados por el JS original sin alterar su lógica. */
.popover-electivos [class*="opcion"],
.popover-electivos button {
  font-family: var(--body);
}

.malla-note {
  max-width: var(--max);
  margin: 1rem auto 0;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--yellow);
  background: var(--white);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: baseline;
}
.malla-note strong { font: 700 .8rem var(--body); text-transform: uppercase; letter-spacing: .08em; }
.malla-note p { color: var(--muted); font-size: .82rem; }

.curriculum-interactive-cta {
  max-width: var(--max);
  margin: 0 auto 1.25rem;
  background: var(--ink);
  color: var(--white);
  padding: clamp(1.3rem, 2.7vw, 2rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  border-left: 5px solid var(--yellow);
}
.curriculum-interactive-cta .card-kicker { color: var(--yellow); }
.curriculum-interactive-cta h3 { font: 600 clamp(1.55rem, 2.6vw, 2.4rem)/1 var(--display); letter-spacing: -.04em; margin: .4rem 0 .65rem; }
.curriculum-interactive-cta p { color: rgba(255,255,255,.56); max-width: 690px; font-size: .88rem; }

@media (max-width: 820px) {
  .malla-hero { grid-template-columns: 1fr; min-height: auto; }
  .malla-hero-aside { max-width: 520px; }
  .malla-tool-head { grid-template-columns: 1fr; }
  .malla-progress-meta { text-align: left; }
  .curriculum-interactive-cta { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .malla-hero { padding-top: 4rem; padding-bottom: 4rem; }
  .malla-hero h1 { font-size: clamp(3rem, 15vw, 4.4rem); }
  .malla-board { margin-inline: calc(var(--pad) * -1); border-left: 0; border-right: 0; padding-inline: .75rem; }
  .columna-ciclo { flex-basis: 146px; }
  .malla-note { grid-template-columns: 1fr; }
}

.popover-electivos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: .45rem;
}
.popover-electivos-header h3 {
  margin: 0;
  color: var(--ink);
  font: 600 1.08rem/1.1 var(--display);
  letter-spacing: -.025em;
}
.popover-cerrar {
  all: unset;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease;
}
.popover-cerrar:hover { background: var(--yellow); }
.popover-ayuda {
  margin: 0 0 .9rem;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.45;
}
.lista-opciones-electivas { display: flex; flex-direction: column; gap: .55rem; }
.opcion-electiva {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--white);
  padding: .8rem .85rem;
  cursor: pointer;
  font-family: var(--body);
  text-align: left;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.opcion-electiva:hover { transform: translateY(-2px); border-color: var(--yellow); background: #fff8df; }
.opcion-electiva strong { color: var(--ink); font: 600 .82rem/1.2 var(--display); }
.opcion-electiva span { color: var(--muted); font-size: .7rem; }
.opcion-electiva small { color: #7b5700; font-size: .65rem; line-height: 1.3; }
.opcion-electiva.seleccionada { background: var(--yellow); border-color: #b57c00; color: var(--ink); }
.opcion-electiva.seleccionada strong,
.opcion-electiva.seleccionada span,
.opcion-electiva.seleccionada small { color: var(--ink); }
.opcion-electiva.opcion-bloqueada { background: #e5e3db; border-color: #d2d0c7; cursor: not-allowed; opacity: .72; }
.opcion-electiva.opcion-bloqueada:hover { transform: none; border-color: #d2d0c7; }
.opcion-electiva.opcion-bloqueada strong,
.opcion-electiva.opcion-bloqueada span,
.opcion-electiva.opcion-bloqueada small { color: #8a8881; }
.quitar-electivo {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  margin-top: .75rem;
  padding: .72rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background .18s ease;
}
.quitar-electivo:hover { background: var(--yellow); }