/* ============================================================================ tokens.css — DESIGN TOKENS de la UI del BackEnd (carril paralelo). Qué define (y SOLO esto): lo COMÚN a los dos clientes — densidad, radios, tipografía, superficies y modo oscuro — expresado con las variables CSS que Bootstrap 5.3 expone (--bs-*) para que el framework se ajuste solo: NINGÚN !important, ninguna pelea con los selectores de Bootstrap. La PALETA DE MARCA (color de la marca y derivados, sidebar, header de grilla en dark) NO está acá: vive en UN ARCHIVO POR CLIENTE, brand-clg.css / brand-lap.css, que el head carga después de este según SharedLayoutHelper.GetClientCode(). Los tokens --ui-brand* y --ui-sidebar-bg que se consumen acá y en layout.css los define ese archivo. Cómo se selecciona el tema: el lleva data-bs-theme="light" | "dark" (lo pone theme-init.js antes del primer paint, desde localStorage). El también lleva data-client="clg" | "lap" (informativo / para CSS ad-hoc). Reglas de mantenimiento: - Un color nuevo COMÚN se agrega como token acá y se consume en layout.css. - Un color que identifica al cliente va en su brand-.css. ============================================================================ */ /* --------------------------------------------------------------------------- 1. PALETA DE MARCA → brand-clg.css / brand-lap.css (un archivo por cliente). Acá solo lo del sidebar que NO depende del cliente (texto, hover, divisores). --------------------------------------------------------------------------- */ :root { --ui-sidebar-fg: rgba(255, 255, 255, .82); --ui-sidebar-fg-muted: rgba(255, 255, 255, .55); --ui-sidebar-hover-bg: rgba(255, 255, 255, .07); --ui-sidebar-active-bg: rgba(255, 255, 255, .13); --ui-sidebar-divider: rgba(255, 255, 255, .10); } /* --------------------------------------------------------------------------- 2. SUPERFICIES, DENSIDAD, RADIOS, TIPOGRAFÍA (tema claro = base) --------------------------------------------------------------------------- */ :root, :root[data-bs-theme="light"] { /* Superficies propias */ --ui-surface: #ffffff; --ui-surface-muted: #f6f8fb; --ui-surface-border: #e3e8ef; --ui-surface-shadow: 0 1px 2px rgba(16, 24, 40, .06); --ui-sticky-shadow: 0 4px 12px -6px rgba(16, 24, 40, .18); /* Grilla */ --ui-grid-head-bg: var(--ui-brand); --ui-grid-head-fg: var(--ui-brand-contrast); --ui-grid-head-border: rgba(255, 255, 255, .18); --ui-grid-striped-bg: rgba(var(--ui-brand-rgb), .035); --ui-grid-hover-bg: rgba(var(--ui-brand-rgb), .09); --ui-grid-border: #e6eaf0; /* Layout */ --ui-sidebar-w: 250px; --ui-sidebar-w-collapsed: 60px; --ui-topbar-h: 52px; --ui-content-gap: .4rem; --ui-content-pad: .4rem; --ui-grid-max-h: calc(100vh - var(--ui-topbar-h) - 205px); --ui-widget-scroll-max: 420px; /* alto máximo del cuerpo con scroll de un widget de lista (Novedades, Vencimientos) */ /* Densidad (compacta legible): tablas 13px, controles 13px, cuerpo 14px */ --ui-table-font-size: .8125rem; --ui-table-cell-py: .3rem; --ui-table-cell-px: .5rem; --ui-control-font-size: .8125rem; --ui-label-font-size: .78rem; --ui-panel-head-py: .3rem; --ui-panel-body-py: .4rem; --ui-panel-px: .6rem; /* Título de sección (UN solo look en todo el layout: cabeceras de panel "FILTROS/RESULTADOS", secciones del form, cards de tableros/públicas, header de popovers) */ --ui-section-title-fs: .8rem; --ui-section-title-ls: .06em; /* Bootstrap: tipografía base */ --bs-body-font-size: .875rem; --bs-body-line-height: 1.45; --bs-body-bg: #f2f4f8; --bs-body-color: #1f2937; --bs-secondary-color: #5b6572; --bs-tertiary-color: #8a94a3; --bs-border-color: var(--ui-surface-border); /* Bootstrap: radios sutiles (reemplaza a flat-border-radius.css, que los ponía en 0) */ --bs-border-radius: .3rem; --bs-border-radius-sm: .25rem; --bs-border-radius-lg: .45rem; --bs-border-radius-xl: .7rem; --bs-border-radius-xxl: 1rem; --bs-border-radius-pill: 50rem; /* Bootstrap: color primario = marca del cliente */ --bs-primary: var(--ui-brand); --bs-primary-rgb: var(--ui-brand-rgb); --bs-primary-text-emphasis: var(--ui-brand-text); --bs-primary-bg-subtle: var(--ui-brand-subtle); --bs-primary-border-subtle: var(--ui-brand-border); --bs-link-color: var(--ui-brand-text); --bs-link-color-rgb: var(--ui-brand-rgb); --bs-link-hover-color: var(--ui-brand-hover); --bs-link-hover-color-rgb: var(--ui-brand-rgb); --bs-focus-ring-color: rgba(var(--ui-brand-rgb), .25); --bs-focus-ring-width: .2rem; } /* --------------------------------------------------------------------------- 2b. DENSIDAD SELECCIONABLE — (toggle en el menú de usuario, persistido por layout.js). Sin el atributo = compacta (default). --------------------------------------------------------------------------- */ :root[data-ui-density="comfortable"] { --ui-table-font-size: .875rem; --ui-table-cell-py: .45rem; --ui-table-cell-px: .6rem; --ui-control-font-size: .875rem; --ui-label-font-size: .8125rem; --ui-panel-head-py: .4rem; --ui-panel-body-py: .6rem; --ui-panel-px: .8rem; --ui-section-title-fs: .85rem; --ui-content-gap: .6rem; --ui-content-pad: .6rem; --bs-body-font-size: .9rem; } /* --------------------------------------------------------------------------- 3. MODO OSCURO — Bootstrap 5.3 hace lo suyo con data-bs-theme="dark"; acá van solo los tokens propios y los pocos de Bootstrap que conviene afinar. --------------------------------------------------------------------------- */ :root[data-bs-theme="dark"] { --ui-brand-subtle: rgba(var(--ui-brand-rgb), .22); --ui-brand-border: rgba(var(--ui-brand-rgb), .55); /* --ui-brand-text, --ui-sidebar-bg y --ui-grid-head-bg en dark: en brand-.css */ --ui-surface: #171c24; --ui-surface-muted: #1d232d; --ui-surface-border: #2b3340; --ui-surface-shadow: 0 1px 2px rgba(0, 0, 0, .35); --ui-sticky-shadow: 0 4px 14px -6px rgba(0, 0, 0, .6); --ui-sidebar-fg: rgba(255, 255, 255, .80); --ui-sidebar-fg-muted: rgba(255, 255, 255, .50); --ui-sidebar-hover-bg: rgba(255, 255, 255, .06); --ui-sidebar-active-bg: rgba(127, 176, 255, .16); --ui-sidebar-divider: rgba(255, 255, 255, .08); --ui-grid-head-fg: #e6edf7; --ui-grid-head-border: rgba(255, 255, 255, .10); --ui-grid-striped-bg: rgba(255, 255, 255, .025); --ui-grid-hover-bg: rgba(var(--ui-brand-rgb), .28); --ui-grid-border: #2b3340; --bs-body-bg: #0f1319; --bs-body-color: #d5dbe4; --bs-secondary-color: #98a3b3; --bs-tertiary-color: #6f7a8a; --bs-border-color: var(--ui-surface-border); --bs-primary-text-emphasis: var(--ui-brand-text); --bs-primary-bg-subtle: var(--ui-brand-subtle); --bs-primary-border-subtle: var(--ui-brand-border); --bs-link-color: var(--ui-brand-text); --bs-link-hover-color: #bcd3f7; } /* --------------------------------------------------------------------------- 4. COMPONENTES DE BOOTSTRAP QUE TOMAN LA MARCA (vía sus propias variables) --------------------------------------------------------------------------- */ .btn-primary { --bs-btn-bg: var(--ui-brand); --bs-btn-border-color: var(--ui-brand); --bs-btn-hover-bg: var(--ui-brand-hover); --bs-btn-hover-border-color: var(--ui-brand-hover); --bs-btn-active-bg: var(--ui-brand-active); --bs-btn-active-border-color: var(--ui-brand-active); --bs-btn-disabled-bg: var(--ui-brand); --bs-btn-disabled-border-color: var(--ui-brand); --bs-btn-focus-shadow-rgb: var(--ui-brand-rgb); } .btn-outline-primary { --bs-btn-color: var(--ui-brand-text); --bs-btn-border-color: var(--ui-brand-border); --bs-btn-hover-bg: var(--ui-brand); --bs-btn-hover-border-color: var(--ui-brand); --bs-btn-hover-color: var(--ui-brand-contrast); --bs-btn-active-bg: var(--ui-brand-active); --bs-btn-active-border-color: var(--ui-brand-active); --bs-btn-active-color: var(--ui-brand-contrast); --bs-btn-disabled-color: var(--ui-brand-text); --bs-btn-disabled-border-color: var(--ui-brand-border); --bs-btn-focus-shadow-rgb: var(--ui-brand-rgb); } .form-check-input:checked, .form-check-input:indeterminate { background-color: var(--ui-brand); border-color: var(--ui-brand); } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--ui-brand-border); box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color); } .badge.text-bg-primary, .bg-custom { background-color: var(--ui-brand); color: var(--ui-brand-contrast); } .dropdown-menu { --bs-dropdown-link-active-bg: var(--ui-brand); --bs-dropdown-link-hover-bg: var(--ui-brand-subtle); --bs-dropdown-border-color: var(--ui-surface-border); --bs-dropdown-bg: var(--ui-surface); } .pagination { --bs-pagination-active-bg: var(--ui-brand); --bs-pagination-active-border-color: var(--ui-brand); } /* Foco visible por teclado (el proyecto fomenta atajos: Alt+B, Enter = Buscar) */ :focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 2px; } .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: none; /* estos ya tienen el focus ring de Bootstrap */ }