/* ==========================================================================
   Portal CHK Play — sistema visual.

   Misma familia que las nueve aulas: azul noche, Sora y Manrope, y el oro
   reservado para CHK y el aval del MDT. Las fuentes se toman de /aula, que
   ya las sirve para los nueve cursos: así el participante que viene de un
   aula las tiene en caché y el portal aparece sin parpadeo.
   ========================================================================== */

@font-face{font-family:'Sora';font-style:normal;font-weight:300 800;font-display:swap;
  src:url("/aula/fuentes/sora-latin.woff2") format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;
  src:url("/aula/fuentes/manrope-latin.woff2") format('woff2');}

:root{
  --fondo:#07071A; --sup-1:#0B0C22; --sup-2:#0D0D24; --sup-3:#14142E;
  --tinta:#EDEDF5; --oro:#FEC830; --exito:#8CC9A6; --alerta:#E2703A;
  --borde:rgba(237,237,245,.10); --tenue:rgba(237,237,245,.62);
  --titular:'Sora',system-ui,sans-serif; --texto:'Manrope',system-ui,sans-serif;
}

*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
     font:16px/1.6 var(--texto);-webkit-font-smoothing:antialiased}
body.centrado{min-height:100vh;min-height:100svh;display:flex;align-items:center;
              justify-content:center;padding:24px}
a{color:var(--oro)}
h1{font-family:var(--titular);font-size:26px;letter-spacing:-.025em;margin:0 0 6px}
h2{font-family:var(--titular);font-size:19px;letter-spacing:-.02em;margin:0 0 14px}
p{margin:0 0 18px;color:var(--tenue);font-size:15px}

.caja{width:min(460px,100%);background:var(--sup-2);border:1px solid var(--borde);
      border-radius:18px;padding:34px}
label{display:block;font-size:13px;font-weight:700;margin:0 0 14px}
input{display:block;width:100%;margin-top:7px;background:var(--sup-3);
      border:1px solid rgba(237,237,245,.14);border-radius:10px;padding:12px 14px;
      color:var(--tinta);font:15px var(--texto)}
input:focus{outline:none;border-color:var(--oro)}
button,.boton{display:inline-block;width:100%;text-align:center;margin-top:8px;
  background:var(--oro);color:var(--fondo);border:0;border-radius:10px;padding:14px;
  font:800 15px var(--texto);cursor:pointer;text-decoration:none}
button:hover,.boton:hover{background:#FFD95C}
.mal{background:rgba(226,112,58,.12);border:1px solid rgba(226,112,58,.45);
     color:#F0B48C;border-radius:10px;padding:12px 14px;margin-bottom:18px;font-size:14px}
.ok{color:var(--exito)}
ul{margin:0;padding-left:20px}li{margin:6px 0;font-size:14.5px}

/* ── El tablero ─────────────────────────────────────────────────────────── */
.barra{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;
       height:62px;padding:0 26px;background:rgba(7,7,26,.86);
       backdrop-filter:blur(12px);border-bottom:1px solid var(--borde)}
.barra img{height:24px}
.barra .yo{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:14px}
.barra a.salir{color:var(--tenue);text-decoration:none;font-size:13.5px}
.barra a.salir:hover{color:var(--oro)}
.tricolor{display:flex;height:3px}
.tricolor span{flex:1}

main{max-width:1100px;margin:0 auto;padding:38px 26px 80px}
.saludo{font-family:var(--titular);font-size:32px;letter-spacing:-.03em;margin:0 0 4px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.curso{background:var(--sup-1);border:1px solid var(--borde);border-top:3px solid var(--c);
       border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px}
.curso h3{font-family:var(--titular);font-size:17px;margin:0;letter-spacing:-.01em;line-height:1.3}
.curso .meta{font-size:12.5px;color:var(--tenue)}
.riel{height:6px;border-radius:3px;background:rgba(237,237,245,.10);overflow:hidden}
.riel i{display:block;height:100%;background:var(--c);border-radius:3px}
.curso .pie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.curso a.ir{display:inline-block;background:var(--c);color:var(--sobre,#07071A);
  border-radius:9px;padding:9px 14px;font-size:13.5px;font-weight:800;text-decoration:none}
.vacio{background:var(--sup-1);border:1px dashed var(--borde);border-radius:14px;
       padding:40px;text-align:center;color:var(--tenue)}

/* ── Ficha flotante del curso ─────────────────────────────────────────────
   Se abre al pulsar un curso del catálogo en el que no estás matriculado.
   Es un <dialog> nativo: trae el fondo, el foco atrapado y el cierre con
   Escape sin una línea de JavaScript. */
#fichaCurso{
  border:0;padding:0;background:transparent;
  width:min(560px,calc(100% - 32px));max-height:90vh;
}
#fichaCurso::backdrop{background:rgba(3,3,14,.76);backdrop-filter:blur(8px)}
.ficha-curso{
  position:relative;background:var(--sup-2);border:1px solid rgba(237,237,245,.14);
  border-radius:20px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.7);
}
.ficha-curso .cerrar{
  position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;
  border:1px solid rgba(237,237,245,.28);background:rgba(7,7,26,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--tinta);font-size:18px;line-height:1;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.ficha-curso .cerrar:hover{border-color:var(--oro);color:var(--oro)}
.ficha-foto{position:relative;height:190px;background:var(--sup-3)}
.ficha-foto img{width:100%;height:100%;object-fit:cover;display:block}
.ficha-foto::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,13,36,.15) 0%,rgba(13,13,36,.85) 78%,var(--sup-2) 100%);
}
.ficha-cuerpo{padding:4px 28px 28px;margin-top:-34px;position:relative;z-index:1}
.ficha-area{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--oro);margin-bottom:10px;
}
.ficha-curso h2{font-size:23px;line-height:1.25;margin:0 0 10px}
.ficha-curso p{font-size:14.5px;color:var(--tenue);margin:0 0 18px}
.ficha-datos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.ficha-datos span{
  border:1px solid var(--borde);border-radius:99px;padding:5px 12px;
  font-size:12px;color:var(--tenue);
}
.ficha-boton{
  display:block;text-align:center;background:var(--oro);color:var(--fondo);
  border-radius:11px;padding:14px;font-weight:800;font-size:15px;text-decoration:none;
}
.ficha-boton:hover{background:#FFD95C}
/* El folleto acompaña a «Registrarme», no compite con él: mismo tamaño,
   sin relleno. Quien ya decidió pulsa el oro; quien mira, lee primero. */
.ficha-boton.secundario{
  background:transparent;color:var(--oro);border:1px solid rgba(255,201,71,.42);
  margin-top:10px;font-weight:700;
}
.ficha-boton.secundario:hover{background:rgba(255,201,71,.10);border-color:var(--oro)}
.ficha-pie{font-size:12.5px;color:var(--tenue-2);margin:14px 0 0 !important;text-align:center}
@media (max-width:520px){ .ficha-foto{height:150px} .ficha-cuerpo{padding:4px 20px 22px} }