/* Direct mobile navigation · midnight blue / champagne gold. */
#humanidadMobileFixedBar,#humanidadMobileHeader{display:none!important}
@media(max-width:680px){
body.hxn-mobile-ready #humanidadMobileFixedBar{
 display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
 position:fixed!important;inset:auto 0 0!important;width:100%!important;max-width:none!important;
 box-sizing:border-box!important;margin:0!important;transform:none!important;gap:0!important;
 padding:7px 8px calc(8px + env(safe-area-inset-bottom))!important;
 height:auto!important;min-height:74px!important;border:0!important;border-top:1px solid #d8bc7930!important;
 border-radius:0!important;background:#091629!important;box-shadow:0 -8px 28px #050e1b30!important;
 z-index:10010!important;overflow:visible!important;
}
body.hxn-mobile-ready #humanidadMobileFixedBar::before,body.hxn-mobile-ready #humanidadMobileFixedBar::after{display:none!important}
body.hxn-mobile-ready #humanidadMobileFixedBar>.hxn-slot{display:flex!important;min-width:0!important;align-items:center!important;justify-content:center!important}
body.hxn-mobile-ready #humanidadMobileFixedBar .hxn-slot>button{
 display:flex!important;position:relative!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
 width:100%!important;min-width:0!important;max-width:none!important;min-height:56px!important;height:auto!important;
 margin:0!important;padding:5px 1px!important;gap:5px!important;border:0!important;border-radius:14px!important;
 background:transparent!important;box-shadow:none!important;transform:none!important;color:#a9b8cc!important;
 font:500 11px/1.2 system-ui,sans-serif!important;cursor:pointer; -webkit-tap-highlight-color:transparent;
}
body.hxn-mobile-ready #humanidadMobileFixedBar .hxn-slot>button.active{color:#e7c887!important;background:transparent!important}
body.hxn-mobile-ready #humanidadMobileFixedBar .hxn-icon{
 display:flex!important;align-items:center!important;justify-content:center!important;width:46px!important;height:30px!important;
 margin:0!important;border-radius:11px!important;background:transparent!important;
}
body.hxn-mobile-ready #humanidadMobileFixedBar button.active .hxn-icon{background:#d8bc7917!important}
body.hxn-mobile-ready #humanidadMobileFixedBar .hxn-label{display:block!important;white-space:nowrap!important;font:inherit!important;margin:0!important;color:inherit!important}
body.hxn-mobile-ready #humanidadMobileFixedBar svg,body.hxn-mobile-ready #humanidadMobileHeader svg{
 display:block!important;width:25px!important;height:25px!important;fill:none!important;stroke:currentColor!important;
 stroke-width:1.65!important;stroke-linecap:round!important;stroke-linejoin:round!important;
}
body.hxn-mobile-ready #humanidadMobileHeader{
 display:flex!important;position:sticky!important;top:0!important;align-items:center!important;justify-content:space-between!important;
 box-sizing:border-box!important;gap:12px!important;min-height:62px!important;padding:8px 16px!important;
 margin:0 0 12px!important;background:#0b192e!important;border-bottom:1px solid #d8bc7924!important;z-index:600!important;
}
body.hxn-mobile-ready #humanidadMobileHeader .hxn-brand{color:#efdfbd;font:500 clamp(17px,5vw,22px)/1.2 Georgia,serif;letter-spacing:.01em;min-width:0}
body.hxn-mobile-ready #humanidadMobileHeader .hxn-messages{
 display:flex!important;position:relative!important;align-items:center!important;justify-content:center!important;flex:0 0 44px!important;
 width:44px!important;height:44px!important;min-height:44px!important;padding:8px!important;margin:0!important;
 border:1px solid #8295b139!important;border-radius:14px!important;background:#14273e!important;color:#d7e0ea!important;cursor:pointer;
}
body.hxn-mobile-ready #humanidadMobileHeader .hxn-messages.active{border-color:#d8bc7970!important;color:#e7c887!important}
body.hxn-mobile-ready #humanidadMobileHeader .hxn-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
body.hxn-mobile-ready #humanidadMobileHeader .hxn-unread{
 position:absolute!important;top:-4px!important;right:-4px!important;min-width:17px!important;height:17px!important;box-sizing:content-box!important;
 padding:1px 3px!important;border:2px solid #0b192e!important;border-radius:12px!important;background:#e7c887!important;
 color:#0b192e!important;text-align:center!important;font:700 10px/17px system-ui!important;
}
body.hxn-mobile-ready #humanidadMobileHeader .hxn-unread[hidden]{display:none!important}
body.hxn-mobile-ready #humanidadMobileFixedBar button:focus-visible,body.hxn-mobile-ready #humanidadMobileHeader button:focus-visible{outline:2px solid #e7c887!important;outline-offset:2px!important}
html body.hxn-mobile-ready #accountModal.open:not(.auth-only) .social-sidebar,
html body.hxn-mobile-ready #hrcMobileNavMore,
html body.hxn-mobile-ready #humanidadExplorarNativePanel,
html body.hxn-mobile-ready #hrcMasSheet,
html body.hxn-mobile-ready #hrcMasSheetBackdrop,
html body.hxn-mobile-ready #familyView .iv1-topbar,
html body.hxn-mobile-ready #familyView .df-appbar{display:none!important}
body.hxn-mobile-ready:not(:has(#accountModal.open:not(.auth-only))) #humanidadMobileFixedBar,
body.hxn-mobile-ready:not(:has(#accountModal.open:not(.auth-only))) #humanidadMobileHeader{display:none!important}
html body.hxn-mobile-ready #familyView#familyView .hrc-account-content{padding-bottom:calc(136px + env(safe-area-inset-bottom))!important}
body.hxn-mobile-ready .social-main{padding-bottom:calc(100px + env(safe-area-inset-bottom))!important}
}
@media(prefers-reduced-motion:reduce){#humanidadMobileFixedBar *,#humanidadMobileHeader *{transition:none!important}}


/* Compact family card owns its mobile layout. */
html body.hxn-mobile-ready #humanidadMobileHeader{display:none!important}
html body.hxn-mobile-ready #familyTreeHeader .hxn-messages{display:none!important}
@media(max-width:680px){
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader{height:auto!important;min-height:0!important;max-height:none!important;flex:none!important;position:relative!important;box-sizing:border-box!important;padding:8px 10px!important;margin:0 0 6px!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader:has(.htc-tree-label)>div:first-child:not(.tree-head-actions){display:none!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-head-actions{display:grid!important;grid-template-columns:minmax(0,1fr) 84px!important;grid-template-rows:44px auto!important;gap:2px 8px!important;align-items:center!important;min-height:0!important;height:auto!important;max-height:none!important;width:100%!important;box-sizing:border-box!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-selector-wrap{grid-area:1/1!important;position:relative!important;min-width:0!important;width:100%!important;max-width:100%!important;height:44px!important;min-height:44px!important;align-self:center!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-selector-wrap .htc-tree-label{display:flex!important;align-items:center!important;width:100%!important;min-width:0!important;min-height:44px!important;height:44px!important;padding:0!important;gap:8px!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-selector-wrap .htc-tree-family{font:650 17px/1.25 system-ui!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-meta{grid-area:2/1!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;align-self:center!important;justify-items:start!important;gap:0!important;width:100%!important;min-height:0!important;margin:0!important;padding:0!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-meta>.htc-tree-detail{display:block!important;max-width:100%!important;margin:0!important;padding:0!important;font:400 11px/16px system-ui!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-pending[hidden]{display:none!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-pending{min-height:0!important;margin:0!important;padding:0!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-pending>details{margin:0!important;padding:0!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-pending>details>summary{box-sizing:border-box!important;height:24px!important;min-height:24px!important;max-height:24px!important;margin:0!important;padding-block:0!important;line-height:24px!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-head-actions .tree-invite-action{position:static!important;inset:auto!important;transform:none!important;z-index:auto!important;grid-area:2/2!important;justify-self:end!important;align-self:center!important;width:84px!important;min-width:0!important;max-width:84px!important;height:40px!important;min-height:40px!important;max-height:40px!important;margin:0!important;padding:0 8px!important;box-sizing:border-box!important;font:650 13px/1 system-ui!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .hxn-messages{grid-area:1/2!important;display:flex!important;align-items:center!important;justify-content:center!important;position:relative!important;align-self:center!important;justify-self:end!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;margin:0!important;padding:9px!important;box-sizing:border-box!important;overflow:hidden!important;flex:none!important;border:1px solid #8295b139!important;border-radius:11px!important;background:#14273e!important;color:#cfdaea!important;cursor:pointer!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .hxn-messages .hxn-icon{display:block!important;position:static!important;inset:auto!important;width:23px!important;height:23px!important;min-height:0!important;margin:0!important;padding:0!important;transform:none!important;pointer-events:none!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .hxn-messages svg{width:23px!important;height:23px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.65!important;stroke-linecap:round!important;stroke-linejoin:round!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .hxn-messages .hxn-label{display:block!important;position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:1px!important;height:1px!important;min-height:0!important;max-height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;pointer-events:none!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .hxn-messages .hxn-unread{position:absolute!important;right:0!important;top:0!important;min-width:15px!important;height:15px!important;padding:0 2px!important;border:1px solid #102746!important;border-radius:10px!important;background:#e7c887!important;color:#0b192e!important;text-align:center!important;font:700 9px/15px system-ui!important;pointer-events:none!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .hxn-messages .hxn-unread[hidden]{display:none!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .hxn-messages:focus-visible{outline:2px solid #e7c887!important;outline-offset:2px!important}
html body.hxn-mobile-ready #humanidadMobileHeader[data-hxn-route="messages"]{display:flex!important;position:sticky!important;min-height:48px!important;margin-bottom:6px!important}
html body.hxn-mobile-ready #humanidadMobileHeader .hxn-back{min-height:44px;border:0;background:transparent;color:#e7c887;padding:8px 0;font:600 14px system-ui;cursor:pointer}
body.hxn-mobile-ready:not(:has(#accountModal.open:not(.auth-only))) #humanidadMobileHeader[data-hxn-route="messages"]{display:none!important}
}

/* Approved family header: identity together, pending and invitation on one row. */
@media(max-width:680px){
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader{border-color:#304a68!important;border-radius:14px!important;background:#10243e!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-head-actions{grid-template-rows:24px 18px 44px!important;row-gap:2px!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-selector-wrap{grid-area:1/1/3/2!important;align-self:start!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-selector-wrap .htc-tree-label{align-items:flex-start!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-selector-wrap .htc-tree-family{line-height:24px!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-selector-wrap .htc-tree-label::after{margin-top:6px!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-meta{display:contents!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-meta>.htc-tree-detail{grid-area:2/1!important;align-self:start!important;position:relative!important;pointer-events:none!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-pending{grid-area:3/1!important;align-self:center!important;justify-self:start!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-pending>details>summary{height:32px!important;min-height:32px!important;max-height:32px!important;line-height:30px!important;padding:0 9px!important;border:1px solid #d9b36a80!important;border-radius:16px!important;background:#10243e!important;font:600 0/30px system-ui!important;width:max-content!important;max-width:100%!important;white-space:nowrap!important;display:flex!important;align-items:center!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-pending>details>summary::before{content:attr(data-hno-short) ' ›'!important;font:600 12px/30px system-ui!important;color:#e7c887!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-head-actions .tree-invite-action{grid-area:3/2!important;height:44px!important;min-height:44px!important;max-height:44px!important;border-radius:10px!important;box-shadow:none!important}
html body.hxn-mobile-ready #accountModal #familyView#familyView .account-view[data-view="tree"].active #familyTreeHeader#familyTreeHeader .hxn-messages{grid-area:1/2/3/3!important;background:#10243e!important;border-color:#42607d!important}
}

/* Approved natural navigation: page-matched navy, fine outline and bare icons. */
@media(max-width:680px){
/* Regla fija: la barra inferior mide siempre lo mismo y está siempre a la misma distancia del borde.
   --hxn-bar-reserve es lo único que otras pantallas (Mi árbol) pueden usar para no quedar debajo:
   CSS puro, en el mismo sistema que la barra, así Safari no puede desalinearlos con sus barras. */
:root{--hxn-bar-gap:10px;--hxn-bar-h:64px;--hxn-bar-reserve:calc(var(--hxn-bar-gap) + var(--hxn-bar-h) + env(safe-area-inset-bottom,0px))}
html body.hxn-mobile-ready #humanidadMobileFixedBar.social-nav{
 inset:auto 12px calc(var(--hxn-bar-gap) + env(safe-area-inset-bottom,0px))!important;
 width:calc(100% - 24px)!important;height:var(--hxn-bar-h)!important;min-height:var(--hxn-bar-h)!important;max-height:var(--hxn-bar-h)!important;padding:5px 6px!important;
 border:1px solid #46627d!important;border-radius:20px!important;
 background:var(--hno-bg,#07111f)!important;box-shadow:none!important;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html body.hxn-mobile-ready #humanidadMobileFixedBar .hxn-slot>button{
 min-height:52px!important;padding:3px 1px!important;gap:4px!important;
 border:0!important;border-radius:10px!important;background:transparent!important;
 box-shadow:none!important;font-size:11px!important;line-height:14px!important;
}
html body.hxn-mobile-ready #humanidadMobileFixedBar .hxn-icon,
html body.hxn-mobile-ready #humanidadMobileFixedBar button.active .hxn-icon{
 width:28px!important;height:28px!important;padding:0!important;
 border:0!important;border-radius:0!important;background:transparent!important;
 box-shadow:none!important;filter:none!important;transform:none!important;
}
html body.hxn-mobile-ready #humanidadMobileFixedBar .hxn-icon svg{width:26px!important;height:26px!important}
html body.hxn-mobile-ready #humanidadMobileFixedBar .hxn-label{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body.hxn-mobile-ready #humanidadMobileFixedBar button.active{color:#e7c887!important}
html body.hxn-mobile-ready #humanidadMobileFixedBar button::before,
html body.hxn-mobile-ready #humanidadMobileFixedBar button::after{display:none!important}
html body.hxn-mobile-ready #humanidadMobileFixedBar button:focus-visible{outline:2px solid #e7c887!important;outline-offset:-2px!important}
html body.hxn-mobile-ready #humanidadMobileFixedBar button:active{opacity:.8}
}