/* Noctiluma · pantallita de carga (luna, constelación, valija y planetita)
 * FUENTE ÚNICA. Se edita SOLO en comun/ y se copia idéntico a panel/ y portal/ con: sh comun/sincronizar.sh
 * Lo usan: panel, portal y presupuesto. */
/* carga Noctiluma: A luna (panel) · D constelación (presupuesto) · E valija (portal) */
.ld{position:relative;flex:none}
.ld svg{overflow:visible}
.ld-a{width:110px;height:110px}
.ld-a .ld-halo{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle,rgba(212,174,252,.22),transparent 66%);animation:ld-resp 2.6s ease-in-out infinite}
.ld-a .ld-luna{position:absolute;inset:0;width:110px;height:110px;transform-origin:50% 55%;animation:ld-mece 3.2s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(108,91,181,.12))}
.ld-a .ld-e{position:absolute;animation:ld-tit 1.8s ease-in-out infinite}
@keyframes ld-resp{50%{transform:scale(1.18);opacity:.6}}
@keyframes ld-mece{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(6deg) translateY(-3px)}}
@keyframes ld-tit{0%,100%{transform:scale(.35);opacity:.35}45%{transform:scale(1) rotate(45deg);opacity:1}}
.ld-d line{stroke:var(--dorado);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60;animation:ld-traza 4.2s ease-in-out infinite}
.ld-d .p{fill:var(--tinta);transform-box:fill-box;transform-origin:center;animation:ld-prende 4.2s ease-in-out infinite}
.ld-d .ld-ch{transform-box:fill-box;transform-origin:center;animation:ld-tit 2.8s ease-in-out infinite}
@keyframes ld-traza{0%{stroke-dashoffset:60;opacity:1}40%,75%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes ld-prende{0%{opacity:.25;transform:scale(.6)}20%,75%{opacity:1;transform:scale(1)}95%,100%{opacity:.25;transform:scale(.6)}}
.ld-v{width:120px;height:120px}
.ld-v .ld-val{position:absolute;left:28px;top:18px;transform-origin:50% 100%;animation:ld-salta 1.3s cubic-bezier(.3,.6,.4,1) infinite}
.ld-v .ld-sombra{position:absolute;left:34px;bottom:10px;width:52px;height:8px;border-radius:50%;background:rgba(68,61,153,.16);animation:ld-somb 1.3s cubic-bezier(.3,.6,.4,1) infinite}
.ld-v .ld-tag{transform-box:fill-box;transform-origin:0 0;animation:ld-tagm 1.3s ease-in-out infinite}
.ld-v .ld-s{position:absolute;opacity:0;animation:ld-pop 1.3s ease-out infinite}
@keyframes ld-salta{0%,100%{transform:translateY(0) scale(1.04,.96)}15%{transform:none}50%{transform:translateY(-16px) rotate(-3deg)}85%{transform:none}}
@keyframes ld-somb{50%{transform:scale(.7);opacity:.5}}
@keyframes ld-tagm{50%{transform:rotate(18deg)}}
@keyframes ld-pop{0%,40%{opacity:0;transform:translateY(6px) scale(.2)}60%{opacity:1;transform:translateY(-6px) scale(1) rotate(45deg)}100%{opacity:0;transform:translateY(-16px) scale(.4) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.ld *{animation-duration:8s!important}}
/* carga: planetita con anillo dorado, avioncito con estela y estrellas */
.carga-orb{width:124px!important;height:124px!important}
.carga-orb::before{display:none!important}
.carga-halo{position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle,rgba(212,174,252,.55),rgba(212,174,252,0) 70%);animation:c-halo 2.6s ease-in-out infinite}
.carga-orbita{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(162,138,198,.55);animation:c-gira 24s linear infinite reverse}
.carga-planeta{position:absolute;inset:36px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fbf4ff 0,var(--pop) 32%,#7c63ad 70%,var(--tinta) 100%);box-shadow:0 12px 26px rgba(68,61,153,.35),inset -6px -8px 14px rgba(29,24,86,.35);animation:c-flota 3.2s ease-in-out infinite}
.carga-anillo{position:absolute;left:-15px;right:-15px;top:50%;height:16px;margin-top:-8px;border-radius:50%;border:2.5px solid var(--dorado);border-top-color:transparent;transform:rotate(-16deg);filter:drop-shadow(0 0 4px rgba(213,174,138,.6))}
.carga-giro{position:absolute!important;inset:0!important;animation:c-gira 2.4s linear infinite!important}
.carga-giro svg{position:absolute;top:-11px!important;left:50%;width:22px!important;height:22px!important;margin-left:-11px!important;fill:var(--dorado)!important;filter:drop-shadow(0 0 6px rgba(213,174,138,.7)) drop-shadow(0 3px 4px rgba(29,24,86,.3))}
.carga-estela i{position:absolute;inset:0;transform:rotate(calc(var(--n) * -11deg))!important;animation:none!important}
.carga-estela i::after{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--pop);opacity:calc(.9 - var(--n) * .2);transform:scale(calc(1 - var(--n) * .17))}
.carga-orb .c-est{position:absolute;font-style:normal;color:var(--dorado);animation:titila 2.8s ease-in-out infinite}
@keyframes c-gira{to{transform:rotate(360deg)}}
@keyframes c-halo{0%,100%{transform:scale(.85);opacity:.7}50%{transform:scale(1.12);opacity:1}}
@keyframes c-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.carga p,.cargando p{background:linear-gradient(100deg,var(--tinta) 0%,#7c63ad 35%,var(--dorado) 50%,#7c63ad 65%,var(--tinta) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:c-brillo 3s ease-in-out infinite}
.carga p span,.cargando p span{-webkit-text-fill-color:#7c63ad}
@keyframes c-brillo{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.carga-halo,.carga-orbita,.carga-planeta,.carga-giro,.carga p,.cargando p{animation:none!important}}
.cargando,.carga{min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;position:relative;z-index:1}
.carga-orb{position:relative;width:96px;height:96px}
.carga-orb::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px dashed var(--lila)}
.carga-centro{position:absolute;inset:24px;border-radius:50%;background:var(--lila);display:grid;place-items:center;color:var(--tinta);font-size:22px;box-shadow:0 10px 26px rgba(68,61,153,.18);animation:late-c 1.8s ease-in-out infinite}
.carga-giro{position:absolute;inset:0;animation:gira-c 2.6s linear infinite}
.carga-giro svg{position:absolute;top:-10px;left:50%;width:20px;height:20px;margin-left:-10px;fill:var(--tinta)}
.carga-orb i{position:absolute;font-style:normal;color:var(--dorado);animation:titila 2.8s ease-in-out infinite}
.cargando p,.carga p{margin:0;font-family:var(--f-titulo);font-style:italic;font-weight:700;font-size:24px;color:var(--tinta)}
.cargando p span,.carga p span{display:inline-block;animation:late-c 1.4s ease-in-out infinite}
.cargando p span:nth-child(2),.carga p span:nth-child(2){animation-delay:.2s}.cargando p span:nth-child(3),.carga p span:nth-child(3){animation-delay:.4s}
@keyframes gira-c{to{transform:rotate(360deg)}}
@keyframes late-c{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.88);opacity:.75}}
@media (prefers-reduced-motion:reduce){.carga-giro,.carga-centro,.cargando p span,.carga p span{animation:none}}