/* Copyright (c) 2026, SFY / Plexus Tech y contribuidores */ /* ============================================================================ * MARCA CORPORATIVA BSC AI FACTORY EN EL DESK Y EL LOGIN DE FRAPPE (§ 5 / UX) * ---------------------------------------------------------------------------- * Aplica la guía "Manual BSC_Imatge Corporativa" a la UI interna de Frappe v15 * (el Desk /app y la pantalla de login /login). NO toca el portal Vue, que ya * está brandeado por su cuenta (ver portal/src/themes/bsc.css y tokens/*.json). * * MECANISMO: Frappe v15 expone su sistema de diseño como CUSTOM PROPERTIES CSS * en :root (paleta "espresso"). Redefinir esas variables en una hoja cargada * DESPUÉS de los bundles de Frappe (vía app_include_css / web_include_css) las * sobre-escribe en cascada sin tocar el core. Variables reales verificadas en * la versión instalada (apps/frappe/frappe/public/scss): * --primary color maestro de marca (Bootstrap; def. #171717). * Lo consumen: color activo del sidebar, subrayado de * pestaña activa (form), enlaces .btn-link, barra de * progreso, checkbox, calendario, enlaces de report... * --primary-color acento en bordes (notification, theme_switcher). * --brand-color = var(--primary) (se hereda solo, no hay que fijarlo). * --btn-primary fondo del botón primario (.btn-primary). El texto es * var(--neutral) -> blanco en claro / negro en oscuro. * --font-stack familia tipográfica de TODO el Desk y el login * (common/global.scss, desk/global.scss, website/base). * --focus-default sombra de foco de teclado (botones, checkbox, grid). * * PALETA (Manual BSC): * Navy #002369 (Pantone 280) -> primario/base. Blanco encima = 14.5:1 (AAA). * Azul #006EC7 (P300) -> acento. Blanco encima = 5.2:1 (AA). * Azul #51A8FF (P279) -> acento claro (marca en tema oscuro). * Naranja#E27000 -> SOLO decorativo. No cumple AA como texto, * así que NO se usa para texto ni botones. * Desde UI-DESIGN-001 sí pinta la barra de la * cabecera del escritorio y el marcador del menú * lateral: sobre blanco da 3.21:1, que falla el * 4.5:1 de un texto y cumple el 3:1 de un * componente no textual (WCAG 1.4.11). * * CONTRASTE AA: en claro el primario es navy (texto blanco encima, 14.5:1); en * oscuro el primario pasa a #51A8FF (texto/enlaces sobre gray-900 = 7.2:1, y el * botón primario invierte a fondo claro + texto negro = 8.4:1), respetando el * patrón de inversión propio de Frappe. * * TEMA OSCURO: Frappe marca el modo oscuro con el atributo data-theme="dark" en * (theme_switcher.js: document.documentElement.setAttribute("data-theme", * ...)). El tema claro es :root / [data-theme="light"]. Por eso los overrides de * oscuro se repiten bajo [data-theme="dark"], que gana en especificidad. * ============================================================================ */ /* --- Tema claro (por defecto) --------------------------------------------- */ :root, :root[data-theme="light"] { /* Tipografía web corporativa (Manual BSC: "textos web" = Verdana). Espejo de * portal/tokens/typography.json y portal/src/style.css. Public Sans Variable * como fallback autoalojado (sin fuentes por CDN); luego sans-serif de sistema. * !important: login.bundle.css redefine :root{--font-stack} DESPUÉS de esta hoja * (orden de carga fijado por Frappe); un !important en la custom property gana a * esa redefinición posterior sin tener que controlar el orden de los bundles. */ --font-stack: Verdana, "Public Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; /* Color maestro de marca -> navy corporativo (Pantone 280). */ --primary: #002369 !important; --primary-color: #002369 !important; /* Botón primario: fondo navy. El texto es var(--neutral) = blanco => 14.5:1. * !important por el mismo motivo que --font-stack (login.bundle pisa --btn-primary * después). NO afecta al :active del Desk, que fija el fondo por otra vía. */ --btn-primary: #002369 !important; /* Foco de teclado visible con color de marca (acento P300 sobre fondos claros). */ --focus-default: 0px 0px 0px 2px #006ec7 !important; } /* --- Tema oscuro ----------------------------------------------------------- */ :root[data-theme="dark"] { /* En oscuro el primario navy no contrasta contra gray-900; se usa el acento * claro de marca (P279) para enlaces, sidebar activo, subrayados, etc. * !important por el mismo motivo que en el bloque claro (bundles posteriores). */ --primary: #51a8ff !important; --primary-color: #51a8ff !important; /* Botón primario en oscuro: Frappe invierte (fondo claro + texto var(--neutral) * = negro). #51A8FF con texto negro = 8.4:1. On-brand (acento claro P279). */ --btn-primary: #51a8ff !important; /* Foco de teclado más luminoso para que resalte sobre superficies oscuras. */ --focus-default: 0px 0px 0px 2px #51a8ff !important; } /* ---------------------------------------------------------------------------- * Refuerzos puntuales de identidad (no dependen solo de la cascada de vars). * -------------------------------------------------------------------------- */ /* Línea de marca en la navbar del Desk: identidad sin tocar el fondo (mantiene * el contraste de los iconos). var(--primary) => navy en claro, P279 en oscuro. */ .navbar { border-bottom: 2px solid var(--primary); } /* Foco de teclado accesible también en elementos que no usan --focus-default * (enlaces y controles nativos): contorno visible de color de marca. Complementa * (no sustituye) el box-shadow de Frappe en botones/checkbox. */ a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* ---------------------------------------------------------------------------- * BOTÓN PRIMARIO EN WEB/LOGIN (.btn-primary) * ---------------------------------------------------------------------------- * IMPORTANTE: en el Desk el botón primario es ".btn.btn-primary" y sí lee * var(--btn-primary), así que la variable de arriba ya lo tiñe. Pero en las * páginas WEB (incluido /login) ".btn-primary" viene del bundle de website con * el mixin button-variant de Bootstrap, que COMPILA el color $primary (#171717) * a pelo (no usa la custom property). Verificado en el render: la regla efectiva * es `.btn-primary{background:#171717}` desde website.bundle.css. Por eso hay que * teñirlo explícitamente aquí. * * Se usa var(--primary) (navy en claro, P279 en oscuro) para el fondo y * var(--neutral) (blanco en claro, negro en oscuro) para el texto, replicando el * patrón de inversión de Frappe: navy + blanco (14.5:1) en claro; #51A8FF + negro * (8.4:1) en oscuro. Ambos AA. El :active del Desk lleva !important propio y se * respeta (feedback nativo, sigue siendo legible). * -------------------------------------------------------------------------- */ .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background-color: var(--primary); border-color: var(--primary); color: var(--neutral); } /* Feedback de hover sin cambiar de tono (evita usar el naranja decorativo o * mezclar hues): se aclara ligeramente el navy/azul de marca. */ .btn-primary:hover { filter: brightness(1.12); } /* Enlace de "regístrate / olvidé contraseña" del login: Frappe lo pinta con * var(--primary) (ya navy). Subrayado en hover para affordance de enlace. */ .for-login .sign-up-message a:hover, .for-forgot .sign-up-message a:hover, .for-signup .sign-up-message a:hover { text-decoration: underline; } /* ============================================================================ * DISEÑO DE LOS MENÚS DE ROL (UI-DESIGN-001) * * BSC mandó una maqueta el 13-sep-2026 y Kos confirmó el 14 dos cosas: que se usa * SU naranja corporativo (#E27000) y no el de la maqueta (#FD6D2D), y que acepta * los tres límites de los componentes estándar que le planteamos —el título deja * de quedar fijo al hacer scroll, los iconos van atados al acceso, y las barras * admiten un solo color—. * * TODO este bloque va acotado a `body[data-route^="Workspaces"]`: lo de aquí es el * escritorio, y no puede filtrarse a listas ni a formularios. * * SOBRE EL NARANJA. La cabecera del fichero dice que es «solo decorativo» y sigue * siéndolo: aquí pinta la barra del hero y el marcador del menú lateral, nunca * texto ni el fondo de un botón. Medido: #E27000 sobre blanco da 3.21:1 — falla el * 4.5:1 que exige un texto y cumple el 3:1 de un componente no textual (WCAG * 1.4.11), que es justo la categoría de una barra y de un marcador. * ========================================================================= */ :root { --bsc-naranja: #e27000; --bsc-banda: #eef5fd; --bsc-hero-bg: #f7fafe; --bsc-linea: #dce6f4; --bsc-lienzo: #f7f8fa; --bsc-sub: #55627a; } :root[data-theme="dark"] { --bsc-naranja: #e27000; --bsc-banda: #1c2334; --bsc-hero-bg: #171e2b; --bsc-linea: #2b3547; --bsc-lienzo: #12161f; --bsc-sub: #9aa6bd; } /* Lienzo del escritorio: las tarjetas se separan del fondo. */ body[data-route^="Workspaces"] .layout-main-section { background: var(--bsc-lienzo); } /* --- Cabecera destacada (nombre del menú + descripción) -------------------- */ body[data-route^="Workspaces"] .bsc-hero { display: block; background: var(--bsc-hero-bg); border: 1px solid var(--bsc-linea); border-left: 5px solid var(--bsc-naranja); border-radius: 10px; padding: 18px 22px; } body[data-route^="Workspaces"] .bsc-hero-title { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--primary); } body[data-route^="Workspaces"] .bsc-hero-sub { display: block; margin-top: 4px; font-size: 14px; color: var(--bsc-sub); } /* El título estándar se esconde SOLO en las páginas que llevan cabecera propia, y * con `visibility`, no con `display:none` sobre `.page-head`: ahí viven el botón de * la barra lateral y el «Guardar» del modo edición. */ body[data-route^="Workspaces"]:has(.bsc-hero) .page-head .title-area { visibility: hidden; } /* --- Bandas de sección ----------------------------------------------------- */ body[data-route^="Workspaces"] .ce-header:not(:has(.bsc-hero)) { background: var(--bsc-banda); border-radius: 8px; padding: 10px 16px !important; margin: 14px 0 2px !important; } body[data-route^="Workspaces"] .ce-header .h4 { color: var(--primary); font-size: 16px !important; } /* --- Tarjetas de acceso ---------------------------------------------------- */ body[data-route^="Workspaces"] .widget.shortcut-widget-box { background: var(--card-bg); border: 1px solid var(--bsc-linea); border-radius: 10px; padding: 12px 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } body[data-route^="Workspaces"] .widget.shortcut-widget-box:hover { border-color: #006ec7; box-shadow: 0 2px 6px rgba(0, 35, 105, 0.1); transform: translateY(-1px); } /* Sin esto, una etiqueta larga empuja al contador fuera de la tarjeta. */ body[data-route^="Workspaces"] .widget.shortcut-widget-box .widget-head { width: 100%; } body[data-route^="Workspaces"] .widget.shortcut-widget-box .widget-title > .ellipsis { min-width: 0; } body[data-route^="Workspaces"] .widget.shortcut-widget-box .widget-control { flex: 0 0 auto; } /* Quien no quiera animación no la tiene (y no es una preferencia menor: hay gente a * la que el movimiento le sienta mal). */ @media (prefers-reduced-motion: reduce) { body[data-route^="Workspaces"] .widget.shortcut-widget-box { transition: none; } body[data-route^="Workspaces"] .widget.shortcut-widget-box:hover { transform: none; } } /* --- Menú lateral: qué estoy mirando --------------------------------------- */ body[data-route^="Workspaces"] .standard-sidebar-item.selected { position: relative; } body[data-route^="Workspaces"] .standard-sidebar-item.selected::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 0 3px 3px 0; background: var(--bsc-naranja); } body[data-route^="Workspaces"] .standard-sidebar-item.selected .sidebar-item-label { font-weight: 600; color: var(--primary); } /* --- Pantallas estrechas --------------------------------------------------- */ @media (max-width: 768px) { body[data-route^="Workspaces"] .bsc-hero { padding: 14px 16px; } body[data-route^="Workspaces"] .bsc-hero-title { font-size: 21px; } }