/* HUMANIDAD — Tono «Noche y oro» (22-oct-2026, propuesta aprobada por Santiago).
   Una sola base de color para toda la app: fondo noche, superficies planas sin marcos
   pesados, texto crema y un solo dorado para acciones y etiquetas.
   Todo cuelga de html.hno-ui (lo agrega tono-noche.js salvo que esté apagado).
   Solo presentación: no cambia datos, textos ni comportamiento. */

/* ---------- 1. La base: variables ---------- */
html.hno-ui{
  --hno-bg:#07111f;--hno-deep:#050c17;--hno-surface:#0d1b30;--hno-raised:#13233a;--hno-field:#101f35;
  --hno-line:rgba(204,222,245,.12);--hno-line-strong:rgba(204,222,245,.2);
  --hno-text:#f4ecdd;--hno-muted:#a3b2c6;
  --hno-gold:#d9b36a;--hno-gold-soft:#f0d7a1;--hno-gold-line:rgba(217,179,106,.45);--hno-on-gold:#1a1408;
}
/* Las variables de la capa azul anterior pasan a leer la base noche. */
html.hno-ui body.humanidad-blue-surfaces-v1.humanidad-harmony-v1,
html.hno-ui body.humanidad-blue-surfaces-v1{
  --blue-card-reference:var(--hno-surface);--blue-card:var(--hno-surface);--blue-field:var(--hno-field);
  --hc-void:var(--hno-bg);--hc-surface:var(--hno-surface);--hc-raised:var(--hno-raised);--hc-text:var(--hno-text);--hc-muted:var(--hno-muted);--hc-gold:var(--hno-gold-soft);--hc-line:var(--hno-line);--hc-panel:var(--hno-surface);--hc-shadow:none;
  --sh-night:var(--hno-bg);--sh-abyss:var(--hno-deep);--sh-navy:var(--hno-surface);--sh-panel-glass:rgba(13,27,48,.97);--sh-raised:var(--hno-raised);--sh-muted:var(--hno-muted);--sh-surface:var(--hno-surface);--sh-ambient:var(--hno-bg);
  --hv-bg:var(--hno-bg);--hv-bg-deep:var(--hno-deep);--hv-panel:var(--hno-surface);--hv-panel-2:var(--hno-raised);--hv-panel-3:var(--hno-raised);
  --hv-line:rgba(217,179,106,.24);--hv-line-soft:var(--hno-line);--hv-muted:var(--hno-muted);--hv-shadow:none;
  --sw-bg:var(--hno-bg);--sw-card:var(--hno-surface);--sw-card2:var(--hno-raised);--sw-line:var(--hno-line);
}

/* ---------- 2. Fondo único para todas las pantallas ---------- */
html.hno-ui body #accountModal:not(.auth-only) :is(.account-shell,#familyView.social-app,.social-main),
html.hno-ui body #accountModal #familyView#familyView .social-main{background:var(--hno-bg)!important}
/* Mundo conserva una luz muy tenue detrás del globo, ya en noche. */
html.hno-ui body #accountModal #familyView#familyView .social-main:has(.account-view[data-view="mundo"].active){
  background:radial-gradient(ellipse at 55% 38%,#10223b 0%,#0a1628 40%,var(--hno-bg) 76%)!important}

/* ---------- 3. Superficies: planas, borde fino, sin sombras ---------- */
html.hno-ui body #accountModal #familyView#familyView .account-view[data-view] :is(
.settings-card,.family-entry-card,.connection-privacy-note,.beta20-memory-toolbar,.beta20-invite-summary,
.profile-v50-card,.profile-v50-stats,.claim-place-card,.member-invitation-card,.connection-card,.people-discovery,
.invite-card,.public-profile-card,.mural-composer,.hsw-post,.hsw-composer,.hm1-card,.hm1-done,
.beta20-panel,.beta20-memory-card,.humanity-product-side-panel,.humanity-product-future-card,
.humanity-product-mini-surface,.humanity-separation-card,.account-form,.humanity-product-stat-row,.humanity-product-surface:not(.profile-v50-hero):not(.humanity-product-canvas)){
  background:var(--hno-surface)!important;border-color:var(--hno-line)!important;box-shadow:none!important;color:var(--hno-text)!important}
