/* =====================================================================
   AULA VIRTUAL · Intranet · Sesión y carga (oct 2026)

   La hoja de tres piezas que van juntas en toda pantalla de admin/:
     1 · El indicador de carga (includes/admin_loader.php): barra de 3px
         arriba y velo con la píldora de anillos y el sello de la escuela.
     2 · El temporizador del cierre por inactividad, opción «T3 · anillo en
         la inicial» del lienzo: un anillo que se va cerrando alrededor de
         la inicial (menú lateral y barra de arriba del teléfono) y «Cierre
         en 27:41» bajo quién ingresó. El JavaScript (js/admin_sesion.js)
         mueve dos variables en <html>: --ad-ses-p (0–100, lo que queda) y
         data-ad-ses-niv="w" en los dos últimos minutos (ámbar).
     3 · La ventana «¿Sigues ahí?», opción «A1 · ventana que bloquea».
   La enlaza includes/admin_loader.php, en el <head>.
   ===================================================================== */

/* ── 1 · Indicador de carga ────────────────────────────────────────────
   El velo nace invisible y sube a los 60 ms, como en Ekklesia (antes 180:
   en local no se alcanzaba a ver nunca); si se vio, el script lo deja medio
   segundo. Mientras tanto ya ataja el doble clic. .ad-ld-ya = ya puesto,
   sin esperar: la página que llega desde un clic de la intranet. Va ANTES
   de .ad-ld-out para que la salida le gane. Por encima de todo (el cajón
   del menú es 60). */
#ad-ld-ov{ position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center;
  background:rgba(7,17,41,.28); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; animation:ad-ld-in .16s ease 60ms forwards; }
#ad-ld-ov.ad-ld-ya{ animation:none; opacity:1; }
#ad-ld-ov.ad-ld-out{ animation:none; opacity:0; pointer-events:none; transition:opacity .14s ease; }
#ad-ld-ov.ad-ld-off{ display:none; }
@keyframes ad-ld-in{ to{ opacity:1; } }
@keyframes ad-ld-giro{ to{ transform:rotate(360deg); } }

/* La píldora es el medianoche del menú, no una tarjeta. */
#ad-ld-pill{ display:flex; align-items:center; gap:14px; padding:15px 26px; border-radius:14px;
  background:#071129; white-space:nowrap;
  box-shadow:0 12px 34px -10px rgba(7,17,41,.55), 0 0 0 1px rgba(255,255,255,.10); }
