/* Árbol familiar · panel */
:root {
  --fondo: #f6f3ee;
  --caja: #ffffff;
  --texto: #2a2622;
  --suave: #7a7168;
  --borde: #e4ddd3;
  --acento: #3f6b4f;
  --acento-txt: #ffffff;
  --acento-suave: #e3ede6;
  --peligro: #b3412f;
  --hombre: #4e7ba6;
  --mujer: #b25b7d;
  --linea: #b9ae9f;
  --ok-fondo: #e4f1e6;
  --err-fondo: #f8e3df;
  --sombra: 0 1px 2px rgba(60, 45, 30, .06), 0 4px 14px rgba(60, 45, 30, .06);
  --radio: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #171513;
    --caja: #221f1c;
    --texto: #ece6de;
    --suave: #a49a8f;
    --borde: #39342e;
    --acento: #7fb592;
    --acento-txt: #10140f;
    --acento-suave: #26332a;
    --peligro: #e07a66;
    --hombre: #7fa8d1;
    --mujer: #d98aa9;
    --linea: #5a5249;
    --ok-fondo: #213025;
    --err-fondo: #3a2420;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 "Outfit", system-ui, sans-serif; background: var(--fondo); color: var(--texto); }
a { color: var(--acento); }
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 600; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; margin-bottom: .75rem; }
h3.sub { font-size: .9rem; color: var(--suave); font-weight: 500; margin: 1rem 0 .4rem; }
.muted { color: var(--suave); font-size: .92rem; }
.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Barra superior */
.appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; padding-top: max(.6rem, env(safe-area-inset-top));
  background: var(--caja); border-bottom: 1px solid var(--borde); }
.marca { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--texto); text-decoration: none; }
.marca .i { color: var(--acento); width: 1.6em; height: 1.6em; }
.marca.grande { justify-content: center; margin: 0 0 1.6rem; }
.marca.grande .logo-img { width: 100%; max-width: 300px; height: auto; }
.marca-icono { width: 2rem; height: 2rem; }
.marca.grande .i { width: 2em; height: 2em; }
.nav { display: flex; gap: .25rem; margin-left: auto; }
.nav a { display: flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; color: var(--suave); text-decoration: none; font-weight: 500; }
.nav a.on, .nav a:hover { background: var(--acento-suave); color: var(--acento); }
.menu-usuario { position: relative; }
.menu-usuario summary { list-style: none; cursor: pointer; }
.menu-usuario summary::-webkit-details-marker { display: none; }
.ini { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--acento); color: var(--acento-txt); font-weight: 600; }
.menu-pop { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 220px; background: var(--caja); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: .5rem; display: grid; gap: .1rem; }
.menu-pop b { padding: .4rem .6rem; }
.menu-pop a { display: flex; gap: .5rem; align-items: center; padding: .5rem .6rem; border-radius: 8px; color: var(--texto); text-decoration: none; }
.menu-pop a:hover { background: var(--fondo); }
@media (max-width: 560px) {
  .marca span { display: none; }
  .nav { margin-left: 0; flex: 1; }
  .nav a { flex: 1; justify-content: center; }
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
.cabecera { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.cabecera h1 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.caja { background: var(--caja); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem; box-shadow: var(--sombra); }
.estrecha { max-width: 420px; }
.flash { padding: .7rem 1rem; border-radius: 10px; margin-bottom: 1rem; background: var(--ok-fondo); }
.flash.err { background: var(--err-fondo); color: var(--peligro); }
.vacio { text-align: center; padding: 2.5rem 1rem; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1rem; border-radius: 10px; border: 1px solid var(--borde);
  background: var(--caja); color: var(--texto); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--suave); }
.btn.primario { background: var(--acento); border-color: var(--acento); color: var(--acento-txt); }
.btn.primario:hover { filter: brightness(1.08); }
.btn.peligro { color: var(--peligro); }
.btn.sutil { border-color: transparent; background: transparent; color: var(--suave); }
.btn.sutil:hover { color: var(--peligro); }
.btn.icono { padding: .45rem; min-width: 2.3rem; }
.btn.ancho { width: 100%; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Formularios */
.form { display: grid; gap: .9rem; }
label { display: grid; gap: .3rem; font-size: .9rem; color: var(--suave); }
input, select, textarea { font: inherit; color: var(--texto); background: var(--fondo); border: 1px solid var(--borde); border-radius: 9px; padding: .55rem .7rem; width: 100%; min-width: 0; }
textarea { resize: vertical; }
label.check { display: flex; align-items: center; gap: .45rem; color: var(--texto); font-size: .95rem; }
label.check input { width: auto; accent-color: var(--acento); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: .9rem; color: var(--suave); padding: 0; margin-bottom: .3rem; }
.fila3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (max-width: 640px) { .fila3 { grid-template-columns: 1fr; } }
.fecha-campos { display: grid; grid-template-columns: 4.2rem 1fr 5.2rem auto; gap: .4rem; align-items: center; }
.bloque-fecha { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: .6rem; align-items: end; }
@media (max-width: 720px) { .bloque-fecha { grid-template-columns: 1fr; } }
.segmentos { display: flex; flex-wrap: wrap; gap: .4rem; }
.segmentos legend { width: 100%; }
.segmentos label { display: block; }
.segmentos input { position: absolute; opacity: 0; width: 1px; }
.segmentos span { display: block; padding: .4rem .85rem; border: 1px solid var(--borde); border-radius: 999px; color: var(--texto); cursor: pointer; }
.segmentos input:checked + span { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); }
.segmentos input:focus-visible + span { outline: 2px solid var(--acento); }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.buscador { position: relative; margin-bottom: 1rem; }
.buscador .i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--suave); }
.buscador input { padding-left: 2.4rem; background: var(--caja); }

