/* =========================================================
NIVEL.HTML · REVISIÓN 01
Extensión visual de la Portada aprobada.
No sustituye styles.css; solo define la vista académica del nivel.
========================================================= */

.pagina-nivel {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 4%, rgba(18,106,213,.08), transparent 28rem),
    radial-gradient(circle at 92% 16%, rgba(47,158,47,.08), transparent 26rem),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 52%, #f6faff 100%);
}

.nivel-main {
  min-height: 72vh;
  padding: 26px 0 72px;
  overflow: visible;
}

.nivel-ruta-contenedor,
.nivel-contenedor,
.nivel-hero {
  width: min(var(--ancho-maximo), calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

.nivel-ruta-contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.nivel-ruta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--gris);
  font-size: .9rem;
  font-weight: 800;
}

.nivel-ruta a { color: var(--azul-700); }
.nivel-ruta a:hover { text-decoration: underline; }
.nivel-ruta strong { color: var(--texto-fuerte); }

.nivel-volver {
  min-height: 42px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(7,59,122,.12);
  border-radius: 13px;
  color: var(--azul-800);
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 18px rgba(7,59,122,.07);
  font-size: .86rem;
  font-weight: 900;
}

.nivel-volver svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nivel-hero {
  position: relative;
  min-height: 460px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(7,59,122,.13);
  border-radius: 34px;
  background: linear-gradient(140deg, rgba(255,255,255,.99), rgba(239,247,255,.96));
  box-shadow: 0 24px 58px rgba(4,27,58,.15);
}

.nivel-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: linear-gradient(180deg, var(--azul-700), var(--verde-500), var(--naranja-500));
  z-index: 3;
}

.nivel-hero-fondo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 12%, rgba(18,106,213,.13), transparent 24rem),
    radial-gradient(circle at 55% 95%, rgba(47,158,47,.10), transparent 25rem),
    radial-gradient(circle at 95% 10%, rgba(240,107,0,.08), transparent 20rem);
}

.nivel-4to .nivel-hero-fondo {
  background:
    radial-gradient(circle at 10% 12%, rgba(5,34,74,.18), transparent 24rem),
    radial-gradient(circle at 56% 94%, rgba(47,158,47,.12), transparent 25rem),
    radial-gradient(circle at 96% 8%, rgba(240,107,0,.07), transparent 19rem);
}

.nivel-hero-contenido {
  position: relative;
  z-index: 2;
  padding: clamp(34px, 5vw, 62px) clamp(28px, 5vw, 62px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nivel-etiqueta,
.nivel-seccion-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--verde-700);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nivel-etiqueta::before,
.nivel-seccion-etiqueta::before {
  content: "";
  width: 30px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--azul-600), var(--verde-500));
}

.nivel-hero h1 {
  margin: 12px 0 4px;
  color: var(--azul-950);
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 950;
}

.nivel-4to .nivel-hero h1 { color: #031a34; }

.nivel-ciclo {
  margin: 8px 0 0;
  color: var(--azul-700);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 900;
}

.nivel-4to .nivel-ciclo { color: var(--verde-700); }

.nivel-descripcion {
  max-width: 680px;
  margin: 19px 0 0;
  color: #3f4e63;
  font-size: 1.03rem;
  line-height: 1.68;
}

.nivel-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 26px;
}

.nivel-meta-item {
  min-height: 82px;
  padding: 14px 15px;
  border: 1px solid rgba(7,59,122,.10);
  border-radius: 17px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 9px 22px rgba(7,59,122,.06);
  backdrop-filter: blur(8px);
}

.nivel-meta-item span {
  display: block;
  color: var(--gris);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.nivel-meta-item strong {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  color: var(--azul-900);
  font-size: .92rem;
}

.nivel-estado-activo i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--verde-500);
  box-shadow: 0 0 0 5px rgba(47,158,47,.12);
}

.nivel-hero-visual {
  position: relative;
  z-index: 2;
  min-height: 460px;
  padding: 28px 28px 28px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nivel-imagen-marco {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 390px;
  overflow: hidden;
  border: 8px solid rgba(255,255,255,.82);
  border-radius: 28px;
  box-shadow: 0 22px 46px rgba(4,27,58,.23);
}

.nivel-imagen-marco::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3,22,44,.02) 35%, rgba(3,22,44,.72) 100%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.24), transparent 10rem);
}

