/* ========================================================================== CooperApp · Estilo C «Bento» — TOKENS -------------------------------------------------------------------------- Único sitio donde viven los valores literales. Ningún otro CSS del proyecto debe escribir un color, un radio o una sombra a mano: todo se consume con var(--token). Dos modos con el mismo juego de tokens. El modo se decide así: 1. Si lleva data-tema="claro" u "oscuro", manda ese atributo. 2. Si no lo lleva, manda la preferencia del sistema (prefers-color-scheme). `tema.js` escribe el atributo y lo recuerda en localStorage. Contraste: todos los pares texto/fondo de estos tokens cumplen WCAG 2.2 AA (4.5:1 en texto normal). Los valores comprobados van anotados al lado. ========================================================================== */ :root{ /* ---- Marca ------------------------------------------------------------ */ /* El granate de Prodiversa se conserva como color de marca en modo claro. */ --acento:#8B1E3F; /* 8.92:1 sobre blanco */ --acento-2:#C0416A; /* segundo tono del degradado de marca */ --acento-suave:rgba(139,30,63,.10); --acento-borde:rgba(139,30,63,.24); /* Fondo y texto del botón principal: se declaran por separado porque en modo oscuro el acento se aclara y el texto tiene que oscurecerse. */ --acento-solido:#8B1E3F; --acento-solido-txt:#ffffff; /* 8.92:1 */ --acento-solido-hover:#7A1A37; /* ---- Superficies ------------------------------------------------------ */ --fondo:#F4F2F1; /* lienzo de la página */ --sup:#FFFFFF; /* celda bento, tarjeta, modal */ --sup-2:#FAF9F8; /* celda anidada, cabecera de tabla, campo */ --sup-3:#F1EEEC; /* hundido: pista de barra, fila alterna */ --borde:rgba(28,25,23,.10); --borde-2:rgba(28,25,23,.18); --pista:rgba(28,25,23,.08); /* fondo de barras de progreso */ --velo:rgba(28,25,23,.42); /* fondo del modal */ /* ---- Texto ------------------------------------------------------------ */ --texto:#1A1614; /* 16.9:1 sobre --sup */ --texto-2:#57504C; /* 8.1:1 */ --texto-3:#736B66; /* 5.2:1 — mínimo permitido para texto */ --texto-inv:#FBF9F8; /* ---- Estados ---------------------------------------------------------- Cada color va siempre acompañado de texto o de un icono: nunca se codifica información solo con el tono. */ --ok:#15803D; --ok-bg:rgba(21,128,61,.10); --ok-borde:rgba(21,128,61,.28); --avisa:#B45309; --avisa-bg:rgba(180,83,9,.10); --avisa-borde:rgba(180,83,9,.28); --mal:#B91C1C; --mal-bg:rgba(185,28,28,.10); --mal-borde:rgba(185,28,28,.28); --info:#1D4ED8; --info-bg:rgba(29,78,216,.10); --info-borde:rgba(29,78,216,.28); --lila:#6D28D9; --lila-bg:rgba(109,40,217,.10); --lila-borde:rgba(109,40,217,.28); --neutro:#57504C; --neutro-bg:rgba(28,25,23,.07); --neutro-borde:rgba(28,25,23,.18); /* ---- Estados del proyecto -------------------------------------------- Alias semánticos: las plantillas usan `.eti--{{ estado.value }}`, así que el nombre del token coincide con el valor del enum. */ --est-formulacion:var(--lila); --est-formulacion-bg:var(--lila-bg); --est-aprobado:var(--info); --est-aprobado-bg:var(--info-bg); --est-ejecucion:var(--ok); --est-ejecucion-bg:var(--ok-bg); --est-justificacion:var(--avisa); --est-justificacion-bg:var(--avisa-bg); --est-cerrado:var(--neutro); --est-cerrado-bg:var(--neutro-bg); --tipo-desarrollo:var(--info); --tipo-desarrollo-bg:var(--info-bg); --tipo-accion_humanitaria:var(--mal); --tipo-accion_humanitaria-bg:var(--mal-bg); /* ---- Sombras ---------------------------------------------------------- */ --sombra:0 1px 2px rgba(28,25,23,.05), 0 8px 24px rgba(28,25,23,.05); --sombra-alta:0 2px 6px rgba(28,25,23,.07), 0 18px 44px rgba(28,25,23,.11); --sombra-btn:0 4px 14px var(--acento-suave); /* ---- Geometría -------------------------------------------------------- */ --r-xs:6px; --r-s:10px; --r:16px; /* radio de la celda bento */ --r-l:22px; --r-pill:999px; --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:22px; --esp-6:30px; --esp-7:44px; --esp-8:64px; --hueco:14px; /* separación entre celdas de la rejilla bento */ --ancho-max:1360px; --alto-cab:64px; /* ---- Tipografía ------------------------------------------------------- */ --sans:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, "Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --t-xs:11px; --t-s:12.5px; --t-base:14px; --t-m:15px; --t-l:17px; --t-xl:clamp(19px,17px + .4vw,22px); --t-2xl:clamp(22px,19px + .8vw,26px); --t-3xl:clamp(26px,21px + 1.6vw,34px); --peso-normal:400; --peso-medio:500; --peso-fuerte:600; /* Etiqueta funcional: mono, versalitas, tracking. Se usa en cabeceras de tabla, rótulos de indicador y metadatos. */ --t-eti:10px; --track-eti:.12em; /* ---- Movimiento ------------------------------------------------------- */ --micro:.18s cubic-bezier(.4,0,.2,1); --suave:.28s cubic-bezier(.4,0,.2,1); /* ---- Capas ------------------------------------------------------------ */ --z-cab:20; --z-menu:30; --z-modal:40; --z-aviso:50; --z-progreso:60; color-scheme:light; } /* ========================================================================== MODO OSCURO Se declara dos veces a propósito: una para la preferencia del sistema (solo si el usuario no ha elegido explícitamente el claro) y otra para la elección explícita, para que el interruptor gane en ambas direcciones. ========================================================================== */ @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){ --acento:#E4577C; /* 4.99:1 sobre --sup */ --acento-2:#F2809E; --acento-suave:rgba(228,87,124,.14); --acento-borde:rgba(228,87,124,.34); --acento-solido:#E4577C; --acento-solido-txt:#1A0A0F; /* 5.4:1 — texto oscuro sobre el acento claro */ --acento-solido-hover:#F2809E; --fondo:#131010; --sup:#1C1817; --sup-2:#221D1C; --sup-3:#2A2423; --borde:rgba(255,255,255,.09); --borde-2:rgba(255,255,255,.17); --pista:rgba(255,255,255,.10); --velo:rgba(0,0,0,.62); --texto:#F5F1EF; --texto-2:#B5ADA9; --texto-3:#8F8681; /* 4.94:1 sobre --sup */ --texto-inv:#17100E; --ok:#4ADE80; --ok-bg:rgba(74,222,128,.13); --ok-borde:rgba(74,222,128,.30); --avisa:#FBBF24; --avisa-bg:rgba(251,191,36,.13); --avisa-borde:rgba(251,191,36,.30); --mal:#F87171; --mal-bg:rgba(248,113,113,.13); --mal-borde:rgba(248,113,113,.30); --info:#60A5FA; --info-bg:rgba(96,165,250,.13); --info-borde:rgba(96,165,250,.30); --lila:#A78BFA; --lila-bg:rgba(167,139,250,.13); --lila-borde:rgba(167,139,250,.30); --neutro:#B5ADA9; --neutro-bg:rgba(255,255,255,.08); --neutro-borde:rgba(255,255,255,.18); --sombra:0 1px 2px rgba(0,0,0,.34), 0 10px 30px rgba(0,0,0,.30); --sombra-alta:0 2px 8px rgba(0,0,0,.4), 0 22px 54px rgba(0,0,0,.42); color-scheme:dark; } } :root[data-tema="oscuro"]{ --acento:#E4577C; --acento-2:#F2809E; --acento-suave:rgba(228,87,124,.14); --acento-borde:rgba(228,87,124,.34); --acento-solido:#E4577C; --acento-solido-txt:#1A0A0F; --acento-solido-hover:#F2809E; --fondo:#131010; --sup:#1C1817; --sup-2:#221D1C; --sup-3:#2A2423; --borde:rgba(255,255,255,.09); --borde-2:rgba(255,255,255,.17); --pista:rgba(255,255,255,.10); --velo:rgba(0,0,0,.62); --texto:#F5F1EF; --texto-2:#B5ADA9; --texto-3:#8F8681; --texto-inv:#17100E; --ok:#4ADE80; --ok-bg:rgba(74,222,128,.13); --ok-borde:rgba(74,222,128,.30); --avisa:#FBBF24; --avisa-bg:rgba(251,191,36,.13); --avisa-borde:rgba(251,191,36,.30); --mal:#F87171; --mal-bg:rgba(248,113,113,.13); --mal-borde:rgba(248,113,113,.30); --info:#60A5FA; --info-bg:rgba(96,165,250,.13); --info-borde:rgba(96,165,250,.30); --lila:#A78BFA; --lila-bg:rgba(167,139,250,.13); --lila-borde:rgba(167,139,250,.30); --neutro:#B5ADA9; --neutro-bg:rgba(255,255,255,.08); --neutro-borde:rgba(255,255,255,.18); --sombra:0 1px 2px rgba(0,0,0,.34), 0 10px 30px rgba(0,0,0,.30); --sombra-alta:0 2px 8px rgba(0,0,0,.4), 0 22px 54px rgba(0,0,0,.42); color-scheme:dark; } /* ========================================================================== COMPATIBILIDAD Nombres de variable de la hoja anterior, redirigidos a los tokens nuevos. Existen para que cualquier `style="..."` residual en una plantilla no se quede sin color mientras se completa la migración. No usar en código nuevo. ========================================================================== */ :root{ --color-primary:var(--acento); --color-primary-light:var(--acento-2); --color-primary-dark:var(--acento-solido-hover); --color-primary-bg:var(--acento-suave); --color-success:var(--ok); --color-success-solid:var(--ok); --color-warning:var(--avisa); --color-warning-solid:var(--avisa); --color-danger:var(--mal); --color-danger-solid:var(--mal); --color-info:var(--info); --color-bg:var(--fondo); --color-white:var(--sup); --color-text:var(--texto); --color-text-light:var(--texto-2); --color-text-muted:var(--texto-3); --color-border:var(--borde); --shadow-sm:var(--sombra); --shadow-card:var(--sombra); --shadow-lg:var(--sombra-alta); --radius-sm:var(--r-xs); --radius-md:var(--r-s); --radius-lg:var(--r); --radius-xl:var(--r-l); --font-family:var(--sans); /* Font Awesome 7 dibuja los iconos con ancho fijo; se restablece el natural. */ --fa-width:auto; }