/* ============================================================ Design Tokens — sistema base portable Tipografía: Inter (Google Fonts, pesos 400;500;600;700;800) Uso: pega este :root en tu proyecto y referencia las variables. ============================================================ */ :root { /* ---- Marca / acción ---- */ --color-primary: #6861F2; /* acción principal / CTA */ --color-primary-hover: #544DDB; --color-primary-soft: rgba(104,97,242,.12); --color-secondary: #017737; /* acento de identidad */ --color-secondary-strong:#17753C; /* bandas de alto contraste */ --color-secondary-hover:#0F5E2E; /* ---- Superficies (fondos) ---- ⚠️ EL FONDO DE TRABAJO NO ES CASI BLANCO, Y ES LO QUE HACE QUE ESTO SE VEA ARMADO. Con el papel a #F7F7F8 y las tarjetas a blanco, la diferencia entre los dos era de tres puntos: la pantalla quedaba un plano blanco enorme con líneas encima y ninguna tarjeta parecía una tarjeta. Bajando el papel, la tarjeta blanca se levanta sola y no hace falta ni una sombra más ni un borde más grueso. El blanco se reserva para lo que se lee. */ --surface-0: #FFFFFF; /* cards, paneles, modales */ --surface-1: #F7F8FA; /* bloques suaves */ --surface-2: #F7F8FA; --surface-app: #EFF1F4; /* fondo de trabajo */ --surface-mint: #D7F9D3; /* hero / destacados suaves (verde) */ --surface-mint-soft:#E9FBE7; --surface-lavender:#F7F7FE; /* secciones alternas (violeta muy claro) */ --surface-neutral: #E7EAEE; --surface-lilac: #E1E1FF; /* placa saturada — usar poco */ /* ---- Texto y bordes ---- Los dos bordes suben un punto: sobre el papel gris, el #E4E6EA de antes se perdía y las tarjetas quedaban flotando sin contorno. La jerarquía de este sistema es por borde y no por sombra, así que el borde tiene que verse. */ --text-strong: #192435; /* títulos y datos principales */ --text-body: #4A5568; /* cuerpo */ --text-muted: #656E7A; /* metadatos */ --text-inverse-soft:#9FB2C8; /* texto secundario sobre fondo oscuro */ --border: #DCE0E6; /* borde estándar */ --border-strong: #C2CAD4; /* inputs y controles */ /* ---- Neutros oscuros (nav/topbar/tooltips) ---- */ --ink-dark: #1E1D2B; --ink-dark-2: #34324A; /* ---- Enlaces / rating ---- */ --link: #2878D6; --link-content:#0D6ECE; --rating: #FFCC00; --footer-dark:#0D1B12; /* ---- Estados semánticos (fondo / texto / borde) ---- */ --success-bg:#D9F2DC; --success-fg:#1E7A43; --success-bd:#9FD9AC; --neutral-bg:#EFF1F4; --neutral-fg:#55606E; --neutral-bd:#D6DAE0; --warning-bg:#FDF3D8; --warning-fg:#8A6400; --warning-bd:#F0D492; --info-bg: #ECEBFB; --info-fg: #514AC2; --info-bd: #C6C2F0; --danger-bg: #FBDCDB; --danger-fg: #C6362C; --danger-bd: #F2A9A4; --disabled-bg:#F1F2F4; --disabled-fg:#98A6B8; --disabled-bd:#D6DAE0; --danger-solid:#C6362C; /* acción destructiva llena (texto blanco) */ /* ---- Semáforo / medidor ---- */ --meter-good:#1E7A43; --meter-warn:#F5A623; --meter-bad:#E0533D; /* ---- Tipografía ---- */ --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-quote: Georgia, "Times New Roman", serif; /* solo para comillas de cita */ /* ---- Radios ---- */ --radius-xs: 4px; /* botones/cards públicas — dominante */ --radius-sm: 6px; /* botones de producto, selects */ --radius-md: 8px; /* inputs, tarjetas pequeñas */ --radius-lg: 12px; /* tarjetas destacadas */ --radius-xl: 14px; /* modales/mockups especiales */ --radius-pill: 999px; /* ---- Sombras (mínimas: jerarquía por borde, no por sombra) ---- */ --shadow-sm: 0 1px 4px rgba(22,40,62,.12); --shadow-md: 0 10px 30px rgba(25,36,53,.10); --shadow-lg: 0 18px 44px rgba(25,36,53,.16); --shadow-modal: 0 30px 80px rgba(0,0,0,.35); /* ---- Espaciado (base 4px) ---- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px; /* ---- DENSIDAD ---- LA REGLA QUE MÁS SE NOTA El sistema tiene DOS densidades y hay que elegir bien: · superficie pública (una web, una portada): 16 / 24 / 32 — con aire. · UI de producto (una herramienta de trabajo): 8 / 12 / 16 — apretada. NEXUM ES SIEMPRE LA SEGUNDA. Alguien lo va a tener abierto ocho horas y quiere ver su cartera entera en la pantalla, no seis registros con aire alrededor. Todas las pantallas usan estos valores; ninguna los infla. */ --relleno-celda-y: 8px; /* alto de la celda de tabla */ --relleno-celda-x: 12px; /* ancho de la celda de tabla */ --relleno-tarjeta: 16px; /* NO 24 ni 32. Y no baja a 12: la tarjeta suelta CONTIENE otras piezas con su propio relleno, así que bajarla no gana ni una fila — gana 4px que nadie ve. Se apreta lo que se repite cincuenta veces, no lo que aparece una. */ --separacion-bloques: 12px; /* entre una caja y la siguiente */ --alto-control: 34px; /* entradas, selectores y botones: 32-36 */ --alto-boton-compacto: 28px; --blanco-minimo: 24px; /* lo mínimo pulsable. Ver la nota de abajo */ /* EL RITMO VERTICAL DEL CAMPO DE FORMULARIO, y es un contrato medible: 3px del rótulo a la caja, y 12px de aire antes del rótulo siguiente. Con siete campos, el ritmo generoso de 8+16 suma 168px de aire muerto: media pantalla por formulario. */ --rotulo-a-caja: 3px; --entre-campos: 12px; /* ACCESIBILIDAD, Y ES EL LÍMITE DURO DE LA DENSIDAD. Los 44px que pide la guía son WCAG 2.5.5, nivel AAA y pensado para el dedo. Nexum sostiene el nivel AA, criterio 2.5.8, que exige 24 x 24 px, y es una herramienta de escritorio con ratón y teclado. Ningún blanco pulsable baja de --blanco-minimo, y ningún contraste baja de 4.5:1. La densidad llega hasta ahí y ni un píxel más. */ /* ---- Escala tipográfica ---- Se escriben así y nunca a mano: si un tamaño no está aquí, se pregunta. */ --texto-micro: 11px; /* CABECERAS DE COLUMNA, rótulos etiqueta-valor, títulos de sección, fecha, hora y autor. Siempre en mayúsculas y en gris cuando es un rótulo. */ --texto-etiqueta:12px; /* rótulos de campo de formulario, pastillas */ --texto-chico: 13px; /* FILAS DE TABLA, valores de ficha, notas */ --texto-cuerpo: 14px; /* el texto normal de una pantalla de trabajo */ --texto-titulo: 17px; /* el título de la pantalla y el del diálogo */ --texto-cifra-grande: 20px; /* SOLO la cifra que encabeza una ficha, una por pantalla */ --texto-cifra-mediana: 17px; /* la cifra de un contador de resumen, cuando hay varias en la misma pantalla */ --texto-seccion:24px; /* NO se usa en la aplicación */ --interlineado-cuerpo: 1.45; /* ---- Foco de teclado ---- Sin esto, moverse con el tabulador es invisible. Es accesibilidad, no adorno. */ --foco: 2px solid var(--color-primary); --foco-separacion: 2px; /* ---- Capas ---- Orden fijo, para que nada se meta debajo de nada. */ --capa-contenido: 0; --capa-pegado: 10; /* cabeceras de tabla y de columna que se quedan arriba */ --capa-panel: 20; /* panel lateral deslizante */ --capa-dialogo: 30; --capa-aviso: 40; /* avisos flotantes */ --velo: rgba(25, 36, 53, .45); /* lo que oscurece el fondo del diálogo */ /* ---- Medidas de estructura ---- Fijadas para que doce pantallas no las inventen doce veces. */ /* La barra lateral es FIJA y no se pliega: son siete destinos y ocho personas, y plegarla cuesta preferencia por persona, ayudas emergentes y dos estados de CSS a cambio de 144px que la pantalla no echa de menos. */ --ancho-barra-lateral: 204px; --alto-cabecera: 52px; --ancho-columna-tablero: 260px; --alto-columna-tablero: calc(100vh - 200px); --alto-barra-progreso: 26px; --ancho-dialogo: 520px; --ancho-menu: 190px; /* EL ANCHO DE UNA TARJETA CENTRADA. Era la única medida del sistema que se escribía a mano dentro del HTML, en cinco pantallas distintas: el día que alguien decida que un formulario mide otra cosa, tenía que abrir cinco archivos y confiar en no olvidarse de ninguno. `--ancho-tarjeta-media` sirve a DOS pantallas —el formulario de mantenimiento y el alta de proveedor—, y no es un descuido: las dos miden lo mismo porque son el mismo tipo de pantalla, un formulario de una columna. El día que una de las dos cambie, se le pone otra clase; el día que cambien las dos, se cambia este número. */ --ancho-tarjeta-angosta: 380px; /* entrar */ --ancho-tarjeta-compacta: 520px; /* acceso denegado */ --ancho-tarjeta-media: 720px; /* mantenimiento y alta de proveedor */ --ancho-tarjeta-ancha: 960px; /* plantilla de condiciones */ /* Lo único que se acota en ancho es la línea de texto largo: una nota de 200 caracteres no se lee. Ninguna PANTALLA se acota. */ --ancho-lectura: 68ch; /* El panel deslizante queda definido y SIN USO: ninguna pantalla lo abre. Un panel de 420px sobre una tabla de 1220 tapa el 34% de las columnas —justo las de dinero— y hay que cerrarlo para seguir mirando. Su trabajo lo hace la fila que se expande en su sitio. */ --ancho-panel: 420px; --ancho-ficha-hechos: 420px; /* la columna izquierda de la ficha: /* La misma columna, un poco más ancha cuando sobra sitio de verdad. Se usa en el @media de 1500px de componentes.css, que hasta ahora la pedía sin que existiera: una variable CSS que no existe se resuelve vacía y el navegador descarta la regla ENTERA, en silencio — la ficha no repartía a tres columnas y no había ningún error en ningún sitio. */ --ancho-ficha-hechos-ancha: 480px; entran dos columnas de etiqueta-valor */ /* ---- Densidad de tabla ---- 36px, y la cuenta es exacta: un texto de 13px con interlineado 1.45 ocupa 20px de línea, más 8px de relleno arriba y abajo = 36. Bajar a 32 exigiría un relleno de 6px, que no está en la escala, y ganaría una sola fila. En 900px de alto útil caben 25 filas de 36px, 22 de 40 y 18 de 48: son siete registros más a la vista en cada pantalla. */ --alto-fila: 36px; --alto-fila-cabecera: 28px; --fila-encima: var(--surface-1); --fila-elegida: var(--surface-lavender); /* ---- Movimiento ---- */ /* ---- El aviso inferior ---- Aparece cuando una acción cambia algo sin cambiar de pantalla, y lleva «Deshacer» en exactamente dos casos: marcar una actividad como hecha y mover una oportunidad de etapa. Los dos son un solo campo que se revierte. Todavía no hay ninguna pantalla que lo use; sus medidas quedan fijadas aquí para que quien lo construya no las invente. */ --aviso-ancho: 360px; --aviso-separacion: 16px; --tiempo-aviso: 8s; /* El medidor del cobro parcial. Siempre con su frase al lado: el color no informa solo. */ --alto-medidor: 6px; /* ---- Movimiento ---- */ --motion-fast: 150ms; --motion-base: 250ms; --motion-slow: 400ms; --easing: cubic-bezier(.16,.84,.44,1); } /* ============================================================ EL TEMA OSCURO — los mismos tokens, con otros valores ============================================================ NO ES UNA SEGUNDA HOJA DE ESTILOS, y ahí está todo el asunto: no se reescribe ni una regla de primitivas.css ni de componentes.css. Se redeclaran las VARIABLES, y las cuatrocientas reglas que ya las leían cambian solas. Por eso son sesenta líneas y no una versión oscura del sistema entero que haya que mantener al día con la clara. ⚠️ QUÉ SE REDECLARA Y QUÉ NO. Sólo lo que describe una SUPERFICIE o un TEXTO. Lo que es una medida —el espaciado, los radios, la escala tipográfica, la densidad— no tiene versión oscura: una tabla no se aprieta más de noche. CÓMO SE ENCIENDE. El atributo `data-tema` del , que lo pone plantillas/base.html leyendo la preferencia de la persona: data-tema="dctech" · el azul de la marca. Es el de arranque. data-tema="claro" · el gris de trabajo de siempre. data-tema="oscuro" · el neutro, sin marca. SON DOS Y NO TRES. Hubo un «automático» que seguía lo que tuviera puesto la máquina, y se retiró: nadie entendía qué hacía —con el equipo en claro se veía igual que «Claro»—. Con él se fue un bloque entero de `prefers-color-scheme` cuyo único trabajo era deshacer esto de día, y que había que mantener diciendo exactamente lo mismo que la raíz. Una opción que no se entiende cuesta el doble: en la pantalla y aquí dentro. `color-scheme` no es adorno: es lo que hace que el navegador pinte de oscuro lo que NO es nuestro —la barra de desplazamiento, el calendario de una fecha, el desplegable de un select—. Sin él quedan cuatro rectángulos blancos deslumbrando en una pantalla oscura. NI UN COLOR SUELTO EN NINGUNA PANTALLA. Si algún día algo no se ve bien de noche, la respuesta NUNCA es escribir un color en esa pantalla: es que ahí había un color escrito a mano que debía ser un token. ============================================================ */ /* El panel de administración marca su tema con `data-theme` —lo pone el interruptor de Django—, no con `data-tema`. Su oscuro es EL MISMO que el del producto: se enciende con este selector, no con otra paleta. */ :root[data-tema="oscuro"], :root[data-theme="dark"] { color-scheme: dark; /* ---- Superficies. Gris azulado, no negro: el negro puro sobre un panel retroiluminado cansa más, y el borde de una tarjeta deja de verse. ---- */ --surface-0: #1B1E24; /* tarjetas, paneles, modales */ --surface-1: #20242B; /* bloques suaves */ --surface-2: #20242B; --surface-app: #14161A; /* el fondo de trabajo */ --surface-neutral: #262B33; --surface-lavender:#1E1F2E; /* la fila marcada */ --surface-mint: #16301F; --surface-mint-soft:#122619; --surface-lilac: #26264A; /* ---- Texto y bordes. Ninguno es blanco puro: sobre oscuro deslumbra y los trazos finos de la letra se emborronan. ---- */ --text-strong: #EDEFF2; --text-body: #C3C9D2; --text-muted: #98A2B0; --border: #2C323B; --border-strong: #3A424E; /* ---- La barra lateral se separa del fondo, no se funde con él ---- */ --ink-dark: #101216; --ink-dark-2: #191C22; /* ---- Acción y enlace ---- ⚠️ EL VIOLETA NO SE ACLARA TANTO COMO PARECERÍA. Lo primero que se puso aquí fue #8B85F7, que se leía precioso sobre el fondo... y daba 3,09:1 con el texto BLANCO de su propio botón. El límite del sistema es 4,5:1, y lo caza la prueba que lo calcula —no se comparan códigos de color, se calcula el contraste—. Éste da 4,54:1 con su texto y 3,68:1 contra la tarjeta, por encima del 3:1 que pide un control. El de encima va más OSCURO y no más claro, que sobre fondo oscuro es al revés de lo que uno espera: aclararlo volvería a romper el texto. ---- */ --color-primary: #6C64E8; --color-primary-hover: #5F57DE; --color-primary-soft: rgba(108, 100, 232, .22); --link: #7CBBF7; --link-content: #7CBBF7; /* ---- Estados semánticos: fondo hundido, texto y borde encendidos. Es la vuelta exacta del trío claro, no otra paleta. ---- */ --success-bg:#12301E; --success-fg:#7FD8A0; --success-bd:#265A3A; --neutral-bg:#242A32; --neutral-fg:#AEB8C4; --neutral-bd:#39414C; --warning-bg:#33280C; --warning-fg:#F0C86A; --warning-bd:#5C4A1C; --info-bg: #1E1F3A; --info-fg: #A9A3F5; --info-bd: #3A3A6B; --danger-bg: #3A1C1B; --danger-fg: #F09A93; --danger-bd: #653330; --disabled-bg:#22262C; --disabled-fg:#69727E; --disabled-bd:#333A44; --danger-solid:#C6362C; /* ---- El semáforo del medidor, un punto más claro para que se vea sobre el gris hundido de su barra. ---- */ --meter-good:#3FA86A; --meter-warn:#E0A93B; --meter-bad:#E06B57; /* ---- Sombras: sobre oscuro una sombra no se ve. La jerarquía la lleva el borde, que es lo que este sistema ya prefería de día. ---- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45); --shadow-md: 0 8px 24px rgba(0, 0, 0, .55); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6); --shadow-modal: 0 30px 80px rgba(0, 0, 0, .75); } /* ============================================================ EL TEMA «DC TECH» — el de la marca, y el de arranque ============================================================ Es el azul de DC Tech llevado a superficie de trabajo, no el de la pantalla de entrar. Y no son el mismo azul a propósito: · La portada de entrar se mira CUATRO SEGUNDOS. Ahí el azul puede estar saturado, porque es lo que hace que se reconozca la empresa de un vistazo. · Esto se tiene abierto OCHO HORAS. El mismo azul saturado a pantalla completa, todo el día, cansa la vista y hace que el dato —que es lo único que importa aquí— compita con el fondo. Así que se le baja la saturación y se sube la luz del texto. Sigue siendo reconociblemente el azul de la marca; deja de gritar. LOS CONTRASTES ESTÁN CALCULADOS, NO ELEGIDOS A OJO. Sobre la tarjeta: 14,27:1 el texto fuerte, 9,54:1 el cuerpo, 5,48:1 el apagado. El botón de acción da 4,73:1 con su texto blanco y 3,52:1 contra la tarjeta —por encima del 3:1 que pide un control—, y por eso es #2A76BF y no el celeste de la portada, que se quedaba en 2,86:1. ============================================================ */ :root[data-tema="dctech"] { color-scheme: dark; /* ---- Superficies ---- ⚠️ EL PRIMER INTENTO ERA DEMASIADO AZUL Y DEMASIADO PLANO. Los cinco tonos estaban muy juntos y todos muy saturados: la pantalla parecía una mancha de mezclilla, y ninguna tarjeta se despegaba del papel. Aquí la saturación baja bastante —queda un azul de grafito, no un denim— y el papel se hunde de verdad, para que lo que se lee esté por encima. El azul saturado se reserva para UNA cosa: el botón de acción. ---- */ --surface-0: #121F2E; /* tarjetas, paneles, modales */ --surface-1: #162536; /* bloques suaves */ --surface-2: #162536; --surface-app: #0B1622; /* el fondo de trabajo */ --surface-neutral: #1C2E42; --surface-lavender:#16273C; /* la fila marcada */ --surface-mint: #10291F; --surface-mint-soft:#0D2119; --surface-lilac: #1D2B47; /* ---- Texto y bordes ---- */ --text-strong: #E8EEF6; --text-body: #B6C6D6; --text-muted: #8496A8; --border: #22344A; --border-strong: #2E4460; /* ---- La barra lateral, un escalón POR DEBAJO del papel: es el marco, no el contenido, y hundirla es lo que hace que la pantalla tenga capas en vez de ser un plano. ---- */ --ink-dark: #070E17; --ink-dark-2: #101B28; /* ---- Acción. El azul de la marca que SÍ pasa el 4,5:1 con texto blanco. El celeste de la portada de entrar da 2,86:1 y aquí no vale: allí es un botón que se pulsa una vez al día, aquí son cincuenta. ---- */ --color-primary: #2A76BF; --color-primary-hover: #3487D4; --color-primary-soft: rgba(42, 118, 191, .22); --link: #7CBBF7; --link-content: #7CBBF7; /* ---- El verde de identidad, aclarado para que se lea sobre el azul ---- */ --color-secondary: #5EC463; --color-secondary-hover: #4CAF50; /* ---- Estados semánticos, con el fondo tirando al azul de la casa para que no parezcan pegatinas de otro sistema ---- */ --success-bg:#0E2A1E; --success-fg:#7FD8A0; --success-bd:#1F4C37; --neutral-bg:#1A2A3C; --neutral-fg:#A8BACC; --neutral-bd:#2C4257; --warning-bg:#2C230C; --warning-fg:#F0C86A; --warning-bd:#4E3F17; --info-bg: #16264A; --info-fg: #A9C4F5; --info-bd: #2A4370; --danger-bg: #31191C; --danger-fg: #F09A93; --danger-bd: #562C31; --disabled-bg:#172538; --disabled-fg:#64768A; --disabled-bd:#26384E; --danger-solid:#C6362C; --meter-good:#3FA86A; --meter-warn:#E0A93B; --meter-bad:#E06B57; /* ---- Sombras: sobre oscuro no se ven, la jerarquía la lleva el borde ---- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45); --shadow-md: 0 8px 24px rgba(0, 0, 0, .55); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6); --shadow-modal: 0 30px 80px rgba(0, 0, 0, .75); } /* Regla dura: todo número (cifras, %, KPIs, dinero, cantidades) usa tabular-nums */ .tabular { font-variant-numeric: tabular-nums; }