/* ============================================================
   app.css — Árbol genealógico
   Todos los valores ajustables viven en :root como variables.
   Para cambiar la estética basta con editar ese bloque.
   ============================================================ */

:root {
  /* --- Paleta de color --- */
  --color-bg:           #f4f6f5;               /* Papel */
  --color-surface:      #ffffff;               /* Superficies elevadas: tarjetas, paneles */
  --color-surface-alt:  #fbfaf6;               /* Papel cálido, dropzone */
  --color-border:       rgba(20,24,26,.12);    /* Bordes de elementos UI */
  --color-border-focus: #1269C7;               /* Borde al enfocar un elemento interactivo */

  --color-text:               #14181a;                  /* Tinta principal */
  --color-text-secondary:     rgba(20,24,26,.78);       /* Texto secundario, etiquetas */
  --color-text-placeholder:   rgba(20,24,26,.55);       /* Placeholders y texto muy tenue */

  --color-accent:       #1269C7;   /* Greek Blue */
  --color-accent-hover: #0d52a0;   /* Acento al hover */
  --color-accent-text:  #ffffff;   /* Texto sobre fondo de acento */

  --color-agua:   #1F9C92;         /* Aguamarina, acento secundario */
  --color-bone:   #e3d9c4;         /* Hueso */

  --color-warning-bg:     #fff8e6; /* Fondo de aviso */
  --color-warning-border: #e0a830; /* Borde de aviso */
  --color-warning-text:   #7a5800; /* Texto de aviso */

  --color-error-bg:     #fff0f0;   /* Fondo de error */
  --color-error-border: #cc3333;   /* Borde de error */
  --color-error-text:   #8b1a1a;   /* Texto de error */

  /* --- Tipografía --- */
  --font-display: 'Geist', system-ui, sans-serif;             /* Títulos, chrome principal */
  --font-ui:      'Plus Jakarta Sans', system-ui, sans-serif; /* Cuerpo de la UI */
  --font-italic:  'Newsreader', Georgia, serif;               /* Énfasis cursivo editorial */
  --font-mono:    'JetBrains Mono', monospace;                /* Etiquetas, metadatos, código */

  /* --- Escala de espaciado (base 8px) --- */
  --space-1: 4px;   /* Micro: separar elementos muy próximos */
  --space-2: 8px;   /* Pequeño: padding interno ajustado */
  --space-3: 12px;  /* Compacto: gaps en listas o nav */
  --space-4: 16px;  /* Estándar: padding de secciones */
  --space-5: 24px;  /* Mediano: separación entre bloques */
  --space-6: 32px;  /* Grande: márgenes de sección */
  --space-7: 48px;  /* Muy grande: espaciado de página */

  /* --- Radios de borde --- */
  --radius-sm:   4px;     /* Botones, inputs */
  --radius-md:   8px;     /* Tarjetas, dropzone */
  --radius-lg:   12px;    /* Paneles grandes */
  --radius-pill: 9999px;  /* Pestañas activas tipo pill */

  /* --- Sombras (suaves, sin dramatismo) --- */
  --shadow-sm:  0 1px 2px rgba(20,24,26,0.06);  /* Elevación mínima */
  --shadow-md:  0 2px 6px rgba(20,24,26,0.08);  /* Tarjetas y superficies */

  /* --- Dimensiones de layout --- */
  --max-width:       960px;  /* Ancho máximo del contenido principal */
  --header-height:   60px;   /* Altura del cabecero */
  --tab-nav-height:  44px;   /* Altura de la barra de pestañas */

  /* --- Vista de fichas --- */
  --persons-master-width: 280px;    /* Ancho fijo del panel de lista */
  --persons-list-height:  520px;    /* Altura máxima de la lista con scroll */
  --color-relation-link:       #1269C7;  /* Color de enlaces de relaciones (= acento) */
  --color-relation-link-hover: #0d52a0;  /* Hover de enlaces de relaciones */
  --color-list-active-bg:      #e8f0fb;  /* Fondo del item activo en la lista */
  --color-section-title:       rgba(20,24,26,.45); /* Títulos de sección en ficha */

  /* --- Vista de árbol --- */
  --tree-node-bg:             var(--color-surface);            /* Fondo base de todos los nodos */
  --tree-node-border:         var(--color-border);             /* Borde base */
  --tree-node-stripe-male:    var(--color-accent);             /* Filete varón (Greek Blue) */
  --tree-node-stripe-female:  #b45dae;                         /* Filete mujer (violeta suave) */
  --tree-node-stripe-unknown: rgba(20,24,26,.22);              /* Filete desconocido */
  --tree-node-focus-border:   var(--color-accent);             /* Borde nodo foco */
  --tree-node-focus-shadow:   0 0 0 3px rgba(18,105,199,.18); /* Halo nodo foco */
  --tree-node-selected-border: var(--color-agua);              /* Borde nodo seleccionado */
  --tree-node-selected-shadow: 0 0 0 3px rgba(31,156,146,.18);/* Halo nodo seleccionado */
  --tree-link-color:          rgba(20,24,26,.18);              /* Líneas de filiación */
  --tree-link-width:          1.5px;
  --tree-spouse-link-color:   var(--color-agua);               /* Línea de pareja (aguamarina) */
  --tree-spouse-link-width:   1.5px;
  --tree-node-name-size:      0.8125rem;                       /* Nombre en el nodo */
  --tree-node-years-size:     0.6875rem;                       /* Años en el nodo */
  --tree-toggle-bg:           var(--color-surface);
  --tree-toggle-border:       var(--color-border);
  --tree-toggle-text:         var(--color-text-secondary);
  --tree-toggle-hover-bg:     var(--color-surface-alt);
  --tree-controls-bg:         var(--color-surface);            /* Fondo barra de controles */
  --tree-context-bg:          var(--color-surface);            /* Fondo menú contextual */
}

