/* ===================================================================== ALETHEIA LATTICE — SISTEMA VISUAL EDITORIAL (FASE 18) Punto único de verdad para tokens y primitivas visuales. Estética: biblioteca antigua · diario de cuero · pergamino · oro viejo. USO: enlazar como ÚLTIMO elemento del para que sus tokens (:root) y la base de ganen el cascade sobre estilos locales. Esto NO cambia comportamiento, lógica ni estructura: solo capa visual. ===================================================================== */ :root { /* ── Pergamino / superficies ─────────────────────────────── */ --paper-bg: #f4ecd8; /* pergamino base (fondo) */ --paper-bg-2: #efe3c3; /* pergamino saturado */ --ivory: #fffaf0; /* marfil (tarjetas/superficies) */ /* Alias heredados (mismo significado, no duplicar valores) */ --sand: #f4ecd8; --sand2: #efe3c3; --sand3: #e7d8b8; --paper: #fffaf0; /* ── Tinta / cuero ───────────────────────────────────────── */ --ink: #2a1b10; /* casi-negro de cuero: fondos oscuros / títulos fuertes */ --text: #2f2418; /* tinta sepia: cuerpo */ --text2: #5e4d39; /* tinta secundaria */ --muted: #8a7559; /* pergamino-marrón apagado */ --leather-dark:#4a2f1c; /* cuero oscuro */ --leather: #6b3f24; /* cuero medio */ --clay: #a76b5c; /* arcilla */ --terracotta: #a76b5c; /* alias arcilla */ /* ── Oro (plano + con luz) ───────────────────────────────── */ --gold: #b3923f; /* oro viejo */ --gold-bright: #d8b75e; /* realce de oro (para gradientes) */ --gold-soft: #efe1bf; /* oro pálido */ --gold-grad: linear-gradient(135deg,#d8b75e 0%,#c7a755 32%,#b3923f 62%,#8f7330 100%); --gold-rule: linear-gradient(90deg,#b3923f 0%,#d8b75e 50%,#b3923f 100%); --amber: #b3923f; /* alias */ /* ── Acentos de sistema (sub-marcas / journals) ──────────── */ --accent: #6b3f24; /* acento cálido principal (cuero medio) */ --accent2: #a76b5c; /* arcilla (barras / detalles) */ --accent3: #4a2f1c; /* cuero oscuro */ --companion: #7a4632; /* sub-marca "Companion": sienna de cuero (antes morado) */ --companion-light:#f1e4d4;/* tinte cálido (antes lavanda) */ --continuity: #8a6a3c; /* sub-marca "Continuity": bronce de cuero (antes verde) */ --green: #8a6a3c; /* alias heredado → bronce (sin verde de marca) */ --red: #9a4034; /* error: oxblood apagado (no rojo neón) */ /* Score / indicadores — paleta editorial, sin semáforo agresivo */ --score-high: #6f8f5e; /* sage apagado */ --score-mid: #b3923f; /* oro */ --score-low: #a76b5c; /* arcilla */ /* ── Bordes ──────────────────────────────────────────────── */ --border: #d9c7a0; /* borde pergamino */ --border-soft: #e7dcc4; /* borde tenue */ --hairline: rgba(74,47,28,0.16); /* filete fino de cuero */ /* ── Sombras cálidas (rgba(70,42,20,…)) ──────────────────── */ --shadow-xs: 0 1px 4px rgba(70,42,20,0.06); --shadow-sm: 0 2px 12px rgba(70,42,20,0.08); --shadow: 0 6px 24px rgba(70,42,20,0.12); --shadow-md: 0 8px 32px rgba(70,42,20,0.14); --shadow-lg: 0 16px 48px rgba(70,42,20,0.18); /* ── Radios (unificados — primario 8px) ──────────────────── */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; /* ── Tipografía ──────────────────────────────────────────── */ --font-display:'Playfair Display','Lora',Georgia,serif; --font-serif: 'Lora',Georgia,'Times New Roman',serif; --font-ui: 'DM Sans',system-ui,-apple-system,sans-serif; /* ── Transiciones (lentas, sobrias) ──────────────────────── */ --ease: cubic-bezier(0.16,1,0.3,1); --t-fast: 0.18s; --t: 0.3s; --t-med: 0.45s; --t-slow: 0.8s; /* ── Grano de papel (asset CSS muy ligero, 1 data-URI) ───── */ --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); } /* ── Base de página: pergamino + grano sutil ───────────────── Se aplica a en general; las páginas pueden refinar su propio color de fondo, pero heredan textura y tinta. */ body { background-color: var(--paper-bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body::before { /* Capa de grano fija; pointer-events none para no interferir */ content: ""; position: fixed; inset: 0; background-image: var(--paper-grain); background-size: 200px 200px; opacity: 0.6; mix-blend-mode: multiply; pointer-events: none; z-index: 0; } /* Contenido por encima del grano */ body > * { position: relative; z-index: 1; } /* ── Filete de oro con luz (regla decorativa) ────────────────── */ .ed-gold-rule { width: 56px; height: 2px; background: var(--gold-rule); border: none; border-radius: 2px; margin: 1.1rem 0; } /* ── Botón de cuero (primario) ───────────────────────────────── */ .ed-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #f3ead8; background: linear-gradient(165deg,#3a2616 0%,var(--ink) 100%); border: 1px solid rgba(179,146,63,0.42); border-radius: var(--radius); padding: 0.85rem 2rem; cursor: pointer; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .ed-btn:hover:not(:disabled) { background: linear-gradient(165deg,#4a3120 0%,#231507 100%); border-color: rgba(216,183,94,0.7); box-shadow: var(--shadow-sm); } .ed-btn:disabled { opacity: 0.45; cursor: not-allowed; } /* Botón fantasma / secundario (mismo radio, sin pastilla) */ .ed-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; color: var(--leather); background: transparent; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem 1.8rem; cursor: pointer; transition: border-color var(--t) var(--ease), color var(--t) var(--ease); } .ed-btn-ghost:hover { border-color: var(--gold); color: var(--ink); } /* ── Campos editoriales (input / textarea / select) ──────────── */ .ed-field { font-family: var(--font-serif); color: var(--text); background: var(--ivory); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .ed-field::placeholder { color: var(--muted); font-style: italic; } .ed-field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(179,146,63,0.16); } /* Checkbox estilizado (sello en lugar de control de SO) */ .ed-check { appearance: none; -webkit-appearance: none; width: 1.15em; height: 1.15em; flex: 0 0 auto; border: 1.5px solid var(--border); border-radius: 4px; background: var(--ivory); cursor: pointer; position: relative; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); } .ed-check:checked { border-color: var(--gold); background: var(--gold-soft); } .ed-check:checked::after { content: ""; position: absolute; left: 50%; top: 46%; width: 0.3em; height: 0.6em; transform: translate(-50%,-55%) rotate(45deg); border: solid var(--leather); border-width: 0 2px 2px 0; } .ed-check:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(179,146,63,0.16); } /* ── Sello / monograma editorial "AL" ───────────────────────── */ .al-seal { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.04em; color: var(--gold); background: radial-gradient(circle at 50% 40%, rgba(216,183,94,0.18), transparent 70%), var(--ivory); border: 1.5px solid var(--gold); box-shadow: inset 0 0 0 3px rgba(179,146,63,0.12), var(--shadow-xs); } .al-seal::before { content: "AL"; } /* Marca de agua tenue (footers, pantallas vacías) */ .al-watermark { font-family: var(--font-display); font-style: italic; color: var(--ink); opacity: 0.05; pointer-events: none; user-select: none; } .al-watermark::before { content: "AL"; } /* ── Estados editoriales: loading / success / empty ──────────── */ .ed-state { text-align: center; font-family: var(--font-serif); color: var(--text2); padding: 4rem 1.5rem; } .ed-state .ed-state-line { font-style: italic; font-size: 1.1rem; line-height: 1.7; color: var(--text2); } /* Loading: filete de tinta que se dibuja despacio (sin spinner) */ .ed-loading-rule { width: 0; height: 2px; margin: 1.3rem auto 0; max-width: 180px; background: var(--gold-rule); animation: ed-inkdraw 1.8s var(--ease) infinite alternate; } @keyframes ed-inkdraw { from { width: 24px; opacity: 0.5; } to { width: 180px; opacity: 1; } } /* Success: sello que aparece con calma */ .ed-success .al-seal { animation: ed-seal 0.9s var(--ease) both; } @keyframes ed-seal { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } } /* Empty: marca de agua + frase */ .ed-empty .al-watermark { font-size: 3.4rem; display: block; margin: 0 auto 0.6rem; } /* ── Scrollbar discreta y cálida ─────────────────────────────── */ * { scrollbar-color: var(--border) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; } /* ── Accesibilidad: reduce-motion ────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .ed-loading-rule { width: 140px; } }