/* ─────────────────────────────────────────────────────────
   ÁRBOL GENEALÓGICO — estilos específicos
   Complementa styles.css. Hereda todos los tokens CSS.
   ───────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

/* ── Toolbar de búsqueda ─────────────────────────────────────────────────────── */

.tree-toolbar {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    gap: 8px;
}

.tree-toolbar-hint {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tree-toolbar-key {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    line-height: 1;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 3px 5px;
}

@media (max-width: 600px) {
    .tree-toolbar-hint { display: none; }
}

.tree-search {
    width: 220px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text);
    background: var(--bg);
    outline: none;
    transition: border-color 0.15s;
}

.tree-search:focus {
    border-color: var(--accent);
    background: var(--surface);
}

.tree-search::placeholder {
    color: var(--muted);
}

/* Wrapper relativo para posicionar el dropdown */
.tree-search-wrap {
    position: relative;
    display: inline-block;
}

/* Dropdown de sugerencias */
.search-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 200;
    max-height: 260px;
    overflow-y: auto;
}

.search-suggestions.is-open {
    display: block;
}

.search-suggestion-item {
    padding: 7px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    transition: background 0.1s;
}

.search-suggestion-id {
    font-size: 11px;
    color: var(--muted);
    flex-shrink: 0;
}

.search-suggestion-item:hover,
.search-suggestion-item.is-active {
    background: var(--border);
    color: var(--text);
}

/* ── Canvas del árbol ────────────────────────────────────────────────────────── */

.tree-wrapper {
    position: relative;
    flex: 1;
    min-height: 520px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    /* Gaps tipo window manager (i3): el panel y el árbol flotan separados. */
    padding: 5mm;
    gap: 5mm;
    /* Fondo de puntos del "escritorio": se ve en los gaps alrededor del panel */
    background-color: var(--bg);
    background-image: radial-gradient(circle, #d0d0ce 1px, transparent 1px);
    background-size: 22px 22px;
}

/* En modo oscuro, el "escritorio" un poco más claro y puntos suaves */
[data-theme="dark"] .tree-wrapper {
    background-color: #20242a;
    background-image: radial-gradient(circle, #3d434b 1px, transparent 1px);
}

.tree-container {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 520px;
    overflow: hidden;
    /* Sin fondo propio: los puntos vienen del wrapper, así son continuos en los gaps */
    background: transparent;
}

/* ── Controles de zoom ───────────────────────────────────────────────────────── */

.zoom-controls {
    display: flex;
    flex-direction: row;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
}

/* ── Popover de ayuda (ⓘ) ────────────────────────────────────────────────────── */

.tree-info-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 30;
    width: 264px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    padding: 14px 16px;
}

.tree-info-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px;
}

.tree-info-title + .tree-info-title,
.tree-info-row + .tree-info-title {
    margin-top: 14px;
}

.tree-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.tree-info-row:last-of-type { margin-bottom: 0; }

.tree-info-row kbd {
    min-width: 26px;
    text-align: center;
    flex-shrink: 0;
}

.tree-info-row span {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: var(--text);
}

.tree-info-foot {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
    .zoom-btn--info, .tree-info-pop { display: none; }
}

.zoom-btn {
    width: 32px;
    height: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    line-height: 1;
    padding: 0;
}

.zoom-btn:hover {
    color: var(--text);
    border-color: var(--accent);
    background: var(--surface);
}

.zoom-btn:active {
    transform: scale(0.94);
}

/* ── Tarjetas de persona (clases CSS para hover — el render lo maneja en JS) ── */

.person-card-group {
    cursor: pointer;
}

/* ── Panel lateral ───────────────────────────────────────────────────────────── */

.tree-panel {
    position: relative;
    flex-shrink: 0;
    width: 0;
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    z-index: 60;
    overflow: hidden;
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 300ms;
}

.tree-panel.is-open {
    width: calc(100% - 576px);
    border-color: var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
}