/* ============================================================
   Reset mínimo
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   Base
   ============================================================ */
html {
  font-size: 16px;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  line-height: 1.5;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 100px; /* Espacio para el faldón fijo */
}

/* ============================================================
   Header
   ============================================================ */
.app-header {
  height: var(--header-height);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  gap: var(--space-4);
}

.app-header-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.app-header-brand-text {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

/* Logo triángulo Culturoscope */
.brand-logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--color-text);
}

/* Título principal en Geist con énfasis editorial */
.app-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-text);
  line-height: 1;
}

/* Énfasis en Newsreader cursiva color Greek Blue */
.app-title-em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  color: var(--color-accent);
  letter-spacing: 0;
}

.app-subtitle {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--color-text-placeholder);
}

/* Zona de meta: nombre de archivo + contadores */
.app-header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.header-meta-file {
  color: var(--color-text);
}

/* ============================================================
   Tira de avisos (warnings plegable, fuera del main)
   Discreta por diseño: sin fondo llamativo, tamaño pequeño.
   ============================================================ */
.warnings-strip {
  border-bottom: 1px solid var(--color-border);
  max-width: 100%;
}

.warnings-strip-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-5);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-secondary);
  text-align: left;
}

.warnings-strip-toggle:hover {
  color: var(--color-text);
}

.warnings-strip-chevron {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  transition: transform 0.15s;
  opacity: 0.6;
}

.warnings-strip-toggle[aria-expanded="false"] .warnings-strip-chevron {
  transform: rotate(-90deg);
}

/* La lista está oculta por defecto (hidden desde JS); respeta el atributo */
.warnings-list[hidden] {
  display: none;
}

.warnings-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-5) var(--space-2);
  border-top: 1px solid var(--color-border);
}

.warning-item {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-warning-text);
  padding: 2px 0;
}

.error-item {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-error-text);
  padding: 2px 0;
}

/* ============================================================
   Main layout
   ============================================================ */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
  gap: var(--space-5);
}

/* ============================================================
   Zona de carga
   ============================================================ */
.load-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  user-select: none;
}

.dropzone:hover {
  border-color: var(--color-accent);
  background-color: #eef4fb;
  color: var(--color-text);
}

