@import url('/humanidad-capsule-theme-v1.css?v=1');
/*
 * HUMANIDAD — Lienzo navegable de Mi árbol (tree-canvas-v1)
 * Se carga después de todas las capas visuales. Todo está acotado a .htc-canvas, que solo
 * existe cuando tree-canvas-runtime-v1.js adjuntó la cámara: sin runtime, nada cambia.
 * El doble ID (#familyMemberList#familyMemberList) da prioridad determinista sobre las
 * capas heredadas que también usan !important.
 */

.account-view.htc-tree-view {
  --htc-gold: #d7b76b;
  --htc-gold-soft: rgba(215, 183, 107, .32);
  --htc-glass: rgba(6, 12, 20, .78);
  --htc-glass-line: rgba(215, 183, 107, .22);
  --htc-ivory: #f3ead6;
  --htc-muted: #a9a49a;
}

/* ───────────── Viewport: ocupa la altura real disponible ───────────── */
/* El contenedor deja de imponer alturas fijas heredadas; la altura la define el propio lienzo. */
.account-view[data-view="tree"].active #familyMemberList#familyMemberList.htc-host {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.account-view[data-view="tree"].active #familyMemberList#familyMemberList > .humanidad-f3-shell.htc-canvas {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: none !important;
  /* 100dvh sigue a la interfaz dinámica del navegador; el JS solo mide lo que hay arriba y abajo. */
  height: calc(100dvh - var(--htc-stage-top, 140px) - var(--htc-clearance, 16px)) !important;
  min-height: 360px !important;
  max-height: none !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}

.account-view[data-view="tree"].active #familyMemberList#familyMemberList > .humanidad-f3-shell.htc-canvas > .humanidad-f3-stage.htc-viewport {
  position: relative !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  contain: layout paint;
}

#familyMemberList#familyMemberList .htc-canvas .htc-viewport #HumanidadFamilyChart,
#familyMemberList#familyMemberList .htc-canvas .htc-viewport #HumanidadFamilyChart.f3.f3-cont,
#familyMemberList#familyMemberList .htc-canvas .htc-viewport #f3Canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Gestos: un dedo mueve, dos dedos acercan. Solo dentro del lienzo; el resto de la página
   conserva su desplazamiento normal. */
#familyMemberList#familyMemberList .htc-canvas .htc-surface,
#familyMemberList#familyMemberList .htc-canvas .htc-surface svg.main_svg,
#familyMemberList#familyMemberList .htc-canvas .htc-surface #htmlSvg {
  touch-action: none !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
}
#familyMemberList#familyMemberList .htc-canvas .htc-surface { cursor: grab; }
#familyMemberList#familyMemberList .htc-canvas .htc-moving .htc-surface { cursor: grabbing; }
#familyMemberList#familyMemberList .htc-canvas .htc-surface svg.main_svg { overflow: visible !important; }
#familyMemberList#familyMemberList .htc-canvas .htc-surface svg.main_svg > rect { display: none; }

/* La cámara mueve dos capas con transform; nada se recalcula durante el gesto. */
#familyMemberList#familyMemberList .htc-canvas .htc-surface svg .view,
#familyMemberList#familyMemberList .htc-canvas .htc-surface #htmlSvg .cards_view {
  transform-origin: 0 0 !important;
  will-change: transform;
}
#familyMemberList#familyMemberList .htc-canvas .htc-moving .card-inner,
#familyMemberList#familyMemberList .htc-canvas .htc-moving .humanidad-f3-card {
  transition: none !important;
}
#familyMemberList#familyMemberList .htc-canvas .htc-moving .card:hover .card-inner { transform: none !important; }

/* Familias grandes: no se pintan las tarjetas que están muy lejos de la vista. */
#familyMemberList#familyMemberList .htc-canvas .htc-culling .card_cont.htc-off {
  visibility: hidden !important;
  content-visibility: hidden;
}

