/* HUMANIDAD — Carga serena v1: siluetas quietas mientras llegan los datos (ver carga-serena-v1.js). */
:root{--hcs-fill:rgba(145,166,195,.13);--hcs-fill-2:rgba(145,166,195,.2);--hcs-gold:rgba(217,179,106,.32);--hcs-bg:var(--htv-bg,#0a1730)}
@keyframes hcs-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes hcs-in{from{opacity:0}to{opacity:1}}
.hcs-skel{pointer-events:none;animation:hcs-breathe 1.6s ease-in-out infinite;transition:opacity .26s ease}
.hcs-skel.hcs-out{animation:none;opacity:0!important}
.hcs-bar,.hcs-btn,.hcs-dot,.hcs-pill,.hcs-logo{display:block;background:var(--hcs-fill);border-radius:999px}
.hcs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.hcs-skel{animation:none;opacity:.8}}

/* ---------- Mi árbol: encabezado ---------- */
/* Mientras carga, el encabezado ya tiene el alto final (108 px) y la forma del diseño v5:
   no aparece el selector vacío ni «MI ÁRBOL FAMILIAR», y nada salta cuando llega el nombre. */
html body #accountModal #familyView#familyView .account-view[data-view="tree"].hcs-loading:not(#hcs) #familyTreeHeader#familyTreeHeader{position:relative!important;height:108px!important;min-height:108px!important;max-height:108px!important;overflow:hidden!important;box-sizing:border-box!important}
html body #accountModal #familyView#familyView .account-view[data-view="tree"].hcs-loading:not(#hcs) #familyTreeHeader#familyTreeHeader>:not(.hcs-skel-head){visibility:hidden!important}
.hcs-skel-head{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 16px;box-sizing:border-box;z-index:2}
.hcs-skel-head .hcs-col{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.hcs-skel-head .hcs-kicker{width:84px;height:9px;background:var(--hcs-gold)}
.hcs-skel-head .hcs-title{width:62%;max-width:190px;height:20px;border-radius:8px;background:var(--hcs-fill-2)}
.hcs-skel-head .hcs-meta{width:74px;height:10px}
.hcs-skel-head .hcs-actions{display:flex;gap:10px;flex:none}
.hcs-skel-head .hcs-btn{height:44px;border-radius:10px}
.hcs-skel-head .hcs-btn-sq{width:44px;box-shadow:inset 0 0 0 1px rgba(145,166,195,.22);background:transparent}
.hcs-skel-head .hcs-btn-gold{width:88px;background:var(--hcs-gold)}
html body #accountModal #familyView#familyView .account-view[data-view="tree"]:is(.hcs-loading,.hcs-reveal):not(#hcs) #familyTreeHeader#familyTreeHeader>.hcs-skel-head{visibility:visible!important}

/* ---------- Mi árbol: lienzo ---------- */
/* La silueta cubre desde las pestañas hasta la barra inferior con el mismo azul del árbol.
   Debajo, el árbol real se arma y se encuadra sin que se vea a medias. */
.hcs-skel-tree{position:fixed;left:0;right:0;bottom:var(--hxn-bar-reserve,74px);top:220px;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,26px);background:var(--hcs-bg);animation:none}
@media(min-width:681px){.hcs-skel-tree{bottom:16px;left:auto;right:auto;width:min(100%,960px)}}
.hcs-skel-tree .hcs-constellation{width:min(70vw,280px);height:auto;max-height:58%;overflow:visible}
/* Líneas: cada una se dibuja después de la anterior (--i) y todas se apagan juntas al final del ciclo. */
.hcs-skel-tree .hcs-links line{stroke:rgba(217,179,106,.5);stroke-width:1.1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:hcs-link 6s ease-in-out infinite;animation-delay:calc(var(--i) * .28s)}
@keyframes hcs-link{0%{stroke-dashoffset:1;opacity:1}12%{stroke-dashoffset:0}70%{stroke-dashoffset:0;opacity:1}85%,100%{stroke-dashoffset:0;opacity:0}}
/* Estrellas: titilan a destiempo; la del centro (tu lugar) brilla más. */
.hcs-skel-tree .hcs-star{fill:#e9cf94;transform-box:fill-box;transform-origin:center;animation:hcs-twinkle 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.37s)}
.hcs-skel-tree .hcs-star.hcs-you{fill:#f6dea6;animation-duration:3s}
.hcs-skel-tree .hcs-glow{transform-box:fill-box;transform-origin:center;animation:hcs-glow 3s ease-in-out infinite}
@keyframes hcs-twinkle{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes hcs-glow{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
/* Mensaje: quieto y legible. */
.hcs-skel-tree .hcs-wait{display:flex;flex-direction:column;align-items:center;padding:0 24px;text-align:center}
.hcs-skel-tree .hcs-msg{display:grid;margin:0;max-width:300px;font:500 15px/1.4 Inter,system-ui,-apple-system,sans-serif;color:rgba(232,226,212,.86);letter-spacing:.01em}
.hcs-skel-tree .hcs-msg>span{grid-area:1/1;align-self:center}
.hcs-skel-tree .hcs-msg>span{transition:opacity .5s ease}
.hcs-skel-tree .hcs-msg-b{opacity:0}
.hcs-skel-tree.hcs-slow .hcs-msg-a{opacity:0}
.hcs-skel-tree.hcs-slow .hcs-msg-b{opacity:1}
@media(prefers-reduced-motion:reduce){.hcs-skel-tree .hcs-links line{animation:none;stroke-dashoffset:0}.hcs-skel-tree .hcs-star,.hcs-skel-tree .hcs-glow{animation:none;opacity:.9}}
html body #accountModal #familyView#familyView .account-view[data-view="tree"].hcs-loading:not(#hcs) #familyMemberList#familyMemberList>*{visibility:hidden!important}
html body #accountModal #familyView#familyView .account-view[data-view="tree"].hcs-loading:not(#hcs) #familyMemberList#familyMemberList{background:var(--hcs-bg)!important}
html body #accountModal #familyView#familyView .account-view[data-view="tree"].hcs-reveal:not(#hcs) #familyMemberList#familyMemberList>.humanidad-f3-shell{animation:hcs-in .26s ease both}

/* ---------- Inicio ---------- */
/* Ya no se ve un hueco negro ni la portada anterior: la silueta tiene la forma del Inicio familiar
   (saludo, círculos de la familia, botones, historias) hasta que la familia está lista. */
html body #accountModal #familyView#familyView .account-view[data-view="home"].hcs-loading:not(#hcs) .iv1-ordered-home{position:relative!important;visibility:hidden!important}
html body #accountModal #familyView#familyView .account-view[data-view="home"] .iv1-ordered-home>.hcs-skel-home{visibility:visible!important;display:flex!important}
.hcs-skel-home{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;flex-direction:column;gap:14px;padding:22px 18px 0;box-sizing:border-box;animation:none}
.hcs-skel-home .hcs-home-status{margin:0;color:#eeeae2;font:500 15px/1.45 Inter,system-ui,-apple-system,sans-serif}
.hcs-home-shapes{display:flex;flex-direction:column;gap:14px;animation:hcs-breathe 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.hcs-home-shapes{animation:none;opacity:.8}}
.hcs-skel-home .hcs-brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.hcs-skel-home .hcs-logo{width:28px;height:28px;border-radius:8px;background:var(--hcs-gold)}
.hcs-skel-home .hcs-brandname{width:150px;height:14px}
.hcs-skel-home .hcs-hello{width:72%;height:30px;border-radius:10px;background:var(--hcs-fill-2)}
.hcs-skel-home .hcs-tag{width:52%;height:12px;background:var(--hcs-gold)}
.hcs-skel-home .hcs-row-head{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.hcs-skel-home .hcs-h{width:44%;height:22px;border-radius:8px;background:var(--hcs-fill-2)}
.hcs-skel-home .hcs-link{width:72px;height:12px;background:var(--hcs-gold)}
.hcs-skel-home .hcs-people{display:flex;gap:22px;overflow:hidden}
.hcs-skel-home .hcs-person{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}
.hcs-skel-home .hcs-dot{width:60px;height:60px;background:#11243d;box-shadow:inset 0 0 0 2px var(--hcs-gold)}
.hcs-skel-home .hcs-name{width:54px;height:10px}
.hcs-skel-home .hcs-quote{width:80%;height:24px;margin:16px auto 0;border-radius:10px}
.hcs-skel-home .hcs-pills{display:flex;gap:12px}
.hcs-skel-home .hcs-pill{flex:1;height:46px;box-shadow:inset 0 0 0 1px var(--hcs-gold);background:transparent}
.hcs-skel-home .hcs-pill-gold{background:var(--hcs-gold);box-shadow:none}
.hcs-skel-home .hcs-line{width:92%;height:12px}
.hcs-skel-home .hcs-short{width:58%}
html body #accountModal #familyView#familyView .account-view[data-view="home"].hcs-reveal:not(#hcs) .iv1-ordered-home{animation:hcs-in .26s ease both}

/* ---------- Mi perfil ---------- */
/* Los textos provisorios («Mi perfil», «@usuario», «H», ceros) no se muestran como si fueran
   datos: se ven como barras quietas hasta que llega el perfil real. */
html body #accountModal #familyView#familyView .account-view[data-view="profile"].hcs-loading:not(#hcs) :is(#profileCardName,#profileCardHandle,#profileCardBio,.profile-v50-meta>*,.profile-v50-stats strong,.profile-v50-stats b){color:transparent!important;-webkit-text-fill-color:transparent!important;background:var(--hcs-fill)!important;border-color:transparent!important;border-radius:8px!important;text-shadow:none!important;animation:hcs-breathe 1.6s ease-in-out infinite}
html body #accountModal #familyView#familyView .account-view[data-view="profile"].hcs-loading:not(#hcs) .profile-v50-meta svg,
html body #accountModal #familyView#familyView .account-view[data-view="profile"].hcs-loading:not(#hcs) #profilePhotoPreview>*{visibility:hidden!important}
html body #accountModal #familyView#familyView .account-view[data-view="profile"].hcs-loading:not(#hcs) #profilePhotoPreview{animation:hcs-breathe 1.6s ease-in-out infinite}
html body #accountModal #familyView#familyView .account-view[data-view="profile"].hcs-reveal:not(#hcs) :is(.profile-v50-hero-content,.profile-v50-stats){animation:hcs-in .26s ease both}

/* Portada: mientras baja, un brillo suave en el lugar exacto; cuando está completa, aparece con fundido. */
@keyframes hcs-sheen{from{background-position:-160% 0}to{background-position:260% 0}}
html body #accountModal #familyView#familyView .account-view[data-view="profile"] .profile-v50-cover.is-cover-loading:not(.has-profile-cover){background:linear-gradient(100deg,#0d1d33 30%,#16304f 50%,#0d1d33 70%) 0 0/60% 100% no-repeat,#0d1d33!important;animation:hcs-sheen 1.4s ease-in-out infinite}
html body #accountModal #familyView#familyView .account-view[data-view="profile"] .profile-v50-cover.has-profile-cover{animation:hcs-in .32s ease both}
@media(prefers-reduced-motion:reduce){html body #accountModal #familyView#familyView .account-view[data-view="profile"] .profile-v50-cover{animation:none!important}}