/* ===================================================================== TOKENS DE DISEÑO de Noosfera: colores, tipografía, espacios y bordes. ¿Quieres cambiar la paleta? Hazlo SOLO en este archivo: el resto del CSS usa estas variables. Si cambias un color de texto o de fondo, revisa el contraste (mínimo 4.5:1 para texto normal, WCAG AA). Ver docs/glosario.md y docs/identidad-visual.md. Hay dos apariencias: - "clara" (por defecto) - "nocturna": se activa sola si el sistema está en modo oscuro, o si la persona la elige en Ajustes. (No confundir con el MODO OSCURO de Nubbit, que depende de los registros emocionales.) Los colores "decorativos" (menta, cielo, sol, rosa) solo adornan: nunca se usan para algo que se pueda tocar. Lo que se toca siempre es violeta. ¿PARA QUÉ SIRVE ESTE ARCHIVO? Un "token de diseño" es una decisión de diseño guardada con un nombre. Por ejemplo, "el violeta de los botones y enlaces" se llama --color-primario. Aquí solo se DEFINEN valores: este archivo no pinta nada por sí solo. Los que los USAN son base.css, componentes.css, publico.css y actividades.css. Ventaja: si mañana el violeta cambia, se cambia en UNA sola línea. ¿QUÉ PÁGINAS LO USAN? TODAS (index, entrar, crear-cuenta, recuperar, inicio, registrar, historial, progreso, actividades, respirar, anclaje, memoria, ajustes, apoyo, privacidad y offline). En el de cada página se carga PRIMERO, antes que los demás CSS, porque ellos necesitan estas variables. ÍNDICE DE SECCIONES 1. :root (valores de la apariencia clara): - Colores generales - Colores de Nubbit - Colores decorativos - Tipografía (fuentes y tamaños) - Colores de la escala - Espacios, bordes y sombras emocional (niveles 1 a 5) - Anchos y altos - Escenas del mundo de Nubbit - Movimiento (duración de transiciones) 2. Apariencia nocturna automática (@media prefers-color-scheme: dark). 3. Apariencia nocturna elegida en Ajustes (:root[data-apariencia="nocturna"]). ¿CÓMO SE ELIGE LA APARIENCIA? js/apariencia.js lee lo que la persona eligió en Ajustes (guardado en el dispositivo) y lo escribe como atributo en la etiqueta : data-apariencia="clara" o data-apariencia="nocturna". Si no eligió nada ("Automática"), manda la configuración del sistema (sección 2). ===================================================================== */ /* :root = la raíz de la página, es decir, la etiqueta . Lo que se define aquí vale para la página entera, porque todos los elementos lo heredan. VARIABLES CSS (también llamadas "propiedades personalizadas"): su nombre empieza con dos guiones. "--color-fondo: #fff8f1;" guarda un valor y los otros archivos lo leen con la función var(), así: background: var(--color-fondo). Los colores #rrggbb dicen cuánto rojo, verde y azul llevan (en hexadecimal). */ :root { color-scheme: light; /* página clara: el navegador dibuja claros sus controles propios (barras, casillas) */ /* Colores generales (apariencia clara) */ --color-fondo: #fff8f1; /* crema: el fondo de todas las páginas */ --color-fondo-alterno: #f6f0ff; /* franjas de la bienvenida (lila muy pálido, index.html) */ --color-superficie: #ffffff; /* tarjetas (blanco); también cabecera, menú, pie y diálogos */ --color-superficie-suave: #f5effb; /* lila muy claro: cajas internas (nota del historial, ideas, código) */ --color-texto: #2a2340; /* "tinta": violeta casi negro para el texto principal */ --color-texto-suave: #5b5470; /* texto secundario: ayudas, fechas, bajadas de títulos */ --color-borde: #e2d9ee; /* bordes decorativos (tarjetas) */ --color-borde-control: #8a7fa3; /* bordes de campos y opciones: contraste mínimo 3:1 */ --color-primario: #5b3fc4; /* lo que se puede tocar: botones y enlaces */ --color-primario-hover: #4a31a8; /* violeta más oscuro al pasar el mouse sobre botones y enlaces */ --color-primario-suave: #ede7ff; /* fondo de lo elegido o activo (texto encima: --color-primario) */ --color-sobre-primario: #ffffff; /* texto encima del color primario */ --color-acento: #e4572e; /* detalles cálidos (el "sol") */ --color-acento-suave: #ffe9e1; /* coral muy claro: fondo de la insignia "acento" (apoyo.html) */ --color-foco: #1d4ed8; /* contorno visible al navegar con teclado */ --color-error: #b42318; /* rojo: mensajes de error y botones de peligro (borrar, eliminar) */ --color-error-fondo: #fdecea; /* rosa muy claro: fondo de los recuadros de error */ --color-sobre-error: #ffffff; /* texto encima del color de error (botón "Llamar al 123") */ --color-exito: #1c6e45; /* verde de "todo salió bien": reservado (hoy ninguna regla lo usa) */ --color-exito-fondo: #e3f4ea; /* fondo verde claro para éxito: reservado (hoy no se usa) */ --color-aviso-fondo: #fff4d6; /* amarillo pálido: fondo de avisos ("sin conexión", "pendiente") */ --color-aviso-borde: #e0b43a; /* dorado: borde de esos avisos */ /* Colores decorativos (fondos de íconos e ilustraciones) */ --color-menta-suave: #dcf4ec; /* fondo de las insignias "menta" (verde agua claro) */ --color-cielo-suave: #e2efff; /* fondo de las insignias "cielo" (celeste claro) */ --color-sol-suave: #fff1c9; /* fondo de las insignias "sol" (amarillo claro) */ --color-rosa-suave: #ffe3ec; /* fondo de las insignias "rosa" (rosado claro) */ /* Colores de la escala emocional (se usan como puntos de color, nunca solos: siempre van con texto) */ /* Los usan las caritas (clases .nivel-1 a .nivel-5 de componentes.css), el punto de color del inicio y la franja de cada día del historial. Todos son agradables: ninguna emoción es "mala". */ --nivel-1: #5b6cc9; /* nivel 1 "Muy difícil": azul índigo */ --nivel-2: #3f8fbf; /* nivel 2 "Difícil": azul */ --nivel-3: #7f9c90; /* nivel 3 "Más o menos": verde salvia */ --nivel-4: #5ba84a; /* nivel 4 "Bien": verde */ --nivel-5: #e0a31a; /* nivel 5 "Muy bien": dorado */ /* Escenas del mundo de Nubbit */ /* Fondo de .escena (inicio.html y progreso.html): un cielo en degradado de arriba hacia abajo y una franja de suelo. El cielo normal también es el fondo de la guía de respiración (respirar.html). */ --escena-cielo-arriba: #e9e3ff; /* cielo normal, parte de arriba: lila claro */ --escena-cielo-abajo: #fff1e6; /* cielo normal, parte de abajo: durazno muy claro */ --escena-suelo: #d8ecd0; /* suelo normal: verde pasto claro (también los surcos del jardín) */ --escena-oscuro-arriba: #1f2a5c; /* modo oscuro de Nubbit (noche con farolito): cielo azul noche */ --escena-oscuro-abajo: #3b3f7a; /* noche, parte de abajo: índigo */ --escena-oscuro-suelo: #2c3566; /* suelo de la noche: azul oscuro */ --escena-sol-arriba: #ffe7a8; /* modo "sol interior" (amanecer): cielo amarillo */ --escena-sol-abajo: #ffd0a8; /* amanecer, parte de abajo: durazno */ --escena-sol-suelo: #f6d99b; /* suelo del amanecer: color arena */ /* Colores de Nubbit: cinco tonos para cada estado (sin registro y niveles 1 a 5). Todos los colores son "bonitos": ningún estado se ve como un castigo. */ /* js/nubbit.js le pone al dibujo la clase del estado de HOY (.nubbit--sin-registro o .nubbit--nivel-1 a 5) y componentes.css toma de aquí sus colores. La emoción cambia el COLOR (y la expresión, en nubbit.js): la forma depende de la etapa. Cada estado tiene cinco tonos, que se funden en degradados para dar volumen (como en las hojas de diseño): profundo = el centro del cuerpo, el color más intenso; cuerpo = el tono medio; claro = los bordes iluminados y los brazos; acento = el tinte de las orejas y la panza; luz = las lucecitas que brillan (frente y palmas de la etapa 5). */ --nubbit-base-profundo: #5b93f0; /* sin registro hoy: los colores del diseño original. Centro azul */ --nubbit-base-cuerpo: #8fadee; /* sin registro: azul lavanda */ --nubbit-base-claro: #d4ddf9; /* sin registro: bordes lila muy claro */ --nubbit-base-acento: #b7a3ee; /* sin registro: tinte lavanda rosado */ --nubbit-base-luz: #a6f3ff; /* sin registro: luces celeste brillante */ --nubbit-1-profundo: #5d63d0; /* nivel 1 "Muy difícil": centro azul índigo */ --nubbit-1-cuerpo: #8e93e0; /* nivel 1: azul lavanda */ --nubbit-1-claro: #d9daf6; /* nivel 1: bordes azul muy claro */ --nubbit-1-acento: #a98fdc; /* nivel 1: tinte violeta suave */ --nubbit-1-luz: #b8c4ff; /* nivel 1: luces azul pálido */ --nubbit-2-profundo: #3f97de; /* nivel 2 "Difícil": centro celeste intenso */ --nubbit-2-cuerpo: #7fbcec; /* nivel 2: celeste */ --nubbit-2-claro: #d6eefb; /* nivel 2: bordes celeste muy claro */ --nubbit-2-acento: #93b6ef; /* nivel 2: tinte azul lavanda */ --nubbit-2-luz: #a6f4ff; /* nivel 2: luces aguamarina */ --nubbit-3-profundo: #5c9c84; /* nivel 3 "Más o menos": centro verde salvia */ --nubbit-3-cuerpo: #98c6b3; /* nivel 3: salvia claro */ --nubbit-3-claro: #e0f1e9; /* nivel 3: bordes verde muy claro */ --nubbit-3-acento: #9fcbcc; /* nivel 3: tinte verde azulado */ --nubbit-3-luz: #c6f7e4; /* nivel 3: luces menta */ --nubbit-4-profundo: #4fa83a; /* nivel 4 "Bien": centro verde */ --nubbit-4-cuerpo: #92d37b; /* nivel 4: verde claro */ --nubbit-4-claro: #e2f5d6; /* nivel 4: bordes verde muy claro */ --nubbit-4-acento: #c0e08e; /* nivel 4: tinte verde limón */ --nubbit-4-luz: #e8ffb0; /* nivel 4: luces amarillo verdoso */ --nubbit-5-profundo: #f29a0f; /* nivel 5 "Muy bien": centro ámbar */ --nubbit-5-cuerpo: #ffc84a; /* nivel 5: amarillo dorado */ --nubbit-5-claro: #fff0c4; /* nivel 5: bordes crema */ --nubbit-5-acento: #ffaa74; /* nivel 5: tinte durazno */ --nubbit-5-luz: #fff2a0; /* nivel 5: luces amarillo claro */ --nubbit-color-bufanda: #e4572e; /* bufanda coral: accesorio de la etapa 2 (5 semillas) */ --nubbit-color-hojita: #7cc36b; /* hojita verde de la etapa 3; también el verde de la barra de avance */ --nubbit-color-capa: #7b5fe0; /* capa violeta: accesorio de la etapa 4 */ --nubbit-color-estrella: #ffe07a; /* estrellas amarillas: etapa 5, "sol interior" y destellos del inicio */ --nubbit-color-mantita: #f2a07b; /* mantita durazno que abriga a Nubbit en el nivel 1 */ /* Tipografía: fuentes del sistema (no se descargan fuentes externas, por privacidad y velocidad). Los títulos usan la versión redondeada cuando el dispositivo la tiene (iPhone, Mac). */ /* --fuente (texto normal) es una LISTA: el navegador usa la primera que exista en el dispositivo. system-ui = la letra del sistema; -apple-system = iPhone y Mac; "Segoe UI" = Windows; Roboto = Android; "Noto Sans" y Ubuntu = Linux; sans-serif = cualquier letra sin remates, como último recurso. */ --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif; /* --fuente-titulos: ui-rounded y "SF Pro Rounded" son las letras redondeadas de Apple; en los demás dispositivos sigue con las mismas fuentes del sistema de la lista anterior. */ --fuente-titulos: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", sans-serif; /* Escala tipográfica "tercera mayor" (cada paso x 1,25), base 16 px: pequeño 14 · normal 16 · grande 20 · sección 25 · título 31 · portada 39-49. Los dos más grandes se achican solos en pantallas angostas (clamp). */ /* rem = veces el tamaño de letra base del navegador (normalmente 16 px). Si la persona agranda la letra en su dispositivo, todos estos tamaños crecen con ella (por eso no se usan px para el texto). */ --texto-pequeno: 0.875rem; /* 14 px: ayudas, etiquetas y pie de página */ --texto-normal: 1rem; /* 16 px: el texto de siempre */ --texto-grande: 1.25rem; /* 20 px: títulos de tarjeta (h2) y el nombre de la marca */ --texto-seccion: 1.5625rem; /* 25 px: títulos de sección de la bienvenida */ /* clamp(mínimo, ideal, máximo): el valor "ideal" cambia con el ancho de la ventana (1vw = 1 % del ancho), pero nunca baja del mínimo ni pasa del máximo. Así el título se achica solo en el celular. */ --texto-titulo: clamp(1.75rem, 1.5rem + 1vw, 1.95rem); /* título de cada página (h1): de 28 a 31 px */ --texto-portada: clamp(2.3rem, 1.55rem + 3vw, 3.05rem); /* título grande de la bienvenida: de 37 a 49 px */ /* Espacios, bordes y sombras */ --espacio-1: 0.25rem; /* 4 px: el espacio más pequeño (entre ícono y texto) */ --espacio-2: 0.5rem; /* 8 px: separaciones pequeñas (entre chips, botones juntos) */ --espacio-3: 1rem; /* 16 px: el espacio "normal" (márgenes de párrafos y rellenos) */ --espacio-4: 1.5rem; /* 24 px: relleno de las tarjetas y separación entre ellas */ --espacio-5: 2.5rem; /* 40 px: separación entre secciones */ --espacio-6: 4rem; /* 64 px: el más grande (franjas de la bienvenida) */ --radio-pequeno: 10px; /* esquinas poco redondeadas: reservado (hoy ninguna regla lo usa) */ --radio: 14px; /* esquinas de campos, avisos y cajas pequeñas */ --radio-grande: 24px; /* esquinas de las tarjetas */ --radio-xl: 32px; /* esquinas del panel con Nubbit en entrar, crear cuenta y recuperar */ /* Sombras (box-shadow): cada una dice "desplazamiento horizontal, vertical, desenfoque y color". Se ponen dos, separadas por coma, para que se vean naturales. rgb(42 35 64 / 0.05) = color tinta con 5 % de opacidad. */ --sombra: 0 1px 2px rgb(42 35 64 / 0.05), 0 4px 16px rgb(42 35 64 / 0.06); /* sombra suave de las tarjetas */ /* --sombra-elevada: más grande y con un toque violeta; para lo que "flota" (diálogos, tarjeta bajo el mouse) */ --sombra-elevada: 0 2px 6px rgb(42 35 64 / 0.06), 0 16px 36px rgb(58 34 140 / 0.14); --sombra-boton: 0 6px 16px rgb(91 63 196 / 0.28); /* sombra violeta debajo del botón principal */ /* Anchos y altos */ --ancho-contenido: 42rem; /* páginas de lectura y formularios (unos 672 px) */ --ancho-amplio: 70rem; /* bienvenida, inicio y páginas con tarjetas en columnas (unos 1120 px) */ --alto-menu-movil: 4.25rem; /* alto de la barra de menú de abajo en el celular (68 px) */ /* Movimiento (se apaga con "reducir movimiento", ver base.css) */ /* Una TRANSICIÓN hace que un cambio (de color, de tamaño...) ocurra poco a poco y no de golpe; aquí se guardan su duración y su "curva" de velocidad. ms = milisegundos (1000 ms = 1 segundo). "Reducir movimiento" es una opción de accesibilidad del sistema; base.css la detecta con la media query prefers-reduced-motion y apaga transiciones y animaciones. */ --transicion-rapida: 150ms ease-out; /* 0,15 s; ease-out: empieza rápido y frena al final */ /* --transicion: 0,25 s con una curva a medida (cubic-bezier): arranca ágil y llega muy suave */ --transicion: 250ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* fin del bloque :root (tokens de la apariencia clara) */ /* Apariencia nocturna automática (si el sistema la usa y la persona no eligió "clara") */ /* @media = "consulta de medios" (media query): las reglas de adentro solo se aplican si se cumple la condición. prefers-color-scheme: dark = el celular o el computador está configurado en modo oscuro. :root:not([data-apariencia="clara"]) = la raíz , EXCEPTO si tiene data-apariencia="clara". [atributo="valor"] elige elementos por un atributo; :not(...) significa "que NO cumpla esto". Aquí solo cambian los VALORES de las variables: las reglas que usan var(--...) toman solas los colores nuevos, sin tener que repetirlas. */ @media (prefers-color-scheme: dark) { /* La raíz (salvo si la persona eligió "Clara"): aquí se cambian los valores por los de noche */ :root:not([data-apariencia="clara"]) { color-scheme: dark; /* controles nativos y barras de desplazamiento oscuros */ --color-fondo: #16131f; /* fondo "noche": casi negro con un toque violeta */ --color-fondo-alterno: #1c1729; /* franjas de la bienvenida, un poco más claras */ --color-superficie: #221c30; /* tarjetas: violeta muy oscuro */ --color-superficie-suave: #2b2440; /* cajas internas, un poco más claras que las tarjetas */ --color-texto: #f3eeff; /* texto casi blanco (contraste 16,1:1 con el fondo) */ --color-texto-suave: #cbc2e0; /* texto secundario: lila grisáceo claro */ --color-borde: #3f3557; /* bordes decorativos oscuros */ --color-borde-control: #7f74a3; /* bordes de campos: siguen con contraste 3:1 */ --color-primario: #b7a6ff; /* violeta claro: sobre fondo oscuro se lee mejor */ --color-primario-hover: #cdc1ff; /* al pasar el mouse: aún más claro */ --color-primario-suave: #2f2657; /* fondo de lo elegido o activo: violeta oscuro */ --color-sobre-primario: #1b1530; /* texto OSCURO encima del violeta claro */ --color-acento: #ff9b73; /* coral más claro */ --color-acento-suave: #3b2520; /* fondo coral oscuro */ --color-foco: #8ab4ff; /* contorno de foco: azul claro */ --color-error: #ffb4a8; /* rojo claro: se lee sobre el fondo oscuro */ --color-error-fondo: #3d1f1c; /* fondo rojizo oscuro de los errores */ --color-sobre-error: #2a1210; /* texto oscuro sobre el rojo claro */ --color-exito: #86e0ab; /* verde claro (reservado) */ --color-exito-fondo: #173326; /* fondo verde oscuro (reservado) */ --color-aviso-fondo: #3a3017; /* fondo de avisos: ocre oscuro */ --color-aviso-borde: #b8913a; /* borde de avisos: dorado apagado */ --color-menta-suave: #173a31; /* insignias menta, versión oscura */ --color-cielo-suave: #1a2c45; /* insignias cielo, versión oscura */ --color-sol-suave: #3a3017; /* insignias sol, versión oscura */ --color-rosa-suave: #3e2130; /* insignias rosa, versión oscura */ --escena-cielo-arriba: #2b2450; /* cielo de la escena de Nubbit: violeta oscuro */ --escena-cielo-abajo: #3a2e4f; /* parte de abajo del cielo */ --escena-suelo: #2f4a3a; /* suelo verde oscuro */ /* Sombras negras y más fuertes: sobre un fondo oscuro, una sombra suave no se notaría */ --sombra: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25); --sombra-elevada: 0 2px 6px rgb(0 0 0 / 0.35), 0 16px 36px rgb(0 0 0 / 0.4); /* diálogos y lo que flota */ --sombra-boton: 0 6px 16px rgb(0 0 0 / 0.35); /* sombra del botón principal */ } /* fin de la regla :root:not([data-apariencia="clara"]): valores de noche */ } /* fin del @media (prefers-color-scheme: dark): noche automática */ /* Apariencia nocturna elegida en Ajustes (los mismos valores de arriba) */ /* :root[data-apariencia="nocturna"] = la etiqueta cuando tiene ese atributo (lo pone js/apariencia.js si la persona elige "Nocturna" en Ajustes). Funciona aunque el sistema esté en modo claro. Si cambias un valor aquí, cámbialo también en el bloque de arriba (deben ser iguales). */ :root[data-apariencia="nocturna"] { color-scheme: dark; /* controles nativos oscuros */ --color-fondo: #16131f; /* fondo noche */ --color-fondo-alterno: #1c1729; /* franjas de la bienvenida */ --color-superficie: #221c30; /* tarjetas */ --color-superficie-suave: #2b2440; /* cajas internas */ --color-texto: #f3eeff; /* texto casi blanco */ --color-texto-suave: #cbc2e0; /* texto secundario */ --color-borde: #3f3557; /* bordes decorativos */ --color-borde-control: #7f74a3; /* bordes de campos */ --color-primario: #b7a6ff; /* violeta claro de botones y enlaces */ --color-primario-hover: #cdc1ff; /* violeta al pasar el mouse */ --color-primario-suave: #2f2657; /* fondo de lo elegido */ --color-sobre-primario: #1b1530; /* texto sobre el violeta */ --color-acento: #ff9b73; /* coral */ --color-acento-suave: #3b2520; /* fondo coral oscuro */ --color-foco: #8ab4ff; /* contorno de foco */ --color-error: #ffb4a8; /* rojo claro de error */ --color-error-fondo: #3d1f1c; /* fondo de error */ --color-sobre-error: #2a1210; /* texto sobre el rojo */ --color-exito: #86e0ab; /* verde (reservado) */ --color-exito-fondo: #173326; /* fondo verde (reservado) */ --color-aviso-fondo: #3a3017; /* fondo de avisos */ --color-aviso-borde: #b8913a; /* borde de avisos */ --color-menta-suave: #173a31; /* insignias menta */ --color-cielo-suave: #1a2c45; /* insignias cielo */ --color-sol-suave: #3a3017; /* insignias sol */ --color-rosa-suave: #3e2130; /* insignias rosa */ --escena-cielo-arriba: #2b2450; /* cielo de la escena, arriba */ --escena-cielo-abajo: #3a2e4f; /* cielo de la escena, abajo */ --escena-suelo: #2f4a3a; /* suelo de la escena */ /* Sombras negras y más fuertes (igual que en el bloque automático) */ --sombra: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25); --sombra-elevada: 0 2px 6px rgb(0 0 0 / 0.35), 0 16px 36px rgb(0 0 0 / 0.4); /* diálogos y lo que flota */ --sombra-boton: 0 6px 16px rgb(0 0 0 / 0.35); /* sombra del botón principal */ } /* fin de la regla :root[data-apariencia="nocturna"]: noche elegida en Ajustes */