/* Estilos base de raíces. Un solo usuario, una sola página. * * Todos los colores viven en los dos bloques de tokens de abajo: `:root` (tema claro) * y `:root[data-theme="oscuro"]`. Ningún selector de este archivo debería llevar un * color literal; si hace falta uno nuevo, se declara como token en AMBOS bloques * (hay una prueba que comprueba que no se desincronizan). * * El atributo `data-theme` en lo escribe el script en línea del de cada * página (antes de pintar, para que no haya destello) y luego lo mantiene * static/js/theme.js. Vale siempre "claro" u "oscuro": la preferencia "automático" se * resuelve ahí, no aquí, para no duplicar los tokens dentro de un @media. */ :root { /* Sin esto, los controles nativos (select, input, barras de scroll) siguen al tema del sistema y no al de la app: en un macOS oscuro con la app en claro salían negros sobre fondo claro. */ color-scheme: light; /* Superficies y texto */ --bg: #f7f5f0; --panel: #ffffff; --panel-alt: #fbfaf7; --sunken: #ece8df; --ink: #2b2b28; --ink-2: #4a463d; --ink-3: #6b6659; --ink-4: #8a8578; --border: #d8d3c7; --hover: #eef3ee; /* Marca. `--accent` es la superficie verde (header, botones sólidos) y `--accent-text` el verde legible sobre `--panel`: en oscuro NO pueden ser el mismo color, o el texto blanco del header pierde contraste. */ --accent: #4a7c59; --accent-ink: #ffffff; --accent-text: #4a7c59; --gold: #caa53a; --gold-ink: #2b2b28; /* Estados */ --danger: #b3261e; --danger-ink: #a33333; --danger-bg: #fbe9e7; --danger-border: #f2c7c0; --ok-ink: #4a7c59; /* Sobre la barra verde (translúcidos) */ --on-accent-soft: rgba(255, 255, 255, 0.15); --on-accent-soft-hover: rgba(255, 255, 255, 0.25); --on-accent-line: rgba(255, 255, 255, 0.5); --on-accent-field: rgba(255, 255, 255, 0.95); /* El buscador y el selector de árbol viven sobre la barra verde y conservan su fondo claro en los dos temas, así que su texto también: no puede seguir a `--ink`. */ --on-accent-field-ink: #2b2b28; /* Sombras */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.15); --shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.08); --shadow-toast: 0 6px 20px rgba(0, 0, 0, 0.25); /* Pie y avisos flotantes */ --footer-ink: rgba(43, 43, 40, 0.5); --toast-bg: #2b2b28; --toast-ink: #ffffff; --toast-close: rgba(255, 255, 255, 0.6); /* Líneas del árbol: paleta «Bosque», la de por defecto. Las otras dos están en los bloques `[data-links=…]` de más abajo. Los grosores y el punteado no dependen del tema (son geometría), así que solo se declaran aquí. */ --link-filiacion: #5f8159; --link-union: #b8892b; --link-w-filiacion: 1.4px; --link-w-union: 2.2px; --link-union-dash: none; /* Árbol exportado: es un artefacto imprimible, así que estos tokens son los únicos que NO se redefinen en oscuro. */ --export-bg: #f7f5f0; --export-card: #ffffff; --export-ink: #2b2b28; --export-ink-2: #5a564c; } :root[data-theme="oscuro"] { color-scheme: dark; --bg: #1b1a17; --panel: #23221e; --panel-alt: #2a2924; --sunken: #141311; --ink: #ece8df; --ink-2: #c9c3b5; --ink-3: #a8a294; --ink-4: #8b857a; --border: #3a3833; --hover: #2e332e; --accent: #35583f; --accent-ink: #f2efe7; --accent-text: #8ec39f; --gold: #d9b855; --gold-ink: #1b1a17; --danger: #f08a80; --danger-ink: #f2a9a2; --danger-bg: #3a2220; --danger-border: #6b3b36; --ok-ink: #8ec39f; --on-accent-soft: rgba(255, 255, 255, 0.10); --on-accent-soft-hover: rgba(255, 255, 255, 0.18); --on-accent-line: rgba(255, 255, 255, 0.35); --on-accent-field: rgba(255, 255, 255, 0.90); --on-accent-field-ink: #2b2b28; --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55); --shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.6); --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.7); --footer-ink: rgba(236, 232, 223, 0.45); --toast-bg: #3a3833; --toast-ink: #f2efe7; --toast-close: rgba(255, 255, 255, 0.6); --link-filiacion: #8fb98a; --link-union: #d9b855; } /* Líneas del árbol, por paleta (`data-links` en , lo escribe el mismo script en * línea que el tema). El vendor las dibuja todas blancas y con la misma clase, así que * hasta ahora eran casi invisibles sobre el fondo crema y no se distinguía un * matrimonio de una filiación. * * En las tres paletas la unión es más gruesa que la filiación: la diferencia no puede * depender solo del tono (daltonismo, impresión en gris). En "Alto contraste", donde * los dos tonos son casi el mismo, la unión va además punteada. */ :root[data-links="tinta"] { --link-filiacion: #3f6ea8; --link-union: #9c3b52; } :root[data-theme="oscuro"][data-links="tinta"] { --link-filiacion: #7fa8d8; --link-union: #d98fa0; } :root[data-links="contraste"] { --link-filiacion: #1f1f1c; --link-union: #000000; --link-w-filiacion: 1.8px; --link-w-union: 2.8px; --link-union-dash: 6 4; } :root[data-theme="oscuro"][data-links="contraste"] { --link-filiacion: #f2efe7; --link-union: #ffffff; } /* El vendor pone stroke y stroke-width como atributos de presentación, así que basta una regla normal para ganarles. La regla base cubre el primer fotograma, antes de que tree.js etiquete cada línea con su tipo. */ .f3 .link { stroke: var(--link-filiacion); fill: none; } .f3 .link.link-union { stroke: var(--link-union); stroke-dasharray: var(--link-union-dash); } /* El `:not()` deja intacto el resalte del camino a la tarjeta centrada del vendor (`.f3 .link.f3-path-to-main { stroke-width: 4px }`), sin depender de qué hoja se cargue primero. */ .f3 .link.link-filiacion:not(.f3-path-to-main) { stroke-width: var(--link-w-filiacion); } .f3 .link.link-union:not(.f3-path-to-main) { stroke-width: var(--link-w-union); } /* Tarjetas del árbol (family-chart). Su hoja se carga DESPUÉS de esta y define sus variables bajo `.f3`, así que no se puede ganar por orden: hay que ganar por especificidad. Prefijar con `:root[data-theme=…]` añade un atributo y basta. */ :root[data-theme="claro"] .f3 { --background-color: #ffffff; --text-color: #2b2b28; } :root[data-theme="oscuro"] .f3 { --female-color: rgb(150, 104, 111); --male-color: rgb(90, 122, 134); --genderless-color: #6f6a60; --background-color: #23221e; --text-color: #ece8df; } /* El vendor resalta la tarjeta centrada con un outline gris claro (0,3,0). */ :root[data-theme="oscuro"] .f3 div.card-main .card-inner { outline-color: #8ec39f; } :root[data-theme="oscuro"] .f3 div.card-inner.f3-path-to-main { outline-color: #d9d3c5; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); } body { display: flex; flex-direction: column; } .app-header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1.2rem; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); } .app-header h1 { margin: 0; font-size: 1.3rem; font-weight: 600; } .header-tools { display: flex; align-items: center; gap: 1rem; } .app-header nav { display: flex; align-items: center; gap: 0.8rem; } .app-header nav a { color: var(--accent-ink); text-decoration: none; font-weight: 500; } .app-header nav a:hover { text-decoration: underline; } .app-header nav button { background: var(--on-accent-soft); border: 1px solid var(--on-accent-line); color: var(--accent-ink); } /* Páginas de acceso (login / registro) */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); } .auth-card { display: block; /* anula la regla genérica `main { display:flex }` */ background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 2rem 2.2rem; width: 340px; box-shadow: var(--shadow-lg); } .auth-card h1 { margin: 0; color: var(--accent-text); font-size: 1.6rem; } .auth-sub { color: var(--ink-3); margin: 0.2rem 0 1.2rem; } .auth-card form label { display: block; font-size: 0.85rem; color: var(--ink-2); margin: 0.6rem 0; } .auth-card input { display: block; width: 100%; margin-top: 0.2rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; background: var(--panel); color: var(--ink); } .auth-card button { width: 100%; margin-top: 1rem; padding: 0.55rem; font-size: 1rem; } .auth-error { background: var(--danger-bg); color: var(--danger-ink); border: 1px solid var(--danger-border); border-radius: 6px; padding: 0.4rem 0.6rem; margin-top: 0.6rem; font-size: 0.9rem; } .auth-alt { margin: 1rem 0 0; font-size: 0.9rem; text-align: center; } .auth-alt a { color: var(--accent-text); } /* Usuario en la barra */ .user-chip { color: var(--accent-ink); font-size: 0.9rem; opacity: 0.9; } #btn-logout { background: var(--on-accent-soft); border: 1px solid var(--on-accent-line); color: var(--accent-ink); } /* Selector de árbol */ .tree-picker { display: flex; align-items: center; gap: 0.3rem; } .tree-picker select { /* Conserva su fondo claro sobre la barra verde en los dos temas, así que el control nativo también tiene que dibujarse en claro. */ color-scheme: light; font: inherit; padding: 0.35rem 0.5rem; border: 1px solid var(--on-accent-line); border-radius: 6px; background: var(--on-accent-field); color: var(--on-accent-field-ink); max-width: 200px; } #btn-tree-manage { background: var(--on-accent-soft); border: 1px solid var(--on-accent-line); color: var(--accent-ink); padding: 0.35rem 0.5rem; } /* Gestión de árboles (panel) */ .tree-list { list-style: none; margin: 0 0 0.8rem; padding: 0; } .tree-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--border); } .tl-count { color: var(--ink-4); font-size: 0.8rem; font-weight: 400; } .tl-actions { display: flex; gap: 0.3rem; align-items: center; } .tl-actions button { padding: 0.2rem 0.5rem; font-size: 0.8rem; } /* Miembros de un árbol compartido */ .member-list { list-style: none; margin: 0 0 0.8rem; padding: 0; } .member-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--border); } .role-badge { background: var(--hover); color: var(--accent-text); border-radius: 10px; padding: 0.1rem 0.5rem; font-size: 0.75rem; } /* Buscador */ .search { position: relative; } .search input { color-scheme: light; /* igual que el selector de árbol: vive sobre la barra verde */ width: 220px; padding: 0.35rem 0.6rem; border: 1px solid var(--on-accent-line); border-radius: 6px; font: inherit; background: var(--on-accent-field); color: var(--on-accent-field-ink); } .search-results { position: absolute; top: 110%; left: 0; right: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-md); z-index: 20; max-height: 320px; overflow-y: auto; } .sr-item, .sr-empty { padding: 0.45rem 0.6rem; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; gap: 0.5rem; } .sr-item:hover { background: var(--hover); } .sr-year { color: var(--ink-4); font-size: 0.85rem; } .sr-empty { color: var(--ink-4); cursor: default; } /* Lista de personas */ .list-sort { font-size: 0.85rem; color: var(--ink-3); margin: 0.5rem 0 0.8rem; } .list-sort button { background: var(--panel); color: var(--accent-text); padding: 0.2rem 0.5rem; margin-left: 0.3rem; } .list-sort button.on { background: var(--accent); color: var(--accent-ink); } .count { color: var(--ink-4); font-weight: 400; font-size: 0.9rem; } .people-list { list-style: none; margin: 0; padding: 0; } .people-list li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--border); cursor: pointer; } .people-list li:hover { background: var(--hover); } .people-list li.muted { cursor: default; color: var(--ink-4); } .pl-year { color: var(--ink-4); font-size: 0.85rem; white-space: nowrap; } /* ---- Página de exportación ---- */ .export-layout { flex: 1; display: flex; min-height: 0; } .controls { width: 300px; border-right: 1px solid var(--border); background: var(--panel); padding: 1rem 1.1rem; overflow-y: auto; } .controls h2 { margin: 0 0 0.6rem; font-size: 1.1rem; } .controls h3 { margin: 1rem 0 0.4rem; font-size: 0.95rem; } .controls > label { display: block; font-size: 0.85rem; color: var(--ink-2); margin: 0.5rem 0; } .controls input:not([type="radio"]):not([type="checkbox"]), .controls select { display: block; width: 100%; margin-top: 0.2rem; padding: 0.35rem 0.45rem; border: 1px solid var(--border); border-radius: 5px; font: inherit; background: var(--panel); color: var(--ink); } .controls fieldset { border: 1px solid var(--border); border-radius: 6px; margin: 0.7rem 0; padding: 0.4rem 0.6rem; } .controls legend { font-size: 0.8rem; color: var(--ink-3); padding: 0 0.3rem; } .controls #btn-generate { width: 100%; margin-top: 0.5rem; } .dl-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; } .hint { font-size: 0.78rem; color: var(--ink-4); margin: 0.6rem 0 0; } .preview-area { flex: 1; overflow: auto; background: var(--sunken); } .preview { min-height: 100%; display: flex; align-items: flex-start; justify-content: center; padding: 1rem; } /* El SVG generado siempre es claro (se imprime), así que su fondo no sigue al tema. */ .preview svg { max-width: 100%; height: auto; box-shadow: var(--shadow-md); background: var(--export-bg); } .preview .placeholder { position: static; transform: none; margin-top: 3rem; } @media print { .app-header, .controls { display: none !important; } .export-layout, .preview-area { display: block; overflow: visible; } .preview svg { box-shadow: none; max-width: 100%; } } /* Botón de importar en la barra (input de archivo camuflado). */ .nav-file { cursor: pointer; color: var(--accent-ink); font-weight: 500; background: var(--on-accent-soft); border: 1px solid var(--on-accent-line); border-radius: 6px; padding: 0.35rem 0.7rem; } .nav-file:hover { background: var(--on-accent-soft-hover); } /* ---- Página de efemérides ---- */ .efem-layout { flex: 1; display: flex; gap: 1.5rem; padding: 1.2rem; overflow: auto; } .efem-col { flex: 1; min-width: 0; } .efem-col h2 { font-size: 1.1rem; margin: 0 0 0.8rem; color: var(--accent-text); } .efem-birthdays, .efem-timeline { list-style: none; margin: 0; padding: 0; } .efem-birthdays li, .efem-timeline li { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--border); } .efem-when { font-weight: 600; min-width: 105px; } .efem-name { flex: 1; } .efem-meta { color: var(--ink-4); font-size: 0.85rem; white-space: nowrap; } .efem-icon { font-size: 1rem; } .efem-date { min-width: 130px; color: var(--ink-3); } .efem-text { flex: 1; } .efem-birthdays .muted, .efem-timeline .muted { color: var(--ink-4); font-style: italic; } main { flex: 1; display: flex; min-height: 0; } .tree-container { flex: 1; position: relative; overflow: hidden; } /* El contenedor lleva la clase `f3` (family-chart.css la exige para estilar las tarjetas), pero eso también impone su tipografía a los estados vacíos que viven dentro. Los devolvemos a la fuente de la app. */ .tree-container > .empty-state { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* family-chart no fija el tamaño de su SVG: hay que estirarlo al contenedor para que el "fit" inicial calcule bien el encuadre. */ .tree-container svg.main_svg { width: 100%; height: 100%; } .placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--ink-4); font-style: italic; } .empty-state { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--ink-3); } .empty-state button { margin-top: 0.5rem; } .side-panel { width: 360px; border-left: 1px solid var(--border); background: var(--panel); overflow-y: auto; padding: 1rem 1.1rem 2rem; } .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .panel-head h2 { margin: 0 0 0.3rem; font-size: 1.15rem; } .panel-body p { margin: 0.2rem 0; } .panel-body .k { color: var(--ink-3); font-size: 0.85rem; } .panel-body .notes { white-space: pre-wrap; margin-top: 0.5rem; } .panel-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0; border-top: 1px solid var(--border); padding-top: 0.9rem; } .panel-error { background: var(--danger-bg); color: var(--danger-ink); border: 1px solid var(--danger-border); border-radius: 6px; padding: 0.4rem 0.6rem; margin: 0.5rem 0; font-size: 0.9rem; } /* Botones */ button { font: inherit; padding: 0.4rem 0.7rem; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); border-radius: 6px; cursor: pointer; } button.secondary { background: var(--panel); color: var(--accent-text); } button.danger { background: var(--panel); color: var(--danger); border-color: var(--danger-border); } button.icon { background: none; border: none; color: var(--ink); font-size: 1rem; padding: 0.2rem; } button:hover { filter: brightness(0.96); } /* Formularios del panel */ .panel-form { margin-top: 0.5rem; } .panel-form h3 { margin: 0.6rem 0 0.4rem; font-size: 1rem; } .fields label, .panel-form > label { display: block; font-size: 0.85rem; color: var(--ink-2); margin: 0.35rem 0; } .fields input, .fields select, .fields textarea, .panel-form input, .panel-form select, .panel-form textarea { display: block; width: 100%; margin-top: 0.15rem; padding: 0.35rem 0.45rem; border: 1px solid var(--border); border-radius: 5px; font: inherit; background: var(--panel); color: var(--ink); } .fields .row { display: flex; gap: 0.5rem; } .fields .row label { flex: 1; } .fields fieldset { border: 1px solid var(--border); border-radius: 6px; margin: 0.6rem 0; padding: 0.4rem 0.6rem; } .fields legend { font-size: 0.8rem; color: var(--ink-3); padding: 0 0.3rem; } label.check { display: flex; align-items: center; gap: 0.4rem; } label.check input { width: auto; display: inline-block; margin: 0; } .mode { display: flex; gap: 1rem; margin: 0.5rem 0; } .form-actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; } /* Galería de fotos */ .panel-photos { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.6rem; } .panel-photos h3 { margin: 0 0 0.5rem; font-size: 1rem; } .panel-photos .muted { color: var(--ink-4); font-style: italic; margin: 0.2rem 0 0.6rem; } .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-bottom: 0.7rem; } .photo { border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem; background: var(--panel-alt); } .photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 5px; display: block; } .photo .cap { width: 100%; margin-top: 0.3rem; padding: 0.25rem 0.35rem; border: 1px solid var(--border); border-radius: 4px; font: inherit; font-size: 0.8rem; background: var(--panel); color: var(--ink); } .photo-actions { display: flex; gap: 0.3rem; margin-top: 0.3rem; } .photo-actions button { flex: 1; padding: 0.25rem; font-size: 0.75rem; } .photo-actions .is-primary { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); } .photo-add { display: flex; flex-direction: column; gap: 0.5rem; } .file-btn { display: inline-block; text-align: center; padding: 0.4rem 0.7rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--panel); color: var(--accent-text); cursor: pointer; font-size: 0.9rem; } .url-add { display: flex; gap: 0.4rem; } .url-add input { flex: 1; padding: 0.35rem 0.45rem; border: 1px solid var(--border); border-radius: 5px; font: inherit; background: var(--panel); color: var(--ink); } .photo-msg { font-size: 0.85rem; color: var(--ok-ink); } .photo-msg.error { color: var(--danger-ink); } /* Pie con la versión desplegada (lo inyecta static/js/footer.js). */ .app-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem; padding: 0.35rem 1.2rem; border-top: 1px solid var(--border); background: var(--bg); color: var(--footer-ink); font-size: 0.72rem; text-align: center; letter-spacing: 0.02em; } /* En login/registro el body centra su contenido, así que el pie va anclado abajo. */ .auth-page .app-footer { position: fixed; left: 0; right: 0; bottom: 0; border-top: none; background: transparent; } .app-footer-install { padding: 0.1rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--accent-text); font: inherit; font-size: 0.72rem; cursor: pointer; } .app-footer-install:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* Preferencias de apariencia en el pie (las monta static/js/theme.js). */ .app-prefs { display: flex; align-items: center; gap: 0.35rem; } .app-prefs label { color: var(--ink-3); letter-spacing: 0.02em; } .app-prefs select { font: inherit; font-size: 0.72rem; padding: 0.1rem 0.3rem; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--ink); cursor: pointer; } /* Avisos flotantes: nueva versión disponible, cómo instalar en iOS… */ .app-toast { position: fixed; left: 50%; bottom: 2.2rem; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 0.7rem; max-width: min(92vw, 34rem); padding: 0.6rem 0.7rem 0.6rem 1rem; border-radius: 10px; background: var(--toast-bg); color: var(--toast-ink); font-size: 0.85rem; line-height: 1.35; box-shadow: var(--shadow-toast); } .app-toast button { flex: 0 0 auto; padding: 0.25rem 0.7rem; border: none; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 600; cursor: pointer; } .app-toast .app-toast-close { padding: 0 0.3rem; background: none; color: var(--toast-close); font-size: 1.1rem; font-weight: 400; line-height: 1; } .app-toast .app-toast-close:hover { color: var(--toast-ink); }