/* Clase añadida por JS durante drag-over */
.dropzone.dragover {
  border-color: var(--color-accent);
  background-color: #e2eef8;
  color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(18,105,199,0.10);
}

.dropzone-icon {
  display: block;
  width: 2rem;
  height: 2rem;
  margin: 0 auto var(--space-3);
  opacity: 0.4;
}

.dropzone-hint {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: var(--space-2);
  color: var(--color-text-placeholder);
}

/* Fila inferior de la zona de carga */
.load-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Botones de samples */
.samples-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.samples-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.btn-sample {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: .04em;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-accent);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}

.btn-sample:hover {
  background-color: #eef4fb;
  border-color: var(--color-accent);
}

/* Botón Limpiar */
.btn-clear {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgba(204,51,51,.40);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-error-text);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}

.btn-clear:hover {
  background-color: var(--color-error-bg);
  border-color: var(--color-error-border);
}

/* Botón Exportar .ged (visible solo en modo avanzado) */
.btn-export {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: .04em;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-agua);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}

.btn-export:hover {
  background-color: rgba(31,156,146,0.08);
  border-color: var(--color-agua);
}

/* Ocultar botón exportar en modo sencillo */
body:not(.advanced) #btn-export {
  display: none;
}

/* Toggle de privacidad */
.privacy-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--color-text-placeholder);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.12s;
}

.privacy-toggle:hover {
  color: var(--color-text-secondary);
}

.privacy-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.privacy-toggle[aria-expanded="false"] .privacy-chevron {
  transform: rotate(-90deg);
}

/* Panel de privacidad */
.privacy-panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Respetar el atributo hidden aunque la regla de arriba fije display */
.privacy-panel[hidden] {
  display: none;
}

.privacy-panel-title {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.privacy-panel-body {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* ============================================================
   Pestañas
   ============================================================ */
.tab-nav {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0;
}

.tab-btn {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  margin-bottom: -1px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color 0.12s, border-color 0.12s;
}

.tab-btn:hover {
  color: var(--color-text);
  background-color: var(--color-surface-alt);
}

.tab-btn.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  background-color: transparent;
}

/* ============================================================
   Vistas
   ============================================================ */
.view-section {
  display: none;
  min-height: 240px;
}

.view-section.visible {
  display: block;
}

/* Placeholder antes de cargar datos */
.view-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--color-text-placeholder);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  text-align: center;
  padding: var(--space-6);
}

/* Pre con texto crudo */
.raw-text {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  white-space: pre;
  color: var(--color-text);
  max-height: 480px;
  overflow-y: auto;
}

/* ============================================================
   Faldón inferior — individuo seleccionado
   ============================================================ */
.selected-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 100;
  min-height: 72px;
  max-height: 160px;
  overflow-y: auto;
}

.selected-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

/* Texto cuando no hay selección */
.selected-empty {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--color-text-placeholder);
  width: 100%;
}

/* Nombre en el faldón */
.sel-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  flex-shrink: 0;
}

/* Símbolo de sexo */
.sel-sex {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* Años de vida */
.sel-years {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* Separador vertical en el faldón */
.sel-divider {
  color: var(--color-border);
  font-size: 1rem;
  user-select: none;
  flex-shrink: 0;
}

/* Grupo de datos (nacimiento, defunción) */
.sel-event {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}

.sel-event-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-text-secondary);
}

.sel-event-value {
  color: var(--color-text);
}

/* Relaciones en el faldón */
.sel-relations {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-1);
}

.sel-rel-group {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 0.8125rem;
}

.sel-rel-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.sel-rel-link {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-relation-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.1s, color 0.1s;
}

.sel-rel-link:hover {
  color: var(--color-relation-link-hover);
  text-decoration-color: var(--color-relation-link-hover);
}

/* ============================================================
   Vista de fichas — Maestro-detalle
   ============================================================ */

/* Contenedor de dos columnas */
.persons-layout {
  display: grid;
  grid-template-columns: var(--persons-master-width) 1fr;
  gap: var(--space-4);
  align-items: start;
}

