/* ==========================================================================
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;
}
[data-tema="mandarina"] {
/* Mandarina — Naranja fuerte sobre menú marrón oscuro. La más cálida de todas. */
--gp-side: #7A2E0E;
--gp-side-2: #5E2309;
--gp-side-fg: #FFFFFF;
--gp-side-fg-dim: #FBD9C4;
--gp-side-fg-faint: #E8A87C;
--gp-side-rule: #93401B;
--gp-accent: #C2410C;
--gp-accent-dark: #9A3412;
--gp-accent-fg: #FFFFFF;
--gp-accent-ring: rgba(194, 65, 12, .22);
--gp-accent-soft: #FFEDD5;
--gp-body: #FFF8F3;
--gp-card: #FFFFFF;
--gp-rule: #F2DDD0;
--gp-rule-soft: #F8EBE2;
--gp-input: #FFFFFF;
--gp-input-rule: #E8CDBC;
--gp-fg: #3B1A0A;
--gp-fg-dim: #6B3A22;
--gp-fg-faint: #9C7460;
--gp-danger: #B4232A;
--gp-danger-dark: #96181E;
--gp-brand-1: #7A2E0E;
--gp-brand-2: #5E2309;
--gp-brand-fg: #FFFFFF;
--gp-brand-fg-dim: #FBD9C4;
--gp-brand-grid: rgba(255, 255, 255, .08);
--gp-radius: 4px;
}
[data-tema="turquesa"] {
/* Turquesa — Turquesa vivo sobre menú petróleo profundo. Fresca y con mucha luz. */
--gp-side: #0B3F4A;
--gp-side-2: #082F37;
--gp-side-fg: #FFFFFF;
--gp-side-fg-dim: #BDE8EF;
--gp-side-fg-faint: #79C4D2;
--gp-side-rule: #125363;
--gp-accent: #0E7490;
--gp-accent-dark: #155E75;
--gp-accent-fg: #FFFFFF;
--gp-accent-ring: rgba(14, 116, 144, .22);
--gp-accent-soft: #CFFAFE;
--gp-body: #F3FBFD;
--gp-card: #FFFFFF;
--gp-rule: #CFE7EC;
--gp-rule-soft: #E3F3F7;
--gp-input: #FFFFFF;
--gp-input-rule: #B9DCE4;
--gp-fg: #0B2F38;
--gp-fg-dim: #2F5B66;
--gp-fg-faint: #6E939C;
--gp-danger: #B4232A;
--gp-danger-dark: #96181E;
--gp-brand-1: #0B3F4A;
--gp-brand-2: #082F37;
--gp-brand-fg: #FFFFFF;
--gp-brand-fg-dim: #BDE8EF;
--gp-brand-grid: rgba(255, 255, 255, .08);
--gp-radius: 4px;
}
[data-tema="violeta"] {
/* Violeta — Violeta intenso sobre menú púrpura. La más vistosa del conjunto. */
--gp-side: #3B1D6B;
--gp-side-2: #2C1550;
--gp-side-fg: #FFFFFF;
--gp-side-fg-dim: #DDD0F5;
--gp-side-fg-faint: #AE96DC;
--gp-side-rule: #4C2A83;
--gp-accent: #7C3AED;
--gp-accent-dark: #6D28D9;
--gp-accent-fg: #FFFFFF;
--gp-accent-ring: rgba(124, 58, 237, .22);
--gp-accent-soft: #EDE9FE;
--gp-body: #FAF8FF;
--gp-card: #FFFFFF;
--gp-rule: #E4DCF3;
--gp-rule-soft: #EFEAFA;
--gp-input: #FFFFFF;
--gp-input-rule: #D6CAEC;
--gp-fg: #26123F;
--gp-fg-dim: #4E3872;
--gp-fg-faint: #8672A8;
--gp-danger: #B4232A;
--gp-danger-dark: #96181E;
--gp-brand-1: #3B1D6B;
--gp-brand-2: #2C1550;
--gp-brand-fg: #FFFFFF;
--gp-brand-fg-dim: #DDD0F5;
--gp-brand-grid: rgba(255, 255, 255, .08);
--gp-radius: 4px;
}
[data-tema="lima"] {
/* Lima — Verde lima sobre menú verde bosque. Más brillante que el verde institucional. */
--gp-side: #1C3A12;
--gp-side-2: #142B0D;
--gp-side-fg: #FFFFFF;
--gp-side-fg-dim: #D6EFC4;
--gp-side-fg-faint: #9DC97F;
--gp-side-rule: #2A5019;
--gp-accent: #4D7C0F;
--gp-accent-dark: #3F6212;
--gp-accent-fg: #FFFFFF;
--gp-accent-ring: rgba(77, 124, 15, .22);
--gp-accent-soft: #ECFCCB;
--gp-body: #F7FBF2;
--gp-card: #FFFFFF;
--gp-rule: #DCE9CE;
--gp-rule-soft: #EAF3E1;
--gp-input: #FFFFFF;
--gp-input-rule: #C9DCB8;
--gp-fg: #16280F;
--gp-fg-dim: #3D5533;
--gp-fg-faint: #728A66;
--gp-danger: #B4232A;
--gp-danger-dark: #96181E;
--gp-brand-1: #1C3A12;
--gp-brand-2: #142B0D;
--gp-brand-fg: #FFFFFF;
--gp-brand-fg-dim: #D6EFC4;
--gp-brand-grid: rgba(255, 255, 255, .08);
--gp-radius: 4px;
}
[data-tema="coral"] {
/* Coral — Rosa coral sobre menú vino. Cálida sin llegar al rojo de anular. */
--gp-side: #5C1030;
--gp-side-2: #450B24;
--gp-side-fg: #FFFFFF;
--gp-side-fg-dim: #FBD0DF;
--gp-side-fg-faint: #E495B1;
--gp-side-rule: #74183E;
--gp-accent: #DB2777;
--gp-accent-dark: #BE185D;
--gp-accent-fg: #FFFFFF;
--gp-accent-ring: rgba(219, 39, 119, .22);
--gp-accent-soft: #FCE7F3;
--gp-body: #FFF7FA;
--gp-card: #FFFFFF;
--gp-rule: #F3D8E3;
--gp-rule-soft: #F9E8EF;
--gp-input: #FFFFFF;
--gp-input-rule: #E7C3D3;
--gp-fg: #3A0C1E;
--gp-fg-dim: #6B2943;
--gp-fg-faint: #A0687F;
--gp-danger: #B4232A;
--gp-danger-dark: #96181E;
--gp-brand-1: #5C1030;
--gp-brand-2: #450B24;
--gp-brand-fg: #FFFFFF;
--gp-brand-fg-dim: #FBD0DF;
--gp-brand-grid: rgba(255, 255, 255, .08);
--gp-radius: 4px;
}
[data-tema="ambar"] {
/* Ámbar — Ámbar y miel sobre menú tabaco. Luminosa y de tono cálido. */
--gp-side: #4A2D05;
--gp-side-2: #382104;
--gp-side-fg: #FFFFFF;
--gp-side-fg-dim: #FBE6B4;
--gp-side-fg-faint: #DCB25E;
--gp-side-rule: #5F3B08;
--gp-accent: #B45309;
--gp-accent-dark: #92400E;
--gp-accent-fg: #FFFFFF;
--gp-accent-ring: rgba(180, 83, 9, .22);
--gp-accent-soft: #FEF3C7;
--gp-body: #FFFBF1;
--gp-card: #FFFFFF;
--gp-rule: #EFE1C4;
--gp-rule-soft: #F7EEDA;
--gp-input: #FFFFFF;
--gp-input-rule: #E2CEA6;
--gp-fg: #2E1C03;
--gp-fg-dim: #5A421B;
--gp-fg-faint: #8C7449;
--gp-danger: #B4232A;
--gp-danger-dark: #96181E;
--gp-brand-1: #4A2D05;
--gp-brand-2: #382104;
--gp-brand-fg: #FFFFFF;
--gp-brand-fg-dim: #FBE6B4;
--gp-brand-grid: rgba(255, 255, 255, .08);
--gp-radius: 4px;
}
[data-tema="contraste"] {
/* Alto contraste — Para personas con baja visión: negro puro sobre blanco, bordes marcados y texto más separado del fondo que en cualquier otra. */
--gp-side: #000000;
--gp-side-2: #000000;
--gp-side-fg: #FFFFFF;
--gp-side-fg-dim: #FFFFFF;
--gp-side-fg-faint: #E6E6E6;
--gp-side-rule: #FFFFFF;
--gp-accent: #0000CC;
--gp-accent-dark: #000099;
--gp-accent-fg: #FFFFFF;
--gp-accent-ring: rgba(0, 0, 204, .22);
--gp-accent-soft: #E6E6FF;
--gp-body: #FFFFFF;
--gp-card: #FFFFFF;
--gp-rule: #000000;
--gp-rule-soft: #767676;
--gp-input: #FFFFFF;
--gp-input-rule: #000000;
--gp-fg: #000000;
--gp-fg-dim: #1A1A1A;
--gp-fg-faint: #595959;
--gp-danger: #B4232A;
--gp-danger-dark: #96181E;
--gp-brand-1: #000000;
--gp-brand-2: #000000;
--gp-brand-fg: #FFFFFF;
--gp-brand-fg-dim: #FFFFFF;
--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);
}
/* El boton de accion principal del sistema.
`.btn-primary` es la clase de los 177 formularios de alta y edicion —el
"Agregar", el "Guardar"—, y valia #4A525F: el gris que traia la plantilla
comprada. Este archivo le daba color a `.btn-success`, que se usa en SEIS
vistas, y dejaba de fabrica al que se usa en todas las demas. No era una
decision: era un olvido, y el efecto es que la accion principal de cada
pantalla se ve gris, que es como se ve un boton deshabilitado. */
.btn-primary,
.btn-primary:focus {
background-color: var(--gp-accent);
border-color: var(--gp-accent-dark);
color: var(--gp-accent-fg);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
background-color: var(--gp-accent-dark);
border-color: var(--gp-accent-dark);
color: var(--gp-accent-fg);
}
/* El titulo de cada pantalla es un enlace —con la flecha de volver— y salia con
el azul que trae Bootstrap por defecto, en las siete paletas. Era el otro
resto de la plantilla: ese azul no figura en ninguna paleta del tema. */
.page-heading h1 a,
.page-heading h1 a:focus {
color: var(--gp-accent);
}
.page-heading h1 a:hover {
color: var(--gp-accent-dark);
}
.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;
}
/* --- Los tres botones de la plantilla comprada ---------------------------
Recargar, minimizar y cerrar, arriba a la derecha de cada panel. Los tres
son humo, medido en init.js:
recargar -> blockUI un segundo y unblockUI. NO recarga nada. Ademas
viene con class="hidden" en 945 lugares y visible en 0:
nadie lo vio nunca.
minimizar -> pliega el panel. No guarda nada: al recargar vuelve.
cerrar -> preguntaba EN INGLES y hacia $item.remove(). Sin
localStorage, sin cookie, sin ajax: se deshace solo al
recargar la pagina.
Estaban en 906 vistas. Se ocultan aca y no borrando el markup de 906
archivos: una regla se revierte borrando una linea, y un
mal cerrado
en una de esas vistas rompe una pantalla que nadie mira hasta que la abre
un municipal.
OJO: la regla apunta a los TRES botones, NO al contenedor .additional-btn.
Hay vistas que metieron un boton util ahi adentro -el "Volver" de
cuentas/chart y organigramas/chart, y los de pagos/show-: ocultar el
contenedor dejaba esas pantallas sin salida. */
.widget-header .additional-btn > a.reload,
.widget-header .additional-btn > a.widget-toggle,
.widget-header .additional-btn > a.widget-close {
display: none !important;
}
/* ==========================================================================
Controles que se quedaron con el color de la plantilla comprada
--------------------------------------------------------------------------
Mismo olvido que el de .btn-primary, en otros tres lugares. La regla para
decidir cual se pinta con el acento y cual no es una sola:
IDENTIDAD -> va al acento. El color no dice nada, solo decora: el verde
de un interruptor encendido, el azul de un boton secundario,
el celeste de un chip de etapa.
SIGNIFICADO -> no se toca. El rojo de anular, el ambar de "prestar
atencion" y el verde de "al dia" son informacion, no adorno.
Por eso --gp-danger vale lo mismo en las catorce paletas: si
el rojo siguiera al acento, un municipio con paleta roja
tendria un panel donde todo parece una alarma, y uno con
paleta verde uno donde nada lo parece.
========================================================================== */
/* Los interruptores.
El verde de encendido no significa "exito": es el unico color que la
plantilla sabia poner. Se usa en 427 lugares -Activo, Jubilado, Whatsapp,
Persona Fisica- donde lo unico que comunica es "esto esta encendido", que
es exactamente el color del municipio.
Los otros dos que se pintan son variantes del mismo caso: -primary es el
"mostrar inactivos" de los organigramas y -info el "usa escala de
alcoholemia" de infracciones. Ninguno de los dos usa el color para decir
algo distinto de encendido.
-danger y -warning quedan como estan A PROPOSITO: ahi el que escribio la
vista eligio el color para marcar la fila (judicializado, tope jubilatorio,
limites de compra), y ese rojo y ese ambar son el dato. */
.ios-switch-success .on-background,
.ios-switch-primary .on-background,
.ios-switch-info .on-background {
background: var(--gp-accent);
}
/* El chip de etapa.
`.label-info` son 113 chips que marcan en que paso va algo -"Espera",
"Recibido", "Movido" en la tabla de estados de un tramite-. Celeste otra
vez, y otra vez sin significado: no son un aviso ni un error, son la etapa.
Los otros tres chips NO se tocan: label-danger (Rechazado), label-success
(Finalizado) y label-warning siguen diciendo lo que dicen. */
.label.label-info {
background: var(--gp-accent);
color: var(--gp-accent-fg);
}
/* La accion secundaria.
`.btn-info` son 117 botones que no informan nada: "Recaudacion", "Tablero
Presupuesto", "Ciudadanos repetidos". Son acciones, y venian en el celeste
#65BBD6 de la plantilla, que no figura en ninguna paleta.
No van al acento lleno: quedarian identicos al "Guardar" y la pantalla
perderia la jerarquia -en la barra de Reportes hay cuatro botones seguidos
y tres ya son acento-. Van al acento suave con el borde del acento, que es
la misma relacion que tenian antes: mas claro que el principal, pero del
color del municipio. En hover pasan al acento lleno.
Medido en las catorce paletas: --gp-accent-dark sobre --gp-accent-soft da
5.14:1 en la peor (coral) y 11.73:1 en `contraste`. */
.btn-info,
.btn-info:focus {
background-color: var(--gp-accent-soft);
border-color: var(--gp-accent);
color: var(--gp-accent-dark);
}
.btn-info:hover,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
background-color: var(--gp-accent);
border-color: var(--gp-accent-dark);
color: var(--gp-accent-fg);
}