/* ───────────── Tarjetas legibles ───────────── */
/* Match the chart dimensions: space for independent portrait/add targets. */
#familyMemberList#familyMemberList .htc-canvas #HumanidadFamilyChart :is(.card,.humanidad-f3-card){
  width:176px!important;height:160px!important;box-sizing:border-box!important;
}
#familyMemberList#familyMemberList .htc-canvas #HumanidadFamilyChart .humanidad-f3-card{padding:8px!important}
#familyMemberList#familyMemberList .htc-canvas #HumanidadFamilyChart .humanidad-tree-quick-add{
  top:8px!important;right:8px!important;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;box-sizing:border-box!important;
}
#familyMemberList#familyMemberList .htc-canvas #HumanidadFamilyChart .humanidad-f3-avatar[role="button"]:focus-visible{outline:2px solid var(--htc-gold);outline-offset:3px}

#familyMemberList#familyMemberList .htc-canvas #HumanidadFamilyChart .humanidad-f3-card strong {
  font-size: 14px !important;
  line-height: 1.16 !important;
  max-width: 100% !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#familyMemberList#familyMemberList .htc-canvas #HumanidadFamilyChart .humanidad-f3-role { font-size: 11.5px !important; line-height: 1.2 !important; }
#familyMemberList#familyMemberList .htc-canvas #HumanidadFamilyChart .humanidad-f3-life { font-size: 11px !important; line-height: 1.2 !important; color: #a8a59c !important; }
#familyMemberList#familyMemberList .htc-canvas #HumanidadFamilyChart .humanidad-f3-avatar {
  width: 52px !important;
  height: 52px !important;
  flex-basis: 52px !important;
}

/* Nivel de detalle: al alejar, la tarjeta se simplifica para seguir siendo legible. */
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="compact"] .humanidad-f3-role,
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="compact"] .humanidad-f3-life,
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="compact"] .hpx-memorial-note,
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="compact"] .humanidad-f3-progress,
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="compact"] .mini-tree,
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="overview"] .humanidad-f3-role,
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="overview"] .humanidad-f3-life,
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="overview"] .hpx-memorial-note,
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="overview"] .humanidad-f3-progress,
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="overview"] .mini-tree,
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="overview"] .f3-quality-dot,
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="overview"] .ht-memory-light {
  display: none !important;
}
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="compact"] #HumanidadFamilyChart .humanidad-f3-card strong {
  font-size: 19px !important;
  line-height: 1.08 !important;
  margin-top: 4px !important;
}
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="compact"] #HumanidadFamilyChart .humanidad-f3-avatar {
  width: 42px !important;
  height: 42px !important;
  flex-basis: 42px !important;
}
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="compact"] #HumanidadFamilyChart .humanidad-f3-card {
  justify-content: center !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="overview"] #HumanidadFamilyChart .humanidad-f3-card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  justify-content: center !important;
}
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="overview"] #HumanidadFamilyChart .humanidad-f3-card.is-main {
  border-color: var(--htc-gold) !important;
  border-width: 3px !important;
}
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="overview"] #HumanidadFamilyChart .humanidad-f3-avatar {
  width: 84px !important;
  height: 84px !important;
  flex-basis: 84px !important;
  font-size: 30px !important;
}
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="overview"] #HumanidadFamilyChart .humanidad-f3-card strong {
  font-size: 30px !important;
  line-height: 1.05 !important;
  -webkit-line-clamp: 1;
  margin-top: 6px !important;
}
#familyMemberList#familyMemberList .htc-canvas .htc-viewport[data-htc-lod="overview"] #HumanidadFamilyChart .links_view .link {
  stroke-width: 3px !important;
}

/* ───────────── Dock de cámara ───────────── */
#familyMemberList#familyMemberList .htc-canvas .htc-dock {
  position: absolute;
  z-index: 20;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--htc-glass-line);
  border-radius: 999px;
  background: var(--htc-glass);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  touch-action: manipulation;
}
#familyMemberList#familyMemberList .htc-canvas .htc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--htc-ivory);
  font: 600 12px/1 Inter, system-ui, -apple-system, sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
