/* ==========================================================================
   MiOrigo — hoja de estilos única

   MARCA: luminosa. Fondo casi blanco con un velo frío, tarjetas blancas
   flotando sobre él y un turquesa vivo como acento. El sexo se lee por color
   (azul / rosa, como en las aplicaciones de genealogía al uso) y la LÍNEA
   DIRECTA del usuario se tiñe para distinguir la sangre propia de las ramas
   políticas de un vistazo.

   Todo lo interactivo responde: elevación al pasar el ratón, transiciones
   cortas y entrada animada de los nodos.
   ========================================================================== */

:root {
    /* Superficies */
    --fondo:        #f4f7fa;
    --fondo-2:      #eaeff5;
    --papel:        #ffffff;
    --papel-2:      #f8fafc;

    /* Texto */
    --tinta:        #17222e;
    --tinta-suave:  #56677c;
    --tinta-tenue:  #8b9bb0;

    /* Acento de marca */
    --acento:       #0eA5a4;
    --acento-vivo:  #14c8c4;
    --acento-hondo: #0b7f7e;
    --acento-velo:  #dcfbf8;

    /* Secundario cálido */
    --ambar:        #f59e0b;
    --ambar-velo:   #fef3c7;

    /* Sexos */
    --varon:        #3b82f6;
    --varon-velo:   #e8f1ff;
    --mujer:        #ec4899;
    --mujer-velo:   #fdeaf4;
    --neutro:       #94a3b8;
    --neutro-velo:  #eef2f7;

    --borde:        #dde5ee;
    --borde-fuerte: #c3d0e0;
    --rojo:         #e11d48;
    --rojo-velo:    #ffe4e9;

    --sombra-1: 0 1px 2px rgba(23, 34, 46, .05), 0 2px 6px rgba(23, 34, 46, .05);
    --sombra-2: 0 4px 10px rgba(23, 34, 46, .08), 0 12px 28px rgba(23, 34, 46, .09);
    --sombra-3: 0 10px 24px rgba(23, 34, 46, .12), 0 24px 56px rgba(23, 34, 46, .12);
    --sombra-acento: 0 6px 18px rgba(14, 165, 164, .28);

    --radio:    14px;
    --radio-s:  9px;

    --fuente: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --fuente-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --curva: cubic-bezier(.22, 1, .36, 1);
}

:root[data-tema="oscuro"] {
    --fondo:        #0f1720;
    --fondo-2:      #131c27;
    --papel:        #18222e;
    --papel-2:      #1e2937;
    --tinta:        #e9eef4;
    --tinta-suave:  #a3b2c4;
    --tinta-tenue:  #71829a;
    --acento-velo:  #0d3b3a;
    --varon-velo:   #14263f;
    --mujer-velo:   #35162a;
    --neutro-velo:  #212c3a;
    --ambar-velo:   #3a2f10;
    --borde:        #2a3846;
    --borde-fuerte: #3b4c5e;
    --rojo-velo:    #3a1520;
    --sombra-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.25);
    --sombra-2: 0 4px 10px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.35);
    --sombra-3: 0 10px 24px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--fuente-ui);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--fuente); font-weight: 600; line-height: 1.22; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: 2.5rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.22rem; }

a { color: var(--acento-hondo); text-decoration: none; }
a:hover { text-decoration: underline; }

.contenedor { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.contenedor-estrecho { max-width: 620px; margin: 0 auto; padding: 0 24px; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.cabecera {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 20px;
    padding: 12px 24px;
    background: color-mix(in srgb, var(--papel) 82%, transparent);
    backdrop-filter: saturate(1.8) blur(14px);
    border-bottom: 1px solid var(--borde);
}

.marca {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--fuente); font-size: 1.28rem; font-weight: 600;
    color: var(--tinta); letter-spacing: -.02em;
}
.marca:hover { text-decoration: none; }
.marca svg { width: 27px; height: 27px; color: var(--acento); transition: transform .4s var(--curva); }
.marca:hover svg { transform: rotate(-8deg) scale(1.08); }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
    padding: 7px 14px; border-radius: 20px;
    color: var(--tinta-suave); font-size: .93rem; font-weight: 500;
    transition: background .18s var(--curva), color .18s var(--curva);
}
.nav a:hover { background: var(--fondo-2); color: var(--tinta); text-decoration: none; }
.nav a.activo { color: var(--acento-hondo); background: var(--acento-velo); }

/* ── Botones ──────────────────────────────────────────────────────────── */

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px; border: 1px solid transparent; border-radius: 24px;
    font-family: var(--fuente-ui); font-size: .95rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
    background: var(--acento); color: #fff;
    transition: transform .16s var(--curva), background .18s, box-shadow .22s var(--curva);
}
.boton:hover {
    background: var(--acento-vivo); text-decoration: none;
    transform: translateY(-2px); box-shadow: var(--sombra-acento);
}
.boton:active { transform: translateY(0) scale(.98); }
.boton.secundario { background: var(--papel); color: var(--tinta); border-color: var(--borde-fuerte); }
.boton.secundario:hover { background: var(--papel-2); border-color: var(--acento); color: var(--acento-hondo); box-shadow: var(--sombra-2); }
.boton.peligro { background: var(--rojo); }
.boton.pequeno { padding: 7px 15px; font-size: .86rem; }
.boton:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Formularios ──────────────────────────────────────────────────────── */

.campo { margin-bottom: 17px; }
.campo label { display: block; margin-bottom: 6px; font-size: .87rem; font-weight: 600; color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea {
    width: 100%; padding: 11px 14px;
    background: var(--papel); color: var(--tinta);
    border: 1px solid var(--borde-fuerte); border-radius: var(--radio-s);
    font-family: var(--fuente-ui); font-size: .97rem;
    transition: border-color .16s, box-shadow .16s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--acento);
    box-shadow: 0 0 0 4px var(--acento-velo);
}
.campo .ayuda { margin-top: 5px; font-size: .82rem; color: var(--tinta-tenue); }
.campos-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Avisos ───────────────────────────────────────────────────────────── */

.aviso {
    padding: 13px 17px; margin-bottom: 20px;
    border-radius: var(--radio-s); border-left: 3px solid var(--acento);
    background: var(--acento-velo); color: var(--tinta); font-size: .93rem;
}
.aviso.error { border-left-color: var(--rojo); background: var(--rojo-velo); }

/* ── Tarjetas ─────────────────────────────────────────────────────────── */

.tarjeta {
    padding: 24px; background: var(--papel);
    border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra-1);
    transition: box-shadow .25s var(--curva), transform .25s var(--curva);
}
.tarjeta:hover { box-shadow: var(--sombra-2); }

.panel-acceso {
    max-width: 440px; margin: 60px auto;
    padding: 36px; background: var(--papel);
    border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra-3);
    animation: subir .5s var(--curva) both;
}
.panel-acceso h1 { font-size: 1.7rem; margin-bottom: 6px; }
.panel-acceso .sub { color: var(--tinta-suave); margin-bottom: 26px; font-size: .95rem; }

@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Landing ──────────────────────────────────────────────────────────── */

.heroe {
    position: relative; padding: 90px 0 66px; text-align: center; overflow: hidden;
}
.heroe::before {
    content: ""; position: absolute; inset: -40% 20% auto; height: 460px;
    background: radial-gradient(ellipse at center, var(--acento-velo), transparent 65%);
    opacity: .8; pointer-events: none;
}
.heroe > * { position: relative; }
.heroe h1 { font-size: 3.5rem; margin-bottom: 18px; }
.heroe h1 em { font-style: normal; color: var(--acento-hondo); }
.heroe .entradilla {
    max-width: 630px; margin: 0 auto 34px;
    font-size: 1.18rem; color: var(--tinta-suave); line-height: 1.65;
}
.heroe .acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.franja-datos {
    display: flex; justify-content: center; gap: 52px; flex-wrap: wrap;
    padding: 30px 0; margin: 44px 0;
    border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
}
.dato { text-align: center; }
.dato .cifra { font-family: var(--fuente); font-size: 2.05rem; font-weight: 600; color: var(--acento-hondo); }
.dato .etiqueta { font-size: .82rem; color: var(--tinta-tenue); text-transform: uppercase; letter-spacing: .07em; }

.rejilla-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 24px; margin: 50px 0; }
.caracteristica {
    padding: 28px; border: 1px solid var(--borde); border-radius: var(--radio);
    background: var(--papel); box-shadow: var(--sombra-1);
    transition: transform .28s var(--curva), box-shadow .28s var(--curva);
}
.caracteristica:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.caracteristica .icono {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-bottom: 15px;
    border-radius: 12px; background: var(--acento-velo); color: var(--acento-hondo);
}
.caracteristica h3 { margin-bottom: 6px; }
.caracteristica p { margin: 0; color: var(--tinta-suave); font-size: .94rem; }

.pie {
    margin-top: 76px; padding: 34px 0;
    border-top: 1px solid var(--borde);
    color: var(--tinta-tenue); font-size: .88rem;
}
.pie .contenedor { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.pie a { color: var(--tinta-suave); }

/* ── Lienzo del árbol ─────────────────────────────────────────────────── */

body.pantalla-arbol { overflow: hidden; }

.arbol-pantalla { display: flex; height: 100%; min-height: 0; }

.lienzo-envoltorio {
    position: relative; flex: 1; overflow: hidden;
    background:
        radial-gradient(circle at 1px 1px, var(--borde-fuerte) 1px, transparent 0) 0 0 / 26px 26px,
        linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 100%);
    cursor: grab;
}
.lienzo-envoltorio.arrastrando { cursor: grabbing; }
.lienzo-envoltorio.arrastrando #lienzo { transition: none !important; }

#lienzo { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
#lienzo.suave { transition: transform .5s var(--curva); }
#conexiones { position: absolute; inset: 0; overflow: visible; pointer-events: none; }

