/* ═══════════════════════════════════════════════════════════════ MIEL · Sistema de diseño v2 — tokens, reset y tipografía ─────────────────────────────────────────────────────────────── Todo el tema vive acá: cambiar una variable cambia la interfaz entera, en claro y en oscuro. Es un SUPERCONJUNTO de la versión anterior —conserva todos los nombres de variable que ya existían, así que ninguna hoja se rompe— y agrega cuatro capas que el sistema viejo no tenía: 1. Tipografía propia, autoalojada, sin pedirle nada a Google. 2. Escala de profundidad con vidrio, no solo con sombra. 3. Gradientes de marca derivados del oro y el azul del logo. 4. Curvas y duraciones de movimiento con nombre. Sigue siendo de dos temas. La dirección elegida es oscura, pero el tema claro no se abandona: Miel se abre de día en un monitor de oficina y un tema claro roto es una interfaz rota, no un detalle estético. Los valores de contraste que se citan en los comentarios están medidos, no estimados: `data/workspace/diseno/` tiene el guion. ═══════════════════════════════════════════════════════════════ */ /* ── 1 · Tipografía autoalojada ───────────────────────────────── Tres familias, un archivo cada una, todas variables: un solo `.woff2` cubre de peso 100 a 900 sin pedir un archivo por peso. Las tres juntas son 122 KB — menos que un logo mal exportado. Subset latino únicamente. El español entero —tildes, eñe, signos de apertura, diéresis— vive en el rango latin básico; latin-ext agregaría idiomas que Miel no habla y kilobytes que sí se pagan. `font-display:swap` y no `optional`: la primera pintura sale con la fuente del sistema y cambia al llegar la propia. Con `optional` una conexión lenta se queda para siempre con la del sistema, y entonces la tipografía deja de ser una decisión de diseño para volverse una lotería de red. Todas SIL OFL 1.1 — ver los LICENSE en esta misma carpeta. ────────────────────────────────────────────────────────────── */ @font-face { font-family:"Inter Variable"; src:url("/assets/fonts/inter-latin.woff2") format("woff2-variations"); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:"Sora Variable"; src:url("/assets/fonts/sora-latin.woff2") format("woff2-variations"); font-weight:100 800; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:"JetBrains Mono Variable"; src:url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2-variations"); font-weight:100 800; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ── Marca ── El oro y el azul salen del logo y no se tocan. Lo nuevo es el cian: la dirección "Organismo" necesita un segundo polo para que el degradado de marca vaya a algún lado. El oro solo, al degradarse, se apaga en marrón. El violeta aparece únicamente en la aurora del fondo, nunca sobre texto. */ --gold-900:#6E4E12; --gold-700:#8F6519; --gold-600:#A87824; --gold-500:#B8862B; --gold-400:#D0A249; --gold-300:#E5C583; --gold-100:#F6EAD1; --navy-900:#12233A; --navy-700:#1E3A5C; --navy-500:#2C5A8A; --navy-300:#5B8CBE; --cyan-600:#128C7E; --cyan-500:#1FB3A0; --cyan-400:#49E0CE; --cyan-300:#8AF0E3; --violet-500:#5A49D6; --violet-400:#7B6CF6; /* ── Semánticos ── */ --ok:#1F7A5C; --ok-soft:rgba(31,122,92,.12); /* El ámbar de aviso también baja un escalón sobre papel: a #B4791A daba 3,7 y la palabra "Cuota al 82 %" es texto chico, no adorno. */ --warn:#8F5E12; --warn-soft:rgba(180,121,26,.14); --danger:#C0392B; --danger-soft:rgba(192,57,43,.12); --info:#2C5A8A; --info-soft:rgba(44,90,138,.12); /* ── Superficies (Tema Claro Anti-Fatiga · Titanio Cálido / Seda Mineral) ── Diseñado específicamente para evitar el deslumbramiento y la fatiga visual. No usa blanco puro (#FFFFFF) sino un lienzo cálido mate de bajo brillo inspirado en papel editorial de alta densidad y piedra caliza suave. */ --bg:#E3DDD3; --bg-sunken:#D7D1C6; --surface:#ECE7DF; --surface-2:#DFD9CE; --surface-3:#D3CDC2; --overlay:rgba(26,32,44,.52); --border:rgba(35,45,60,.14); --border-strong:rgba(35,45,60,.25); --border-brand:rgba(148,105,27,.38); --text:#1E252F; --text-2:rgba(30,37,47,.76); --text-3:rgba(30,37,47,.56); --text-on-brand:#1A1408; --accent:#94691B; --accent-soft:rgba(148,105,27,.12); --accent-ring:rgba(148,105,27,.32); --glass:rgba(236,231,223,.82); --glass-2:rgba(223,217,206,.92); --glass-line:rgba(35,45,60,.14); --blur-sm:blur(8px) saturate(1.1); --blur:blur(14px) saturate(1.2); --blur-lg:blur(22px) saturate(1.3); /* ── Gradientes de marca ── Uno solo, en tres presentaciones. `--grad-marca` pinta fondos y bordes; `--grad-texto` es el mismo giro de tono pero calibrado más claro, porque un degradado recortado sobre letra pierde luminosidad al pasar por los huecos del glifo; `--grad-linea` es el filete de 1px de los elementos activos. El ángulo es 96° y no 90°: la diagonal apenas inclinada se lee como luz que entra, la horizontal exacta se lee como una bandera. Los tres llevan una parada intermedia clara y se interpolan en `oklab`. Sin eso, el camino recto de oro a cian pasa por un verde oliva sucio a mitad de recorrido: dos colores saturados con tonos casi opuestos se cruzan por el centro desaturado del espacio de color. La parada de oro claro sube la luminosidad justo donde el degradado se apagaba, y `oklab` reparte el resto de forma pareja para el ojo en vez de para el monitor. */ --grad-marca:linear-gradient(96deg in oklab, var(--gold-500), var(--gold-300) 46%, var(--cyan-500)); --grad-texto:linear-gradient(96deg in oklab, var(--gold-600), var(--gold-400) 46%, var(--cyan-600)); --grad-linea:linear-gradient(96deg in oklab, var(--gold-500), var(--gold-300) 46%, var(--cyan-400)); --grad-realce:linear-gradient(140deg, rgba(184,134,43,.16), rgba(31,179,160,.08)); /* El nombre de la marca tiene su propio degradado porque es el único texto recortado que se lee en cuatro letras: los tonos claros de `--grad-texto`, pensados para una cifra de 32px, en "MIEL" a 18px sobre papel se leen desteñidos. */ --grad-nombre:linear-gradient(96deg in oklab, var(--gold-700), var(--gold-500) 46%, var(--cyan-600)); /* Aurora del fondo: tres manchas muy difusas y muy lentas. En claro apenas se insinúan; subirlas más ensucia el papel. */ --aurora-1:rgba(184,134,43,.10); --aurora-2:rgba(31,179,160,.08); --aurora-3:rgba(90,73,214,.05); /* ── Sombras ── Teñidas con el azul marino de la marca, no con negro puro. Una sombra negra sobre un fondo cálido se ve sucia: el ojo la lee como suciedad y no como profundidad. Cada nivel apila una capa de contacto (corta y definida) con una de difusión (larga y suave), que es como cae la luz de verdad. */ --shadow-1: 0 1px 1px rgba(18,35,58,.04), 0 2px 4px rgba(18,35,58,.05); --shadow-2: 0 1px 2px rgba(18,35,58,.05), 0 4px 10px rgba(18,35,58,.07), 0 10px 24px rgba(18,35,58,.05); --shadow-3: 0 2px 4px rgba(18,35,58,.06), 0 12px 28px rgba(18,35,58,.12), 0 28px 64px rgba(18,35,58,.10); /* Realce interior: un pelo de luz en el borde superior. Es lo que separa una superficie "pegada" de una que parece tener volumen. */ --shadow-in:inset 0 1px 0 rgba(255,255,255,.7); /* Halo de marca: el resplandor de lo que está encendido —el botón de enviar, el eslabón activo de la cadena, el sello. Es la única sombra que lleva color, y por eso la única que hay que racionar. */ --glow:0 0 0 1px var(--accent-ring), 0 6px 20px rgba(184,134,43,.24); --glow-fuerte:0 0 0 1px var(--accent-ring), 0 10px 30px rgba(184,134,43,.38); /* ── Tipografía ── La propia primero, la del sistema como red: si el `.woff2` no llega, el texto sigue siendo legible en la métrica más parecida que tenga la máquina. El reparto no es decorativo. Display para lo que se mira (titulares, nombre, estado); Inter para lo que se lee (párrafos largos, respuestas); JetBrains Mono para lo que se verifica (cifras, códigos DIAN, rutas, latencias). Que un dato se vea distinto de una frase es información, no adorno: le dice al ojo "esto se copia, no se interpreta". */ --font: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Sora Variable", "Segoe UI Variable Display", var(--font); --font-mono: "JetBrains Mono Variable", ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace; /* Las cifras del panel: monoespaciada de un peso más alto que el texto corrido, porque en tamaño chico la mono se ve más delgada que la sans al mismo peso nominal. */ --font-cifra: var(--font-mono); /* Escala fluida: el cuerpo casi no se mueve —la lectura larga necesita un tamaño estable— y los titulares sí crecen con la ventana. Con tamaños fijos, un titular calibrado para el portátil se ve diminuto en el monitor grande y apretado en el teléfono. */ --fs-xs: clamp(11px, .30vw + 10.2px, 12px); --fs-sm: clamp(12.5px, .32vw + 11.6px, 13.5px); --fs-md: clamp(14px, .38vw + 13px, 15.5px); --fs-lg: clamp(16px, .55vw + 14.6px, 18px); --fs-xl: clamp(19px, .95vw + 16.6px, 23px); --fs-2xl: clamp(24px, 1.60vw + 20px, 32px); /* Nuevo: el tamaño del estado del rostro, lo único de la pantalla que se lee de pie y a un metro. */ --fs-3xl: clamp(30px, 2.40vw + 24px, 46px); --lh-tight:1.22; --lh:1.62; /* El tracking se cierra a medida que crece el tamaño: a cuerpo la letra necesita aire, a titular ese mismo aire la desarma. */ --track-tight:-.022em; --track:-.011em; --track-wide:.02em; /* Los rótulos en versalitas hacen lo contrario: abren muchísimo. Sin ese aire, una palabra en mayúsculas de 10px es una mancha. */ --track-rotulo:.18em; /* Pesos con nombre. Los variables permiten cualquier número, y por eso mismo hay que fijar cuáles se usan: sin esta lista aparecen un 620 y un 640 en dos archivos distintos que nadie puede distinguir a ojo pero desalinean el ritmo de la página. */ --peso-normal:400; --peso-medio:500; --peso-semi:600; --peso-fuerte:700; /* ── Espaciado y forma ── */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:32px; --sp-7:48px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px; --rail-w:232px; --side-w:320px; --topbar-h:60px; /* Blanco mínimo de un objetivo táctil. 44px es el número de Apple y 24px el mínimo de la WCAG 2.2; se toma el grande porque un botón de 24px en una barra que se usa caminando se falla, y fallar el botón del micrófono en mitad de una consulta es peor que perder unos píxeles de barra. En puntero fino se permite bajar. */ --tap:44px; /* ── Movimiento ── Cuatro curvas, cada una con un trabajo: `salida` — lo que se va. Arranca rápido y frena: el ojo no necesita seguir lo que desaparece. `entrada` — lo que llega. Arranca lento y acelera al final. `estandar` — lo que se transforma sin irse (color, borde, fondo). Es la de los `:hover`. `expresiva`— la única con carácter: frena largo, casi sin rebote. Reservada para el rostro, los paneles que se abren y los mensajes que entran al hilo. Las duraciones son las de la escala de Material y de iOS por la misma razón física: por debajo de 100ms el cambio se percibe como un salto sin animación, por encima de 400ms se percibe como lentitud del sistema. */ --curva-salida:cubic-bezier(.4,0,1,1); --curva-entrada:cubic-bezier(0,0,.2,1); --curva-estandar:cubic-bezier(.4,0,.2,1); --curva-expresiva:cubic-bezier(.16,1,.3,1); --dur-1:120ms; --dur-2:200ms; --dur-3:340ms; --dur-4:560ms; /* Los tres atajos que ya usa el código actual, ahora definidos en términos de lo de arriba en vez de repetir la curva a mano. */ --t-fast:var(--dur-1) var(--curva-estandar); --t:var(--dur-2) var(--curva-estandar); --t-slow:var(--dur-3) var(--curva-expresiva); } :root[data-theme="dark"] { /* Superficies con más separación entre escalones que en claro. En oscuro los saltos de luminancia se comprimen: dos grises que en claro se distinguen bien, acá se ven iguales y la interfaz queda plana. Cada nivel sube lo suficiente para leerse como "más cerca". El fondo baja respecto de la versión anterior (de #0B121B a #070A12) por una razón concreta: la aurora de marca necesita un lienzo más oscuro para que sus manchas se vean como luz y no como suciedad sobre gris. */ --bg:#070A12; --bg-sunken:#04060B; --surface:#101725; --surface-2:#182130; --surface-3:#222E40; --overlay:rgba(2,4,8,.70); /* Los bordes en oscuro se hacen con LUZ, no con sombra: una línea más clara que la superficie. Una más oscura desaparece contra el fondo. */ --border:rgba(160,190,230,.13); --border-strong:rgba(160,190,230,.26); --border-brand:rgba(232,184,92,.34); --text:#EEF3FA; --text-2:rgba(238,243,250,.72); /* .56 y no .44: en oscuro el terciario daba 3,99 sobre superficie, debajo del 4,5 que pide texto chico. */ --text-3:rgba(238,243,250,.56); --accent:var(--gold-400); --accent-soft:rgba(208,162,73,.12); --accent-ring:rgba(208,162,73,.36); --ok:#4FE0A8; --ok-soft:rgba(79,224,168,.14); --warn:#F0B44C; --warn-soft:rgba(240,180,76,.15); --danger:#FF7A6B; --danger-soft:rgba(255,122,107,.15); --info:#6FA6DE; --info-soft:rgba(111,166,222,.15); /* Vidrio oscuro: azul, no gris. Un vidrio neutro sobre la aurora dorada tira a marrón; el tinte azul lo mantiene frío y deja que el oro de abajo se vea como oro. */ --glass:rgba(20,28,44,.62); --glass-2:rgba(30,40,60,.78); --glass-line:rgba(160,190,230,.13); --grad-marca:linear-gradient(96deg in oklab, #E8B85C, #FFD98F 46%, var(--cyan-400)); --grad-texto:linear-gradient(96deg in oklab, #FFD98F, #FFE7B4 46%, var(--cyan-300)); --grad-linea:linear-gradient(96deg in oklab, #E8B85C, #FFD98F 46%, var(--cyan-400)); --grad-realce:linear-gradient(140deg, rgba(232,184,92,.20), rgba(73,224,206,.10)); /* Sin la parada clara del medio: en cuatro letras esa parada ocupa media palabra y "MIEL" se lee blanco en vez de dorado. El tramo es tan corto que el oro y el cian se cruzan sin apagarse. */ --grad-nombre:linear-gradient(96deg in oklab, #E8B85C, var(--cyan-400)); --aurora-1:rgba(232,184,92,.20); --aurora-2:rgba(73,224,206,.16); --aurora-3:rgba(123,108,246,.11); /* En oscuro la sombra sola casi no se ve —negro sobre negro— así que cada nivel lleva además un filete de luz arriba. Ese filete es el que da la sensación de relieve; sin él las tarjetas se funden con el fondo. */ --shadow-1: 0 1px 2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); --shadow-2: 0 2px 6px rgba(0,0,0,.42), 0 8px 22px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05); --shadow-3: 0 4px 12px rgba(0,0,0,.5), 0 20px 52px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); --shadow-in:inset 0 1px 0 rgba(255,255,255,.05); --glow:0 0 0 1px var(--accent-ring), 0 6px 20px rgba(232,184,92,.30); --glow-fuerte:0 0 0 1px var(--accent-ring), 0 10px 30px rgba(232,184,92,.45); } /* ── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing:border-box; } * { margin:0; padding:0; } /* `100%` primero como red y `100dvh` después, para los navegadores que lo entiendan. En Safari de iOS y en Chrome de Android la barra de direcciones aparece y desaparece al desplazar: con `100vh` la pantalla mide siempre el alto SIN barra, así que el redactor queda tapado justo cuando uno va a escribir. `dvh` sigue el alto real. */ html, body { height:100%; height:100dvh; } html { /* En iOS, al girar el teléfono a horizontal, Safari agranda el texto por su cuenta y descuadra una interfaz que ya es fluida. */ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body { background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--fs-md); line-height:var(--lh); letter-spacing:var(--track); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* El destello gris de Android al tocar: se apaga porque cada elemento ya tiene su propio estado de pulsación. */ -webkit-tap-highlight-color:transparent; /* Las cifras alineadas en columna: sin esto, un contador que pasa de 9 a 10 hace saltar todo lo que tiene al lado. */ font-variant-numeric:tabular-nums; overflow:hidden; } /* Los titulares cierran el tracking y usan la familia de display. Es la diferencia entre un título que se lee como un bloque y uno que se lee como palabras sueltas estiradas. */ h1, h2, h3, .brand-name { font-family:var(--font-display); letter-spacing:var(--track-tight); line-height:var(--lh-tight); text-wrap:balance; } /* Los párrafos no parten dejando una palabra sola en la última línea. */ p { text-wrap:pretty; } ::selection { background:var(--accent-ring); color:var(--text); } button, input, textarea, select { font:inherit; color:inherit; } /* Safari de iOS hace zoom al enfocar un campo de menos de 16px, y ese zoom no se deshace solo: el usuario queda con la interfaz corrida hacia un lado. La forma correcta de evitarlo no es prohibir el zoom —eso deja sin ampliar a quien lo necesita para leer— sino que el campo mida 16px de entrada. Solo en punteros gruesos: en escritorio el campo sigue la escala del resto. */ @media (pointer: coarse) { input, textarea, select { font-size:max(16px, var(--fs-md)); } } button { background:none; border:none; cursor:pointer; } button:disabled { cursor:not-allowed; } a { color:var(--navy-500); text-decoration:none; } a:hover { text-decoration:underline; } :root[data-theme="dark"] a { color:var(--navy-300); } img, svg { display:block; max-width:100%; } ul, ol { list-style-position:outside; } /* Foco visible solo con teclado — el mouse no debe dejar anillos. Doble anillo: uno del color de la superficie por dentro y el de acento por fuera. Sobre un fondo del mismo tono que el acento, un anillo solo se pierde; el separador claro garantiza que se vea sobre cualquier superficie. */ :focus { outline:none; } :focus-visible { outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 4px var(--accent-soft); border-radius:var(--r-sm); } /* ── Scrollbars ────────────────────────────────────────── */ * { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; } ::-webkit-scrollbar { width:9px; height:9px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:var(--r-full); border:2px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover { background:var(--text-3); background-clip:content-box; } /* ── Utilidades ────────────────────────────────────────── */ .mono { font-family:var(--font-mono); font-size:.92em; font-variant-ligatures:none; } .muted { color:var(--text-3); } .soft { color:var(--text-2); } .nowrap { white-space:nowrap; } .truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .row { display:flex; align-items:center; gap:var(--sp-2); } .col { display:flex; flex-direction:column; } .grow { flex:1; min-width:0; } .hidden, [hidden] { display:none !important; } .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .section-label { font-size:var(--fs-xs); font-weight:var(--peso-fuerte); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); padding:var(--sp-4) var(--sp-3) var(--sp-2); } /* Texto con el degradado de marca recortado. Se usa en el nombre, en el estado del rostro y en las cifras grandes del panel — nunca en un párrafo: sobre varias líneas el degradado hace que la primera y la última se lean con contraste distinto. */ .texto-marca { background:var(--grad-texto); -webkit-background-clip:text; background-clip:text; color:transparent; } @keyframes fade-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } @keyframes fade-in { from { opacity:0; } to { opacity:1; } } @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } } @keyframes spin { to { transform:rotate(360deg); } } @keyframes shimmer { to { background-position:200% 0; } } /* La deriva de la aurora: 34 segundos por ciclo. Tan lento que no se ve moverse, solo se nota que la pantalla no está muerta. */ @keyframes derivar { from { transform:translate3d(-2%,-1%,0) scale(1); } to { transform:translate3d(3%,2%,0) scale(1.07); } } /* Quien pidió menos movimiento recibe menos movimiento — todo el resto de la interfaz sigue funcionando igual. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }