/* ==========================================================
   JUVENTUD EMPRENDE DIFERENTE — Sistema visual
   Azul institucional · Verde emprendimiento · Amarillo señal
   ========================================================== */

/* Las tipografías se cargan desde el <head> de cada página (más rápido,
   en paralelo) con font-display:optional — ver assets/css/fuentes.css
   y el comentario en cada .html. Si algún día falta ese <link>, el
   sitio sigue viéndose bien con las tipografías de reserva de abajo. */

:root{
  --azul:#0A3D72;
  --azul-oscuro:#062B52;
  --azul-tinta:#12233A;
  --verde:#00A651;
  --verde-oscuro:#008442;
  --amarillo:#F5C518;
  --papel:#F4F7FB;
  --blanco:#FFFFFF;
  --linea:#DFE7F1;
  --texto:#12233A;
  --suave:#5C7089;
  --rojo:#D6323F;
  --naranja:#E08600;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --sombra:0 1px 2px rgba(10,61,114,.06), 0 8px 24px rgba(10,61,114,.07);
  --sombra-alta:0 18px 50px rgba(10,61,114,.16);
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --cuerpo:'Inter Tight', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--texto);
  font-family:var(--cuerpo); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--azul); text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display); font-weight:800; line-height:1.08; margin:0; letter-spacing:-.02em}
h1{font-size:clamp(2rem,5vw,3.4rem)}
h2{font-size:clamp(1.5rem,3vw,2.2rem)}
h3{font-size:1.15rem}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--amarillo); outline-offset:2px; border-radius:4px}

.contenedor{width:min(1240px,92vw); margin-inline:auto}
.estrecho{width:min(760px,92vw); margin-inline:auto}
.oculto{display:none !important}
.solo-lectura-pantalla{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea);
}
.cabecera-fila{display:flex; align-items:center; gap:1.2rem; padding:.7rem 0}
.marca{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit}
.marca img{height:80px; width:auto}
.marca-texto{display:flex; flex-direction:column; line-height:1.05}
.marca-texto b{font-family:var(--display); font-size:1.02rem; color:var(--azul)}
.marca-texto span{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--verde); font-weight:700}
.nav{margin-left:auto; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap}
.nav a{
  text-decoration:none; color:var(--azul-tinta); font-weight:600; font-size:.93rem;
  padding:.5rem .8rem; border-radius:999px;
}
.nav a:hover{background:#EAF1FA; color:var(--azul)}
.nav a.activo{background:var(--azul); color:#fff}

/* ---------- Cabecera "liquid glass" (solo el inicio, prueba) ----------
   Vidrio de verdad: lo de atrás se ve borroso a través (backdrop-filter),
   con un tinte azul institucional en vez de blanco/gris, un brillo fino
   arriba (el reflejo típico del vidrio) y un borde casi invisible que le
   da el filo. Todo en capas semitransparentes, nunca un color plano. */
.cabecera-oscura{
  /* Fijo desde el principio (no "sticky"), para que flote SOBRE la
     portada desde el primer instante, en vez de empujarla hacia abajo.
     Antes, mientras no había scroll, el encabezado ocupaba su propio
     espacio arriba de todo, sobre el fondo claro de la página — y ahí
     nacía la franja: un tramo claro pegado justo encima del azul de la
     portada. Flotando encima desde el inicio, siempre tiene la portada
     (o lo que sea que haya más abajo, al hacer scroll) detrás para
     que el vidrio la muestre borrosa — nunca el fondo claro de la página. */
  position:fixed; top:0; left:0; right:0; z-index:40; border-bottom:0; padding-top:.8rem;
  /* Esta franja de afuera (el padding, antes de llegar a la píldora)
     queda totalmente transparente a propósito — el vidrio va SOLO en
     la píldora (.cabecera-fila, del ancho del "contenedor"), no en
     todo el ancho de la ventana. Como el encabezado ya flota fijo
     sobre la portada desde el inicio, lo que se ve en esa franja
     transparente siempre es el color real de lo que hay detrás (la
     portada, o la sección que sea al hacer scroll) — nunca desentona,
     sin necesidad de ponerle su propio vidrio. */
  background:none;
}
.cabecera-oscura .cabecera-fila{
  position:relative; isolation:isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 42%, rgba(9,22,40,.5)),
    rgba(18,35,58,.46);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:.55rem .8rem .55rem 1.3rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 18px 45px rgba(6,15,28,.32);
}
/* El reflejo: una franja de luz curva cruzando la parte de arriba,
   como cuando la luz roza un vidrio o una burbuja. */
.cabecera-oscura .cabecera-fila::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(120% 60% at 30% -20%, rgba(255,255,255,.4), transparent 60%);
  mix-blend-mode:overlay; pointer-events:none;
}
.cabecera-oscura .marca img{height:38px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.cabecera-oscura .nav a{color:rgba(255,255,255,.85); position:relative}
.cabecera-oscura .nav a:hover{background:rgba(255,255,255,.1); color:#fff}
.cabecera-oscura .nav a.activo{
  background:rgba(255,255,255,.16); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.1);
}
.cabecera-oscura .btn-amarillo{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 6px 16px rgba(245,197,24,.35);
}
.cabecera-oscura .btn-linea{
  background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.cabecera-oscura .btn-linea:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.55)}

/* Páginas sin una portada oscura debajo (inscripción, portal): el
   encabezado flota fijo igual, así que su contenido necesita este
   espacio de sobra arriba para no quedar tapado. */
.cabecera-oscura ~ main.seccion{padding-top:7.6rem}

/* min-width:0 porque es un elemento flex (hijo de .nav): sin esto,
   por defecto un elemento flex no se encoge más allá del ancho que
   pida su contenido — y el título largo de un curso, con
   white-space:nowrap, terminaba empujando toda la píldora (o el menú
   de celular) a ser más ancha de lo que debería. */