/* Tarjeta de persona */
.nodo {
    position: absolute;
    width: 178px;
    /* Altura fija: todas las tarjetas de una misma generación miden lo mismo,
       tengan o no apellidos o fechas. 82 px es lo que ocupa la tarjeta llena
       (nombre + apellidos + años); las incompletas se rellenan con el hueco.
       Además el layout dibuja las líneas suponiendo esta altura exacta: si la
       tarjeta encogía por falta de datos, la línea quedaba despegada. */
    min-height: 82px;
    display: flex; flex-direction: column; justify-content: center;
    padding: 10px 13px 10px 15px;
    background: var(--papel);
    border: 1.5px solid var(--borde-fuerte);
    border-radius: 12px;
    box-shadow: var(--sombra-1);
    cursor: pointer;
    user-select: none;
    animation: aparecerNodo .34s var(--curva) both;
    transition: box-shadow .2s var(--curva), transform .2s var(--curva),
                border-color .2s var(--curva), background .2s;
}
@keyframes aparecerNodo { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

.nodo:hover {
    box-shadow: var(--sombra-2);
    transform: translateY(-3px) scale(1.02);
    z-index: 5;
}

/* Color por sexo: el borde y la franja lateral */
.nodo.sexo-H { border-color: color-mix(in srgb, var(--varon) 45%, var(--borde)); }
.nodo.sexo-M { border-color: color-mix(in srgb, var(--mujer) 45%, var(--borde)); }
.nodo.sexo-H:hover { border-color: var(--varon); }
.nodo.sexo-M:hover { border-color: var(--mujer); }

.nodo .franja-sexo {
    position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0;
    background: var(--neutro);
}
.nodo.sexo-H .franja-sexo { background: var(--varon); }
.nodo.sexo-M .franja-sexo { background: var(--mujer); }

/* Línea directa: sangre propia teñida, como en las apps de genealogía */
.nodo.linea-ascendiente  { background: linear-gradient(180deg, var(--papel) 55%, var(--acento-velo)); }
.nodo.linea-descendiente { background: linear-gradient(180deg, var(--papel) 55%, var(--ambar-velo)); }

.nodo.foco {
    /* El resalte va por fuera con outline: engordar el borde sumaba 2 px de
       alto y descuadraba la tarjeta respecto a sus hermanas de fila. */
    border-color: var(--acento);
    outline: 1px solid var(--acento);
    outline-offset: -2px;
    box-shadow: 0 0 0 5px var(--acento-velo), var(--sombra-2);
}
.nodo.ego { border-color: var(--ambar); }
.nodo.ego::after {
    content: "tú"; position: absolute; top: -10px; right: 9px;
    padding: 1px 9px; border-radius: 20px;
    background: var(--ambar); color: #fff;
    font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(245, 158, 11, .4);
}
.nodo.resaltado {
    border-color: var(--acento) !important;
    box-shadow: 0 0 0 5px var(--acento-velo), var(--sombra-2);
    animation: latido 1.6s ease-in-out 2;
}
@keyframes latido {
    0%, 100% { box-shadow: 0 0 0 5px var(--acento-velo), var(--sombra-2); }
    50%      { box-shadow: 0 0 0 11px transparent, var(--sombra-2); }
}
/* Al buscar, lo que no encaja se apaga */
.lienzo-envoltorio.filtrando .nodo { opacity: .28; filter: saturate(.4); }
.lienzo-envoltorio.filtrando .nodo.coincide { opacity: 1; filter: none; }

.nodo .nombre {
    font-family: var(--fuente); font-size: .96rem; font-weight: 600;
    line-height: 1.24; margin-bottom: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nodo .apellidos {
    font-size: .8rem; color: var(--tinta-suave); line-height: 1.24;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nodo .anios { margin-top: 4px; font-size: .76rem; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }

/* Indicador de persona que enlaza por varias ramas */
.marca-ramas {
    position: absolute; right: 7px; bottom: 7px;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 7px; border-radius: 20px;
    background: var(--ambar-velo); color: #b45309;
    border: 1px solid color-mix(in srgb, var(--ambar) 40%, transparent);
    font-size: .68rem; font-weight: 700;
    cursor: pointer; transition: all .18s var(--curva);
}
.marca-ramas:hover { background: var(--ambar); color: #fff; transform: scale(1.12); }

/* Flechas de expansión */
.expandir {
    position: absolute; left: 50%;
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--papel); border: 1.5px solid var(--borde-fuerte);
    color: var(--acento-hondo); font-size: .68rem; line-height: 1;
    cursor: pointer; box-shadow: var(--sombra-1);
    transform: translateX(-50%);
    transition: all .2s var(--curva);
}
.expandir:hover {
    background: var(--acento); color: #fff; border-color: var(--acento);
    transform: translateX(-50%) scale(1.18);
    box-shadow: var(--sombra-acento);
}
.expandir.arriba { top: -12px; }
.expandir.abajo  { bottom: -12px; }

/* Líneas de parentesco */
.linea { fill: none; stroke: var(--borde-fuerte); stroke-width: 1.6; transition: stroke .25s, stroke-width .25s; }
.linea.union { stroke: var(--ambar); stroke-width: 2.2; }
.linea.camino { stroke: var(--acento); stroke-width: 3.4; }

/* Controles flotantes */
.controles-lienzo {
    position: absolute; left: 18px; bottom: 18px; z-index: 10;
    display: flex; gap: 5px; padding: 6px;
    background: var(--papel); border: 1px solid var(--borde);
    border-radius: 26px; box-shadow: var(--sombra-2);
}
.controles-lienzo button {
    width: 36px; height: 36px; border: none; border-radius: 50%;
    background: transparent; color: var(--tinta-suave);
    font-size: 1rem; cursor: pointer;
    transition: background .16s, color .16s, transform .16s var(--curva);
}
.controles-lienzo button:hover { background: var(--acento-velo); color: var(--acento-hondo); transform: scale(1.1); }

.buscador-flotante { position: absolute; top: 18px; left: 18px; right: 18px; z-index: 20; max-width: 430px; }
.buscador-flotante input {
    width: 100%; padding: 12px 18px;
    background: var(--papel); color: var(--tinta);
    border: 1px solid var(--borde); border-radius: 26px;
    box-shadow: var(--sombra-2); font-size: .95rem;
    transition: box-shadow .2s, border-color .2s;
}
.buscador-flotante input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-velo), var(--sombra-2); }

.resultados-flotantes {
    margin-top: 7px; max-height: 62vh; overflow-y: auto;
    background: var(--papel); border: 1px solid var(--borde);
    border-radius: var(--radio); box-shadow: var(--sombra-3);
    animation: subir .22s var(--curva) both;
}
.resultados-flotantes:empty { display: none; }
.resultado {
    display: flex; align-items: baseline; gap: 10px;
    padding: 11px 15px; cursor: pointer; border-bottom: 1px solid var(--borde);
    transition: background .14s;
}
.resultado:last-child { border-bottom: none; }
.resultado:hover { background: var(--acento-velo); }
.resultado .r-nombre { font-weight: 600; font-size: .93rem; }
.resultado .r-anios { font-size: .78rem; color: var(--tinta-tenue); margin-left: auto; }
.resultado .r-parentesco {
    padding: 2px 9px; border-radius: 20px;
    background: var(--acento-velo); color: var(--acento-hondo);
    font-size: .74rem; font-weight: 650; white-space: nowrap;
}

/* Panel lateral */
.panel-lateral {
    width: 380px; flex-shrink: 0; overflow-y: auto;
    background: var(--papel); border-left: 1px solid var(--borde); padding: 24px;
    animation: entrarPanel .32s var(--curva) both;
}
@keyframes entrarPanel { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.panel-lateral.oculto { display: none; }
.panel-lateral h2 { font-size: 1.38rem; margin-bottom: 2px; }
.panel-lateral .sub { color: var(--tinta-suave); font-size: .9rem; margin-bottom: 16px; }

.chip-parentesco {
    display: inline-block; padding: 5px 14px; margin-bottom: 14px;
    border-radius: 20px; background: var(--acento); color: #fff;
    font-size: .85rem; font-weight: 650;
    box-shadow: var(--sombra-acento);
}

.grupo-relacion { margin-bottom: 18px; }
.grupo-relacion h4 {
    margin-bottom: 7px; font-family: var(--fuente-ui);
    font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--tinta-tenue);
}
.lista-personas { display: flex; flex-direction: column; gap: 4px; }
.mini-persona {
    display: flex; align-items: baseline; gap: 8px;
    padding: 8px 11px; border-radius: var(--radio-s);
    background: var(--papel-2); cursor: pointer; font-size: .89rem;
    color: var(--tinta); text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .16s, border-color .16s, transform .16s var(--curva);
}
.mini-persona:hover { background: var(--acento-velo); border-left-color: var(--acento); transform: translateX(3px); text-decoration: none; }
.mini-persona .m-anios { margin-left: auto; font-size: .76rem; color: var(--tinta-tenue); }

.datos-lista { margin: 0 0 18px; font-size: .9rem; }
.datos-lista dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-tenue); margin-top: 11px; }
.datos-lista dd { margin: 2px 0 0; }

/* Diagrama de parentesco: dos ramas que suben al antepasado común */
.diagrama-parentesco {
    margin-top: 12px; padding: 16px;
    background: var(--papel-2); border: 1px solid var(--borde); border-radius: var(--radio);
    animation: subir .3s var(--curva) both;
}
.cadena { display: flex; flex-direction: column; gap: 0; }
.cadena-paso {
    display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: .88rem;
    cursor: pointer; border-radius: 6px; transition: background .14s;
}
.cadena-paso:hover { background: var(--acento-velo); }
.cadena-paso .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--borde-fuerte); flex-shrink: 0; }
.cadena-paso.ancestro .punto { background: var(--ambar); width: 13px; height: 13px; box-shadow: 0 0 0 4px var(--ambar-velo); }
.cadena-paso.extremo .punto { background: var(--acento); box-shadow: 0 0 0 4px var(--acento-velo); }
.cadena-vinculo {
    margin-left: 4px; padding: 1px 0 1px 16px;
    border-left: 2px solid var(--borde-fuerte);
    font-size: .74rem; color: var(--tinta-tenue); text-transform: lowercase;
}

/* Modal */
.modal-fondo {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(23, 34, 46, .42); backdrop-filter: blur(4px);
    animation: aparecer .18s ease both;
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.modal-fondo.oculto { display: none; }
.modal {
    width: 100%; max-width: 500px; max-height: 86vh; overflow-y: auto;
    padding: 28px; background: var(--papel);
    border-radius: var(--radio); box-shadow: var(--sombra-3);
    animation: subir .28s var(--curva) both;
}
.modal h3 { margin-bottom: 4px; }
.modal .sub { color: var(--tinta-suave); font-size: .9rem; margin-bottom: 18px; }
.modal-acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* ── Utilidades ───────────────────────────────────────────────────────── */

.tabla { width: 100%; border-collapse: collapse; font-size: .91rem; }
.tabla th, .tabla td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--borde); }
.tabla th { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-tenue); }
.tabla tbody tr { transition: background .14s; }
.tabla tbody tr:hover { background: var(--papel-2); }