#familyMemberList#familyMemberList .htc-canvas .htc-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--htc-gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#familyMemberList#familyMemberList .htc-canvas .htc-btn:hover { background: rgba(215, 183, 107, .1); border-color: var(--htc-gold-soft); }
#familyMemberList#familyMemberList .htc-canvas .htc-btn:focus-visible { outline: 2px solid var(--htc-gold); outline-offset: 2px; }
#familyMemberList#familyMemberList .htc-canvas .htc-btn:active { background: rgba(215, 183, 107, .18); }
#familyMemberList#familyMemberList .htc-canvas .htc-center { background: rgba(215, 183, 107, .12); border-color: var(--htc-gold-soft); }
#familyMemberList#familyMemberList .htc-canvas .htc-zoom-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, .08);
}
#familyMemberList#familyMemberList .htc-canvas .htc-zoom-group .htc-btn { min-width: 44px; padding: 0 8px; }
#familyMemberList#familyMemberList .htc-canvas .htc-zoom-label span { min-width: 34px; color: var(--htc-muted); font-variant-numeric: tabular-nums; font-size: 11px; }
#familyMemberList#familyMemberList .htc-canvas .htc-immersive-toggle { border-left: 1px solid rgba(255, 255, 255, .08); border-radius: 0 999px 999px 0; }
#familyMemberList#familyMemberList .htc-canvas .htc-immersive-toggle[aria-pressed="true"] { background: rgba(215, 183, 107, .16); }

/* ───────────── Navegador familiar plegable (pantallas estrechas) ───────────── */
#familyMemberList#familyMemberList .htc-canvas .htc-nav-toggle { display: none; }

/* ───────────── Pantalla amplia ───────────── */
html.htc-immersive-open,
html.htc-immersive-open body { overflow: hidden !important; overscroll-behavior: none; }
/* La barra de navegación de Humanidad se oculta mientras el árbol ocupa la pantalla completa
   (se recupera al salir). Así nunca tapa el lienzo ni el dock, aunque viva en otro contexto de apilamiento. */
html.htc-immersive-open .account-modal.open .social-sidebar {
  visibility: hidden !important;
  pointer-events: none !important;
}
.account-view[data-view="tree"].active #familyMemberList#familyMemberList > .humanidad-f3-shell.htc-canvas.htc-immersive {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10030 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left) !important;
  background: #04080d !important;
}
#familyMemberList#familyMemberList .htc-canvas.htc-immersive .htc-dock {
  bottom: calc(12px + env(safe-area-inset-bottom));
}

/* ───────────── Escritorio y tableta ───────────── */
#familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar{min-height:54px!important;max-height:none!important}
#familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar .f3-btn{min-height:44px!important;height:44px!important}

@media (min-width: 681px) {
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar .f3-nav-buttons { gap: 6px !important; }
}

