/* ==========================================================================
   RD Inteligente — pantallas de acceso y aula del participante
   Complementa sitio.css (tokens, botones y tipografía se heredan de ahí).
   ========================================================================== */

/* ---------------------------------------------------------------- acceso -- */
.acceso{
  min-height:100svh; display:grid; place-items:center; padding:96px 20px 48px; position:relative;
  background:
    radial-gradient(ellipse 70% 60% at 75% 30%, rgba(30,107,255,.20), transparent 62%),
    radial-gradient(ellipse 90% 70% at 8% 0%, rgba(0,61,122,.5), transparent 60%),
    var(--noche);
}
.acceso-mapa{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; pointer-events:none }
.acceso-caja{
  position:relative; z-index:2; width:100%; max-width:520px;
  background:rgba(4,28,58,.78); backdrop-filter:blur(18px);
  border:1px solid rgba(237,242,247,.16); border-radius:24px;
  padding:clamp(28px,5vw,44px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.acceso-caja h1{ font-size:clamp(27px,4vw,36px); margin-bottom:10px }
.acceso-caja > p.intro{ color:var(--tiza-dim); font-size:15.5px; margin:0 0 28px }
.acceso-marca{ display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:26px; text-decoration:none; color:var(--tiza) }
.acceso-pasos{ display:flex; gap:8px; margin-bottom:26px }
.acceso-pasos i{ height:3px; flex:1; border-radius:2px; background:rgba(237,242,247,.18) }
.acceso-pasos i.on{ background:var(--azul) }
.acceso-pie{ margin-top:24px; text-align:center; font-size:14px; color:var(--tiza-dim) }
.acceso-pie a{ color:var(--azul-vivo); text-decoration:none; font-weight:500 }
.acceso-pie a:hover{ text-decoration:underline }

/* ----------------------------------------------------------- formularios -- */
.campo{ margin-bottom:20px }
.campo label{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tiza-dim); margin-bottom:9px;
}
.campo input[type=text], .campo input[type=email], .campo input[type=password], .campo select{
  width:100%; font-family:var(--body); font-size:17px; color:var(--tiza);
  background:rgba(0,20,44,.7); border:1px solid rgba(237,242,247,.2);
  border-radius:13px; padding:15px 16px; transition:border-color .2s ease, box-shadow .2s ease;
}
.campo input::placeholder{ color:rgba(147,174,198,.55) }
.campo input:focus, .campo select:focus{
  outline:0; border-color:var(--azul); box-shadow:0 0 0 3px rgba(30,107,255,.25);
}
.campo input.cedula{ font-family:var(--mono); font-size:19px; letter-spacing:.06em }
.campo .ayuda{ font-size:12.5px; color:var(--tiza-dim); margin:8px 0 0 }
.acepto{ display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--tiza-dim); margin:4px 0 24px; cursor:pointer }
.acepto input{ margin-top:3px; accent-color:var(--azul); width:17px; height:17px; flex:none }
.btn-bloque{ width:100%; justify-content:center }

.aviso{
  border-radius:13px; padding:14px 16px; font-size:14.5px; margin-bottom:22px;
  display:flex; gap:11px; align-items:flex-start; line-height:1.5;
}
.aviso svg{ width:18px; height:18px; flex:none; margin-top:2px }
.aviso-error{ background:rgba(224,31,38,.14); border:1px solid rgba(224,31,38,.45); color:#FFD9DA }
.aviso-ok{    background:rgba(0,184,132,.14); border:1px solid rgba(0,184,132,.45); color:#BFF3E3 }
.aviso-info{  background:rgba(77,169,232,.13); border:1px solid rgba(77,169,232,.4); color:#CDE6FA }

/* ---------------------------------------------------------------- aula --- */
.aula-nav{
  position:sticky; top:0; z-index:60; background:rgba(0,20,44,.9);
  backdrop-filter:blur(16px); border-bottom:1px solid rgba(237,242,247,.14);
}
.aula-nav-in{
  max-width:1180px; margin-inline:auto; padding:14px clamp(18px,4vw,28px);
  display:flex; align-items:center; gap:18px;
}
.aula-usuario{ margin-left:auto; display:flex; align-items:center; gap:14px; font-size:14px; color:var(--tiza-dim) }
.aula-usuario b{ color:var(--tiza); font-weight:600 }
.aula-avatar{
  width:38px; height:38px; border-radius:50%; background:linear-gradient(140deg,var(--azul),var(--noche-3));
  display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:15px; color:#fff; flex:none;
}
.aula-salir{ color:var(--tiza-dim); text-decoration:none; font-size:13px; border:1px solid var(--regla); border-radius:9px; padding:8px 13px; transition:.2s }
.aula-salir:hover{ color:var(--tiza); background:rgba(255,255,255,.07) }

.aula-main{ max-width:1180px; margin-inline:auto; padding:clamp(32px,6vw,60px) clamp(18px,4vw,28px) 80px }
.aula-hola{ margin-bottom:clamp(28px,5vw,44px) }
.aula-hola h1{ font-size:clamp(28px,4.4vw,44px) }
.aula-hola p{ color:var(--tiza-dim); margin:14px 0 0; max-width:60ch }

.resumen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:clamp(30px,5vw,44px) }
.resumen .r{ border:1px solid var(--regla); border-radius:15px; padding:18px 20px; background:rgba(255,255,255,.04) }
.resumen b{ font-family:var(--display); font-size:28px; display:block; letter-spacing:-.02em }
.resumen span{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--tiza-dim); display:block; margin-top:5px }

.cursos{ display:grid; gap:14px }
.curso{
  display:grid; grid-template-columns:56px 1fr auto; gap:20px; align-items:center;
  border:1px solid var(--regla); border-radius:17px; padding:20px 22px;
  background:rgba(255,255,255,.04); text-decoration:none; color:inherit;
  transition:transform .22s var(--curva), border-color .22s ease, background .22s ease;
}
.curso:hover{ transform:translateY(-3px); border-color:rgba(77,169,232,.55); background:rgba(255,255,255,.07) }
.curso.sin-contenido{ opacity:.55; pointer-events:none }
.curso-n{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center; flex:none;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  background:rgba(30,107,255,.16); border:1px solid rgba(77,169,232,.35); color:var(--azul-vivo);
}
.curso h3{ font-size:18.5px; font-weight:600; letter-spacing:-.015em }
.curso p{ margin:6px 0 0; font-size:14px; color:var(--tiza-dim); max-width:64ch }
.curso-lado{ text-align:right; display:grid; gap:9px; justify-items:end; min-width:150px }
.etiqueta{
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  padding:5px 10px; border-radius:99px; border:1px solid currentColor;
}
.et-no{ color:var(--tiza-dim) }
.et-curso{ color:var(--oro) }
.et-ok{ color:var(--verde) }
.barra{ width:150px; height:5px; border-radius:3px; background:rgba(237,242,247,.14); overflow:hidden }
.barra i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--azul),var(--azul-vivo)); transition:width .6s var(--curva) }
.curso-horas{ font-family:var(--mono); font-size:11px; color:var(--tiza-dim) }
@media (max-width:720px){
  .curso{ grid-template-columns:44px 1fr; gap:14px; padding:17px }
  .curso-n{ width:44px; height:44px; font-size:11px }
  .curso-lado{ grid-column:2; justify-items:start; text-align:left; min-width:0 }
}

.vacio{ border:1px dashed var(--regla); border-radius:17px; padding:44px 28px; text-align:center; color:var(--tiza-dim) }
.vacio b{ display:block; color:var(--tiza); font-family:var(--display); font-size:20px; margin-bottom:10px }

/* ------------------------------------------------------------- reproductor */
body.reproductor{ overflow:hidden; height:100svh }
.rep{ display:flex; flex-direction:column; height:100svh }
.rep-barra{
  display:flex; align-items:center; gap:16px; padding:11px clamp(14px,3vw,22px);
  background:#001730; border-bottom:1px solid rgba(237,242,247,.14); flex:none;
}
.rep-volver{ color:var(--tiza-dim); text-decoration:none; display:flex; align-items:center; gap:8px; font-size:13.5px; flex:none }
.rep-volver:hover{ color:var(--tiza) }
.rep-volver svg{ width:16px; height:16px; transform:rotate(180deg) }
.rep-tit{ font-family:var(--display); font-weight:600; font-size:15.5px; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rep-estado{ margin-left:auto; display:flex; align-items:center; gap:14px; flex:none }
.rep-estado .barra{ width:130px }
.rep-pct{ font-family:var(--mono); font-size:11.5px; color:var(--tiza-dim); min-width:38px; text-align:right }
.rep-guardado{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--verde); opacity:0; transition:opacity .3s ease }
.rep-guardado.on{ opacity:1 }
.rep-marco{ flex:1; border:0; width:100%; background:#fff; display:block }
@media (max-width:700px){ .rep-estado .barra{ display:none } .rep-tit{ font-size:14px } }