/* --- Panel maestro (lista) --- */
.persons-master {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.persons-search {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  outline: none;
  width: 100%;
}

.persons-search:focus {
  background-color: var(--color-surface);
  border-bottom-color: var(--color-border-focus);
  box-shadow: 0 1px 0 var(--color-border-focus);
}

.persons-search::placeholder {
  color: var(--color-text-placeholder);
}

.persons-list {
  list-style: none;
  max-height: var(--persons-list-height);
  overflow-y: auto;
  overflow-x: hidden;
}

.persons-list-item {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  transition: background-color 0.1s;
  line-height: 1.4;
}

.persons-list-item:last-child {
  border-bottom: none;
}

.persons-list-item:hover {
  background-color: var(--color-surface-alt);
}

.persons-list-item.active {
  background-color: var(--color-list-active-bg);
  color: var(--color-accent);
  font-weight: 500;
}

/* Ocultar items filtrados sin re-render */
.persons-list-item.hidden {
  display: none;
}

/* --- Panel detalle --- */
.persons-detail {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: 200px;
}

/* Mensaje cuando no hay persona seleccionada */
.detail-placeholder {
  padding: var(--space-6);
  color: var(--color-text-placeholder);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  text-align: center;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Ficha de persona --- */
.person-card {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Breadcrumb */
.person-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.breadcrumb-item {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-relation-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.1s, color 0.1s;
}

.breadcrumb-item:hover {
  color: var(--color-relation-link-hover);
  text-decoration-color: var(--color-relation-link-hover);
}

.breadcrumb-sep {
  color: var(--color-text-placeholder);
  font-size: 0.875rem;
  user-select: none;
}

.breadcrumb-current {
  color: var(--color-text);
  font-weight: 500;
}

/* Cabecera de la ficha */
.person-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.person-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.3;
}

.person-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.person-sex {
  font-size: 1.1rem;
  line-height: 1;
}

.person-years {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Secciones de datos (Nacimiento, Defunción, Relaciones…) */
.person-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.person-section-title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-section-title);
}

/* Definition list para fecha/lugar */
.person-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  font-size: 0.875rem;
}

.person-dl dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-secondary);
  font-weight: 400;
}

.person-dl dd {
  font-family: var(--font-ui);
  color: var(--color-text);
}

/* Evento individual */
.person-event {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-size: 0.875rem;
  align-items: baseline;
}

.person-event-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-secondary);
  min-width: 90px;
}

.person-event-date {
  font-family: var(--font-ui);
  color: var(--color-text);
}

.person-event-place {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/* Lista de relaciones */
.relations-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.relation-link {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-relation-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.1s, color 0.1s;
  text-align: left;
}

.relation-link:hover {
  color: var(--color-relation-link-hover);
  text-decoration-color: var(--color-relation-link-hover);
}

/* Botón "Ver en árbol" */
.btn-view-tree {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  color: var(--color-accent);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}

.btn-view-tree:hover {
  background-color: #eef4fb;
  border-color: var(--color-accent);
}

/* ============================================================
   Responsive básico
   ============================================================ */
@media (max-width: 600px) {
  .app-header {
    padding: 0 var(--space-4);
  }

  .app-subtitle {
    display: none;
  }

  .app-main {
    padding: var(--space-4) var(--space-3);
  }

  .dropzone {
    padding: var(--space-6) var(--space-4);
  }

  .samples-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .load-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Vista fichas: una columna en pantallas estrechas */
@media (max-width: 700px) {
  .persons-layout {
    grid-template-columns: 1fr;
  }

  .persons-list {
    max-height: 260px;
  }
}

/* ============================================================
   Vista de árbol genealógico
   ============================================================ */

/*
 * El .app-main siempre mantiene max-width: 960px.
 * Solo el lienzo del árbol (#view-tree.visible o .tree-svg-wrap) se extiende
 * al ancho completo de la ventana usando la técnica de negative-margin.
 * Cabecera, zona de carga, pestañas y vista de fichas NO se ensanchan.
 */

/* Contenedor principal */
#view-tree {
  display: none;
  flex-direction: column;
  gap: 0;
}

#view-tree.visible {
  display: flex;
}