.etiqueta-estado {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: .74rem; font-weight: 650;
    background: var(--neutro-velo); color: var(--tinta-suave);
}
.etiqueta-estado.ok { background: var(--acento-velo); color: var(--acento-hondo); }
.etiqueta-estado.pendiente { background: var(--ambar-velo); color: #b45309; }

.vacio { padding: 48px 24px; text-align: center; color: var(--tinta-tenue); }
.centrado { text-align: center; }
.mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; }  .mt-3 { margin-top: 28px; }
.oculto { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 860px) {
    .heroe h1 { font-size: 2.4rem; }
    .panel-lateral {
        position: absolute; right: 0; top: 0; bottom: 0;
        width: 100%; max-width: 380px; z-index: 30; box-shadow: var(--sombra-3);
    }
    .campos-fila { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Añadidos: gestos táctiles, diagrama de relaciones, formularios de persona
   y adaptación a móvil.
   ========================================================================== */

/* El lienzo se queda TODOS los gestos: pellizcar amplía el árbol, nunca la
   página. `touch-action` NO se hereda, así que hay que declararlo también en
   el contenido: si no, al pellizcar encima de una tarjeta el navegador se
   quedaba el gesto y no pasaba nada. */
.lienzo-envoltorio,
.lienzo-envoltorio #lienzo,
.lienzo-envoltorio .nodo,
.lienzo-envoltorio #conexiones {
    touch-action: none;
}
.lienzo-envoltorio {
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior: contain;
}
/* Los controles de la interfaz sí responden al toque normal. */
.buscador-flotante, .buscador-flotante *,
.controles-lienzo, .controles-lienzo * { touch-action: auto; }

/* Aviso flotante */
.brindis {
    position: fixed; left: 50%; bottom: 24px; z-index: 200;
    transform: translateX(-50%);
    max-width: min(92vw, 460px);
    padding: 12px 20px;
    background: var(--tinta); color: #fff;
    border-radius: 24px; box-shadow: var(--sombra-3);
    font-size: .92rem; text-align: center;
    animation: subir .28s var(--curva) both;
}

/* ── Diagrama de relaciones en dos columnas ───────────────────────────── */

.diagrama-explica {
    margin: 0 0 18px; padding: 11px 15px;
    background: var(--acento-velo); border-radius: var(--radio-s);
    font-size: .9rem; color: var(--tinta);
}

.diagrama-rejilla {
    /* Una única rejilla para todo: tarjetas y conectores comparten columnas,
       que es lo que mantiene las líneas verticales rectas y las etiquetas
       alineadas con su rama. */
    display: grid;
    grid-template-columns: 1fr 118px 1fr;
    align-items: stretch;
}

.dg-celda {
    display: flex; justify-content: center;
    /* `stretch` hace que las tarjetas de una misma fila midan LO MISMO aunque
       a una le falten las fechas: los niveles se leen de un vistazo. La pareja
       política vive en su propia fila, así que ya no descuadra la altura. */
    align-items: stretch;
}
.dg-celda > .diagrama-tarjeta { width: 100%; display: flex; flex-direction: column; justify-content: center; }
.dg-vacia { min-height: 8px; }

.dg-comun { padding: 2px 0 4px; }

.diagrama-tarjeta {
    width: 100%;
    padding: 10px 13px;
    background: var(--papel);
    border: 1.5px solid var(--borde-fuerte);
    border-left-width: 4px;
    border-radius: 10px;
    box-shadow: var(--sombra-1);
    cursor: pointer;
    transition: transform .16s var(--curva), box-shadow .16s var(--curva), border-color .16s;
}
.diagrama-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.diagrama-tarjeta.sexo-H { border-left-color: var(--varon); }
.diagrama-tarjeta.sexo-M { border-left-color: var(--mujer); }
.diagrama-tarjeta.comun {
    width: auto; min-width: 58%;
    border-color: var(--ambar); background: var(--ambar-velo);
    text-align: center;
}
.dt-nombre { font-family: var(--fuente); font-weight: 600; font-size: .93rem; line-height: 1.25; }
.dt-anios  { font-size: .76rem; color: var(--tinta-tenue); margin-top: 2px; }

/* Conector vertical entre dos generaciones. La línea va centrada en la
   columna y la etiqueta a su lado, no encima. */
.dg-conector {
    position: relative;
    min-height: 30px;
    align-items: center;
    justify-content: center;
}
.dg-conector::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 2px; margin-left: -1px;
    background: var(--borde-fuerte);
}
.dg-conector.sin-linea::before { display: none; }
.dg-etiqueta {
    position: relative; z-index: 1;
    padding: 1px 8px;
    background: var(--papel);
    border-radius: 20px;
    font-size: .72rem; color: var(--tinta-tenue);
}

.dg-medio { justify-content: center; align-items: center; min-height: 44px; }
.diagrama-relacion {
    padding: 3px 11px; border-radius: 20px; white-space: nowrap;
    background: var(--acento-velo); color: var(--acento-hondo);
    font-size: .72rem; font-weight: 700; text-align: center;
}
/* La relación diagonal se distingue: no compara dos personas de la misma
   altura, sino una con la de un escalón más abajo. */
.diagrama-relacion.diagonal {
    background: var(--ambar-velo); color: #b45309;
    border: 1px dashed color-mix(in srgb, var(--ambar) 45%, transparent);
}

/* ── Formulario de persona ────────────────────────────────────────────── */

.form-persona { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-persona .campo-ancho { grid-column: 1 / -1; }
.campo-check {
    display: flex; align-items: center; gap: 8px;
    margin: 4px 0 6px; font-size: .92rem; color: var(--tinta-suave);
    cursor: pointer;
}
.campo-check input { width: 18px; height: 18px; accent-color: var(--acento); }

.modal-ancho { max-width: 760px; }

/* Barra superior y acciones del panel lateral */
.panel-barra { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.acciones-ficha { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

.mini-persona.destacada { font-weight: 650; }
.mini-persona.sangrada  { padding-left: 24px; }

/* ── Móvil ────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .cabecera { padding: 10px 14px; gap: 10px; }
    .cabecera .marca { font-size: 1.1rem; }
    .nav { gap: 2px; }
    .nav a { padding: 6px 10px; font-size: .86rem; }



    .buscador-flotante { top: 10px; left: 10px; right: 10px; max-width: none; }
    .buscador-flotante input { padding: 11px 15px; font-size: 16px; } /* 16px evita el zoom de iOS al enfocar */

    .controles-lienzo { left: 10px; bottom: 10px; padding: 5px; }
    .controles-lienzo button { width: 42px; height: 42px; } /* objetivos táctiles cómodos */

    /* El panel de la ficha ocupa la mitad inferior, como una hoja deslizante */
    .panel-lateral {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        width: 100%; max-width: none; max-height: 72dvh;
        border-left: none; border-top: 1px solid var(--borde);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 30px rgba(23, 34, 46, .18);
        padding: 18px 16px 24px;
        animation: subirHoja .3s var(--curva) both;
    }
    @keyframes subirHoja { from { transform: translateY(100%); } to { transform: none; } }
    .panel-lateral::before {
        content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 12px;
        background: var(--borde-fuerte); border-radius: 4px;
    }

    .modal { padding: 20px 16px; max-height: 88dvh; border-radius: 16px; }
    .modal-acciones { position: sticky; bottom: 0; background: var(--papel); padding-top: 12px; }
    .modal-acciones .boton { flex: 1; }

    .form-persona { grid-template-columns: 1fr; }
    .campo input, .campo select, .campo textarea { font-size: 16px; }

    /* El diagrama se estrecha pero mantiene las dos columnas */
    .diagrama-rejilla { grid-template-columns: 1fr 84px 1fr; }
    .diagrama-tarjeta { padding: 8px 10px; }
    .dt-nombre { font-size: .84rem; }
    .dt-anios { font-size: .7rem; }
    .diagrama-relacion { font-size: .64rem; padding: 2px 7px; white-space: normal; text-align: center; }

    .heroe { padding: 52px 0 40px; }
    .franja-datos { gap: 26px; }
    .tabla { font-size: .84rem; }
    .tabla th, .tabla td { padding: 8px 7px; }
}

@media (max-width: 480px) {
    .diagrama-rejilla { grid-template-columns: 1fr 72px 1fr; }
    .diagrama-relacion { max-width: 68px; white-space: normal; }
}

/* ==========================================================================
   Lengüeta «+» de la tarjeta, menú contextual, pestañas y cronología
   ========================================================================== */

/* La lengüeta cuelga del borde inferior de la tarjeta, como una pestaña de
   carpeta: invita a añadir familia sin salir del árbol. */
.nodo-mas {
    position: absolute; right: -13px; bottom: -13px;
    transform: none;
    display: flex; align-items: center; justify-content: center;
    width: 27px; height: 27px;
    background: var(--papel);
    border: 1.5px solid var(--borde-fuerte);
    border-radius: 50%;
    color: var(--acento-hondo); font-size: 1rem; font-weight: 600; line-height: 1;
    cursor: pointer; opacity: 0;
    box-shadow: 0 3px 7px rgba(23, 34, 46, .10);
    transition: opacity .18s var(--curva), background .18s, color .18s, transform .18s var(--curva);
}
.nodo:hover .nodo-mas,
.nodo:focus-within .nodo-mas,
.nodo.foco .nodo-mas { opacity: 1; }
.nodo-mas:hover {
    background: var(--acento); color: #fff; border-color: var(--acento);
    transform: scale(1.16);
}
/* En pantallas táctiles no hay «pasar por encima»: siempre visible. */
@media (hover: none) {
    .nodo-mas { opacity: 1; }
}

/* La flecha de desplegar se queda centrada; el «+» vive en la esquina
   inferior derecha. Antes estaban a 26 px y en el móvil se pisaban al tocar. */
.expandir.abajo { bottom: -12px; left: 50%; }

/* Menú contextual */
.menu-flotante {
    position: fixed; z-index: 150;
    padding: 6px;
    background: var(--papel);
    border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra-3);
    animation: subir .16s var(--curva) both;
}
.menu-opcion {
    display: block; width: 100%;
    padding: 9px 12px; border: none; border-radius: var(--radio-s);
    background: transparent; color: var(--tinta);
    font-family: var(--fuente-ui); font-size: .9rem; text-align: left;
    cursor: pointer; transition: background .14s, color .14s;
}
.menu-opcion:hover { background: var(--acento-velo); color: var(--acento-hondo); }
.menu-separador { height: 1px; margin: 5px 8px; background: var(--borde); }

/* Pestañas de la ficha */
.pestañas {
    display: flex; gap: 4px; margin: 16px 0 14px;
    border-bottom: 1px solid var(--borde);
}
.pestaña {
    padding: 8px 14px; border: none; background: transparent;
    color: var(--tinta-tenue); font-family: var(--fuente-ui);
    font-size: .9rem; font-weight: 600; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .16s, border-color .16s;
}
.pestaña:hover { color: var(--tinta); }
.pestaña.activa { color: var(--acento-hondo); border-bottom-color: var(--acento); }

/* Cronología vital */
.cronologia { position: relative; padding-left: 4px; }
.crono-hito { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding-bottom: 14px; position: relative; }
.crono-hito::before {
    content: ""; position: absolute; left: 53px; top: 20px; bottom: 0;
    width: 2px; background: var(--borde);
}
.crono-hito:last-child::before { display: none; }
.crono-anio {
    position: relative; padding-top: 9px;
    font-size: .78rem; font-weight: 700; color: var(--tinta-tenue);
    text-align: right; font-variant-numeric: tabular-nums;
}
.crono-anio::after {
    content: ""; position: absolute; right: -13px; top: 13px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--borde-fuerte); border: 2px solid var(--papel);
}
.crono-caja {
    padding: 9px 13px; margin-left: 10px;
    background: var(--papel-2); border-radius: var(--radio-s);
    border-left: 3px solid var(--borde-fuerte);
}
.crono-titulo { font-weight: 650; font-size: .89rem; }
.crono-detalle { font-size: .86rem; color: var(--tinta-suave); }
.crono-detalle.enlazado { color: var(--acento-hondo); cursor: pointer; }
.crono-detalle.enlazado:hover { text-decoration: underline; }
.crono-fecha, .crono-lugar { font-size: .78rem; color: var(--tinta-tenue); margin-top: 2px; }

