/* UltraPAES · Pantalla de carga antes del ensayo (app/carga-ensayo.js), animación 3 «Amanecer» del prototipo
   diseno/carga-ensayo/: una luz lima sube desde abajo (2,6 s) y la cita se destapa de arriba abajo (1,1 s).
   Colores solo por variables de la paleta B (app/ultra.css), en claro y en oscuro. Texto desde 13 px y el botón de 52 px. */
.carga-ensayo{position:fixed;inset:0;z-index:300;display:grid;grid-template-rows:1fr auto;padding:24px 24px calc(24px + env(safe-area-inset-bottom));overflow:hidden;background:var(--bg);color:var(--ink);font-family:"Archivo","Helvetica Neue",Arial,sans-serif}
/* Task 15, M-5: con la capa abierta, el atrás del celular pregunta «¿Salir del ensayo?» (app/rd-rutas.js); su velo (estilos.css, z-index 90) va encima
   de la capa mientras esté abierta y no debajo, donde no se veía */
body:has(>.carga-ensayo)>.velo{z-index:301}
.carga-luz{position:absolute;left:50%;bottom:-60vmax;width:120vmax;height:120vmax;border-radius:50%;transform:translateX(-50%) scale(.6);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 70%,transparent) 0%,transparent 62%);opacity:0;animation:carga-subir 2.6s ease-out forwards;z-index:0;pointer-events:none}
.carga-centro{position:relative;z-index:1;align-self:center;justify-self:center;width:min(100%,560px);display:grid;gap:20px}
.carga-prueba{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 12px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:13px;font-weight:700}
.carga-prueba i{width:8px;height:8px;border-radius:50%;background:var(--accent-line)}
.carga-ensayo .cita-robbins{margin:0}
.carga-ensayo .cita-robbins-texto{margin:0;font-size:28px;line-height:1.2;font-weight:800;letter-spacing:-.01em;clip-path:inset(0 0 100% 0);animation:carga-destapar 1.1s ease-out .4s forwards}
.carga-ensayo .cita-robbins-firma{margin-top:14px;color:var(--ink-2);font-size:15px;opacity:0;animation:carga-entrar .5s ease-out 1.4s forwards}
.carga-pie{position:relative;z-index:1;justify-self:center;width:min(100%,560px);display:grid;gap:10px}
.carga-empezar{min-height:52px;border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);font:inherit;font-size:17px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:opacity .2s ease-out,transform .1s ease-out}
.carga-empezar:active{transform:scale(.98)}
.carga-empezar[disabled]{opacity:.45;cursor:default}
.carga-empezar:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px}
.carga-estado{text-align:center;color:var(--ink-3);font-size:13px;min-height:18px}
@keyframes carga-subir{to{opacity:.8;transform:translateX(-50%) scale(1);bottom:-72vmax}}
@keyframes carga-destapar{to{clip-path:inset(0 0 0 0)}}
@keyframes carga-entrar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1024px){.carga-ensayo .cita-robbins-texto{font-size:34px}}
@media(prefers-reduced-motion:reduce){
 .carga-luz,.carga-ensayo .cita-robbins-texto,.carga-ensayo .cita-robbins-firma{animation:none!important}
 .carga-luz{opacity:.4;transform:translateX(-50%)}
 .carga-ensayo .cita-robbins-texto{clip-path:none}
 .carga-ensayo .cita-robbins-firma{opacity:1}
 .carga-empezar{transition:none}
 .carga-linea{display:none}
}
/* La misma cita, chica, en el ánimo del día y en los cierres de ronda y de ensayo */
.cita-robbins{margin:16px 0 0;padding:14px 16px;border-left:3px solid var(--accent-line);background:var(--surface-2);border-radius:0 12px 12px 0}
.cita-robbins-texto{margin:0;font-size:16px;line-height:1.4;font-weight:600;color:var(--ink)}
.cita-robbins-firma{margin-top:6px;font-size:13px;color:var(--ink-2)}
.cita-robbins-firma cite{font-style:italic}
.animo .cita-robbins.animo-cita{margin:6px 0 0;background:transparent;padding:0 0 0 12px}
.res-cita{max-width:640px}
/* En la pantalla de carga la cita va grande y sin el recuadro de la versión chica */
.carga-ensayo .cita-robbins.carga-cita-caja{padding:0;border:0;background:none;border-radius:0}