.ad-ld-aro{ position:relative; flex:none; width:38px; height:38px; }
.ad-ld-aro i{ position:absolute; border-radius:50%; }
.ad-ld-aro .r0{ inset:0; border:3px solid rgba(255,255,255,.22); }
.ad-ld-aro .r1{ inset:0; border:3px solid transparent; border-top-color:#7fa6ff; animation:ad-ld-giro .9s linear infinite; }
/* El contra-anillo, tenue: el sello del centro ya es blanco (Ekklesia). */
.ad-ld-aro .r2{ inset:7px; border:2px solid transparent; border-bottom-color:rgba(255,255,255,.32);
  animation:ad-ld-giro 1.4s linear infinite reverse; }
.ad-ld-aro img{ position:absolute; top:50%; left:50%; z-index:2; width:16px; height:16px; transform:translate(-50%,-50%); }
.ad-ld-tx{ display:flex; flex-direction:column; gap:3px; line-height:1.15; font-family:'Roboto',system-ui,sans-serif; }
.ad-ld-tx b{ color:#fff; font-size:13px; font-weight:600; letter-spacing:.01em; }
.ad-ld-tx small{ color:rgba(255,255,255,.55); font-size:9px; letter-spacing:.14em; text-transform:uppercase; }

/* La barra, por encima del velo: es lo último que sigue diciendo algo. */
#ad-ld-bar{ position:fixed; top:0; left:0; z-index:9001; width:0; height:3px; border-radius:0 3px 3px 0;
  background:linear-gradient(90deg, #0e2a63, #7fa6ff); box-shadow:0 0 8px rgba(127,166,255,.55);
  pointer-events:none; opacity:0; transition:width .35s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
#ad-ld-bar.ad-ld-run{ opacity:1; }
#ad-ld-bar.ad-ld-end{ width:100% !important; opacity:0; transition:width .15s ease, opacity .45s ease .1s; }

/* Sin movimiento: fuera el desenfoque, el fundido y el goteo. Los anillos
   SIGUEN girando: ahí el giro no es adorno, es el indicador. */
@media (prefers-reduced-motion: reduce){
  #ad-ld-ov{ -webkit-backdrop-filter:none; backdrop-filter:none; animation-duration:.01ms; }
  #ad-ld-ov.ad-ld-out, #ad-ld-bar{ transition:none; }
}
@media print{ #ad-ld-ov, #ad-ld-bar{ display:none !important; } }

/* ── 2 · Temporizador: el anillo en la inicial ─────────────────────────
   Sólo donde hay temporizador (la pantalla corrió la regla): el ingreso no
   lo tiene. El anillo es un conic-gradient recortado a un aro de 3px con
   una máscara; arranca arriba y se va cerrando. */
.ad-app:has(#ad-reloj) .ad-ses .ad-ava,
.ad-app:has(#ad-reloj) .ad-top .ad-ava{ position:relative; }
.ad-app:has(#ad-reloj) .ad-ses .ad-ava::before,
.ad-app:has(#ad-reloj) .ad-top .ad-ava::before,
.ad-reloj-anillo{ content:""; position:absolute; inset:-5px; border-radius:50%; pointer-events:none;
  background:conic-gradient(var(--ad-ses-c, #7fa6ff) calc(var(--ad-ses-p, 100) * 1%), rgba(255,255,255,.16) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
html[data-ad-ses-niv="w"]{ --ad-ses-c:#f0a838; }

/* «Cierre en 27:41», bajo el nombre: el avatar (38px) + el espacio (10px). */
.ad-reloj{ display:flex; align-items:center; gap:6px; margin:-5px 0 0 48px; color:#9dbbff;
  font-size:.75rem; line-height:1.3; }
.ad-reloj svg{ flex:none; }
.ad-reloj b{ color:#fff; font-weight:600; font-variant-numeric:tabular-nums; }
html[data-ad-ses-niv="w"] .ad-reloj b,
html[data-ad-ses-niv="w"] .ad-reloj-suelta b{ color:#ffcf70; }

/* En las pantallas de enlace directo (sin menú ni inicial) el anillo va
   solo, junto a «Cerrar Sesión» (lo monta js/admin_sesion.js). */
.ad-reloj-suelta{ display:inline-flex; align-items:center; gap:10px; margin-left:auto; color:rgba(255,255,255,.75);
  font-size:.8125rem; white-space:nowrap; }
.ad-reloj-suelta .ad-reloj-anillo{ position:relative; inset:auto; flex:none; width:18px; height:18px; }
.ad-reloj-suelta b{ color:#fff; font-weight:600; font-variant-numeric:tabular-nums; }
.ad-reloj-suelta + .ad-suelta-salir{ margin-left:12px; }
/* En el teléfono, el anillo y los números; «Cierre en» queda para el
   lector de pantalla (la franja ya trae logo, título y «Cerrar Sesión»). */
@media (max-width: 600px){
  .ad-reloj-suelta .ad-reloj-rot{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/* ── 3 · «¿Sigues ahí?» ───────────────────────────────────────────────
   Un <dialog> modal: el navegador bloquea lo de atrás y encierra el foco.
   Bloquear es el punto: quien vuelve al escritorio tiene que verlo primero
   (el mismo criterio del velo de Ekklesia). */
.ad-ses-dlg{ width:min(430px, calc(100% - 32px)); max-width:none; padding:28px 30px 26px; border:0; border-radius:16px;
  background:#fff; color:var(--ink, #14161b); text-align:center; font-family:var(--sans, 'Roboto', sans-serif);
  box-shadow:0 30px 60px -20px rgba(7,17,41,.6); }
.ad-ses-dlg::backdrop{ background:rgba(7,17,41,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.ad-ses-ic{ display:inline-grid; place-items:center; width:56px; height:56px; margin-bottom:12px; border-radius:50%;
  background:#071129; color:#7fa6ff; }
.ad-ses-dlg h2{ margin:0; color:#0e2a63; font-size:1.375rem; font-weight:700; letter-spacing:-.01em; }
.ad-ses-dlg p{ margin:8px 0 0; color:#3d424d; font-size:.9rem; line-height:1.55; }
.ad-ses-cuenta{ display:block; margin:12px 0 10px; color:#0e2a63; font-size:2.875rem; font-weight:600; line-height:1.1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ad-ses-barra{ display:block; height:5px; border-radius:5px; background:#e9ecf2; overflow:hidden; }
.ad-ses-barra i{ display:block; height:100%; width:100%; border-radius:5px; background:#d98a14; transition:width 1s linear; }
.ad-ses-datos{ margin-top:16px !important; padding:10px 12px; border-radius:10px; background:#fff6e8; border:1px solid #f0c98a;
  color:#7a4300 !important; font-size:.8125rem !important; text-align:left; }
.ad-ses-datos[hidden]{ display:none; }
.ad-ses-acc{ display:flex; gap:10px; margin-top:20px; }
.ad-ses-b{ flex:1; display:flex; align-items:center; justify-content:center; min-height:46px; padding:0 14px; border-radius:10px;
  font:600 .9rem var(--sans, 'Roboto', sans-serif); text-decoration:none; cursor:pointer; }
.ad-ses-b.pri{ border:0; background:#0e2a63; color:#fff; box-shadow:0 6px 16px -6px rgba(14,42,99,.45); }
.ad-ses-b.pri:hover{ background:#173a80; }
.ad-ses-b.sec{ border:1px solid #c6cee0; background:#fff; color:#0e2a63; }
.ad-ses-b.sec:hover{ background:#f1f4fa; color:#0e2a63; text-decoration:none; }
.ad-ses-b:focus-visible{ outline:3px solid #7fa6ff; outline-offset:2px; }
/* En el teléfono, uno sobre otro y «Seguir conectado» arriba. */
@media (max-width: 600px){
  .ad-ses-dlg{ padding:24px 20px 20px; }
  .ad-ses-acc{ flex-direction:column-reverse; }
  .ad-ses-b{ min-height:48px; font-size:.95rem; }
}
@media (prefers-reduced-motion: reduce){
  .ad-ses-dlg::backdrop{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .ad-ses-barra i{ transition:none; }
}

/* ── 4 · El aula del alumno (6-oct-2026) ────────────────────────────────
   Dentro de un curso el temporizador va DENTRO de «Cerrar Sesión» en la
   franja fija de abajo (opción «B2 · agrupar» del lienzo, sección 5; antes
   fue una pastilla aparte, «V2»): «| EN 29:59» a la derecha del botón y una
   línea fina abajo que se vacía. En el teléfono (≤960px, cuatro íconos)
   eso se esconde y la hora va como etiqueta sobre el ícono de «Cerrar
   Sesión» (::after desde data-ad-ses-t, que mueve js/admin_sesion.js). En
   «Cursos inscritos», que no tiene franja, el anillo con «Cierre en» arriba
   a la derecha de la banda. Ámbar en los dos últimos minutos. */
@media (min-width: 960.02px){
  .av-barra-salir{ position:relative; overflow:hidden; }
  .av-salir-t{ display:inline-flex; flex-direction:column; justify-content:center; align-self:stretch;
    margin:0 -16px 0 4px; padding:0 12px; border-left:1px solid rgba(127,166,255,.3); line-height:1.05; }
  .av-salir-t small{ font-size:.5625rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
  .av-salir-t b{ color:#fff; font-size:.84rem; font-weight:600; font-variant-numeric:tabular-nums; }
  .av-salir-linea{ position:absolute; left:0; bottom:0; height:2px; width:calc(var(--ad-ses-p, 100) * 1%);
    background:var(--ad-ses-c, #7fa6ff); pointer-events:none; }
}
html[data-ad-ses-niv="w"] .av-salir-t b,
html[data-ad-ses-niv="w"] .ad-reloj-banda b{ color:#ffcf70; }
@media (max-width: 960px){
  .av-salir-t, .av-salir-linea{ display:none; }
  [data-ad-ses-insignia]{ position:relative; }
  [data-ad-ses-insignia][data-ad-ses-t]::after{ content:attr(data-ad-ses-t); position:absolute; top:4px; left:calc(50% + 4px);
    padding:1px 6px; border-radius:999px; background:var(--ad-ses-c, #7fa6ff); color:#071129;
    font-size:.65rem; font-weight:700; line-height:1.35; font-variant-numeric:tabular-nums; pointer-events:none; }
}
.ad-reloj-banda{ position:absolute; z-index:2; top:clamp(14px, 3vw, 28px); right:clamp(14px, 3vw, 44px);
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:999px;
  background:rgba(7,17,41,.55); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.8);
  font-size:.8125rem; white-space:nowrap; }
.ad-reloj-banda .ad-reloj-anillo{ position:relative; inset:auto; flex:none; width:16px; height:16px; }
.ad-reloj-banda b{ color:#fff; font-weight:600; font-variant-numeric:tabular-nums; }