/* Carga rápida y guiada (forms-assist.js). Usa los colores del módulo. */
.vpfa-dock{--vpfa-accent:var(--module-accent,#1f6f8b);--vpfa-ok:#1f8a4c;--vpfa-pad:16px;box-sizing:border-box;position:sticky;bottom:0;z-index:69;display:flex;align-items:center;gap:14px;margin:18px 0 0;padding:10px calc(var(--vpfa-pad) + var(--vpfa-room,0px)) 10px var(--vpfa-pad);background:color-mix(in srgb,var(--panel,#f4f8fc) 92%,#fff);border:1px solid #c7d7e3;border-radius:14px;box-shadow:0 -8px 22px #0b2a4514;color:var(--module-ink,#173447)}
dialog.vp-entry-dialog>.vpfa-dock{--vpfa-pad:24px;width:calc(100% + 48px)!important;max-width:none!important;bottom:-24px;margin:22px -24px -24px;padding-top:12px;padding-bottom:14px;border-width:1px 0 0;border-radius:0 0 21px 21px}
.vpfa-dock[hidden]{display:none!important}
.vpfa-meter{position:relative;flex:none;width:46px;height:46px}
.vpfa-meter svg{width:46px;height:46px;rotate:-90deg}
.vpfa-meter circle{fill:none;stroke-width:4}
.vpfa-track{stroke:#d6e2ec}
.vpfa-fill{stroke:var(--vpfa-accent);stroke-linecap:round;stroke-dasharray:97.4;stroke-dashoffset:calc(97.4 * (1 - var(--vpfa-ratio,0)));transition:stroke-dashoffset .45s cubic-bezier(.2,.8,.2,1),stroke .3s ease}
.vpfa-count{position:absolute;inset:0;display:grid;place-items:center;font:700 11.5px/1 Arial,sans-serif;color:var(--module-ink,#173447)}
.vpfa-copy{display:grid;gap:2px;min-width:0;flex:1}
.vpfa-title{font-size:14.5px;line-height:1.25}
.vpfa-next{font-size:12.5px;line-height:1.35;color:#4d6476;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.vpfa-next b{color:var(--module-ink,#173447)}
.vpfa-dock [hidden]{display:none!important}
.vpfa-no-meter .vpfa-meter{display:none}
.vpfa-float{position:fixed;left:50%;bottom:14px;translate:-50% 0;width:min(860px,calc(100vw - 24px));margin:0;z-index:2147481000;box-shadow:0 14px 34px #0b2a4540;border-color:color-mix(in srgb,var(--module-accent,#1f6f8b) 40%,#c7d7e3);border-left:5px solid var(--module-accent,#1f6f8b)}
.vpfa-float.vpfa-float-top{bottom:auto;top:14px}
@media (prefers-reduced-motion:no-preference){.vpfa-float:not([hidden]):not(.vpfa-settled){animation:vpfa-rise .22s cubic-bezier(.2,.8,.2,1)}}
/* El botón de la barra cambia de texto y de color sin fundido: con transición parecía titilar al escribir. */
.vpfa-dock .vpfa-go{transition:none!important}
@keyframes vpfa-rise{from{opacity:0;translate:-50% 10px}to{opacity:1;translate:-50% 0}}
.vpfa-keys{flex:none;font-size:11.5px;color:#5d7383;white-space:nowrap}
.vpfa-keys kbd,.vpfa-date kbd{display:inline-block;min-width:18px;padding:1px 6px;border:1px solid #c4d3df;border-bottom-width:2px;border-radius:6px;background:#fff;color:#1d3b52;font:700 11px/1.45 Arial,sans-serif;text-align:center}
.vpfa-go{flex:none;min-width:150px}
.vpfa-dock.vpfa-ready .vpfa-fill{stroke:var(--vpfa-ok)}
.vpfa-dock.vpfa-ready .vpfa-count{color:var(--vpfa-ok)}
.vpfa-dock.vpfa-ready .vpfa-title{color:var(--vpfa-ok)}

/* Campo señalado / completado */
.vpfa-flash{border-radius:12px;animation:vpfa-flash 1.3s ease-out}
.vpfa-flash-ok{animation:vpfa-ok 1.3s ease-out}
@keyframes vpfa-flash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--module-accent,#1f6f8b) 55%,transparent)}35%{box-shadow:0 0 0 7px color-mix(in srgb,var(--module-accent,#1f6f8b) 22%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
@keyframes vpfa-ok{0%{box-shadow:0 0 0 0 #1f8a4c66}35%{box-shadow:0 0 0 6px #1f8a4c26}100%{box-shadow:0 0 0 0 transparent}}

/* Lista para guardar / guardado */
.vpfa-cheer .vpfa-meter{animation:vpfa-cheer .6s cubic-bezier(.3,1.6,.5,1)}
.vpfa-cheer .vpfa-go{animation:vpfa-nudge .7s ease-out}
@keyframes vpfa-cheer{0%{scale:.8}60%{scale:1.15}100%{scale:1}}
@keyframes vpfa-nudge{0%{box-shadow:0 0 0 0 #1f8a4c88}100%{box-shadow:0 0 0 12px transparent}}
.vpfa-saved{animation:vpfa-saved 1.4s ease-out}
@keyframes vpfa-saved{0%{background:#e3f6ea}100%{background:color-mix(in srgb,var(--panel,#f4f8fc) 92%,#fff)}}
.vpfa-burst{position:fixed;z-index:2147483000;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#1f8a4c;color:#fff;font:700 24px/1 Arial,sans-serif;pointer-events:none;box-shadow:0 0 0 0 #1f8a4c88;animation:vpfa-burst 1s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes vpfa-burst{0%{opacity:0;scale:.3}25%{opacity:1;scale:1.1}45%{scale:1;box-shadow:0 0 0 0 #1f8a4c88}80%{opacity:1;box-shadow:0 0 0 22px transparent}100%{opacity:0;scale:.9;translate:0 -14px}}

/* Fechas: Hoy / Ayer / Ahora */
.vpfa-date{position:fixed;z-index:2147482000;display:flex;align-items:center;gap:6px;padding:6px;border:1px solid #c7d7e3;border-radius:12px;background:#fff;box-shadow:0 10px 26px #0b2a4533;font:13px/1.2 Arial,sans-serif;color:#1d3b52}
.vpfa-date[hidden]{display:none!important}
.vpfa-date button{min-height:32px;padding:5px 12px;border:1px solid color-mix(in srgb,var(--module-accent,#1f6f8b) 45%,#c7d7e3);border-radius:9px;background:color-mix(in srgb,var(--module-accent,#1f6f8b) 9%,#fff);color:var(--module-ink,#173447);font:inherit;font-weight:700;cursor:pointer;transition:background-color .14s ease,translate .14s ease}
.vpfa-date button:hover{background:color-mix(in srgb,var(--module-accent,#1f6f8b) 18%,#fff);translate:0 -1px}
.vpfa-date small{padding:0 4px;color:#5d7383;font-size:11.5px;white-space:nowrap}
.vpfa-pop{animation:vpfa-pop .18s ease-out}
@keyframes vpfa-pop{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}

/* Apertura de las ventanas de carga */
@media (prefers-reduced-motion:no-preference){
 dialog.vp-entry-dialog[open]{animation:vpfa-open .26s cubic-bezier(.2,.8,.2,1)}
 dialog.vp-entry-dialog[open]::backdrop{animation:vpfa-fade .26s ease-out}
}
@keyframes vpfa-open{from{opacity:0;translate:0 14px;scale:.975}to{opacity:1;translate:0 0;scale:1}}
@keyframes vpfa-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.vpfa-flash,.vpfa-flash-ok,.vpfa-cheer .vpfa-meter,.vpfa-cheer .vpfa-go,.vpfa-saved,.vpfa-pop{animation:none}.vpfa-fill{transition:none}}

@media (max-width:760px){
 .vpfa-dock{--vpfa-pad:12px;gap:10px;flex-wrap:wrap}
 dialog.vp-entry-dialog>.vpfa-dock{--vpfa-pad:12px;width:calc(100% + 24px)!important;margin:18px -12px -18px;bottom:-18px;border-radius:0 0 13px 13px}
 .vpfa-keys{display:none}
 .vpfa-go{flex:1 1 100%;min-width:0}
}
@media print{.vpfa-dock,.vpfa-date,.vpfa-burst{display:none!important}}
/* Barras angostas: el texto de ayuda tiene prioridad sobre el recordatorio del atajo. */
.vpfa-dock{container-type:inline-size}
@container (max-width:680px){.vpfa-keys{display:none!important}.vpfa-go{min-width:0}}

/* Intento de guardar con faltantes: barra en rojo y sacudida breve */
.vpfa-dock.vpfa-alert{border-color:#e3a1ab;background:#fff4f5}
.vpfa-dock.vpfa-alert .vpfa-fill{stroke:#b92339}
.vpfa-dock.vpfa-alert .vpfa-count,.vpfa-dock.vpfa-alert .vpfa-title{color:#b92339}
.vpfa-dock.vpfa-alert .vpfa-next b{color:#94152a}
.vpfa-dock.vpfa-alert .vpfa-go{border-color:#b92339;color:#94152a}
@media (prefers-reduced-motion:no-preference){.vpfa-shake{animation:vpfa-shake .42s ease}}
@keyframes vpfa-shake{0%,100%{translate:0}20%{translate:-6px 0}40%{translate:5px 0}60%{translate:-3px 0}80%{translate:2px 0}}
.vpfa-float.vpfa-shake{animation:none}
/* Dentro de una ventana de carga, la barra flotante de ayuda queda pegada al pie de la ventana y nunca más
   ancha que ella (antes podía correr la ventana hacia un costado y, al volver al módulo, dejar la pantalla en blanco). */
dialog .vpfa-dock.vpfa-float{position:sticky;left:auto;right:auto;top:auto;bottom:12px;translate:none;width:auto;max-width:100%;margin:12px 0 0;box-sizing:border-box}
dialog .vpfa-dock.vpfa-float.vpfa-float-top{top:auto;bottom:12px}

/* Dentro de una ventana la barra queda fija al pie; el campo que se escribe no queda tapado por ella. */
dialog:has(> .vpfa-dock.vpfa-float:not([hidden])){scroll-padding-bottom:120px}
/* La barra de ayuda flotante dentro de una ventana de carga ocupa el ancho de la ventana, sin desbordarla
   (la regla de la barra propia de la ventana la estiraba 48 px de más). */
dialog.vp-entry-dialog>.vpfa-dock.vpfa-float{width:auto!important;max-width:100%!important;margin:12px 0 0}

/* Escritura sin titileo (steady-typing.js): mientras se escribe o se hace clic en campos y celdas, animaciones y
   transiciones terminan en el acto. */
html.vp-typing:not(#vpt1):not(#vpt2) body *:not(.study-theory *),html.vp-typing:not(#vpt1):not(#vpt2) body *:not(.study-theory *)::before,html.vp-typing:not(#vpt1):not(#vpt2) body *:not(.study-theory *)::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important;transition-delay:0s!important}
html:not(#vpt1):not(#vpt2) body [data-vp-still],html:not(#vpt1):not(#vpt2) body [data-vp-still]::before,html:not(#vpt1):not(#vpt2) body [data-vp-still]::after{animation-duration:0s!important;animation-delay:0s!important}

/* Ventana que vuelve después de una confirmación (entry-cards.js): sin animación de apertura ni fundido del fondo. */
dialog.vp-entry-dialog.vp-resume[open],dialog.vp-entry-dialog.vp-resume[open]::backdrop,
dialog.vp-entry-dialog.vp-opened[open],dialog.vp-entry-dialog.vp-opened[open]::backdrop{animation:none!important}