/* Durante la carga inicial el panel puede abrirse ya enfocado (URL ?focus=…).
   Esta clase suprime la animación para que aparezca abierto de entrada, sin el
   barrido de los botones; panel.js la quita tras el primer frame, así los
   despliegues posteriores (clic del usuario) sí animan. Cubre desktop (width)
   y mobile (transform). */
.tree-panel--preload {
    transition: none !important;
}

/* Estado expandido: el panel ocupa todo el área dejando solo el gap de 5mm
   alrededor (el árbol detrás se intuye por el fondo de puntos del wrapper).
   Se quita el gap interno para que el panel quede centrado con gap uniforme. */
.tree-wrapper.is-panel-expanded {
    gap: 0;
}

.tree-panel.is-open.is-expanded {
    width: 100%;
    box-shadow: 0 8px 48px rgba(0,0,0,0.16);
}

/* Close button — ícono minimal, sin caja (como en el mockup) */
.tree-panel-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 10;
    background: none;
    border: none;
    padding: 4px;
    color: var(--muted);
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

.tree-panel-close:hover {
    color: var(--text);
}

/* ── Hero del panel — superficie clara editorial (estilo blog) ───────────────── */
/* El !important anula el gradiente de color que panel.js aplica inline. */

.panel-hero {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    padding: 24px 20px 20px;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
}

.panel-hero-content {
    position: relative;
}

/* ── Cuerpo scrollable ───────────────────────────────────────────────────────── */

.tree-panel-body {
    overflow-y: auto;
    flex: 1;
    padding: 16px 16px 32px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.tree-panel-body::-webkit-scrollbar { width: 4px; }
.tree-panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.tree-panel-body::-webkit-scrollbar-track { background: transparent; }

/* ── Footer del panel — CTA para ampliar/reducir ─────────────────────────────── */

.panel-footer {
    flex-shrink: 0;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.panel-expand-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--accent);
    color: var(--surface);
    border: none;
    border-radius: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}

.panel-expand-btn:hover { filter: brightness(0.93); }
.panel-expand-btn:active { transform: scale(0.985); }
.panel-expand-btn svg { flex-shrink: 0; }

/* ── Contenido del panel ─────────────────────────────────────────────────────── */

/* Hero: nombre en serif grande oscuro sobre superficie clara (estilo editorial) */
.panel-name {
    font-family: 'Source Serif 4', serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 4px;
    line-height: 1.1;
    padding-right: 32px;
}

/* Años: serif en cursiva, tono muted (toque editorial del mockup) */
.panel-years {
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    font-size: 17px;
    color: var(--muted);
    margin: 0;
    letter-spacing: 0;
}

/* Secciones como cards */
.panel-section {
    background: var(--surface);
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 10px;
    border: 1px solid var(--border);
}

.panel-section:first-child {
    margin-top: 0;
}

.panel-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 9px;
}

.panel-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 3px;
}

.panel-meta {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text);
    margin: 3px 0;
    line-height: 1.45;
}

.panel-meta--indent {
    padding-left: 10px;
    color: var(--muted);
    font-size: 12px;
}

/* Links de navegación — hover pill */
.panel-link {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--accent);
    margin: 2px 0;
    cursor: pointer;
    line-height: 1.4;
    display: block;
    padding: 4px 8px;
    margin-left: -8px;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
}

.panel-link:hover {
    background: rgba(0,0,0,0.05);
}

.panel-marriage {
    margin: 6px 0 10px;
}

.panel-children {
    padding-left: 10px;
    margin-top: 3px;
}

.panel-child {
    font-size: 12px;
}

.panel-spouse {
    font-size: 13px;
    font-weight: 600;
}

.panel-text {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text);
    margin: 0;
    line-height: 1.6;
    white-space: pre-line;
}

/* ── Hero: nombre + badge ────────────────────────────────────────────────────── */

.panel-hero-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Status badge — píldoras claras sobre hero editorial ─────────────────────── */

.panel-status {
    display: inline-flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 6px;
}

.panel-status--verificado { background: rgba(45,74,62,0.10); color: var(--accent); border: 1px solid rgba(45,74,62,0.20); }
.panel-status--incompleto { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.panel-status--en_proceso { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.panel-status--sin_datos  { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* ── Vita grid — mini cards ──────────────────────────────────────────────────── */

.panel-vita-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.panel-vita-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--bg);
    border-radius: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border);
}