/* ── Barra de controles ───────────────────────────────────── */
.tree-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);        /* compacto: de --space-5 a --space-3 */
  flex-wrap: nowrap;           /* forzar 1 línea salvo en móvil muy estrecho */
  padding: var(--space-2) var(--space-3);
  background-color: var(--tree-controls-bg);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--color-text);
  min-height: 40px;
}

@media (max-width: 600px) {
  .tree-controls { flex-wrap: wrap; }
}

/* .tree-controls-hint eliminado — sustituido por el icono (i) con tooltip */

.tree-controls-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tree-controls-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.tree-gen-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}

.tree-gen-btn:hover {
  background-color: var(--color-surface-alt);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.tree-gen-val {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  min-width: 1.2em;
  text-align: center;
}

.tree-controls-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  user-select: none;
}

.tree-controls-toggle input[type="checkbox"] {
  accent-color: var(--color-accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ── Selector de modo de vista (solo en modo avanzado) ───── */
/* Oculto en modo sencillo */
body:not(.advanced) .tree-mode-selector {
  display: none;
}

.tree-mode-selector {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-right: 1px solid var(--color-border);
  padding-right: var(--space-4);
  margin-right: var(--space-1);
}

.tree-mode-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  user-select: none;
  padding: 3px var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}

.tree-mode-btn:has(input:checked) {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

.tree-mode-btn:not(:has(input:checked)):hover {
  background-color: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}

.tree-mode-btn input[type="radio"] {
  display: none; /* el radio se oculta; el estado se expresa con :has */
}

/* Grupo de controles oculto (según modo activo) */
.tree-controls-group--hidden {
  display: none;
}

/* ── Botón de información (i) con tooltip flotante ───────── */
.tree-controls-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto; /* empuja el (i) al extremo derecho */
  flex-shrink: 0;
}

.tree-controls-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-alt);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: default;
  user-select: none;
  transition: border-color 0.1s, color 0.1s;
}

.tree-controls-info:hover .tree-controls-info-icon {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.tree-controls-info-tooltip {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  width: 260px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  pointer-events: none;
  z-index: 500;
  white-space: normal;
}

.tree-controls-info-tooltip strong {
  color: var(--color-text);
  font-weight: 600;
}

.tree-controls-info:hover .tree-controls-info-tooltip {
  display: block;
}

/* ── Wrapper del SVG ─────────────────────────────────────── */
/* Cuando el árbol está visible, el wrap se extiende al ancho completo de la
   ventana sin afectar al resto del layout (cabecera, pestañas, fichas). */
#view-tree.visible .tree-svg-wrap {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
}

.tree-svg-wrap {
  flex: 1;
  min-height: 0;
}

/* ── SVG ─────────────────────────────────────────────────── */
.tree-svg {
  display: block;
  width: 100%;
  height: calc(100vh - 60px - 44px - 80px - 48px); /* viewport - header - tabnav - footer - controls */
  min-height: 600px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  cursor: grab;
}

.tree-svg:active {
  cursor: grabbing;
}

/* ── Líneas de filiación ──────────────────────────────────── */
.tree-link {
  fill: none;
  stroke: var(--tree-link-color);
  stroke-width: var(--tree-link-width);
}

/* ── Línea de pareja ──────────────────────────────────────── */
.tree-spouse-link {
  fill: none;
  stroke: var(--tree-spouse-link-color);
  stroke-width: var(--tree-spouse-link-width);
  stroke-dasharray: 6 3;
}

/* ── Nodo base ────────────────────────────────────────────── */
.tree-node-rect {
  fill:         var(--tree-node-bg);
  stroke:       var(--tree-node-border);
  stroke-width: 1px;
  transition:   stroke 0.12s, filter 0.12s;
}

.tree-node:hover .tree-node-rect {
  stroke: rgba(20,24,26,.28);
  filter: drop-shadow(0 1px 4px rgba(20,24,26,.10));
}