html.hno-ui body #accountModal #familyView#familyView .account-view[data-view] .humanity-product-stat-row{background:transparent!important}
@media(hover:hover) and (pointer:fine){
  html.hno-ui body #accountModal #familyView#familyView .account-view[data-view] :is(.settings-card,.profile-v50-card,.connection-card,.hsw-post,.family-entry-card):hover{
    background:var(--hno-surface)!important;border-color:var(--hno-gold-line)!important;box-shadow:none!important}
}
/* Campos de texto */
html.hno-ui body :is(#accountModal,#hmemoryOverlay,.person-drawer,.hsw-dialog,.profile-v50-editor) :is(.account-field,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select){
  background:var(--hno-field)!important;border-color:var(--hno-line-strong)!important;color:var(--hno-text)!important}
html.hno-ui body #accountModal #familyView#familyView :is(.account-field,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select){
  background:var(--hno-field)!important;border-color:var(--hno-line-strong)!important;color:var(--hno-text)!important}
/* Hojas y diálogos que se abren encima */
html.hno-ui body :is(#hmemoryOverlay .hmemory-sheet,#hmemoryOverlay .hmemory-visual,.hsw-dialog,.profile-v50-editor,.hsw-floating-menu,.person-drawer,.new-branch-modal-header,.new-branch-modal-body,.new-branch-modal-footer,[data-humanity-add-relative-review-v1]>section){
  background:var(--hno-surface)!important;border-color:var(--hno-line-strong)!important;color:var(--hno-text)!important}
html.hno-ui body :is(#hmemoryOverlay .hmemory-meta>div,#hmemoryOverlay .hmemory-person,#hmemoryOverlay .avlive,#hmemoryOverlay #av1-memory-context,.hsw-comment>div,.avlive-file,.person-drawer .new-branch-context){
  background:var(--hno-raised)!important;border-color:var(--hno-line)!important}
html.hno-ui body .hsw-media-grid .hsw-media-item[data-media-kind=audio]{background:var(--hno-raised)!important}
html.hno-ui body :is(.hsw-media-item[data-media-kind=video],.hsw-media-item[data-media-kind=image]){background:var(--hno-deep)!important}
/* «Agregar familiar» y su confirmación, a la misma base */
html.hno-ui body .humanidad-modal-backdrop.hafv2-backdrop .person-drawer.hafv2-card{background:var(--hno-surface)!important;border-color:var(--hno-gold-line)!important}
html.hno-ui body .hafv2-card :is(.humanidad-quick-relation-chip:not(.is-active),.humanidad-quick-name,.hafv2-link-row){background:var(--hno-field)!important;border-color:var(--hno-line-strong)!important}
html.hno-ui body[class] [data-humanidad-unsaved-dialog]>.person-drawer.hafv2-discard{background:var(--hno-surface)!important;border-color:var(--hno-line-strong)!important}

/* ---------- 4. Inicio: secciones sin cajas dentro de cajas ---------- */
html.hno-ui body #accountModal #familyView#familyView #hp1-home :is(.hm1-home-card,.iv1-oh-section){
  background:transparent!important;border:0!important;border-top:1px solid var(--hno-line)!important;border-radius:0!important;box-shadow:none!important;padding:22px 4px!important}
html.hno-ui body #accountModal #familyView#familyView #hp1-home :is(.av1-memory,.av1-memory-open,.hm1-birthday-row,.iv1-oh-person,.iv1-oh-step){
  background:transparent!important;border:0!important;border-bottom:1px solid var(--hno-line)!important;border-radius:0!important;box-shadow:none!important}
html.hno-ui body #accountModal #familyView#familyView #hp1-home .iv1-oh-quick>button{
  background:var(--hno-surface)!important;border:1px solid var(--hno-line)!important;box-shadow:none!important}