.panel-vita-val {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text);
    line-height: 1.4;
}

/* ── Panel empty state ───────────────────────────────────────────────────────── */

.panel-empty {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--muted);
    margin: 28px 0 0;
    text-align: center;
    font-style: italic;
    line-height: 1.6;
}

/* Enlace a la investigación consolidada en la Wiki */
.panel-wiki-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 11px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    transition: border-color .15s, background .15s;
}
.panel-wiki-link:hover { border-color: var(--accent); }
.panel-wiki-link svg { flex-shrink: 0; }

.panel-empty-hint {
    font-style: normal;
    font-size: 12px;
}

.panel-empty code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    background: rgba(0,0,0,0.07);
    padding: 1px 5px;
    border-radius: 2px;
    color: var(--text);
}

/* ── Markdown prose (pestaña Investigación) ──────────────────────────────────── */

.panel-markdown {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text);
    line-height: 1.7;
    padding-top: 2px;
}

/* H1 — título de sección principal */
.panel-markdown h1 {
    font-family: 'Source Serif 4', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 14px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0,0,0,0.08);
}

/* H2 — subsección con acento izquierdo */
.panel-markdown h2 {
    font-family: 'Source Serif 4', serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 22px 0 8px;
    line-height: 1.25;
    padding-left: 10px;
    border-left: 3px solid var(--accent);
    margin-left: -13px;
}

/* H3 — etiqueta de categoría */
.panel-markdown h3 {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 18px 0 6px;
    opacity: 0.75;
}

.panel-markdown p {
    margin: 0 0 10px;
}

/* Lista sin punto — dash de acento */
.panel-markdown ul {
    list-style: none;
    padding-left: 14px;
    margin: 0 0 10px;
}

.panel-markdown ul li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 5px;
}

.panel-markdown ul li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 600;
    opacity: 0.7;
}

/* Lista numerada */
.panel-markdown ol {
    padding-left: 20px;
    margin: 0 0 10px;
}

.panel-markdown ol li {
    margin-bottom: 5px;
}

.panel-markdown a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(45,74,62,0.35);
    transition: text-decoration-color 0.15s;
}

.panel-markdown a:hover {
    text-decoration-color: var(--accent);
}

/* Strong — acento de color en lugar de solo negrita */
.panel-markdown strong {
    font-weight: 600;
    color: var(--accent);
}

.panel-markdown em {
    font-style: italic;
    color: var(--muted);
}

.panel-markdown code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    background: rgba(0,0,0,0.06);
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--text);
}

/* Blockquote */
.panel-markdown blockquote {
    margin: 14px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--accent);
    background: rgba(0,0,0,0.03);
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: var(--muted);
}

.panel-markdown blockquote p {
    margin: 0;
}

.panel-markdown hr {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.09);
    margin: 20px 0;
}

/* Tabla con header diferenciado */
.panel-markdown table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.07);
}

.panel-markdown th {
    text-align: left;
    padding: 7px 10px;
    background: rgba(0,0,0,0.04);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.panel-markdown td {
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--text);
}

.panel-markdown tr:last-child td {
    border-bottom: none;
}

/* ── Peek tab (mobile) ───────────────────────────────────────────────────────── */

.panel-peek {
    display: none;
}