/* Filete de color por sexo */
.tree-node-stripe {
  fill: var(--tree-node-stripe-unknown);
  pointer-events: none;
}

.tree-node--male   .tree-node-stripe { fill: var(--tree-node-stripe-male);   }
.tree-node--female .tree-node-stripe { fill: var(--tree-node-stripe-female); }

/* Nodo en foco */
.tree-node--focus .tree-node-rect {
  stroke:       var(--tree-node-focus-border);
  stroke-width: 2px;
  filter:       drop-shadow(var(--tree-node-focus-shadow));
}

/* Nodo seleccionado (clic simple) */
.tree-node--selected .tree-node-rect {
  stroke:       var(--tree-node-selected-border);
  stroke-width: 2px;
  filter:       drop-shadow(var(--tree-node-selected-shadow));
}

/* Cónyuge: borde punteado más tenue */
.tree-node--spouse .tree-node-rect {
  stroke-dasharray: 5 3;
  stroke:       var(--color-border);
}

/* ── Textos dentro del nodo ───────────────────────────────── */
.tree-node-name {
  font-family: var(--font-ui);
  font-size:   var(--tree-node-name-size);
  font-weight: 500;
  fill:        var(--color-text);
  pointer-events: none;
}

.tree-node-years {
  font-family:    var(--font-mono);
  font-size:      var(--tree-node-years-size);
  fill:           var(--color-text-secondary);
  pointer-events: none;
}

/* ── Toggle +/− ───────────────────────────────────────────── */
.tree-toggle-circle {
  fill:         var(--tree-toggle-bg);
  stroke:       var(--tree-toggle-border);
  stroke-width: 1.5px;
  transition:   fill 0.1s;
}

.tree-toggle:hover .tree-toggle-circle {
  fill: var(--tree-toggle-hover-bg);
}

.tree-toggle-text {
  font-family:    var(--font-ui);
  font-size:      0.75rem;
  font-weight:    600;
  fill:           var(--tree-toggle-text);
  pointer-events: none;
}

/* ── Menú contextual ──────────────────────────────────────── */
.tree-context-menu {
  position:         fixed;
  z-index:          9999;
  background-color: var(--tree-context-bg);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-md);
  box-shadow:       var(--shadow-md);
  padding:          var(--space-1) 0;
  min-width:        152px;
  overflow:         hidden;
}

.tree-context-item {
  display:         block;
  width:           100%;
  padding:         var(--space-2) var(--space-4);
  background:      none;
  border:          none;
  text-align:      left;
  font-family:     var(--font-ui);
  font-size:       0.875rem;
  color:           var(--color-text);
  cursor:          pointer;
  transition:      background-color 0.1s;
}

.tree-context-item:hover {
  background-color: var(--color-surface-alt);
}

.tree-context-item--disabled {
  color:  var(--color-text-placeholder);
  cursor: default;
}

.tree-context-item--disabled:hover {
  background-color: transparent;
}

/* ============================================================
   Vista de abanico (fan chart de ancestros)
   ============================================================ */

:root {
  /* Rellenos suaves de sector por sexo — versión desaturada de los filetes */
  --fan-fill-male:    rgba(18,105,199,0.10);    /* Greek Blue muy claro */
  --fan-fill-female:  rgba(180, 93,174,0.10);   /* Violeta muy claro   */
  --fan-fill-unknown: rgba(20, 24, 26,0.05);    /* Neutro tenue        */

  /* Relleno del sector seleccionado */
  --fan-fill-selected: rgba(31,156,146,0.18);   /* Aguamarina tenue    */

  /* Fuente de etiquetas dentro del abanico */
  --fan-label-size:   0.6875rem;
}

/* Sector de anillo (gen ≥ 1) */
.fan-sector {
  transition: fill 0.12s, filter 0.12s;
}

/* Disco central (gen 0 / foco) */
.fan-sector--focus {
  stroke-width: 2px;
  filter: drop-shadow(var(--tree-node-focus-shadow));
}

/* Hover sobre cualquier grupo-sector */
.fan-sector-group:hover .fan-sector {
  filter: brightness(0.93) drop-shadow(0 1px 4px rgba(20,24,26,.12));
}