.nav-desplegable{position:relative; min-width:0}
.nav-desplegable-boton{
  display:flex; align-items:center; gap:.35rem; background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.85); font-family:var(--cuerpo); font-weight:600; font-size:.93rem;
  padding:.5rem .8rem; border-radius:999px; transition:background .15s ease, color .15s ease;
}
.nav-desplegable-boton:hover,.nav-desplegable-boton[aria-expanded="true"]{background:rgba(255,255,255,.1); color:#fff}
.nav-desplegable-boton svg{transition:transform .18s ease}
.nav-desplegable-boton[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav-desplegable-menu{
  position:absolute; top:calc(100% + .7rem); left:50%; transform:translateX(-50%) translateY(-6px);
  width:min(420px,88vw); isolation:isolate; overflow:hidden;
  background:
    linear-gradient(165deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 35%, rgba(9,22,40,.6)),
    rgba(15,30,52,.62);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 24px 60px rgba(6,15,28,.45);
  padding:.6rem;
  opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease; z-index:50;
}
.nav-desplegable-menu.abierto{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0)}
.nav-curso-item{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .6rem; border-radius:var(--r-md);
  text-decoration:none; color:#fff; transition:background .15s ease;
}
.nav-curso-item:hover{background:rgba(255,255,255,.09)}
.nav-curso-color{width:9px; height:9px; border-radius:50%; flex:none; box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.nav-curso-color.abierto{background:#22D67A; box-shadow:0 0 0 3px rgba(34,214,122,.22), 0 0 10px rgba(34,214,122,.7)}
.nav-curso-color.cerrado{background:#FF4D5E; box-shadow:0 0 0 3px rgba(255,77,94,.22), 0 0 10px rgba(255,77,94,.6)}
.nav-curso-info small.estado-abierto{color:#7DF0B0}
.nav-curso-info small.estado-cerrado{color:#FF9AA5}
.nav-curso-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem}
.nav-curso-info b{font-family:var(--cuerpo); font-weight:700; font-size:.93rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nav-curso-info small{color:rgba(255,255,255,.6); font-size:.76rem}
.nav-curso-item svg{flex:none; color:rgba(255,255,255,.45)}
.nav-desplegable-vacio{padding:.9rem .7rem; color:rgba(255,255,255,.65); font-size:.85rem}
.nav-desplegable-pie{
  display:block; text-align:center; margin-top:.3rem; padding:.65rem; border-radius:var(--r-md);
  color:var(--amarillo); font-weight:700; font-size:.85rem; text-decoration:none;
  border-top:1px solid rgba(255,255,255,.14);
}
.nav-desplegable-pie:hover{background:rgba(255,255,255,.08)}

/* ---------- Menú de la cabecera en celular ----------
   Con todos los enlaces (Inicio, Cursos, Requisitos, Ingresar,
   Registrarme) el menú no cabe en una sola fila en una pantalla de
   celular: se partía en dos líneas dentro de la píldora, apretado y
   feo. Debajo de este ancho, se esconde y aparece un botón de
   hamburguesa que despliega el menú como un panel de vidrio aparte.
   Va DESPUÉS de las reglas de arriba a propósito: con la misma
   especificidad, gana la que está más abajo en el archivo — si este
   bloque quedara antes, las reglas de siempre lo pisarían y ninguno
   de estos cambios se vería en celular. */
.nav-hamburguesa{
  display:none; margin-left:auto; width:40px; height:40px; border-radius:50%;
  border:0; cursor:pointer; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); color:#fff; transition:background .15s ease;
}
.nav-hamburguesa:hover{background:rgba(255,255,255,.18)}
@media (max-width:860px){
  .nav-hamburguesa{display:flex}
  .cabecera-oscura .cabecera-fila{padding:.5rem .5rem .5rem 1.1rem}
  .cabecera-oscura .nav{
    display:none; position:fixed; top:5.4rem; left:1rem; right:1rem; z-index:45;
    flex-direction:column; align-items:stretch; gap:.25rem;
    background:
      linear-gradient(165deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 35%, rgba(9,22,40,.6)),
      rgba(15,30,52,.7);
    -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%);
    border:1px solid rgba(255,255,255,.2); border-radius:var(--r-lg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 24px 60px rgba(6,15,28,.45);
    padding:.7rem;
  }
  .cabecera-oscura .nav.abierto{display:flex}
  .cabecera-oscura .nav a, .cabecera-oscura .nav .nav-desplegable-boton{
    width:100%; padding:.85rem .9rem; text-align:left; justify-content:flex-start;
  }
  .cabecera-oscura .nav .btn{width:100%; margin-top:.3rem}
  /* El desplegable de Cursos queda dentro del flujo normal del menú
     (no flotando centrado como en escritorio) y con su propio fondo
     de vidrio — probé integrarlo sin fondo propio, pero entonces el
     texto se volvía ilegible sobre lo que hubiera detrás. Mejor así:
     se ve como una tarjeta aparte dentro del menú, pero se lee bien
     siempre, sin importar qué haya de fondo. */
  .nav-desplegable-menu, .nav-desplegable-menu.abierto{
    position:static; width:100%; max-width:100%; transform:none; margin-top:.4rem;
    opacity:1; pointer-events:auto; display:none;
  }
  .nav-curso-info b{white-space:normal}
  /* El selector de arriba (.nav-desplegable-menu.abierto) repite las
     dos clases a propósito: la regla de escritorio que anima el
     desplegable (más abajo en este archivo) usa esas mismas dos
     clases, y con la misma especificidad, sin este empate a propósito
     esa regla de escritorio seguiría ganando aquí y el menú de
     celular volvería a salir descentrado. */
  .nav-desplegable-menu.abierto{display:block}
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--cuerpo); font-weight:700; font-size:.94rem; letter-spacing:.01em;
  padding:.72rem 1.25rem; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .12s ease, box-shadow .16s ease, background .16s ease;
  touch-action:manipulation; /* evita el retraso de ~300ms de Safari/Chrome móvil
    que espera a ver si el toque es parte de un doble-tap para hacer zoom */
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn-primario{background:var(--azul); color:#fff; box-shadow:0 6px 18px rgba(10,61,114,.24)}
.btn-primario:hover{background:#0d4a8a}
.btn-verde{background:var(--verde); color:#fff; box-shadow:0 6px 18px rgba(0,166,81,.26)}
.btn-verde:hover{background:var(--verde-oscuro)}
.btn-amarillo{background:var(--amarillo); color:#3B2E00}
.btn-linea{background:#fff; color:var(--azul); border-color:var(--linea)}
.btn-linea:hover{border-color:var(--azul)}
.btn-peligro{background:#fff; color:var(--rojo); border-color:#F3C9CC}
.btn-peligro:hover{background:#FDF2F3}
.btn-bloque{width:100%}
.btn-sm{padding:.62rem .9rem; font-size:.82rem} /* alto real ≈44px: mínimo recomendado para tocar con el dedo */

/* ---------- Botones "liquid glass" (solo el inicio, prueba) ----------
   Mismo idioma visual que la cabecera: color de marca de fondo, pero
   translúcido (se alcanza a ver lo de atrás con blur), una capa de
   brillo diagonal arriba y un filo de luz fina — nunca un color plano.
   Escogidos por selector (.portada .btn, #cursos .btn) para que solo
   afecte esta página: el resto del sitio (formularios, panel admin)
   sigue con los botones de siempre. */
.portada .btn, #cursos .btn{
  position:relative; isolation:isolate; overflow:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), background .25s ease;
}
.portada .btn::before, #cursos .btn::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(155deg, rgba(255,255,255,.45), rgba(255,255,255,.04) 55%);
  mix-blend-mode:overlay;
}
.portada .btn:hover, #cursos .btn:hover{transform:translateY(-2px) scale(1.015)}
.portada .btn:active, #cursos .btn:active{transform:translateY(0) scale(.98)}

.portada .btn-amarillo{
  background:rgba(245,197,24,.8); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 26px rgba(245,197,24,.3);
}
.portada .btn-amarillo:hover{background:rgba(245,197,24,.92); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 14px 32px rgba(245,197,24,.4)}
.portada .btn-linea{
  background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.45); color:#fff;
}
.portada .btn-linea:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.7)}

#cursos .btn-primario{
  background:rgba(10,61,114,.82); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 24px rgba(10,61,114,.28);
}
#cursos .btn-primario:hover{background:rgba(13,74,138,.9); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 30px rgba(10,61,114,.36)}
/* Botones de estado de cada curso: verde = se puede inscribir, rojo = cerrado. */
#cursos .btn-verde,#cursos .btn-rojo{
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.25); color:#fff;
}
#cursos .btn-verde{
  background:rgba(0,166,81,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 10px 24px rgba(0,166,81,.3);
}
#cursos .btn-verde:hover{background:rgba(0,140,68,.95); box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 14px 30px rgba(0,166,81,.4)}
.btn-rojo{background:rgba(214,50,63,.92); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 24px rgba(214,50,63,.28)}
.btn-rojo:disabled{opacity:1; cursor:not-allowed; background:linear-gradient(150deg, rgba(244,100,111,.92), rgba(214,50,63,.92))}
#cursos .btn-linea{
  background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
}

/* ---------- Portada ---------- */
.portada{position:relative; overflow:hidden; background:var(--azul); color:#fff; padding:4.5rem 0 5.5rem}
/* El encabezado de vidrio ahora flota fijo sobre la portada (ver
   .cabecera-oscura): sin este espacio extra arriba, el título tapado
   quedaría justo detrás de él. */
.cabecera-oscura ~ .portada{padding-top:7.2rem}
.portada::after{
  content:''; position:absolute; right:-14%; top:-32%; width:640px; height:640px; border-radius:50%;
  border:56px solid var(--amarillo); opacity:.16;
}
.portada .contenedor{position:relative; z-index:2}
.etiqueta-portada{
  display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28); color:#fff; padding:.35rem .9rem; border-radius:999px;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-bottom:1.2rem;
}
.portada h1{max-width:15ch}
.portada h1 em{font-style:normal; color:var(--amarillo)}
.portada p{max-width:56ch; color:#D6E4F4; font-size:1.08rem; margin-top:1rem}
.acciones-portada{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem}
.cifras{display:flex; gap:2.4rem; margin-top:3rem; flex-wrap:wrap}
.cifra b{display:block; font-family:var(--display); font-size:2.1rem; color:var(--amarillo); line-height:1}
.cifra span{font-size:.82rem; color:#BFD3EA; letter-spacing:.06em; text-transform:uppercase}

/* ---------- Patrocinadores (portada) ---------- */
.patrocinadores-portada{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:1rem; max-width:340px;
}
.patrocinadores-etiqueta{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:#BFD3EA; text-align:center;
}
.patrocinadores-logos{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; justify-content:center}
.patrocinadores-logos img{
  height:96px; width:auto;
}
@media (max-width:1080px){
  /* No cabe al lado del texto sin encimarse: pasa a flujo normal,
     debajo de las cifras, en vez de perderse en pantallas angostas. */
  .patrocinadores-portada{
    position:static; transform:none; margin-top:2.6rem; max-width:none; align-items:flex-start;
  }
  .patrocinadores-etiqueta{text-align:left}
  .patrocinadores-logos{justify-content:flex-start}
}

/* Arco: firma visual tomada del logotipo */
.arco{display:block; width:120px; height:22px; margin-bottom:1rem}
.arco path{fill:none; stroke:var(--amarillo); stroke-width:7; stroke-linecap:round}

/* ---------- Secciones ---------- */
.seccion{padding:3.4rem 0}
.encabezado-seccion{margin-bottom:1.8rem}
.encabezado-seccion p{color:var(--suave); max-width:62ch; margin:.4rem 0 0}

/* ---------- Tarjetas ---------- */
.rejilla{display:grid; gap:1.2rem}
.rejilla-3{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.rejilla-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.tarjeta{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg);
  box-shadow:var(--sombra); padding:1.4rem;
}
.tarjeta-curso{display:flex; flex-direction:column; position:relative; overflow:hidden; padding-top:1.6rem}
.tarjeta-curso::before{content:''; position:absolute; inset:0 0 auto 0; height:6px; background:var(--barra,var(--azul))}
.tarjeta-curso h3{font-size:1.22rem; margin:.55rem 0 .5rem}
.tarjeta-curso .resumen{color:var(--suave); font-size:.93rem; flex:1}
.fila-tarjeta{display:flex; align-items:center; justify-content:space-between; gap:.6rem}
.meta{display:flex; flex-direction:column; gap:.55rem; margin:1rem 0; font-size:.88rem; color:var(--azul-tinta)}
.meta div{display:flex; gap:.55rem; align-items:flex-start}
.meta svg{flex:none; margin-top:2px}
.id-curso{font-family:var(--mono); font-size:.74rem; color:var(--suave)}

.insignia{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:.28rem .65rem; border-radius:999px;
}
.insignia-activa{background:#E3F7EC; color:var(--verde-oscuro)}
.insignia-inactiva{background:#FDEEEF; color:var(--rojo)}
.insignia-neutra{background:#EEF3F9; color:var(--suave)}
.insignia-amarilla{background:#FDF3D0; color:#7A5B00}

.contador{
  font-family:var(--mono); font-weight:600; background:#EAF1FA; color:var(--azul);
  padding:.2rem .7rem; border-radius:999px; font-size:.9rem;
}
.chip{
  display:inline-flex; align-items:center; gap:.4rem; background:#F3F6FB; border:1px solid var(--linea);
  border-radius:999px; padding:.3rem .7rem; font-size:.82rem; color:var(--azul-tinta); margin:0 .35rem .35rem 0;
}
.barra-cupos{height:7px; background:#EAF1FA; border-radius:999px; overflow:hidden; margin-top:.4rem}
.barra-cupos i{display:block; height:100%; background:var(--verde); border-radius:999px; transition:width .6s cubic-bezier(.22,1,.36,1)}

/* ---------- "Cursos disponibles" del inicio: tarjetas con animación
   de entrada y transiciones suaves al pasar el mouse (solo esta
   sección — #lista-cursos es exclusivo del inicio, así que el panel
   admin, que reutiliza .tarjeta-curso, no se ve afectado). ---------- */
#lista-cursos .tarjeta-curso{
  border-radius:var(--r-xl); border-color:rgba(10,61,114,.08);
  box-shadow:0 1px 2px rgba(10,61,114,.04), 0 14px 34px rgba(10,61,114,.07);
  opacity:0; transform:translateY(30px) scale(.97);
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1),
    box-shadow .4s cubic-bezier(.22,1,.36,1), border-color .4s ease;
}
#lista-cursos .tarjeta-curso.revelada{opacity:1; transform:translateY(0) scale(1)}
#lista-cursos .tarjeta-curso:hover{
  transform:translateY(-9px) scale(1.015);
  box-shadow:0 10px 22px rgba(10,61,114,.09), 0 34px 64px rgba(10,61,114,.17);
  border-color:rgba(10,61,114,.16);
}
#lista-cursos .tarjeta-curso::before{transition:height .35s cubic-bezier(.22,1,.36,1)}
#lista-cursos .tarjeta-curso:hover::before{height:9px}
#lista-cursos .tarjeta-curso:hover .barra-cupos i{filter:brightness(1.08)}
@media (prefers-reduced-motion:reduce){
  #lista-cursos .tarjeta-curso{opacity:1; transform:none; transition:box-shadow .2s ease}
  #lista-cursos .tarjeta-curso:hover{transform:none}
}

/* ---------- Formularios ---------- */
.panel-formulario{background:#fff; border:1px solid var(--linea); border-radius:var(--r-xl); box-shadow:var(--sombra); padding:1.8rem}
.paso{border-top:1px solid var(--linea); padding-top:1.5rem; margin-top:1.5rem}
/* Mismas secciones numeradas del formulario de inscripción, pero para
   mostrar datos ya guardados (solo lectura) en vez de pedirlos. */
.dato{font-size:.95rem; color:var(--texto); padding:.2rem 0; min-height:1.4em}
.dato.vacio{color:var(--suave); font-style:italic}
.enlace-detalle{
  background:none; border:0; padding:0; font:inherit; color:var(--azul); font-weight:700;
  cursor:pointer; text-align:left; touch-action:manipulation;
}
.enlace-detalle:hover{text-decoration:underline}
.paso:first-of-type{border-top:0; padding-top:0; margin-top:0}
.titulo-paso{display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem}
.numero-paso{
  width:30px; height:30px; flex:none; border-radius:50%; background:var(--azul); color:#fff;
  display:grid; place-items:center; font-family:var(--mono); font-size:.85rem; font-weight:600;
}
.titulo-paso h3{font-size:1.05rem}

.campos{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.campo{display:flex; flex-direction:column; gap:.35rem}
.campo.ancho{grid-column:1/-1}
label{font-size:.85rem; font-weight:600; color:var(--azul-tinta)}
label .req{color:var(--rojo)}
input,select,textarea{
  font-family:var(--cuerpo); font-size:.97rem; color:var(--texto); background:#fff;
  border:1.5px solid var(--linea); border-radius:var(--r-md); padding:.72rem .85rem; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input[type=file]{padding:.55rem; background:#FAFCFE}
textarea{min-height:96px; resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--azul); box-shadow:0 0 0 4px rgba(10,61,114,.1); outline:none}
input.valido{border-color:var(--verde); box-shadow:0 0 0 4px rgba(0,166,81,.1)}
input.invalido{border-color:var(--rojo); box-shadow:0 0 0 4px rgba(214,50,63,.1)}
.pista{font-size:.79rem; color:var(--suave)}
.error{font-size:.82rem; color:var(--rojo); font-weight:600}
.exito{font-size:.82rem; color:var(--verde-oscuro); font-weight:600}
.mono{font-family:var(--mono); letter-spacing:.06em}
.casilla{display:flex; gap:.65rem; align-items:flex-start; font-size:.88rem; color:var(--azul-tinta)}
.casilla input{width:18px; height:18px; flex:none; margin-top:2px}

/* Botón de "mostrar contraseña" */
.campo-clave{position:relative}
.campo-clave input{padding-right:2.9rem}
.clave-alternar{
  position:absolute; right:.15rem; top:50%; transform:translateY(-50%);
  width:2.75rem; height:2.75rem; display:grid; place-items:center;
  background:none; border:0; border-radius:var(--r-md); cursor:pointer;
  color:var(--suave); touch-action:manipulation;
}
.clave-alternar:hover{color:var(--azul); background:#F1F5FA}
.clave-alternar:focus-visible{outline:2px solid var(--azul); outline-offset:2px}

/* Validador de cédula — elemento distintivo */
.validador{
  margin-top:.6rem; border:1.5px dashed var(--linea); border-radius:var(--r-md);
  padding:.75rem .9rem; background:#FAFCFE; font-size:.85rem; display:none;
}
.validador.visible{display:block; min-height:78px}
.validador.ok{border-color:var(--verde); border-style:solid; background:#F1FBF5}
.validador.mal{border-color:var(--rojo); border-style:solid; background:#FEF5F5}
.validador-fila{display:flex; align-items:center; gap:.5rem; font-weight:600}
.validador-detalle{margin-top:.45rem; color:var(--suave); font-size:.8rem; display:flex; flex-wrap:wrap; gap:.4rem .9rem}
.validador-detalle span b{font-family:var(--mono); color:var(--azul-tinta)}

/* ---------- Aviso ---------- */
.aviso{border-radius:var(--r-md); padding:.9rem 1.05rem; font-size:.9rem; margin-bottom:1rem; overflow-wrap:break-word}
.aviso b{font-weight:700}
.aviso code{background:rgba(255,255,255,.6); padding:.1rem .35rem; border-radius:5px; font-family:var(--mono); font-size:.86em}
.aviso-info{background:#EAF1FA; color:var(--azul); border:1px solid #CFE0F3}
.aviso-ok{background:#E9F9F0; color:var(--verde-oscuro); border:1px solid #B9E9CD}
.aviso-mal{background:#FDF0F1; color:var(--rojo); border:1px solid #F5CDD1}
.aviso-alerta{background:#FEF7E0; color:#7A5B00; border:1px solid #F5E2A8}

/* ---------- Acceso (login) ---------- */
.pantalla-acceso{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr}
.acceso-lateral{background:var(--azul); color:#fff; padding:3rem; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden}
.acceso-lateral::after{content:''; position:absolute; left:-18%; bottom:-30%; width:520px; height:520px; border-radius:50%; border:48px solid var(--verde); opacity:.18}
.acceso-lateral > *{position:relative; z-index:2}
.acceso-lateral img{height:72px; width:auto; margin-bottom:2rem; align-self:flex-start} /* sin esto, el flex column (align-items:stretch por defecto) estira la imagen a lo ancho de la columna y la deforma */
.acceso-lateral h2{font-size:2.1rem; max-width:16ch}
.acceso-lateral p{color:#CBDDF0; max-width:44ch; margin-top:.8rem}
.lista-beneficios{list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:.7rem}
.lista-beneficios li{display:flex; gap:.7rem; align-items:center; font-size:.94rem; color:#E3EEF9}
.punto{width:9px; height:9px; border-radius:50%; background:var(--amarillo); flex:none}
.acceso-panel{display:grid; place-items:center; padding:2.5rem 1.5rem; background:var(--papel)}
.caja-acceso{width:min(430px,100%)}
.pestanas{
  display:flex; padding:.28rem; border-radius:999px; margin-bottom:1.5rem;
  background:rgba(10,61,114,.06); border:1px solid rgba(10,61,114,.08);
}
.pestanas button{
  flex:1; border:0; background:transparent; font-family:var(--cuerpo); font-weight:700; font-size:.9rem;
  padding:.85rem .6rem; border-radius:999px; cursor:pointer; color:var(--suave);
  touch-action:manipulation; min-height:44px;
  transition:background .3s cubic-bezier(.22,1,.36,1), color .3s ease, box-shadow .3s ease;
}
.pestanas button.activa{
  background:rgba(255,255,255,.85); color:var(--azul);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 #fff, 0 4px 14px rgba(10,61,114,.14);
}

/* Botones "liquid glass" de la pantalla de acceso (mismo idioma que el
   inicio, escogidos por selector para no tocar el resto del sitio). */
.acceso-panel .btn-primario{
  position:relative; isolation:isolate; overflow:hidden;
  background:rgba(10,61,114,.85); -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px rgba(10,61,114,.26);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), background .25s ease;
}
.acceso-panel .btn-primario::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(155deg, rgba(255,255,255,.4), rgba(255,255,255,.03) 55%);
  mix-blend-mode:overlay;
}
.acceso-panel .btn-primario:hover{transform:translateY(-2px) scale(1.01); background:rgba(13,74,138,.92)}
.acceso-panel .btn-primario:active{transform:translateY(0) scale(.98)}

/* ---------- Panel admin ---------- */
/* Vidrio como barra de trabajo, de pared a pared y fija arriba (no
   como píldora flotante: con tablas largas de estudiantes, conviene
   que se quede pegada arriba mientras se hace scroll, en vez de
   desaparecer). */
.barra-admin{
  position:sticky; top:0; z-index:40; color:#fff; padding:.75rem 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.01) 55%, rgba(6,20,38,.4)),
    rgba(6,43,82,.62);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 30px rgba(6,15,28,.18);
}
.barra-admin .contenedor{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.barra-admin .marca-texto b{color:#fff}
.barra-admin img{height:38px}
.usuario-admin{margin-left:auto; display:flex; align-items:center; gap:.75rem; font-size:.88rem; color:#C7D9EE}
.avatar{width:34px; height:34px; border-radius:50%; background:var(--verde); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.85rem}
.barra-admin .btn-linea{
  background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .3s cubic-bezier(.22,1,.36,1), background .2s ease, border-color .2s ease;
}
.barra-admin .btn-linea:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.55); transform:translateY(-1px)}

.tablero{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-bottom:2rem}
.metrica{background:#fff; border:1px solid var(--linea); border-radius:var(--r-lg); padding:1.15rem 1.25rem; box-shadow:var(--sombra)}
.metrica span{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--suave); font-weight:700}
.metrica b{display:block; font-family:var(--display); font-size:2.2rem; line-height:1.1; margin-top:.3rem; color:var(--azul)}
.metrica small{color:var(--suave); font-size:.8rem}

.dona{width:132px; height:132px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:conic-gradient(var(--linea) 0 100%);}
.dona-centro{width:82px; height:82px; border-radius:50%; background:#fff; display:grid; place-items:center; text-align:center; line-height:1.1}
.dona-centro span{font-size:.6rem; letter-spacing:.12em; color:var(--suave); text-transform:uppercase}
.dona-centro b{font-family:var(--display); font-size:1.5rem; color:var(--azul)}
.leyenda{display:grid; gap:.6rem; flex:1; min-width:180px}
.leyenda div{display:flex; align-items:center; gap:.6rem; font-size:.9rem}
.leyenda i{width:11px; height:11px; border-radius:50%; flex:none}
.leyenda b{margin-left:auto; font-family:var(--mono); font-size:.85rem}

.barra-dato{margin-bottom:.9rem}
.barra-dato .fila-tarjeta{font-size:.88rem; font-weight:600; margin-bottom:.3rem}
.barra-dato .pista-barra{height:8px; background:#EEF3F9; border-radius:999px; overflow:hidden}
.barra-dato .pista-barra i{display:block; height:100%; background:var(--azul); border-radius:999px}

.caja-tabla{background:#fff; border:1px solid var(--linea); border-radius:var(--r-lg); box-shadow:var(--sombra); overflow:hidden}
.herramientas-tabla{display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; padding:1.2rem 1.3rem}
.herramientas-tabla .buscador{flex:1; min-width:220px}
.desplazable{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:.9rem; white-space:nowrap}
thead th{
  background:#F7FAFD; text-align:left; padding:.85rem 1rem; font-size:.71rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--suave); font-weight:700; border-bottom:1px solid var(--linea); position:sticky; top:0;
}
tbody td{padding:.85rem 1rem; border-bottom:1px solid #EEF3F9; vertical-align:middle}
tbody tr:hover{background:#FAFCFE}
td.nombre{font-weight:600; white-space:normal; min-width:210px}
td .mono{font-size:.85rem}
select.mini{padding:.35rem .5rem; font-size:.82rem; border-radius:999px; width:auto; min-width:130px}
.vacio{text-align:center; padding:3rem 1rem; color:var(--suave)}
.vacio b{display:block; font-family:var(--display); font-size:1.2rem; color:var(--azul-tinta); margin-bottom:.3rem}

/* ---------- Modal ---------- */
.fondo-modal{
  position:fixed; inset:0; background:rgba(6,43,82,.55); backdrop-filter:blur(3px);
  display:none; place-items:center; padding:1.2rem; z-index:80;
}
.fondo-modal.abierto{display:grid}
.modal{background:#fff; border-radius:var(--r-xl); width:min(680px,100%); max-height:90vh; overflow:auto; box-shadow:var(--sombra-alta); padding:1.8rem}
.modal-cabecera{display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.3rem}
.cerrar{margin-left:auto; border:0; background:#F1F5FA; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1.1rem; color:var(--suave)}

/* ---------- Aviso flotante ---------- */
.avisos{position:fixed; right:1.1rem; bottom:1.1rem; display:grid; gap:.6rem; z-index:100; max-width:min(380px,92vw)}
.flotante{
  background:#fff; border-left:5px solid var(--azul); border-radius:var(--r-md); box-shadow:var(--sombra-alta);
  padding:.85rem 1.05rem; font-size:.9rem; animation:entrar .25s ease;
}
.flotante.ok{border-left-color:var(--verde)}
.flotante.mal{border-left-color:var(--rojo)}
@keyframes entrar{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

/* ---------- Cargando ---------- */
.girador{width:34px; height:34px; border:3px solid var(--linea); border-top-color:var(--azul); border-radius:50%; animation:girar .8s linear infinite; margin:2.5rem auto}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- Pie ---------- */
.pie{background:var(--azul-oscuro); color:#B9CDE4; padding:2.6rem 0; margin-top:3rem; font-size:.88rem}
.pie .contenedor{display:flex; gap:1.5rem; justify-content:space-between; flex-wrap:wrap; align-items:center}
.pie a{color:#fff; text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie-patrocinadores{
  margin-top:1.8rem; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
}
.pie-patrocinadores span{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#8FA9C7}
.pie-logos{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap}
.pie-logos img{height:60px; width:auto}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .pantalla-acceso{grid-template-columns:1fr}
  .acceso-lateral{padding:2.2rem 1.5rem}
  .acceso-lateral h2{font-size:1.6rem}
  .lista-beneficios{display:none}
  .portada{padding:3rem 0 3.5rem}
  .cifras{gap:1.4rem}
  .nav a:not(.btn){padding:.45rem .6rem; font-size:.86rem} /* los enlaces de texto se achican; los botones (ej. "Registrarme") mantienen su tamaño táctil normal */
}
@media (max-width:560px){
  .cabecera-fila{gap:.5rem}
  .marca img{height:46px}
  .marca-texto b{font-size:.9rem; white-space:nowrap}
  .marca-texto span{display:none}
  .nav{gap:.15rem}
  .nav a:not(.btn){padding:.4rem .5rem; font-size:.82rem} /* los botones dentro del nav no se achican, para no quedar por debajo del tamaño mínimo táctil */
  .panel-formulario{padding:1.2rem; border-radius:var(--r-lg)}
  .id-curso{font-size:.68rem}
  .insignia{font-size:.63rem; padding:.24rem .5rem}
  .fila-tarjeta{gap:.4rem}
  .barra-admin .contenedor{gap:.6rem}
  .usuario-admin{width:100%; margin-left:0; justify-content:flex-start}
}
@media (max-width:400px){
  .marca-texto{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
@media print{
  .cabecera,.nav,.pie,.herramientas-tabla,.avisos{display:none !important}
  body{background:#fff}
}

/* ---------- Selector de fecha en rueda (Picker.js, vestido con los
   colores del sitio; el resto de sus estilos vienen de
   assets/vendor/pickerjs/picker.min.css) ---------- */
.picker{
  --background-color: rgba(30,32,38,.92);
  --color: #fff;
  --gray: rgba(255,255,255,.55);
  --blue: #5EA1FF;
  --border: 1px solid rgba(255,255,255,.08);
  background-color:rgba(6,12,20,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.picker-dialog{
  -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  max-width:420px; margin:0 auto;
}
.picker-header{display:block; text-align:center}
.picker-title{font-family:var(--display); font-weight:800; font-size:.95rem}
.picker-close{display:none}
.picker-footer{display:table}
.picker-cancel,.picker-confirm{
  font-family:var(--cuerpo); font-size:.95rem; min-height:44px;
  touch-action:manipulation;
}
.picker-cancel{text-align:left; font-weight:600}
.picker-confirm{text-align:right; font-weight:700}
.picker-item{font-family:var(--cuerpo); font-size:1.05rem}
.picker-picked{font-weight:700}

/* ---------- Escaneo de cédula con foto ---------- */
.escaneo{
  display:grid; gap:.9rem; padding:1.1rem 1.2rem; margin-bottom:1.2rem;
  background:#F1F6FD; border:1px solid var(--linea); border-radius:var(--r-md);
}
.escaneo b{color:var(--azul-tinta)}
.escaneo p{margin:.25rem 0 0; color:var(--suave); font-size:.88rem; line-height:1.5}
.escaneo-acciones{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
#estado-escaneo:empty{display:none}

/* Punto neón del panel de administrador: verde = usó el escaneo con foto, rojo = lo llenó a mano */
.neon{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:.5rem; vertical-align:middle; flex:none}
.neon-verde{background:#39FF88; box-shadow:0 0 3px #39FF88, 0 0 9px rgba(57,255,136,.85)}
.neon-rojo{background:#FF3B4E; box-shadow:0 0 3px #FF3B4E, 0 0 9px rgba(255,59,78,.85)}

.captura-opciones{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.6rem}
.captura-opciones .btn{display:inline-flex; align-items:center; gap:.5rem}

/* ==========================================================
   PANEL DE ADMINISTRACIÓN — "liquid glass"
   Todo va colgado de .pagina-cristal (clase del <body> de admin.html),
   así ninguna otra página cambia. Mismo idioma que el inicio: fondo
   con manchas de color para que el vidrio tenga algo que difuminar,
   tarjetas translúcidas con brillo interior, y movimiento suave al
   entrar, al pasar el mouse y al presionar.
   ========================================================== */
.pagina-cristal{background:#E8EEF7}
.pagina-cristal::before{
  content:''; position:fixed; inset:-6%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(640px 440px at 8% 6%, rgba(0,166,81,.22), transparent 70%),
    radial-gradient(720px 500px at 94% 8%, rgba(10,61,114,.24), transparent 70%),
    radial-gradient(580px 440px at 72% 94%, rgba(245,197,24,.22), transparent 70%),
    radial-gradient(540px 440px at 4% 90%, rgba(10,61,114,.16), transparent 70%);
  animation:deriva-admin 26s ease-in-out infinite alternate;
}
@keyframes deriva-admin{to{transform:translate3d(0,-2.5%,0) scale(1.07)}}

/* ---- Vidrio: métricas, tarjetas, tablas y paneles ---- */
.pagina-cristal .metrica,
.pagina-cristal .tarjeta,
.pagina-cristal .caja-tabla,
.pagina-cristal .panel-formulario{
  background:linear-gradient(145deg, rgba(255,255,255,.74), rgba(255,255,255,.46));
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(10,61,114,.05), 0 14px 34px rgba(10,61,114,.10);
}
.pagina-cristal thead th{background:rgba(244,248,253,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.pagina-cristal tbody tr{transition:background .2s ease}
.pagina-cristal tbody tr:hover{background:rgba(255,255,255,.7)}
.pagina-cristal tbody td{border-bottom-color:rgba(10,61,114,.06)}
.pagina-cristal .chip{background:rgba(255,255,255,.65); border-color:rgba(255,255,255,.9)}
.pagina-cristal .contador{background:rgba(10,61,114,.09)}
.pagina-cristal .dona-centro{background:rgba(255,255,255,.9)}

/* ---- Métricas: se levantan al pasar el mouse y llevan un brillo que sigue al puntero ---- */
.pagina-cristal .metrica{
  position:relative; overflow:hidden;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.pagina-cristal .metrica b{font-variant-numeric:tabular-nums}
.pagina-cristal .metrica:hover{
  transform:translateY(-5px);
  box-shadow:inset 0 1px 0 #fff, 0 10px 22px rgba(10,61,114,.10), 0 26px 50px rgba(10,61,114,.16);
}
.pagina-cristal .metrica::after,
.pagina-cristal .tarjeta-curso::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.7), transparent 45%);
  transition:opacity .35s ease;
}
.pagina-cristal .metrica:hover::after,
.pagina-cristal .tarjeta-curso:hover::after{opacity:1}

/* ---- Filtros de la lista de convocatorias ---- */
.barra-filtros{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem}
.pestanas-cursos{margin:0; display:inline-flex; background:rgba(255,255,255,.5); border-color:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 #fff, 0 8px 22px rgba(10,61,114,.08)}
.pestanas-cursos button{flex:none; padding:.7rem 1.15rem; display:inline-flex; align-items:center; gap:.5rem}
.pestanas-cursos button:hover:not(.activa){background:rgba(255,255,255,.55); color:var(--azul)}
.pestanas-cursos button:active{transform:scale(.97)}
.pestanas-cursos .cuenta{
  font-family:var(--mono); font-size:.74rem; font-weight:600; padding:.1rem .5rem; border-radius:999px;
  background:rgba(10,61,114,.09); color:var(--azul);
}
.pestanas-cursos button.activa .cuenta{background:var(--azul); color:#fff}
.barra-filtros .buscador{
  width:min(340px,100%); border-radius:999px; padding-inline:1.1rem;
  background:rgba(255,255,255,.6); border-color:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 #fff, 0 6px 18px rgba(10,61,114,.06);
  transition:box-shadow .3s ease, background .3s ease, width .4s cubic-bezier(.22,1,.36,1);
}
.barra-filtros .buscador:focus{background:rgba(255,255,255,.9); width:min(420px,100%)}

/* ---- Grupos: Activas / Inactivas ---- */
.grupo-cursos{margin-bottom:2.6rem}
.grupo-encabezado{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:1.1rem}
.grupo-encabezado h2{font-size:1.4rem}
.grupo-encabezado p{margin:0 0 0 auto; color:var(--suave); font-size:.86rem}
.punto-grupo{width:12px; height:12px; border-radius:50%; flex:none}
.punto-activa{background:var(--verde); box-shadow:0 0 0 4px rgba(0,166,81,.18); animation:latido-admin 2.4s ease-in-out infinite}
.punto-inactiva{background:#9AA9BC; box-shadow:0 0 0 4px rgba(154,169,188,.22)}
@keyframes latido-admin{50%{box-shadow:0 0 0 8px rgba(0,166,81,0)}}
.vacio-grupo{
  padding:1.6rem 1rem; border-radius:var(--r-lg); border:1px dashed rgba(10,61,114,.2);
  background:rgba(255,255,255,.35);
}

/* ---- Tarjetas de convocatoria: entran en cascada, se levantan y "respiran" ---- */
.pagina-cristal :is(#lista-convocatorias,#mis-cursos,#otros-cursos) .tarjeta-curso{
  border-radius:var(--r-xl);
  opacity:0; transform:translateY(26px) scale(.97);
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1),
    box-shadow .4s cubic-bezier(.22,1,.36,1);
}
.pagina-cristal :is(#lista-convocatorias,#mis-cursos,#otros-cursos) .tarjeta-curso.revelada{opacity:1; transform:none}
.pagina-cristal :is(#lista-convocatorias,#mis-cursos,#otros-cursos) .tarjeta-curso.revelada:hover{
  transform:translateY(-8px) scale(1.012); transition-delay:0s;
  box-shadow:inset 0 1px 0 #fff, 0 10px 22px rgba(10,61,114,.10), 0 34px 64px rgba(10,61,114,.18);
}
.pagina-cristal .tarjeta-curso::before{transition:height .35s cubic-bezier(.22,1,.36,1)}
.pagina-cristal .tarjeta-curso:hover::before{height:9px}
.pagina-cristal .tarjeta-curso:hover .barra-cupos i{filter:brightness(1.1)}
.pagina-cristal .tarjeta-curso > *{position:relative; z-index:1}
.pagina-cristal .tarjeta-curso .meta{flex:1; align-content:flex-start}
.pagina-cristal .tarjeta-curso h3{transition:color .3s ease}
.pagina-cristal .tarjeta-curso:hover h3{color:var(--azul)}
/* Las inactivas se ven más apagadas hasta que se les acerca el mouse. */
.pagina-cristal .tarjeta-inactiva{background:linear-gradient(145deg, rgba(255,255,255,.58), rgba(255,255,255,.34))}
.pagina-cristal .tarjeta-inactiva::before{background:linear-gradient(90deg, #B7C3D3, #D5DDE8)}
.pagina-cristal .tarjeta-inactiva h3{color:#4A5C74}
.pagina-cristal .tarjeta-inactiva .barra-cupos i{background:#9AA9BC}
.pagina-cristal .insignia::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor}
.pagina-cristal .insignia-activa::before{animation:latido-punto 2.4s ease-in-out infinite}
@keyframes latido-punto{50%{opacity:.35}}

/* ---- Botones: vidrio, brillo que cruza al pasar el mouse, y "hundido" al presionar ---- */
.pagina-cristal :is(main,.fondo-modal) .btn{
  position:relative; isolation:isolate; overflow:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), background .25s ease, border-color .25s ease;
}
.pagina-cristal :is(main,.fondo-modal) .btn::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform:translateX(-130%); transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.pagina-cristal :is(main,.fondo-modal) .btn:hover:not(:disabled)::after{transform:translateX(130%)}
.pagina-cristal :is(main,.fondo-modal) .btn:hover:not(:disabled){transform:translateY(-2px)}
.pagina-cristal :is(main,.fondo-modal) .btn:active:not(:disabled){transform:translateY(0) scale(.97)}
.pagina-cristal :is(main,.fondo-modal) .btn-primario{
  background:rgba(10,61,114,.88); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px rgba(10,61,114,.28);
}
.pagina-cristal :is(main,.fondo-modal) .btn-verde{
  background:rgba(0,166,81,.9); border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 10px 24px rgba(0,166,81,.28);
}
.pagina-cristal :is(main,.fondo-modal) .btn-linea,
.pagina-cristal :is(main,.fondo-modal) .btn-peligro{
  background:rgba(255,255,255,.55); border-color:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 #fff, 0 6px 16px rgba(10,61,114,.08);
}
.pagina-cristal :is(main,.fondo-modal) .btn-linea:hover:not(:disabled){background:rgba(255,255,255,.85); border-color:rgba(10,61,114,.35)}
.pagina-cristal :is(main,.fondo-modal) .btn-peligro:hover:not(:disabled){background:rgba(253,240,241,.9)}
.pagina-cristal :is(main,.fondo-modal) .btn-primario:hover:not(:disabled){background:rgba(13,74,138,.94)}
.pagina-cristal :is(main,.fondo-modal) .btn-verde:hover:not(:disabled){background:rgba(0,140,68,.95)}

/* ---- Ventanas emergentes (modales) y avisos ---- */
.pagina-cristal .fondo-modal{background:rgba(6,30,58,.42); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%)}
.pagina-cristal .modal{
  background:linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,.72));
  -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 #fff, 0 30px 80px rgba(6,20,40,.35);
}
.pagina-cristal .fondo-modal.abierto .modal{animation:entra-modal .4s cubic-bezier(.22,1,.36,1)}
@keyframes entra-modal{from{opacity:0; transform:translateY(22px) scale(.96)}}
.pagina-cristal .flotante{
  background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.9); border-left-width:5px;
}

@media (max-width:640px){
  .pagina-cristal .usuario-admin #nombre-admin{display:none}
  .barra-filtros{flex-direction:column; align-items:stretch}
  .pestanas-cursos{display:flex}
  .pestanas-cursos button{flex:1; justify-content:center; padding-inline:.5rem}
  .barra-filtros .buscador,.barra-filtros .buscador:focus{width:100%}
  .grupo-encabezado p{margin-left:0; flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .pagina-cristal::before,.punto-activa,.insignia-activa::before{animation:none}
  .pagina-cristal :is(#lista-convocatorias,#mis-cursos,#otros-cursos) .tarjeta-curso{opacity:1; transform:none}
  .pagina-cristal .metrica:hover,.pagina-cristal :is(#lista-convocatorias,#mis-cursos,#otros-cursos) .tarjeta-curso.revelada:hover{transform:none}
  .pagina-cristal :is(main,.fondo-modal) .btn::after{display:none}
}
@media print{.pagina-cristal::before{display:none}}

/* ---------- Botón de eliminar: minimalista, se pone rojo al acercar el mouse ---------- */
.btn-eliminar{
  flex:none; width:46px; height:46px; padding:0; border-radius:50%; cursor:pointer;
  display:inline-grid; place-items:center; position:relative; isolation:isolate;
  color:#8797AD; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 #fff, 0 6px 16px rgba(10,61,114,.08);
  touch-action:manipulation;
  transition:color .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .3s ease;
}
.btn-eliminar::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0;
  background:linear-gradient(150deg, #F4646F, #D6323F);
  transition:opacity .3s ease;
}
.btn-eliminar svg{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.btn-eliminar .tapa{transform-origin:20px 7px; transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.btn-eliminar:hover,.btn-eliminar:focus-visible{
  color:#fff; border-color:rgba(214,50,63,.55); transform:scale(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 26px rgba(214,50,63,.4);
}
.btn-eliminar:hover::before,.btn-eliminar:focus-visible::before{opacity:1}
.btn-eliminar:hover .tapa,.btn-eliminar:focus-visible .tapa{transform:translate(1px,-2px) rotate(-16deg)}
.btn-eliminar:hover svg,.btn-eliminar:focus-visible svg{animation:sacudir-basurero .5s ease .1s}
.btn-eliminar:active{transform:scale(.94)}
.btn-eliminar-sm{width:38px; height:38px}
.btn-eliminar-sm svg{width:17px; height:17px}
@keyframes sacudir-basurero{25%{transform:rotate(-7deg)} 50%{transform:rotate(6deg)} 75%{transform:rotate(-3deg)}}

/* ---------- Ventana de confirmación para eliminar ---------- */
.pagina-cristal #modal-eliminar{z-index:120; background:rgba(40,10,16,.5)}
.modal-peligro{width:min(460px,100%); text-align:center; padding:2rem 1.8rem 1.6rem}
.modal-peligro h2{font-size:1.45rem; margin-bottom:.6rem}
.modal-peligro p{color:var(--suave); font-size:.95rem; line-height:1.55; margin:0 0 1.1rem}
.modal-peligro p b{color:var(--azul-tinta)}
.icono-peligro{
  position:relative; width:68px; height:68px; margin:0 auto 1rem; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg, #F4646F, #D6323F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 12px 28px rgba(214,50,63,.4);
}
.icono-peligro::after{
  content:''; position:absolute; inset:-7px; border-radius:50%; border:2px solid rgba(214,50,63,.3);
  animation:pulso-peligro 2s ease-out infinite;
}
.paso-2 .modal-peligro .icono-peligro{animation:latir-peligro 1s ease-in-out infinite}
.paso-2 .modal-peligro .icono-peligro::after{animation-duration:1.1s; border-color:rgba(214,50,63,.5)}
@keyframes pulso-peligro{from{transform:scale(.9); opacity:1} to{transform:scale(1.35); opacity:0}}
@keyframes latir-peligro{50%{transform:scale(1.07)}}
.pasos-peligro{display:flex; justify-content:center; gap:.4rem; margin-bottom:.9rem}
.pasos-peligro i{width:22px; height:5px; border-radius:999px; background:rgba(10,61,114,.14); transition:background .3s ease, width .3s ease}
.pasos-peligro i.activo{width:34px; background:var(--rojo)}
.resumen-peligro{
  display:grid; gap:.15rem; padding:.85rem 1rem; margin-bottom:1.3rem; border-radius:var(--r-md);
  background:rgba(214,50,63,.07); border:1px solid rgba(214,50,63,.18);
}
.resumen-peligro b{font-family:var(--display); color:var(--azul-tinta); font-size:1rem}
.resumen-peligro span{font-size:.85rem; color:var(--rojo); font-weight:600}
.paso-2 .modal-peligro .resumen-peligro{display:none}
.acciones-peligro{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap}
.acciones-peligro .btn{flex:1; min-width:130px}
.btn-peligro-solido{
  flex:1; min-width:130px; font-family:var(--cuerpo); font-weight:700; font-size:.95rem; cursor:pointer;
  padding:.85rem 1.2rem; min-height:46px; border-radius:999px; color:#fff; border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(150deg, #F4646F, #D6323F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px rgba(214,50,63,.35);
  touch-action:manipulation;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, filter .2s ease, opacity .2s ease;
}
.btn-peligro-solido:hover:not(:disabled){transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 16px 32px rgba(214,50,63,.45)}
.btn-peligro-solido:active:not(:disabled){transform:scale(.97)}
.btn-peligro-solido:disabled{opacity:.6; cursor:not-allowed; filter:saturate(.6)}
@media (prefers-reduced-motion:reduce){
  .icono-peligro::after,.paso-2 .modal-peligro .icono-peligro,.btn-eliminar:hover svg,.btn-eliminar:focus-visible svg{animation:none}
}

/* ==========================================================
   FORMULARIO DE INSCRIPCIÓN — extras de "liquid glass"
   (sobre lo compartido con el panel: .pagina-cristal)
   ========================================================== */
.pagina-registro .panel-formulario,
.pagina-registro .tarjeta{position:relative; transition:box-shadow .4s ease}
.pagina-registro .panel-formulario::after,
.pagina-registro .tarjeta::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.55), transparent 45%);
  transition:opacity .4s ease;
}
.pagina-registro .panel-formulario:hover::after,
.pagina-registro .tarjeta:hover::after{opacity:1}
.pagina-registro .tarjeta,.pagina-registro .panel-formulario{border-radius:var(--r-xl)}

/* Pasos numerados: esfera de vidrio que se ilumina cuando estás escribiendo en ese paso
   y se vuelve verde con ✓ cuando ya quedó completo. */
.pagina-registro .paso{border-top-color:rgba(10,61,114,.09); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.pagina-registro .paso.espera{opacity:0; transform:translateY(24px)}
.pagina-registro .numero-paso{
  position:relative; background:linear-gradient(150deg, #1C6AB8, #0A3D72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 14px rgba(10,61,114,.3);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .35s ease;
}
.pagina-registro .paso:focus-within .numero-paso{
  transform:scale(1.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 6px rgba(10,61,114,.12), 0 8px 20px rgba(10,61,114,.35);
}
.pagina-registro .paso.completo .numero-paso{
  background:linear-gradient(150deg, #2FD285, #00A651); color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 6px 16px rgba(0,166,81,.4);
}
.pagina-registro .paso.completo .numero-paso::after{
  content:''; position:absolute; left:50%; top:48%; width:6px; height:11px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:translate(-50%,-55%) rotate(45deg);
  animation:marca-paso .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes marca-paso{from{opacity:0; transform:translate(-50%,-55%) rotate(45deg) scale(.3)}}
.pagina-registro .titulo-paso h3{transition:color .3s ease}
.pagina-registro .paso:focus-within .titulo-paso h3{color:var(--azul)}

/* Campos de vidrio con brillo al enfocar */
:is(.pagina-registro,.pagina-acceso) input,:is(.pagina-registro,.pagina-acceso) select,:is(.pagina-registro,.pagina-acceso) textarea{
  background:rgba(255,255,255,.62); border:1.5px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 3px rgba(10,61,114,.07), 0 1px 0 rgba(255,255,255,.7);
  transition:border-color .25s ease, box-shadow .3s ease, background .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
:is(.pagina-registro,.pagina-acceso) input:hover,:is(.pagina-registro,.pagina-acceso) select:hover,:is(.pagina-registro,.pagina-acceso) textarea:hover{background:rgba(255,255,255,.85)}
:is(.pagina-registro,.pagina-acceso) input:focus,:is(.pagina-registro,.pagina-acceso) select:focus,:is(.pagina-registro,.pagina-acceso) textarea:focus{
  background:#fff; border-color:var(--azul); transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(10,61,114,.12), 0 10px 24px rgba(10,61,114,.12);
}
:is(.pagina-registro,.pagina-acceso) input.valido{border-color:var(--verde); box-shadow:0 0 0 4px rgba(0,166,81,.12), inset 0 1px 3px rgba(0,166,81,.08)}
:is(.pagina-registro,.pagina-acceso) input.invalido{border-color:var(--rojo); box-shadow:0 0 0 4px rgba(214,50,63,.12)}
:is(.pagina-registro,.pagina-acceso) input[type=checkbox]{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
:is(.pagina-registro,.pagina-acceso) input[type=checkbox]:active{transform:scale(.85)}
:is(.pagina-registro,.pagina-acceso) .casilla{padding:.8rem 1rem; border-radius:var(--r-md); background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.8); transition:background .25s ease}
:is(.pagina-registro,.pagina-acceso) .casilla:hover{background:rgba(255,255,255,.7)}

/* Recuadros informativos y de escaneo, en vidrio (mismos colores, translúcidos) */
.pagina-registro .escaneo{
  background:linear-gradient(145deg, rgba(232,242,253,.7), rgba(255,255,255,.4));
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.85); box-shadow:inset 0 1px 0 #fff, 0 8px 22px rgba(10,61,114,.06);
}
:is(.pagina-registro,.pagina-acceso) .aviso{-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
:is(.pagina-registro,.pagina-acceso) .aviso-alerta{background:rgba(254,247,224,.75); border-color:rgba(245,226,168,.9)}
:is(.pagina-registro,.pagina-acceso) .aviso-info{background:rgba(234,241,250,.7); border-color:rgba(207,224,243,.9)}
:is(.pagina-registro,.pagina-acceso) .aviso-ok{background:rgba(233,249,240,.75)}
:is(.pagina-registro,.pagina-acceso) .aviso-mal{background:rgba(253,240,241,.78)}

/* Barra de avance y pastilla "Tu ficha" */
.progreso-ficha{position:fixed; top:0; left:0; right:0; height:4px; z-index:90; background:rgba(10,61,114,.08); pointer-events:none}
.progreso-ficha i{
  display:block; height:100%; width:0; border-radius:0 999px 999px 0;
  background:linear-gradient(90deg, var(--azul), var(--verde) 70%, #7BE0A8);
  box-shadow:0 0 12px rgba(0,166,81,.55);
  transition:width .7s cubic-bezier(.22,1,.36,1);
}
.pastilla-ficha{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:85; display:flex; align-items:center; gap:.6rem;
  padding:.5rem .95rem .5rem .55rem; border-radius:999px; font-size:.82rem; font-weight:700; color:var(--azul);
  background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%);
  box-shadow:inset 0 1px 0 #fff, 0 12px 30px rgba(10,61,114,.18);
  animation:entrar-pastilla .5s cubic-bezier(.22,1,.36,1);
}
.pastilla-ficha[hidden]{display:none}
.pastilla-ficha.completa{color:var(--verde-oscuro)}
@keyframes entrar-pastilla{from{opacity:0; transform:translateY(14px) scale(.92)}}
.anillo-ficha{
  --p:0; width:26px; height:26px; border-radius:50%; flex:none; position:relative;
  background:conic-gradient(var(--verde) calc(var(--p) * 1%), rgba(10,61,114,.12) 0);
  transition:background .4s ease;
}
.anillo-ficha::after{content:''; position:absolute; inset:5px; border-radius:50%; background:rgba(255,255,255,.95)}
@media (max-width:640px){
  .pastilla-ficha{right:.7rem; bottom:.7rem; font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){
  .pagina-registro .paso{transition:none}
  .pagina-registro .paso.espera{opacity:1; transform:none}
  .pastilla-ficha,.pagina-registro .paso.completo .numero-paso::after{animation:none}
  .progreso-ficha i{transition:none}
}

/* ==========================================================
   PORTAL DEL ESTUDIANTE — estructura y "liquid glass"
   (comparte vidrio, botones y animaciones con el panel: .pagina-cristal)
   ========================================================== */
.perfil-hero{
  display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; margin-bottom:1.4rem;
  padding:1.5rem 1.7rem; border-radius:var(--r-xl); position:relative; overflow:hidden;
}
.perfil-hero::before{
  content:''; position:absolute; right:-70px; top:-90px; width:260px; height:260px; border-radius:50%;
  border:34px solid var(--amarillo); opacity:.16; pointer-events:none;
}
.avatar-portal{
  width:74px; height:74px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff;
  font-family:var(--display); font-weight:800; font-size:2rem;
  background:linear-gradient(150deg, #2FD285, #00A651);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 12px 28px rgba(0,166,81,.35);
}
.perfil-info{min-width:0; flex:1}
.perfil-etiqueta{margin:0 0 .15rem; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--verde)}
.perfil-info h1{font-size:clamp(1.7rem,4vw,2.3rem)}
.perfil-chips{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.7rem}
.chip-perfil{
  display:inline-flex; align-items:center; font-size:.83rem; color:var(--azul-tinta); max-width:100%;
  padding:.3rem .8rem; border-radius:999px; overflow-wrap:anywhere;
  background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff, 0 4px 12px rgba(10,61,114,.06);
}

.tablero-portal{grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); margin-bottom:2.2rem}
.metrica-verde b{color:var(--verde-oscuro)}
.metrica-amarilla b{color:#B07F00}
.metrica-roja b{color:var(--rojo)}
.metrica-verde::before,.metrica-amarilla::before,.metrica-roja::before{
  content:''; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0;
}
.metrica-verde::before{background:var(--verde)}
.metrica-amarilla::before{background:var(--amarillo)}
.metrica-roja::before{background:var(--rojo)}

.grupo-portal{margin-bottom:2.6rem}
.punto-abierta{background:var(--azul); box-shadow:0 0 0 4px rgba(10,61,114,.16)}

/* Tarjetas de "Mis inscripciones": ya no dejan un hueco enorme entre título y datos. */
.pagina-portal .tarjeta-curso .resumen{flex:none; margin:0 0 .9rem; color:var(--suave)}
.acciones-inscripcion{margin-top:auto; display:grid; gap:.7rem; padding-top:.3rem}
.pie-inscripcion{margin:.1rem 0 0}

/* Datos del curso en cuadrícula ordenada (etiqueta arriba, valor abajo) */
.datos-curso{
  display:grid; grid-template-columns:1fr 1fr; gap:.55rem .9rem; margin:.2rem 0 1rem; padding:.85rem .95rem;
  border-radius:var(--r-md); background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.85);
}
.datos-curso div{min-width:0}
.datos-curso dt{font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--suave)}
.datos-curso dd{margin:.05rem 0 0; font-size:.9rem; font-weight:600; color:var(--azul-tinta); overflow-wrap:anywhere}

/* Línea de seguimiento: Inscrito → En revisión → resultado */
.seguimiento{list-style:none; display:flex; margin:0 0 1rem; padding:0}
.seguimiento li{flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:.35rem; text-align:center; font-size:.72rem; font-weight:600; color:var(--suave)}
.seguimiento li i{
  position:relative; z-index:1; width:16px; height:16px; border-radius:50%; background:#fff;
  border:2px solid rgba(10,61,114,.2); transition:background .3s ease, border-color .3s ease;
}
.seguimiento li::before{
  content:''; position:absolute; top:7px; right:50%; width:100%; height:2px; background:rgba(10,61,114,.15);
}
.seguimiento li:first-child::before{display:none}
.seguimiento li.hecho i,.seguimiento li.actual i{background:var(--verde); border-color:var(--verde)}
.seguimiento li.hecho::before,.seguimiento li.actual::before{background:var(--verde)}
.seguimiento li.hecho{color:var(--verde-oscuro)}
.seguimiento li.actual{color:var(--azul-tinta); font-weight:700}
.seguimiento li.actual:not(.ok):not(.mal) i{background:var(--amarillo); border-color:var(--amarillo); animation:latido-seguimiento 2s ease-in-out infinite}
.seguimiento li.actual.ok i{box-shadow:0 0 0 4px rgba(0,166,81,.2)}
.seguimiento li.actual.mal i{background:var(--rojo); border-color:var(--rojo); box-shadow:0 0 0 4px rgba(214,50,63,.2)}
.seguimiento li.actual.mal{color:var(--rojo)}
.seguimiento li.actual.mal::before{background:var(--rojo)}
@keyframes latido-seguimiento{50%{box-shadow:0 0 0 6px rgba(245,197,24,.05); transform:scale(1.15)} 0%,100%{box-shadow:0 0 0 4px rgba(245,197,24,.3)}}

.pagina-portal .tarjeta-inscripcion .aviso{border-radius:var(--r-md)}
.pagina-portal .tarjeta-inscripcion .aviso-alerta{background:rgba(254,247,224,.72); border-color:rgba(245,226,168,.9)}
.pagina-portal .tarjeta-inscripcion .aviso-info{background:rgba(234,241,250,.7); border-color:rgba(207,224,243,.9)}
.pagina-portal .vacio-grupo{grid-column:1/-1}

@media (max-width:640px){
  .tablero-portal{grid-template-columns:1fr 1fr; gap:.8rem}
  .tablero-portal .metrica{padding:.9rem 1rem}
  .tablero-portal .metrica b{font-size:1.8rem}
  .perfil-hero{padding:1.2rem}
  .avatar-portal{width:60px; height:60px; font-size:1.6rem}
  .grupo-encabezado p{margin-left:0; flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .seguimiento li.actual:not(.ok):not(.mal) i{animation:none}
}

/* ==========================================================
   INGRESO / RECUPERAR CLAVE / NUEVA CLAVE — "liquid glass"
   ========================================================== */
.pagina-acceso .pantalla-acceso{position:relative}

/* Lado izquierdo: azul profundo con orbes que flotan y beneficios en vidrio */
.pagina-acceso .acceso-lateral{
  background:
    radial-gradient(520px 380px at 12% 92%, rgba(0,166,81,.5), transparent 70%),
    radial-gradient(560px 420px at 92% 6%, rgba(245,197,24,.22), transparent 70%),
    linear-gradient(160deg, #0B4680, #082F5B 70%);
}
.pagina-acceso .acceso-lateral::after{opacity:.14; animation:girar-anillo 60s linear infinite}
@keyframes girar-anillo{to{transform:rotate(360deg)}}
.orbe{position:absolute !important; border-radius:50%; pointer-events:none; filter:blur(2px); z-index:1 !important}
.orbe-1{width:190px; height:190px; right:8%; top:12%;
  background:radial-gradient(circle at 30% 28%, rgba(255,255,255,.55), rgba(255,255,255,.08) 55%, transparent 70%);
  box-shadow:inset 0 0 40px rgba(255,255,255,.12); animation:flotar-orbe 9s ease-in-out infinite}
.orbe-2{width:110px; height:110px; right:22%; bottom:16%;
  background:radial-gradient(circle at 30% 28%, rgba(245,197,24,.6), rgba(245,197,24,.06) 60%, transparent 72%);
  animation:flotar-orbe 11s ease-in-out infinite reverse}
@keyframes flotar-orbe{50%{transform:translate3d(-14px,-22px,0) scale(1.06)}}
.pagina-acceso .acceso-lateral > img{
  box-shadow:inset 0 1px 0 #fff, 0 18px 40px rgba(0,0,0,.3);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.pagina-acceso .acceso-lateral > img:hover{transform:rotate(-3deg) scale(1.06)}
.pagina-acceso .lista-beneficios li{
  padding:.7rem 1rem; border-radius:var(--r-md); width:fit-content; max-width:100%;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .4s cubic-bezier(.22,1,.36,1), background .3s ease;
  animation:entra-beneficio .7s cubic-bezier(.22,1,.36,1) backwards;
}
.pagina-acceso .lista-beneficios li:nth-child(2){animation-delay:.12s}
.pagina-acceso .lista-beneficios li:nth-child(3){animation-delay:.24s}
.pagina-acceso .lista-beneficios li:hover{transform:translateX(8px); background:rgba(255,255,255,.16)}
@keyframes entra-beneficio{from{opacity:0; transform:translateX(-24px)}}
.pagina-acceso .acceso-lateral a{transition:opacity .2s ease, transform .3s ease}
.pagina-acceso .acceso-lateral a:hover{opacity:.85; transform:translateX(-4px)}

/* Lado derecho: la caja de ingreso en vidrio */
.pagina-acceso .acceso-panel{background:transparent}
.pagina-acceso .caja-acceso{animation:entra-caja .8s cubic-bezier(.22,1,.36,1)}
@keyframes entra-caja{from{opacity:0; transform:translateY(26px) scale(.97)}}
.pagina-acceso .panel-formulario{position:relative; overflow:hidden; border-radius:var(--r-xl)}
.pagina-acceso .panel-formulario::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.6), transparent 45%);
  transition:opacity .4s ease;
}
.pagina-acceso .panel-formulario:hover::after{opacity:1}
.pagina-acceso .panel-formulario.entrando{animation:entra-formulario .55s cubic-bezier(.22,1,.36,1)}
@keyframes entra-formulario{from{opacity:0; transform:translateY(16px)}}
.pagina-acceso .caja-acceso.sacudir{animation:sacudir-caja .5s ease}
@keyframes sacudir-caja{20%{transform:translateX(-9px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)}}

/* Pestañas: el fondo blanco se desliza entre "Ingresar" y "Olvidé mi clave" */
.pagina-acceso .pestanas{
  position:relative; background:rgba(255,255,255,.5); border-color:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 #fff, 0 10px 26px rgba(10,61,114,.1);
}
.pagina-acceso .pestanas::before{
  content:''; position:absolute; top:.28rem; bottom:.28rem; left:.28rem; width:calc(50% - .28rem);
  border-radius:999px; background:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff, 0 6px 16px rgba(10,61,114,.16);
  transform:translateX(calc(var(--i, 0) * 100%));
  transition:transform .5s cubic-bezier(.34,1.3,.64,1);
}
.pagina-acceso .pestanas button{position:relative; z-index:1}
.pagina-acceso .pestanas button.activa{background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none}
.pagina-acceso .pestanas button:hover:not(.activa){color:var(--azul)}
.pagina-acceso .pestanas button:active{transform:scale(.97)}

.enlace-modo{
  align-self:flex-start; background:none; border:0; padding:.15rem 0; font:inherit; font-size:.8rem; font-weight:600;
  color:var(--azul); cursor:pointer; text-underline-offset:3px; touch-action:manipulation;
  transition:color .2s ease, transform .3s ease;
}
.enlace-modo:hover{text-decoration:underline; transform:translateX(3px)}

/* Botones de la caja de ingreso: vidrio + destello */
.pagina-acceso .acceso-panel .btn{position:relative; isolation:isolate; overflow:hidden; min-height:50px}
.pagina-acceso .acceso-panel .btn::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform:translateX(-130%); transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.pagina-acceso .acceso-panel .btn:hover:not(:disabled)::after{transform:translateX(130%)}
.pagina-acceso .acceso-panel .btn-verde{
  background:rgba(0,166,81,.9); border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 10px 24px rgba(0,166,81,.28);
}
.pagina-acceso .acceso-panel .btn-verde:hover:not(:disabled){transform:translateY(-2px); background:rgba(0,140,68,.95)}
.pagina-acceso .acceso-panel .btn-verde:active:not(:disabled){transform:scale(.98)}
.pagina-acceso .clave-alternar{transition:background .2s ease, color .2s ease, transform .25s ease}
.pagina-acceso .clave-alternar:hover{background:rgba(255,255,255,.8); transform:translateY(-50%) scale(1.08)}

@media (max-width:900px){
  .orbe-1{width:120px; height:120px; right:6%; top:10%}
  .orbe-2{display:none}
}
@media (prefers-reduced-motion:reduce){
  .orbe,.pagina-acceso .acceso-lateral::after,.pagina-acceso .caja-acceso,.pagina-acceso .lista-beneficios li,
  .pagina-acceso .panel-formulario.entrando,.pagina-acceso .caja-acceso.sacudir{animation:none}
  .pagina-acceso .pestanas::before{transition:none}
}

/* Patrocinadores en el lado azul del ingreso: logos sobre píldoras de vidrio. */
.patrocinadores-acceso{margin-top:2.2rem; display:grid; gap:.7rem}
.patrocinadores-acceso > span{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); font-weight:600}
.logos-acceso{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap}
.logo-cristal{
  display:grid; place-items:center; padding:.75rem 1.15rem; border-radius:var(--r-lg);
  background:linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 28px rgba(0,0,0,.2);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .3s ease;
  animation:entra-beneficio .8s cubic-bezier(.22,1,.36,1) .35s backwards;
}
.logo-cristal:nth-child(2){animation-delay:.5s}
.logo-cristal:hover{transform:translateY(-5px) scale(1.04); background:linear-gradient(145deg, rgba(255,255,255,.3), rgba(255,255,255,.1)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 20px 40px rgba(0,0,0,.28)}
.patrocinadores-acceso .logo-cristal img{height:48px; width:auto; margin:0; align-self:auto; display:block}
@media (max-width:900px){
  .patrocinadores-acceso{display:none} /* en el celular ya se ven en el pie de la página */
}
@media (prefers-reduced-motion:reduce){
  .logo-cristal{animation:none}
}

/* Los tres logos usan la misma píldora de vidrio oscuro. El de Juventud Emprende Diferente
   va en su versión clara (el texto azul marino pasa a blanco) para leerse sobre el fondo azul. */
.acceso-lateral .logo-principal{align-self:flex-start; margin-bottom:2rem; padding:.9rem 1.4rem}
.acceso-lateral .logo-principal img{height:84px; width:auto; margin:0; align-self:auto; display:block}
.patrocinadores-acceso .logo-cristal img{height:54px}
.patrocinadores-acceso .logo-cristal:first-child img{height:58px}
@media (max-width:900px){
  .acceso-lateral .logo-principal{padding:.7rem 1.1rem}
  .acceso-lateral .logo-principal img{height:64px}
}
/* El Oro es verde y dorado: un poco más de brillo para que se lea igual de bien que los otros dos sobre el vidrio oscuro. */
.patrocinadores-acceso .logo-cristal img[src*="eloro"]{filter:brightness(1.22) saturate(1.15) drop-shadow(0 1px 3px rgba(0,0,0,.3))}

/* ==========================================================
   INICIO — mismo diseño de logos, fondo con movimiento y orden de cursos
   que el ingreso y el panel de administración
   ========================================================== */
/* Portada: azul profundo con brillos de color, orbes flotando y el anillo girando despacio */
.portada{
  background:
    radial-gradient(620px 420px at 8% 96%, rgba(0,166,81,.42), transparent 70%),
    radial-gradient(640px 460px at 94% 4%, rgba(245,197,24,.2), transparent 70%),
    linear-gradient(160deg, #0B4680, #082F5B 72%);
}
.portada::after{animation:girar-anillo 70s linear infinite}
.portada .orbe-1{right:32%; top:8%}
.portada .orbe-2{right:44%; bottom:10%}

/* Patrocinadores: la misma píldora de vidrio oscuro del ingreso */
.patrocinadores-portada{max-width:380px}
.patrocinadores-portada .patrocinadores-logos{gap:.9rem}
.patrocinadores-portada .logo-cristal img{height:54px; width:auto; display:block}
.patrocinadores-portada .logo-cristal:first-child img{height:58px}
.patrocinadores-portada .logo-cristal img[src*="eloro"]{filter:brightness(1.22) saturate(1.15) drop-shadow(0 1px 3px rgba(0,0,0,.3))}

/* Sección de cursos: fondo con manchas de color para que el vidrio tenga qué difuminar */
#cursos{position:relative; isolation:isolate}
#cursos::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(620px 420px at 6% 8%, rgba(0,166,81,.14), transparent 70%),
    radial-gradient(700px 480px at 96% 14%, rgba(10,61,114,.16), transparent 70%),
    radial-gradient(560px 420px at 60% 96%, rgba(245,197,24,.16), transparent 70%);
}
#cursos .grupo-cursos:last-child{margin-bottom:0}

/* Tarjetas de curso en vidrio, con brillo que sigue al puntero; los cerrados se ven más apagados */
#lista-cursos .tarjeta-curso{
  background:linear-gradient(145deg, rgba(255,255,255,.8), rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(10,61,114,.05), 0 14px 34px rgba(10,61,114,.09);
}
#lista-cursos .tarjeta-curso::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.7), transparent 45%);
  transition:opacity .35s ease;
}
#lista-cursos .tarjeta-curso:hover::after{opacity:1}
#lista-cursos .tarjeta-curso > *{position:relative; z-index:1}
#lista-cursos .tarjeta-inactiva{background:linear-gradient(145deg, rgba(255,255,255,.6), rgba(255,255,255,.34))}
#lista-cursos .tarjeta-inactiva::before{background:linear-gradient(90deg, #B7C3D3, #D5DDE8)}
#lista-cursos .tarjeta-inactiva h3{color:#4A5C74}
#lista-cursos .tarjeta-inactiva .barra-cupos i{background:#9AA9BC !important}
#lista-cursos .insignia::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor}
#lista-cursos .insignia-activa::before{animation:latido-punto 2.4s ease-in-out infinite}
@media (max-width:640px){
  #cursos .grupo-encabezado p{margin-left:0; flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .portada::after,#lista-cursos .insignia-activa::before{animation:none}
}

/* Foto de perfil del portal: el avatar es un botón; muestra la foto (o la inicial) y una cámara al pasar el mouse. */
.avatar-zona{display:flex; flex-direction:column; align-items:center; gap:.4rem; flex:none}
button.avatar-portal{
  position:relative; border:0; padding:0; cursor:pointer; font-family:var(--display);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
button.avatar-portal:hover{transform:scale(1.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 16px 34px rgba(0,166,81,.45)}
button.avatar-portal:active{transform:scale(.96)}
button.avatar-portal:disabled{opacity:.6; cursor:progress}
.avatar-portal img{position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover}
.avatar-portal img[hidden],.avatar-portal span[hidden]{display:none}
.avatar-camara{
  position:absolute; right:-2px; bottom:-2px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; color:var(--azul); background:rgba(255,255,255,.95);
  border:1px solid rgba(10,61,114,.12); box-shadow:0 4px 10px rgba(10,61,114,.2);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
button.avatar-portal:hover .avatar-camara{transform:scale(1.15) rotate(-8deg)}
.avatar-quitar{align-self:center !important; font-size:.72rem; color:var(--suave)}

/* Foto de perfil del administrador: el avatar de la barra es un botón; la ✕ para quitarla aparece al pasar el mouse. */
.avatar-zona-admin{position:relative; display:inline-flex; flex:none}
button.avatar{position:relative; border:0; padding:0; cursor:pointer; font-family:inherit; color:#fff; transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease}
button.avatar:hover{transform:scale(1.12); box-shadow:0 0 0 3px rgba(255,255,255,.35)}
button.avatar:active{transform:scale(.94)}
button.avatar:disabled{opacity:.6; cursor:progress}
.avatar img{position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover}
.avatar img[hidden],.avatar span[hidden]{display:none}
.avatar-quitar-x{
  position:absolute; top:-6px; right:-6px; width:18px; height:18px; padding:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:.6rem; line-height:1; color:#fff; background:var(--rojo);
  border:1.5px solid rgba(255,255,255,.9); opacity:0; transform:scale(.6);
  transition:opacity .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.avatar-quitar-x[hidden]{display:none}
.avatar-zona-admin:hover .avatar-quitar-x,.avatar-quitar-x:focus-visible{opacity:1; transform:scale(1)}
@media (hover:none){ .avatar-quitar-x:not([hidden]){opacity:1; transform:scale(1)} }

/* Confirmación del correo de aprobación: misma ventana que la de eliminar, en tono verde. */
.pagina-cristal #modal-correo-aprobacion{z-index:120; background:rgba(6,30,58,.5)}
.modal-suave .icono-peligro{
  background:linear-gradient(150deg, #2FD285, #00A651);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 12px 28px rgba(0,166,81,.4);
}
.modal-suave .icono-peligro::after{border-color:rgba(0,166,81,.32)}
.modal-suave .resumen-peligro{background:rgba(0,166,81,.07); border-color:rgba(0,166,81,.2)}
.modal-suave .resumen-peligro span{color:var(--verde-oscuro)}
.modal-suave .nota-suave{font-size:.82rem; margin:-.3rem 0 1.3rem}
.btn-confirmar-solido{
  flex:1; min-width:130px; font-family:var(--cuerpo); font-weight:700; font-size:.95rem; cursor:pointer;
  padding:.85rem 1.2rem; min-height:46px; border-radius:999px; color:#fff; border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(150deg, #2FD285, #00A651);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px rgba(0,166,81,.35);
  touch-action:manipulation;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, filter .2s ease;
}
.btn-confirmar-solido:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 16px 32px rgba(0,166,81,.45)}
.btn-confirmar-solido:active{transform:scale(.97)}

/* ---------- Enlace directo a un curso (botón junto al identificador) ---------- */
.enlace-curso{
  display:inline-flex; align-items:center; gap:.3rem; background:none; border:0; padding:.1rem 0;
  color:var(--suave); cursor:pointer; touch-action:manipulation; transition:color .2s ease;
}
.enlace-curso:hover, .enlace-curso:focus-visible{color:var(--azul)}
.enlace-curso svg{flex:none; opacity:.7}
.enlace-curso:hover svg, .enlace-curso:focus-visible svg{opacity:1}

/* Resalta la tarjeta a la que se llegó por enlace directo (index.html#curso-slug). */
#lista-cursos .tarjeta-curso.curso-destacado{
  animation:destacar-curso 2.6s ease-out;
}
@keyframes destacar-curso{
  0%{box-shadow:0 0 0 0 rgba(0,166,81,.55), inset 0 1px 0 rgba(255,255,255,.95), 0 14px 34px rgba(10,61,114,.09)}
  15%{box-shadow:0 0 0 6px rgba(0,166,81,.28), inset 0 1px 0 rgba(255,255,255,.95), 0 14px 34px rgba(10,61,114,.09)}
  100%{box-shadow:0 0 0 0 rgba(0,166,81,0), inset 0 1px 0 rgba(255,255,255,.95), 0 14px 34px rgba(10,61,114,.09)}
}
@media (prefers-reduced-motion:reduce){
  #lista-cursos .tarjeta-curso.curso-destacado{animation:none; box-shadow:0 0 0 3px rgba(0,166,81,.4)}
}

/* ---------- Flyer del curso: subida desde el panel (Editar curso) ---------- */
.flyer-zona{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:.5rem}
.flyer-vista{
  width:150px; height:150px; flex:none; border-radius:var(--r-md); overflow:hidden;
  background:#F1F5FA; border:1.5px solid var(--linea); display:grid; place-items:center;
}
.flyer-vista img{width:100%; height:100%; object-fit:cover}
.flyer-vista #flyer-vacio{color:var(--suave); font-size:.78rem; text-align:center; padding:0 .6rem}
.flyer-botones{display:flex; flex-direction:column; gap:.5rem}
#flyer-aviso{margin:0; flex-basis:100%}

/* ---------- Página propia de un curso (/curso/<slug>) ---------- */
.pagina-curso{position:relative; isolation:isolate}
.pagina-curso::before{
  content:''; position:absolute; inset:-2rem -50vw -2rem; z-index:-1; pointer-events:none;
  background:
    radial-gradient(560px 400px at 10% 0%, rgba(0,166,81,.1), transparent 70%),
    radial-gradient(620px 440px at 100% 10%, rgba(10,61,114,.12), transparent 70%);
}
.flyer-hero{padding:0; overflow:hidden}
.flyer-hero-imagen{display:block; width:100%; max-height:560px; object-fit:cover}
.flyer-hero-vacio{
  min-height:220px; display:grid; place-items:center; padding:2.4rem 1.5rem; text-align:center;
  background:var(--barra,var(--azul)); /* respaldo si el navegador no soporta color-mix() */
  background:linear-gradient(150deg, var(--barra,var(--azul)), color-mix(in srgb, var(--barra,var(--azul)) 70%, #000));
}
.flyer-hero-vacio h1{color:#fff; font-size:clamp(1.5rem,4vw,2.1rem); max-width:26ch}
.resumen-curso{color:var(--suave); font-size:1rem; line-height:1.6; max-width:70ch}

.pagina-curso .tarjeta{
  position:relative; overflow:hidden;
  opacity:0; transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.pagina-curso .tarjeta.revelada{opacity:1; transform:none}
.pagina-curso .tarjeta::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.55), transparent 45%);
  transition:opacity .35s ease;
}
.pagina-curso .tarjeta:hover::after{opacity:1}
@media (max-width:640px){
  .flyer-hero-imagen{max-height:340px}
}
@media (prefers-reduced-motion:reduce){
  .pagina-curso .tarjeta{opacity:1; transform:none; transition:none}
}