.tipo-nacimiento .crono-caja { border-left-color: var(--acento); }
.tipo-nacimiento .crono-anio::after { background: var(--acento); }
.tipo-union .crono-caja { border-left-color: var(--ambar); }
.tipo-union .crono-anio::after { background: var(--ambar); }
.tipo-hijo .crono-caja { border-left-color: var(--varon); }
.tipo-defuncion .crono-caja { border-left-color: var(--tinta-tenue); }

/* Familiares con su rol */
.mp-texto { display: flex; flex-direction: column; }
.mp-nombre { font-weight: 600; font-size: .9rem; line-height: 1.25; }
.mp-rol { font-size: .76rem; color: var(--tinta-tenue); }
.mini-persona { align-items: center; }

@media (max-width: 860px) {
    .crono-hito { grid-template-columns: 40px 1fr; }
    .crono-hito::before { left: 47px; }
    .menu-flotante { width: 230px !important; }
    .menu-opcion { padding: 12px 14px; font-size: .95rem; }
    /* Objetivos táctiles más grandes y bien separados entre sí. */
    .nodo-mas { width: 32px; height: 32px; right: -15px; bottom: -15px; font-size: 1.15rem; }
    .expandir { width: 28px; height: 28px; }
}

/* ==========================================================================
   Fotos: retrato en la tarjeta y galería de la ficha
   ========================================================================== */

.nodo-retrato {
    position: absolute; right: 9px; top: 9px;
    width: 38px; height: 38px;
    object-fit: cover; border-radius: 50%;
    border: 2px solid var(--papel);
    box-shadow: 0 1px 4px rgba(23, 34, 46, .18);
    background: var(--neutro-velo);
}
/* Con retrato, el texto deja sitio para no pasar por debajo. */
.nodo.con-retrato .nombre,
.nodo.con-retrato .apellidos { padding-right: 46px; }

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}
.galeria-foto {
    position: relative; aspect-ratio: 1;
    border-radius: 10px; overflow: hidden;
    border: 2px solid var(--borde);
    background: var(--papel-2);
}
.galeria-foto.principal { border-color: var(--ambar); }
.galeria-foto.principal::before {
    content: "retrato"; position: absolute; left: 4px; top: 4px; z-index: 2;
    padding: 1px 6px; border-radius: 20px;
    background: var(--ambar); color: #fff;
    font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.galeria-foto img {
    width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block;
    transition: transform .3s var(--curva);
}
.galeria-foto:hover img { transform: scale(1.06); }

.galeria-acciones {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; gap: 4px; justify-content: flex-end;
    padding: 5px; opacity: 0;
    background: linear-gradient(transparent, rgba(23, 34, 46, .62));
    transition: opacity .18s;
}
.galeria-foto:hover .galeria-acciones { opacity: 1; }
@media (hover: none) { .galeria-acciones { opacity: 1; } }

.mini-boton {
    padding: 3px 8px; border: none; border-radius: 6px;
    background: rgba(255, 255, 255, .92); color: var(--tinta);
    font-size: .7rem; font-weight: 650; cursor: pointer;
}
.mini-boton:hover { background: #fff; }
.mini-boton.peligro { background: rgba(225, 29, 72, .92); color: #fff; }

/* ==========================================================================
   Vistas de solo ascendencia: en columnas y en abanico
   ========================================================================== */

.barra-vista {
    position: absolute; top: 14px; left: 14px; right: 14px; z-index: 20;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--papel) 92%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra-1);
}
.barra-titulo { display: flex; flex-direction: column; }
.barra-titulo strong { font-family: var(--fuente); font-size: 1.05rem; }
.barra-titulo .sub { font-size: .8rem; color: var(--tinta-tenue); }
.selector-gen {
    margin-left: auto; display: flex; align-items: center; gap: 8px;
    font-size: .84rem; color: var(--tinta-suave); font-weight: 600;
}
.selector-gen select {
    padding: 6px 10px; border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-s); background: var(--papel); color: var(--tinta);
    font-size: .88rem;
}

/* Vista en columnas */
.columnas { position: relative; }
.columnas-lineas { position: absolute; inset: 0; overflow: visible; pointer-events: none; }

.casilla {
    position: absolute;
    display: flex; flex-direction: column; justify-content: center;
    padding: 6px 11px;
    background: var(--papel);
    border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte);
    border-radius: 8px; box-shadow: var(--sombra-1);
    cursor: pointer; overflow: hidden;
    transition: transform .16s var(--curva), box-shadow .16s var(--curva);
}
.casilla:hover { transform: translateX(3px); box-shadow: var(--sombra-2); z-index: 3; }
.casilla-nombre {
    font-size: .82rem; font-weight: 600; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #17222e;   /* el fondo del sector es claro en todas las generaciones */
}
.casilla-anios { font-size: .7rem; color: #56677c; }

/* La casilla vacía es información: marca dónde falta investigar. */
.casilla.vacia {
    background: transparent;
    border: 1px dashed var(--borde-fuerte); border-left-width: 1px;
    box-shadow: none; cursor: default;
}
.casilla.vacia:hover { transform: none; box-shadow: none; }
.casilla-vacia { text-align: center; color: var(--tinta-tenue); font-size: 1rem; font-weight: 700; }

/* Abanico */
.abanico { display: block; }
.sector path, .sector circle { transition: filter .16s, opacity .16s; }
.sector:hover path, .sector:hover circle { filter: brightness(1.06); }
.sector.vacio:hover path { filter: none; }
.sector-texto {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 11px; font-weight: 600; fill: #17222e;
    text-anchor: middle; dominant-baseline: middle;
    pointer-events: none;
}
.sector-texto.menudo { font-size: 9px; font-weight: 500; }
.sector-texto.centro { font-size: 13px; }
.sector-texto.centro.pequeno { font-size: 10px; font-weight: 500; fill: #56677c; }

/* Cobertura por generación: dónde falta investigar */
.leyenda-vista {
    position: absolute; right: 14px; bottom: 14px; z-index: 15;
    width: 190px; padding: 12px 14px;
    background: color-mix(in srgb, var(--papel) 94%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra-1);
}
.leyenda-fila { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: .74rem; }
.leyenda-gen { width: 20px; color: var(--tinta-tenue); font-weight: 700; }
.leyenda-barra { flex: 1; height: 6px; background: var(--fondo-2); border-radius: 4px; overflow: hidden; }
.leyenda-relleno { height: 100%; background: var(--acento); border-radius: 4px; transition: width .4s var(--curva); }
.leyenda-cifra { color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
    .barra-vista { top: 10px; left: 10px; right: 10px; padding: 9px 12px; gap: 10px; }
    .barra-titulo strong { font-size: .95rem; }
    .selector-gen { font-size: .78rem; }
    .leyenda-vista { width: 152px; right: 10px; bottom: 76px; padding: 9px 11px; }
    .leyenda-fila { font-size: .68rem; }
}

/* ==========================================================================
   Dos experiencias: escritorio con paneles, móvil como aplicación
   ========================================================================== */

/* Diagonales de la relación tío/sobrino.
   Van de una fila a OTRA, así que no caben dentro de una celda: se dibujan en
   una capa superpuesta que se mide y se ancla al mismo marco que la rejilla
   —si se midiera desde una y se anclara a otra, todo el trazo saldría
   desplazado—. La etiqueta se coloca sobre el punto medio del propio trazo. */
.dg-lienzo { position: relative; }
.dg-capa {
    position: absolute; left: 0; top: 0;
    pointer-events: none; z-index: 0; overflow: visible;
}
.dg-diagonal {
    stroke: var(--ambar); stroke-width: 1.6;
    stroke-dasharray: 5 4; stroke-linecap: round;
}
.dg-diagonal.final { stroke-width: 2.4; stroke-dasharray: none; }

.dg-etiquetas {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    pointer-events: none; z-index: 3;
}
.dg-etiquetas .diagrama-relacion {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

/* Las tarjetas van por encima del trazo, que así entra «por detrás». */
.dg-celda { position: relative; z-index: 1; }
/* La celda queda vacía, pero reserva el hueco por el que pasa la diagonal. */
.dg-medio.con-diagonal { min-height: 52px; }

/* ── Barra de navegación desplazable en móvil ─────────────────────────── */
@media (max-width: 860px) {
    .cabecera {
        gap: 8px;
        /* La marca se queda fija y los enlaces se deslizan: con seis secciones
           no caben en 390 px y antes se salían de la pantalla. */
        align-items: center;
    }
    .cabecera .marca { flex-shrink: 0; }
    .nav {
        margin-left: auto;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
    }
    .nav::-webkit-scrollbar { display: none; }
    .nav a, .nav form { flex-shrink: 0; }
    .nav a { padding: 7px 11px; font-size: .85rem; }
}

/* ── La ficha en móvil se comporta como una hoja de aplicación ────────── */
@media (max-width: 860px) {
    /* Ni la página ni el lienzo se mueven mientras la hoja está abierta: solo
       se desplaza la hoja, que es lo que se espera de una app. */
    body.con-panel { overflow: hidden; }

    .panel-lateral {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        display: flex; flex-direction: column;
        width: 100%; max-width: none;
        height: 82dvh; max-height: 82dvh;
        padding: 0;
        border-left: none; border-top: 1px solid var(--borde);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 34px rgba(23, 34, 46, .22);
        overflow: hidden;                 /* el scroll va dentro, no en la hoja */
        z-index: 60;
    }
    .panel-lateral::before {
        content: ""; flex-shrink: 0;
        width: 42px; height: 4px; margin: 10px auto 6px;
        background: var(--borde-fuerte); border-radius: 4px;
    }
    .panel-lateral > .ficha-cabecera { flex-shrink: 0; padding: 0 16px; }
    .panel-lateral > .pestañas { flex-shrink: 0; margin: 8px 16px 0; }
    .panel-lateral > .paneles {
        flex: 1; min-height: 0;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 12px 16px 8px;
    }
    /* Las acciones quedan ancladas abajo, no perdidas al final del scroll. */
    /* Una sola fila: la acción principal y el resto en un menú. Antes eran
       cinco botones en dos filas y se comían 132 px del panel. */
    .panel-lateral > .acciones-ficha {
        flex-shrink: 0;
        margin: 0;
        padding: 8px 16px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--borde);
        background: var(--papel);
        display: grid; grid-template-columns: 1fr auto; gap: 8px;
    }
}

/* ── Modales en móvil: hoja completa con acciones fijas ───────────────── */
@media (max-width: 860px) {
    .modal-fondo { padding: 0; align-items: flex-end; }
    .modal {
        display: flex; flex-direction: column;
        width: 100%; max-width: none;
        max-height: 92dvh;
        border-radius: 18px 18px 0 0;
        padding: 18px 16px 0;
        overflow: hidden;
    }
    .modal > h3, .modal > .sub { flex-shrink: 0; }
    /* El cuerpo del modal es lo único que se desplaza. */
    .modal > #diagrama-cuerpo,
    .modal > #ramas-cuerpo,
    .modal > #persona-cuerpo,
    .modal > form {
        flex: 1; min-height: 0; overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 8px;
    }
    /* El botón Cerrar se montaba encima del contenido: ahora es una barra
       propia, pegada abajo y con su propio fondo. */
    .modal-acciones {
        flex-shrink: 0;
        margin: 0 -16px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--borde);
        background: var(--papel);
        box-shadow: 0 -4px 14px rgba(23, 34, 46, .06);
    }
}

/* En escritorio, las acciones del modal tampoco deben pisar el contenido. */
@media (min-width: 861px) {
    .modal { display: flex; flex-direction: column; }
    .modal > #diagrama-cuerpo,
    .modal > #ramas-cuerpo,
    .modal > #persona-cuerpo,
    .modal > form { overflow-y: auto; min-height: 0; }
    .modal-acciones {
        flex-shrink: 0;
        margin: 18px -28px 0;
        padding: 16px 28px 0;
        border-top: 1px solid var(--borde);
    }
}

/* Acciones destructivas: se distinguen sin gritar. */
.menu-opcion.peligro { color: var(--rojo); }
.menu-opcion.peligro:hover { background: var(--rojo-velo); color: var(--rojo); }
.boton.secundario.peligro-suave { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 32%, var(--borde-fuerte)); }
.boton.secundario.peligro-suave:hover { background: var(--rojo-velo); border-color: var(--rojo); color: var(--rojo); }