/* Acceso */
body.acceso { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.acceso-caja { width: 100%; max-width: 360px; }
.acceso-caja .form { background: var(--caja); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.4rem; box-shadow: var(--sombra); }

/* Avatares y tarjetas */
.avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; flex: none; background: var(--fondo); }
.sin-foto { display: grid; place-items: center; font-weight: 600; font-size: .95rem; color: var(--suave); background: var(--fondo); border: 1px solid var(--borde); }
.sin-foto.h { color: var(--hombre); }
.sin-foto.m { color: var(--mujer); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .6rem; }
.tarjeta { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; background: var(--caja); border: 1px solid var(--borde); border-radius: var(--radio);
  text-decoration: none; color: var(--texto); min-width: 0; flex: 1; }
.tarjeta:hover { border-color: var(--acento); }
.t-txt { display: grid; min-width: 0; }
.t-txt b { font-weight: 500; overflow-wrap: anywhere; }
.t-txt small { color: var(--suave); font-size: .85rem; }

/* Ficha */
.ficha { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .ficha { grid-template-columns: 1fr; } }
.relaciones { display: grid; gap: 1rem; }
.foto-campo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.foto-campo > div { display: flex; gap: .4rem; flex-wrap: wrap; }
.foto-grande { width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; font-size: 2rem; }
.lista-rel { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .45rem; }
.lista-rel li { display: flex; align-items: center; gap: .25rem; }
.en-linea { display: inline; margin: 0; }
details.anadir > summary { list-style: none; }
details.anadir > summary::-webkit-details-marker { display: none; }
details.anadir[open] > summary { margin-bottom: .75rem; background: var(--fondo); }
details.anadir .form { padding: .9rem; border: 1px dashed var(--borde); border-radius: var(--radio); }
.pareja-cab { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pareja-cab .tarjeta { min-width: 200px; }
.anillos .i { width: 1.8em; height: 1.8em; color: var(--acento); }

/* Selector de persona */
.selector { position: relative; display: grid; gap: .6rem; }
.sel-lista { position: absolute; z-index: 10; top: 2.8rem; left: 0; right: 0; margin: 0; padding: .3rem; list-style: none; background: var(--caja); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); max-height: 320px; overflow: auto; }
.sel-lista li { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 8px; cursor: pointer; }
.sel-lista li[aria-selected="true"], .sel-lista li:hover { background: var(--acento-suave); }
.sel-lista .avatar { width: 2.2rem; height: 2.2rem; font-size: .8rem; }
.sel-lista small { display: block; color: var(--suave); }
.sel-lista li.nueva { color: var(--acento); font-weight: 500; }
.sel-elegida { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border: 1px solid var(--acento); border-radius: 9px; background: var(--acento-suave); }
.sel-elegida b { flex: 1; font-weight: 500; }

