:root { --carga-bg:#f4f5f7; --carga-panel:#ffffff; --carga-text:#202124; --carga-border:#c8cdd4; --carga-accent:#ac7e00; }
:root[data-gym-theme="dark"] { --carga-bg:#101113; --carga-panel:#202226; --carga-text:#f4f5f7; --carga-border:#555a63; --carga-accent:#f0c52e; }
html { background:var(--carga-bg); }
.sesion-pagina { min-height:100dvh; box-sizing:border-box; padding:16px; }
.sesion-espera { max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; }
.sesion-pagina { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--carga-bg); color:var(--carga-text); font-family:Arial,sans-serif; }
.sesion-espera { display:flex; align-items:center; gap:16px; padding:24px; }
.sesion-espera p { margin:0; font-size:15px; line-height:1.5; }
.sesion-spinner { width:24px; height:24px; flex:0 0 24px; border:3px solid var(--carga-border); border-top-color:var(--carga-accent); border-radius:50%; animation:sesion-giro .8s linear infinite; }
.sesion-transicion { position:fixed; inset:0; z-index:99999; display:grid; place-items:center; background:rgba(20,22,26,.32); cursor:progress; }
.sesion-transicion .sesion-espera { background:var(--carga-panel); color:var(--carga-text); border:1px solid var(--carga-border); border-radius:8px; box-shadow:0 8px 32px #0003; }
.sesion-pagina a { color:var(--carga-accent); }
.sesion-salida { padding:20px; box-sizing:border-box; background:rgba(12,14,17,.55); backdrop-filter:blur(4px); animation:sesion-salida-fondo .18s ease-out both; }
.sesion-salida .sesion-espera { width:360px; max-width:100%; padding:28px; font-family:Arial,sans-serif; animation:sesion-salida-panel .22s ease-out both; outline:none; }
.sesion-salida .sesion-salida-titulo { font-size:17px; font-weight:700; }
.sesion-salida .sesion-salida-detalle { margin-top:5px; font-size:14px; }
@keyframes sesion-salida-fondo { from { opacity:0; } to { opacity:1; } }
@keyframes sesion-salida-panel { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .sesion-salida,.sesion-salida .sesion-espera { animation:none; } }
@keyframes sesion-giro { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .sesion-spinner { animation:none; } }