/* Sector seleccionado */
.fan-sector-group--selected .fan-sector {
  fill:   var(--fan-fill-selected) !important;
  stroke: var(--tree-node-selected-border) !important;
  stroke-width: 1.5px !important;
  filter: drop-shadow(var(--tree-node-selected-shadow));
}

/* Etiquetas de texto dentro del abanico */
.fan-label {
  font-family:    var(--font-ui);
  font-size:      var(--fan-label-size);
  font-weight:    500;
  fill:           var(--color-text);
  pointer-events: none;
  user-select:    none;
}

.fan-label--focus {
  font-size:   0.8125rem;
  font-weight: 600;
  fill:        var(--color-text);
}

/* ============================================================
   Modo avanzado: ocultar pestaña de estadísticas en modo sencillo
   ============================================================ */
body:not(.advanced) .tab-btn[data-tab="stats"] {
  display: none;
}

/* ============================================================
   Vista de estadísticas
   ============================================================ */

/* Panel contenedor de tarjetas */
.stats-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

/* Tarjeta individual */
.stats-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.stats-card-title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-section-title);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* Definition list de stats */
.stats-dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
}

.stats-dl dt {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/* Valor numérico en mono para alineación óptica */
.stats-value {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  text-align: right;
  white-space: nowrap;
}

.stats-value--empty {
  color: var(--color-text-placeholder);
  font-weight: 400;
}

/* ============================================================
   Vista fichas — filtros avanzados (solo en modo avanzado)
   ============================================================ */
body:not(.advanced) .persons-advanced-filters {
  display: none;
}

.persons-advanced-filters {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
}

/* Fila de dos inputs de año */
.adv-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Input reutilizable para cada filtro avanzado */
.adv-filter-input {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  outline: none;
  width: 100%;
}

.adv-filter-input:focus {
  background-color: var(--color-surface);
  border-bottom-color: var(--color-border-focus);
  box-shadow: 0 1px 0 var(--color-border-focus);
  position: relative;
  z-index: 1;
}

.adv-filter-input::placeholder {
  color: var(--color-text-placeholder);
}

/* El segundo año en la fila tiene borde izquierdo para separar */
.adv-filter-row .adv-filter-input:last-child {
  border-left: 1px solid var(--color-border);
}

/* Quitar las flechas del input number en Firefox y Chrome */
.adv-filter-year::-webkit-inner-spin-button,
.adv-filter-year::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.adv-filter-year { -moz-appearance: textfield; }

/* ============================================================
   Toggle "Modo avanzado" en la cabecera
   ============================================================ */

/* Variables del switch */
:root {
  --toggle-track-w:    36px;
  --toggle-track-h:    20px;
  --toggle-thumb-size: 14px;
}

.advanced-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: var(--space-3);
}

.advanced-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.advanced-toggle-track {
  display: inline-block;
  position: relative;
  width: var(--toggle-track-w);
  height: var(--toggle-track-h);
  border-radius: var(--radius-pill);
  background-color: var(--color-border);
  border: 1px solid var(--color-border);
  transition: background-color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

/* Pulgar del switch */
.advanced-toggle-track::after {
  content: '';
  position: absolute;
  top: calc((var(--toggle-track-h) - var(--toggle-thumb-size)) / 2 - 1px);
  left: 2px;
  width: var(--toggle-thumb-size);
  height: var(--toggle-thumb-size);
  border-radius: 50%;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s;
}

/* Estado ON */
.advanced-toggle input:checked + .advanced-toggle-track {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.advanced-toggle input:checked + .advanced-toggle-track::after {
  transform: translateX(calc(var(--toggle-track-w) - var(--toggle-thumb-size) - 4px));
}

/* Foco accesible */
.advanced-toggle input:focus-visible + .advanced-toggle-track {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.advanced-toggle-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-secondary);
  user-select: none;
  white-space: nowrap;
}

/* En móvil, ocultar la etiqueta de texto */
@media (max-width: 600px) {
  .advanced-toggle-label {
    display: none;
  }
}

/* ============================================================
   Fichas — fila de acciones (Ver en árbol + Editar)
   ============================================================ */
.person-action-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-2);
}