/* Vista del árbol */
.arbol-barra { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-bottom: .5rem; padding: .75rem; }
.arbol-barra .selector { flex: 1 1 240px; }
.arbol-barra label { grid-auto-flow: column; align-items: center; gap: .4rem; }
.arbol-barra select { width: auto; }
.zoom { display: flex; gap: .25rem; }
.ayuda { margin: .25rem 0 .75rem; }
.lienzo { overflow: auto; background: var(--caja); border: 1px solid var(--borde); border-radius: var(--radio); min-height: 60vh; max-height: calc(100vh - 230px);
  cursor: grab; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.lienzo.arrastrando { cursor: grabbing; user-select: none; }
.arbol { display: flex; flex-direction: column; align-items: center; width: max-content; min-width: 100%; padding: 2rem; zoom: var(--zoom, 1); }

.tree, .tree ul { margin: 0; padding: 0; display: flex; justify-content: center; }
.tree ul { position: relative; padding-top: 22px; }
.tree li { list-style: none; position: relative; padding: 22px 5px 0; display: flex; flex-direction: column; align-items: center; }
.tree > li { padding-top: 0; }
.tree li::before, .tree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 2px solid var(--linea); }
.tree li::after { right: auto; left: 50%; border-left: 2px solid var(--linea); }
.tree li:only-child::before, .tree li:only-child::after, .tree > li::before, .tree > li::after { display: none; }
.tree li:only-child { padding-top: 0; }
.tree li:first-child::before, .tree li:last-child::after { border: 0; }
.tree li:last-child::before { border-right: 2px solid var(--linea); border-radius: 0 8px 0 0; }
.tree li:first-child::after { border-radius: 8px 0 0 0; }
.tree ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 2px solid var(--linea); }
/* Antepasados: se dibuja el mismo árbol volteado, y se vuelven a voltear las tarjetas */
.tree.anc { transform: scaleY(-1); }
.tree.anc .nodo-wrap { transform: scaleY(-1); }
.tree.desc { margin-top: 0; }
.tree.desc > li.raiz { padding: 0; }

.nodo { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 132px; padding: .6rem .4rem .55rem; background: var(--caja); border: 2px solid var(--borde);
  border-radius: 14px; color: var(--texto); text-decoration: none; text-align: center; position: relative; transition: border-color .15s, box-shadow .15s; }
.nodo:hover { border-color: var(--acento); box-shadow: var(--sombra); }
.nodo.h { border-top-color: var(--hombre); }
.nodo.m { border-top-color: var(--mujer); }
.nodo .avatar { width: 3.4rem; height: 3.4rem; }
.n-nom { font-size: .85rem; line-height: 1.25; font-weight: 500; overflow-wrap: anywhere; }
.n-vida { font-size: .75rem; color: var(--suave); }
.nodo.fallecido .avatar { filter: grayscale(.85); }
.nodo.fallecido .n-vida::before { content: "† "; }
.nodo.foco { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); width: 150px; }
.nodo.politico { border-style: dashed; }
.nodo.desconocido { color: var(--suave); border-style: dashed; justify-content: center; min-height: 4.5rem; }
.fila-pareja.mas-arriba { position: relative; }
.tree.anc .fila-pareja.mas-arriba::after { content: "▼"; position: absolute; left: 50%; bottom: -1.1rem; transform: translateX(-50%); font-size: .65rem; color: var(--linea); }
.mas-abajo { color: var(--suave); line-height: 1; }
.fila-pareja { display: flex; align-items: center; }
.enlace-pareja { width: 14px; border-top: 2px dashed var(--linea); }
.union-etq { font-size: .75rem; color: var(--suave); background: var(--caja); padding: 0 .3rem; margin-bottom: .25rem; white-space: nowrap; }
.tree li.grupo > .union-etq { position: relative; z-index: 1; }

/* Página pública */
.wrap.ancho { max-width: none; }
.acceso-enlace { margin-left: auto; color: var(--suave); text-decoration: none; font-size: .9rem; padding: .4rem .7rem; border-radius: 999px; }
.acceso-enlace:hover { background: var(--fondo); color: var(--texto); }
body.publico .marca span { display: inline; }
body.publico .lienzo { max-height: calc(100vh - 190px); }
.nodo.detalle { width: 172px; gap: .2rem; padding: .7rem .55rem; }
.nodo.detalle.foco { width: 190px; }
.nodo.detalle .n-nom { font-size: .9rem; margin-bottom: .15rem; }
.n-dato { font-size: .74rem; line-height: 1.3; color: var(--suave); }
.n-dato abbr { text-decoration: none; font-weight: 600; color: var(--texto); }
.nodo.detalle.fallecido .n-dato:last-child { color: var(--suave); }
/* Hermanos */
.tree li.hermano > .fila-pareja > .nodo:first-child, .tree li.medio > .fila-pareja > .nodo:first-child { opacity: .92; }
.papel { font-size: .7rem; color: var(--suave); margin-bottom: .2rem; white-space: nowrap; }
.tree.desc > li.raiz-sola { padding: 0; }

