/* =============================================================================
modern-overrides.css
-----------------------------------------------------------------------------
Capa de modernización visual para wcSBS2.
- Carga AL FINAL del en _Layout.cshtml (después de AdminLTE).
- NO modifica HTML, controles ni lógica. Solo refresca aspecto.
- Para revertir: comentar el en _Layout.cshtml.
========================================================================== */
/* ---------- 1. Tokens de diseño (paleta + tipografía) ---------------------- */
:root {
/* Paleta institucional: verde azulado #02969A, tomado del logo.
Reemplaza al azul #2E5BFF anterior, que coincidia con el logo de la competencia.
OJO: cambiar estos tokens NO alcanza. El color tambien esta hardcodeado en:
- el degradado del fondo del sidebar (seccion 5)
- los rgba() de las sombras, que necesitan alpha y no toman var()
(item activo del menu, hover de boton primario, focus de boton y de campo)
- el encabezado de marca de los Excel, en _DashboardContent.cshtml y
Vendedor/Descuentos.cshtml (formato ARGB "FF02969A")
Buscar rgba(2, 150, 154 para encontrarlos todos. */
--sbs-primary: #02969A;
--sbs-primary-600: #02787B;
--sbs-primary-50: #E6F4F5;
--sbs-accent: #00C2A8;
--sbs-bg: #F5F7FB;
--sbs-surface: #FFFFFF;
--sbs-border: #E4E8F0;
--sbs-text: #1F2937;
--sbs-text-muted: #6B7280;
--sbs-radius: 10px;
--sbs-radius-sm: 6px;
--sbs-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
--sbs-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
--sbs-shadow-lg: 0 10px 24px rgba(16, 24, 40, 0.10);
--sbs-transition: all .18s ease-in-out;
}
/* ---------- 2. Base y tipografía ------------------------------------------ */
body,
body.hold-transition {
background-color: var(--sbs-bg);
color: var(--sbs-text);
font-family: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
color: var(--sbs-text);
letter-spacing: -0.01em;
}
/* ---------- 3. Content wrapper -------------------------------------------- */
.content-wrapper {
background-color: var(--sbs-bg);
}
.content-header h1 {
font-weight: 600;
font-size: 1.45rem;
}
/* ---------- 4. Navbar superior -------------------------------------------- */
.main-header.navbar {
border-bottom: 1px solid var(--sbs-border);
box-shadow: var(--sbs-shadow-sm);
background-color: var(--sbs-surface) !important;
}
.main-header .nav-link {
transition: var(--sbs-transition);
border-radius: var(--sbs-radius-sm);
}
.main-header .nav-link:hover {
background-color: var(--sbs-primary-50);
color: var(--sbs-primary) !important;
}
/* ---------- 5. Sidebar (verde profundo) ---------------------------------- */
/* Este degradado ES el color del panel izquierdo: lo que se ve, no el token.
Estuvo en el verde de marca pleno (#02969A → #027B7F) hasta ago-2026. El
problema no era el color sino su TONO: con texto blanco encima, la mitad de
arriba del panel daba 3,60:1 y la de abajo 5,07:1, contra los 4,5:1 que pide
WCAG AA para texto normal. O sea que un ítem se leía peor o mejor según dónde
cayera en la lista, que es un efecto que nadie eligió: salió de cruzar el
degradado con el texto blanco.
Ahora va el tono OSCURO de la misma familia. El panel sigue siendo verde de
punta a punta -es la identidad de la empresa- y el texto pasa a 8,24:1 arriba
y 11,73:1 abajo. Cambia el tono, no el rol.
Al bajar el fondo, el color de marca queda libre para lo que sí necesita
destacarse: el ítem abierto (ver más abajo). */
.main-sidebar.sidebar-dark-primary {
background: linear-gradient(180deg, #01585B 0%, #013F42 100%);
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.16);
}
/* Texto en blanco. AdminLTE usa un gris claro (#c2c7d0) pensado para su azul
marino, que sobre este verde pierde contraste sin necesidad. */
.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link,
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link,
.main-sidebar.sidebar-dark-primary .brand-link,
.main-sidebar.sidebar-dark-primary .user-panel .info a {
color: rgba(255, 255, 255, 0.92) !important;
}
/* El ícono va un escalón por debajo del texto: acompaña la lectura, no compite
con ella. Los 16 ítems tenían el mismo círculo de AdminLTE y no informaban
nada; ahora que cada uno dice algo, conviene que se vean pero no griten. */
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-icon {
color: rgba(255, 255, 255, 0.62) !important;
}
.brand-link {
/* El bloque oscuro del encabezado cortaba el degradado. Se deja pasar el fondo. */
background-color: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
padding: 0.9rem 0.75rem;
}
.nav-sidebar > .nav-item > .nav-link {
border-radius: var(--sbs-radius-sm);
margin: 2px 8px;
transition: var(--sbs-transition);
}
/* Sobre fondo oscuro el velo que se lee como "resaltado" es el CLARO. Con el
negro al 12% que había -pensado para el verde claro anterior- el hover
directamente no se notaba. */
.nav-sidebar > .nav-item > .nav-link:hover {
background-color: rgba(255, 255, 255, 0.08);
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link {
border-radius: var(--sbs-radius-sm);
margin: 1px 8px 1px 18px;
transition: var(--sbs-transition);
}
/* El ítem abierto.
No puede ser fondo --sbs-primary con texto blanco: son 3,60:1, exactamente el
problema que se acaba de arreglar. Va un velo blanco al 12% -que sube el texto
por encima de 7:1- y el color se muda a una BARRA de 3px a la izquierda, que
se ve de reojo sin leer y no tiene que cumplir contraste de texto.
La barra usa el acento (#00C2A8) y no el primario: sobre este fondo llega a
3,64:1, suficiente para un elemento gráfico (AA pide 3:1), mientras que el
primario se quedaría en 2,4:1 y se perdería contra el panel.
Sin position:relative el ::before se posiciona contra el
, que no tiene
los márgenes del enlace, y la barra queda despegada del ítem. */
.nav-sidebar .nav-link.active,
.nav-sidebar > .nav-item > .nav-link.active {
background-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: none;
position: relative;
}
.nav-sidebar .nav-link.active::before {
content: "";
position: absolute;
left: -8px;
top: 4px;
bottom: 4px;
width: 3px;
border-radius: 0 3px 3px 0;
background-color: var(--sbs-accent);
}
/* El ítem abierto es lo único del panel en blanco puro, y su ícono es lo único
en color: entre 16 ítems, el que está abierto tiene que encontrarse sin leer. */
.nav-sidebar .nav-link.active,
.nav-sidebar .nav-link.active > p,
.nav-sidebar .nav-link.active > p > small {
color: #ffffff !important;
font-weight: 600;
}
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link.active .nav-icon {
color: var(--sbs-accent) !important;
}
.user-panel {
border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}
/* Encabezados de seccion del menu (GENERAL / OPERANDO POR UN CLIENTE). Estaban
al 75% sobre el verde claro, o sea 2,67:1 con letra de .68rem. Sobre el fondo
oscuro, el mismo gesto visual llega a 5,68:1. */
.main-sidebar.sidebar-dark-primary .nav-header {
color: rgba(255, 255, 255, 0.78) !important;
font-size: .68rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
padding: .9rem 1rem .3rem;
margin-top: .2rem;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* El primero no lleva separador arriba: no hay nada que separar. */
.main-sidebar.sidebar-dark-primary .nav-header:first-child {
border-top: none;
margin-top: 0;
padding-top: .4rem;
}
/* Los íconos del menú son SVG de trazo, no FontAwesome.
Con `fas` quedaban macizos: a 1,2rem y rellenos pesaban más que el texto que
acompañan, y el menú se leía como una lista de manchas. La variante `far`
-que es la de trazo- no servía: de los 22 íconos que hacen falta, el set free
solo tiene 8, así que la mitad del menú habría quedado hueca y la otra mitad
rellena, que es peor que todo macizo.
Los atributos de trazo viven ACA y no en cada