/* ───────────── Móvil ───────────── */
@media (max-width: 680px) {
  /* Cabecera en una sola fila: el selector ya muestra el nombre de la familia y el total de personas. */
  html :is(#familyView, body) .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view .tree-social-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    grid-template-rows: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    gap: 8px !important;
  }
    html :is(#familyView, body) .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view .tree-social-head h2#familyTreeName {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    margin: -1px !important;
  }
  html :is(#familyView, body) .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view .tree-social-head > div:first-child { display: contents !important; }
  html :is(#familyView, body) .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view .tree-head-actions { flex: 1 1 auto !important; width: 100% !important; margin: 0 !important; }
  html :is(#familyView, body) .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view .tree-selector-wrap select { height: 38px !important; min-height: 38px !important; font-size: 13px !important; }

  .account-view[data-view="tree"].active #familyMemberList#familyMemberList > .humanidad-f3-shell.htc-canvas {
    margin: 6px 0 0 !important;
    border-radius: 18px !important;
  }

  /* Barra de filtros: una fila compacta. */
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar {
    flex: none !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 5px 8px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar::-webkit-scrollbar { display: none !important; }
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar .f3-nav-buttons {
    flex: none !important;
    width: max-content !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  /* «Mi familia» repite la acción de «Centrar» del dock: en móvil se libera ese espacio. */
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar .f3-nav-buttons > .f3-btn.primary { display: none !important; }
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar .f3-btn {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 11px !important;
    padding: 0 12px !important;
  }

  /* El navegador por familiares deja de robar altura: se abre como panel sobre el lienzo. */
  #familyMemberList#familyMemberList .htc-canvas .htc-nav-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }
  #familyMemberList#familyMemberList .htc-canvas .htc-nav-toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
  }
  #familyMemberList#familyMemberList .htc-canvas .htc-nav-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
  #familyMemberList#familyMemberList .htc-canvas > .hpx-navigator {
    position: absolute !important;
    z-index: 25 !important;
    top: calc(var(--htc-toolbar-h, 44px) + 6px) !important;
    left: 8px !important;
    right: 8px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid var(--htc-glass-line) !important;
    border-radius: 16px !important;
    background: var(--htc-glass) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .45) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  #familyMemberList#familyMemberList .htc-canvas:not(.htc-nav-open) > .hpx-navigator { display: none !important; }

  /* Dock centrado al alcance del pulgar. */
  #familyMemberList#familyMemberList .htc-canvas .htc-dock {
    left: 50%;
    right: auto;
    bottom: 10px;
    transform: translateX(-50%);
    gap: 3px;
    max-width: calc(100% - 16px);
  }
  #familyMemberList#familyMemberList .htc-canvas .htc-btn { height: 44px; min-width: 44px; padding: 0 11px; font-size: 12px; }
  #familyMemberList#familyMemberList .htc-canvas .htc-zoom-label { display: none; }
  #familyMemberList#familyMemberList .htc-canvas .htc-overview span{display:none}
  #familyMemberList#familyMemberList .htc-canvas .htc-zoom-group .htc-btn { min-width: 44px; padding: 0 6px; }
}

/* ───────────── Selector de árbol en dos líneas ─────────────
   «Familia Torres–Rotela» / «Árbol principal · 36 personas». El <select> nativo queda encima,
   invisible, para conservar el selector del sistema, el teclado y los lectores de pantalla. */
.htc-tree-label { display: none; }
@media (max-width: 680px) {
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }
  /* !important: capas heredadas ocultan todos los <span> dentro de .tree-selector-wrap. */
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select .htc-tree-label {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 7px 40px 7px 14px;
    border: 1px solid rgba(215, 183, 107, .18);
    border-radius: 14px;
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    background: rgba(19, 34, 56, .55);
    -webkit-tap-highlight-color: transparent;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: border-color .2s ease, background .2s ease;
  }
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select .htc-tree-label::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 1.6px solid #d9b36a;
    border-bottom: 1.6px solid #d9b36a;
    transform: rotate(45deg);
  }
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select .htc-tree-label.is-single::after { display: none; }
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select .htc-tree-family,
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select .htc-tree-detail {
    display: block !important;
    min-width: 0;
    text-transform: none !important;
  }
  .htc-tree-family {
    overflow: hidden;
    color: #f5f1e8;
    font: 600 15px/1.2 Inter, system-ui, -apple-system, sans-serif;
    letter-spacing: .005em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .htc-tree-detail {
    overflow: hidden;
    color: #c8d2e3;
    font: 500 12px/1.25 Inter, system-ui, -apple-system, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select select#familyTreeSelector {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    z-index: 1 !important;
    /* En móvil el toque lo recibe el botón de dos líneas (abre la lista propia); el select sigue
       siendo enfocable con teclado y es la fuente de verdad del árbol activo. */
    pointer-events: none !important;
    font-size: 16px !important; /* evita el zoom automático de iOS al abrir el selector */
    cursor: pointer;
  }
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select .htc-tree-label:disabled { cursor: default; }
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select .htc-tree-label:focus-visible { outline: 2px solid #d9b36a; outline-offset: 2px; }
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select .htc-tree-label:active:not(:disabled) { background: rgba(19, 34, 56, .85); }
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select:focus-within .htc-tree-label {
    border-color: #d9b36a;
    background: rgba(19, 34, 56, .8);
  }
}

/* ───────────── Móvil: lienzo de borde a borde ─────────────
   Como las demás secciones (Perfil, Historias), el árbol deja de ser una tarjeta con márgenes:
   ocupa todo el ancho y llega hasta el borde inferior por detrás de la barra flotante de
   Humanidad. El dock y el área útil de la cámara quedan siempre por encima de esa barra. */
@media (max-width: 680px) {
  .account-view[data-view="tree"].active #familyMemberList#familyMemberList > .humanidad-f3-shell.htc-canvas.htc-fullbleed:not(.htc-immersive) {
    position: fixed !important;
    top: var(--htc-stage-top, 64px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 3 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  /* El hueco en el flujo lo ocupa el contenedor, para que la página no salte ni desborde. */
  .account-view[data-view="tree"].active #familyMemberList#familyMemberList.htc-host {
    min-height: 0 !important;
    padding: 0 !important;
    background: none !important;
  }
  .account-view[data-view="tree"].active #familyMemberList#familyMemberList.htc-host::before { display: none !important; }
  #familyMemberList#familyMemberList .htc-canvas.htc-fullbleed > .humanidad-f3-stage.htc-viewport {
    border: 0 !important;
    border-radius: 0 !important;
  }
  #familyMemberList#familyMemberList .htc-canvas.htc-fullbleed .humanidad-f3-toolbar {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 4px 12px !important;
    background: linear-gradient(180deg, rgba(4, 8, 13, .92), rgba(4, 8, 13, .55)) !important;
    border-bottom: 1px solid rgba(215, 183, 107, .08) !important;
  }
  #familyMemberList#familyMemberList .htc-canvas.htc-fullbleed .htc-dock {
    bottom: calc(var(--htc-clearance, 92px) + 8px);
  }
  /* Cabecera sin caja: el selector flota sobre el mismo fondo, como en Perfil. */
  html :is(#familyView, body) .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view .tree-social-head {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 2px !important;
  }
}