/* Botón Editar: solo visible en modo avanzado */
.advanced-only {
  display: none;
}

body.advanced .advanced-only {
  display: inline-flex;
}

.btn-edit-person {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  color: var(--color-agua);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}

.btn-edit-person:hover {
  background-color: rgba(31,156,146,0.08);
  border-color: var(--color-agua);
}

/* ============================================================
   Formulario de edición de individuo
   ============================================================ */
.person-edit-form {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.person-edit-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.edit-field-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: var(--space-3);
}

.edit-field-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-secondary);
}

.edit-field-input {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  outline: none;
  width: 100%;
  transition: border-color 0.12s, background-color 0.12s;
}

.edit-field-input:focus {
  border-color: var(--color-border-focus);
  background-color: var(--color-surface);
  box-shadow: 0 0 0 2px rgba(18,105,199,0.12);
}

.edit-btn-row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.btn-edit-save {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  cursor: pointer;
  transition: background-color 0.12s;
}

.btn-edit-save:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn-edit-cancel {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}

.btn-edit-cancel:hover {
  background-color: var(--color-surface);
  border-color: var(--color-text-secondary);
}

/* Selector de calendario junto a campo de fecha */
.edit-date-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  width: 100%;
}

.edit-date-wrapper .edit-field-input {
  flex: 1;
}

.btn-cal-picker {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-secondary);
  transition: background-color 0.12s, border-color 0.12s;
}

.btn-cal-picker:hover {
  background-color: var(--color-surface);
  border-color: var(--color-text-secondary);
}

/* Input date nativo: invisible pero funcional */
.edit-date-native {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  border: none;
  padding: 0;
}

/* Sección de notas en la ficha */
.person-note-text {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.55;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.person-note-text:last-child {
  border-bottom: none;
}

/* Edición de notas */
.edit-notes-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.edit-notes-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-secondary);
}

.edit-note-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.edit-note-textarea {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  resize: vertical;
  outline: none;
  transition: border-color 0.12s, background-color 0.12s;
}

.edit-note-textarea:focus {
  border-color: var(--color-border-focus);
  background-color: var(--color-surface);
  box-shadow: 0 0 0 2px rgba(18,105,199,0.12);
}

.btn-note-delete {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1.5;
  transition: background-color 0.12s, border-color 0.12s;
}

.btn-note-delete:hover {
  background-color: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}

.btn-note-add {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

.btn-note-add:hover {
  background-color: var(--color-surface);
  border-color: var(--color-text-secondary);
  color: var(--color-text);
}

/* ============================================================
   Vista "Sobre" — manual de usuario
   ============================================================ */

/* La sección ocupa el ancho de columna de texto, centrada */
#view-about {
  padding: var(--space-6) var(--space-4);
}

/* Artículo interior: columna de lectura cómoda */
.about-article {
  max-width: 640px;          /* Ancho de lectura; el árbol va al 100% */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Título principal */
.about-h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-text);
  line-height: 1.2;
}

/* Párrafo de introducción */
.about-intro {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-top: calc(-1 * var(--space-3));   /* Acercar intro al h1 */
}

/* Secciones internas */
.about-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Subtítulos de sección */
.about-h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* Párrafos dentro de las secciones */
.about-section p {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* Listas de primer nivel */
.about-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
}

.about-list > li {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  padding-left: var(--space-4);
  position: relative;
}

/* Viñeta manual para mantener el diseño limpio */
.about-list > li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--color-text-placeholder);
}

/* Sublistas (nivel 2) */
.about-sublist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-left: var(--space-4);
}

.about-sublist > li {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  padding-left: var(--space-3);
  position: relative;
}

.about-sublist > li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--color-text-placeholder);
}

/* Código inline */
.about-code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--color-text);
}

/* Línea de cierre "Una herramienta de Culturoscope." */
.about-footer {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--color-text-placeholder);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}