/* Atlas de Maestrías SUNEDU — v4: etapas del plan, certificados, cursos cortos y Mi ruta. Usa los tokens de app.css. */

/* Etapas del plan */
ol.etapas { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--accent); }
ol.etapas > li { position: relative; padding: 0 0 var(--sp-3) var(--sp-4); }
.et-h { display: flex; align-items: center; gap: var(--sp-2); font: 700 var(--fs-ui) var(--font-display); margin-bottom: var(--sp-1); }
.et-n { position: absolute; left: -11px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 11px var(--font-mono); }
.et-h .mono { font-size: var(--fs-label); color: var(--ink-mute); font-weight: 400; }

/* Certificados con botón Mi ruta */
ul.certs { list-style: none; margin: 0; padding: 0; }
ul.certs li { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-bottom: var(--border) solid var(--line); font-size: var(--fs-ui); }
ul.certs li:last-child { border-bottom: 0; }
.save.sm { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-label); flex: none; }

/* Cursos cortos */
.curso { padding: var(--sp-3) 0; border-bottom: var(--border) solid var(--line); }
.curso:last-child { border-bottom: 0; }
.c-top { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: flex-start; }
.curso .t { font-weight: 600; line-height: var(--lh-heading); }
.curso .meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-2); font: var(--fs-label) var(--font-mono); color: var(--ink-soft); align-items: center; }
.curso .meta i { color: var(--ink-mute); margin-right: 3px; }
.c-uni { font: var(--fs-label) var(--font-mono); color: var(--ink-mute); margin-bottom: var(--sp-1); display: flex; align-items: center; gap: var(--sp-1); }
.cursos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 var(--sp-5); }
.cursos-grid .curso { border-top: var(--border) solid var(--line); border-bottom: 0; }

/* Mi ruta */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.kpis > div { padding: var(--sp-3); border: var(--border) solid var(--line); border-radius: var(--radius); background: var(--surface-2); border-top: 3px solid var(--accent); }
.kpis b { display: block; font-size: var(--fs-h2); }
.kpis span { font-size: var(--fs-label); color: var(--ink-mute); }
.ruta-add { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-3); margin-bottom: var(--sp-4); border: var(--border) dashed var(--line-strong); border-radius: var(--radius); }
.ruta-add b { font-size: var(--fs-ui); margin-right: var(--sp-2); }
.ruta-add input, .ruta-add select, input.mini, select.mini { height: 32px; border: var(--border) solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0 var(--sp-2); font-size: var(--fs-ui); color: var(--ink); }
.ruta-add input[name="titulo"] { flex: 2 1 260px; }
.ruta-add input[name="inst"] { flex: 1 1 160px; }
.ruta-add input[name="horas"] { width: 90px; }
input.mini { width: 80px; } input.mini.wide { width: 100%; min-width: 160px; } input[type="date"].mini { width: 140px; }
table.ruta td { vertical-align: middle; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cursos-grid { grid-template-columns: 1fr; } }

.rank-mapa[hidden] { display: none; }