@media (max-width: 370px) {
  #familyMemberList#familyMemberList .htc-canvas .htc-btn { padding: 0 9px; }
  #familyMemberList#familyMemberList .htc-canvas .htc-overview span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #familyMemberList#familyMemberList .htc-canvas .htc-btn,
  #familyMemberList#familyMemberList .htc-canvas .htc-nav-toggle::after { transition: none; }
}

/* ───────────── Lista de árboles (hoja inferior) ─────────────
   Reemplaza la rueda nativa de iOS, que mostraba los nombres crudos y largos. */
.htc-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 8, 15, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: htcSheetFade .2s ease;
}
.htc-sheet {
  width: min(520px, 100%);
  max-height: min(70dvh, 560px);
  overflow: auto;
  padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
  border: 1px solid rgba(217, 179, 106, .18);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: #0a1830;
  box-shadow: 0 -24px 60px rgba(0, 0, 0, .5);
  color: #f5f1e8;
  animation: htcSheetRise .24s cubic-bezier(.2, .8, .2, 1);
}
.htc-sheet-grip { display: block; width: 38px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: rgba(200, 210, 227, .28); }
.htc-sheet h3 { margin: 0 6px 10px; font: 600 13px/1.2 Inter, system-ui, -apple-system, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #c8d2e3; }
.htc-sheet-list { display: grid; gap: 8px; }
.htc-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 10px 14px;
  border: 1px solid rgba(200, 210, 227, .12);
  border-radius: 16px;
  background: #132238;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.htc-sheet-item:active, .htc-sheet-item:hover { background: #172a45; }
.htc-sheet-item:focus-visible { outline: 2px solid #d9b36a; outline-offset: 2px; }
.htc-sheet-item[aria-selected="true"] { border-color: rgba(217, 179, 106, .55); }
.htc-sheet-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.htc-sheet-family { overflow: hidden; font: 600 15px/1.25 Inter, system-ui, -apple-system, sans-serif; color: #f5f1e8; text-overflow: ellipsis; white-space: nowrap; }
.htc-sheet-detail { overflow: hidden; font: 500 12.5px/1.3 Inter, system-ui, -apple-system, sans-serif; color: #c8d2e3; text-overflow: ellipsis; white-space: nowrap; }
.htc-sheet-item.is-backup .htc-sheet-family { color: #c8d2e3; }
.htc-sheet-check { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(200, 210, 227, .3); }
.htc-sheet-item[aria-selected="true"] .htc-sheet-check { border-color: #d9b36a; background: radial-gradient(circle, #d9b36a 0 5px, transparent 5.5px); }
@keyframes htcSheetFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes htcSheetRise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .htc-sheet-backdrop, .htc-sheet { animation: none; } .htc-sheet-item { transition: none; } }


/* PR #192 mobile family header v2: one navy surface, segmented filters; UI only. */
@media (max-width: 680px) {
  html :is(#familyView, body) .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view .tree-social-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 12px 4px !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #0b1728 !important;
    box-shadow: none !important;
  }
  html :is(#familyView, body) .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view .tree-head-actions {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    align-items: stretch !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  html :is(#familyView, body) .account-view[data-view="tree"].active.htc-tree-view.htc-tree-view .tree-selector-wrap.htc-tree-select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
  }
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select .htc-tree-label {
    width: 100% !important;
    min-height: 56px !important;
    padding: 8px 36px 8px 8px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
  }
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select .htc-tree-family {
    color: #f5f1e8 !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    max-height: 2.5em;
  }
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select .htc-tree-detail {
    color: #bbc7d8 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  #familyMemberList#familyMemberList .htc-canvas.htc-fullbleed .humanidad-f3-toolbar.f3-toolbar-v1 {
    min-height: 64px !important;
    max-height: none !important;
    padding: 4px 12px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(217,179,106,.15) !important;
    border-radius: 0 !important;
    background: #0b1728 !important;
    box-shadow: none !important;
    gap: 6px !important;
  }
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar .f3-nav-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar .hpx-side-group:not([hidden]) {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 3px !important;
    border: 1px solid rgba(217,179,106,.18) !important;
    border-radius: 12px !important;
    background: rgba(3,10,19,.32) !important;
    box-shadow: none !important;
  }
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar .hpx-side-group:not([hidden]) > .hpx-side-btn {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #b9c6d7 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar .hpx-side-group:not([hidden]) > .hpx-side-btn[aria-pressed="true"] {
    background: #d9b36a !important;
    color: #07111f !important;
  }
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar .htc-nav-toggle {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 7px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #d9b36a !important;
    box-shadow: none !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar .htc-nav-toggle[aria-expanded="true"] {
    background: rgba(217,179,106,.12) !important;
  }
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar .htc-nav-toggle:focus-visible,
  html :is(#familyView, body) .account-view.htc-tree-view .tree-selector-wrap.htc-tree-select .htc-tree-label:focus-visible {
    outline: 2px solid #d9b36a !important;
    outline-offset: -2px !important;
  }
}
@media (max-width: 350px) {
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar .hpx-side-group:not([hidden]) > .hpx-side-btn {
    padding-inline: 8px !important;
    font-size: 11px !important;
  }
  #familyMemberList#familyMemberList .htc-canvas .humanidad-f3-toolbar .htc-nav-toggle {
    padding-inline: 5px !important;
    font-size: 11px !important;
  }
}

/* Hasta el primer encuadre con medidas reales no se muestra el árbol: evita ver un punto diminuto
   que luego salta (el árbol se dibuja también mientras su vista está oculta). */
#familyMemberList .htc-viewport.htc-unframed #htmlSvg,
#familyMemberList .htc-viewport.htc-unframed svg.main_svg { visibility: hidden !important; }