/* ── Mobile ──────────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .panel-peek {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: absolute;
    right: 0;
    top: 48px;
    transform: translateX(110%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-right: none;
    border-left: 3px solid var(--accent);
    border-radius: 8px 0 0 8px;
    padding: 10px 14px 10px 12px;
    z-index: 70;
    cursor: pointer;
    box-shadow: -3px 2px 18px rgba(0,0,0,0.13);
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 156px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .panel-peek.is-visible {
    transform: translateX(0);
  }

  .panel-peek:active {
    background: var(--bg);
  }

  .panel-peek-name {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
  }

  .panel-peek-cta {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--accent);
    font-weight: 500;
    white-space: nowrap;
  }
}

@media (max-width: 960px) {
  /* El árbol ocupa el ancho completo (sin sidebar) */
  .tree-toolbar {
    padding: 8px 12px;
  }

  .tree-search-wrap {
    flex: 1;
  }

  .tree-search {
    width: 100%;
  }

  /* En mobile no hay gaps: el árbol ocupa todo y el panel es overlay */
  .tree-wrapper {
    padding: 0;
    gap: 0;
  }

  /* En mobile el panel vuelve a ser overlay (transform) */
  .tree-panel {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
    width: min(420px, 100vw);
    border: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -6px 0 32px rgba(0,0,0,0.12);
  }

  .tree-panel.is-open {
    width: min(420px, 100vw);
    transform: translateX(0);
    border-left-color: var(--border);
    box-shadow: -6px 0 32px rgba(0,0,0,0.12);
  }

  /* En mobile el panel ya es overlay; ampliar no aplica */
  .panel-footer {
    display: none;
  }
}

@media (max-width: 480px) {
  .tree-panel,
  .tree-panel.is-open {
    width: 100vw;
  }

}

/* ─────────────────────────────────────────────────────────
   LÍNEA DE TIEMPO — modal por persona
   ───────────────────────────────────────────────────────── */

/* Botón en el hero del panel */
.panel-timeline-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 9px 15px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform 0.14s, box-shadow 0.14s, filter 0.14s;
  letter-spacing: 0.01em;
}
.panel-timeline-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 48%, transparent);
}
.panel-timeline-btn svg { opacity: 1; flex-shrink: 0; }

/* La línea de tiempo no está disponible en pantallas chicas (master-detail no entra) */
@media (max-width: 960px) {
  .panel-timeline-btn { display: none; }
}

/* Fondo oscurecido */
.tl-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: tl-fade 0.18s ease;
}
@keyframes tl-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Diálogo */
.tl-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 1200px;
  height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: tl-up 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Cuerpo: columna de línea de tiempo (izq, ancho fijo) + panel de detalle (der) */
.tl-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
@keyframes tl-up {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Cabecera */
.tl-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 28px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tl-head-eyebrow {
  margin: 0 0 3px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tl-head-name {
  margin: 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.tl-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  margin-top: 2px;
  transition: color 0.14s, background 0.14s, border-color 0.14s;
}
.tl-close:hover {
  color: var(--text);
  background: var(--bg);
  border-color: var(--text);
}

/* Área con scroll */
.tl-scroll {
  flex: 0 0 780px;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.tl-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.tl-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.tl-scroll::-webkit-scrollbar-track { background: transparent; }

/* Canvas: todos los hijos se posicionan absolute, la altura la pone JS */
/* --cl = posición x donde empieza el contenido (zona izquierda libre para popup) */
.tl-canvas {
  --cl: 40px;
  position: relative;
  min-width: 740px;
  padding: 0 48px;
}

/* Línea vertical del eje — a 180px del inicio del contenido (var(--cl)) */
.tl-axis-line {
  position: absolute;
  left: calc(var(--cl) + 180px);
  top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
  pointer-events: none;
}

/* Espina SVG ancestral */
.tl-spine {
  position: absolute;
  top: 0;
  left: var(--cl);
  width: calc(100% - var(--cl) - 48px);
  pointer-events: none;
}

/* Ticks de año */
.tl-ticks {
  position: absolute;
  top: 0; left: var(--cl); bottom: 0;
  width: 175px;
  pointer-events: none;
}
.tl-tick {
  position: absolute;
  right: 4px;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  color: var(--muted);
  opacity: 0.45;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

/* Columna de eventos mundiales (izquierda del eje) */
.tl-events-col {
  position: absolute;
  top: 0; left: var(--cl); bottom: 0;
  width: 180px;
  pointer-events: none;
}
.tl-event {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: flex-end;
  pointer-events: auto;
  cursor: pointer;
}
.tl-event-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-right: 9px;
  max-width: 155px;
}
.tl-event-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  text-align: right;
  line-height: 1.35;
}
.tl-event-year {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-style: normal;
}
/* pip de evento: borde derecho en 180px = eje, margen solo para centrar el cuerpo del pip */
.tl-event-pip {
  flex-shrink: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border);
  margin-right: -2.5px;   /* radio del pip: centro = 180 + 0 = eje ✓ */
  position: relative;
  z-index: 1;
}

/* Sticky reader — vive DENTRO del scroll, pegado al tope.
   FONDO TRANSPARENTE sobre la columna de nombres: el nombre nunca se oculta, viaja
   visible a través de la barra y se pone en negrita cuando queda a la altura de las
   banderas. Sólo las banderas (derecha) tienen fondo sólido (chips). */
.tl-sticky-reader {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 56px;   /* = MIN_GAP → margen interno (fecha↔borde) igual al gap con los vecinos */
  background: transparent;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 14px -8px color-mix(in srgb, var(--bg) 65%, transparent);
  overflow: visible;
}
/* Cada bandera vive en un "chip" sólido para leerse siempre, pase lo que pase debajo */
.tl-sr-cell {
  position: absolute;
  top: 0; bottom: 0;        /* alto completo del header → mismo centrado que el nombre */
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transform: translateX(-50%);
  animation: tl-flag-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes tl-flag-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.7); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1);   }
}
.tl-sr-flag { display: flex; align-items: center; justify-content: center; line-height: 1; }

