/* ===================================================================== BCRD UI Kit — Tokens de diseño Fuente: Figma "BCRD UI Kit" v0.1 (Mayo 2025) https://www.figma.com/design/osBnyRtRAiAEinZVw3J5g1/BCRD-UI-Kit --------------------------------------------------------------------- Los nombres --color-* replican EXACTAMENTE las variables publicadas en Figma, para que el nombre del token en diseño y en código sea el mismo. Los tokens --bcrd-* añaden espaciado, tipografía y radios. NO escribir hex sueltos en el resto del proyecto: usar estos tokens. ===================================================================== */ :root { /* ---------------- Marca ---------------- */ --color-primary: #967D2D; --color-primary-hover: #A58C38; --color-primary-active: #7A6726; --color-primary-focus: #8F7A2E; --color-primary-focus-ring: #C8A646; --color-primary-disabled: #3A3526; --color-primary-disabled-border: #B2A373; --color-primary-soft: #F9F6EA; --color-text-on-primary: #000000; /* ================================================================ CAPA ACCESIBLE (WCAG 2.1 AA) — derivada de la paleta del Figma ---------------------------------------------------------------- El dorado institucional #967D2D con texto blanco da 3.99:1 y AA exige 4.5:1. Como el texto debe seguir siendo blanco, se oscurece el RELLENO. Estos tokens se usan solo donde hay texto encima; --color-primary sigue siendo el dorado de marca para bordes, íconos, barras de acento y cualquier superficie sin texto. Todos los ratios están medidos, no estimados. ================================================================ */ /* Rellenos con texto blanco */ --color-primary-fill: #7A6726; /* blanco 5.53:1 — = primary-active del kit */ --color-primary-fill-hover: #8A7329; /* blanco 4.60:1 */ --color-primary-fill-active: #5E4D1B; /* blanco 8.22:1 */ /* Dorado como texto o ícono sobre fondo claro */ --color-primary-text: #7A6726; /* 5.53:1 sobre blanco */ /* Neutros accesibles */ /* El borde de los controles es el #DDDDDD del Figma (= --color-border). NOTA DE ACCESIBILIDAD: #DDDDDD sobre blanco da 1.35:1 y WCAG 1.4.11 pide 3:1 para el contorno de un control. Es una decisión de diseño tomada a conciencia para respetar el UI Kit. Lo que sostiene la percepción del control es el anillo de foco dorado de doble aro (--bcrd-focus-ring), que sí contrasta. Si en una auditoría hiciera falta volver a cumplir 1.4.11, el valor anterior era #888888 (3.06:1 en el peor caso, sobre #EEE) y basta con restituirlo aquí. */ --color-border-interactive: #DDDDDD; --color-text-placeholder: #6C6C6C; /* 4.53:1 peor caso — el placeholder es texto real */ /* Feedback usado como TEXTO (los bordes siguen en el color de marca) */ --color-danger-text: #CC0000; /* 5.07:1 peor caso; en relleno da 5.89:1 con blanco */ --color-success-text: #006B00; /* 6.77:1 con blanco encima; 6.77:1 sobre blanco */ /* ---------------- Neutros oscuros ---------------- */ --color-secondary: #333333; --color-text-muted: #63656A; --color-text-disabled: #999999; /* ---------------- Neutros claros ---------------- */ --color-surface: #FFFFFF; --color-surface-subtle: #F8F8F8; --color-surface-muted: #EEEEEE; --color-border: #DDDDDD; --color-border-strong: #D9D9D9; /* ---------------- Feedback ---------------- */ --color-success: #008000; --color-success-soft: #99CB99; --color-danger: #FF0000; --color-danger-soft: #F69799; /* RGB (para rgba() y utilidades de opacidad de Bootstrap) */ --bcrd-primary-rgb: 150, 125, 45; --bcrd-secondary-rgb: 51, 51, 51; --bcrd-success-rgb: 0, 128, 0; --bcrd-danger-rgb: 255, 0, 0; /* ---------------- Tipografía ---------------- */ --bcrd-font-family: 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Pesos (mapeados en bcrd-fonts.css) */ --bcrd-font-light: 300; /* Gotham Light */ --bcrd-font-book: 400; /* Gotham Book */ --bcrd-font-medium: 500; /* Gotham Medium */ --bcrd-font-bold: 700; /* Gotham Bold */ /* Escala de encabezados — valores desktop. En <768px se reducen automáticamente (ver bcrd-theme.css). */ --bcrd-h1: 40px; --bcrd-h2: 32px; --bcrd-h3: 26px; --bcrd-h4: 22px; --bcrd-h5: 18px; /* Estilos de texto publicados en Figma */ --bcrd-text-display: 55px; /* Heading/Display · Medium */ --bcrd-text-section: 35px; /* Heading/Section · Medium */ --bcrd-text-subtitle: 20px; /* Title/Subtitle · Medium */ --bcrd-text-body-lg: 18px; /* Text/Body Large · Book */ --bcrd-text-body: 16px; /* Text/Body · Book */ --bcrd-text-body-sm: 15px; /* Text/Body Small · Book */ --bcrd-text-body-2: 14px; /* Text/Body 2 · Light */ --bcrd-text-caption: 12px; /* Text/Caption · Light */ --bcrd-text-input: 14px; /* Form/Input · Book */ --bcrd-label-lg: 16px; /* Label/Large · Medium */ --bcrd-label: 14px; /* Label/Default · Medium */ --bcrd-label-sm: 12px; /* Label/Small · Medium */ --bcrd-line-height: 1.5; --bcrd-line-height-tight: 1.2; /* ---------------- Espaciado (Figma: spacing-1 .. spacing-7) ------ */ --bcrd-spacing-1: 4px; /* separaciones mínimas (icono/texto) */ --bcrd-spacing-2: 8px; /* padding interno pequeño */ --bcrd-spacing-3: 16px; /* margen entre componentes */ --bcrd-spacing-4: 24px; /* espaciado más notorio */ --bcrd-spacing-5: 32px; /* separación de secciones */ --bcrd-spacing-6: 40px; /* padding exterior grande */ --bcrd-spacing-7: 64px; /* margen en layouts de página */ /* ---------------- Logo ---------------- El logo institucional mide 326x99. El isotipo (el edificio) ocupa de x=5 a x=106 y el logotipo ("BANCO CENTRAL") arranca en x=123, así que recortando por debajo de x=123 se obtiene el isotipo limpio. El recorte se expresa como una proporción respecto al ALTO, para que siga funcionando si se cambia el tamaño: alto x 1.2 deja el isotipo completo (x=0..118.8) sin tocar la primera letra. */ --bcrd-logo-isotype-ratio: 1.2; /* ---------------- Radios ---------------- */ --bcrd-radius-sm: 3px; /* badge, callout */ --bcrd-radius: 5px; /* botones, inputs, tarjetas */ --bcrd-radius-pill: 50px; /* ---------------- Bordes ---------------- */ --bcrd-border-width: 1px; --bcrd-border-width-strong: 2px; /* botones con borde */ --bcrd-border-accent: 4px; /* callout */ /* ---------------- Elevación ---------------- */ --bcrd-shadow-card: 0 1px 1px rgba(0, 0, 0, 0.25); --bcrd-shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.12); /* Velo del indicador de carga: aclara en claro, oscurece en oscuro */ --bcrd-veil: rgba(255, 255, 255, 0.65); /* Superficies translúcidas sobre un relleno dorado (cabecera del panel de notificaciones). Aquí el relleno es oscuro, así que se aclaran. */ --bcrd-on-primary-veil: rgba(255, 255, 255, 0.15); --bcrd-on-primary-veil-hover: rgba(255, 255, 255, 0.28); --bcrd-on-primary-line: rgba(255, 255, 255, 0.55); /* Relleno de los badges suaves (.badge-bcrd--soft). Se declara el color entero y no sólo la opacidad, porque en oscuro también cambia el tono: el verde y el rojo tienen que aclararse para seguir legibles. */ --bcrd-badge-success-bg: rgba(0, 107, 0, 0.10); --bcrd-badge-danger-bg: rgba(204, 0, 0, 0.08); --bcrd-shadow-pressed: inset 0 4px 4px rgba(0, 0, 0, 0.25); /* Aro solido de 2px: 5.53:1 contra la pagina. Un resplandor difuso no cumple WCAG 1.4.11 (el color compuesto pierde contraste). */ --bcrd-shadow-focus: 0 0 0 2px var(--color-primary-fill); /* Doble aro: el blanco separa del componente (5.53:1 sobre el relleno) y el oscuro contrasta con la pagina (5.53:1 sobre blanco). Un aro translucido no sirve: rgba(200,166,70,.45) sobre blanco da 1.43:1. */ --bcrd-focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary-fill); /* ---------------- Alturas de control ---------------- */ --bcrd-control-height: 30px; /* input, select, celda de tabla */ --bcrd-button-height: 35px; /* ---------------- Rejilla / adaptabilidad ---------------- */ --bcrd-gutter: 24px; /* >=1200px */ --bcrd-page-margin: 32px; /* >=1200px */ --bcrd-transition: 0.15s ease-in-out; /* ---------------- Curvas de movimiento ---------------- Las curvas nativas de CSS son demasiado suaves y hacen que la interfaz se sienta blanda. Estas son variantes mas marcadas. Regla: lo que ENTRA o SALE usa ease-out (arranca rapido, responde al instante); lo que SE MUEVE en pantalla usa ease-in-out; los cambios de color usan `ease`. Nunca ease-in en UI: retrasa el arranque justo en el momento que el usuario esta mirando. */ --bcrd-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --bcrd-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* Duraciones (todo lo de UI por debajo de 300ms) */ --bcrd-duration-press: 160ms; /* respuesta a pulsacion */ --bcrd-duration-fast: 150ms; /* hover, foco */ --bcrd-duration-panel: 220ms; /* dropdown, acordeon */ } /* Tablet: >=768px */ @media (max-width: 1199.98px) { :root { --bcrd-gutter: 16px; --bcrd-page-margin: 24px; } } /* Móvil: <768px — escala tipográfica reducida según el UI Kit */ @media (max-width: 767.98px) { :root { --bcrd-h1: 32px; --bcrd-h2: 26px; --bcrd-h3: 22px; --bcrd-h4: 20px; --bcrd-h5: 16px; --bcrd-gutter: 16px; --bcrd-page-margin: 16px; } } /* ===================================================================== MODO OSCURO --------------------------------------------------------------------- La aplicación activa el tema poniendo data-theme="dark" en el (ver Areas/App/Views/Layout/_Layout.cshtml y Views/Account/_Layout.cshtml). Sólo se reasignan los tokens SEMÁNTICOS. Toda la capa de tema y la de componentes están escritas contra estos nombres, así que no hace falta duplicar ni una regla: cambiando los valores aquí, los ~400 selectores del kit se adaptan solos. Criterio de color: · Los neutros son neutros de verdad. Metronic pinta su modo oscuro en un azul-violeta (#1e1e2d, #2B2B40) que con el dorado institucional produce un tinte sucio. La paleta clara del BCRD es estrictamente neutra (#FFFFFF/#F8F8F8/#EEEEEE/#DDDDDD/#333333) y la oscura la refleja. Los grises del chasis de Metronic se reasignan en bcrd-theme.css § 1.3. · El dorado se aclara. #967D2D sobre un fondo oscuro da 4.28:1, por debajo del 4.5:1 que pide AA. Se usa #C8A646, que NO es un color inventado: es --color-primary-focus-ring, un token ya publicado en el Figma del kit. Da 7.14:1 sobre la superficie oscura. · Los rellenos dorados invierten el texto. En claro, el relleno es oscuro y el texto blanco; en oscuro, el relleno es el dorado claro y el texto va oscuro. Las reglas del tema ya escriben ese texto como `var(--color-surface)`, que vale #FFFFFF en claro y #1E1E1E en oscuro, así que la inversión sale sola. Todos los ratios están medidos, no estimados. Ver README.md. ===================================================================== */ [data-theme='dark'] { /* ---------------- Marca ---------------- */ --color-primary: #C8A646; /* 7.14:1 sobre la superficie */ --color-primary-hover: #D6B85F; --color-primary-active: #B08F35; --color-primary-focus: #C8A646; --color-primary-focus-ring: #E0C77A; --color-primary-disabled: #3A3526; --color-primary-disabled-border: #5A5342; --color-primary-soft: #2A2519; /* tinte del ítem de menú activo */ --color-text-on-primary: #1E1E1E; /* ---------------- Capa accesible ---------------- */ /* Rellenos dorados: el texto que va encima es --color-surface (#1E1E1E) */ --color-primary-fill: #C8A646; /* 7.14:1 con el texto oscuro */ --color-primary-fill-hover: #D6B85F; /* 8.64:1 */ --color-primary-fill-active: #B08F35; /* 5.42:1 */ --color-primary-text: #C8A646; /* dorado como texto o ícono */ --color-border-interactive: #3D3D3D; --color-text-placeholder: #8A8A8A; /* 4.83:1 */ --color-danger-text: #FF4C4C; /* 5.07:1 */ --color-success-text: #4CA64C; /* 5.45:1 */ /* ---------------- Neutros: texto ---------------- */ --color-secondary: #E8E8E8; /* 13.61:1 — texto principal */ --color-text-muted: #A0A0A0; /* 6.38:1 */ --color-text-disabled: #6B6B6B; /* deshabilitado: WCAG lo exime */ /* ---------------- Neutros: superficies ---------------- */ --color-surface: #1E1E1E; /* tarjetas, modales, inputs */ --color-surface-subtle: #262626; /* botón terciario, zonas hundidas */ --color-surface-muted: #303030; /* cabecera de tabla, paginación */ --color-border: #3D3D3D; --color-border-strong: #4A4A4A; /* ---------------- Feedback ---------------- */ --color-success: #4CA64C; --color-success-soft: #2E5C2E; --color-danger: #FF4C4C; --color-danger-soft: #6B2A2A; /* RGB para las utilidades de opacidad de Bootstrap */ --bcrd-primary-rgb: 200, 166, 70; --bcrd-secondary-rgb: 232, 232, 232; --bcrd-success-rgb: 76, 166, 76; --bcrd-danger-rgb: 255, 76, 76; /* ---------------- Velos y sombras ---------------- En claro el velo de carga aclara; en oscuro tiene que oscurecer, y las sombras negras no se ven sobre un fondo ya oscuro. */ --bcrd-veil: rgba(18, 18, 18, 0.72); --bcrd-shadow-card: 0 1px 1px rgba(0, 0, 0, 0.6); --bcrd-shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.5); /* Superficie translúcida sobre un relleno dorado (cabecera del panel de notificaciones). En claro se aclara con blanco; en oscuro, con negro, porque el relleno dorado pasa a ser claro. */ --bcrd-on-primary-veil: rgba(0, 0, 0, 0.12); --bcrd-on-primary-veil-hover: rgba(0, 0, 0, 0.22); --bcrd-on-primary-line: rgba(0, 0, 0, 0.45); /* Relleno de los badges suaves. Sobre fondo oscuro hay que bajar la opacidad o el texto de color pierde contraste: a 0.10 los cuatro quedan por encima de 4.5:1 (verde 4.72, rojo 4.53, dorado 5.98, neutro 5.41). Las variantes --primary y --muted no aparecen aquí porque usan --color-primary-soft y --color-surface-muted, que ya cambian con el tema. */ --bcrd-badge-success-bg: rgba(76, 166, 76, 0.10); --bcrd-badge-danger-bg: rgba(255, 76, 76, 0.10); }