/* ==========================================================================
GP2 — paletas del sistema
--------------------------------------------------------------------------
Siete paletas, cada una un juego completo de variables. El municipio elige
la suya con la configuracion `tema_panel`; el valor se escribe en el
atributo data-tema del .
Por que variables y no colores sueltos: el CSS de la plantilla original
(assets/css/style.css, 114 KB) no tiene una sola variable, tiene el mismo
hexadecimal repetido decenas de veces. Este archivo se carga DESPUES y solo
redefine color. No se edita el original: si una paleta no gusta, se cambia
una configuracion; si el sistema entero no gusta, se saca este y
todo vuelve exactamente a como estaba.
Las siete no son la misma paleta con el tono rotado. Cada una elige un color
de accion que se distinga del color de identidad, y deja el rojo libre para
lo destructivo — que en un sistema donde se anulan pagos y se dan de baja
contribuyentes no es un detalle estetico.
========================================================================== */
:root,
[data-tema="pizarra"] {
/* Pizarra — pizarra oscura y verde institucional.
El cambio mas chico sobre lo que ya habia: mismo menu oscuro, pero el gris
deja de tirar a verde y queda un solo verde en todo el sistema. */
--gp-side: #1E2530;
--gp-side-2: #151B24;
--gp-side-fg: #FFFFFF;
--gp-side-fg-dim: #AEB6C2;
--gp-side-fg-faint: #6E7787;
--gp-side-rule: #2B3341;
--gp-accent: #1F6F4A;
--gp-accent-dark: #17583A;
--gp-accent-fg: #FFFFFF;
--gp-accent-ring: rgba(31, 111, 74, .22);
--gp-accent-soft: #E7F1EB;
--gp-body: #F4F5F7;
--gp-card: #FFFFFF;
--gp-rule: #DFE3E8;
--gp-rule-soft: #EDEFF2;
--gp-input: #FFFFFF;
--gp-input-rule: #D5DAE1;
--gp-fg: #1E2530;
--gp-fg-dim: #4A5262;
--gp-fg-faint: #8A93A1;
--gp-danger: #B4232A;
--gp-danger-dark: #96181E;
--gp-brand-1: #1E2530;
--gp-brand-2: #17342A;
--gp-brand-fg: #FFFFFF;
--gp-brand-fg-dim: #A9B4B0;
--gp-brand-grid: rgba(255, 255, 255, .07);
--gp-radius: 4px;
}
[data-tema="papel"] {
/* Papel — menu claro, separado del contenido por una linea fina en vez de
por un bloque negro. Es la que mas se nota al abrir el sistema. */
--gp-side: #FFFFFF;
--gp-side-2: #F0F4F1;
--gp-side-fg: #111827;
--gp-side-fg-dim: #4B5563;
--gp-side-fg-faint: #6B7280;
--gp-side-rule: #E6E8EC;
--gp-accent: #166534;
--gp-accent-dark: #14532D;
--gp-accent-fg: #FFFFFF;
--gp-accent-ring: rgba(22, 101, 52, .18);
--gp-accent-soft: #E8F2EC;
--gp-body: #F7F8FA;
--gp-card: #FFFFFF;
--gp-rule: #E6E8EC;
--gp-rule-soft: #F0F1F4;
--gp-input: #FFFFFF;
--gp-input-rule: #D9DDE3;
--gp-fg: #111827;
--gp-fg-dim: #4B5563;
--gp-fg-faint: #9AA1AD;
--gp-danger: #B4232A;
--gp-danger-dark: #96181E;
--gp-brand-1: #EDF2EE;
--gp-brand-2: #DEE8E0;
--gp-brand-fg: #14532D;
--gp-brand-fg-dim: #4F6B59;
--gp-brand-grid: rgba(20, 83, 45, .10);
--gp-radius: 5px;
}
[data-tema="expediente"] {
/* Expediente — casi sin color. Un solo elemento en verde por pantalla: la
accion principal. Se parece menos a un panel y mas a un documento. */
--gp-side: #20242B;
--gp-side-2: #171A20;
--gp-side-fg: #FFFFFF;
--gp-side-fg-dim: #A8ADB8;
--gp-side-fg-faint: #6B717D;
--gp-side-rule: #2D323B;
--gp-accent: #15803D;
--gp-accent-dark: #126532;
--gp-accent-fg: #FFFFFF;
--gp-accent-ring: rgba(21, 128, 61, .18);
--gp-accent-soft: #EEF3EF;
--gp-body: #FAFAFB;
--gp-card: #FFFFFF;
--gp-rule: #E8E9ED;
--gp-rule-soft: #F2F3F5;
--gp-input: #FFFFFF;
--gp-input-rule: #DCDEE3;
--gp-fg: #0F1115;
--gp-fg-dim: #454A54;
--gp-fg-faint: #8E939D;
--gp-danger: #9F1D24;
--gp-danger-dark: #85161C;
--gp-brand-1: #F7F8F9;
--gp-brand-2: #EDEEF1;
--gp-brand-fg: #0F1115;
--gp-brand-fg-dim: #5A606B;
--gp-brand-grid: rgba(15, 17, 21, .07);
--gp-radius: 3px;
}
[data-tema="indigo"] {
/* Indigo — para el municipio cuya identidad es azul. El azul de accion es
mas claro que el de identidad, para que el boton no se pierda en el menu. */
--gp-side: #17224D;
--gp-side-2: #101836;
--gp-side-fg: #FFFFFF;
--gp-side-fg-dim: #AFB8D6;
--gp-side-fg-faint: #7982A6;
--gp-side-rule: #24315F;
--gp-accent: #2F4BA0;
--gp-accent-dark: #263F8A;
--gp-accent-fg: #FFFFFF;
--gp-accent-ring: rgba(47, 75, 160, .22);
--gp-accent-soft: #E9EDF7;
--gp-body: #F5F6FA;
--gp-card: #FFFFFF;
--gp-rule: #E1E4EE;
--gp-rule-soft: #EDEFF5;
--gp-input: #FFFFFF;
--gp-input-rule: #D5D9E7;
--gp-fg: #131A33;
--gp-fg-dim: #454E6E;
--gp-fg-faint: #8B93AE;
--gp-danger: #B4232A;
--gp-danger-dark: #96181E;
--gp-brand-1: #17224D;
--gp-brand-2: #26356E;
--gp-brand-fg: #FFFFFF;
--gp-brand-fg-dim: #AFB8D6;
--gp-brand-grid: rgba(255, 255, 255, .08);
--gp-radius: 4px;
}
[data-tema="bordo"] {
/* Bordo — el color mas usado en la heraldica municipal argentina. La accion
va en bronce, no en otro rojo: asi el rojo queda libre para anular. */
--gp-side: #3A1520;
--gp-side-2: #2A0F17;
--gp-side-fg: #FFFFFF;
--gp-side-fg-dim: #D6BAC2;
--gp-side-fg-faint: #9C7C87;
--gp-side-rule: #4E2130;
--gp-accent: #96702F;
--gp-accent-dark: #7C5B24;
--gp-accent-fg: #FFFFFF;
--gp-accent-ring: rgba(150, 112, 47, .22);
--gp-accent-soft: #F5EFE2;
--gp-body: #F8F5F6;
--gp-card: #FFFFFF;
--gp-rule: #E9DFE2;
--gp-rule-soft: #F2EBED;
--gp-input: #FFFFFF;
--gp-input-rule: #E0D3D7;
--gp-fg: #26161A;
--gp-fg-dim: #5B4249;
--gp-fg-faint: #9C8A8F;
--gp-danger: #C2352C;
--gp-danger-dark: #A32821;
--gp-brand-1: #3A1520;
--gp-brand-2: #55202F;
--gp-brand-fg: #FFFFFF;
--gp-brand-fg-dim: #D6BAC2;
--gp-brand-grid: rgba(255, 255, 255, .08);
--gp-radius: 4px;
}
[data-tema="petroleo"] {
/* Petroleo — verde muy oscuro y azulado, con turquesa de accion. Es la mas
oscura de las siete sin llegar a negro. */
--gp-side: #10333A;
--gp-side-2: #0A2429;
--gp-side-fg: #FFFFFF;
--gp-side-fg-dim: #A6C2C7;
--gp-side-fg-faint: #6E8D93;
--gp-side-rule: #1B454E;
--gp-accent: #0E7C86;
--gp-accent-dark: #0A646C;
--gp-accent-fg: #FFFFFF;
--gp-accent-ring: rgba(14, 124, 134, .22);
--gp-accent-soft: #E3F1F2;
--gp-body: #F4F7F7;
--gp-card: #FFFFFF;
--gp-rule: #DCE6E7;
--gp-rule-soft: #EAF0F0;
--gp-input: #FFFFFF;
--gp-input-rule: #CFDDDE;
--gp-fg: #10333A;
--gp-fg-dim: #40595F;
--gp-fg-faint: #849A9E;
--gp-danger: #B4232A;
--gp-danger-dark: #96181E;
--gp-brand-1: #10333A;
--gp-brand-2: #0E5259;
--gp-brand-fg: #FFFFFF;
--gp-brand-fg-dim: #A6C2C7;
--gp-brand-grid: rgba(255, 255, 255, .08);
--gp-radius: 4px;
}
[data-tema="arena"] {
/* Arena — neutros calidos en vez de frios. La unica de las siete que no usa
grises azulados; se lee mas cerca del papel que de la pantalla. */
--gp-side: #2B2723;
--gp-side-2: #201D1A;
--gp-side-fg: #FFFFFF;
--gp-side-fg-dim: #C2B8AB;
--gp-side-fg-faint: #8A8074;
--gp-side-rule: #3B3630;
--gp-accent: #6B6A2B;
--gp-accent-dark: #565522;
--gp-accent-fg: #FFFFFF;
--gp-accent-ring: rgba(107, 106, 43, .22);
--gp-accent-soft: #EFEFE0;
--gp-body: #F7F5F1;
--gp-card: #FFFFFF;
--gp-rule: #E6E1D8;
--gp-rule-soft: #F0EDE7;
--gp-input: #FFFFFF;
--gp-input-rule: #DCD5C9;
--gp-fg: #2B2723;
--gp-fg-dim: #55504A;
--gp-fg-faint: #968F86;
--gp-danger: #A33529;
--gp-danger-dark: #872A20;
--gp-brand-1: #2B2723;
--gp-brand-2: #45403A;
--gp-brand-fg: #FFFFFF;
--gp-brand-fg-dim: #C2B8AB;
--gp-brand-grid: rgba(255, 255, 255, .08);
--gp-radius: 4px;
}
/* ==========================================================================
Panel: se redefine solo el color de las superficies que se ven siempre.
Cada regla lleva el selector minimo que gana a la plantilla, sin !important
salvo donde el original ya lo usa.
========================================================================== */
body.fixed-left {
background: var(--gp-body);
color: var(--gp-fg);
}
/* El menu lateral. El selector es .side-menu.left, no .header.left.side-menu:
el markup del layout es
y no lleva la clase
header, asi que esa regla del CSS original nunca se aplico. */
.side-menu.left {
background: var(--gp-side);
}
/* Cada item del menu trae su propio fondo, ademas del contenedor. Sin esta
regla el contenedor cambiaba de color pero las filas seguian oscuras — y con
una paleta clara quedaba texto gris sobre gris, ilegible. */
#sidebar-menu > ul > li {
background: var(--gp-side);
}
#sidebar-menu ul ul {
background: var(--gp-side-2);
}
#sidebar-menu ul ul ul {
background: var(--gp-side-2);
}
/* Grupo desplegado. */
#sidebar-menu > ul > li > a.subdrop {
background: var(--gp-side-2);
}
/* Menu plegado: la plantilla vuelve a fijar colores con !important, asi que
hay que igualarlo o el menu chico queda con los colores viejos. */
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > a {
background: var(--gp-side-2) !important;
color: var(--gp-side-fg) !important;
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul ul li:hover > a {
background: var(--gp-side-2) !important;
color: var(--gp-side-fg) !important;
}
#wrapper.enlarged #sidebar-menu ul ul li a.active {
background: var(--gp-accent) !important;
color: var(--gp-accent-fg) !important;
}
#sidebar-menu > ul > li > a {
color: var(--gp-side-fg-dim);
}
#sidebar-menu > ul > li > a > i {
color: var(--gp-side-fg-dim);
}
#sidebar-menu > ul > li > a:hover {
color: var(--gp-side-fg);
background: var(--gp-side-2);
}
/* El original marca el activo con background y !important; hay que igualarlo
o no gana. */
#sidebar-menu > ul > li > a.active,
#sidebar-menu > ul > li > a.active.subdrop {
color: var(--gp-accent-fg);
background: var(--gp-accent) !important;
}
/* La flechita que sale del item activo hacia el contenido esta pintada con el
color de fondo de la pagina: si no se cambia, queda del verde viejo. */
#sidebar-menu > ul > li > a.open:after,
#sidebar-menu > ul > li > a.active:after {
border-color: rgba(0,0,0,0) var(--gp-body) rgba(0,0,0,0) rgba(0,0,0,0);
}
#sidebar-menu ul ul a {
color: var(--gp-side-fg-dim);
}
#sidebar-menu ul ul a:hover {
color: var(--gp-side-fg);
background: var(--gp-side-2);
}
#sidebar-menu ul ul li a.active {
color: var(--gp-accent-fg);
background: var(--gp-accent);
}
/* Pie del menu, donde va la version.
La plantilla lo pinta con rgba(0,0,0,.3) y lo posiciona absoluto sobre el
menu: en una paleta clara eso queda como una franja gris, y encima tapa el
ultimo item. Ahora es del mismo color del menu, separado por una linea fina,
con la version en chico y apagada — y el menu reserva su alto para que no
quede nada debajo. */
.left-footer {
background: var(--gp-side);
border-top: 1px solid var(--gp-side-rule);
color: var(--gp-side-fg-faint);
height: 38px;
line-height: 38px;
padding: 0 14px;
}
.left-footer a,
.left-footer a:focus {
color: var(--gp-side-fg-faint);
font-size: 11px;
letter-spacing: .02em;
text-decoration: none;
}
.left-footer a:hover {
color: var(--gp-side-fg-dim);
text-decoration: none;
}
.left-footer strong {
font-weight: 600;
}
/* El alto del pie, para que el ultimo item del menu no quede tapado. */
#sidebar-menu {
padding-bottom: 46px;
}
/* El bloque del logo es continuo con el menu, como en el original
(.topbar .topbar-left venia con background #343838). Ponerlo blanco dejaba
el logo y el boton de plegar flotando sobre una franja clara. */
.topbar .topbar-left {
background: var(--gp-side);
}
.topbar .navbar-custom {
background: var(--gp-card);
border-bottom: 1px solid var(--gp-rule);
}
.btn-success,
.btn-success:focus {
background-color: var(--gp-accent);
border-color: var(--gp-accent-dark);
color: var(--gp-accent-fg);
}
.btn-success:hover,
.btn-success:active,
.btn-success.active {
background-color: var(--gp-accent-dark);
border-color: var(--gp-accent-dark);
color: var(--gp-accent-fg);
}
.btn-danger,
.btn-danger:focus {
background-color: var(--gp-danger);
border-color: var(--gp-danger-dark);
color: #fff;
}
.btn-danger:hover,
.btn-danger:active {
background-color: var(--gp-danger-dark);
border-color: var(--gp-danger-dark);
}
.panel,
.white-box,
.table-responsive > .table {
background: var(--gp-card);
}
.panel,
.white-box {
border-color: var(--gp-rule);
border-radius: var(--gp-radius);
}
.form-control {
border-color: var(--gp-input-rule);
border-radius: var(--gp-radius);
color: var(--gp-fg);
}
.form-control:focus {
border-color: var(--gp-accent);
box-shadow: 0 0 0 3px var(--gp-accent-ring);
}
/* Foco de teclado visible en todo lo que se puede tabular: la plantilla
original lo apagaba con outline:none. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--gp-accent);
outline-offset: 2px;
}