/* ---- Transición con video (spec de transiciones, 4.5): al empezar y al terminar cada ensayo o práctica ----
   El mismo diálogo (.carga-ensayo) con un video sin sonido a pantalla completa. Lleva .u-oscuro-fijo (los tokens oscuros de
   app/ultra.css): el texto claro sobre el video se lee igual en el tema claro y en el oscuro. Arriba, la píldora de vidrio; abajo, en el
   quinto inferior sobre un degradado oscuro, la frase con su firma y el pie: «Empezar» (ensayo con reloj) o la línea de avance de 6 s y
   «Toca para …». Texto desde 13 px y toques de 44 px o más (el botón, de 52). Todo el color sale de las variables del tema. */
.carga-video{grid-template-rows:auto 1fr auto;padding:max(16px,env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.carga-video:focus{outline:none}
.carga-fondo,.carga-sombra{position:absolute;inset:0;z-index:0;pointer-events:none}
.carga-media{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.carga-sombra{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 42%,transparent) 0%,transparent 24%,transparent 48%,color-mix(in srgb,var(--bg) 88%,transparent) 88%)}
.carga-video .carga-prueba{position:relative;z-index:1;grid-row:1;background:color-mix(in srgb,var(--bg) 55%,transparent);color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.carga-video .carga-prueba i{background:var(--accent)}
.carga-abajo{position:relative;z-index:1;grid-row:3;display:grid;gap:14px;min-width:0}
.carga-video .cita-robbins-texto{font-size:24px;line-height:1.18;text-shadow:0 2px 18px color-mix(in srgb,var(--bg) 55%,transparent);animation:carga-destapar-video .9s ease-out .25s forwards}
.carga-video .cita-robbins-firma{margin-top:10px;color:color-mix(in srgb,var(--ink) 82%,transparent);font-size:13px;animation-delay:1s}
.carga-video .carga-pie{justify-self:stretch;width:auto;gap:8px}
.carga-video .carga-estado{color:color-mix(in srgb,var(--ink) 78%,transparent);font-weight:700}
.carga-linea{height:3px;border-radius:9px;background:color-mix(in srgb,var(--ink) 22%,transparent);overflow:hidden}
.carga-linea i{display:block;width:0;height:100%;background:var(--accent);animation:carga-llenar var(--carga-dura,6s) linear forwards}
@keyframes carga-llenar{to{width:100%}}
/* como carga-destapar, pero al final el recorte se abre más allá de la caja: si no, corta la sombra del texto en un rectángulo */
@keyframes carga-destapar-video{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-28px)}}
/* Tableta y computador: la frase más grande, a la izquierda, y el pie bajo ella */
@media(min-width:700px) and (min-height:560px){
 .carga-video{padding:max(28px,env(safe-area-inset-top)) 48px calc(44px + env(safe-area-inset-bottom))}
 .carga-abajo{max-width:820px;gap:20px}
 .carga-video .cita-robbins-texto{font-size:36px}
 .carga-video .cita-robbins-firma{margin-top:12px;font-size:16px}
 .carga-video .carga-estado{text-align:left;font-size:14px}
 .carga-video .carga-prueba{min-height:36px;padding:6px 16px;font-size:14px}
 .carga-video .carga-empezar{justify-self:start;min-width:240px}
}
@media(min-width:1024px) and (min-height:700px){
 .carga-video{padding:40px 72px calc(56px + env(safe-area-inset-bottom))}
 .carga-abajo{max-width:900px}
 .carga-video .cita-robbins-texto{font-size:44px}
 .carga-video .cita-robbins-firma{font-size:18px}
}