/* HUMANIDAD — Mi árbol, diseño v5 (11-nov-2026). Solo presentación; todo bajo .htd-v5, que
   agrega assets/tree-design-v5.js. Sin esa clase, el árbol queda exactamente como en v4.
   Colores: dorado #d9b36a (con cuenta) · cian #5fd0e6 (por invitar) · lila #b8a1e6 (en memoria). */

/* ───────── Personas: anillo + una sola línea ───────── */
/* Iconos sueltos que se repetían en cada persona. La información sigue disponible:
   el parentesco en la línea de abajo y en el nombre accesible del retrato; «Ver su familia» en el chip superior. */
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .card .mini-tree,
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .humanidad-f3-card :is(.htr-role,.humanidad-f3-role,.hpx-memorial-note,.humanidad-f3-life,.ht-memory-light){display:none!important}

/* Por invitar: anillo punteado, distinto a simple vista del dorado y del lila. */
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .humanidad-f3-card.is-unconnected:not(.is-memorial) .humanidad-f3-avatar{border:2px dashed #5fd0e6!important}

/* En memoria: pequeño ✦ lila sobre el borde inferior IZQUIERDO del retrato (el derecho es del «+»). */
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .humanidad-f3-card .humanidad-f3-avatar{position:relative!important;overflow:visible!important}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .humanidad-f3-card.is-memorial .humanidad-f3-avatar::after{content:"✦";position:absolute;left:calc(-4px * var(--hno-inv,1));right:auto;bottom:calc(-3px * var(--hno-inv,1));z-index:2;display:flex;align-items:center;justify-content:center;width:calc(15px * var(--hno-inv,1));height:calc(15px * var(--hno-inv,1));box-sizing:border-box;border:calc(1.5px * var(--hno-inv,1)) solid var(--htv-bg,#0a1730);border-radius:50%;background:#b8a1e6;color:#231a4f;font:700 calc(9px * var(--hno-inv,1))/1 system-ui,sans-serif;transform:none!important;pointer-events:none}

/* Línea de estado bajo el nombre. */
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .humanidad-f3-card>.htd-sub{display:block;flex:0 0 auto;max-width:100%;margin:calc(1px * var(--hno-inv,1)) auto 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font:500 calc(9px * var(--hno-inv,1))/1.25 Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#aebed0;text-shadow:0 0 2px var(--htv-bg,#0a1730),0 0 4px var(--htv-bg,#0a1730),0 0 6px var(--htv-bg,#0a1730)}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .htd-sub[data-htd-tone="memorial"]{color:#c9b8ef}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .htd-sub[data-htd-tone="unconnected"]{color:#7fdcee}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .htd-sub:is([data-htd-tone="main"],[data-htd-tone="connected"]){color:#e2c482}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .humanidad-f3-card.is-main>strong{color:#f3deb0!important}

/* «Ver su familia»: un chip chico con ↑ sobre el borde superior del retrato, en vez del círculo grande. */
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .humanidad-f3-card .humanidad-tree-more-family{position:absolute!important;top:calc(-5px * var(--hno-inv,1))!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translateX(-50%)!important;z-index:6!important;display:flex!important;align-items:center!important;justify-content:center!important;width:calc(22px * var(--hno-inv,1))!important;min-width:0!important;height:calc(13px * var(--hno-inv,1))!important;min-height:0!important;margin:0!important;padding:0!important;box-sizing:border-box!important;border:calc(1px * var(--hno-inv,1)) solid #33466f!important;border-radius:999px!important;background:#13234a!important;color:#c9d2e6!important;font-size:0!important;line-height:0!important;box-shadow:none!important;opacity:1!important}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .humanidad-f3-card .humanidad-tree-more-family::before{content:""!important;display:block!important;width:calc(4px * var(--hno-inv,1))!important;height:calc(4px * var(--hno-inv,1))!important;margin-top:calc(2px * var(--hno-inv,1))!important;border-left:calc(1.5px * var(--hno-inv,1)) solid currentColor!important;border-top:calc(1.5px * var(--hno-inv,1)) solid currentColor!important;transform:rotate(45deg)!important;font-size:0!important}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .humanidad-f3-card .humanidad-tree-more-family::after{content:none!important}
/* El área táctil supera al dibujo para que se pueda tocar con el dedo. */
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .humanidad-f3-card .humanidad-tree-more-family>*{display:none!important}

/* «+»: en cada persona (agregar familia desde cualquiera), en la esquina inferior derecha del retrato.
   Los permisos los sigue decidiendo el flujo de alta: el botón solo abre «Nuevo familiar». */
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .humanidad-f3-card.hpx-card{position:relative!important;--htd-a:52px;--htd-pt:8px}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList #f3Canvas[data-hno-zoom="far"] .humanidad-f3-card.hpx-card{--htd-a:calc(36px * var(--hno-inv,1));--htd-pt:4px}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList .humanidad-f3-card .humanidad-tree-quick-add{display:flex!important;position:absolute!important;top:calc(var(--htd-pt) + var(--htd-a) - 13px * var(--hno-inv,1))!important;left:calc(50% + var(--htd-a) / 2 - 11px * var(--hno-inv,1))!important;right:auto!important;bottom:auto!important;z-index:7!important;align-items:center!important;justify-content:center!important;width:calc(19px * var(--hno-inv,1))!important;min-width:0!important;height:calc(19px * var(--hno-inv,1))!important;min-height:0!important;margin:0!important;padding:0!important;box-sizing:border-box!important;border:calc(2px * var(--hno-inv,1)) solid var(--htv-bg,#0a1730)!important;border-radius:50%!important;background:#d9b36a!important;color:#2a1d05!important;font:700 calc(13px * var(--hno-inv,1))/1 system-ui,sans-serif!important;box-shadow:none!important;opacity:1!important;transform:none!important}

/* ───────── Encabezado ───────── */
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] .htc-tree-label .htd-kicker{display:block;font:600 11px/14px Inter,system-ui,sans-serif;letter-spacing:.04em;color:#d9b36a;white-space:nowrap}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyTreeHeader#familyTreeHeader .tree-selector-wrap .htc-tree-label{flex-wrap:wrap!important;row-gap:0!important;height:auto!important}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyTreeHeader#familyTreeHeader .htc-tree-label .htd-kicker{flex:0 0 100%}
/* Sin otro árbol real para elegir: el nombre es un título (sin flecha ni toque). */
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] .htc-tree-label.htd-no-switch{pointer-events:none!important;cursor:default!important}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] .htc-tree-label.htd-no-switch::after{display:none!important}
/* Imprimir vive en «⋯»: el botón original queda oculto pero sigue siendo el que se activa. */
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] .htp-trigger{display:none!important}
/* Leyenda de colores centrada abajo (Imprimir ya no vive ahí; gana a la regla de tree-print-v1). */
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyMemberList#familyMemberList .htr-legend-footer{justify-content:center!important;padding:0 8px!important}

/* Botón «⋯» y su menú */
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyTreeHeader .htd-more{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:12px;background:transparent;color:#c9d2e6;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyTreeHeader .htd-more svg{width:22px;height:22px;fill:currentColor}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyTreeHeader .htd-more:is(:hover,[aria-expanded="true"]){background:rgba(201,210,230,.08)}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyTreeHeader .htd-more:focus-visible{outline:2px solid #f0d18c;outline-offset:-2px}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyTreeHeader .htd-menu{position:absolute;z-index:60;top:52px;right:10px;min-width:220px;padding:6px;box-sizing:border-box;border:1px solid #2a3a63;border-radius:14px;background:#12204a;box-shadow:0 12px 32px rgba(0,0,0,.45)}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyTreeHeader .htd-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;box-sizing:border-box;border:0;border-radius:10px;background:transparent;color:#e8ecf5;font:500 14px/1.2 Inter,system-ui,sans-serif;text-align:left;cursor:pointer}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyTreeHeader .htd-menu-item:is(:hover,:focus-visible){background:rgba(217,179,106,.12);outline:0}
html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"] #familyTreeHeader .htd-menu-item svg{flex:none;width:18px;height:18px;fill:none;stroke:#d9b36a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:680px){
  /* Tarjeta en tres niveles: identidad + «⋯» · contexto · acciones. Contexto y acciones comparten fila
     para respetar el contrato de 112 px de la tarjeta y los 460 px mínimos del lienzo. */
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader{position:relative!important;overflow:visible!important;height:auto!important;min-height:0!important;padding:8px 12px 10px 14px!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active.htd-has-pending #familyTreeHeader#familyTreeHeader{margin-bottom:54px!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-head-actions{position:static!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;grid-template-rows:auto auto!important;grid-template-areas:"label label label" "meta chat invite"!important;column-gap:8px!important;row-gap:0!important;align-items:center!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;transform:none!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-head-actions>:is(.tree-selector-wrap,.hxn-messages,.tree-invite-action){position:relative!important;inset:auto!important;transform:none!important;margin:0!important;order:0!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-selector-wrap{grid-area:label!important;display:block!important;width:auto!important;min-width:0!important;max-width:100%!important;height:auto!important;padding-right:44px!important;box-sizing:border-box!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-selector-wrap .htc-tree-label{display:grid!important;grid-template-columns:minmax(0,max-content) auto!important;grid-template-areas:"kicker kicker" "family chev"!important;justify-content:start!important;align-items:center!important;column-gap:8px!important;width:100%!important;height:auto!important;min-height:40px!important;padding:2px 0 0!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .htc-tree-label .htd-kicker{grid-area:kicker}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .htc-tree-label .htc-tree-family{grid-area:family;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:20px!important;line-height:26px!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .htc-tree-label::after{grid-area:chev;position:static!important;margin:0 0 4px!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-head-actions>.htd-more{position:absolute!important;top:6px!important;right:6px!important;z-index:2!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-meta{grid-area:meta!important;position:static!important;inset:auto!important;transform:none!important;display:block!important;width:auto!important;min-width:0!important;height:auto!important;margin:0!important;align-self:center!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-meta .htc-tree-detail{display:block!important;position:static!important;margin:0!important;color:#9aa6c4!important;font:400 13px/18px Inter,system-ui,sans-serif!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .hxn-messages{grid-area:chat!important;width:44px!important;height:44px!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-invite-action{grid-area:invite!important;height:44px!important;min-height:44px!important;align-self:center!important}

  /* Aviso «N personas sin unir»: franja propia entre la tarjeta y las pestañas. */
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-pending:not([hidden]){display:block!important;position:absolute!important;grid-area:auto!important;grid-column:1/-1!important;width:100%!important;max-width:none!important;box-sizing:border-box!important;top:calc(100% + 8px)!important;left:0!important;right:0!important;z-index:30!important;margin:0!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-pending>details.htc-header-unlinked{display:block!important;position:relative!important;width:100%!important;max-width:none!important;margin:0!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-pending>details.htc-header-unlinked>summary{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important;max-width:none!important;height:38px!important;min-height:38px!important;padding:0 12px!important;box-sizing:border-box!important;border:1px solid #5a4a22!important;border-radius:10px!important;background:#1a1e30!important;color:#e6c985!important;font-size:0!important;list-style:none!important;cursor:pointer!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-pending>details.htc-header-unlinked>summary::before{content:attr(data-htd-label)!important;flex:1 1 auto!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;margin:0!important;padding:0 0 0 22px!important;background:no-repeat left center/16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6c985' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='12' r='2.5'/%3E%3Cpath d='M6 8.5v7M8.5 6c5 0 7 2 7 4'/%3E%3C/svg%3E")!important;color:#e6c985!important;font:500 13px/18px Inter,system-ui,sans-serif!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-pending>details.htc-header-unlinked>summary::after{content:attr(data-htd-action)!important;flex:none!important;display:block!important;position:static!important;color:#f0d18c!important;font:600 13px/18px Inter,system-ui,sans-serif!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-header-pending>details.htc-header-unlinked[open]>.humanidad-f3-unlinked-list{position:absolute!important;top:calc(100% + 6px)!important;left:0!important;right:0!important;width:auto!important;max-height:50vh!important;overflow:auto!important;border:1px solid #2a3a63!important;border-radius:12px!important;background:#12204a!important}
}

@media (min-width:681px){
  /* Escritorio: «⋯» a la izquierda de Invitar, en el lugar que ocupaba Imprimir. */
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-head-actions{position:relative!important;grid-template-columns:minmax(0,1fr) auto auto!important;column-gap:8px!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-head-actions>.htd-more{grid-area:1/2/3/3!important;align-self:center!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .tree-head-actions>.tree-invite-action{grid-area:1/3/3/4!important}
  html.hno-ui body #accountModal #familyView#familyView:not(#htd-a) .account-view.htd-v5[data-view="tree"].active #familyTreeHeader#familyTreeHeader .htd-menu{top:calc(50% + 26px);right:96px}
}