/* Banner compacto con los KPI como pestañas — DataLab
 * Lo usan Estudiantes (Admitidos / Matriculados / Graduados), ICFES (Saber Pro / Saber 11) y Talento Humano.
 * Marcado: <div class="ed-hero ed-hero--compacto"> … <div class="ed-kpi-group ed-kpi-tabs" role="tablist">
 *          <button class="ed-kpi ed-kpi--{tipo}" role="tab" aria-selected> … */
/* Banner compacto: menos alto, título más grande y KPI en una fila. */
.ed-hero.ed-hero--compacto { padding: 1.15rem 1.75rem; }
.ed-hero--compacto .ed-hero-inner { gap: 1.5rem; }
.ed-hero--compacto .ed-hero-kicker { margin-bottom: .45rem; }
.ed-hero--compacto .ed-hero-title { font-size: clamp(2rem, 3.1vw, 2.75rem); margin-bottom: .3rem; }
.ed-hero--compacto .ed-hero-desc { margin-bottom: .6rem; max-width: 640px; }
.ed-hero--compacto .ed-kpi-group { flex-direction: row; gap: .7rem; }
.ed-hero--compacto .ed-kpi { min-width: 0; padding: .7rem 1rem; }
.ed-hero--compacto .ed-kpi:hover { transform: translateY(-2px); }
@media (max-width: 1199.98px) { .ed-hero--compacto .ed-kpi-group { flex-wrap: wrap; } }
@media (max-width: 575.98px) { .ed-hero--compacto .ed-kpi-label { letter-spacing: .02em; font-size: .64rem; } }

/* KPI seleccionables: hacen de pestañas (Admitidos / Matriculados / Graduados). */
.ed-kpi-tabs .ed-kpi { position: relative; font: inherit; text-align: left; color: inherit; cursor: pointer; overflow: hidden;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); padding: .7rem 1.7rem .7rem .8rem; min-width: 168px;
  transition: background .18s, border-color .18s, transform .18s, box-shadow .18s; }