.nivel-imagen-marco img {
  width: 100%;
  height: 100%;
  min-height: 390px;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
}

.nivel-periodo-actual {
  position: absolute;
  z-index: 4;
  left: 28px;
  right: 56px;
  bottom: 50px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 18px;
  color: white;
  background: rgba(3,22,44,.78);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
}

.nivel-periodo-actual span {
  display: block;
  color: #9ee979;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.nivel-periodo-actual strong {
  display: block;
  margin-top: 4px;
  font-size: 1.08rem;
}

.nivel-periodo-actual small {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.78);
  line-height: 1.45;
}

.nivel-periodos-seccion { margin-top: 54px; }

.nivel-seccion-cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 22px;
}

.nivel-seccion-cabecera > div:first-child { max-width: 790px; }
.nivel-seccion-cabecera h2 {
  margin: 8px 0 7px;
  color: var(--azul-950);
  font-size: clamp(1.75rem, 3.5vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}
.nivel-seccion-cabecera p {
  margin: 0;
  color: var(--texto-suave);
  line-height: 1.6;
}

.nivel-leyenda {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.nivel-leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(7,59,122,.09);
  border-radius: 999px;
  color: var(--gris);
  background: white;
  font-size: .76rem;
  font-weight: 850;
}

.nivel-leyenda i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.leyenda-proximo { background: var(--naranja-500); }
.leyenda-no-disponible { background: #94a3b8; }

.nivel-grid-periodos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.nivel-periodo-card {
  position: relative;
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(230px, .98fr);
  overflow: hidden;
  border: 1px solid rgba(7,59,122,.12);
  border-radius: 27px;
  background: #fff;
  box-shadow: var(--sombra-suave);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.nivel-periodo-card:hover {
  transform: translateY(-5px);
  border-color: rgba(18,106,213,.22);
  box-shadow: 0 22px 48px rgba(4,27,58,.15);
}

.nivel-periodo-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  z-index: 4;
  background: var(--periodo-color, var(--azul-700));
}

.nivel-periodo-contenido {
  position: relative;
  z-index: 2;
  padding: 28px 24px 26px 31px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nivel-periodo-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.nivel-periodo-codigo {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: white;
  background: var(--periodo-color, var(--azul-700));
  box-shadow: 0 11px 23px color-mix(in srgb, var(--periodo-color, var(--azul-700)) 28%, transparent);
  font-size: 1.16rem;
  font-weight: 950;
}

.nivel-periodo-orden {
  color: var(--gris);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.nivel-periodo-card h3 {
  margin: 0;
  color: var(--azul-950);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.13;
  letter-spacing: -.025em;
}

.nivel-periodo-card p {
  margin: 11px 0 16px;
  color: #46566b;
  font-size: .94rem;
  line-height: 1.58;
}

.nivel-periodo-estados {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.nivel-periodo-estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 900;
}

.nivel-periodo-estado::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.estado-proximamente {
  color: var(--naranja-700);
  background: var(--naranja-100);
}
.estado-no-disponible {
  color: #5f6f83;
  background: #eef2f6;
}
.estado-publicado {
  color: var(--verde-800);
  background: var(--verde-100);
}

.nivel-periodo-accion {
  width: max-content;
  min-height: 44px;
  margin-top: 18px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 13px;
  color: white;
  background: linear-gradient(135deg, var(--periodo-color, var(--azul-700)), color-mix(in srgb, var(--periodo-color, var(--azul-700)) 72%, #ffffff));
  font: inherit;
  font-size: .84rem;
  font-weight: 950;
}

.nivel-periodo-accion[aria-disabled="true"] {
  color: #526176;
  background: #edf1f5;
  cursor: not-allowed;
  box-shadow: none;
}

.nivel-periodo-imagen {
  position: relative;
  min-height: 330px;
  overflow: hidden;
}

.nivel-periodo-imagen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.15) 38%, transparent 62%),
    linear-gradient(180deg, transparent 55%, rgba(3,22,44,.18));
}

.nivel-periodo-imagen img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  transition: transform .32s ease;
}
.nivel-periodo-card:hover .nivel-periodo-imagen img { transform: scale(1.035); }

.nivel-apoyos { margin-top: 60px; }
.nivel-seccion-cabecera-compacta { margin-bottom: 19px; }

.nivel-grid-apoyos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.nivel-apoyo-card {
  min-height: 260px;
  padding: 23px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 15px;
  align-items: start;
  border: 1px solid rgba(7,59,122,.11);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: var(--sombra-suave);
}

.nivel-apoyo-icono {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: white;
  box-shadow: 0 11px 22px rgba(4,27,58,.15);
}
.nivel-apoyo-icono svg { width: 25px; height: 25px; fill: currentColor; }
.apoyo-orientaciones .nivel-apoyo-icono { background: linear-gradient(135deg, var(--azul-800), var(--azul-500)); }
.apoyo-recursos .nivel-apoyo-icono { background: linear-gradient(135deg, var(--verde-700), var(--verde-500)); }
.apoyo-evaluaciones .nivel-apoyo-icono { background: linear-gradient(135deg, var(--naranja-700), var(--naranja-500)); }

.nivel-apoyo-card small {
  color: var(--gris);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.nivel-apoyo-card h3 { margin: 6px 0 8px; color: var(--azul-950); font-size: 1.15rem; }
.nivel-apoyo-card p { margin: 0; color: var(--texto-suave); font-size: .9rem; line-height: 1.55; }
.nivel-apoyo-card a {
  margin-top: 17px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--azul-700);
  font-size: .84rem;
  font-weight: 900;
}

.nivel-avisos { margin-top: 26px; }
.nivel-aviso-vacio {
  padding: 25px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 17px;
  align-items: center;
  border: 1px dashed rgba(7,59,122,.20);
  border-radius: 23px;
  background: rgba(255,255,255,.78);
}
.nivel-aviso-icono {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--azul-700);
  background: var(--azul-100);
}
.nivel-aviso-icono svg { width: 27px; height: 27px; fill: currentColor; }
.nivel-aviso-vacio h2 { margin: 7px 0 6px; color: var(--azul-950); font-size: 1.28rem; }
.nivel-aviso-vacio p { margin: 0; color: var(--texto-suave); line-height: 1.55; }

.nivel-no-disponible {
  width: min(760px, calc(100% - 32px));
  margin: 70px auto 40px;
  padding: 48px 32px;
  text-align: center;
  border: 1px solid rgba(7,59,122,.13);
  border-radius: 30px;
  background: white;
  box-shadow: var(--sombra-media);
}
.nivel-no-disponible img { width: 130px; margin: 0 auto 18px; }
.nivel-no-disponible > span { color: var(--naranja-700); font-size: .78rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.nivel-no-disponible h1 { margin: 10px 0; color: var(--azul-950); font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.05em; }
.nivel-no-disponible p { max-width: 580px; margin: 0 auto; color: var(--texto-suave); line-height: 1.6; }
.nivel-no-disponible a { min-height: 46px; margin-top: 22px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 14px; color: white; background: linear-gradient(135deg,var(--azul-800),var(--azul-600)); font-weight: 900; }

@media (max-width: 1040px) {
  .nivel-hero { grid-template-columns: 1fr; }
  .nivel-hero-visual { min-height: 400px; padding: 0 28px 28px; }
  .nivel-imagen-marco { min-height: 370px; }
  .nivel-imagen-marco img { min-height: 370px; }
  .nivel-periodo-actual { left: 50px; right: 50px; bottom: 52px; }
  .nivel-grid-periodos { grid-template-columns: 1fr; }
  .nivel-grid-apoyos { grid-template-columns: 1fr; }
  .nivel-apoyo-card { min-height: 0; }
}

@media (max-width: 760px) {
  .nivel-main { padding-top: 16px; }
  .nivel-ruta-contenedor { align-items: flex-start; }
  .nivel-volver { width: 42px; height: 42px; min-height: 42px; padding: 0; justify-content: center; font-size: 0; }
  .nivel-volver svg { width: 20px; height: 20px; }
  .nivel-hero { width: calc(100% - 24px); border-radius: 25px; }
  .nivel-hero-contenido { padding: 34px 20px 24px; }
  .nivel-hero h1 { font-size: clamp(2.45rem, 14vw, 4rem); }
  .nivel-descripcion { font-size: .96rem; }
  .nivel-meta { grid-template-columns: 1fr; }
  .nivel-meta-item { min-height: 0; }
  .nivel-hero-visual { min-height: 330px; padding: 0 16px 16px; }
  .nivel-imagen-marco,
  .nivel-imagen-marco img { min-height: 310px; }
  .nivel-periodo-actual { left: 30px; right: 30px; bottom: 31px; }
  .nivel-contenedor { width: calc(100% - 24px); }
  .nivel-periodos-seccion { margin-top: 42px; }
  .nivel-seccion-cabecera { display: block; }
  .nivel-leyenda { justify-content: flex-start; margin-top: 15px; }
  .nivel-periodo-card { grid-template-columns: 1fr; }
  .nivel-periodo-imagen { min-height: 230px; order: -1; }
  .nivel-periodo-imagen img { min-height: 230px; }
  .nivel-periodo-imagen::after { background: linear-gradient(180deg, transparent 55%, rgba(3,22,44,.28)); }
  .nivel-periodo-contenido { padding: 24px 20px 24px 25px; }
  .nivel-apoyo-card { grid-template-columns: 48px 1fr; padding: 20px 17px; }
  .nivel-aviso-vacio { grid-template-columns: 1fr; text-align: left; }
}

@media (max-width: 430px) {
  .nivel-ruta-contenedor { width: calc(100% - 24px); }
  .nivel-ruta { max-width: calc(100% - 54px); font-size: .8rem; }
  .nivel-etiqueta, .nivel-seccion-etiqueta { font-size: .7rem; }
  .nivel-periodo-actual strong { font-size: .98rem; }
  .nivel-periodo-actual small { font-size: .76rem; }
  .nivel-periodo-superior { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .nivel-periodo-card,
  .nivel-periodo-imagen img { transition: none; }
}

/* RC7 · fechas, progreso y clases en las tarjetas P1–P4 */
.estado-disponible{color:var(--verde-800);background:var(--verde-100)}
.nivel-periodo-fechas{width:max-content;max-width:100%;margin:-3px 0 10px;display:inline-flex;align-items:center;gap:7px;color:#39556f;font-size:.78rem;text-transform:capitalize}
.nivel-periodo-calendario{width:24px;height:24px;display:grid;place-items:center;border-radius:8px;color:var(--periodo-color);background:color-mix(in srgb,var(--periodo-color) 10%,#fff);flex:0 0 24px}.nivel-periodo-calendario svg{width:15px;height:15px;display:block}
.nivel-periodo-fechas strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nivel-periodo-progreso{margin-top:15px;padding:12px 13px;border:1px solid rgba(7,59,122,.09);border-radius:14px;background:#f8fbfe}
.nivel-periodo-progreso-cabecera{display:flex;justify-content:space-between;gap:12px;color:#41566d;font-size:.76rem}.nivel-periodo-progreso-cabecera strong{color:var(--azul-900)}
.nivel-periodo-progreso-pista{height:7px;margin-top:7px;overflow:hidden;border-radius:999px;background:#dde7f0}.nivel-periodo-progreso-pista i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--periodo-color),color-mix(in srgb,var(--periodo-color) 72%,#27c790));transition:width .25s ease}
.nivel-periodo-clases{margin:8px 0 0;display:flex;gap:8px;flex-wrap:wrap}.nivel-periodo-clases div{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:9px;background:#fff;border:1px solid rgba(7,59,122,.08);font-size:.73rem}.nivel-periodo-clases dt{color:#66798c}.nivel-periodo-clases dd{margin:0;color:#20384f;font-weight:900}
.nivel-periodo-mensaje{margin:5px 0 0!important;color:#607185!important;font-size:.76rem!important;line-height:1.4!important}
@media(max-width:720px){.nivel-periodo-fechas{font-size:.74rem}.nivel-periodo-progreso{padding:10px 11px}}