/* Diálogo de confirmación propio (nada de confirm() del navegador) */
.modal-confirmar { max-width: 420px; }
.modal-confirmar h3 { margin-bottom: 8px; }
.confirmar-detalle {
    margin: 4px 0 0; padding: 11px 14px;
    background: var(--rojo-velo); border-radius: var(--radio-s);
    font-size: .88rem; color: var(--tinta);
}
.confirmar-detalle p { margin: 0; }
.modal-confirmar .modal-acciones { border-top: none; }

.brindis.saliendo { opacity: 0; transform: translateX(-50%) translateY(8px); transition: opacity .35s, transform .35s; }
.brindis.error { background: var(--rojo); }

@media (max-width: 860px) {
    .modal-confirmar { border-radius: 18px; margin: 0 12px 12px; }
    .modal-fondo:has(.modal-confirmar) { align-items: center; padding: 16px; }
}

/* La única pareja del diagrama: la política, colgando del pariente de sangre */
.dt-envoltura { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }

.dt-union {
    align-self: center;
    color: var(--ambar); font-size: 1rem; line-height: 1;
    padding: 2px 0;
}

.dt-pareja.politica {
    /* En columna: antes heredaba una regla flex en fila de cuando el ∞ vivía
       dentro de la tarjeta, y el nombre salía truncado con el rol al lado. */
    display: flex; flex-direction: column; justify-content: center;
    padding: 8px 12px;
    background: var(--ambar-velo);
    border: 1.5px dashed color-mix(in srgb, var(--ambar) 55%, transparent);
    border-left: 4px solid var(--neutro);
    border-radius: 10px;
    cursor: pointer; min-width: 0;
    transition: background .16s, border-color .16s;
}
.dt-pareja.politica:hover { background: var(--acento-velo); border-color: var(--acento); }
.dt-pareja.politica.sexo-H { border-left-color: var(--varon); }
.dt-pareja.politica.sexo-M { border-left-color: var(--mujer); }
.dt-pareja.politica .dt-nombre {
    font-size: .9rem; font-weight: 600;
    white-space: normal; overflow: visible; text-overflow: clip;
}
.dt-rol {
    margin-top: 2px; font-size: .7rem; font-weight: 700;
    color: #b45309; text-transform: uppercase; letter-spacing: .04em;
}

/* Diálogo de confirmación propio (nada de confirm() del navegador) */
.modal-confirmar { max-width: 420px; }
.modal-confirmar h3 { margin-bottom: 8px; }
.confirmar-detalle {
    margin: 4px 0 0; padding: 11px 14px;
    background: var(--rojo-velo); border-radius: var(--radio-s);
    font-size: .88rem; color: var(--tinta);
}
.confirmar-detalle p { margin: 0; }
.modal-confirmar .modal-acciones { border-top: none; }

.brindis.saliendo { opacity: 0; transform: translateX(-50%) translateY(8px); transition: opacity .35s, transform .35s; }
.brindis.error { background: var(--rojo); }

@media (max-width: 860px) {
    .modal-confirmar { border-radius: 18px; margin: 0 12px 12px; }
    .modal-fondo:has(.modal-confirmar) { align-items: center; padding: 16px; }
}

/* Parejas dentro del diagrama de relaciones */
.dt-envoltura { width: 100%; display: flex; flex-direction: column; gap: 3px; }

.dt-pareja {
    display: flex; align-items: center; gap: 7px;
    margin-left: 14px;
    padding: 5px 10px;
    background: var(--papel-2);
    border: 1px dashed var(--borde-fuerte);
    border-left: 3px solid var(--neutro);
    border-radius: 8px;
    cursor: pointer;
    transition: background .16s, border-color .16s;
}
.dt-pareja:hover { background: var(--acento-velo); border-color: var(--acento); }
.dt-pareja.sexo-H { border-left-color: var(--varon); }
.dt-pareja.sexo-M { border-left-color: var(--mujer); }
/* Si además es de la familia, línea continua: la sangre sí pasa por ahí. */
.dt-pareja.de-sangre { border-style: solid; background: var(--acento-velo); }

.dt-lazo { color: var(--ambar); font-size: .9rem; line-height: 1; flex-shrink: 0; }
.dt-pareja-texto { min-width: 0; }
.dt-pareja .dt-nombre {
    font-size: .8rem; font-weight: 500; color: var(--tinta-suave);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dt-rol { font-size: .68rem; color: var(--tinta-tenue); }

@media (max-width: 860px) {
    .dt-pareja { margin-left: 8px; padding: 4px 7px; gap: 5px; }
    .dt-pareja .dt-nombre { font-size: .72rem; }
    .dt-rol { font-size: .62rem; }
}

/* Propagación de apellidos a la descendencia */
.propagacion-cuerpo { max-height: 52vh; overflow-y: auto; margin-top: 6px; }

.propagacion-bloque { margin-bottom: 18px; }
.propagacion-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.propagacion-cabecera h4 {
    margin: 0; font-family: var(--fuente-ui);
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--tinta-tenue);
}
.propagacion-bloque.huecos .propagacion-cabecera h4 { color: var(--acento-hondo); }
.propagacion-bloque.discrepancias .propagacion-cabecera h4 { color: #b45309; }
.propagacion-cabecera .mini-boton { margin-left: auto; background: var(--papel-2); }

.propagacion-nota {
    margin: 0 0 8px; padding: 8px 12px;
    background: var(--papel-2); border-radius: var(--radio-s);
    font-size: .82rem; color: var(--tinta-suave);
}
.propagacion-bloque.discrepancias .propagacion-nota {
    background: var(--ambar-velo); color: #7c4a06;
}

.propagacion-fila {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 9px 12px; margin-bottom: 5px;
    background: var(--papel); border: 1px solid var(--borde);
    border-radius: var(--radio-s); cursor: pointer;
    transition: border-color .14s, background .14s;
}
.propagacion-fila:hover { border-color: var(--acento); background: var(--acento-velo); }
.propagacion-fila input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--acento); flex-shrink: 0; }
.propagacion-texto { min-width: 0; }