html.hno-ui body #accountModal #familyView#familyView #hp1-home :is(.hm1-heading-icon,.hm1-birthday-date){
  background:transparent!important;border-color:var(--hno-gold-line)!important;color:var(--hno-gold-soft)!important}
html.hno-ui body #accountModal #familyView#familyView #hp1-home :is(.hm1-home-card p,.av1-memory-excerpt,.hm1-birthday-copy small,.iv1-oh-person small,.iv1-oh-step small){color:var(--hno-muted)!important}
@media(hover:hover) and (pointer:fine){
  html.hno-ui body #accountModal #familyView#familyView #hp1-home :is(.hm1-home-card,.iv1-oh-section,.av1-memory-open,.hm1-birthday-row):hover{
    background:transparent!important;box-shadow:none!important;translate:none!important}
}

/* ---------- 5. Perfil: sin el degradado azul ---------- */
html.hno-ui body #accountModal #familyView#familyView .account-view[data-view="profile"] .profile-v50-hero{background:var(--hno-bg)!important;box-shadow:none!important}

/* ---------- 6. Constelación y Mundo: el cielo es la noche ---------- */
html.hno-ui body #accountModal #familyView#familyView #constellationGraphCanvas{background:var(--hno-bg)!important}
html.hno-ui body #accountModal #familyView#familyView .account-view[data-view="constellation"] :is(.humanity-product-shell,.humanity-product-header,#constellationContextPanel){background:transparent!important}
html.hno-ui body #accountModal #familyView#familyView .account-view[data-view="mundo"] :is(.mp-tools,.mp-dock){background:rgba(5,12,23,.88)!important;border-color:var(--hno-line)!important;box-shadow:none!important}

/* ---------- 7. Mensajes ---------- */
html.hno-ui body #accountModal #familyView#familyView .account-view[data-view="messages"] .messages-layout{background:var(--hno-bg)!important}

/* ---------- 8. Barras de navegación ---------- */
html.hno-ui body #humanidadMobileFixedBar.social-nav{background:var(--hno-deep)!important;border-top-color:var(--hno-line)!important}

/* ---------- 9. Mi árbol ---------- */
html.hno-ui body #accountModal #familyView#familyView :is(.social-head.tree-social-head,.humanidad-f3-toolbar,.humanidad-f3-stage,#f3Canvas.htc-surface,.htc-tree-view){background:var(--hno-bg)!important;box-shadow:none!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-toolbar{border-color:var(--hno-line)!important}
html.hno-ui body #accountModal #familyView#familyView .htc-dock{background:rgba(5,12,23,.92)!important;border-color:var(--hno-line-strong)!important}
html.hno-ui body #accountModal #familyView#familyView .htc-dock :is(button,.htc-btn){background-color:transparent!important;background-image:none!important}
html.hno-ui body #accountModal #familyView#familyView .htc-dock .htc-zoom-in{border-color:var(--hno-gold-line)!important}
/* Aviso de familiares sin unir: una sola línea discreta */
html.hno-ui body #accountModal #familyView#familyView details.humanidad-f3-unlinked{background:transparent!important;border:1px solid var(--hno-line)!important;border-radius:12px!important;box-shadow:none!important}
html.hno-ui body #accountModal #familyView#familyView details.humanidad-f3-unlinked>summary{font:500 13.5px/1.35 Inter,system-ui,sans-serif!important;color:var(--hno-text)!important;background:transparent!important}