.ed-kpi-tabs .ed-kpi-txt { display: flex; flex-direction: column; }
.ed-kpi-tabs .ed-kpi:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); transform: translateY(-2px); }
.ed-kpi-tabs .ed-kpi:focus-visible { outline: 3px solid rgba(255,255,255,.7); outline-offset: 3px; }
.ed-kpi-tabs .ed-kpi::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--kpi-acento); transform: scaleX(0); transform-origin: left; transition: transform .22s; }
.ed-kpi-tabs .ed-kpi--admitidos { --kpi-acento: #64dfff; --kpi-tinta: #0b6f8f; --kpi-suave: #e3f8ff; }
.ed-kpi-tabs .ed-kpi--matriculados { --kpi-acento: #ffd43b; --kpi-tinta: #8a6500; --kpi-suave: #fff6d6; }
.ed-kpi-tabs .ed-kpi--graduados { --kpi-acento: #28e4c0; --kpi-tinta: #00775f; --kpi-suave: #dcfbf3; }
/* Seleccionado: tarjeta clara sobre el verde, cifra en su color y barra de acento. */
.ed-kpi-tabs .ed-kpi.active { background: #fff; border-color: #fff; transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 10px 26px rgba(0,30,25,.32); }
.ed-kpi-tabs .ed-kpi.active::before { transform: scaleX(1); }
.ed-kpi-tabs .ed-kpi.active .ed-kpi-value { color: #0b2f29; }
.ed-kpi-tabs .ed-kpi.active .ed-kpi-label { color: var(--kpi-tinta); }
.ed-kpi-tabs .ed-kpi.active .ed-kpi-icon { background: var(--kpi-suave); color: var(--kpi-tinta); }
.ed-kpi-tabs .ed-kpi:not(.active)::after { content: "\f054"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; font-size: .62rem;
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.45); transition: transform .18s, color .18s; }
.ed-kpi-tabs .ed-kpi:not(.active):hover::after { color: #fff; transform: translate(2px, -50%); }
@media (prefers-reduced-motion: reduce) { .ed-kpi-tabs .ed-kpi, .ed-kpi-tabs .ed-kpi::before { transition: none; } }
.ed-kpi-tabs .ed-kpi--saberpro { --kpi-acento: #28e4c0; --kpi-tinta: #00775f; --kpi-suave: #dcfbf3; }
.ed-kpi-tabs .ed-kpi--saber11 { --kpi-acento: #64dfff; --kpi-tinta: #0b6f8f; --kpi-suave: #e3f8ff; }

.ed-kpi-tabs .ed-kpi--profesores { --kpi-acento: #c4b0ff; --kpi-tinta: #5b3fc4; --kpi-suave: #efeaff; }
.ed-kpi-tabs .ed-kpi--administrativos { --kpi-acento: #64dfff; --kpi-tinta: #0b6f8f; --kpi-suave: #e3f8ff; }
.ed-kpi-tabs .ed-kpi--grupos { --kpi-acento: #28e4c0; --kpi-tinta: #00775f; --kpi-suave: #dcfbf3; }
.ed-kpi-tabs .ed-kpi--semilleros { --kpi-acento: #c8ec6a; --kpi-tinta: #4d7a00; --kpi-suave: #f1fad8; }
.ed-kpi-tabs .ed-kpi--bienestar { --kpi-acento: #ffb38a; --kpi-tinta: #b4471f; --kpi-suave: #ffece2; }
.ed-kpi-tabs .ed-kpi--gratuidad { --kpi-acento: #f5d36b; --kpi-tinta: #8a6400; --kpi-suave: #fff6d6; }
.ed-kpi-tabs .ed-kpi--convenios { --kpi-acento: #9ec2ff; --kpi-tinta: #1f4f9a; --kpi-suave: #e4eeff; }
.ed-kpi-tabs .ed-kpi--movilidades { --kpi-acento: #7fd8f5; --kpi-tinta: #00658a; --kpi-suave: #ddf5fd; }
.ed-kpi-tabs .ed-kpi--programas { --kpi-acento: #aab8ff; --kpi-tinta: #2f40a8; --kpi-suave: #e8ecff; }

/* Panel del tablero elegido (Talento Humano, 2026-10-22): pie blanco del banner,
 * con el mismo fondo que la tarjeta seleccionada y una muesca que apunta a ella,
 * como una pestaña que abre su panel. Título grande con el acento de la tarjeta,
 * descripción amplia y «Ver tutorial» junto al título. La muesca la ubica la
 * página (--muesca-x) bajo la tarjeta activa. El banner tiene overflow:hidden:
 * sus esquinas recortan las del panel. */
.ed-hero-seccion { position: relative; display: flex; align-items: flex-start; gap: 1.1rem;
  margin: 1.2rem -1.75rem -1.15rem; padding: 1.15rem 1.75rem 1.3rem; background: #fff; }
.ed-hero-seccion::before { content: ""; position: absolute; top: -8px; left: var(--muesca-x, calc(100% - 7rem)); width: 16px; height: 16px;
  background: #fff; border-radius: 3px 0 0 0; transform: translateX(-50%) rotate(45deg); transition: left .25s ease; }
.ed-hero-seccion--profesores { --sec-acento: #8f73f0; --sec-tinta: #5b3fc4; --sec-suave: #efeaff; }
.ed-hero-seccion--administrativos { --sec-acento: #22b8e0; --sec-tinta: #0b6f8f; --sec-suave: #e3f8ff; }
.ed-hero-seccion--grupos { --sec-acento: #1fbf9f; --sec-tinta: #00775f; --sec-suave: #dcfbf3; }
.ed-hero-seccion--semilleros { --sec-acento: #8cc63f; --sec-tinta: #4d7a00; --sec-suave: #f1fad8; }
.ed-hero-seccion--bienestar { --sec-acento: #f07c4a; --sec-tinta: #b4471f; --sec-suave: #ffece2; }
.ed-hero-seccion--gratuidad { --sec-acento: #d9a71e; --sec-tinta: #8a6400; --sec-suave: #fff6d6; }
.ed-hero-seccion--convenios { --sec-acento: #4f86d9; --sec-tinta: #1f4f9a; --sec-suave: #e4eeff; }
.ed-hero-seccion--movilidades { --sec-acento: #17a6cf; --sec-tinta: #00658a; --sec-suave: #ddf5fd; }
.ed-hero-seccion--programas { --sec-acento: #5468e0; --sec-tinta: #2f40a8; --sec-suave: #e8ecff; }
/* Estudiantes (2026-10-22): los acentos de sus tarjetas, más hondos sobre el blanco. */
.ed-hero-seccion--admitidos { --sec-acento: #22b8e0; --sec-tinta: #0b6f8f; --sec-suave: #e3f8ff; }
.ed-hero-seccion--matriculados { --sec-acento: #f0b400; --sec-tinta: #8a6500; --sec-suave: #fff6d6; }
.ed-hero-seccion--graduados { --sec-acento: #14bf9c; --sec-tinta: #00775f; --sec-suave: #dcfbf3; }
.ed-hero-seccion-ico { flex: none; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 1.35rem;
  background: var(--sec-suave, #eef6f4); color: var(--sec-tinta, #00594e); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.ed-hero-seccion-txt { flex: 1 1 auto; min-width: 0; }
.ed-hero-seccion-cab { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .85rem; margin-bottom: .35rem; }
.ed-hero-seccion-tit { margin: 0; color: #0b2f29; font-size: clamp(1.3rem, 1.9vw, 1.65rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.2;
  padding-left: .7rem; border-left: 4px solid var(--sec-acento, #00594e); }
.ed-hero-seccion-desc { margin: 0; color: #4a5d59; font-size: .93rem; line-height: 1.62; text-align: justify; hyphens: auto; }
.ed-hero-tutorial { display: inline-flex; align-items: center; gap: .45rem; height: 34px; padding: 0 1rem 0 .8rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--sec-tinta, #00594e); color: #fff; font: inherit; font-size: .82rem; font-weight: 800; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 6px 14px color-mix(in srgb, var(--sec-tinta, #00594e) 30%, transparent); transition: transform .18s, box-shadow .18s, filter .18s; }
.ed-hero-tutorial i { font-size: 1rem; }
.ed-hero-tutorial:hover { transform: translateY(-1px); filter: brightness(1.08); }
.ed-hero-tutorial:focus-visible { outline: 3px solid color-mix(in srgb, var(--sec-tinta, #00594e) 45%, transparent); outline-offset: 2px; }
.ed-hero-tutorial[hidden] { display: none; }
@media (max-width: 575.98px) {
  .ed-hero-seccion { padding: 1rem 1.75rem 1.15rem; }
  .ed-hero-seccion-ico { display: none; }   /* la raya de acento del título basta; la descripción usa todo el ancho */
  .ed-hero-seccion-desc { font-size: .86rem; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .ed-hero-tutorial, .ed-hero-seccion::before { transition: none; } }