/* Banderas circulares (dibujadas en CSS) */
.tl-flag {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.18);
}
/* Suiza: círculo rojo con cruz blanca (chica, con margen) */
.tl-flag--ch { background: #d52b1e; }
.tl-flag--ch::before, .tl-flag--ch::after { content: ''; position: absolute; background: #fff; border-radius: 0.5px; }
.tl-flag--ch::before { left: 50%; top: 24%; width: 2.6px; height: 52%; transform: translateX(-50%); }  /* vertical */
.tl-flag--ch::after  { top: 50%; left: 24%; height: 2.6px; width: 52%; transform: translateY(-50%); }  /* horizontal */
/* Argentina: franjas celeste/blanco/celeste + sol */
.tl-flag--ar {
  background: linear-gradient(to bottom, #74acdf 0 33%, #fff 33% 67%, #74acdf 67% 100%);
}
.tl-flag--ar::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: #f6b40e; box-shadow: 0 0 0 0.5px #e0a000;
  transform: translate(-50%, -50%);
}
/* España: rojo / amarillo (doble) / rojo */
.tl-flag--es {
  background: linear-gradient(to bottom, #c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75% 100%);
}
/* Sin dato: contorno tenue */
.tl-flag--none {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 45%, transparent);
}
.tl-sr-label {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
  line-height: 1;
}

/* Columna de nodos familiares (derecha del eje) */
.tl-nodes-col {
  position: absolute;
  top: 0;
  left: calc(var(--cl) + 198px);   /* = 238px */
  width: 262px;                    /* termina ~500px, antes de la franja de banderas (540px) */
  bottom: 0;
}

/* Slot-machine: el activo encaja en la línea de lectura; el resto se atenúa */
.tl-node-text {
  transition: opacity 0.18s ease, transform 0.18s ease;
  transform-origin: left center;
}
.tl-node:not(.tl-node--active) .tl-node-text {
  opacity: 0.45;
}
.tl-node--active .tl-node-text {
  opacity: 1;
  /* El nombre activo crece un poco al encajar, como en un selector iOS */
  animation: tl-snap-in 0.3s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}
.tl-node--active .tl-node-name {
  font-weight: 700;
  color: var(--text);
}
@keyframes tl-snap-in {
  0%   { opacity: 0.35; transform: translateY(10px) scale(0.92); }
  60%  { opacity: 1;    transform: translateY(-1px) scale(1.06); }
  100% { opacity: 1;    transform: translateY(0)    scale(1.04); }
}

.tl-node {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity 0.15s;
}
.tl-node:hover { opacity: 0.75; }

/* pip del nodo: left edge en (48+318+left_indent)px.
   Para depth=0: pip left = 318 - 22.5 = 295.5, centro = 295.5 + 4.5 = 300 = eje ✓ */
.tl-node-pip {
  flex-shrink: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c, var(--muted));
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1.5px var(--c, var(--muted));
  margin-left: -22.5px;
  position: relative;
  z-index: 1;
}
.tl-node--sel .tl-node-pip {
  width: 13px; height: 13px;
  margin-left: -24.5px;    /* (13/2 + 18) = 24.5 → centro en 300px */
  box-shadow: 0 0 0 2.5px var(--c, var(--muted));
}

/* Textos del nodo */
.tl-node-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding-left: 0;
}
.tl-node-name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-node--sel .tl-node-name {
  font-size: 16px;
  font-weight: 700;
}
.tl-node-life {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tl-node--sel .tl-node-life { font-size: 11.5px; }

/* Opacidades por rol */
.tl-node--anc  { opacity: 0.82; }
.tl-node--desc { opacity: 0.88; }
.tl-node--sel  { opacity: 1; }

/* Popup unificado — eventos y personas */
/* ── Panel de detalle (master-detail): columna fija a la derecha ── */
.tl-detail {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 22px 24px 26px;
  border-left: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  animation: tl-detail-in 0.18s ease;
}
.tl-detail::-webkit-scrollbar { width: 5px; }
.tl-detail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
@keyframes tl-detail-in { from { opacity: 0; } to { opacity: 1; } }

/* Bloque de documentos dentro del panel de persona */
.tl-detail-block { margin-top: 14px; }
.tl-detail-subhead {
  margin: 0 0 6px;
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.tl-detail-doc {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px; line-height: 1.5; color: var(--text);
  padding-left: 14px; position: relative;
}
.tl-detail-doc::before {
  content: '·'; position: absolute; left: 2px; color: var(--muted);
}
.tl-detail-more { color: var(--muted); font-style: italic; }

/* Resumen de Wikipedia en el panel de evento */
.tl-popup-wiki-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}

/* Encabezado común (compartido por evento y persona) */
.tl-popup-eyebrow {
  margin: 0 0 3px;
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted);
}
.tl-popup-title {
  margin: 0 0 9px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px; font-weight: 600; line-height: 1.25;
  color: var(--text);
}