.pg-nombre { font-weight: 600; font-size: .9rem; }
.pg-cambio { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 3px; font-size: .84rem; }
.pg-campo { color: var(--tinta-tenue); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.pg-antes {
    padding: 1px 8px; border-radius: 6px;
    background: var(--rojo-velo); color: #9f1239;
    text-decoration: line-through;
}
.pg-vacio { padding: 1px 8px; border-radius: 6px; background: var(--papel-2); color: var(--tinta-tenue); font-style: italic; }
.pg-flecha { color: var(--tinta-tenue); }
.pg-despues { padding: 1px 8px; border-radius: 6px; background: var(--acento-velo); color: var(--acento-hondo); font-weight: 650; }
.pg-via { font-size: .74rem; color: var(--tinta-tenue); margin-top: 2px; }

@media (max-width: 860px) {
    .propagacion-cuerpo { max-height: none; }
    .pg-cambio { font-size: .8rem; }
}

/* Huecos rellenables en Ascendencia y Abanico */
.casilla.rellenable {
    cursor: pointer;
    border-color: color-mix(in srgb, var(--acento) 45%, var(--borde-fuerte));
}
.casilla.rellenable:hover {
    background: var(--acento-velo);
    border-color: var(--acento); border-style: solid;
    transform: translateX(3px);
}
.casilla.rellenable .casilla-vacia { color: var(--acento); }

.sector.rellenable:hover path { fill: var(--acento-velo) !important; }
.sector-mas {
    font-size: 15px; font-weight: 700; fill: var(--acento);
    text-anchor: middle; dominant-baseline: middle; pointer-events: none; opacity: .55;
}
.sector.rellenable:hover .sector-mas { opacity: 1; }


/* ==========================================================================
   Ficha de persona: cabecera compacta para dejar sitio al contenido
   ========================================================================== */

.ficha-cabecera { margin-bottom: 2px; }

.fc-linea1 { display: flex; align-items: flex-start; gap: 10px; }
.fc-linea1 h2 {
    flex: 1; min-width: 0; margin: 0;
    font-size: 1.22rem; line-height: 1.2;
}
.fc-cerrar {
    flex-shrink: 0;
    width: 30px; height: 30px; margin-top: -2px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--borde); border-radius: 50%;
    background: var(--papel); color: var(--tinta-suave);
    font-size: .8rem; cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}
.fc-cerrar:hover { background: var(--fondo-2); color: var(--tinta); border-color: var(--borde-fuerte); }

.fc-linea2 {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 3px;
}
.fc-anios { font-size: .84rem; color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }

/* El parentesco es ahora un botón: al pulsarlo se abre el diagrama, así que
   la explicación larga ya no necesita ocupar una línea propia. */
.fc-chip {
    padding: 3px 11px; border: none; border-radius: 20px;
    background: var(--acento); color: #fff;
    font-family: var(--fuente-ui); font-size: .78rem; font-weight: 650;
    cursor: pointer; transition: transform .14s var(--curva), box-shadow .16s;
}
.fc-chip:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--sombra-acento); }
.fc-chip.yo { background: var(--ambar); cursor: default; }
.fc-chip:disabled { opacity: 1; }

/* En escritorio el panel también reparte el alto: el contenido crece y las
   acciones se quedan abajo, en vez de dejar medio panel vacío. */
@media (min-width: 861px) {
    .panel-lateral { display: flex; flex-direction: column; }
    .panel-lateral > .ficha-cabecera,
    .panel-lateral > .pestañas,
    .panel-lateral > .acciones-ficha { flex-shrink: 0; }
    .panel-lateral > .paneles {
        flex: 1; min-height: 0; overflow-y: auto;
        padding-right: 2px;
    }
    .panel-lateral > .acciones-ficha {
        display: grid; grid-template-columns: 1fr auto; gap: 8px;
        margin: 12px -24px 0; padding: 12px 24px 0;
        border-top: 1px solid var(--borde);
    }
}


/* El diagrama nunca debe desbordar el modal */
.diagrama, .diagrama-rejilla { max-width: 100%; }
.dg-celda { min-width: 0; }
.diagrama-tarjeta { min-width: 0; overflow-wrap: anywhere; }
.dt-nombre, .dt-anios { overflow-wrap: anywhere; }
#diagrama-cuerpo { overflow-x: hidden; }

/* ==========================================================================
   Vista de lista
   ========================================================================== */

.lista-cabecera {
    display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.lista-buscador { display: flex; gap: 8px; margin-left: auto; }
.lista-buscador input {
    padding: 9px 15px; min-width: 240px;
    border: 1px solid var(--borde-fuerte); border-radius: 22px;
    background: var(--papel); color: var(--tinta); font-size: .92rem;
}
.lista-buscador input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-velo); }

.lista-filtros { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.filtro-pastilla {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: 20px;
    border: 1px solid var(--borde); background: var(--papel);
    color: var(--tinta-suave); font-size: .85rem; font-weight: 550;
    text-decoration: none; transition: all .14s var(--curva);
}
.filtro-pastilla:hover { border-color: var(--acento); color: var(--acento-hondo); text-decoration: none; }
.filtro-pastilla.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.filtro-cuenta {
    padding: 0 7px; border-radius: 20px;
    background: var(--fondo-2); color: var(--tinta-tenue);
    font-size: .74rem; font-variant-numeric: tabular-nums;
}
.filtro-pastilla.activo .filtro-cuenta { background: rgba(255,255,255,.25); color: #fff; }

.tabla-lista th a { color: var(--tinta-tenue); text-decoration: none; }
.tabla-lista th a:hover { color: var(--acento-hondo); }
.tabla-lista th a.orden-activo { color: var(--acento-hondo); font-weight: 700; }
.tabla-lista tr.fila-ego { background: var(--acento-velo); }

.lista-nombre {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; color: var(--tinta);
}
.punto-sexo { width: 8px; height: 8px; border-radius: 50%; background: var(--neutro); flex-shrink: 0; }
.punto-sexo.sexo-H { background: var(--varon); }
.punto-sexo.sexo-M { background: var(--mujer); }

.marca-lista {
    display: inline-block; margin-left: 6px;
    padding: 1px 7px; border-radius: 20px;
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.marca-lista.tu { background: var(--ambar); color: #fff; }
.marca-lista.repe { background: var(--ambar-velo); color: #b45309; }
.marca-lista.suelto { background: var(--neutro-velo); color: var(--tinta-tenue); }

.paginacion {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin: 20px 0 40px; color: var(--tinta-tenue); font-size: .88rem;
}

@media (max-width: 860px) {
    .ocultar-movil { display: none; }
    .lista-buscador { margin-left: 0; width: 100%; }
    .lista-buscador input { min-width: 0; flex: 1; }
    .lista-filtros { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
    .lista-filtros::-webkit-scrollbar { display: none; }
    .filtro-pastilla { flex-shrink: 0; }
}

/* ==========================================================================
   Antepasados comunes: la PAREJA de la que desciende todo
   ========================================================================== */

/* El enlace ∞ ocupa la columna central, a la misma altura que las dos
   tarjetas, con la barra que las une y el tramo que baja hacia los hijos. */
.dg-enlace-raiz { position: relative; }
.dg-enlace-raiz::before {
    content: ""; position: absolute; left: -2px; right: -2px; top: 50%;
    height: 2px; margin-top: -1px; background: var(--ambar);
}
.dg-raiz-simbolo {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--ambar-velo);
    border: 1.5px solid color-mix(in srgb, var(--ambar) 45%, transparent);
    color: var(--ambar); font-size: .95rem; line-height: 1;
}

/* Tramo vertical bajo la unión, antes de repartirse en las dos ramas */
.dg-puente-raiz { position: relative; min-height: 20px; }
.dg-puente-raiz::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
    width: 2px; margin-left: -1px; background: var(--ambar);
}

/* Fila propia de la pareja política */
.dg-celda-pareja { flex-direction: column; align-items: stretch; }
.dt-union { align-self: center; color: var(--ambar); font-size: 1rem; line-height: 1; padding: 3px 0; }

/* ── Diagrama en pantallas estrechas ──────────────────────────────────── */
@media (max-width: 860px) {
    /* Los nombres largos rompían en tres líneas y disparaban la altura de la
       tarjeta. Se ajusta el cuerpo y se permite partir por sílabas. */
    .diagrama-tarjeta { padding: 7px 9px; border-left-width: 4px; }
    .dt-nombre { font-size: .8rem; line-height: 1.2; hyphens: auto; }
    .dt-anios { font-size: .68rem; }

    /* OJO: aquí había `align-items: flex-start`, que anulaba el `stretch` y
       dejaba a cada tarjeta con su propia altura según le faltara el año o
       tuviera el nombre más corto. Los niveles deben leerse en línea. */
    .dg-conector { min-height: 24px; }
    .dg-medio.con-diagonal { min-height: 44px; }
    .dg-etiqueta { padding: 0 5px; font-size: .66rem; }
    .dg-medio { min-height: 36px; }

    .dt-pareja.politica { padding: 6px 9px; }
    .dt-pareja.politica .dt-nombre { font-size: .78rem; }
    .dt-rol { font-size: .62rem; }
    .dt-union { font-size: .85rem; padding: 1px 0; }

    /* El modal del diagrama aprovecha todo el ancho disponible. */
    #modal-diagrama .modal { padding-left: 10px; padding-right: 10px; }
    #modal-diagrama .modal > h3 { font-size: 1.05rem; }
    #modal-diagrama .diagrama-explica { padding: 9px 11px; font-size: .82rem; }
}

/* La pareja política, ya en su fila: se estira al ancho de su columna */
.dt-pareja.politica { width: 100%; }

/* En vertical, el enlace de la pareja raíz mantiene su disco pero sin barra */
@media (max-width: 860px) {
    .dg-enlace-raiz::before { left: 0; right: 0; }
    .dg-raiz-simbolo { width: 22px; height: 22px; font-size: .85rem; }
    .dg-puente-raiz { min-height: 16px; }
}

/* ==========================================================================
   Marco de aplicación: menú lateral fijo en PC, deslizante en móvil
   ========================================================================== */

.app-marco { display: flex; min-height: 100vh; min-height: 100dvh; }

.menu-lateral {
    flex-shrink: 0;
    width: 248px;
    display: flex; flex-direction: column;
    background: var(--papel);
    border-right: 1px solid var(--borde);
    padding: 16px 12px 12px;
    position: sticky; top: 0;
    height: 100vh; height: 100dvh;
    z-index: 50;
}

.ml-marca { display: flex; align-items: center; gap: 8px; padding: 0 6px 14px; }
.ml-marca .marca { font-size: 1.18rem; }
.ml-cerrar {
    display: none;
    margin-left: auto; width: 32px; height: 32px;
    border: 1px solid var(--borde); border-radius: 50%;
    background: var(--papel); color: var(--tinta-suave);
    font-size: .8rem; cursor: pointer;
}

/* ── Selector de árbol ─────────────────────────────────────────────── */

.selector-arbol { position: relative; margin-bottom: 14px; }

.sa-actual {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 10px 12px;
    background: var(--acento-velo);
    border: 1px solid color-mix(in srgb, var(--acento) 28%, transparent);
    border-radius: var(--radio-s);
    cursor: pointer; text-align: left;
    font-family: var(--fuente-ui);
    transition: background .16s, border-color .16s;
}
.sa-actual:hover, .sa-actual.desplegado { border-color: var(--acento); }
.sa-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sa-nombre {
    font-size: .9rem; font-weight: 650; color: var(--tinta); line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sa-detalle { font-size: .74rem; color: var(--tinta-tenue); }
.sa-flecha { color: var(--acento-hondo); font-size: .8rem; flex-shrink: 0; }
.sa-actual.desplegado .sa-flecha { transform: rotate(180deg); }

.sa-lista {
    position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 60;
    padding: 5px;
    background: var(--papel);
    border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra-3);
    max-height: 320px; overflow-y: auto;
    animation: subir .16s var(--curva) both;
}
.sa-opcion {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: var(--radio-s);
    color: var(--tinta); text-decoration: none;
    transition: background .14s;
}
.sa-opcion:hover { background: var(--acento-velo); text-decoration: none; }
.sa-opcion.activo { background: var(--acento-velo); }
.sa-punto {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--borde-fuerte);
}
.sa-opcion.activo .sa-punto { background: var(--acento); }
.sa-opcion.nuevo {
    margin-top: 4px; border-top: 1px solid var(--borde); border-radius: 0 0 var(--radio-s) var(--radio-s);
    color: var(--acento-hondo); font-size: .85rem; font-weight: 600;
    padding-top: 10px;
}

/* ── Navegación ────────────────────────────────────────────────────── */

.ml-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.ml-enlace {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: var(--radio-s);
    color: var(--tinta-suave); font-size: .92rem; font-weight: 550;
    text-decoration: none;
    transition: background .14s, color .14s;
}
.ml-enlace svg { width: 18px; height: 18px; flex-shrink: 0; }
.ml-enlace:hover { background: var(--fondo-2); color: var(--tinta); text-decoration: none; }
.ml-enlace.activo { background: var(--acento-velo); color: var(--acento-hondo); font-weight: 650; }

.ml-pie { padding: 12px 6px 0; border-top: 1px solid var(--borde); }
.ml-usuario {
    font-size: .82rem; color: var(--tinta-tenue); margin-bottom: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ml-pie .boton { width: 100%; }

/* ── Contenido ─────────────────────────────────────────────────────── */

.app-contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra-movil { display: none; }
.franja-aviso { padding: 14px 20px 0; }
.franja-aviso .aviso { margin-bottom: 0; }

.menu-fondo {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(23, 34, 46, .42); backdrop-filter: blur(2px);
}

/* La pantalla del árbol ocupa el alto del marco, ya sin barra superior. */
body.pantalla-arbol .app-contenido { height: 100vh; height: 100dvh; overflow: hidden; }
body.pantalla-arbol .arbol-pantalla { height: 100%; flex: 1; min-height: 0; }

/* ── Móvil: el panel se desliza ────────────────────────────────────── */

@media (max-width: 900px) {
    .menu-lateral {
        position: fixed; left: 0; top: 0; bottom: 0;
        width: 270px; max-width: 84vw;
        transform: translateX(-100%);
        transition: transform .26s var(--curva);
        box-shadow: 6px 0 26px rgba(23, 34, 46, .16);
        padding-top: calc(16px + env(safe-area-inset-top));
    }
    .menu-lateral.abierto { transform: none; }
    .ml-cerrar { display: flex; align-items: center; justify-content: center; }

    body.menu-abierto { overflow: hidden; }

    /* Barra superior mínima: solo el botón del menú y el árbol activo. */
    .barra-movil {
        display: flex; align-items: center; gap: 12px;
        padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top));
        background: color-mix(in srgb, var(--papel) 92%, transparent);
        backdrop-filter: saturate(1.6) blur(12px);
        border-bottom: 1px solid var(--borde);
        position: sticky; top: 0; z-index: 40;
        flex-shrink: 0;
    }
    .bm-menu {
        display: flex; flex-direction: column; justify-content: center; gap: 4px;
        width: 38px; height: 38px; padding: 0 8px;
        background: transparent; border: none; cursor: pointer;
    }
    .bm-menu span { display: block; height: 2px; background: var(--tinta); border-radius: 2px; }
    .bm-titulo {
        font-family: var(--fuente); font-size: 1rem; font-weight: 600;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    body.pantalla-arbol .arbol-pantalla { height: calc(100dvh - 59px); }
    .franja-aviso { padding: 12px 14px 0; }
}

/* ── Mis árboles ───────────────────────────────────────────────────── */

.rejilla-arboles {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px; margin-top: 22px;
}

.tarjeta-arbol {
    position: relative;
    display: flex; flex-direction: column;
    padding: 20px; background: var(--papel);
    border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra-1);
    transition: box-shadow .2s var(--curva), border-color .2s;
}
.tarjeta-arbol:hover { box-shadow: var(--sombra-2); }
.tarjeta-arbol.activo { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-velo), var(--sombra-1); }
.tarjeta-arbol h3 { margin-bottom: 8px; font-size: 1.1rem; }

.ta-marca {
    position: absolute; top: 14px; right: 14px;
    padding: 2px 9px; border-radius: 20px;
    background: var(--acento); color: #fff;
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

.ta-datos { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; font-size: .85rem; color: var(--tinta-suave); }

.ta-acciones { margin-top: auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ta-acciones form { width: 100%; }
.ta-renombrar { display: flex; gap: 6px; }
.ta-renombrar input {
    flex: 1; min-width: 0; padding: 6px 10px;
    border: 1px solid var(--borde-fuerte); border-radius: var(--radio-s);
    background: var(--papel); color: var(--tinta); font-size: .85rem;
}
.ta-renombrar input:focus { outline: none; border-color: var(--acento); }

.tarjeta-arbol.nuevo { border-style: dashed; background: var(--papel-2); box-shadow: none; }
.tarjeta-arbol.nuevo .campo { margin-bottom: 10px; }

/* La diagonal que llega hasta quien consulta: es la respuesta a la pregunta,
   así que se ve distinta de los escalones intermedios. */
.diagrama-relacion.diagonal.final {
    background: var(--ambar);
    color: #fff;
    border-color: var(--ambar);
    border-style: solid;
    box-shadow: 0 2px 8px rgba(245, 158, 11, .35);
}


/* ==========================================================================
   Cabecera móvil y desplegables: que sigan la marca
   ========================================================================== */

@media (max-width: 900px) {
    .barra-movil {
        gap: 10px;
        background: linear-gradient(180deg,
                    color-mix(in srgb, var(--acento-velo) 70%, var(--papel)) 0%,
                    var(--papel) 100%);
        border-bottom: 1px solid color-mix(in srgb, var(--acento) 18%, var(--borde));
    }
    .bm-menu span { background: var(--acento-hondo); }

    .bm-marca {
        display: flex; align-items: center;
        color: var(--acento); flex-shrink: 0;
    }
    .bm-marca svg { width: 24px; height: 24px; }

    .bm-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
    .bm-arbol {
        font-family: var(--fuente); font-size: 1rem; font-weight: 600; color: var(--tinta);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .bm-detalle { font-size: .72rem; color: var(--tinta-tenue); }
}

/* ── Desplegables con la marca ─────────────────────────────────────── */
/* Los <select> nativos ignoran casi todo el estilo del sistema: se les quita
   la apariencia por defecto y se les pinta la flecha con un fondo SVG. */
select,
.campo select,
.selector-gen select,
.lista-buscador select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230b7f7e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    font-family: var(--fuente-ui);
    color: var(--tinta);
    cursor: pointer;
}
select:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--borde-fuerte)); }

/* El selector de generaciones de Ascendencia y Abanico */
.selector-gen {
    padding: 4px 4px 4px 12px;
    background: var(--acento-velo);
    border: 1px solid color-mix(in srgb, var(--acento) 24%, transparent);
    border-radius: 22px;
    color: var(--acento-hondo);
}
.selector-gen select {
    border: none; background-color: var(--papel);
    border-radius: 18px; padding: 5px 30px 5px 12px;
    font-weight: 600; color: var(--acento-hondo);
}
.selector-gen select:focus { outline: none; box-shadow: 0 0 0 3px var(--acento-velo); }

/* La barra de las vistas también lleva la marca */
.barra-vista { border-color: color-mix(in srgb, var(--acento) 15%, var(--borde)); }
.barra-titulo strong { color: var(--tinta); }

/* ==========================================================================
   Invitación a instalar la aplicación
   ========================================================================== */

.invitacion-instalar {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 120;
    display: flex; align-items: center; gap: 12px;
    max-width: 460px; margin: 0 auto;
    padding: 13px 14px;
    padding-bottom: calc(13px + env(safe-area-inset-bottom));
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-3);
    animation: subir .35s var(--curva) both;
}
.ii-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.ii-texto strong { font-size: .93rem; }
.ii-texto span { font-size: .78rem; color: var(--tinta-tenue); }

.ii-cerrar {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border: none; border-radius: 50%;
    background: transparent; color: var(--tinta-tenue);
    font-size: .8rem; cursor: pointer;
}
.ii-cerrar:hover { background: var(--fondo-2); color: var(--tinta); }

/* Instalada: se aprovecha el hueco de la barra de estado del sistema. */
@media (display-mode: standalone) {
    .barra-movil { padding-top: calc(10px + env(safe-area-inset-top)); }
    .menu-lateral { padding-top: calc(16px + env(safe-area-inset-top)); }
}

/* ==========================================================================
   Cabecera pública en móvil y modo aplicación
   ========================================================================== */

.solo-estrecho { display: none; }

@media (max-width: 640px) {
    /* La barra deja de desplazarse: con marca, «Entrar» y «Crear cuenta»
       hay de sobra, y «Cómo funciona» baja al pie y al botón de la portada. */
    .cabecera-publica { padding: 10px 12px; gap: 6px; }
    .cabecera-publica .marca { font-size: 1.02rem; gap: 6px; }
    .cabecera-publica .marca svg { width: 22px; height: 22px; }
    .cabecera-publica .nav { gap: 2px; flex-shrink: 0; }
    .cabecera-publica .nav a { padding: 7px 8px; font-size: .84rem; }
    /* Sin translate al pasar el dedo: en el borde derecho el botón se salía. */
    .cabecera-publica .nav .boton { padding: 8px 13px; font-size: .84rem; }
    .cabecera-publica .nav .boton:hover { transform: none; }
    .solo-ancho { display: none; }
    .solo-estrecho { display: inline; }

    .heroe { padding: 36px 0 30px; }
    .heroe h1 { font-size: 1.9rem; }
    .heroe .entradilla { font-size: .98rem; margin-bottom: 24px; }
    .heroe .acciones { flex-direction: column; align-items: center; gap: 10px; }
    .heroe .acciones .boton { width: 100%; max-width: 300px; }

    /* Los tres datos, en fila: apilados se comían media pantalla. */
    .franja-datos {
        display: grid; grid-template-columns: repeat(3, 1fr);
        gap: 10px; padding: 18px 0; margin: 26px 0;
    }
    .dato .cifra { font-size: 1.02rem; line-height: 1.25; }
    .dato .etiqueta { font-size: .62rem; letter-spacing: .04em; }

    .rejilla-3 { gap: 14px; margin: 34px 0; }
    .caracteristica { padding: 20px; }

    .pie { margin-top: 44px; }
    .pie .contenedor { justify-content: center; text-align: center; gap: 14px; }
}