/* Árbol del panel: añadir familiares */
.foco-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: .5rem; padding: .7rem .9rem; }
.foco-quien { display: flex; align-items: center; gap: .6rem; color: var(--texto); text-decoration: none; flex: 1 1 220px; min-width: 0; }
.foco-quien span { display: grid; min-width: 0; }
.foco-quien small { color: var(--suave); font-size: .8rem; }
.foco-quien b { font-weight: 600; overflow-wrap: anywhere; }
.foco-botones { display: flex; flex-wrap: wrap; gap: .4rem; }
.dialogo { width: min(520px, calc(100vw - 2rem)); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--caja); color: var(--texto);
  padding: 1.1rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); overflow: visible; }
.dialogo::backdrop { background: rgba(20, 15, 10, .45); }
.dlg-cab { display: flex; align-items: start; gap: .5rem; margin-bottom: .75rem; }
.dlg-cab h2 { flex: 1; margin: 0; font-size: 1.05rem; }
@media (max-width: 560px) { .foco-botones { width: 100%; } .foco-botones .btn { flex: 1 1 45%; } }

/* Ajustes de la página pública */
.ajustes { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ajustes .ancho-total { grid-column: 1 / -1; }
@media (max-width: 860px) { .ajustes { grid-template-columns: 1fr; } }
.rango { display: flex; align-items: center; gap: .5rem; }
.rango input { padding: 0; accent-color: var(--acento); }
.rango output { min-width: 3ch; color: var(--texto); }
.logo-actual { min-height: 64px; display: flex; align-items: center; padding: .75rem; border-radius: 10px;
  background: repeating-conic-gradient(var(--fondo) 0 25%, var(--caja) 0 50%) 0 0 / 16px 16px; }
.logo-actual img { max-height: 80px; max-width: 100%; }
.fondos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
.fondos li { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--fondo); }
.fondos li.inactivo img { opacity: .35; }
.fondos img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fondo-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .5rem; }
.fondo-ctl select { width: auto; flex: 1; padding: .35rem .5rem; }
.fondo-btns { display: flex; margin-left: auto; }
.btn:disabled { opacity: .35; cursor: default; }

/* Alta de un familiar con la relación ya puesta */
.caja-rel { display: grid; gap: .7rem; padding: .9rem 1rem 1rem; border: 1px solid var(--acento); border-radius: var(--radio); background: var(--acento-suave); }
.caja-rel > legend { display: flex; align-items: center; gap: .4rem; padding: 0 .4rem; color: var(--acento); font-weight: 600; font-size: .95rem; margin: 0; }
.caja-rel .flash { margin: 0; }
.ya-existe h2 { font-size: 1rem; }

/* Tarjetas del árbol con botones «+» (panel) */
.nodo-wrap { position: relative; display: flex; }
.mas-btn { position: absolute; z-index: 3; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--acento); color: var(--acento-txt); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); text-decoration: none;
  opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .15s, transform .15s; }
.mas-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.mb-arriba { top: -13px; left: 50%; margin-left: -13px; }
.mb-abajo { bottom: -13px; left: 50%; margin-left: -13px; }
.mb-izq { left: -13px; top: 50%; margin-top: -13px; }
.mb-der { right: -13px; top: 50%; margin-top: -13px; }
.nodo-wrap:hover, .nodo-wrap:focus-within { z-index: 4; }
.nodo-wrap:hover .mas-btn, .nodo-wrap:focus-within .mas-btn { opacity: 1; transform: scale(1); pointer-events: auto; }
.mas-btn:hover, .mas-btn:focus-visible { filter: brightness(1.12); transform: scale(1.12) !important; }
/* Etiqueta al pasar por encima del botón */
.mas-btn::after { content: attr(data-txt); position: absolute; white-space: nowrap; font-size: .72rem; font-weight: 500; padding: .15rem .5rem; border-radius: 999px;
  background: var(--texto); color: var(--caja); opacity: 0; pointer-events: none; transition: opacity .12s; }
.mas-btn:hover::after, .mas-btn:focus-visible::after { opacity: 1; }
.mb-arriba::after { bottom: calc(100% + 4px); }
.mb-abajo::after { top: calc(100% + 4px); }
.mb-izq::after { right: calc(100% + 4px); }
.mb-der::after { left: calc(100% + 4px); }
/* Pantallas táctiles: siempre visibles en la persona central */
@media (hover: none) { .foco-wrap .mas-btn { opacity: 1; transform: scale(1); pointer-events: auto; } }