/* ============================================================ bancaria-tokens-v2.css — PROPUESTA de sistema de diseño La Bancaria Seccional San Juan · Fuxia IT · 17/09/2026 ------------------------------------------------------------ Qué cambia respecto de bancaria-tokens.css: 1. ESCALA TIPOGRÁFICA. Antes: 20 tamaños sueltos en home.css, con medios píxeles (10.5, 11.5, 12.5...). Ahora: 8 pasos. El más chico es 13px — abajo de eso no se lee en un celular y el padrón es gente de 25 a 65 años. 2. PALETA RECORTADA. Antes: 22 colores. Dos estaban muertos (verde-accion y rojo-mundial, 0 usos) y cinco casi (celeste-palido 1, amarillo 1, crema 2, verde-claro 4, violeta-claro 5). Había CINCO azules compitiendo entre sí. Ahora: 3 azules con un trabajo cada uno, más verde, rojo y ámbar solo para estado. 3. TRES CAPAS. Primitivo (el hex) → semántico (para qué sirve) → componente. Ningún template vuelve a escribir un hex. CÓMO SE PRUEBA: encolar este archivo DESPUÉS de bancaria-tokens.css en assets.php. Los alias del final pisan los nombres viejos, así que el sitio entero cambia sin tocar una sola de las ~200 referencias var(--...) que ya existen. Si no convence, se saca del encolado y vuelve todo atrás. ============================================================ */ :root{ /* ═══ CAPA 1 · PRIMITIVOS ═══════════════════════════════════ Los únicos hex del sistema. No se usan directo en templates. */ /* Leídos del logo de la seccional (17/09/2026). El logo manda sobre lo que había antes: la paleta vieja era una versión apagada y marinera de una marca que en realidad es verde menta + azul royal. Los tres hex marcados como EXACTO salen de muestrear bancaria-logo-web.png, no de estimar. */ --azul-900: #122451; /* Azul noche — header, footer, fondos oscuros */ --azul-600: #3958B2; /* EXACTO del logo — botones y enlaces */ --azul-500: #4D6FC9; /* Solo hover/focus del anterior */ --azul-200: #4D98DB; /* EXACTO del logo — acento de identidad */ --azul-050: #EAF2FB; /* Fondo suave para secciones alternadas */ /* El verde es color de MARCA, no sólo un estado: en el logo lleva "Construyendo unidad". Va en rellenos y acentos. */ --verde-marca: #41B77A; /* Contraste bajo sobre blanco: NUNCA para texto */ --verde-600: #0F6B47; /* La versión que sí se puede leer: texto y estados */ --verde-050: #E4F6ED; --rojo-600: #B8311D; /* Paro, urgencia gremial. Se usa poco a propósito */ --rojo-050: #FCEBEB; --ambar-600: #8A5A06; /* Pendiente, en revisión. Oscurecido para que el texto sobre fondo claro pase contraste AA */ --ambar-050: #FAEEDA; --gris-900: #111827; --gris-700: #374151; --gris-500: #6B7280; --gris-300: #D1D5DB; --gris-100: #F3F4F6; --blanco: #FFFFFF; /* ═══ CAPA 2 · SEMÁNTICOS ═══════════════════════════════════ Esto es lo que se usa en el CSS de los templates. */ /* Superficies */ --bg-pagina: #F4F7FB; --bg-tarjeta: var(--blanco); --bg-alterno: var(--azul-050); --bg-oscuro: var(--azul-900); /* Texto */ --texto: var(--gris-900); --texto-suave: var(--gris-700); --texto-tenue: var(--gris-500); --texto-claro: var(--blanco); /* sobre fondo oscuro */ /* Acción — UN color de acción en toda la página */ --accion: var(--azul-600); --accion-hover: var(--azul-500); --sobre-accion: var(--blanco); /* Acentos de identidad — decorativos, nunca un botón */ --acento: var(--azul-200); --marca: var(--verde-marca); /* Estado */ --exito: var(--verde-600); --exito-bg: var(--verde-050); --alerta: var(--ambar-600); --alerta-bg: var(--ambar-050); --urgente: var(--rojo-600); --urgente-bg: var(--rojo-050); /* Bordes */ --borde: var(--gris-300); --borde-suave: var(--gris-100); /* ═══ CAPA 3 · TIPOGRAFÍA ═══════════════════════════════════ 8 pasos. Los tres grandes son fluidos: crecen con el ancho de pantalla sin media queries, porque el 80% entra del celu. */ /* Outfit es un sans geométrico pesado, del mismo registro que el logo. Playfair, la serif editorial que había antes, era lo que hacía ver el sitio antiguo. Plus Jakarta Sans acompaña en texto. */ --font-display: 'Outfit', system-ui, -apple-system, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --fs-cifra: clamp(44px, 13vw, 88px); /* El % de paritaria. Nada más. */ --fs-h1: clamp(30px, 6vw, 46px); --fs-h2: clamp(23px, 4vw, 32px); --fs-h3: 20px; --fs-lg: 18px; --fs-base: 17px; /* 17 y no 16: el padrón llega hasta los 65 */ --fs-sm: 15px; --fs-cap: 13px; /* PISO. Nada más chico que esto en el sitio. */ --lh-cifra: 0.95; --lh-tit: 1.15; --lh-base: 1.6; /* Dos pesos, no cinco */ --peso-normal: 400; --peso-fuerte: 700; /* ═══ CAPA 4 · ESPACIO Y FORMA ══════════════════════════════ */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; /* aire entre secciones de la home */ --radio: 10px; --radio-card: 16px; --radio-pill: 999px; --ancho-texto: 68ch; /* medida de lectura cómoda */ --ancho-max: 1160px; /* ═══ COMPATIBILIDAD ════════════════════════════════════════ Los nombres viejos siguen existiendo y apuntan a los nuevos. Así el sitio cambia de aspecto sin editar ni un template. Cuando todo esté migrado, este bloque se borra. */ --celeste-alb: var(--acento); --celeste-palido: var(--bg-alterno); --azul-noche: var(--azul-900); --azul-principal: var(--accion); --azul-medio: var(--accion-hover); --azul-claro: var(--azul-050); --azul-palido: var(--bg-alterno); --verde: var(--exito); --verde-claro: var(--exito-bg); --verde-oscuro: var(--exito); --verde-accion: var(--exito); /* estaba muerto: 0 usos */ --violeta: var(--accion); /* no tenía rol propio: cae en acción */ --violeta-claro: var(--bg-alterno); --amarillo: var(--alerta); --rojo-gremial: var(--urgente); --rojo-mundial: var(--urgente); /* estaba muerto: 0 usos */ --crema: var(--bg-alterno); --bg-page: var(--bg-pagina); --bg-card: var(--bg-tarjeta); --bg-side: var(--bg-oscuro); --bg-alt: var(--bg-alterno); --bg-alt-2: var(--bg-alterno); --text-main: var(--texto); --text-soft: var(--texto-suave); }