/* ============================================================ Tokens del contrato · layout PRAXIS ------------------------------------------------------------ Capa: layout Azul de tinta sobre indigo profundo. El layout de RESOLUCION DE PARCIALES: no hay teoria, hay enunciado, recordatorio, desarrollo, resultado y error frecuente. Los otros cuatro layouts ya se repartieron el oro (Premium), la lima (Neo), el teal (Atlas) y el violeta (Aurora). Praxis toma el azul ultramar —el color de la lapicera con la que se rinde— y reserva una SENAL frambuesa para una sola cosa: donde estas parado. Esa senal es firma, no contrato: no sale de esta carpeta. Praxis NACE OSCURO (ver temas/praxis.php). El modo claro esta completo y medido; simplemente no es la primera impresion. ============================================================ */ :root { /* ── Superficies ── El claro no es blanco ni crema: es un papel con tinte indigo, para que no se confunda con el gris casi blanco de Atlas (#f8f9fb) ni con la arena de Aurora. */ --bg: #eceef7; --bg2: #e2e5f4; --bg3: #f7f8fc; --card: #ffffff; --card2: #f4f5fb; --border: #d6daee; --border-2: #b9c0e8; /* ── Texto ── */ --text: #131736; --text-2: #3a4068; --gray: #5d648c; /* 5,4:1 sobre --card */ --gray-light: #8b91b4; /* epigrafes y ejes, como en los otros layouts */ /* ── Acento principal ── el azul de tinta */ --accent: #3b4fe0; /* 6,6:1 sobre blanco · 6,0:1 sobre --bg */ --accent-strong: #2a3ac4; --accent-glow: rgba(59,79,224,.30); --accent-dim: rgba(59,79,224,.09); --on-accent: #ffffff; --accent-rgb: 59,79,224; /* ── Acento secundario ── A diferencia de Neo, Atlas y Aurora, Praxis SI tiene un segundo color de marca y cae justo en el rol que el contrato describe (§1.4): la tinta casi negra que estructura. Es el indigo profundo del modo oscuro, usado en claro como color de autoridad — titulos de seccion, numero de paso, pie. */ --accent-2: #1b2050; --accent-2-strong: #101439; --accent-2-dim: rgba(27,32,80,.08); --accent-2-rgb: 27,32,80; --on-accent-2: #ffffff; /* ── Estado ── En Praxis el semaforo NO es decoracion de sistema: es parte del contenido. El RESULTADO de un ejercicio se pinta con --estado-ok y el ERROR FRECUENTE con --estado-aviso. Por eso los tres se midieron sobre --card (#ffffff) y sobre --bg2 (#e2e5f4), que es el fondo mas oscuro donde pueden caer. ok 5,7:1 / 5,2:1 aviso 5,3:1 / 4,8:1 critico 6,3:1 / 5,7:1 */ --estado-ok: #0b6b4a; --estado-aviso: #9a5b06; --estado-critico: #b3271f; /* ── Tipografia por ROL ── Ninguna de las tres la usa otro layout. Bricolage es optico-variable y tiene caracter; se reserva a los titulos. Manrope es humanista y ancha: comoda a 15 px durante una hora. Plex Mono numera, puntua y fecha. */ --font-body: 'Manrope', system-ui, 'Helvetica Neue', Arial, sans-serif; --font-heading: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* ── Sistema ── Navbar de 60 px y radios intermedios: mas blando que Atlas (herramienta tecnica) y mas duro que Premium (revista). */ --navbar-h: 60px; --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; --t: .28s cubic-bezier(.22,1,.36,1); /* ── Sombras ── */ --shadow-sm: 0 1px 2px rgba(19,23,54,.06); --shadow: 0 6px 20px rgba(19,23,54,.08); --shadow-lg: 0 18px 44px rgba(19,23,54,.14); --shadow-accent: 0 10px 30px rgba(59,79,224,.28); /* ══════════════════════════════════════════════════ PROPIO DEL LAYOUT · fuera del contrato ══════════════════════════════════════════════════ */ /* LA SENAL. En la INTERFAZ tiene un solo trabajo: marcar el ejercicio en curso —en el rail, en la barra inferior del telefono y en el anillo del boton de volver arriba— y por eso funciona. Los graficos son otro contexto: ahi hace falta un segundo color de curva, y el mismo frambuesa es el que mejor contrasta con el ultramar (ver --svg-punto-naranja). Si algun dia aparece en un componente comun, esta mal: ahi no resuelve a nada. */ --senal: #d81b6b; --senal-rgb: 216,27,107; /* La rejilla de papel milimetrado del fondo. */ --rejilla: rgba(27,32,80,.055); /* Ancho del rail de ejercicios. El @media que lo activa esta en firma.css; aca solo vive la medida, para no repetirla en las cinco reglas que la necesitan. */ --rail-w: 300px; /* El pie: el componente comun lo pinta con --accent-2, que en claro ya es el indigo profundo. Coincide, asi que --footer-bg solo hace falta en oscuro. */ --footer-bg: #0a0d1e; /* Burbuja de las gatas (ver el bloque de Premium: sin esto, en oscuro la flecha de la burbuja queda de otro color que la burbuja). */ --gata-bg: var(--card); --gata-bg-hover: #eef0fd; /* ── SVG ── OBLIGATORIOS, aunque el contrato los liste como firma. Los atributos de un SVG se escriben `fill="var(--svg-fondo)"`, y una var() que no resuelve es *invalid at computed-value time*: la propiedad cae a su valor INICIAL, que para `fill` es NEGRO y para `stroke` es `none`. O sea: fondo negro, texto negro y curvas que directamente no se dibujan. Praxis nacio sin este bloque y el primer apunte con grafico salio como un rectangulo negro en los dos modos. Hay una red de seguridad en base/01-compat.css, pero un layout igual tiene que traer los suyos: el fallback da colores razonables, no los de la marca. */ --svg-fondo: #f7f8fc; /* Relleno OPACO de las caras de una malla 3D: tapa lo que queda detras, que es de lo que vive el algoritmo del pintor. Por eso no puede ser --svg-fondo con alfa. Es el fondo tenido hacia --svg-curva. Ver apuntes/docs/REFERENCIA-graficos-3d.md. */ --svg-superficie: #e7e9f8; --svg-curva: #2a3ac4; --svg-ejes: #c5cae6; --svg-labels: #5d648c; --svg-punto-gold: #3b4fe0; --svg-punto-naranja: #d81b6b; --svg-asintota-v: #d81b6b; --svg-asintota-h: #8b91b4; } /* ══════════════════════════════════════════════════════ MODO OSCURO html.dark-mode lo pone el script anti-FOUC al parsear; body.dark-mode lo agrega applyTheme() y es el que usan los componentes comunes. Los dos llevan lo mismo. ══════════════════════════════════════════════════════ */ html.dark-mode, body.dark-mode { --bg: #0e1228; --bg2: #131834; --bg3: #1a2043; --card: #171d3c; --card2: #1e2550; --border: #2a3160; --border-2: #3d478a; --text: #e9ebf9; --text-2: #bcc2e4; --gray: #9299c2; --gray-light: #6d739a; /* El ultramar se aclara: #3b4fe0 sobre #0e1228 da 2,2:1. */ --accent: #7d8dff; /* 7,0:1 sobre --bg · 6,3:1 sobre --card */ --accent-strong: #9aa6ff; --accent-glow: rgba(125,141,255,.38); --accent-dim: rgba(125,141,255,.13); --on-accent: #0b0f22; --accent-rgb: 125,141,255; /* En oscuro el indigo profundo ya no puede estructurar: seria tinta sobre tinta. El rol pasa al acento claro, igual que en Premium el navy le cede el lugar al dorado y en Atlas el slate al teal. Con --accent-2 en #4a5bd6 —que era la primera opcion, y la mas linda— el titulo de seccion abierto y el pie de .next-apunte daban 2,6:1. */ --accent-2: #7d8dff; --accent-2-strong: #9aa6ff; --accent-2-dim: rgba(125,141,255,.13); --accent-2-rgb: 125,141,255; --on-accent-2: #0b0f22; /* Variante oscura del semaforo: los tres del modo claro estan calculados sobre papel y sobre --card no llegan. */ --estado-ok: #35d39a; --estado-aviso: #ffb020; --estado-critico: #ff7070; --shadow-sm: 0 1px 2px rgba(0,0,0,.40); --shadow: 0 6px 20px rgba(0,0,0,.45); --shadow-lg: 0 18px 44px rgba(0,0,0,.55); --shadow-accent: 0 10px 30px rgba(125,141,255,.22); --senal: #ff5c9d; --senal-rgb: 255,92,157; --rejilla: rgba(255,255,255,.035); --gata-bg: var(--card); --gata-bg-hover: #202a55; /* El ultramar de #2a3ac4 sobre el fondo oscuro no se ve: la curva se aclara, igual que hace el acento. */ --svg-fondo: #131834; /* Relleno OPACO de las caras de una malla 3D: tapa lo que queda detras, que es de lo que vive el algoritmo del pintor. Por eso no puede ser --svg-fondo con alfa. Es el fondo tenido hacia --svg-curva. Ver apuntes/docs/REFERENCIA-graficos-3d.md. */ --svg-superficie: #22284c; --svg-curva: #8f9dff; --svg-ejes: #39406e; --svg-labels: #9299c2; --svg-punto-gold: #7d8dff; --svg-punto-naranja: #ff5c9d; --svg-asintota-v: #ff5c9d; --svg-asintota-h: #6d739a; } /* El anti-FOUC pone la clase en antes de que exista . Sin esto, el primer pintado sale con el fondo blanco por defecto del navegador. */ html.dark-mode body { background: var(--bg); color: var(--text); }