/* Instalada como aplicación: fuera el escaparate, pero «Crear cuenta» se
   queda: alguien puede instalarla primero y registrarse después. */
.como-app .cabecera-publica .nav .solo-ancho,
.como-app .pie .solo-estrecho { display: none; }
.como-app .pie { margin-top: 28px; }

/* ==========================================================================
   Barras de desplazamiento ocultas
   --------------------------------------------------------------------------
   Se puede desplazar igual —rueda, dedo, teclado—, pero la barra no se pinta:
   en una aplicación de pantalla completa ensucia, sobre todo en los paneles
   estrechos y en las listas dentro de los diálogos.
   ========================================================================== */

* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ==========================================================================
   Acceso dentro de la aplicación instalada
   --------------------------------------------------------------------------
   Aquí no hay nada que vender: quien abre la aplicación quiere entrar. Se
   quita la cabecera de escaparate y la pantalla se ocupa entera, sin
   desplazamiento vertical.
   ========================================================================== */

.como-app.pantalla-acceso .cabecera-publica,
.como-app.pantalla-acceso .pie { display: none; }

.como-app.pantalla-acceso {
    min-height: 100dvh;
    background: linear-gradient(170deg, var(--acento-velo) 0%, var(--fondo) 46%);
}
.como-app.pantalla-acceso main {
    min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    padding-top: calc(20px + env(safe-area-inset-top));
}

/* La marca preside la pantalla, en lugar de la barra de navegación. */
.como-app.pantalla-acceso main::before {
    content: "";
    display: block;
    width: 76px; height: 76px;
    margin: 0 auto 10px;
    background: var(--acento);
    /* La máscara recorta el color con la forma del logo: se ve el árbol en
       turquesa, sin depender de que cargue ninguna imagen de color. */
    -webkit-mask: url("/assets/img/miorigo.svg") center / 62px 62px no-repeat;
    mask: url("/assets/img/miorigo.svg") center / 62px 62px no-repeat;
}
.como-app.pantalla-acceso main::after {
    content: "MiOrigo";
    display: block; order: -1;              /* el nombre, bajo el icono */
    margin: 0 auto 22px;
    font-family: var(--fuente); font-size: 1.45rem; font-weight: 600;
    color: var(--tinta); letter-spacing: -.02em; text-align: center;
}

.como-app.pantalla-acceso .panel-acceso {
    margin: 0 auto;
    width: 100%; max-width: 400px;
    padding: 26px 22px;
    border-radius: 18px;
    box-shadow: var(--sombra-2);
    animation: none;
}
.como-app.pantalla-acceso .panel-acceso h1 { font-size: 1.42rem; text-align: center; }
.como-app.pantalla-acceso .panel-acceso .sub { text-align: center; margin-bottom: 20px; }

/* Formulario más compacto para que quepa sin desplazar. */
.como-app.pantalla-acceso .campo { margin-bottom: 13px; }
.como-app.pantalla-acceso .campo label { margin-bottom: 4px; font-size: .82rem; }
.como-app.pantalla-acceso .campo input { padding: 11px 13px; }
.como-app.pantalla-acceso .campos-fila { gap: 10px; }
.como-app.pantalla-acceso .aviso { padding: 10px 13px; font-size: .88rem; }

/* El icono de la marca no debe verse dos veces. */
.como-app.pantalla-acceso .panel-acceso .marca { display: none; }

/* Pantallas bajas: la marca y los espacios ceden para que el acceso quepa
   entero. El registro tiene cinco campos y en un móvil pequeño acabará
   desplazándose de todos modos; al menos la barra no se ve. */
@media (max-height: 720px) {
    .como-app.pantalla-acceso main { padding-top: calc(12px + env(safe-area-inset-top)); }
    .como-app.pantalla-acceso main::before { width: 56px; height: 56px; margin-bottom: 6px;
        -webkit-mask-size: 46px 46px; mask-size: 46px 46px; }
    .como-app.pantalla-acceso main::after { font-size: 1.2rem; margin-bottom: 14px; }
    .como-app.pantalla-acceso .panel-acceso { padding: 20px 18px; }
    .como-app.pantalla-acceso .panel-acceso h1 { font-size: 1.28rem; margin-bottom: 4px; }
    .como-app.pantalla-acceso .panel-acceso .sub { margin-bottom: 15px; font-size: .88rem; }
    .como-app.pantalla-acceso .campo { margin-bottom: 11px; }
}

@media (max-height: 620px) {
    .como-app.pantalla-acceso main::before { width: 44px; height: 44px; margin-bottom: 4px;
        -webkit-mask-size: 36px 36px; mask-size: 36px 36px; }
    .como-app.pantalla-acceso main::after { font-size: 1.05rem; margin-bottom: 10px; }
    .como-app.pantalla-acceso .panel-acceso { padding: 16px 16px; }
    .como-app.pantalla-acceso .panel-acceso .sub { margin-bottom: 12px; }
    .como-app.pantalla-acceso .campo { margin-bottom: 9px; }
    .como-app.pantalla-acceso .campo label { margin-bottom: 3px; }
    .como-app.pantalla-acceso .campo input { padding: 9px 12px; }
    .como-app.pantalla-acceso .campo .ayuda { display: none; }
}

/* ── Participantes del árbol ──────────────────────────────────────────── */

.pagina-participantes { padding: 28px 24px 48px; max-width: 940px; }
.pp-entradilla { color: var(--tinta-suave); margin-top: -6px; max-width: 62ch; }

.pp-titulo {
    display: flex; align-items: center; gap: 10px;
    margin: 34px 0 14px; font-size: 1.12rem;
}
.pp-cuenta {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 22px; padding: 0 7px;
    background: var(--acento-velo); color: var(--acento-hondo);
    border-radius: 20px; font-size: .78rem; font-weight: 700;
}

.pp-lista { display: grid; gap: 12px; }

.pp-ficha {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio-m);
    padding: 16px 18px;
    box-shadow: var(--sombra-1);
}
.pp-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pp-quien h3 { margin: 0; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; }
.pp-tu {
    padding: 1px 8px; border-radius: 20px;
    background: var(--acento); color: #fff;
    font-family: var(--fuente-texto); font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
}
.pp-email { margin: 3px 0 0; font-size: .84rem; color: var(--tinta-tenue); }
.pp-sitio { margin: 7px 0 0; font-size: .89rem; color: var(--tinta-suave); }
.pp-suelto { color: var(--ambar-hondo, #b45309); }

/* El permiso, siempre visible y con el mismo sitio en todas las fichas. */
.pp-rol {
    flex: none;
    padding: 4px 11px; border-radius: 20px;
    font-size: .74rem; font-weight: 700; white-space: nowrap;
    background: var(--fondo-suave); color: var(--tinta-suave);
    border: 1px solid var(--borde);
}
.pp-rol.rol-propietario   { background: var(--ambar-velo); color: #b45309; border-color: transparent; }
.pp-rol.rol-administrador { background: var(--acento-velo); color: var(--acento-hondo); border-color: transparent; }

.pp-aportes {
    margin-top: 14px; padding-top: 13px;
    border-top: 1px dashed var(--borde);
}
.pp-total { display: flex; align-items: baseline; gap: 7px; }
.pp-total strong { font-family: var(--fuente); font-size: 1.5rem; color: var(--acento-hondo); }
.pp-total span { font-size: .86rem; color: var(--tinta-suave); }

.pp-detalle {
    list-style: none; margin: 9px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.pp-detalle li {
    padding: 3px 10px; border-radius: 20px;
    background: var(--fondo-suave);
    font-size: .8rem; color: var(--tinta-suave);
}
.pp-detalle strong { color: var(--tinta); }
.pp-nada, .pp-ultima { margin: 8px 0 0; font-size: .82rem; color: var(--tinta-tenue); }

.pp-acciones {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--borde);
}
.pp-cambiar { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; }
.pp-cambiar span { font-size: .78rem; color: var(--tinta-tenue); font-weight: 600; }
.pp-cambiar select {
    width: 100%; padding: 8px 11px;
    border: 1px solid var(--borde-fuerte); border-radius: var(--radio-s);
    background: var(--papel); color: var(--tinta); font-size: .88rem;
}

/* ── Invitaciones ─────────────────────────────────────────────────────── */

.pp-vacio { color: var(--tinta-suave); max-width: 62ch; }
.pp-invitaciones { display: grid; gap: 10px; }

.pp-inv {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--borde-fuerte);
    border-radius: var(--radio-m);
    padding: 13px 16px;
}
.pp-inv.estado-espera { border-left-color: var(--acento); }
.pp-inv.estado-bien   { border-left-color: #16a34a; }
.pp-inv.estado-aviso,
.pp-inv.estado-mal    { border-left-color: var(--ambar); }
/* Lo caducado y lo anulado se queda como registro, sin llamar la atención. */
.pp-inv.estado-apagado { opacity: .62; }

.pp-inv-datos h4 { margin: 0; font-size: .97rem; }
.pp-inv-pie { margin: 4px 0 0; font-size: .8rem; color: var(--tinta-tenue); }
.pp-inv-lado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pp-inv-acciones { display: flex; gap: 6px; }

.pp-estado {
    padding: 3px 11px; border-radius: 20px; white-space: nowrap;
    font-size: .74rem; font-weight: 700;
    background: var(--fondo-suave); color: var(--tinta-suave);
}
.pp-estado.espera { background: var(--acento-velo); color: var(--acento-hondo); }
.pp-estado.bien   { background: #dcfce7; color: #15803d; }
.pp-estado.aviso,
.pp-estado.mal    { background: var(--ambar-velo); color: #b45309; }

@media (max-width: 720px) {
    .pagina-participantes { padding: 20px 16px 40px; }
    .pp-cabecera { flex-direction: column; gap: 8px; }
    .pp-rol { align-self: flex-start; }
    /* En un móvil la invitación no cabe en una línea: pasa a dos bloques. */
    .pp-inv { flex-direction: column; align-items: stretch; }
    .pp-inv-lado { justify-content: space-between; }
}