/* =========================================================
PERIODO.HTML · REVISIÓN 01
Extensión directa de la Portada y nivel.html aprobados.
========================================================= */
.pagina-periodo {
  --periodo-color: var(--azul-700);
  min-height: 100vh;
  background:
    radial-gradient(circle at 7% 8%, color-mix(in srgb, var(--periodo-color) 9%, transparent), transparent 28rem),
    radial-gradient(circle at 94% 25%, rgba(47,158,47,.08), transparent 24rem),
    linear-gradient(180deg, #f8fbff 0%, #fff 46%, #f6faff 100%);
}
.periodo-main { min-height: 72vh; padding: 24px 0 72px; overflow: visible; }
.periodo-ruta,
.periodo-hero,
.periodo-resumen,
.periodo-secciones,
.periodo-orientacion-final { width: min(var(--ancho-maximo), calc(100% - 32px)); margin-inline: auto; }
.periodo-ruta { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:16px; color:var(--gris); font-size:.86rem; font-weight:800; }
.periodo-ruta a:hover { color:var(--azul-700); }
.periodo-ruta strong { color:var(--azul-900); }
.periodo-hero { position:relative; min-height:540px; overflow:hidden; border-radius:34px; isolation:isolate; box-shadow:0 25px 60px rgba(3,22,44,.25); background:#082c5c; --periodo-capa-fuerte:.96; --periodo-capa-media:.89; --periodo-capa-suave:.32; --periodo-capa-inferior:.55; }
.periodo-hero[data-altura="compacta"]{min-height:460px}.periodo-hero[data-altura="compacta"] .periodo-hero-contenido{min-height:460px}.periodo-hero[data-altura="media"]{min-height:540px}.periodo-hero[data-altura="media"] .periodo-hero-contenido{min-height:540px}.periodo-hero[data-altura="amplia"]{min-height:660px}.periodo-hero[data-altura="amplia"] .periodo-hero-contenido{min-height:660px}
.periodo-hero-imagen { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-3; }
.periodo-hero-capa { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg, rgba(3,18,38,var(--periodo-capa-fuerte)) 0%, rgba(3,28,60,var(--periodo-capa-media)) 44%, rgba(3,28,60,var(--periodo-capa-suave)) 72%, rgba(3,18,38,.2) 100%), linear-gradient(180deg, transparent 50%, rgba(3,18,38,var(--periodo-capa-inferior))); }
.periodo-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 22% 15%, color-mix(in srgb, var(--periodo-color) 44%, transparent), transparent 22rem); }
.periodo-hero-contenido { width:min(720px, 70%); min-height:540px; padding:54px 56px; display:flex; flex-direction:column; justify-content:center; color:white; }
.periodo-hero-superior { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.periodo-codigo { display:inline-flex; align-items:center; justify-content:center; min-width:68px; min-height:42px; padding:0 17px; border-radius:999px; color:white; background:var(--periodo-color); font-weight:950; letter-spacing:.08em; box-shadow:0 12px 26px color-mix(in srgb, var(--periodo-color) 35%, transparent); }
.periodo-estado { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 15px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.1); backdrop-filter:blur(8px); font-size:.82rem; font-weight:900; }
.periodo-estado::before { content:""; width:9px; height:9px; border-radius:50%; background:#ffb255; box-shadow:0 0 0 5px rgba(255,178,85,.15); }
.periodo-nivel { margin:24px 0 7px; color:#a9ddff; font-size:.96rem; font-weight:900; letter-spacing:.025em; }
.periodo-hero h1 { margin:0; font-size:clamp(2.8rem, 7vw, 5.5rem); line-height:.94; letter-spacing:-.065em; font-weight:950; }
.periodo-unidad { margin:13px 0 0; color:#d8edff; font-size:clamp(1.02rem, 2vw, 1.32rem); font-weight:850; }
.periodo-descripcion { max-width:660px; margin:18px 0 0; color:rgba(255,255,255,.84); line-height:1.68; font-size:1rem; }
.periodo-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:24px; }
.periodo-meta div { min-height:75px; padding:13px 14px; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:rgba(255,255,255,.08); backdrop-filter:blur(8px); }
.periodo-meta span { display:block; color:rgba(255,255,255,.62); font-size:.69rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.periodo-meta strong { display:block; margin-top:6px; color:white; font-size:.88rem; }
.periodo-hero-acciones { display:flex; flex-wrap:wrap; gap:11px; margin-top:26px; }
.periodo-boton { min-height:47px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:14px; font-size:.88rem; font-weight:950; transition:.22s ease; }
.periodo-boton svg { width:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.periodo-boton:hover { transform:translateY(-2px); }
.periodo-boton-primario { color:white; background:var(--periodo-color); box-shadow:0 14px 30px color-mix(in srgb, var(--periodo-color) 35%, transparent); }
.periodo-boton-claro { color:#082c5c; background:white; }
.periodo-resumen { display:grid; grid-template-columns:1.3fr .85fr; gap:20px; margin-top:26px; }
.periodo-proposito,
.periodo-progreso { padding:28px; border:1px solid var(--borde); border-radius:25px; background:rgba(255,255,255,.94); box-shadow:var(--sombra-suave); }
.periodo-proposito { position:relative; overflow:hidden; }
.periodo-proposito::before { content:""; position:absolute; inset:0 auto 0 0; width:7px; background:var(--periodo-color); }
.periodo-etiqueta { color:var(--periodo-color); font-size:.73rem; font-weight:950; letter-spacing:.075em; text-transform:uppercase; }
.periodo-proposito h2,
.periodo-progreso h2,
.periodo-secciones-cabecera h2,
.periodo-orientacion-final h2 { margin:8px 0 0; color:var(--azul-950); font-size:clamp(1.45rem,3vw,2rem); letter-spacing:-.04em; }
.periodo-proposito p { margin:14px 0 0; color:var(--texto-suave); line-height:1.72; }
.periodo-progreso-cabecera { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.periodo-progreso-cabecera > strong { color:var(--periodo-color); font-size:2rem; line-height:1; }
.periodo-barra { height:12px; margin-top:22px; overflow:hidden; border-radius:999px; background:#e8edf3; }
.periodo-barra span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--periodo-color),color-mix(in srgb,var(--periodo-color) 62%,#fff)); transition:width .5s ease; }
.periodo-progreso-datos { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:13px; color:var(--gris); font-size:.79rem; }
.periodo-progreso-datos b { color:var(--azul-900); }
.periodo-secciones { margin-top:64px; scroll-margin-top:100px; }
.periodo-secciones-cabecera { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.periodo-secciones-cabecera p { max-width:710px; margin:10px 0 0; color:var(--gris); line-height:1.6; }
.periodo-leyenda { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 14px; color:var(--gris); font-size:.75rem; font-weight:800; }
.periodo-leyenda span { display:flex; align-items:center; gap:7px; }
.periodo-leyenda i { width:9px; height:9px; border-radius:50%; }
.leyenda-disponible { background:var(--verde-500); }
.leyenda-preparacion { background:var(--naranja-500); }
.leyenda-privado { background:#8896a8; }
.periodo-navegacion-secciones { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:22px; }
.periodo-nav-seccion { position:relative; min-height:82px; padding:10px; display:grid; grid-template-columns:60px 1fr; align-items:center; gap:12px; overflow:hidden; border:1px solid var(--borde); border-radius:18px; color:var(--texto); background:white; text-align:left; cursor:pointer; box-shadow:0 8px 22px rgba(7,59,122,.05); transition:.22s ease; }
.periodo-nav-seccion::before { content:""; position:absolute; inset:auto 0 0; height:4px; background:var(--seccion-color); transform:scaleX(0); transform-origin:left; transition:.22s ease; }
.periodo-nav-seccion:hover,
.periodo-nav-seccion.activo { transform:translateY(-2px); border-color:color-mix(in srgb,var(--seccion-color) 35%,#fff); box-shadow:0 14px 30px color-mix(in srgb,var(--seccion-color) 13%,transparent); }
.periodo-nav-seccion.activo::before { transform:scaleX(1); }
.periodo-nav-seccion img { width:60px; height:60px; object-fit:cover; border-radius:13px; }
.periodo-nav-seccion span { min-width:0; }
.periodo-nav-seccion small { display:inline-grid; place-items:center; width:23px; height:23px; margin-bottom:5px; border-radius:8px; color:white; background:var(--seccion-color); font-size:.67rem; font-weight:950; }
.periodo-nav-seccion strong { display:block; color:var(--azul-950); font-size:.82rem; line-height:1.25; }
.periodo-acordeon { display:grid; gap:14px; }
.periodo-seccion { scroll-margin-top:92px; overflow:hidden; border:1px solid var(--borde); border-radius:23px; background:white; box-shadow:0 10px 28px rgba(7,59,122,.06); }
.periodo-seccion.abierta { border-color:color-mix(in srgb,var(--seccion-color) 32%,#fff); box-shadow:0 17px 40px color-mix(in srgb,var(--seccion-color) 11%,transparent); }
.periodo-seccion-cabecera { width:100%; min-height:112px; padding:12px 18px 12px 12px; display:grid; grid-template-columns:92px 38px 1fr auto 34px; gap:14px; align-items:center; border:0; color:var(--texto); background:white; text-align:left; cursor:pointer; }
.periodo-seccion-imagen { width:92px; height:82px; overflow:hidden; border-radius:16px; }
.periodo-seccion-imagen img { width:100%; height:100%; object-fit:cover; }
.periodo-seccion-numero { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; color:white; background:var(--seccion-color); font-size:.77rem; font-weight:950; }
.periodo-seccion-titulos { min-width:0; }
.periodo-seccion-titulos small { display:block; color:var(--seccion-color); font-size:.7rem; font-weight:950; letter-spacing:.07em; text-transform:uppercase; }
.periodo-seccion-titulos strong { display:block; margin-top:4px; color:var(--azul-950); font-size:1.05rem; }
.periodo-seccion-titulos em { display:block; margin-top:5px; color:var(--gris); font-size:.81rem; font-style:normal; line-height:1.4; }
.periodo-seccion-estado { min-height:31px; padding:0 11px; display:inline-flex; align-items:center; border-radius:999px; font-size:.7rem; font-weight:900; white-space:nowrap; }
.estado-disponible { color:var(--verde-800); background:var(--verde-100); }
.estado-preparacion { color:var(--naranja-700); background:var(--naranja-100); }
.estado-privado { color:#5d6b7c; background:#eef2f6; }
.periodo-seccion-flecha { width:25px; fill:none; stroke:var(--azul-700); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .22s ease; }
.periodo-seccion.abierta .periodo-seccion-flecha { transform:rotate(180deg); }
.periodo-seccion-contenido { border-top:1px solid rgba(7,59,122,.08); background:linear-gradient(180deg,#fbfdff,#fff); }
.periodo-seccion-interior { padding:25px; }
.periodo-grid-textos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.periodo-grid-textos article { min-height:132px; padding:19px; display:grid; grid-template-columns:42px 1fr; gap:13px; border:1px solid rgba(7,59,122,.09); border-radius:18px; background:white; }
.periodo-grid-textos article > span { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:white; background:var(--seccion-color); font-size:.73rem; font-weight:950; }
.periodo-grid-textos h3,
.periodo-grid-actividades h3,
.periodo-grid-recursos h3,
.periodo-cronograma h3 { margin:0; color:var(--azul-950); font-size:.98rem; }
.periodo-grid-textos p,
.periodo-grid-actividades p,
.periodo-grid-recursos p,
.periodo-cronograma p { margin:7px 0 0; color:var(--texto-suave); font-size:.84rem; line-height:1.55; }
.periodo-grid-actividades { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.periodo-grid-actividades article { padding:20px; border:1px solid rgba(47,158,47,.16); border-radius:19px; background:linear-gradient(145deg,#fff,#f4fbf3); }
.actividad-cabecera { display:flex; justify-content:space-between; gap:10px; margin-bottom:13px; }
.actividad-cabecera span { color:var(--verde-800); font-size:.75rem; font-weight:950; text-transform:uppercase; letter-spacing:.06em; }
.actividad-cabecera em { color:var(--gris); font-size:.72rem; font-style:normal; font-weight:850; }
.periodo-grid-actividades button { min-height:39px; margin-top:16px; padding:0 13px; border:0; border-radius:11px; color:#687588; background:#e8edf2; font-size:.75rem; font-weight:900; cursor:not-allowed; }
.periodo-grid-recursos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.periodo-grid-recursos article { min-height:172px; padding:19px; border:1px solid rgba(20,108,184,.14); border-radius:18px; background:white; }
.recurso-tipo { display:inline-flex; min-height:27px; padding:0 10px; align-items:center; border-radius:999px; color:#0b58b4; background:#eaf4ff; font-size:.68rem; font-weight:950; }
.periodo-grid-recursos h3 { margin-top:13px; }
.periodo-grid-recursos small { display:block; margin-top:15px; color:var(--gris); font-size:.7rem; font-weight:850; }
.periodo-cronograma { position:relative; margin:0; padding:0; list-style:none; }
.periodo-cronograma::before { content:""; position:absolute; top:25px; bottom:25px; left:22px; width:3px; border-radius:999px; background:linear-gradient(var(--seccion-color),color-mix(in srgb,var(--seccion-color) 25%,#fff)); }
.periodo-cronograma li { position:relative; display:grid; grid-template-columns:48px 1fr; gap:17px; padding:12px 0; }
.cronograma-numero { position:relative; z-index:1; display:grid; place-items:center; width:46px; height:46px; border:5px solid white; border-radius:50%; color:white; background:var(--seccion-color); font-size:.8rem; font-weight:950; box-shadow:0 5px 14px color-mix(in srgb,var(--seccion-color) 20%,transparent); }
.periodo-cronograma li > div { padding:12px 16px; border:1px solid rgba(111,66,193,.11); border-radius:16px; background:white; }
.periodo-cronograma small { color:var(--seccion-color); font-size:.69rem; font-weight:950; text-transform:uppercase; letter-spacing:.06em; }
.periodo-nota { display:flex; align-items:flex-start; gap:11px; margin-top:18px; padding:15px 17px; border-radius:15px; color:#455469; background:#f0f6fc; }
.periodo-nota svg { flex:0 0 auto; width:21px; fill:var(--azul-700); }
.periodo-nota p { margin:0; font-size:.8rem; line-height:1.55; }
.periodo-vacio { min-height:150px; display:flex; align-items:center; justify-content:center; gap:22px; padding:20px; text-align:left; }
.periodo-vacio img { width:120px; height:105px; object-fit:cover; border-radius:18px; filter:saturate(.65); }
.periodo-vacio h3 { margin:0; color:var(--azul-950); }
.periodo-vacio p { max-width:600px; margin:7px 0 0; color:var(--gris); line-height:1.55; }
.periodo-orientacion-final { display:flex; align-items:center; gap:20px; margin-top:34px; padding:25px 28px; border:1px solid rgba(47,158,47,.16); border-radius:24px; background:linear-gradient(135deg,#effaee,#fff 65%); box-shadow:var(--sombra-suave); }
.periodo-orientacion-final img { width:85px; max-height:72px; object-fit:contain; }
.periodo-orientacion-final p { margin:9px 0 0; color:var(--texto-suave); line-height:1.6; }
.periodo-no-publicado,
.periodo-no-disponible { width:min(760px,calc(100% - 32px)); min-height:520px; margin:25px auto 0; padding:52px 36px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--borde); border-radius:30px; background:white; box-shadow:var(--sombra-media); text-align:center; }
.periodo-no-publicado[hidden], .periodo-no-disponible[hidden] { display:none; }
.periodo-no-publicado img { width:min(430px,80%); max-height:230px; object-fit:cover; border-radius:24px; box-shadow:var(--sombra-media); }
.periodo-no-disponible img { width:130px; max-height:100px; object-fit:contain; }
.periodo-no-publicado > span,
.periodo-no-disponible > span { margin-top:22px; color:var(--naranja-700); font-size:.74rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.periodo-no-publicado h1,
.periodo-no-disponible h1 { margin:10px 0 0; color:var(--azul-950); font-size:clamp(1.8rem,5vw,3rem); letter-spacing:-.05em; }
.periodo-no-publicado p,
.periodo-no-disponible p { max-width:590px; margin:13px 0 0; color:var(--gris); line-height:1.65; }
.periodo-no-publicado a,
.periodo-no-disponible a { min-height:46px; margin-top:23px; padding:0 18px; display:inline-flex; align-items:center; border-radius:13px; color:white; background:var(--azul-700); font-weight:900; }
@media (max-width:980px) {
  .periodo-hero-contenido { width:82%; }
  .periodo-resumen { grid-template-columns:1fr; }
  .periodo-navegacion-secciones { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .periodo-grid-recursos { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .periodo-main { padding-top:18px; }
  .periodo-hero { min-height:650px; border-radius:25px; }
  .periodo-hero[data-altura="compacta"], .periodo-hero[data-altura="compacta"] .periodo-hero-contenido { min-height:560px; }
  .periodo-hero[data-altura="media"], .periodo-hero[data-altura="media"] .periodo-hero-contenido { min-height:650px; }
  .periodo-hero[data-altura="amplia"], .periodo-hero[data-altura="amplia"] .periodo-hero-contenido { min-height:760px; }
  .periodo-hero-capa { background:linear-gradient(180deg,rgba(3,18,38,.38),rgba(3,18,38,.95) 45%,rgba(3,18,38,.98)); }
  .periodo-hero-contenido { width:100%; min-height:650px; padding:245px 23px 28px; justify-content:flex-end; }
  .periodo-hero h1 { font-size:clamp(2.45rem,13vw,4.4rem); }
  .periodo-meta { grid-template-columns:1fr; }
  .periodo-meta div { min-height:64px; }
  .periodo-resumen { margin-top:17px; }
  .periodo-proposito, .periodo-progreso { padding:22px; border-radius:20px; }
  .periodo-secciones { margin-top:48px; }
  .periodo-secciones-cabecera { align-items:flex-start; flex-direction:column; }
  .periodo-leyenda { justify-content:flex-start; }
  .periodo-navegacion-secciones { grid-template-columns:1fr; }
  .periodo-nav-seccion { min-height:74px; }
  .periodo-seccion-cabecera { grid-template-columns:68px 1fr 30px; min-height:100px; padding:10px; }
  .periodo-seccion-imagen { width:68px; height:68px; }
  .periodo-seccion-numero { display:none; }
  .periodo-seccion-estado { grid-column:2; width:max-content; margin-top:5px; }
  .periodo-seccion-flecha { grid-column:3; grid-row:1 / span 2; }
  .periodo-seccion-titulos em { display:none; }
  .periodo-seccion-interior { padding:17px; }
  .periodo-grid-textos, .periodo-grid-actividades { grid-template-columns:1fr; }
  .periodo-orientacion-final { align-items:flex-start; padding:22px; }
  .periodo-orientacion-final img { width:65px; }
}
@media (max-width:460px) {
  .periodo-ruta, .periodo-hero, .periodo-resumen, .periodo-secciones, .periodo-orientacion-final { width:min(100% - 20px,var(--ancho-maximo)); }
  .periodo-hero-contenido { padding-inline:18px; }
  .periodo-hero-acciones { flex-direction:column; }
  .periodo-boton { width:100%; }
  .periodo-progreso-datos { flex-direction:column; }
  .periodo-orientacion-final { flex-direction:column; }
  .periodo-vacio { flex-direction:column; text-align:center; }
}
@media (prefers-reduced-motion:reduce) {
  .periodo-boton, .periodo-nav-seccion, .periodo-seccion-flecha, .periodo-barra span { transition:none; }
}

/* =========================================================
   TARJETAS PÚBLICAS · CONTENIDO PARA EL CUADERNO
   ========================================================= */
.periodo-tarjetas-publicacion { display: grid; gap: 17px; }
.periodo-tarjeta-contenido { position: relative; overflow: hidden; padding: 22px; border: 1px solid rgba(7,59,122,.11); border-radius: 20px; background: #fff; box-shadow: 0 10px 26px rgba(7,59,122,.05); }
.periodo-tarjeta-contenido::before { position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--seccion-color); content: ""; }
.periodo-tarjeta-cabecera { display: grid; gap: 10px; }
.periodo-tarjeta-cabecera > div { display: flex; align-items: center; gap: 8px; }
.periodo-tarjeta-numero { display: inline-grid; width: 34px; height: 30px; place-items: center; border-radius: 9px; color: #fff; background: var(--seccion-color); font-size: .7rem; font-weight: 950; }
.periodo-tarjeta-estado { display: inline-flex; min-height: 28px; padding: 4px 10px; align-items: center; border-radius: 999px; color: #466074; background: #edf2f6; font-size: .68rem; font-weight: 900; }
.estado-tarjeta-disponible .periodo-tarjeta-estado { color: var(--verde-800); background: var(--verde-100); }
.estado-tarjeta-proximamente .periodo-tarjeta-estado { color: var(--naranja-700); background: var(--naranja-100); }
.estado-tarjeta-cerrado .periodo-tarjeta-estado { color: #5d6b7c; background: #edf1f4; }
.periodo-tarjeta-cabecera h3 { margin: 0; color: var(--azul-950); font-size: clamp(1.12rem, 2vw, 1.38rem); }
.periodo-tarjeta-descripcion { margin: 10px 0 0; color: var(--texto-suave); line-height: 1.7; white-space: pre-line; }
.periodo-tarjeta-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 17px 0 0; }
.periodo-tarjeta-meta > div { padding: 10px 11px; border: 1px solid rgba(7,59,122,.08); border-radius: 12px; background: #f7faff; }
.periodo-tarjeta-meta dt { color: var(--gris); font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.periodo-tarjeta-meta dd { margin: 4px 0 0; color: var(--azul-950); font-size: .77rem; font-weight: 850; line-height: 1.4; }
.periodo-palabras-clave, .periodo-preguntas-guia { margin-top: 17px; }
.periodo-palabras-clave > strong, .periodo-preguntas-guia > strong { color: var(--azul-950); font-size: .82rem; }
.periodo-palabras-clave > div { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.periodo-palabras-clave span { display: inline-flex; min-height: 28px; padding: 4px 9px; align-items: center; border-radius: 999px; color: var(--seccion-color); background: color-mix(in srgb,var(--seccion-color) 9%,#fff); font-size: .7rem; font-weight: 850; }
.periodo-preguntas-guia ol { display: grid; gap: 7px; margin: 9px 0 0; padding-left: 22px; color: var(--texto-suave); font-size: .82rem; }
.periodo-recursos-adjuntos { margin-top: 19px; padding-top: 16px; border-top: 1px solid rgba(7,59,122,.09); }
.periodo-recursos-adjuntos-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.periodo-recursos-adjuntos-cabecera strong { color: var(--azul-950); font-size: .86rem; }
.periodo-recursos-adjuntos-cabecera span { display: inline-grid; min-width: 27px; height: 27px; padding: 0 6px; place-items: center; border-radius: 999px; color: #fff; background: var(--seccion-color); font-size: .7rem; font-weight: 900; }
.periodo-recursos-lista { display: grid; gap: 9px; }
.periodo-recurso-adjunto { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid rgba(7,59,122,.09); border-radius: 13px; background: #f9fbfd; }
.periodo-recurso-icono { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 11px; color: #fff; background: var(--seccion-color); font-size: .62rem; font-weight: 950; text-transform: uppercase; }
.periodo-recurso-adjunto small { color: var(--seccion-color); font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.periodo-recurso-adjunto h4 { margin: 2px 0 0; color: var(--azul-950); font-size: .88rem; }
.periodo-recurso-adjunto p { margin: 4px 0 0; color: var(--texto-suave); font-size: .76rem; }
.periodo-recurso-adjunto em { display: block; margin-top: 4px; overflow: hidden; color: var(--gris); font-size: .68rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.periodo-recurso-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.periodo-recurso-acciones a, .periodo-recurso-acciones button { display: inline-flex; min-height: 35px; padding: 6px 10px; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb,var(--seccion-color) 28%,#fff); border-radius: 9px; color: var(--seccion-color); background: #fff; cursor: pointer; font-size: .7rem; font-weight: 900; }
.periodo-recurso-acciones button:disabled { opacity: .62; cursor: wait; }
.periodo-tarjetas-vacias { min-height: 150px; display: grid; place-content: center; color: var(--gris); text-align: center; }
.periodo-tarjetas-vacias strong { color: var(--azul-950); }
.periodo-tarjetas-vacias p { margin: 6px 0 0; }

@media (max-width: 720px) {
  .periodo-tarjeta-contenido { padding: 18px 16px; }
  .periodo-tarjeta-meta { grid-template-columns: 1fr; }
  .periodo-recurso-adjunto { grid-template-columns: 42px minmax(0,1fr); align-items: start; }
  .periodo-recurso-acciones { grid-column: 2; justify-content: flex-start; }
}

/* =========================================================
   MOTOR COMÚN DE SECCIONES · REVISIÓN 02
   ========================================================= */
.periodo-herramientas-seccion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(7,59,122,.08);
}
.periodo-herramientas-seccion span {
  color: var(--gris);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.periodo-herramientas-seccion button,
.periodo-seguimiento-cabecera button {
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb,var(--seccion-color) 28%,#fff);
  border-radius: 10px;
  color: var(--seccion-color);
  background: #fff;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 900;
}
.periodo-lista-especifica { margin-top: 17px; }
.periodo-lista-especifica > strong { color: var(--azul-950); font-size: .84rem; }
.periodo-lista-especifica ul { display: grid; gap: 7px; margin: 9px 0 0; padding-left: 20px; color: var(--texto-suave); font-size: .82rem; line-height: 1.55; }
.tarjeta-exposicion { background: linear-gradient(145deg,#fff,#fffaf5); }
.tarjeta-exposicion::before { width: 6px; }
.periodo-seguimiento-publico { display: grid; gap: 16px; }
.periodo-seguimiento-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid rgba(13,148,136,.16); border-radius: 17px; background: #f2fbfa; }
.periodo-seguimiento-cabecera strong { color: var(--azul-950); font-size: 1rem; }
.periodo-seguimiento-cabecera p { margin: 5px 0 0; color: var(--texto-suave); font-size: .8rem; line-height: 1.55; }
.periodo-seguimiento-lista { display: grid; gap: 10px; }
.periodo-seguimiento-lista label { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 12px; align-items: start; padding: 14px 15px; border: 1px solid rgba(13,148,136,.13); border-radius: 14px; background: #fff; cursor: pointer; }
.periodo-seguimiento-lista input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--seccion-color); }
.periodo-seguimiento-lista span { display: grid; gap: 4px; }
.periodo-seguimiento-lista strong { color: var(--azul-950); font-size: .88rem; }
.periodo-seguimiento-lista small { color: var(--texto-suave); font-size: .78rem; line-height: 1.5; }
.periodo-seguimiento-lista label:has(input:checked) { border-color: color-mix(in srgb,var(--seccion-color) 32%,#fff); background: color-mix(in srgb,var(--seccion-color) 6%,#fff); }
.periodo-seguimiento-lista label:has(input:checked) strong { text-decoration: line-through; opacity: .72; }
.periodo-seguimiento-ayuda { margin: 0; color: var(--gris); font-size: .75rem; }

@media (max-width: 720px) {
  .periodo-herramientas-seccion,
  .periodo-seguimiento-cabecera { align-items: stretch; flex-direction: column; }
  .periodo-herramientas-seccion button,
  .periodo-seguimiento-cabecera button { width: 100%; }
}

@media print {
  @page { margin: 14mm; }
  body.modo-impresion-seccion { background: #fff !important; }
  body.modo-impresion-seccion .site-header,
  body.modo-impresion-seccion .panel-lateral,
  body.modo-impresion-seccion .panel-overlay,
  body.modo-impresion-seccion .periodo-ruta,
  body.modo-impresion-seccion .periodo-hero,
  body.modo-impresion-seccion .periodo-resumen,
  body.modo-impresion-seccion .periodo-secciones-cabecera,
  body.modo-impresion-seccion .periodo-navegacion-secciones,
  body.modo-impresion-seccion .periodo-orientacion-final,
  body.modo-impresion-seccion .site-footer,
  body.modo-impresion-seccion #bannerVistaPreviaBorrador,
  body.modo-impresion-seccion .periodo-herramientas-seccion,
  body.modo-impresion-seccion .periodo-recurso-acciones,
  body.modo-impresion-seccion .periodo-seguimiento-cabecera button { display: none !important; }
  body.modo-impresion-seccion .periodo-main,
  body.modo-impresion-seccion .periodo-secciones,
  body.modo-impresion-seccion .periodo-acordeon { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  body.modo-impresion-seccion .periodo-seccion { display: none !important; box-shadow: none !important; border: 0 !important; }
  body.modo-impresion-seccion .periodo-seccion.seccion-imprimir-activa { display: block !important; }
  body.modo-impresion-seccion .periodo-seccion-cabecera { min-height: auto; padding: 0 0 12px; grid-template-columns: 70px 34px 1fr; border-bottom: 2px solid #dbe5ee; }
  body.modo-impresion-seccion .periodo-seccion-estado,
  body.modo-impresion-seccion .periodo-seccion-flecha { display: none !important; }
  body.modo-impresion-seccion .periodo-seccion-contenido { display: block !important; border: 0; }
  body.modo-impresion-seccion .periodo-seccion-interior { padding: 16px 0 0; }
  body.modo-impresion-seccion .periodo-tarjeta-contenido,
  body.modo-impresion-seccion .periodo-recurso-adjunto,
  body.modo-impresion-seccion .periodo-grid-textos article,
  body.modo-impresion-seccion .periodo-seguimiento-lista label,
  body.modo-impresion-seccion .periodo-cronograma li { break-inside: avoid; box-shadow: none; }
  body.modo-impresion-seccion * { animation: none !important; transition: none !important; }
}

/* =========================================================
   CIERRE DE ETAPA · NUEVAS SECCIONES Y CONTENIDO ESPECÍFICO
   ========================================================= */
.periodo-texto-especifico,
.periodo-aviso-privacidad {
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid #dbe5ec;
  border-radius: 13px;
  background: #f8fbfd;
}
.periodo-texto-especifico strong { display:block; margin-bottom:5px; color:#17324a; }
.periodo-texto-especifico p { margin:0; color:#4d6375; }
.periodo-aviso-privacidad { color:#516274; border-color:#d7e6ef; background:#eef7fc; font-weight:700; }
.periodo-tarjeta-numero { min-width:48px; }
.tarjeta-cronograma .periodo-tarjeta-numero { min-width:auto; padding:7px 10px; }
.seccion-tipo-cronograma { position:relative; }
.seccion-tipo-cronograma::before { position:absolute; top:20px; bottom:20px; left:27px; width:3px; border-radius:3px; background:color-mix(in srgb,var(--periodo-color,#0b58b4) 35%,#dce8ef); content:""; }
.seccion-tipo-cronograma .periodo-tarjeta-contenido { position:relative; margin-left:14px; }
.periodo-seguimiento-publico .periodo-recursos-adjuntos { margin-top:18px; }
.periodo-lista-especifica ol { margin:10px 0 0; padding-left:22px; }
.periodo-lista-especifica ol li { margin:6px 0; }
@media print {
  .periodo-aviso-privacidad { border:1px solid #bbb; background:#fff; }
}

/* RC7 · tarjetas 10–12 y sus imágenes conservan la misma jerarquía visual que las nueve base. */
.periodo-nav-seccion img,.periodo-seccion-imagen img{object-fit:cover;object-position:center}
.periodo-nav-seccion:nth-child(n+10) small,.periodo-seccion:nth-child(n+10) .periodo-seccion-numero{font-variant-numeric:tabular-nums}

/* RC7 · Evaluaciones realmente relacionadas con el período */
.periodo-evaluaciones-relacionadas{width:min(var(--ancho-maximo),calc(100% - 40px));margin:34px auto 0;padding:28px;border:1px solid var(--borde);border-radius:26px;background:#fff;box-shadow:var(--sombra-suave)}
.periodo-evaluaciones-relacionadas>header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.periodo-evaluaciones-relacionadas h2{margin:5px 0 0;color:var(--azul-950);font-size:clamp(1.45rem,3vw,2.2rem)}.periodo-evaluaciones-relacionadas header p{max-width:720px;margin:8px 0 0;color:var(--gris);line-height:1.55}.periodo-evaluaciones-relacionadas>header>a{flex:0 0 auto;padding:10px 14px;border-radius:12px;color:#fff;background:var(--periodo-color);font-weight:900;text-decoration:none}.periodo-evaluaciones-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.periodo-evaluaciones-grid article{display:flex;min-height:190px;padding:19px;flex-direction:column;border:1px solid color-mix(in srgb,var(--periodo-color) 18%,#dce6ee);border-radius:19px;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--periodo-color) 4%,#fff))}.periodo-evaluaciones-grid article>span{width:max-content;padding:5px 9px;border-radius:999px;color:var(--periodo-color);background:color-mix(in srgb,var(--periodo-color) 10%,#fff);font-size:.69rem;font-weight:950;text-transform:uppercase}.periodo-evaluaciones-grid h3{margin:12px 0 0;color:var(--azul-950);font-size:1rem}.periodo-evaluaciones-grid p{margin:8px 0 16px;color:var(--texto-suave);font-size:.82rem;line-height:1.5}.periodo-evaluaciones-grid article>div{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}.periodo-evaluaciones-grid strong{color:#536478;font-size:.72rem}.periodo-evaluaciones-grid a{color:var(--periodo-color);font-size:.77rem;font-weight:950;text-decoration:none}
@media(max-width:900px){.periodo-evaluaciones-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.periodo-evaluaciones-relacionadas{width:min(100% - 20px,var(--ancho-maximo));padding:20px}.periodo-evaluaciones-relacionadas>header{align-items:flex-start;flex-direction:column}.periodo-evaluaciones-grid{grid-template-columns:1fr}}

/* RC7 · la categoría configurada en seguimiento tiene efecto público sin recargar la tarjeta. */
.periodo-seguimiento-categoria{display:inline-flex;width:max-content;margin:0 0 4px;padding:3px 7px;border:1px solid color-mix(in srgb,var(--periodo-color,#0b58b4) 24%,#dbe7ef);border-radius:999px;color:color-mix(in srgb,var(--periodo-color,#0b58b4) 78%,#203746);background:color-mix(in srgb,var(--periodo-color,#0b58b4) 8%,#fff);font-size:.68rem;font-style:normal;font-weight:800;letter-spacing:.035em;text-transform:uppercase}

/* =========================================================
   RC7.5 · JERARQUÍA SELECTOR → CONTENIDO DE LA SECCIÓN
   - El mosaico superior funciona únicamente como navegador.
   - Debajo se muestra una sola sección activa, con identidad propia.
   - Evita repetir la misma imagen grande en selector y detalle.
   ========================================================= */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.periodo-navegacion-secciones{margin-bottom:0}
.periodo-contenido-activo{
  margin-top:28px;
  scroll-margin-top:96px;
}
.periodo-divisor-secciones{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 4px 22px;
}
.periodo-divisor-secciones::before,
.periodo-divisor-secciones::after{
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,#cfdce7 22%,#cfdce7 78%,transparent);
  content:"";
}
.periodo-divisor-secciones span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--periodo-color,#0b58b4);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--periodo-color,#0b58b4) 10%,#fff);
}
.periodo-contenido-activo-cabecera{
  --seccion-color:var(--periodo-color,#0b58b4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:14px;
  padding:18px 20px;
  border:1px solid color-mix(in srgb,var(--seccion-color) 22%,#d9e4ec);
  border-left:5px solid var(--seccion-color);
  border-radius:19px;
  background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--seccion-color) 5%,#fff));
  box-shadow:0 9px 24px rgba(7,59,122,.045);
}
.periodo-contenido-activo-identidad{
  display:flex;
  min-width:0;
  align-items:center;
  gap:15px;
}
.periodo-contenido-activo-numero{
  display:grid;
  width:48px;
  height:48px;
  flex:0 0 48px;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:var(--seccion-color);
  box-shadow:0 7px 16px color-mix(in srgb,var(--seccion-color) 22%,transparent);
  font-size:.9rem;
  font-weight:950;
}
.periodo-contenido-activo-cabecera .periodo-etiqueta{color:var(--seccion-color)}
.periodo-contenido-activo-cabecera h2{
  margin:4px 0 0;
  color:var(--azul-950);
  font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.18;
}
.periodo-contenido-activo-cabecera p{
  max-width:720px;
  margin:5px 0 0;
  color:var(--gris);
  font-size:.82rem;
  line-height:1.45;
}
.periodo-contenido-activo-meta{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
}
.periodo-posicion-seccion{
  min-height:31px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  border:1px solid #dce6ee;
  border-radius:999px;
  color:#526478;
  background:#fff;
  font-size:.69rem;
  font-weight:900;
  white-space:nowrap;
}
/* La sección inferior ya no repite la ilustración grande del selector. */
.periodo-acordeon{gap:0}
.periodo-seccion{
  border-color:color-mix(in srgb,var(--seccion-color) 18%,var(--borde));
  border-radius:21px;
  box-shadow:0 11px 28px rgba(7,59,122,.055);
}
.periodo-seccion.abierta{
  border-color:color-mix(in srgb,var(--seccion-color) 24%,#d9e4ec);
  box-shadow:0 14px 34px color-mix(in srgb,var(--seccion-color) 8%,transparent);
}
.periodo-seccion[hidden]{display:none!important}
.periodo-seccion-contenido{border-top:0;background:linear-gradient(180deg,#fbfdff,#fff)}
.periodo-secciones-vacias{
  display:grid;
  gap:5px;
  padding:26px;
  border:1px dashed #cbd9e4;
  border-radius:18px;
  color:#65768a;
  background:#fbfdff;
  text-align:center;
}
.periodo-secciones-vacias strong{color:var(--azul-950)}

@media(max-width:760px){
  .periodo-contenido-activo{margin-top:22px;scroll-margin-top:82px}
  .periodo-divisor-secciones{margin-bottom:17px}
  .periodo-contenido-activo-cabecera{
    align-items:flex-start;
    flex-direction:column;
    gap:13px;
    padding:15px;
  }
  .periodo-contenido-activo-numero{width:42px;height:42px;flex-basis:42px;border-radius:12px}
  .periodo-contenido-activo-meta{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .periodo-contenido-activo-cabecera p{font-size:.79rem}
}

@media(max-width:420px){
  .periodo-contenido-activo-identidad{align-items:flex-start}
  .periodo-contenido-activo-cabecera{border-left-width:4px;border-radius:16px}
  .periodo-posicion-seccion,.periodo-seccion-estado{min-height:29px;font-size:.66rem}
}

@media print{
  body.modo-impresion-seccion .periodo-divisor-secciones{display:none!important}
  body.modo-impresion-seccion .periodo-contenido-activo{margin-top:0!important}
  body.modo-impresion-seccion .periodo-contenido-activo-cabecera{box-shadow:none!important;border:0!important;border-bottom:2px solid #dbe5ee!important;border-radius:0!important;padding:0 0 12px!important}
  body.modo-impresion-seccion .periodo-contenido-activo-meta{display:none!important}
}