/* V1.3.3: la aplicación ocupa prácticamente todo el ancho del navegador, incluso dentro de contenedores WordPress con max-width. */
#fam-app {
    width:calc(100vw - 16px);
    max-width:none;
    margin-left:calc(50% - 50vw + 8px);
    margin-right:8px;
}
.fam-danger {
    color:#b42318;
    border-color:#f1b5b0;
    background:#fff;
}
.fam-danger:hover {
    color:#8f1d14;
    border-color:#d92d20;
    background:#fff5f4;
}
.fam-form-actions-spacer {
    flex:1;
}
#fam-app {
    --fam-bg: #f4f6f8;
    --fam-card: #fff;
    --fam-text: #1d2939;
    --fam-muted: #667085;
    --fam-border: #d9dee7;
    --fam-primary: #276749;
    --fam-primary-dark: #1f5139;
    --fam-shadow: 0 10px 30px rgba(16,24,40,.08);
    color: var(--fam-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--fam-bg);
    border: 1px solid var(--fam-border);
    border-radius: 16px;
    overflow: hidden;
    min-height: 760px;
}
#fam-app * {
    box-sizing: border-box;
}
.fam-topbar {
    min-height: 72px;
    background:#fff;
    border-bottom:1px solid var(--fam-border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:12px 18px;
}
.fam-brand {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:210px;
}
.fam-logo {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    font-size:22px;
}
.fam-brand strong {
    display:block;
    font-size:15px;
}
.fam-brand small {
    display:block;
    color:var(--fam-muted);
    margin-top:2px;
}
.fam-actions,.fam-toolbar-actions,.fam-empty-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
}
.fam-actions {
    white-space:nowrap;
}
.fam-btn {
    appearance:none;
    border:1px solid var(--fam-border);
    background:#fff;
    color:var(--fam-text);
    padding:9px 13px;
    border-radius:9px;
    cursor:pointer;
    font-weight:600;
    font-size:13px;
}
.fam-btn:hover {
    border-color:#aab2bf;
    background:#f8fafc;
}
.fam-btn.fam-primary {
    background:var(--fam-primary);
    color:#fff;
    border-color:var(--fam-primary);
}
.fam-btn.fam-primary:hover {
    background:var(--fam-primary-dark);
    border-color:var(--fam-primary-dark);
}
.fam-file-picker {
    display:inline-flex;
    align-items:center;
    margin:0;
}
.fam-file-picker input[type="file"] {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
#fam-import-file-input {
    /* Oculto de forma explícita: el atributo hidden por sí solo puede quedar
       anulado por reglas del tema de WordPress con más prioridad. */
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}
.fam-layout {
    display:grid;
    grid-template-columns:290px 1fr;
    min-height:685px;
    position:relative;
    transition:grid-template-columns .2s ease;
}
.fam-layout.fam-sidebar-collapsed {
    grid-template-columns:0 1fr;
}
.fam-sidebar {
    background:#fbfcfd;
    border-right:1px solid var(--fam-border);
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.fam-workspace {
    /* Fijado explícitamente a la segunda columna: al ocultar el panel con
       display:none, deja de "participar" en la rejilla, y si no se fija
       aquí, el área de trabajo pasa a colocarse automáticamente en la
       primera columna (la de 0px cuando el panel está plegado), quedando
       invisible aunque su contenido esté bien calculado. */
    grid-column:2;
}
.fam-layout.fam-sidebar-collapsed .fam-sidebar {
    display:none;
}
.fam-sidebar-toggle {
    /* Fijo a la pantalla (no al contenido): así siempre está a la vista,
       centrado verticalmente, y nunca tapa ningún texto del panel ni de la
       cabecera, sea cual sea el alto del árbol o cuánto se haya desplazado
       la página. */
    position:fixed;
    top:50%;
    left:0;
    transform:translateY(-50%);
    z-index:50;
    width:20px;
    height:68px;
    border-radius:0 12px 12px 0;
    border:1px solid var(--fam-border);
    border-left:none;
    background:var(--fam-primary);
    box-shadow:2px 0 10px rgba(16,24,40,.25);
    cursor:pointer;
    font-size:15px;
    font-weight:700;
    line-height:1;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:width .15s ease, box-shadow .15s ease;
}
.fam-sidebar-toggle:hover {
    width:25px;
    box-shadow:3px 0 14px rgba(16,24,40,.3);
}
.fam-sidebar-toggle:active {
    width:18px;
}
.fam-panel {
    background:#fff;
    border:1px solid var(--fam-border);
    border-radius:12px;
    padding:12px;
}
.fam-panel-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:10px;
}
.fam-panel-title h2 {
    margin:0;
    font-size:14px;
}
.fam-icon-btn {
    width:30px;
    height:30px;
    border:1px solid var(--fam-border);
    border-radius:8px;
    background:#fff;
    cursor:pointer;
    font-size:18px;
    line-height:1;
}
.fam-list {
    display:flex;
    flex-direction:column;
    gap:4px;
    max-height:260px;
    overflow:auto;
}
.fam-list-item {
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    text-align:left;
    border:0;
    background:transparent;
    padding:9px;
    border-radius:8px;
    cursor:pointer;
    color:inherit;
}
.fam-list-item:hover,.fam-list-item.active {
    background:#edf7f0;
}
.fam-list-item small {
    color:var(--fam-muted);
    display:block;
}
.fam-person-avatar {
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    background:#e8eef5;
    border-radius:50%;
    flex:none;
}
.fam-input {
    width:100%;
    border:1px solid var(--fam-border);
    border-radius:8px;
    padding:9px 10px;
    background:#fff;
    margin-bottom:8px;
}
.fam-help {
    margin-top:auto;
    color:var(--fam-muted);
    font-size:12px;
}
.fam-help strong {
    color:var(--fam-text);
}
.fam-help p {
    margin:6px 0 0;
    line-height:1.45;
}
.fam-workspace {
    min-width:0;
    padding:18px;
}
.fam-empty {
    min-height:640px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    padding:30px;
}
.fam-empty[hidden] {
    display:none;
}
.fam-empty-icon {
    margin-bottom:8px;
}
.fam-empty h1 {
    margin:0 0 8px;
    font-size:28px;
}
.fam-empty p {
    color:var(--fam-muted);
    max-width:540px;
}
.fam-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:14px;
    flex-wrap:wrap;
}
.fam-toolbar > div:first-child {
    flex-shrink:0;
    min-width:max-content;
}
.fam-toolbar h1 {
    margin:2px 0 0;
    font-size:25px;
}
.fam-eyebrow {
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:10px;
    color:var(--fam-muted);
    font-weight:700;
}
.fam-tree-card {
    background:#fff;
    border:1px solid var(--fam-border);
    border-radius:14px;
    box-shadow:var(--fam-shadow);
    overflow:hidden;
}
.fam-tree-view {
    min-height:420px;
    overflow:auto;
    padding:28px;
    background:radial-gradient(circle at center, #fff, #f8fafc);
    /* Permite el desplazamiento normal con el dedo (arrastrar), pero deja
       que el propio JavaScript gestione el gesto de pellizcar para hacer
       zoom, en vez de que el navegador amplíe la página entera. */
    touch-action:pan-x pan-y;
}
.fam-tree-placeholder {
    min-height:360px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--fam-muted);
}
.fam-tree-placeholder span {
    font-size:46px;
}
.fam-tree-placeholder p {
    margin:8px 0 14px;
}
.fam-tree-canvas {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    min-width:max-content;
}
.fam-node {
    background:#fff;
    border:1px solid #cfd7e3;
    border-radius:12px;
    padding:11px 13px;
    box-shadow:0 5px 16px rgba(16,24,40,.07);
    cursor:pointer;
    text-align:center;
}
.fam-node:hover {
    border-color:var(--fam-primary);
    transform:translateY(-1px);
}
.fam-node-name {
    font-weight:700;
    font-size:14px;
    line-height:1.15;
}
.fam-node-meta {
    color:var(--fam-muted);
    font-size:11px;
    line-height:1;
    margin-top:3px;
}
.fam-node-recovered-note,.fam-recovered-inline {
    color:#8a6d0f;
    font-weight:700;
}
.fam-children {
    display:flex;
    gap:18px;
    align-items:flex-start;
    position:relative;
}
.fam-children:before {
    content:"";
    position:absolute;
    top:-10px;
    left:50%;
    width:1px;
    height:10px;
    background:#cfd7e3;
}
.fam-child-wrap {
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    padding-top:10px;
}
.fam-child-wrap:before {
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:1px;
    height:10px;
    background:#cfd7e3;
}
.fam-detail {
    margin-top:14px;
    background:#fff;
    border:1px solid var(--fam-border);
    border-radius:14px;
    padding:18px;
}
.fam-detail-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}
.fam-detail h2 {
    margin:2px 0 0;
}
.fam-detail-layout {
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-top:15px;
}
.fam-detail-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    flex:1;
    align-content:start;
}
.fam-info {
    border:1px solid var(--fam-border);
    border-radius:10px;
    padding:12px;
}
.fam-info label {
    display:block;
    color:var(--fam-muted);
    font-size:11px;
    margin-bottom:4px;
}
.fam-info strong {
    font-size:13px;
}
.fam-modal {
    position:fixed;
    inset:0;
    z-index:999999;
    display:grid;
    place-items:center;
    padding:20px;
}
.fam-modal[hidden] {
    display:none;
}
.fam-modal-backdrop {
    position:absolute;
    inset:0;
    background:rgba(16,24,40,.45);
}
.fam-modal-dialog {
    position:relative;
    width:min(680px,100%);
    max-height:90vh;
    overflow:auto;
    background:#fff;
    border-radius:16px;
    box-shadow:0 24px 80px rgba(0,0,0,.25);
}
.fam-modal-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    border-bottom:1px solid var(--fam-border);
}
.fam-modal-head h2 {
    margin:0;
    font-size:18px;
}
.fam-form {
    padding:18px;
    display:grid;
    gap:13px;
}
.fam-form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.fam-field {
    display:grid;
    gap:6px;
}
.fam-field label {
    font-size:12px;
    font-weight:700;
}
.fam-field input,.fam-field select,.fam-field textarea {
    width:100%;
    border:1px solid var(--fam-border);
    border-radius:8px;
    padding:9px 10px;
    font:inherit;
}
.fam-field textarea {
    min-height:90px;
    resize:vertical;
}
.fam-form-actions {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding-top:4px;
}
.fam-status {
    position:fixed;
    z-index:1000000;
    right:20px;
    bottom:20px;
    background:#17202a;
    color:#fff;
    padding:10px 14px;
    border-radius:9px;
    box-shadow:var(--fam-shadow);
    font-size:13px;
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition:.2s;
}
.fam-status.show {
    opacity:1;
    transform:translateY(0);
}
.fam-status.error {
    background:#9b2c2c;
}
@media (max-width: 850px) {
    #fam-app {
        width:100vw;
        margin-left:calc(50% - 50vw);
        margin-right:0;
    }
    /* En móvil el panel siempre está por encima del árbol, en el flujo
       normal de la página (no al lado, superpuesto a nada) — plegarlo no
       aporta gran cosa, y basta con desplazarse hacia abajo para llegar al
       árbol. Se oculta el botón y se fuerza a que el panel esté siempre
       visible, sin depender de si se había plegado antes (en el propio
       móvil o en un ordenador, ya que la preferencia se comparte). */
    .fam-sidebar-toggle {
        display:none;
    }
    .fam-layout.fam-sidebar-collapsed .fam-sidebar {
        display:flex;
    }
    .fam-workspace {
        padding:8px;
    }
    .fam-tree-view {
        padding:8px 1px;
    }
    .fam-tree-card {
        /* Contrarresta el relleno del área de trabajo (8px), dejando solo
           1px de margen lateral para el marco del árbol — que, al ser un
           gráfico ancho, agradece aprovechar cada píxel disponible. */
        margin-left:-7px;
        margin-right:-7px;
    }
    .fam-toolbar-actions {
        /* La regla para pantallas medianas (hasta 1050px) alinea los botones
           a la derecha; en móvil, con una sola columna, eso deja un hueco
           vacío grande a la izquierda en vez de aprovechar el espacio.
           Necesita !important porque esa otra regla aparece más abajo en
           la hoja de estilos y, con la misma especificidad, ganaría ella. */
        justify-content:flex-start !important;
    }
    .fam-photo-stages {
        flex-direction:column;
    }
    .fam-topbar {
        align-items:flex-start;
        flex-direction:column;
    }
    .fam-actions {
        flex-wrap:wrap;
    }
    .fam-layout {
        grid-template-columns:1fr;
    }
    .fam-layout.fam-sidebar-collapsed {
        /* Sin esto, la regla de escritorio (0px 1fr) gana por tener más
           especificidad y vuelve a crear dos columnas también en móvil. */
        grid-template-columns:1fr;
    }
    .fam-workspace {
        /* En móvil la rejilla tiene una sola columna: si se mantiene fijo en
           la columna 2 (fijado para el plegado del panel en escritorio), se
           crea una columna adicional y el panel y el árbol quedan lado a
           lado repartiéndose la pantalla, en vez de apilados. */
        grid-column:auto;
    }
    .fam-sidebar {
        border-right:0;
        border-bottom:1px solid var(--fam-border);
    }
    .fam-list {
        max-height:180px;
    }
    .fam-detail-grid {
        grid-template-columns:1fr;
    }
    .fam-detail-layout {
        flex-direction:column;
    }
    .fam-form-row {
        grid-template-columns:1fr;
    }
    .fam-toolbar {
        align-items:flex-start;
        flex-direction:column;
    }
}
.fam-dazzling-circle {
    position:relative;
    width:40px;
    height:40px;
    flex:none;
    display:block;
    border-radius:50%;
    background:transparent;
    overflow:visible;
    filter:drop-shadow(0 0 5px rgba(255,255,255,.95)) drop-shadow(0 0 12px rgba(110,150,255,.72));
}
.fam-dazzling-circle::before {
    content:"";
    position:absolute;
    inset:1px;
    border-radius:50%;
    background:conic-gradient(from 215deg,        #dffcff 0deg,        #a8eaff 45deg,        #7b72ff 125deg,        #cf75ff 190deg,        #ffb6ef 245deg,        #8fdcff 310deg,        #dffcff 360deg    );
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    box-shadow:0 0 5px rgba(255,255,255,.95), 0 0 12px rgba(105,173,255,.9), 0 0 25px rgba(151,91,255,.58), 0 0 34px rgba(255,150,224,.24);
    pointer-events:none;
}
.fam-dazzling-circle::after {
    content:"";
    position:absolute;
    inset:-9px;
    border-radius:50%;
    background:        radial-gradient(circle at 18% 25%, rgba(255,255,255,.98) 0 1.5px, transparent 2.8px),        radial-gradient(circle at 81% 23%, rgba(255,255,255,.95) 0 1.3px, transparent 2.6px),        radial-gradient(circle at 79% 78%, rgba(255,255,255,.9) 0 1.2px, transparent 2.5px),        radial-gradient(circle at 22% 80%, rgba(190,235,255,.82) 0 1px, transparent 2.4px);
    pointer-events:none;
}
.fam-dazzling-circle-large {
    width:82px;
    height:82px;
    margin-bottom:14px;
    filter:drop-shadow(0 0 7px rgba(255,255,255,.98)) drop-shadow(0 0 17px rgba(105,173,255,.8)) drop-shadow(0 0 32px rgba(151,91,255,.48));
}
.fam-dazzling-circle-large::before {
    inset:1px;
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 5px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 5px));
}
.fam-dazzling-circle-large::after {
    inset:-14px;
}
.fam-sparkle {
    position:absolute;
    color:#fff;
    text-shadow:0 0 7px rgba(255,255,255,.95), 0 0 14px rgba(126,87,255,.65);
    line-height:1;
    z-index:2;
}
.fam-sparkle-1 {
    top:-13px;
    right:-11px;
    font-size:22px;
}
.fam-sparkle-2 {
    bottom:-10px;
    left:-12px;
    font-size:17px;
}
.fam-sparkle-3 {
    top:18%;
    left:-14px;
    font-size:13px;
}
.fam-mini-circle {
    width:18px;
    height:18px;
    display:inline-block;
    border-radius:50%;
    background:conic-gradient(from 215deg, #dffcff, #8fdcff, #7b72ff, #cf75ff, #ffb6ef, #8fdcff, #dffcff);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    box-shadow:0 0 5px rgba(126,173,255,.55), 0 0 9px rgba(151,91,255,.32);
    flex:none;
}
.fam-field input::placeholder {
    color:#98a2b3;
    opacity:1;
}
.fam-photo-stages {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:4px;
}
.fam-photo-stage {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    flex:1 1 140px;
    min-width:120px;
}
.fam-photo-stage label {
    font-size:12px;
    font-weight:700;
    color:var(--fam-muted);
}
.fam-photo-stage input[type="file"] {
    font-size:11px;
    max-width:100%;
}
.fam-photo-preview {
    width:96px;
    height:96px;
    margin-top:4px;
    border:1px solid var(--fam-border);
    border-radius:10px;
    overflow:hidden;
    background:#f8fafc;
    display:grid;
    place-items:center;
}
.fam-photo-preview img, .fam-photo-detail img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.fam-photo-remove {
    margin-top:6px;
    font-size:12px;
    padding:6px 9px;
}
.fam-photo-detail {
    max-width:180px;
    flex:0 0 auto;
}
.fam-photo-detail label {
    display:block;
    color:var(--fam-muted);
    font-size:11px;
    margin-bottom:4px;
}
.fam-photo-detail img {
    width:120px;
    height:120px;
    border-radius:12px;
    margin-top:6px;
    object-fit:cover;
}
/* V2: eclipse, responsibility, dual-parent graph and list mode */
.fam-eclipse-logo {
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    box-shadow:0 0 12px rgba(0,0,0,.22);
}
.fam-eclipse-large {
    width:82px;
    height:82px;
    margin-bottom:14px;
    border-radius:50%;
    overflow:hidden;
    box-shadow:0 0 24px rgba(0,0,0,.18);
}
.fam-eclipse-large img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.fam-mini-eclipse {
    width:26px;
    height:26px;
    border-radius:50%;
    object-fit:cover;
    display:block;
}
.fam-responsibility-status {
    display:grid;
    gap:14px;
}
.fam-responsibility-status>div {
    display:grid;
    gap:3px;
}
.fam-responsibility-status strong {
    font-size:12px;
}
.fam-responsibility-status .fam-eyebrow {
    font-size:9px;
}
.fam-responsibility-group {
    display:grid;
    gap:6px;
}
.fam-responsibility-group-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
.fam-icon-btn-small {
    width:22px;
    height:22px;
    font-size:13px;
    border-radius:6px;
}
.fam-responsibility-chips {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.fam-responsibility-chip {
    border:1px solid var(--fam-border);
    background:#fff;
    border-radius:999px;
    padding:3px 10px;
    font-size:11px;
    cursor:pointer;
}
.fam-responsibility-chip:hover {
    background:#f3f6f9;
}
.fam-responsibility-missing {
    font-size:11px;
    color:#c53030;
}
.fam-view-switch {
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
    cursor:pointer;
}
.fam-view-selector {
    display:inline-flex;
    border:1px solid var(--fam-border);
    border-radius:10px;
    overflow:hidden;
    background:#fff;
}
.fam-view-btn {
    border:none;
    background:transparent;
    padding:8px 12px;
    font-size:11px;
    font-weight:700;
    color:var(--fam-muted);
    cursor:pointer;
    white-space:nowrap;
    border-right:1px solid var(--fam-border);
}
.fam-view-btn:last-child {
    border-right:none;
}
.fam-view-btn:hover {
    background:#f3f6f9;
}
.fam-view-btn.active {
    background:var(--fam-primary);
    color:#fff;
}
.fam-zoom-controls {
    display:inline-flex;
    border:1px solid var(--fam-border);
    border-radius:10px;
    overflow:hidden;
    background:#fff;
}
.fam-zoom-btn {
    border:none;
    background:transparent;
    border-radius:0;
    padding:8px 14px;
    font-size:15px;
    font-weight:700;
    color:var(--fam-text);
    cursor:pointer;
    border-right:1px solid var(--fam-border);
    box-shadow:none;
}
.fam-zoom-btn:last-child {
    border-right:none;
}
.fam-zoom-btn:hover {
    background:#f3f6f9;
}
.fam-zoom-wrapper {
    position:relative;
}
.fam-view-switch .fam-switch {
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.fam-switch-slider {
    width:36px;
    height:20px;
    background:#cbd5e1;
    border-radius:999px;
    position:relative;
    transition:.2s;
    flex:none;
}
.fam-switch-slider:before {
    content:"";
    position:absolute;
    width:16px;
    height:16px;
    left:2px;
    top:2px;
    background:#fff;
    border-radius:50%;
    transition:.2s;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.fam-view-switch input:checked + .fam-switch-slider {
    background:var(--fam-primary);
}
.fam-view-switch input:checked + .fam-switch-slider:before {
    transform:translateX(16px);
}
.fam-switch-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border:1px solid var(--fam-border);
    border-radius:10px;
    padding:10px 12px;
}
.fam-switch-row span {
    display:grid;
    gap:2px;
}
.fam-switch-row small {
    color:var(--fam-muted);
}
.fam-switch {
    appearance:none;
    width:42px;
    height:24px;
    border-radius:999px;
    background:#cbd5e1;
    position:relative;
    cursor:pointer;
    flex:none;
}
.fam-switch:before {
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    top:3px;
    left:3px;
    background:#fff;
    border-radius:50%;
    transition:.2s;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.fam-switch:checked {
    background:var(--fam-primary);
}
.fam-switch:checked:before {
    transform:translateX(18px);
}
.fam-switch:disabled {
    opacity:.5;
    cursor:not-allowed;
}
.fam-section-title {
    font-size:13px;
    font-weight:800;
    padding-top:4px;
    border-top:1px solid var(--fam-border);
}
.fam-required {
    color:#c53030;
    font-size:11px;
}
.fam-location-box {
    border:1px solid var(--fam-border);
    border-radius:10px;
    padding:12px;
    display:grid;
    gap:10px;
}
.fam-gps-row {
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:8px;
}
.fam-help-inline {
    color:var(--fam-muted);
    font-size:11px;
}
.fam-map {
    height:280px;
    border:1px solid var(--fam-border);
    border-radius:10px;
    overflow:hidden;
}
.fam-graph-canvas {
    position:relative;
    padding:0;
}
.fam-generation-label {
    position:absolute;
    left:0;
    color:var(--fam-muted);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:800;
    z-index:2;
}
.fam-node {
    position:absolute;
    z-index:3;
    box-sizing:border-box;
    height:auto;
    min-height:56px;
}
.fam-node-actions {
    position:absolute;
    top:-14px;
    right:6px;
    display:flex;
    gap:3px;
    opacity:0;
    transition:opacity .15s;
}
.fam-node:hover .fam-node-actions,.fam-node:focus-within .fam-node-actions {
    opacity:1;
}
.fam-node-isolate {
    position:absolute;
    top:-14px;
    left:6px;
    width:22px;
    height:22px;
    border-radius:50%;
    border:1px solid var(--fam-border);
    background:#fff;
    font-size:11px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(16,24,40,.12);
    opacity:0;
    transition:opacity .15s;
    z-index:4;
}
.fam-node:hover .fam-node-isolate,.fam-node:focus-within .fam-node-isolate,.fam-node-isolate.active {
    opacity:1;
}
.fam-node-isolate.active {
    background:var(--fam-primary);
    color:#fff;
    border-color:var(--fam-primary);
}
.fam-node-echo {
    opacity:.75;
    background:#f3f6f9;
    box-shadow:none;
    z-index:2;
    border-style:dashed;
}
.fam-node-echo:hover {
    opacity:.95;
}
.fam-node-stacked {
    opacity:.8;
    box-shadow:0 2px 8px rgba(16,24,40,.15);
    z-index:2;
}
.fam-node-stacked:hover {
    opacity:1;
}
.fam-node-echo-badge {
    position:absolute;
    bottom:-9px;
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    border:1px solid var(--fam-border);
    border-radius:999px;
    font-size:9px;
    padding:1px 7px;
    color:var(--fam-muted);
    white-space:nowrap;
}
.fam-node-peek {
    opacity:.75;
    background:#f3f6f9;
    box-shadow:none;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:flex-end;
    text-align:right;
    padding:8px;
}
.fam-node-bring-front {
    opacity:1 !important;
    z-index:9 !important;
    box-shadow:0 10px 24px rgba(16,24,40,.28) !important;
}
.fam-isolate-banner {
    background:#eef3fb;
    border:1px solid #cfe0f5;
    border-radius:10px;
    padding:8px 14px;
    margin-bottom:10px;
    font-size:12px;
    display:flex;
    align-items:center;
    gap:10px;
}
.fam-isolate-banner button {
    border:1px solid var(--fam-primary);
    background:#fff;
    color:var(--fam-primary);
    border-radius:8px;
    padding:4px 10px;
    font-size:11px;
    cursor:pointer;
    font-weight:700;
}
.fam-node-icon {
    width:24px;
    height:24px;
    border-radius:50%;
    border:1px solid var(--fam-border);
    background:#fff;
    font-size:12px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(16,24,40,.12);
}
.fam-node-icon:hover {
    border-color:var(--fam-primary);
}
.fam-node-icon-danger:hover {
    border-color:#b42318;
    color:#b42318;
    background:#fff5f4;
}
.fam-node-photo {
    display:flex;
    flex-direction:column;
    padding:0;
    text-align:left;
}
.fam-node-photo-img {
    flex:0 0 auto;
    height:56%;
    background:#e3e8ee;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:11px 11px 0 0;
}
.fam-node-photo-img img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.fam-node-photo-placeholder {
    font-size:34px;
    color:#aab4c0;
}
.fam-node-photo-info {
    padding:8px 10px;
    overflow:hidden;
    flex:1 1 auto;
    min-height:0;
}
.fam-node-photo-info .fam-node-name {
    font-size:12.5px;
    line-height:1.15;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.fam-node-photo-info .fam-node-meta {
    font-size:10px;
    line-height:1;
    margin-top:2px;
    text-align:center;
}
.fam-connectors {
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:visible;
}
.fam-connector {
    fill:none;
    stroke:#98a2b3;
    stroke-width:2;
}
.fam-partner-connector {
    stroke-dasharray:4 3;
}
.fam-coparent-rings circle {
    fill:none;
    stroke:#5b6b7c;
    stroke-width:1.4;
}
.fam-node-role {
    border-width:3px;
    border-color:#a8d5ba;
    box-shadow:0 5px 16px rgba(16,24,40,.07),0 0 0 1px #a8d5ba inset;
}
.fam-node-deceased {
    border-color:#c9a227;
    box-shadow:0 0 0 2px #d9b93c,0 0 0 5px rgba(217,185,60,.45),0 0 20px 5px rgba(255,215,80,.6);
}
.fam-node-deceased.fam-node-role {
    box-shadow:0 0 0 2px #a8d5ba,0 0 0 5px rgba(217,185,60,.45),0 0 20px 5px rgba(255,215,80,.6);
}
.fam-list-view {
    min-width:1100px;
}
.fam-list-sortbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
    flex-wrap:wrap;
}
.fam-table-wrap {
    border:1px solid var(--fam-border);
    border-radius:10px;
}
.fam-data-table {
    border-collapse:collapse;
    width:100%;
    font-size:12px;
    background:#fff;
}
.fam-data-table th,.fam-data-table td {
    border-bottom:1px solid var(--fam-border);
    padding:9px 10px;
    text-align:left;
    vertical-align:top;
    white-space:nowrap;
}
.fam-data-table th {
    background:#f8fafc;
    font-size:11px;
}
.fam-data-table tbody tr {
    cursor:pointer;
}
.fam-data-table tbody tr:hover {
    background:#f8fbf9;
}
.fam-row-deceased {
    background:#f6f1fa;
    border-left:3px solid #8c6ebe;
}
.fam-row-alive {
    background:#f2faf5;
    border-left:3px solid #5fae7c;
}
.fam-row-deceased:hover {
    background:#efe7f7;
}
.fam-row-alive:hover {
    background:#e9f7ee;
}
.fam-row-recovered {
    /* Mismo dorado que usa el árbol para las personas fallecidas: al
       marcar aquí a alguien como recuperada, ese dorado "se traslada" de su
       recuadro en el árbol a su fila en esta lista. */
    background:#fbeeba;
    border-left:3px solid #c9a227;
    box-shadow:inset 0 0 0 1px rgba(217,185,60,.5);
}
.fam-row-recovered:hover {
    background:#f8e5a0;
}
.fam-recover-toggle {
    width:22px;
    height:22px;
    border-radius:50%;
    border:1px solid var(--fam-border);
    background:#fff;
    font-size:12px;
    line-height:1;
    cursor:pointer;
    margin-right:8px;
    vertical-align:middle;
}
.fam-recover-toggle:hover {
    border-color:#c9a227;
}
.fam-recover-toggle.active {
    border-color:#c9a227;
    background:#fbeeba;
    color:#8a6d0f;
}
.fam-recover-toggle-spacer {
    display:inline-block;
    width:22px;
    margin-right:8px;
}
.fam-toolbar-actions {
    flex-wrap:wrap;
}
@media(max-width:1050px) {
    .fam-toolbar-actions {
        justify-content:flex-end;
    }
    .fam-gps-row {
        grid-template-columns:1fr 1fr;
    }
    .fam-gps-row .fam-btn {
        grid-column:1/-1;
    }
}
/* V1.3: transparencia del eclipse, relaciones editables y tabla sin solapamientos */
.fam-eclipse-logo,.fam-eclipse-large img,.fam-mini-eclipse {
    background:transparent;
    object-fit:contain;
}
.fam-eclipse-large {
    background:transparent;
}
.fam-field select[multiple] {
    min-height:96px;
    padding:6px 8px;
}
.fam-data-table {
    min-width:1700px;
    table-layout:auto;
}
.fam-data-table th:first-child,.fam-data-table td:first-child {
    min-width:230px;
    width:230px;
}
.fam-data-table th:nth-child(2),.fam-data-table td:nth-child(2) {
    min-width:175px;
    width:175px;
}
.fam-data-table th:nth-child(3),.fam-data-table td:nth-child(3) {
    min-width:150px;
    width:150px;
}
.fam-data-table th:nth-child(n+4),.fam-data-table td:nth-child(n+4) {
    min-width:115px;
}
.fam-data-table td:first-child strong {
    display:block;
    white-space:normal;
    overflow-wrap:anywhere;
}
/* V1.3.2: lista de hijos registrada con controles + / - */
.fam-children-editor {
    display:grid;
    grid-template-columns:minmax(0,1fr) 34px;
    gap:8px;
    align-items:stretch;
}
.fam-relation-list {
    min-height:42px;
    max-height:190px;
    overflow:auto;
    border:1px solid var(--fam-border);
    border-radius:8px;
    background:#fff;
    padding:4px;
    display:grid;
    gap:3px;
}
.fam-relation-item {
    display:block;
    width:100%;
    border:0;
    border-radius:6px;
    background:transparent;
    padding:8px 10px;
    text-align:left;
    font:inherit;
    font-size:12px;
    cursor:pointer;
}
.fam-relation-item:hover {
    background:#f3f6f9;
}
.fam-relation-item.selected {
    background:#e8f2ec;
    font-weight:700;
    outline:1px solid #b7d5c1;
}
.fam-relation-empty {
    padding:9px 10px;
    color:var(--fam-muted);
    font-size:12px;
}
.fam-relation-controls {
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:stretch;
}
.fam-relation-controls .fam-icon-btn {
    width:34px;
    height:34px;
}
.fam-relation-picker {
    margin-top:7px;
    border:1px solid var(--fam-border);
    border-radius:8px;
    background:#fff;
    padding:7px;
    display:grid;
    gap:4px;
    max-height:180px;
    overflow:auto;
    box-shadow:0 5px 18px rgba(16,24,40,.08);
}
.fam-relation-picker[hidden] {
    display:none;
}
.fam-relation-picker-title {
    font-size:11px;
    color:var(--fam-muted);
    padding:3px 4px 6px;
}
.fam-relation-picker-item {
    border:0;
    border-radius:6px;
    background:#f8fafc;
    padding:7px 9px;
    text-align:left;
    font:inherit;
    font-size:12px;
    cursor:pointer;
}
.fam-relation-picker-item:hover {
    background:#eef5f0;
}


/* ---- Importar / fusionar árboles (v1.27) ---- */
.fam-modal-wide {
    width:min(1100px,96vw);
}
.fam-import-tree-choices {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:14px 0;
}
.fam-import-tree-choice {
    text-align:left;
    padding:12px 16px;
}
.fam-import-tree-choice small {
    color:var(--fam-muted);
    margin-left:6px;
}
.fam-import-connection-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin:14px 0;
}
.fam-import-connection-grid label {
    display:block;
    margin-bottom:8px;
}
.fam-import-search {
    width:100%;
    padding:8px 10px;
    border:1px solid var(--fam-border);
    border-radius:8px;
    margin-bottom:8px;
    box-sizing:border-box;
}
.fam-import-pick-list {
    max-height:260px;
    overflow:auto;
    border:1px solid var(--fam-border);
    border-radius:10px;
    padding:6px;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.fam-import-pick-item {
    text-align:left;
    background:none;
    border:1px solid transparent;
    border-radius:6px;
    padding:7px 10px;
    cursor:pointer;
    font-size:13.5px;
}
.fam-import-pick-item:hover {
    background:#f4f7f9;
}
.fam-import-pick-item.selected {
    background:#eaf5ef;
    border-color:var(--fam-primary);
    font-weight:700;
}
.fam-import-picker-scroll {
    max-height:60vh;
    overflow:auto;
    border:1px solid var(--fam-border);
    border-radius:12px;
    background:radial-gradient(circle at center, #fff, #f8fafc);
    margin:14px 0;
}
.fam-import-canvas {
    position:relative;
    padding:28px;
}
.fam-import-node {
    background:#fff;
    border:1px solid #cfd7e3;
    border-radius:12px;
    padding:11px 13px 8px;
    box-shadow:0 5px 16px rgba(16,24,40,.07);
    text-align:center;
    box-sizing:border-box;
}
.fam-import-node.fam-import-matched {
    background:#f3f6f9;
    opacity:.72;
}
.fam-import-node.fam-import-selected {
    border-color:var(--fam-primary);
    border-width:2px;
    background:#f2faf5;
}
.fam-import-badge {
    font-size:10px;
    font-weight:700;
    color:var(--fam-primary);
    margin-bottom:4px;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.fam-import-checkbox {
    display:block;
    width:100%;
    background:none;
    border:none;
    font-size:18px;
    cursor:pointer;
    line-height:1;
    margin-bottom:2px;
    color:var(--fam-primary);
}
.fam-import-branch-btn {
    margin-top:6px;
    font-size:10.5px;
    padding:3px 8px;
    border-radius:999px;
    border:1px solid var(--fam-border);
    background:#fbfcfd;
    cursor:pointer;
    color:var(--fam-muted);
}
.fam-import-branch-btn:hover {
    border-color:var(--fam-primary);
    color:var(--fam-primary);
}
.fam-import-diff-person {
    border:1px solid var(--fam-border);
    border-radius:10px;
    padding:10px 14px;
    margin-bottom:10px;
}
.fam-import-diff-person strong {
    display:block;
    margin-bottom:6px;
}
.fam-import-diff-row {
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:13.5px;
    padding:4px 0;
    cursor:pointer;
}
.fam-import-diff-row input {
    margin-top:3px;
    flex-shrink:0;
}
.fam-import-duplicate-note {
    font-size:9.5px;
    color:var(--fam-muted);
    font-style:italic;
    margin-top:2px;
}