/* ============================================================================ * DESIGN SYSTEM AUAS — TEMA PHOSIS (identidad visual de la marca PHOSIS) * ---------------------------------------------------------------------------- * Activo SOLO cuando el preset es PHOSIS (body[data-pc-preset="PHOSIS"]). * Para MINSAIT, TECNIDRONES, QAINGENIEROS y demas empresas es un no-op. * * Fuente de verdad de los valores: la pagina de marca PHOSIS (ver DESIGN.md). * Este archivo solo redefine tokens --ui-* y variables --bs-* de Bootstrap; * no contiene clases nuevas. * * Orden de carga: DEBE ir despues de tokens/*.css y de los CSS de la empresa * (ver includes/head.html). * ========================================================================= */ /* ========================================================================== * 1. FUENTES (Manrope para titulares, Mulish para texto) * Archivos woff2 extraidos de la muestra; sin base64 en CSS. * Familias con prefijo "PHOSIS" para no chocar con otras cargas de fuentes. * ========================================================================== */ @font-face { font-family: "PHOSIS Manrope"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("../fonts/manrope-latin.woff2") format("woff2"); } @font-face { font-family: "PHOSIS Mulish"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/mulish-latin.woff2") format("woff2"); } /* ========================================================================== * 2. TOKENS --ui-* Y VARIABLES BOOTSTRAP * ========================================================================== */ body[data-pc-preset="PHOSIS"] { /* --- Marca --- */ --ui-primary: #1E5BD8; /* --blue de la muestra */ --ui-primary-rgb: 30, 91, 216; --ui-primary-hover: #1747AE; /* --blue-2 */ --ui-primary-active: #1747AE; --ui-primary-light: #EAF1FF; /* fondo de iconos y superficies suaves */ --ui-primary-muted: #3FA9F5; /* --sky */ --ui-primary-subtle: #CFE0FA; /* borde de notas */ --ui-primary-border: #CFE0FA; --ui-primary-disabled: #8FD3FF; /* --glow */ /* --- Paleta de marca adicional --- */ --ui-navy: #14275A; --ui-night: #0A1736; --ui-sky: #3FA9F5; --ui-glow: #8FD3FF; --ui-grad: linear-gradient(135deg, #14275A 0%, #1E5BD8 55%, #3FA9F5 100%); /* --- Superficies --- */ --ui-bg-app: #FFFFFF; --ui-bg-surface: #FFFFFF; --ui-bg-muted: #F1F5FA; /* --surface-2 */ --ui-bg-subtle: #F5F8FC; /* --cream */ /* --- Texto --- */ --ui-text: #0B1630; /* --ink */ --ui-text-secondary: #26314A; /* --ink-2 */ --ui-text-muted: #5A6378; /* --muted */ --ui-text-inverse: #FFFFFF; --ui-text-link: #1747AE; /* --blue-2 */ --ui-text-link-hover: #14275A; /* --navy */ /* --- Bordes --- */ --ui-border: #E1E8F2; /* --line */ --ui-border-subtle: #E1E8F2; --ui-border-strong: #CDD8E8; /* --line-2 */ /* --- Sombras (tinta #0B1630) --- */ --ui-shadow-xs: 0 1px 2px rgba(11, 22, 48, .05); --ui-shadow-sm: 0 1px 2px rgba(11, 22, 48, .05), 0 1px 1px rgba(11, 22, 48, .03); --ui-shadow-card: 0 10px 30px -12px rgba(11, 22, 48, .18), 0 2px 6px rgba(11, 22, 48, .05); --ui-shadow-lg: 0 24px 60px -20px rgba(11, 22, 48, .28); --ui-shadow-focus: 0 0 0 4px rgba(30, 91, 216, .16); --ui-shadow-focus-ring: 0 0 0 4px rgba(30, 91, 216, .16); --ui-shadow-focus-thin: 0 0 0 4px rgba(30, 91, 216, .16); /* --- Radios: controles 10px, tarjetas 16px, botones pildora --- */ --ui-radius-xs: 10px; --ui-radius-sm: 10px; --ui-radius: 16px; --ui-radius-lg: 22px; --ui-btn-radius: 10px; /* --- Tipografia --- */ --ui-font-sans: "PHOSIS Mulish", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ui-font-heading: "PHOSIS Manrope", "PHOSIS Mulish", ui-sans-serif, system-ui, sans-serif; /* --- DataTables: seleccion en azul de marca --- */ --ui-dt-row-selected: 30, 91, 216; /* --- Bootstrap: variables base --- */ --bs-primary: #1E5BD8; --bs-primary-rgb: 30, 91, 216; --bs-primary-light: #EAF1FF; --bs-link-color: #1747AE; --bs-link-color-rgb: 23, 71, 174; --bs-link-hover-color: #14275A; --bs-link-hover-color-rgb: 20, 39, 90; --bs-body-bg: #FFFFFF; --bs-body-color: #0B1630; --bs-secondary-color: #5A6378; --bs-border-color: #E1E8F2; --bs-body-font-family: var(--ui-font-sans); --bs-font-sans-serif: var(--ui-font-sans); --bs-border-radius: var(--ui-radius-xs); --bs-border-radius-lg: var(--ui-radius); } /* ========================================================================== * 3. APLICACION * Titulares en Manrope. Botones primarios con los colores de la muestra. * Bootstrap compila --bs-btn-* literales en .btn-primary; hay que * sobrescribirlos por clase, no solo con --bs-primary. * ========================================================================== */ body[data-pc-preset="PHOSIS"] h1, body[data-pc-preset="PHOSIS"] h2, body[data-pc-preset="PHOSIS"] h3, body[data-pc-preset="PHOSIS"] h4, body[data-pc-preset="PHOSIS"] .ui-h1, body[data-pc-preset="PHOSIS"] .ui-h2, body[data-pc-preset="PHOSIS"] .ui-h3, body[data-pc-preset="PHOSIS"] .ui-h4 { font-family: var(--ui-font-heading); letter-spacing: -0.015em; } body[data-pc-preset="PHOSIS"] .btn-primary { --bs-btn-color: #FFFFFF; --bs-btn-bg: var(--ui-primary); --bs-btn-border-color: var(--ui-primary); --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: var(--ui-primary-hover); --bs-btn-hover-border-color: var(--ui-primary-hover); --bs-btn-focus-shadow-rgb: 30, 91, 216; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: var(--ui-primary-active); --bs-btn-active-border-color: var(--ui-primary-active); --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: var(--ui-primary); --bs-btn-disabled-border-color: var(--ui-primary); } body[data-pc-preset="PHOSIS"] .btn-outline-primary { --bs-btn-color: var(--ui-primary); --bs-btn-border-color: var(--ui-primary); --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: var(--ui-primary); --bs-btn-hover-border-color: var(--ui-primary); --bs-btn-active-bg: var(--ui-primary-hover); --bs-btn-active-border-color: var(--ui-primary-hover); --bs-btn-focus-shadow-rgb: 30, 91, 216; }