/* ========================================================================== WORKFLOW — hoja de marca Sobreescribe la paleta por defecto de la plantilla (Bootstrap 5) con los colores del logo. Se carga la última en para poder pisar todo lo anterior. No se toca ningún archivo de la plantilla original: así una futura actualización de la plantilla no se lleva por delante la marca. ========================================================================== */ :root, [data-bs-theme=light] { /* Primario — cian eléctrico del logo (swoosh / "FLOW") */ --bs-primary: #00AEEF; --bs-primary-rgb: 0, 174, 239; --bs-primary-text-emphasis: #005E82; --bs-primary-bg-subtle: #DFF5FE; --bs-primary-border-subtle: #99E1FA; /* Éxito — verde lima del logo ("CRECE") */ --bs-success: #63C93D; --bs-success-rgb: 99, 201, 61; --bs-success-text-emphasis: #2F5C1D; --bs-success-bg-subtle: #E9FBE0; --bs-success-border-subtle: #BFEFA9; /* Aviso — naranja del logo (letra "K" / "EJECUTA") */ --bs-warning: #FF8100; --bs-warning-rgb: 255, 129, 0; --bs-warning-text-emphasis: #7A3D00; --bs-warning-bg-subtle: #FFF1E0; --bs-warning-border-subtle: #FFCC99; /* Enlaces */ --bs-link-color: #0090C7; --bs-link-color-rgb: 0, 144, 199; --bs-link-hover-color: #007098; --bs-link-hover-color-rgb: 0, 112, 152; /* Acento secundario de marca (violeta del rayo), disponible como utilidad .text-brand-accent / .bg-brand-accent para detalles puntuales */ --bs-brand-accent: #5B3DF6; --bs-brand-accent-rgb: 91, 61, 246; /* Fondo oscuro de marca para sidebar/header (modo semi-dark) */ --bs-semi-body-bg: #0B0B12; --bs-semi-body-bg-2: #06060A; --bs-semi-body-color: #C7CBD1; --bs-semi-body-color-rgb: 199, 203, 209; --bs-semi-border-color: rgba(255, 255, 255, 0.08); --bs-semi-border-color-translucent: rgba(255, 255, 255, 0.08); } /* -- Botones -------------------------------------------------------------- .btn-primary / .btn-outline-primary usan valores fijos en Bootstrap (no heredan de --bs-primary), así que hay que redefinirlos aparte. */ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0092C9; --bs-btn-hover-border-color: #0092C9; --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: #007AA6; --bs-btn-active-border-color: #007AA6; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } .btn-success { --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-bg: #55B12F; --bs-btn-hover-border-color: #55B12F; --bs-btn-active-bg: #479425; --bs-btn-active-border-color: #479425; --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); } .btn-warning { --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-bg: #E67400; --bs-btn-hover-border-color: #E67400; --bs-btn-active-bg: #CC6700; --bs-btn-active-border-color: #CC6700; --bs-btn-disabled-bg: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); } .text-brand-accent { color: var(--bs-brand-accent) !important; } .bg-brand-accent { background-color: var(--bs-brand-accent) !important; } /* -- Sidebar / header (modo semi-dark) ------------------------------------ La plantilla ya trae [data-bs-theme=semi-dark] para oscurecer solo el sidebar; aquí lo llevamos también a la cabecera y le damos el toque de marca (resalte activo en cian con borde de acento). */ /* Especificidad: la propia plantilla trae "[data-bs-theme=semi-dark] body .top-header .navbar { background-color:#eff1f3 }" en semi-dark.css, y por incluir "body" gana en especificidad a un selector sin él aunque este se cargue después. Por eso aquí se repite "body" en todo y se refuerza con !important, para que la cabecera quede oscura de verdad y no en gris claro con texto claro encima (ilegible). */ [data-bs-theme=semi-dark] body .top-header .navbar { background-color: var(--bs-semi-body-bg) !important; border-bottom: 1px solid var(--bs-semi-border-color); box-shadow: none; } [data-bs-theme=semi-dark] body .top-header .navbar .btn-toggle a, [data-bs-theme=semi-dark] body .top-header .navbar .nav-right-links .nav-link, [data-bs-theme=semi-dark] body .top-header .navbar-nav > li, [data-bs-theme=semi-dark] body .top-header .navbar-nav strong { color: var(--bs-semi-body-color) !important; } [data-bs-theme=semi-dark] body .top-header .navbar .btn-toggle a:hover, [data-bs-theme=semi-dark] body .top-header .navbar .btn-toggle a:focus, [data-bs-theme=semi-dark] body .top-header .navbar .nav-right-links .nav-link:hover, [data-bs-theme=semi-dark] body .top-header .navbar .nav-right-links .nav-link:focus { color: #fff !important; background-color: rgba(255, 255, 255, 0.06); } [data-bs-theme=semi-dark] body .top-header .navbar-nav a:not(.dropdown-item):not(.btn) { color: var(--bs-primary) !important; } [data-bs-theme=semi-dark] .sidebar-wrapper .sidebar-nav .metismenu .mm-active > a, [data-bs-theme=semi-dark] .sidebar-wrapper .sidebar-nav .metismenu a:hover, [data-bs-theme=semi-dark] .sidebar-wrapper .sidebar-nav .metismenu a:focus, [data-bs-theme=semi-dark] .sidebar-wrapper .sidebar-nav .metismenu a:active { color: #fff; background-color: rgba(var(--bs-primary-rgb), 0.16); box-shadow: inset 3px 0 0 var(--bs-primary); } /* Logo del sidebar */ .sidebar-wrapper .sidebar-header .logo-img { width: 150px; height: auto; } /* -- Pantallas de login ---------------------------------------------------- Franja oscura de marca en la parte superior de la tarjeta de login, para que el logo (pensado para fondo negro) luzca bien aunque el resto de la tarjeta sea claro. */ .auth-brand-panel { background: linear-gradient(135deg, #06060A 0%, #0B0B12 55%, #12121C 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .auth-brand-logo { width: 230px; max-width: 75%; height: auto; } .auth-brand-tag { margin-top: 0.5rem; display: block; font-size: 11px; letter-spacing: 2px; color: var(--bs-warning); font-weight: 700; text-transform: uppercase; }