/* Template Name: Velzon - Admin & Dashboard Template Author: Themesbrand Website: https://themesbrand.com/ Contact: support@themesbrand.com File: Custom Css File */ /* ========================================================================= TRONOX - capa de marca sobre Velzon. Unico punto de extension permitido (PLAN DE ARRANQUE seccion 3, regla 2). app.min.css y bootstrap.min.css NO se tocan. ========================================================================= */ /* ========================================================================= 0. TOKENS DE MARCA TRONOX Fuente: Prototipo -> assets/css/tronox.css. IMPORTANTE (correccion): este bloque :root NO es la marca TRONOX. Es la paleta base de METRONIC que el prototipo usa como punto de partida y que despues REVISTE con una de sus 5 paletas mediante el atributo . En una pasada anterior se tomaron estos valores (primario #009ef7) por los de marca; el prototipo arranca en "classic-light" (primario #0c478a). El tema por defecto se fija ahora en Components/App.razor y en wwwroot/js/tronox-theme.js. Se conservan los nombres --kt-* del prototipo para poder copiar sus bloques de tema TAL CUAL (ver seccion 0.a). La capa --tx-* es la que consumen los tres destinos (Velzon --vz-*, hoja heredada app.css y las clases tronox-*) y se limita a DERIVAR de --kt-*: cambiar de tema recolorea todo el shell sin tocar una sola regla mas abajo. ========================================================================= */ :root { /* --- Base Metronic 8 Light (identica al :root de tronox.css) --- */ --kt-app-bg: #f5f8fa; --kt-sidebar-bg: #ffffff; --kt-card-bg: #ffffff; --kt-header-bg: #ffffff; --kt-input-bg: #f5f8fa; --kt-border-color: #e4e6ef; --kt-border-dashed: #b5b5c3; --kt-hover-bg: #fafbfc; --kt-text-dark: #181c32; --kt-text-gray-900: #181c32; --kt-text-gray-800: #3f4254; --kt-text-gray-700: #5e6278; --kt-text-gray-600: #7e8299; --kt-text-gray-500: #a1a5b7; --kt-text-gray-400: #b5b5c3; --kt-text-gray-300: #e4e6ef; --kt-text-muted: #a1a5b7; --kt-primary: #009ef7; --kt-primary-active: #0095e8; --kt-primary-light: #e8f4fd; --kt-success: #50cd89; --kt-success-active: #47be7d; --kt-success-light: #e8fff3; --kt-warning: #ffc700; --kt-warning-active: #f1bc00; --kt-warning-light: #fff8dd; --kt-danger: #f1416c; --kt-danger-active: #d9214e; --kt-danger-light: #fff5f8; --kt-info: #7239ea; --kt-info-active: #5014d0; --kt-info-light: #f8f5ff; --kt-menu-item-active-bg: #e8f4fd; --kt-menu-item-active-color: #009ef7; --kt-menu-item-hover-color: #009ef7; --kt-border-radius: 0.625rem; --kt-border-radius-sm: 0.375rem; --kt-border-radius-lg: 0.85rem; /* Acento institucional del prototipo (lo reviste cada tema). */ --tx-navy: #0b1f3a; --tx-navy-2: #13294b; --tx-hero-grad: linear-gradient(120deg, #0b1f3a 0%, #13294b 55%, #1c3a63 100%); /* rgb() del primario para las rgba(): no se puede derivar de un hex en CSS, asi que cada tema lo declara aparte (seccion 0.a). */ --tx-primary-rgb: 0, 158, 247; /* --- Capa --tx-*: DERIVADA de --kt-*. No fijar hexadecimales aqui. --- */ --tx-primary: var(--kt-primary); --tx-primary-active: var(--kt-primary-active); --tx-primary-light: var(--kt-primary-light); --tx-app-bg: var(--kt-app-bg); --tx-sidebar-bg: var(--kt-sidebar-bg); --tx-card-bg: var(--kt-card-bg); --tx-header-bg: var(--kt-header-bg); --tx-input-bg: var(--kt-input-bg); --tx-hover-bg: var(--kt-hover-bg); --tx-border: var(--kt-border-color); --tx-border-dashed: var(--kt-border-dashed); --tx-text-900: var(--kt-text-gray-900); --tx-text-800: var(--kt-text-gray-800); --tx-text-700: var(--kt-text-gray-700); --tx-text-600: var(--kt-text-gray-600); --tx-text-500: var(--kt-text-gray-500); --tx-text-400: var(--kt-text-gray-400); --tx-text-300: var(--kt-text-gray-300); --tx-text-muted: var(--kt-text-muted); --tx-success: var(--kt-success); --tx-success-active: var(--kt-success-active); --tx-success-light: var(--kt-success-light); --tx-warning: var(--kt-warning); --tx-warning-active: var(--kt-warning-active); --tx-warning-light: var(--kt-warning-light); --tx-danger: var(--kt-danger); --tx-danger-active: var(--kt-danger-active); --tx-danger-light: var(--kt-danger-light); --tx-info: var(--kt-info); --tx-info-active: var(--kt-info-active); --tx-info-light: var(--kt-info-light); --tx-menu-active-bg: var(--kt-menu-item-active-bg); --tx-menu-active-color: var(--kt-menu-item-active-color); --tx-radius: var(--kt-border-radius); --tx-radius-sm: var(--kt-border-radius-sm); --tx-radius-lg: var(--kt-border-radius-lg); /* --- Metricas del shell --- */ --tx-sidebar-width: 280px; --tx-topbar-height: 65px; /* --- Tipografia --- Inter, con pila de respaldo del sistema. Ver seccion 0.b sobre por que NO se carga desde un CDN. */ --tx-font-sans: "Inter", "Inter var", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* Alias historicos del panel de login (seccion 2). */ --tronox-blue-900: var(--tx-navy); --tronox-blue-700: var(--tx-navy-2); } /* ========================================================================= 0.a LOS 5 TEMAS TRONOX Copiados TAL CUAL de Prototipo/assets/css/tronox.css (lineas ~665-721). Se activan con (wwwroot/js/tronox-theme.js); los oscuros anaden ademas data-bs-theme="dark" para Bootstrap. "metronic" es el :root base de arriba y se activa QUITANDO el atributo. El tema POR DEFECTO es classic-light (no metronic). ========================================================================= */ /* --- Opcion 3: Tronox Classic Light (azul corporativo) --- */ html[data-tronox-theme="classic-light"] { --kt-primary: #0c478a; --kt-primary-active: #09376b; --kt-primary-light: #e7eef7; --kt-app-bg: #f4f7f9; --kt-input-bg: #eef2f6; --kt-border-color: #e2e8f0; --kt-hover-bg: #f6f9fb; --kt-text-dark: #0f1a26; --kt-text-gray-900: #0f1a26; --kt-menu-item-active-bg: #e7eef7; --kt-menu-item-active-color: #0c478a; --kt-menu-item-hover-color: #0c478a; --tx-navy: #0c478a; --tx-navy-2: #005ca9; --tx-hero-grad: linear-gradient(135deg, #0c478a 0%, #005ca9 100%); } /* --- Opcion 4: Tronox Fresh Light (teal tecnologico) --- */ html[data-tronox-theme="fresh-light"] { --kt-primary: #00a89f; --kt-primary-active: #008f87; --kt-primary-light: #e1f4f2; --kt-app-bg: #f2f8f6; --kt-input-bg: #edf5f3; --kt-border-color: #e2eeea; --kt-hover-bg: #f5faf8; --kt-text-dark: #11201b; --kt-text-gray-900: #11201b; --kt-success: #16c79a; --kt-success-active: #0fa880; --kt-success-light: #e2f7f0; --kt-menu-item-active-bg: #e1f4f2; --kt-menu-item-active-color: #00a89f; --kt-menu-item-hover-color: #00a89f; --tx-navy: #0c478a; --tx-navy-2: #00a89f; --tx-hero-grad: linear-gradient(135deg, #00a89f 0%, #16c79a 100%); } /* --- Opcion 1: Tronox Deep Dark (oscuro corporativo) --- */ html[data-tronox-theme="deep-dark"] { --kt-app-bg: #070e17; --kt-sidebar-bg: #0f1a26; --kt-card-bg: #0f1a26; --kt-header-bg: #0b131d; --kt-input-bg: #16222f; --kt-border-color: #1c2e41; --kt-border-dashed: #33485e; --kt-hover-bg: #16222f; --kt-text-dark: #f1f5f9; --kt-text-gray-900: #f1f5f9; --kt-text-gray-800: #e2e8f0; --kt-text-gray-700: #cbd5e1; --kt-text-gray-600: #94a3b8; --kt-text-gray-500: #7b8a9e; --kt-text-gray-400: #5b6b7e; --kt-text-gray-300: #334155; --kt-text-muted: #7b8a9e; --kt-primary: #16c79a; --kt-primary-active: #0fa880; --kt-primary-light: rgba(22,199,154,.14); --kt-success: #16c79a; --kt-success-active: #0fa880; --kt-success-light: rgba(22,199,154,.14); --kt-warning: #ffc700; --kt-warning-light: rgba(255,199,0,.13); --kt-danger: #f1416c; --kt-danger-light: rgba(241,65,108,.14); --kt-info: #3b9dff; --kt-info-light: rgba(59,157,255,.14); --kt-menu-item-active-bg: rgba(22,199,154,.14); --kt-menu-item-active-color: #16c79a; --kt-menu-item-hover-color: #16c79a; --tx-navy: #0c478a; --tx-navy-2: #16c79a; --tx-hero-grad: linear-gradient(135deg, #0c478a 0%, #16c79a 100%); } /* --- Opcion 2: Tronox Aurora Dark (teal oscuro) --- */ html[data-tronox-theme="aurora-dark"] { --kt-app-bg: #050f0e; --kt-sidebar-bg: #0c1b19; --kt-card-bg: #0c1b19; --kt-header-bg: #081413; --kt-input-bg: #10211f; --kt-border-color: #16332f; --kt-border-dashed: #2a4f4a; --kt-hover-bg: #10211f; --kt-text-dark: #ecfdf5; --kt-text-gray-900: #ecfdf5; --kt-text-gray-800: #d5e5e3; --kt-text-gray-700: #c0d6d3; --kt-text-gray-600: #8fa9a5; --kt-text-gray-500: #7a938f; --kt-text-gray-400: #5d736f; --kt-text-gray-300: #2f4541; --kt-text-muted: #7a938f; --kt-primary: #00a89f; --kt-primary-active: #16c79a; --kt-primary-light: rgba(0,168,159,.16); --kt-success: #16c79a; --kt-success-active: #0fa880; --kt-success-light: rgba(22,199,154,.16); --kt-warning: #ffc700; --kt-warning-light: rgba(255,199,0,.13); --kt-danger: #f1416c; --kt-danger-light: rgba(241,65,108,.14); --kt-info: #3b9dff; --kt-info-light: rgba(59,157,255,.14); --kt-menu-item-active-bg: rgba(0,168,159,.16); --kt-menu-item-active-color: #00a89f; --kt-menu-item-hover-color: #00a89f; --tx-navy: #005ca9; --tx-navy-2: #00a89f; --tx-hero-grad: linear-gradient(135deg, #005ca9 0%, #00a89f 100%); } /* --- Complemento propio: el canal rgb del primario de cada tema. Lo necesitan las rgba() de foco, glow y sombras; CSS no sabe extraer los componentes de un hexadecimal guardado en una variable. --- */ html[data-tronox-theme="classic-light"] { --tx-primary-rgb: 12, 71, 138; } html[data-tronox-theme="fresh-light"] { --tx-primary-rgb: 0, 168, 159; } html[data-tronox-theme="deep-dark"] { --tx-primary-rgb: 22, 199, 154; } html[data-tronox-theme="aurora-dark"] { --tx-primary-rgb: 0, 168, 159; } /* --- Los temas oscuros: el "glass" del topbar y el tercer navy del login son literales claros heredados; hay que oscurecerlos. --- */ html[data-tronox-theme="deep-dark"], html[data-tronox-theme="aurora-dark"] { color-scheme: dark; --glass: rgba(15, 26, 38, .82); --sh-sm: 0 1px 2px rgba(0, 0, 0, .35); --sh-md: 0 0 20px rgba(0, 0, 0, .35); --sh-lg: 0 18px 50px -12px rgba(0, 0, 0, .55); } html[data-tronox-theme="deep-dark"] .ws-tenant, html[data-tronox-theme="aurora-dark"] .ws-tenant { --glass: var(--tx-header-bg); } /* ------------------------------------------------------------------------- 0.b TIPOGRAFIA - decision: NO se enlaza Google Fonts. El prototipo carga Inter desde fonts.googleapis.com. Este sistema es para entidades publicas y se despliega en redes que pueden estar cerradas a Internet; ademas una peticion a un tercero en cada carga filtra IP y User-Agent de funcionarios (dato personal). Un CDN externo es por tanto un punto de fallo y un riesgo de privacidad. Se declara Inter como PRIMERA opcion (se usa si esta instalada en el equipo o cuando se agreguen los .woff2 auto-alojados) y detras una pila del sistema de metrica muy proxima. Para auto-alojar basta con dejar los ficheros en wwwroot/velzon/fonts/ y anadir aqui los @font-face; no cambia nada mas. ------------------------------------------------------------------------- */ html, body { font-family: var(--tx-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Velzon fija los titulares con :is(h1..h6){font-family:"Open Sans"} y ofrece .ff-secondary con la misma familia: heredar de body no basta. */ :is(.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6), .ff-secondary, .btn, .form-control, .form-select, .table { font-family: var(--tx-font-sans); } /* ------------------------------------------------------------------------- 0.c PUENTE A VELZON (--vz-*) ------------------------------------------------------------------------- */ :root { --vz-primary: var(--tx-primary); --vz-primary-rgb: var(--tx-primary-rgb); --vz-primary-text-emphasis: var(--tx-primary-active); --vz-primary-bg-subtle: var(--tx-primary-light); --vz-primary-border-subtle: #b8e0fb; --vz-success: var(--tx-success); --vz-warning: var(--tx-warning); --vz-danger: var(--tx-danger); --vz-info: var(--tx-info); --vz-link-color: var(--tx-primary); --vz-link-hover-color: var(--tx-primary-active); --vz-body-bg: var(--tx-app-bg); --vz-body-color: var(--tx-text-700); --vz-border-color: var(--tx-border); --vz-secondary-color: var(--tx-text-muted); --vz-light: var(--tx-input-bg); --vz-font-sans-serif: var(--tx-font-sans); --vz-body-font-family: var(--tx-font-sans); --vz-border-radius: var(--tx-radius); --vz-input-border-custom: var(--tx-border); --vz-input-focus-border: var(--tx-primary); --vz-input-bg: var(--tx-input-bg); } /* Bootstrap 5.3 compila .btn-primary con hexadecimales fijos en sus propias variables locales (--vz-btn-*): reasignar --vz-primary no basta. */ .btn-primary { --vz-btn-bg: var(--tx-primary); --vz-btn-border-color: var(--tx-primary); --vz-btn-hover-bg: var(--tx-primary-active); --vz-btn-hover-border-color:var(--tx-primary-active); --vz-btn-active-bg: var(--tx-primary-active); --vz-btn-active-border-color: var(--tx-primary-active); --vz-btn-disabled-bg: var(--tx-primary); --vz-btn-disabled-border-color: var(--tx-primary); --vz-btn-focus-shadow-rgb: var(--tx-primary-rgb); } .btn-outline-primary { --vz-btn-color: var(--tx-primary); --vz-btn-border-color: var(--tx-primary); --vz-btn-hover-bg: var(--tx-primary); --vz-btn-hover-border-color:var(--tx-primary); --vz-btn-active-bg: var(--tx-primary); --vz-btn-active-border-color: var(--tx-primary); } /* ------------------------------------------------------------------------- 0.d PUENTE A LA HOJA HEREDADA (wwwroot/app.css) app.css NO se puede retirar: contiene TODO el layout del shell (.tronox-shell, .tronox-sidebar, .tronox-topbar, .tronox-content, .tronox-nav-*, .tronox-acc-*). Lo que si se puede es apoderarse de sus tokens: se carga ANTES que custom.css, asi que redefinir aqui sus variables :root reviste todo el shell sin tocarla. ------------------------------------------------------------------------- */ :root { /* Set 1 de app.css (originalmente oklch violeta). */ --background: var(--tx-app-bg); --foreground: var(--tx-text-900); --card: var(--tx-card-bg); --primary: var(--tx-primary); --primary-foreground: #ffffff; --primary-soft: var(--tx-primary-light); --muted: var(--tx-input-bg); --muted-foreground: var(--tx-text-600); --accent-foreground: var(--tx-primary); --gold: var(--tx-warning); --gold-foreground: var(--tx-text-900); --destructive: var(--tx-danger); --warning: var(--tx-warning); --warning-foreground: var(--tx-text-900); --success: var(--tx-success); --border: var(--tx-border); --sidebar: var(--tx-sidebar-bg); --sidebar-border: var(--tx-border); --radius: var(--tx-radius-lg); --shadow-soft: 0 1px 2px rgba(24, 28, 50, .04), 0 1px 3px rgba(24, 28, 50, .05); --shadow-card: 0 0 20px rgba(24, 28, 50, .03); --gradient-violet: linear-gradient(135deg, var(--tx-primary) 0%, var(--tx-primary-active) 100%); /* Set 2 de app.css (originalmente la paleta negra/gris del backbone). */ --bg: var(--tx-app-bg); --surface: var(--tx-card-bg); --surface-2: var(--tx-app-bg); --surface-3: var(--tx-input-bg); --ink: var(--tx-text-900); --ink-2: var(--tx-text-700); --ink-3: var(--tx-text-500); --line: var(--tx-border); --line-2: var(--tx-text-400); --brand: var(--tx-primary); --brand-2: var(--tx-primary-active); --brand-soft:var(--tx-primary-light); --on-brand: #ffffff; --glow: rgba(var(--tx-primary-rgb), .18); --t-blue: var(--tx-primary); --t-blue-bg: var(--tx-primary-light); --t-rose: var(--tx-danger); --t-rose-bg: var(--tx-danger-light); --t-green: var(--tx-success); --t-green-bg: var(--tx-success-light); --t-amber: #c79000; --t-amber-bg: var(--tx-warning-light); --t-violet: var(--tx-info); --t-violet-bg: var(--tx-info-light); --t-slate: var(--tx-text-600); --t-slate-bg: var(--tx-input-bg); --ok: var(--tx-success); --warn: #c79000; --danger: var(--tx-danger); --glass: rgba(255, 255, 255, .82); --sh-sm: 0 1px 2px rgba(24, 28, 50, .05); --sh-md: 0 0 20px rgba(24, 28, 50, .04); --sh-lg: 0 18px 50px -12px rgba(24, 28, 50, .18); --rad: var(--tx-radius-lg); } /* .ws-tenant vuelve a declarar el set 2 en app.css; hay que repetirlo con la misma especificidad o el workspace del tenant recupera el negro. */ .ws-tenant { --brand: var(--tx-primary); --brand-2: var(--tx-primary-active); --brand-soft:var(--tx-primary-light); --on-brand: #ffffff; --ink: var(--tx-text-900); --ink-2: var(--tx-text-700); --ink-3: var(--tx-text-500); --line: var(--tx-border); --line-2: var(--tx-text-400); --surface: var(--tx-card-bg); --surface-2: var(--tx-app-bg); --surface-3: var(--tx-input-bg); --glow: rgba(var(--tx-primary-rgb), .18); --glass: rgba(255, 255, 255, .82); } /* app.css pinta el enlace del workspace con --ink (texto casi negro). */ .ws-tenant a, .ws-tenant .btn-link { color: var(--tx-primary); } /* ========================================================================= 0.e SHELL - ajustes de forma que las variables no cubren (app.css los deja escritos como literales). ========================================================================= */ /* Fondo real de la aplicacion: app.css lo ata a --background, ya reasignado, pero el contenedor del shell es blanco por herencia del backbone. */ body { background-color: var(--tx-app-bg); color: var(--tx-text-700); } /* --- Barra lateral: 280px como el prototipo (app.css deja 268 / 272). --- */ .tronox-sidebar, .ws-tenant .tronox-sidebar { width: var(--tx-sidebar-width); background: var(--tx-sidebar-bg); border-right: 1px solid var(--tx-border); } /* --- Barra superior: 65px, opaca blanca como el prototipo. --- */ .tronox-topbar, .ws-tenant .tronox-topbar { height: var(--tx-topbar-height); background: var(--tx-header-bg); border-bottom: 1px solid var(--tx-border); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 4px rgba(24, 28, 50, .04); } /* --- Logo del sidebar. --- */ .tronox-logo { background: var(--tx-hero-grad); border-radius: var(--tx-radius); } .tronox-brand-name span { color: var(--tx-primary); } .tronox-brand, .tronox-user { border-color: var(--tx-border); } /* Tile del tenant: en el prototipo la identidad es azul, no negra. */ .tronox-tenant-tile { background: var(--tx-primary); color: #fff; border-radius: var(--tx-radius); } .tronox-ws-row:hover { background: var(--tx-input-bg); } /* --- Buscador del sidebar. --- */ .tronox-search { background: var(--tx-input-bg); border-color: var(--tx-border); border-radius: var(--tx-radius); } /* ========================================================================= 0.f MENU LATERAL - item activo del prototipo: fondo #e8f4fd + texto #009ef7 + guia izquierda. app.css los pinta en gris (--surface-3 / --ink); aqui mandan los tokens. ========================================================================= */ .tronox-nav-link, .tronox-acc-item, .tronox-acc-sub > summary, .tronox-acc > summary { border-radius: var(--tx-radius); color: var(--tx-text-700); } .tronox-nav-link:hover, .tronox-acc-item:hover, .tronox-acc > summary:hover, .tronox-acc-sub > summary:hover { background: var(--tx-primary-light); color: var(--tx-primary); } .tronox-nav-link.active, .tronox-acc-item.active { position: relative; background: var(--tx-menu-active-bg); color: var(--tx-menu-active-color); font-weight: 600; } .tronox-nav-link.active svg, .tronox-acc-item.active svg { color: var(--tx-menu-active-color); opacity: 1; } /* Guia vertical del item activo (prototipo: 3px, radio 0 3px 3px 0). */ .tronox-acc-item.active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--tx-primary); } .tronox-nav-link.active .tronox-nav-code, .tronox-acc-item.active .code { color: var(--tx-primary); opacity: .85; } /* Etiquetas de seccion del menu. */ .tronox-nav-label { color: var(--tx-text-400); font-size: 10px; letter-spacing: 1.3px; } .tronox-acc-body { border-left-color: var(--tx-border); } .tronox-acc-count, .tronox-acc-chev { color: var(--tx-text-500); } .tronox-nav-badge { background: var(--tx-primary-light); color: var(--tx-primary); } /* app.css vuelve a declarar el menu bajo .ws-tenant (especificidad 0,3,0), que gana a los selectores de arriba y devuelve el activo al gris del backbone (--surface-3 / --ink). Hay que repetir el bloque con el mismo alcance. */ .ws-tenant .tronox-nav-link { color: var(--tx-text-700); border-radius: var(--tx-radius); } .ws-tenant .tronox-nav-link svg { color: var(--tx-text-600); } .ws-tenant .tronox-nav-link:hover { background: var(--tx-primary-light); color: var(--tx-primary); } .ws-tenant .tronox-nav-link:hover svg { color: var(--tx-primary); } .ws-tenant .tronox-nav-link.active { background: var(--tx-menu-active-bg); color: var(--tx-menu-active-color); } .ws-tenant .tronox-nav-link.active svg { color: var(--tx-menu-active-color); } .ws-tenant .tronox-nav-link.active .tronox-nav-code { color: var(--tx-primary); } /* Contador del quick-link: era un pastilla negra. */ .ws-tenant .tronox-nav-badge { background: var(--tx-primary); color: #fff; } .ws-tenant .tronox-nav-label { color: var(--tx-text-400); } .ws-tenant .tronox-search { border-color: var(--tx-border); background: var(--tx-input-bg); } .ws-tenant .tronox-search:hover { border-color: var(--tx-primary); } .ws-tenant .tronox-avatar { background: var(--tx-primary); color: #fff; } /* ========================================================================= 0.g COMPONENTES DE CONTENIDO - /inicio y paginas de modulo. app.css los define con el radio y la sombra del backbone. ========================================================================= */ .tronox-content .card, .card { background: var(--tx-card-bg); border: 1px solid var(--tx-border); border-radius: var(--tx-radius-lg); box-shadow: 0 0 20px rgba(24, 28, 50, .03); } .module-icon, .coming-soon-icon { background: var(--tx-primary-light); color: var(--tx-primary); border-radius: var(--tx-radius); } .module-eyebrow span { color: var(--tx-primary); } .page-title { color: var(--tx-text-900); } .page-title span { color: var(--tx-primary); } .page-sub { color: var(--tx-text-600); } .coming-soon { border-color: var(--tx-border-dashed); background: var(--tx-card-bg); } .coming-soon p { color: var(--tx-text-600); } .text-muted { color: var(--tx-text-muted) !important; } /* Formularios: fondo gris del prototipo, foco azul. */ .form-control, .form-select { background-color: var(--tx-input-bg); border-color: var(--tx-border); border-radius: var(--tx-radius); color: var(--tx-text-900); } .form-control:focus, .form-select:focus, .ws-tenant .form-control:focus { background-color: var(--tx-card-bg); border-color: var(--tx-primary); box-shadow: 0 0 0 3px rgba(var(--tx-primary-rgb), .12); } .form-control::placeholder { color: var(--tx-text-400); } /* Botones: radio y peso del prototipo. El primario del workspace deja de ser negro (app.css .ws-tenant .btn-primary) y pasa al azul de marca. */ .btn { border-radius: var(--tx-radius); font-weight: 600; } .btn-primary, .ws-tenant .btn-primary { background: var(--tx-primary); border-color: var(--tx-primary); color: #fff; border-radius: var(--tx-radius); box-shadow: none; } .btn-primary:hover, .btn-primary:focus, .ws-tenant .btn-primary:hover, .ws-tenant .btn-primary:focus { background: var(--tx-primary-active); border-color: var(--tx-primary-active); color: #fff; opacity: 1; } /* Tablas con la cabecera del prototipo. */ .table th { background: var(--tx-input-bg); color: var(--tx-text-500); text-transform: uppercase; letter-spacing: .8px; font-size: 11px; font-weight: 700; border-bottom: 1px solid var(--tx-border); } .table td { color: var(--tx-text-700); border-color: var(--tx-border); } .table tbody tr:hover td { background: var(--tx-hover-bg); } /* ------------------------------------------------------------------------- 1. Aislamiento de la hoja heredada del backbone (wwwroot/app.css). app.css se carga despues de app.min.css para no alterar las pantallas que todavia no se migran a Velzon, pero pisa .card/.btn/.form-control/body. Dentro de las paginas de autenticacion devolvemos el control a Velzon. ------------------------------------------------------------------------- */ .auth-page-wrapper { font-family: var(--vz-body-font-family); color: var(--vz-body-color); } .auth-page-wrapper .card { border: var(--vz-card-border-width) solid var(--vz-card-border-color); border-radius: var(--vz-border-radius); box-shadow: none; } .auth-page-wrapper .btn { border-radius: var(--vz-border-radius); font-size: .8125rem; font-weight: 400; } /* app.css repinta .btn-primary / .btn-outline-secondary / .text-muted con la paleta violeta del backbone. Dentro del login mandan los tokens de Velzon. */ .auth-page-wrapper .btn-primary { background: var(--vz-primary); border-color: var(--vz-primary); color: #fff; } .auth-page-wrapper .btn-primary:hover, .auth-page-wrapper .btn-primary:focus { background: var(--vz-primary-text-emphasis); border-color: var(--vz-primary-text-emphasis); color: #fff; } .auth-page-wrapper .btn-outline-secondary { background: transparent; color: var(--vz-secondary); border-color: var(--vz-secondary); } .auth-page-wrapper .btn-outline-secondary:hover { background: var(--vz-secondary); color: #fff; } .auth-page-wrapper .text-muted { color: var(--vz-secondary-color) !important; } .auth-page-wrapper .form-control { border-radius: var(--vz-border-radius); border-color: var(--vz-input-border-custom); font-size: .875rem; } .auth-page-wrapper .form-control:focus { border-color: var(--tx-primary); box-shadow: 0 0 0 3px rgba(var(--tx-primary-rgb), .12); } .auth-page-wrapper .form-label { font-size: .8125rem; font-weight: 500; color: var(--vz-body-color); } /* Velzon trae .auth-bg-cover con un degradado fijo (azul #25a0e2 -> verde agua #00bd9d) escrito como literal, no como variable: reasignar --vz-primary no lo alcanza. El degradado sale ahora de --tx-hero-grad, que cada tema redefine: el panel del login se recolorea junto con el resto del shell. */ .auth-bg-cover { background: var(--tx-hero-grad); } /* ------------------------------------------------------------------------- 2. Panel de marca. Velzon apunta .auth-one-bg a assets/images/auth-one-bg.jpg, que es material licenciado y no se versiona en este repo. Se sustituye por el degradado azul institucional pedido en el PLAN seccion 3.1. ------------------------------------------------------------------------- */ .auth-one-bg { background-image: var(--tx-hero-grad); background-position: center; background-size: cover; } /* Textura sutil sobre el degradado, sin imagen externa. */ .auth-one-bg .bg-overlay { background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 42%); opacity: 1; } /* Marca del panel izquierdo. */ .tronox-auth-logo { display: inline-flex; align-items: center; gap: .625rem; color: #fff; text-decoration: none; } .tronox-auth-logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .5rem; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; } .tronox-auth-logo-word { font-size: 1.375rem; font-weight: 700; letter-spacing: .16em; line-height: 1; } .tronox-auth-kicker { font-size: .6875rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: rgba(255, 255, 255, .72); } /* Lista de caracteristicas del panel de marca. */ .tronox-auth-features { list-style: none; padding: 0; margin: 0; } .tronox-auth-features li { display: flex; align-items: flex-start; gap: .75rem; color: rgba(255, 255, 255, .88); font-size: .875rem; margin-bottom: 1rem; } .tronox-auth-features li:last-child { margin-bottom: 0; } .tronox-auth-features .tronox-auth-feature-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 1rem; } .tronox-auth-copyright { font-size: .75rem; color: rgba(255, 255, 255, .6); } /* ------------------------------------------------------------------------- 3. Chip de tenant del panel derecho. ------------------------------------------------------------------------- */ .tronox-tenant-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .3125rem .75rem; border-radius: 2rem; background: var(--vz-light); border: 1px solid var(--vz-border-color); color: var(--vz-body-color); font-size: .75rem; font-weight: 500; } .tronox-tenant-chip .tronox-tenant-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--vz-success); } /* Boton de certificado digital: hito futuro (RQ05 seccion B), se muestra deshabilitado tras el feature flag Features:FirmaCertificadoDigital. */ .auth-page-wrapper .btn.tronox-btn-cert:disabled { opacity: .55; cursor: not-allowed; } /* ------------------------------------------------------------------------- Logo TRONOX del panel izquierdo del login (PLAN seccion 3.1: "Logo TRONOX sobre degradado azul"). El activo es cuadrado 1080x1080 con la marca arriba y el logotipo en blanco debajo, asi que se fija SOLO el ancho y la altura queda en auto: nunca se deforma. La escala sigue el bloque de marca de auth-signin-cover.html (logo pequeno arriba a la izquierda, separado del contenido por el mismo mb-4 de la plantilla). ------------------------------------------------------------------------- */ .tronox-auth-logo-img { display: block; width: 7.5rem; height: auto; max-width: 100%; } @media (max-width: 991.98px) { .tronox-auth-logo-img { width: 6rem; } } /* ------------------------------------------------------------------------- Iconos del menu configurable. ADR-001 fija la clave de icono como clase Bootstrap Icons ("bi-*"), asi que MenuIcons ya no emite sino : las reglas de tamano que app.css aplicaba a "svg" no lo alcanzan y hay que dar la medida aqui. Se replican los 17px del icono de seccion para que el cambio de SVG a fuente no altere el ritmo vertical del sidebar. ------------------------------------------------------------------------- */ .tronox-mi { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 17px; height: 17px; font-size: 15px; line-height: 1; } /* Los items hoja y los subgrupos llevan un icono algo menor que la seccion, igual que en el prototipo: la jerarquia se lee por tamano, no solo por sangria. */ .tronox-acc-item .tronox-mi, .tronox-acc-sub > summary .tronox-mi { width: 15px; height: 15px; font-size: 13.5px; opacity: .85; } .tronox-acc-item.active .tronox-mi { opacity: 1; } /* El icono de los enlaces sueltos de primer nivel (Inicio) ocupaba el hueco de un de 17px; se conserva con la misma alineacion. */ .tronox-nav-link > .tronox-mi { opacity: .85; } .tronox-nav-link.active > .tronox-mi { opacity: 1; color: var(--primary); } /* ------------------------------------------------------------------------- Badge de codigo del menu (prototipo: .menu-rf en tronox-shell.js). El sidebar del prototipo rotula cada pantalla con su codigo RF y cada modulo con su REQ. Aqui el dato viene de menu_nodes.legacy_code, que la semilla ya llenaba pero que el sidebar no pintaba. ------------------------------------------------------------------------- */ .tronox-acc-item .menu-rf, .tronox-acc-sub > summary .menu-rf { margin-left: auto; flex-shrink: 0; font-size: 8.5px; font-weight: 700; letter-spacing: .2px; line-height: 1.5; color: var(--tx-text-400); background: var(--tx-input-bg); padding: 1px 5px; border-radius: 4px; } /* En el summary del modulo el contador va pegado al chevron, asi que el badge no debe empujarlo: el margen automatico lo pone la etiqueta del nombre. */ .tronox-acc-sub > summary .menu-rf { margin-left: auto; margin-right: 2px; } .tronox-acc-sub > summary .tronox-acc-name { margin-right: 0; } .tronox-acc-item.active .menu-rf { color: var(--tx-primary); background: var(--tx-primary-light); } /* La etiqueta del item se trunca antes que el badge (prototipo: .msl-label). */ .tronox-acc-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------------------- Selector flotante de tema. Copiado de Prototipo/assets/css/tronox.css (bloque "Selector flotante de tema"), con los mismos nombres de clase. Lo construye wwwroot/js/tronox-theme.js. ------------------------------------------------------------------------- */ #tx-theme-fab { position: fixed; left: 20px; bottom: 20px; z-index: 9998; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; background: var(--tx-hero-grad); color: #fff; font-size: 19px; box-shadow: 0 6px 20px rgba(0,0,0,.22); display: flex; align-items: center; justify-content: center; transition: transform .15s; } #tx-theme-fab:hover { transform: scale(1.06); } #tx-theme-panel { position: fixed; left: 20px; bottom: 78px; z-index: 9998; width: 270px; background: var(--tx-card-bg); border: 1px solid var(--tx-border); border-radius: var(--tx-radius-lg); box-shadow: 0 18px 50px rgba(0,0,0,.25); padding: 14px; display: none; } #tx-theme-panel.open { display: block; } #tx-theme-panel .tp-title { font-size: 13px; font-weight: 700; color: var(--tx-text-900); margin-bottom: 2px; } #tx-theme-panel .tp-sub { font-size: 11px; color: var(--tx-text-500); margin-bottom: 10px; } .tp-opt { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 10px; border-radius: var(--tx-radius); border: 1px solid transparent; background: transparent; cursor: pointer; margin-bottom: 4px; transition: background .12s, border-color .12s; } .tp-opt:hover { background: var(--tx-input-bg); } .tp-opt.active { border-color: var(--tx-primary); background: var(--tx-primary-light); } .tp-sw { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.08); } .tp-opt .tp-name { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--tx-text-900); line-height: 1.2; } .tp-opt .tp-name small { display: block; font-size: 10.5px; font-weight: 500; color: var(--tx-text-500); } .tp-opt .tp-check { font-size: 14px; color: var(--tx-primary); opacity: 0; } .tp-opt.active .tp-check { opacity: 1; } /* ========================================================================= SIDEBAR APLANADO (prototipo: assets/css/tronox.css, bloque SIDEBAR). Portado 1:1 desde la referencia: seccion = eyebrow NO colapsable, modulo = item directamente visible (disclosure con punto de estado), pantalla = subitem. Todo bajo .tronox-sidebar para NO colisionar con las clases .menu-link / .menu-title de Velzon (app.min.css) ni con .tronox-acc de la hoja heredada (app.css). Colores desde los tokens --tx-* (los reviste cada uno de los 5 temas), asi el conmutador de paletas sigue funcionando. ========================================================================= */ /* --- Cabecera: logo TRONOX + SGDEA (prototipo .sidebar-logo). --- */ .tronox-sidebar .tx-sb-logo { display: flex; align-items: center; gap: 12px; padding: 0 20px; height: var(--tx-topbar-height); border-bottom: 1px solid var(--tx-border); flex-shrink: 0; text-decoration: none; } .tronox-sidebar .tx-sb-logo-mark { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .tronox-sidebar .tx-sb-logo-mark img { width: 100%; height: 100%; object-fit: contain; } .tronox-sidebar .tx-sb-logo-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tronox-sidebar .tx-sb-logo-word { font-size: 18px; font-weight: 800; letter-spacing: .5px; line-height: 1; color: var(--tx-text-900); } .tronox-sidebar .tx-sb-logo-sub { font-size: 10px; letter-spacing: 1.5px; line-height: 1; color: var(--tx-text-500); } /* --- El