/* Tarjetas: círculo con borde dorado fino y el nombre completo debajo; sin caja */
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card.hpx-card{
  background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card.hpx-card::before,
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card.hpx-card::after{display:none!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card .humanidad-f3-avatar{
  background:var(--hno-raised)!important;border:1px solid var(--hno-gold-line)!important;box-shadow:none!important;color:var(--hno-gold-soft)!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card.is-main .humanidad-f3-avatar{
  border:2px solid var(--hno-gold)!important;box-shadow:0 0 0 6px rgba(217,179,106,.14)!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card .hpx-initials{color:var(--hno-gold-soft)!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card>strong{
  white-space:normal!important;overflow:hidden!important;text-overflow:clip!important;
  display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  color:var(--hno-text)!important;font-weight:600!important;text-align:center!important;line-height:1.2!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card .humanidad-f3-role{color:var(--hno-muted)!important;text-decoration:none!important;border:0!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card.is-main .humanidad-f3-role{color:var(--hno-gold-soft)!important;letter-spacing:.12em!important;text-transform:uppercase!important;font-size:10.5px!important;font-weight:700!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card .humanidad-f3-life{color:var(--hno-muted)!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card .humanidad-tree-quick-add{
  background:var(--hno-surface)!important;border:1px solid var(--hno-gold-line)!important;color:var(--hno-gold-soft)!important;box-shadow:none!important;border-radius:50%!important}
/* Líneas: doradas y finas */
html.hno-ui body #accountModal #familyView#familyView #f3Canvas path.link{stroke:rgba(217,179,106,.5)!important;stroke-width:1.5px!important;filter:none!important}
html.hno-ui body #accountModal #familyView#familyView #f3Canvas path.link.hv4-link-unconnected{stroke:rgba(217,179,106,.32)!important;stroke-dasharray:none!important}

/* Vista alejada: solo círculos y nombres legibles (el resto aparece al acercar) */
html.hno-ui body #accountModal #familyView#familyView #f3Canvas[data-hno-zoom="far"] .humanidad-f3-card :is(.humanidad-tree-quick-add,.humanidad-f3-role,.humanidad-f3-life,.hpx-quality-dot){display:none!important}
html.hno-ui body #accountModal #familyView#familyView #f3Canvas[data-hno-zoom="far"] .humanidad-f3-card>strong{font-size:calc(11px * var(--hno-inv,1))!important;-webkit-line-clamp:2;line-height:1.15!important;margin-top:4px!important;width:calc(100% + 28px)!important;max-width:none!important;margin-inline:-14px!important}
html.hno-ui body #accountModal #familyView#familyView #f3Canvas[data-hno-zoom="far"] .humanidad-f3-card .humanidad-f3-avatar{width:calc(36px * var(--hno-inv,1))!important;height:calc(36px * var(--hno-inv,1))!important;border-radius:50%!important;min-width:0!important;min-height:0!important;flex:none!important}
html.hno-ui body #accountModal #familyView#familyView #f3Canvas[data-hno-zoom="far"] .humanidad-f3-card .hpx-initials{font-size:calc(12px * var(--hno-inv,1))!important}
html.hno-ui body #accountModal #familyView#familyView #f3Canvas[data-hno-zoom="far"] .humanidad-f3-card.hpx-card{overflow:visible!important;justify-content:center!important}
html.hno-ui body #accountModal #familyView#familyView .card:is(:hover,.node-selected,.hpx-l-selected) .humanidad-f3-card.hpx-card{background:transparent!important;box-shadow:none!important}
html.hno-ui body #accountModal #familyView#familyView .card:is(.node-selected,.hpx-l-selected) .humanidad-f3-avatar{border-color:var(--hno-gold)!important}
html.hno-ui body #accountModal #familyView#familyView :is(#addRelativeF3,.htc-dock .htc-zoom-in){background:transparent!important;background-image:none!important;border:1px solid var(--hno-gold-line)!important;color:var(--hno-gold-soft)!important;box-shadow:none!important}
/* Barra lateral de escritorio: la misma noche, un tono más profundo */
html.hno-ui body #accountModal #familyView#familyView .social-sidebar{background:var(--hno-deep)!important;background-image:none!important;border-right:1px solid var(--hno-line)!important}
/* La regla azul anterior pesa dos ids (por un :is con ids); :not(#…) iguala ese peso. */
html.hno-ui body .person-drawer :is(.humanidad-compact-optional,.new-branch-context):not(#hno-a):not(#hno-b){background:transparent!important;background-image:none!important;border-color:var(--hno-line)!important}

/* ---------- 10. Mi árbol: todos en círculo y color por estado ---------- */
html.hno-ui{--hno-blue:#5fd0e6;--hno-lila:#b8a1e6}
/* Un solo círculo para todos (el género queda en la ficha, no en la forma). */
html.hno-ui body #accountModal #familyView#familyView #HumanidadFamilyChart .hpx-card .humanidad-f3-avatar.hpx-portrait{border-radius:50%!important;transform:none!important}
html.hno-ui body #accountModal #familyView#familyView #HumanidadFamilyChart .hpx-card .humanidad-f3-avatar.hpx-portrait>*{transform:none!important;border-radius:50%!important}
/* Dorado: tiene cuenta · Cian: por invitar · Lila: en memoria. Sin resplandor en ningún estado.
   El anillo queda continuo: los cortes se reservan para los recuerdos de cada persona. */
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card.is-connected .humanidad-f3-avatar{border:2px solid var(--hno-gold)!important;box-shadow:none!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card.is-unconnected .humanidad-f3-avatar{border:1.5px solid rgba(95,208,230,.8)!important;color:#c9f1f8!important;box-shadow:none!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card.is-unconnected .hpx-initials{color:#c9f1f8!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card.is-memorial .humanidad-f3-avatar{border:2px solid var(--hno-lila)!important;box-shadow:none!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card.is-memorial .hpx-initials{color:#e1d6f7!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-card.is-main .humanidad-f3-avatar{border:3px solid var(--hno-gold)!important;box-shadow:none!important}
/* La leyenda de escritorio usa los mismos colores */
html.hno-ui body #familyView .f3-state-legend i.connected{background:var(--hno-gold)!important;box-shadow:none!important}
html.hno-ui body #familyView .f3-state-legend i.unconnected{background:transparent!important;border:1.5px solid var(--hno-blue)!important;box-shadow:none!important}
html.hno-ui body #familyView .f3-state-legend i.memorial{background:var(--hno-lila)!important;box-shadow:none!important}
/* Leyenda flotante sobre el lienzo (abajo a la izquierda) */
html.hno-ui body #familyView .humanidad-f3-stage .hno-legend{position:absolute;z-index:19;left:12px;bottom:calc(var(--hno-dock-bottom,14px) + 2px);display:flex;flex-direction:column;gap:5px;padding:8px 10px;border-radius:12px;background:rgba(5,12,23,.82);border:1px solid var(--hno-line);color:var(--hno-muted);font:500 11.5px/1.2 Inter,system-ui,sans-serif;pointer-events:none}
html.hno-ui body #familyView .humanidad-f3-stage .hno-legend span{display:flex;align-items:center;gap:7px;white-space:nowrap}
html.hno-ui body #familyView .hno-legend .hno-dot{width:10px;height:10px;border-radius:50%;box-sizing:border-box;flex:none}
html.hno-ui body #familyView .hno-legend .hno-dot-connected{background:var(--hno-gold);box-shadow:0 0 8px rgba(231,201,125,.6)}
html.hno-ui body #familyView .hno-legend .hno-dot-unconnected{border:1.5px solid var(--hno-blue)}
html.hno-ui body #familyView .hno-legend .hno-dot-memorial{background:var(--hno-lila)}
@media (min-width:681px){html.hno-ui body #familyView .humanidad-f3-stage .hno-legend{display:none}}

/* ---------- 11. Mi árbol en el celular: más espacio para la familia ---------- */
@media (max-width:680px){
  /* Controles compactos, solo íconos, en la esquina derecha justo encima de la barra */
  html.hno-ui body #familyMemberList#familyMemberList .htc-canvas .htc-dock{
    left:auto!important;right:10px!important;transform:none!important;
    bottom:var(--hno-dock-bottom,96px)!important;gap:2px!important;padding:4px!important;
    background:rgba(5,12,23,.86)!important;border-color:var(--hno-line-strong)!important;box-shadow:0 8px 24px rgba(0,0,0,.4)!important}
  html.hno-ui body #familyMemberList#familyMemberList .htc-canvas .htc-dock .htc-btn{min-width:40px!important;width:40px!important;height:40px!important;padding:0!important;border-radius:50%!important;justify-content:center!important}
  html.hno-ui body #familyMemberList#familyMemberList .htc-canvas .htc-dock .htc-btn>span{display:none!important}
  html.hno-ui body #familyMemberList#familyMemberList .htc-canvas .htc-dock .htc-zoom-label{display:none!important}
  html.hno-ui body #familyMemberList#familyMemberList .htc-canvas .htc-dock .htc-zoom-group{gap:2px!important}

}
/* «Ver su familia» también de lejos, como una flecha chica sobre el círculo */
html.hno-ui body #accountModal #familyView#familyView #f3Canvas[data-hno-zoom="far"] .humanidad-f3-card .humanidad-tree-more-family{display:flex!important;align-items:center;justify-content:center;font-size:0!important;padding:0!important;min-height:0!important;width:calc(22px * var(--hno-inv,1))!important;height:calc(22px * var(--hno-inv,1))!important;top:calc(-10px * var(--hno-inv,1))!important;border-radius:50%!important}
html.hno-ui body #accountModal #familyView#familyView #f3Canvas[data-hno-zoom="far"] .humanidad-f3-card .humanidad-tree-more-family::before{content:'↑'!important;font:700 calc(13px * var(--hno-inv,1))/1 Inter,system-ui,sans-serif}

/* «N sin unir»: una píldora arriba a la derecha del lienzo (celular y escritorio); al tocarla se abre la lista encima */
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-shell details.humanidad-f3-unlinked{
position:absolute!important;z-index:22!important;top:calc(var(--htc-toolbar-h,64px) + 10px)!important;right:10px!important;left:auto!important;
max-width:calc(100% - 20px)!important;margin:0!important;background:rgba(5,12,23,.9)!important;border:1px solid var(--hno-gold-line)!important;border-radius:999px!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-shell details.humanidad-f3-unlinked[open]{border-radius:16px!important;left:10px!important;max-height:55%!important;overflow:auto!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-shell details.humanidad-f3-unlinked>summary[data-hno-short]{font-size:0!important;padding:0 14px!important;min-height:36px!important;display:flex!important;align-items:center!important}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-shell details.humanidad-f3-unlinked>summary[data-hno-short]::before{content:attr(data-hno-short) ' ›';font:600 13px/1 Inter,system-ui,sans-serif;color:var(--hno-gold-soft)}
html.hno-ui body #accountModal #familyView#familyView .humanidad-f3-shell details.humanidad-f3-unlinked[open]>summary[data-hno-short]::before{content:attr(data-hno-short) ' ⌄'}

/* ---------- 12. Mundo: las personas con los mismos colores del árbol ---------- */
html.hno-ui body #familyView .mp-panel-person[data-person-state]>strong::before{content:'';display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;box-sizing:border-box;vertical-align:0}
html.hno-ui body #familyView .mp-panel-person.mp-state-connected>strong::before{background:var(--hno-gold);box-shadow:0 0 8px rgba(231,201,125,.6)}
html.hno-ui body #familyView .mp-panel-person.mp-state-unconnected>strong::before{border:1.5px solid var(--hno-blue)}
html.hno-ui body #familyView .mp-panel-person.mp-state-memorial>strong::before{background:var(--hno-lila)}
html.hno-ui body #familyView .mp-state-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:2px 0 10px;color:var(--hno-muted);font:500 12px/1.2 Inter,system-ui,sans-serif}
html.hno-ui body #familyView .mp-state-legend>span{display:inline-flex;align-items:center;gap:6px}
html.hno-ui body #familyView :is(.mp-state-legend>span,.mp-place-list-btn[data-person-state]>.mp-place-list-label)::before{content:'';display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;box-sizing:border-box}
html.hno-ui body #familyView .mp-place-list-btn[data-person-state]>.mp-place-list-label::before{margin-right:8px;vertical-align:0}
html.hno-ui body #familyView :is(.mp-state-legend>.mp-state-connected,.mp-place-list-btn[data-person-state="connected"]>.mp-place-list-label)::before{background:var(--hno-gold);box-shadow:0 0 8px rgba(231,201,125,.6)}
html.hno-ui body #familyView :is(.mp-state-legend>.mp-state-unconnected,.mp-place-list-btn[data-person-state="unconnected"]>.mp-place-list-label)::before{border:1.5px solid var(--hno-blue)}
html.hno-ui body #familyView :is(.mp-state-legend>.mp-state-memorial,.mp-place-list-btn[data-person-state="memorial"]>.mp-place-list-label)::before{background:var(--hno-lila)}

/* ---------- 13. Segundo tema: «Azul marino» (Ajustes › Apariencia) ----------
   La misma base, un azul marino profundo con una luz azul tenue arriba; el dorado no cambia. */
html.hno-ui.hno-marino{
  --hno-bg:#0a1730;--hno-deep:#071226;--hno-surface:#10223f;--hno-raised:#172b4f;--hno-field:#132647;
  --hno-line:rgba(150,180,230,.15);--hno-line-strong:rgba(150,180,230,.24);
  --hno-text:#f3ecdf;--hno-muted:#aab9d3;
}
html.hno-ui.hno-marino body #accountModal:not(.auth-only) :is(.account-shell,#familyView.social-app),
html.hno-ui.hno-marino body #accountModal #familyView#familyView .social-main:not(:has(.account-view[data-view="mundo"].active)){
  background:radial-gradient(ellipse 120% 60% at 70% -10%,rgba(70,120,210,.22),transparent 60%),var(--hno-bg)!important}
html.hno-ui.hno-marino body #accountModal #familyView#familyView .social-main:has(.account-view[data-view="mundo"].active){
  background:radial-gradient(ellipse at 55% 38%,#17305a 0%,#0e1f3d 40%,var(--hno-bg) 76%)!important}
/* Selector de tema en Ajustes */
html.hno-ui body .hps-standard .hno-theme-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:4px}
html.hno-ui body .hps-standard .hno-theme-option{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:44px;padding:12px;border-radius:14px;border:1px solid var(--hno-line-strong);background:transparent;color:var(--hno-text);font:600 14px Inter,system-ui,sans-serif;text-align:left;cursor:pointer}
html.hno-ui body .hps-standard .hno-theme-option[aria-pressed="true"]{border-color:var(--hno-gold);box-shadow:0 0 0 1px var(--hno-gold) inset}
html.hno-ui body .hps-standard .hno-theme-swatch{display:block;width:100%;height:44px;border-radius:10px;border:1px solid var(--hno-line)}
html.hno-ui body .hps-standard .hno-theme-swatch[data-theme="noche"]{background:radial-gradient(circle at 78% 50%,#d9b36a 0 7px,transparent 8px),#07111f}
html.hno-ui body .hps-standard .hno-theme-swatch[data-theme="marino"]{background:radial-gradient(circle at 78% 50%,#d9b36a 0 7px,transparent 8px),radial-gradient(ellipse at 70% -20%,rgba(70,120,210,.45),transparent 70%),#0a1730}
html.hno-ui body .hps-standard .hno-theme-note{margin:10px 0 0!important;font-size:12.5px!important;color:var(--hno-muted)!important}


/* Mobile tree chrome: equal navigation, flow-based invitation and a single camera zone.
   These scoped !important rules replace the older absolute invite / right dock rules. */
@media (max-width: 680px) {
  html.hno-ui body #familyView .family-section-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
    box-sizing: border-box;
    margin-bottom: 4px;
  }
  html.hno-ui body #familyView .family-section-nav button {
    width: 100%;
    padding: 8px 4px;
    min-height: 44px;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view
    .tree-social-head {
    padding: 6px 12px !important;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view
    .tree-head-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view
    .tree-selector-wrap.htc-tree-select {
    grid-area: 1 / 1 / 2 / 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view
    .tree-selector-wrap.htc-tree-select
    .htc-tree-label {
    min-height: 52px !important;
    height: auto !important;
    padding: 4px 22px 4px 0 !important;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view
    .tree-selector-wrap.htc-tree-select
    .htc-tree-label::after {
    right: 4px !important;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view
    .tree-selector-wrap
    .htc-tree-family {
    font-size: 15px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
    max-height: 2.4em;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view
    .tree-selector-wrap
    .htc-tree-detail {
    font-size: 11px !important;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view
    .tree-head-actions
    .account-action.tree-invite-action {
    grid-area: 1 / 2 / 2 / 3 !important;
    width: auto !important;
    position: static !important;
    transform: none !important;
    transition: none !important;
    inset: auto !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active
    #familyMemberList#familyMemberList
    .htc-canvas.htc-fullbleed
    .humanidad-f3-toolbar.f3-toolbar-v1 {
    min-height: 56px !important;
    padding: 2px 12px 6px !important;
    overflow: visible !important;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active
    #familyMemberList#familyMemberList
    .htc-canvas
    .humanidad-f3-toolbar
    .f3-nav-buttons {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 8px !important;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active
    #familyMemberList#familyMemberList
    .htc-canvas
    .humanidad-f3-toolbar
    .hpx-side-group:not([hidden]) {
    min-width: 0 !important;
    padding: 2px !important;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active
    #familyMemberList#familyMemberList
    .htc-canvas
    .humanidad-f3-toolbar
    .hpx-side-group
    > .hpx-side-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    font-size: 12px !important;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active
    #familyMemberList#familyMemberList
    .htc-canvas
    .humanidad-f3-toolbar
    .htc-nav-toggle {
    padding: 0 8px !important;
    border: 1px solid rgba(217, 179, 106, 0.24) !important;
    border-radius: 10px !important;
    background: #12263c !important;
    font-size: 12px !important;
  }
  html.hno-ui
    body
    #accountModal
    #familyView#familyView
    .account-view[data-view="tree"].active
    .humanidad-f3-shell
    details.humanidad-f3-unlinked {
    right: 12px !important;
    top: calc(var(--htc-toolbar-h, 56px) + 8px) !important;
    background: #12263c !important;
  }
  html.hno-ui
    body
    #accountModal
    #familyView#familyView
    .account-view[data-view="tree"].active
    .humanidad-f3-shell
    details.humanidad-f3-unlinked
    > summary[data-hno-short] {
    min-height: 44px !important;
  }
  html.hno-ui
    body
    #accountModal
    #familyView#familyView
    .account-view[data-view="tree"].active
    .humanidad-f3-shell
    details.humanidad-f3-unlinked[open] {
    left: 12px !important;
    max-height: 55% !important;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active
    #familyMemberList#familyMemberList
    .htc-canvas
    .htc-dock {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: calc(var(--hno-dock-bottom, 96px) + 24px) !important;
    gap: 2px !important;
    background: #12263c !important;
    max-width: calc(100% - 24px) !important;
    box-sizing: border-box;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active
    #familyMemberList#familyMemberList
    .htc-canvas
    .htc-dock
    .htc-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active
    .humanidad-f3-stage
    .hno-legend {
    left: 12px;
    right: 12px;
    bottom: var(--hno-dock-bottom, 96px);
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    padding: 2px 0;
    border: 0;
    background: transparent;
    font-size: 10px;
    line-height: 16px;
    box-shadow: none;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active
    .humanidad-f3-stage
    .hno-legend
    span {
    gap: 4px;
  }
  html.hno-ui
    body
    #familyView
    .account-view[data-view="tree"].active
    .humanidad-f3-stage
    .hno-legend
    .hno-dot {
    width: 8px;
    height: 8px;
  }
}

/* Flat person surfaces include personal, invitation and family previews. */
html.hno-ui body #accountModal #familyView#familyView :is(.profile-v50-avatar,.claim-place-avatar,.hpv-person-avatar,.hpv-peek-ring){box-shadow:none!important;filter:none!important}
html.hno-ui body #familyView :is(.hno-dot,.f3-state-legend i){box-shadow:none!important}