/* ── Variante evento ── */
.tl-popup-body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px; line-height: 1.55; color: var(--text);
}
.tl-popup-media {
  margin: 0 0 10px;
  border-radius: 8px; overflow: hidden;
  background: color-mix(in srgb, var(--border) 35%, transparent);
}
.tl-popup-media img { display: block; width: 100%; height: 150px; object-fit: cover; }
.tl-popup-link {
  display: inline-block; margin-top: 10px;
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.tl-popup-link:hover { text-decoration: underline; }

/* ── Variante persona ── */
.tl-popup-rows { display: flex; flex-direction: column; gap: 4px; }
.tl-popup-row {
  font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.4; color: var(--text);
}
.tl-popup-k { display: inline-block; width: 15px; color: var(--muted); }
.tl-popup-alive { color: var(--accent); font-weight: 600; }
.tl-popup-note {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-family: 'Inter', sans-serif; font-size: 11.5px; line-height: 1.5;
  color: var(--muted); font-style: italic;
}
.tl-popup-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px;
}
.tl-popup-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.tl-popup-branch, .tl-popup-docs, .tl-popup-verified {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.tl-popup-verified { color: var(--accent); }
.tl-popup-action {
  flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: var(--text);
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600;
  padding: 6px 10px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.tl-popup-action:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
}

/* Pantallas medianas: sin lugar para el panel lateral → ocultarlo, la línea de tiempo ocupa todo */
@media (max-width: 1080px) {
  .tl-scroll { flex: 1; }
  .tl-detail { display: none; }
}

/* Responsive: en pantallas muy pequeñas, fullscreen */
@media (max-width: 600px) {
  .tl-modal { padding: 0; }
  .tl-dialog { max-width: 100%; height: 100vh; border-radius: 0; border: none; }
}