/* =========================================================
CSS ISOLADO PARA TABS MODERNAS - CustomizacaoComponentes.css
Prefixo: sia-modern- para evitar conflitos
========================================================= */
/* Variáveis CSS */
:root {
--sia-primary: #667eea;
--sia-primary-dark: #764ba2;
--sia-danger: #dc3545;
--sia-border: #cbd5e1;
--sia-text: #1e293b;
--sia-text-muted: #64748b;
--sia-tab-bg: #e2e8f0;
--sia-white: #ffffff;
/* Gradientes para Tabs e Accordions */
--sia-grad-active-tab: linear-gradient(180deg, #ffffff 0%, #dbeafe 100%);
--sia-grad-header: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}
/* Suporte para classes de botão em componentes DevExpress */
.btn-primary.dx-button,
.dx-button.btn-primary,
.dx-button.btn-primary.btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border: none !important;
color: #fff !important;
}
.btn-primary.dx-button .dx-button-content,
.dx-button.btn-primary .dx-button-content,
.dx-button.btn-primary .dx-button-text,
.dx-button.btn-primary .dx-icon {
color: #fff !important;
}
/* Estilo para o menu de Ações (Root) */
.menuAcoesGrid .dx-menu-item.btn-primary.dx-menu-item-has-submenu {
/*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;*/
color: #fff !important;
border-radius: 4px !important;
padding: 2px 4px !important;
}
.menuAcoesGrid .dx-menu-item.btn-primary.dx-menu-item-has-submenu .dx-menu-item-text,
.menuAcoesGrid .dx-menu-item.btn-primary.dx-menu-item-has-submenu .dx-icon {
color: #fff !important;
}
/* Estilo para itens de menu em submenus (overlays) com classe btn-primary */
.btn-primary-submenu .dx-submenu,
.dx-menu-item.btn-primary .dx-icon,
.dx-menu-item.btn-primary .dx-menu-item-text {
color: #fff !important;
/* Texto e ícones brancos para máxima legibilidade */
}
/* Fundo do submenu (lista suspensa) */
.btn-primary-submenu .dx-submenu,
.menuAcoesGrid .dx-submenu {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border: none !important;
}
/* Itens individuais dentro do submenu */
.dx-menu-item.btn-primary {
transition: background-color 0.2s ease;
}
/* Hover nos itens da lista do menu */
.dx-menu-item.btn-primary.dx-state-hover,
.dx-menu-item.btn-primary.dx-state-focused {
background-color: rgba(255, 255, 255, 0.15) !important;
/* Destaque sutil no hover */
}
.btn-danger.dx-button,
.dx-button.btn-danger {
background-color: var(--sia-danger) !important;
border-color: var(--sia-danger) !important;
color: #fff !important;
}
/* Estilo para itens de menu com as classes primary/danger */
.btn-primary.dx-menu-item,
.menuAcoesGrid .dx-menu-item.btn-primary,
.menuAcoesGrid .dx-menu-item.btn-primary .dx-menu-item-text,
.menuAcoesGrid .dx-menu-item.btn-primary .dx-icon {
color: var(--sia-primary) !important;
}
.btn-danger.dx-menu-item,
.menuAcoesGrid .dx-menu-item.btn-danger,
.menuAcoesGrid .dx-menu-item.btn-danger .dx-menu-item-text,
.menuAcoesGrid .dx-menu-item.btn-danger .dx-icon {
color: var(--sia-danger) !important;
}
/* ============================================
TABS MODERNAS - NÍVEL PRINCIPAL (Listagem/Registro)
============================================ */
/* Container das tabs */
.sia-modern-tabs-container {
background: var(--sia-tab-bg);
padding: 8px 12px 0 12px;
border-bottom: 1px solid var(--sia-border);
}
.sia-modern-tabs-container .nav-tabs {
border-bottom: none;
background: transparent;
display: flex;
gap: 6px;
margin: 0;
padding: 0;
}
/* Cada aba */
.sia-modern-tabs-container .nav-tabs > li {
margin-bottom: 0;
float: none;
display: flex !important;
align-items: flex-end !important;
flex-shrink: 0 !important;
}
.sia-modern-tabs-container .nav-tabs > li > a {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 8px 8px 0 0;
border: 1px solid #cbd5e1;
border-bottom: none;
background: linear-gradient(180deg, #fdfbfb 0%, #ebedee 100%);
white-space: nowrap !important;
color: #64748b;
font-size: 13px;
font-weight: 500;
margin-right: 4px;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.sia-modern-tabs-container .nav-tabs > li > a:hover {
background: rgba(255, 255, 255, 0.5);
border-color: transparent;
color: #475569;
}
/* Aba ativa - COM GRADIENTE */
.sia-modern-tabs-container .nav-tabs > li.active > a,
.sia-modern-tabs-container .nav-tabs > li.active > a:hover,
.sia-modern-tabs-container .nav-tabs > li.active > a:focus {
background: var(--sia-grad-active-tab) !important;
color: var(--sia-primary) !important;
font-weight: 700;
border: none !important;
border-left: 1px solid var(--sia-border) !important;
border-right: 1px solid var(--sia-border) !important;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
position: relative;
}
/* Remover qualquer pseudo-elemento que possa criar linha */
.sia-modern-tabs-container .nav-tabs > li.active > a::before,
.sia-modern-tabs-container .nav-tabs > li.active > a::after {
display: none !important;
content: none !important;
}
/* Ícone dentro da aba */
.sia-modern-tabs-container .nav-tabs > li > a i,
.sia-modern-tabs-container .nav-tabs > li > a .fa {
font-size: 16px;
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Botão "Ir para tela de entrada" */
.sia-modern-tabs-container .nav-tabs > li.pull-right {
margin-left: auto;
}
.sia-modern-tabs-container .nav-tabs > li.pull-right .btn {
font-size: 12px;
padding: 8px 16px;
border-radius: 4px;
}
/* ============================================
SUB-TABS MODERNAS (Dentro de Registro)
============================================ */
.sia-modern-subtabs-container {
background: var(--sia-tab-bg);
padding: 6px 12px 0 12px;
border-bottom: 1px solid var(--sia-border);
}
.sia-modern-subtabs-container .nav-tabs {
border-bottom: none;
background: transparent;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
gap: 4px;
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
/* Melhoria visual para o scroll */
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.sia-modern-subtabs-container .nav-tabs::before,
.sia-modern-subtabs-container .nav-tabs::after {
display: none !important;
}
/* Estilo do Scrollbar apenas para as abas */
.sia-modern-subtabs-container .nav-tabs::-webkit-scrollbar {
height: 4px;
/* Scroll bem fino */
}
.sia-modern-subtabs-container .nav-tabs::-webkit-scrollbar-track {
background: transparent;
}
.sia-modern-subtabs-container .nav-tabs::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.sia-modern-subtabs-container .nav-tabs::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.4);
}
.sia-modern-subtabs-container .nav-tabs > li {
margin-bottom: 0;
float: none;
flex-shrink: 0;
}
.sia-modern-subtabs-container .nav-tabs > li > a {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
border-radius: 6px 6px 0 0 !important;
border: 1px solid #cbd5e1;
border-bottom: none;
background: linear-gradient(180deg, #fdfbfb 0%, #ebedee 100%);
color: #64748b;
font-size: 12px;
font-weight: 500;
margin-right: 4px;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
position: relative;
/* overflow: hidden; removido para evitar cortes indesejados */
white-space: nowrap !important;
/* Ensure the top line follows border-radius if needed, though radius is top-only */
}
/* Linha superior nas abas inativas (ROXA) */
.sia-modern-subtabs-container .nav-tabs > li > a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: #667eea;
/* Roxo */
border-radius: 6px 6px 0 0 !important;
opacity: 1;
/* Solido */
}
.sia-modern-subtabs-container .nav-tabs > li > a:hover::after {
background: #5a67d8;
/* Roxo ligeiramente mais escuro no hover */
opacity: 1;
}
.sia-modern-subtabs-container .nav-tabs > li > a:hover {
background: rgba(255, 255, 255, 0.5);
color: #475569;
}
/* Sub-aba ativa - COM GRADIENTE */
.sia-modern-subtabs-container .nav-tabs > li.active > a,
.sia-modern-subtabs-container .nav-tabs > li.active > a:hover,
.sia-modern-subtabs-container .nav-tabs > li.active > a:focus {
background: var(--sia-grad-active-tab) !important;
color: var(--sia-primary) !important;
font-weight: 600;
border: 1px solid var(--sia-border) !important;
border-bottom-color: transparent !important;
border-top: none !important;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
position: relative;
}
/* Barra superior azul na sub-tab ativa */
.sia-modern-subtabs-container .nav-tabs > li.active > a::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--sia-primary);
border-radius: 6px 6px 0 0 !important;
}
/* ============================================
OVERRIDE para nav-tabs-custom do AdminLTE
============================================ */
.sia-modern-tabs-container.nav-tabs-custom,
.sia-modern-subtabs-container.nav-tabs-custom {
margin-bottom: 0;
background: var(--sia-tab-bg);
border-radius: 0;
box-shadow: none;
border: none;
border-bottom: 2px solid var(--sia-border) !important;
}
.sia-modern-tabs-container.nav-tabs-custom > .nav-tabs,
.sia-modern-subtabs-container.nav-tabs-custom > .nav-tabs {
border-bottom: none;
background: transparent;
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
width: 100% !important;
max-width: 100% !important;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.sia-modern-tabs-container.nav-tabs-custom > .nav-tabs::before,
.sia-modern-tabs-container.nav-tabs-custom > .nav-tabs::after,
.sia-modern-subtabs-container.nav-tabs-custom > .nav-tabs::before,
.sia-modern-subtabs-container.nav-tabs-custom > .nav-tabs::after {
display: none !important;
}
/* Scrollbar override for this specific context */
.sia-modern-tabs-container.nav-tabs-custom > .nav-tabs::-webkit-scrollbar,
.sia-modern-subtabs-container.nav-tabs-custom > .nav-tabs::-webkit-scrollbar {
height: 4px;
}
.sia-modern-tabs-container.nav-tabs-custom > .nav-tabs::-webkit-scrollbar-track,
.sia-modern-subtabs-container.nav-tabs-custom > .nav-tabs::-webkit-scrollbar-track {
background: transparent;
}
.sia-modern-tabs-container.nav-tabs-custom > .nav-tabs::-webkit-scrollbar-thumb,
.sia-modern-subtabs-container.nav-tabs-custom > .nav-tabs::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.sia-modern-tabs-container.nav-tabs-custom > .nav-tabs > li,
.sia-modern-subtabs-container.nav-tabs-custom > .nav-tabs > li {
margin-right: 0;
float: none !important;
display: flex !important;
flex-shrink: 0 !important;
}
/* Remover estilos padrão do AdminLTE */
.sia-modern-tabs-container.nav-tabs-custom > .nav-tabs > li > a,
.sia-modern-subtabs-container.nav-tabs-custom > .nav-tabs > li > a {
border-radius: 6px 6px 0 0 !important;
white-space: nowrap !important;
display: flex !important;
align-items: center !important;
}
/* Forçar comportamento nos filhos do link (span, i, etc) */
.sia-modern-tabs-container .nav-tabs > li > a *,
.sia-modern-subtabs-container .nav-tabs > li > a * {
white-space: nowrap !important;
}
.sia-modern-tabs-container.nav-tabs-custom > .nav-tabs > li.active {
border-top: none;
}
.sia-modern-tabs-container.nav-tabs-custom > .nav-tabs > li.active > a,
.sia-modern-subtabs-container.nav-tabs-custom > .nav-tabs > li.active > a {
border-top: 1px solid var(--sia-border);
}
/* ============================================
RESPONSIVIDADE
============================================ */
@media (max-width: 768px) {
.sia-modern-tabs-container .nav-tabs,
.sia-modern-subtabs-container .nav-tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sia-modern-tabs-container .nav-tabs > li > a {
padding: 8px 14px;
font-size: 12px;
white-space: nowrap;
}
.sia-modern-subtabs-container .nav-tabs > li > a {
padding: 6px 10px;
font-size: 11px;
white-space: nowrap;
}
}
/* ============================================
ACCORDIONS MODERNOS
============================================ */
/* Container do accordion moderno */
.sia-modern-accordion {
border: 1px solid var(--sia-border);
border-radius: 8px;
margin-bottom: 16px;
overflow: hidden;
background: var(--sia-white);
}
/* Header do accordion - COM GRADIENTE */
.sia-modern-accordion > legend,
.sia-modern-accordion-header,
fieldset.sia-modern-accordion > legend {
background: var(--sia-grad-header) !important;
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
padding: 15px 20px !important;
display: flex !important;
align-items: center;
justify-content: space-between;
cursor: pointer;
border-bottom: 1px solid var(--sia-border) !important;
transition: all 0.2s ease;
margin-bottom: 0 !important;
font-size: 14px;
font-weight: 700;
color: var(--sia-text);
width: 100%;
border-radius: 10px 10px 0 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}
/* Hover no accordion header */
.sia-modern-accordion > legend:hover,
.sia-modern-accordion-header:hover,
fieldset.sia-modern-accordion > legend:hover {
filter: contrast(1.05);
background: linear-gradient(180deg, #f1f5f9 0%, #dfe6ec 100%) !important;
}
/* Link dentro da legend */
.sia-modern-accordion > legend > a,
.sia-modern-accordion-header a {
text-decoration: none;
color: var(--sia-text);
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.sia-modern-accordion > legend > a:hover,
.sia-modern-accordion-header a:hover {
text-decoration: none;
color: var(--sia-primary);
}
/* Icone do accordion */
.sia-modern-accordion > legend .fa,
.sia-modern-accordion-header .fa {
transition: transform 0.3s ease;
font-size: 14px;
color: #64748b;
}
/* Icone quando aberto */
.sia-modern-accordion.open > legend .fa-plus-circle,
.sia-modern-accordion-header[aria-expanded="true"] .fa-plus-circle {
transform: rotate(45deg);
}
/* Trocar + por chevron down moderno */
.sia-modern-accordion > legend .fa-plus-circle:before,
.sia-modern-accordion-header .fa-plus-circle:before {
content: "\f107";
/* fa-angle-down */
}
/* Conteudo do accordion */
.sia-modern-accordion .box-body,
.sia-modern-accordion-content {
padding: 20px;
border-top: none;
}
/* Bootstrap controla a exibição do collapse via .in class */
/* Fieldset dentro de sia-modern-accordion perde bordas */
.sia-modern-accordion,
fieldset.sia-modern-accordion {
display: block;
border: 1px solid var(--sia-border) !important;
border-radius: 8px;
margin-bottom: 16px;
background: var(--sia-white);
padding: 0;
}
/* Legend como header */
fieldset.sia-modern-accordion > legend {
background: #f8fafc;
padding: 12px 18px;
margin: 0;
border-bottom: 1px solid var(--sia-border);
border-radius: 8px 8px 0 0;
font-size: 14px;
font-weight: 600;
}
/* Estilo quando o conteúdo está expandido */
fieldset.sia-modern-accordion .panel-collapse.in + .box-body,
fieldset.sia-modern-accordion .panel-collapse.in {
display: block;
}
/* Box-body dentro do accordion */
fieldset.sia-modern-accordion .box-body.boxDadosADD {
padding: 0;
border: none;
}
fieldset.sia-modern-accordion .panel-collapse > .box-body {
padding: 20px;
}
/* Icone do chevron */
fieldset.sia-modern-accordion .fa-plus-circle {
transition: transform 0.3s ease;
margin-left: 8px;
}
/* Rotação do ícone quando aberto */
fieldset.sia-modern-accordion .panel-collapse.in ~ legend .fa-plus-circle,
fieldset.sia-modern-accordion[data-open="true"] .fa-plus-circle {
transform: rotate(45deg);
}
/* ============================================
BOTÕES DA TOOLBAR SUPERIOR
============================================ */
/* Container dos botões */
.cadastropg-nova-ui {
display: flex !important;
gap: 12px;
padding: 12px 24px !important;
background: #ffffff !important;
border-bottom: 2px solid var(--sia-border);
align-items: center;
flex-wrap: wrap !important;
min-height: 60px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 900 !important;
width: 100%;
/* Animação Suave de Entrada */
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: opacity, transform;
}
/* Classe para ativar a barra */
.cadastropg-nova-ui.is-visible {
opacity: 1 !important;
transform: translateY(0) !important;
}
.cadastropg {
display: flex !important;
gap: 12px;
padding: 12px 24px !important;
background: #ffffff !important;
border-bottom: 2px solid var(--sia-border);
align-items: center;
flex-wrap: wrap !important;
min-height: 60px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 900 !important;
width: 100%;
/* Animação Suave de Entrada */
/* opacity: 0;*/
transform: translateY(-10px);
transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: opacity, transform;
background: rgb(255, 255, 255);
opacity: 1;
}
/* Classe para ativar a barra */
.cadastropg.is-visible {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* Estilo quando está Sticky */
.sticky-toolbar-js {
position: fixed !important;
top: 0px !important;
/* Altura do Header AdminLTE */
/* Altura exata do header */
z-index: 1020 !important;
/* Acima das abas e grids, abaixo do main-header (1030) */
background: #ffffff !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
padding: 10px 24px !important;
border-bottom: 2px solid #ffffff !important;
opacity: 1 !important;
transition: all 0.2s ease;
}
.sticky-placeholder {
display: none;
width: 100%;
visibility: hidden;
}
/* CORREÇÃO DE ALINHAMENTO INTERNO DOS BOTÕES DEVEXPRESS */
.cadastropg-nova-ui .dx-button .dx-button-content,
.cadastropgFixo .dx-button .dx-button-content {
display: flex !important;
align-items: center !important;
justify-content: center !important;
/* Gap removido - usando margin no icone */
padding: 0 !important;
/* Remove padding interno extra do DevExpress */
}
/* Garante que o ícone fique centralizado e tenha espaçamento garantido */
.cadastropg-nova-ui .dx-button .dx-icon,
.cadastropg-nova-ui .dx-button .fa,
.cadastropgFixo .dx-button .dx-icon,
.cadastropgFixo .dx-button .fa {
display: inline-block !important;
vertical-align: middle !important;
margin: 0 !important;
margin-right: 8px !important;
/* FORÇA O ESPAÇAMENTO VISUAL */
line-height: 1 !important;
}
/* Garante que o texto fique centralizado */
.cadastropg-nova-ui .dx-button .dx-button-text,
.cadastropgFixo .dx-button .dx-button-text {
display: inline-block !important;
vertical-align: middle !important;
line-height: 1 !important;
margin: 0 !important;
}
/* Esconder texto em telas pequenas para manter a grade compacta */
@media screen and (max-width: 780px) {
.cadastropg-nova-ui .dx-button-text,
.cadastropg-nova-ui span:not(.fa):not(.glyphicon),
.cadastropgFixo .dx-button-text,
.cadastropgFixo span:not(.fa):not(.glyphicon) {
display: none !important;
}
.cadastropg-nova-ui,
.cadastropgFixo {
padding: 5px 10px !important;
gap: 5px;
justify-content: center;
}
}
[class^="btnH-"]:hover,
[class*=" btnH-"]:hover {
border-color: #0d6efd !important;
color: #0d6efd !important;
background: #f8f9fa !important;
text-decoration: none;
}
[class^="btnH-"]:active,
[class*=" btnH-"]:active {
transform: translateY(1px);
}
/* Botão primário - Gravar (destaque azul) */
.btnH-gravar {
background: #0d6efd !important;
border-color: #0d6efd !important;
color: var(--sia-white) !important;
font-weight: 500 !important;
}
.btnH-gravar:hover {
background: #0b5ed7 !important;
border-color: #0a58ca !important;
color: var(--sia-white) !important;
}
/* Botão desabilitado */
/* Botão desabilitado - Forçar visual neutro/cinza */
[class^="btnH-"]:disabled,
[class*=" btnH-"]:disabled,
[class^="btnH-"].disabled,
[class*=" btnH-"].disabled,
.dx-state-disabled [class^="btnH-"],
[class^="btnH-"].dx-state-disabled,
[class*=" btnH-"].dx-state-disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
pointer-events: none !important;
background: #e9ecef !important;
/* Fundo cinza claro */
border-color: #dee2e6 !important;
/* Borda neutra */
color: #adb5bd !important;
/* Texto cinza */
box-shadow: none !important;
}
/* Responsividade para botões */
@media (max-width: 768px) {
.cadastropg-nova-ui,
.cadastropgFixo {
padding: 8px 12px;
gap: 6px;
}
[class^="btnH-"],
[class*=" btnH-"] {
padding: 6px 12px !important;
font-size: 12px !important;
}
[class^="btnH-"]::before,
[class*=" btnH-"]::before {
font-size: 14px;
}
}
/* ============================================
PANEL MODERNO - ATRIBUTOS DO PRODUTO
============================================ */
.sia-modern-panel {
border: none !important;
border-radius: 8px !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
margin-bottom: 20px !important;
overflow: hidden !important;
}
.sia-modern-panel .panel-heading {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border: none !important;
padding: 16px 20px !important;
border-radius: 0 !important;
}
.sia-modern-panel .panel-title {
color: var(--sia-white) !important;
font-size: 16px !important;
font-weight: 500 !important;
margin: 0 !important;
display: flex;
align-items: center;
gap: 10px;
}
.sia-modern-panel .panel-title i {
font-size: 18px;
}
.sia-modern-panel .panel-body {
padding: 20px !important;
background: var(--sia-white) !important;
}
/* Responsividade para panel */
@media (max-width: 768px) {
.sia-modern-panel .panel-heading {
padding: 12px 16px !important;
}
.sia-modern-panel .panel-title {
font-size: 14px !important;
}
.sia-modern-panel .panel-body {
padding: 16px !important;
}
}
/* ============================================
AJUSTES ESPECÍFICOS - BOTÕES E INPUTS DE ATRIBUTOS
============================================ */
/* Ícone de Ajuda (Interrogação) - Estilo Botão Redondo */
.input-group-addon i.fa-question-circle {
color: #29b6f6 !important;
/* Azul claro vibrante */
background: #e1f5fe;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.2s;
}
.input-group-addon i.fa-question-circle:hover {
background: #29b6f6;
color: #fff !important;
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.input-group-addon {
background: transparent !important;
border: none !important;
padding-left: 5px !important;
}
/* Quando aberto, remove margin bottom e radius inferior para colar no conteúdo */
.sia-modern-accordion.open > legend,
fieldset.sia-modern-accordion[aria-expanded="true"] > legend {
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
margin-bottom: 0 !important;
background: #e2e8f0 !important;
}
/* Ícones do Accordion (Info, Fiscal, etc) */
.sia-modern-accordion > legend i:first-child,
fieldset.sia-modern-accordion > legend i:first-child {
color: #764ba2;
/* Azul corporativo */
font-size: 16px;
margin-right: 10px;
/* Adicionar um fundo círculo opcional se quiser igual ao print exato */
}
/* Correção Específica para Botão Fornecedor (Primário) */
/* ============================================
FUNCIONALIDADES ADICIONAIS (Expandir / Fullscreen)
============================================ */
/* Botão Expandir (Estilo FontAwesome fallback) */
.btnH-expandir {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid #dcdcdc;
border-radius: 6px;
background: #f9f9f9 linear-gradient(to bottom, #fff, #f0f0f0);
margin-left: 8px;
color: #444;
transition: all 0.2s;
}
.btnH-expandir:hover,
.btnH-expandir.active {
background: #e2e8f0;
border-color: var(--sia-primary);
color: var(--sia-primary);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.btnH-expandir::before {
content: '\f065';
/* fa-expand */
font-family: FontAwesome;
font-size: 16px;
}
.btnH-expandir.active::before {
content: '\f066';
/* fa-compress */
}
/* FULLSCREEN MODE ENGINE */
body.sia-fullscreen-active {
overflow: hidden !important;
}
.sia-fullscreen-mode {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 20000 !important;
background: #f8fafc !important;
overflow-y: auto !important;
padding: 0 !important;
margin: 0 !important;
}
.sia-fullscreen-mode .cadastropg-nova-ui {
padding: 16px 30px !important;
border-radius: 0 !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
/* Sticky Nativo para Fullscreen (Container com overflow) */
position: -webkit-sticky !important;
/* Safari */
position: sticky !important;
top: 0 !important;
}
.skin-black .nav-tabs-custom > .nav-tabs > li.active {
border-top-color: rgba(255, 255, 255, .15);
}
/* ============================================
ÁREA DE FILTROS E PESQUISA MODERNA
============================================ */
/* Inputs e Selects de Filtro (#Campo, #TipoFiltro, #Valor) */
#PesquisarLista select.form-control,
#PesquisarLista input.form-control,
.dx-texteditor-input,
.dx-textbox {
height: 40px !important;
/* Altura padronizada */
line-height: normal !important;
border-radius: 8px !important;
border: 1px solid #dee2e6 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
background-color: #ffffff !important;
color: #495057 !important;
font-size: 14px !important;
transition: all 0.2s ease-in-out;
}
#PesquisarLista select.form-control:focus,
#PesquisarLista input.form-control:focus,
.dx-texteditor-input:focus,
.dx-textbox:focus,
.dx-state-focused {
border-color: #6f42c1 !important;
/* Roxo para foco */
box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.15) !important;
background-color: #d9e0ff !important;
color: #000 !important;
/* 🔥 Fonte preta */
}
/* Botão Pesquisar (#btmPesquisaListaGeral) */
#btmPesquisaListaGeral {
height: 40px !important;
border-radius: 8px !important;
background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%) !important;
/* Gradiente Roxo */
border: none !important;
color: #ffffff !important;
font-weight: 600 !important;
font-size: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px;
/* Espaço entre ícone e texto */
box-shadow: 0 4px 6px rgba(111, 66, 193, 0.25);
transition: all 0.2s ease;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#btmPesquisaListaGeral:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(111, 66, 193, 0.35);
background: linear-gradient(135deg, #7d52bf 0%, #663ab3 100%) !important;
}
#btmPesquisaListaGeral:active {
transform: translateY(0);
}
#btmPesquisaListaGeral .fa {
font-size: 16px;
margin-right: 5px;
}
/* Ajuste nos Placeholders */
#PesquisarLista input::placeholder {
color: #adb5bd;
font-weight: 400;
}
/* =========================================================
MODERNIZAÇÃO HEADER (AdminLTE Custom) - SAVWINWEB
========================================================= */
/* Fundo do Header e Logo com Gradiente Roxo Moderno (Padronizado com Panel) */
.main-header .navbar,
.main-header .logo {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border-bottom: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
/* Sombra mais marcada para profundidade */
}
/* Logo mais elegante */
.main-header .logo {
font-family: 'Segoe UI', 'Helvetica Neue', sans-serif !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.main-header .logo-mini {
font-weight: 700;
}
/* Navbar (Menu Superior) - Ajuste de Altura Total */
.navbar-custom-menu > .navbar-nav > li > a {
color: #ffffff !important;
opacity: 0.9;
transition: all 0.3s ease;
height: 50px !important;
/* Ocupa toda altura do header */
line-height: 20px !important;
/* Reset de line-height para alinhar com padding padrão */
padding: 15px !important;
/* Padding padrão do AdminLTE restaurado */
margin: 0 !important;
/* Remove margens que encolhiam o botão */
border-radius: 0 !important;
/* Remove arredondamento para ocupar tudo */
}
.navbar-custom-menu > .navbar-nav > li > a:hover,
.navbar-custom-menu > .navbar-nav > li > a:focus,
.navbar-custom-menu > .navbar-nav > li.open > a {
background: rgba(0, 0, 0, 0.1) !important;
/* Escurecer levemente ao invés de clarear */
opacity: 1;
transform: none;
/* Remove pulo vertical que pode quebrar alinhamento */
}
/* Toggle Sidebar (Hamburguer) */
.main-header .sidebar-toggle {
color: #ffffff !important;
transition: background 0.3s;
}
.main-header .sidebar-toggle:hover {
background: rgba(255, 255, 255, 0.15) !important;
}
/* Texto de Loja/Usuário */
.navbar-custom-menu #pLoja {
color: #fff !important;
font-weight: 500 !important;
font-size: 10px !important;
opacity: 0.95;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
margin: 0 !important;
/* Remove margens padrão e customizadas */
line-height: 50px !important;
/* Centraliza verticalmente na altura do header (50px) */
display: inline-block;
vertical-align: middle;
white-space: nowrap;
/* Evita quebra de linha do texto */
}
/* Correção específica para o layout quebrado com float:left e
*/
.navbar-custom-menu[style*="float:left"] br,
.navbar-custom-menu[style*="float: left"] br {
display: none !important;
/* Remove o
que está empurrando o texto */
}
.navbar-custom-menu[style*="float:left"],
.navbar-custom-menu[style*="float: left"] {
height: 50px !important;
/* Força altura do header */
display: flex;
align-items: center;
}
/* Badges e Labels refinados */
.navbar-nav > .notifications-menu > .dropdown-toggle > .label {
top: 6px !important;
right: 4px !important;
font-size: 10px !important;
border-radius: 12px;
padding: 3px 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* =========================================================
MODERNIZAÇÃO SIDEBAR (Menu Lateral) - SAVWINWEB
========================================================= */
/* Fundo da Sidebar Principal - Gradiente Deep Navy */
.main-sidebar,
.left-side {
background: linear-gradient(180deg, #1e1e2d 0%, #2a2a3c 100%) !important;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
background-color: #1e1e2d !important;
/* Fallback */
}
/* User Panel (Topo onde fica a logo/foto) */
.user-panel {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
background-color: #1e1e2d !important;
padding: 20px 15px !important;
}
/* Cabeçalho "Menu" */
.sidebar-menu > li.header {
background-color: #1e1e2d !important;
color: #74788d !important;
/* Texto cinza sutil */
font-size: 11px !important;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
padding: 15px 25px 5px 25px !important;
border-bottom: none !important;
}
/* Itens do Menu Principal */
.sidebar-menu > li > a {
/* padding: 12px 20px !important;*/
color: #a6b0cf !important;
/* Texto padrão cinza claro */
border-left: 3px solid transparent !important;
/* Prepara para borda ativa */
transition: all 0.2s ease;
font-size: 14px;
font-family: 'Segoe UI', sans-serif !important;
font-weight: 500;
}
/* Padronização dos Ícones (Visual Clean) */
.sidebar-menu > li > a > i {
width: 20px;
color: #79829c !important;
/* Ícone cinza azulado neutro */
margin-right: 12px;
font-size: 16px;
transition: color 0.2s;
text-align: center;
}
/* Efeito Hover nos Ícones e Links */
.sidebar-menu > li:hover > a {
background-color: #262b3c !important;
/* Levemente mais claro */
color: #ffffff !important;
}
.sidebar-menu > li:hover > a > i {
color: #ffffff !important;
transform: scale(1.1);
/* Micro-interação */
}
/* =======================================================
ESTADO ATIVO (Selecionado) - O Destaque Moderno
======================================================= */
.sidebar-menu > li.active > a {
background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.05) 100%) !important;
color: #ffffff !important;
border-left-color: #667eea !important;
/* Borda roxa esquerda vibrante */
}
/* Ícone Ativo recebe a cor principal do tema */
.sidebar-menu > li.active > a > i {
color: #667eea !important;
text-shadow: 0 0 10px rgba(102, 126, 234, 0.4);
}
/* Submenus (Treeview) */
.sidebar-menu .treeview-menu {
background-color: #151521 !important;
/* Mais escuro para profundidade */
padding-left: 0 !important;
}
.sidebar-menu .treeview-menu > li > a {
color: #79829c !important;
padding: 10px 20px 10px 55px !important;
/* Indentação clara de hierarquia */
font-size: 13px;
opacity: 0.8;
}
.sidebar-menu .treeview-menu > li > a:hover {
color: #ffffff !important;
opacity: 1;
}
/* Ajuste na imagem da logo no menu para ficar elegante */
.user-panel > .image img {
border-radius: 4px;
/* Levemente arredondado se for quadrada */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
/* Labels e Badges na Sidebar */
.sidebar-menu .label,
.sidebar-menu .badge {
margin-top: 2px;
padding: 3px 6px;
border-radius: 4px;
}
/* =========================================================
CORREÇÃO VISUAL SIDEBAR - REMOÇÃO DE CORES ANTIGAS
========================================================= */
/* Forçar reset de cores nos itens do menu (Remove classes como text-warning/text-yellow) */
.sidebar-menu > li > a span,
.sidebar-menu > li > a i,
.sidebar-menu > li > a,
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon {
color: #b0b8d6 !important;
/* Cor padrão uniforme (Cinza Azulado Claro) */
text-shadow: none !important;
}
/* Manter destaque APENAS no Hover e Active */
.sidebar-menu > li:hover > a span,
.sidebar-menu > li:hover > a i,
.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a span,
.sidebar-menu > li.active > a,
.sidebar-menu > li.active > a i {
color: #ffffff !important;
}
/* Ícone do item ativo com destaque sutil */
.sidebar-menu > li.active > a i {
color: #a4b1ff !important;
}
/* Fundo da Sidebar - Ajuste para tom sólido premium mais escuro */
.main-sidebar,
.left-side {
background: #1e1e2f !important;
/* Fundo sólido e limpo */
border-right: 1px solid rgba(255, 255, 255, 0.02);
}
/* Menu Header (ex: "MENU") mais discreto */
.sidebar-menu > li.header {
background: #181824 !important;
color: #5c6075 !important;
}
/* =========================================================
EFEITOS ESPECIAIS PREMIUM - ÍCONES (HEADER & SIDEBAR)
========================================================= */
/* --- SIDEBAR (Menu Lateral) --- */
/* Base do ícone: Transição suave e geometria ajustada */
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > span.fa {
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* Efeito elástico sutil */
width: 24px;
/* Largura fixa para alinhamento perfeito */
text-align: center;
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
/* HOVER: O Ícone "acorda" */
.sidebar-menu > li:hover > a > .fa,
.sidebar-menu > li:hover > a > .glyphicon {
transform: translateX(4px) scale(1.15);
/* Pulo para direita e aumento */
color: #fff !important;
/* Efeito Neon Roxo/Branco */
text-shadow: 0 0 5px rgba(255, 255, 255, 0.6), 0 0 10px rgba(111, 66, 193, 0.4);
}
/* DESTAQUE DOURADO (Favoritos, etc) */
.sidebar-menu > li > a.menu-item-gold {
color: #ffc107 !important;
/* Amarelo Vibrante */
font-weight: 600;
}
.sidebar-menu > li > a.menu-item-gold > .fa,
.sidebar-menu > li > a.menu-item-gold > .glyphicon {
color: #ffc107 !important;
text-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
}
.sidebar-menu > li > a.menu-item-gold:hover {
color: #fff !important;
/* Fica branco no hover */
background: rgba(255, 193, 7, 0.2) !important;
}
.sidebar-menu > li > a.menu-item-gold:hover > .fa {
color: #fff !important;
}
/* ACTIVE: O ícone brilha permanentemente */
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .glyphicon {
transform: scale(1.1);
color: #9d8cff !important;
/* Roxo claro brilhante */
text-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
}
/* --- HEADER (Menu Superior) --- */
/* Base dos ícones do topo */
.navbar-custom-menu > .navbar-nav > li > a > .fa,
.navbar-custom-menu > .navbar-nav > li > a > .glyphicon {
font-size: 20px !important;
/* Tamanho equilibrado (grande, mas seguro) */
transition: transform 0.3s ease, text-shadow 0.3s ease;
}
/* HOVER Topo: Rotação suave ou pulso */
.navbar-custom-menu > .navbar-nav > li > a:hover > .fa,
.navbar-custom-menu > .navbar-nav > li > a:hover > .glyphicon {
transform: scale(1.2) rotate(5deg);
/* Leve "tilt" divertido */
color: #ffffff;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
/* Brilho solar */
}
/* Ajuste específico para ícone de Notificação (Sino) para balançar */
.navbar-custom-menu > .navbar-nav > li.notifications-menu > a:hover > .fa-bell-o,
.navbar-custom-menu > .navbar-nav > li.notifications-menu > a:hover > .fa-bell {
animation: swing-icon 0.5s ease-in-out forwards;
}
/*.dx-toolbar-items-container .dx-group-panel-message {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border: none !important;
}*/
.dx-toolbar-items-container {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border: none !important;
}
.skin-blue .dx-header-row {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border: none !important;
}
/* Keyframes para animação de balanço do sino */
@keyframes swing-icon {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
/* Estilos base para todos os botões btnH-* */
[class^="btnH-"],
[class*=" btnH-"] {
display: inline-flex !important;
align-items: center;
/* gap removido propositalmente */
padding: 10px 20px !important;
/* Aumentado de 8px 16px */
background: var(--sia-white) !important;
border: 1px solid #dee2e6 !important;
border-radius: 8px !important;
/* Leve ajuste no radius */
font-size: 14px !important;
/* Aumentado de 13px */
/*font-weight: 400 !important;*/
/* De 400 para 600 para destaque */
/* color: #212529 !important;*/
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
text-decoration: none;
position: relative;
flex-shrink: 0 !important;
height: 38px;
}
/* Estado Normal */
.btn-PadraoRoxo {
color: white !important;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border: none !important;
transition: opacity 0.3s ease;
/* Suaviza a transição */
}
/* Hover, Focus e Estados Ativos */
.btn-PadraoRoxo:hover,
.btn-PadraoRoxo:focus,
.btn-PadraoRoxo:active,
.btn-PadraoRoxo.active,
.open .dropdown-toggle.btn-PadraoRoxo {
color: white !important;
/* Escurecemos um pouco o gradiente no hover para dar feedback visual */
background: linear-gradient(135deg, #5a6fd6 0%, #694291 100%) !important;
border: none !important;
outline: none !important;
}
.btn-PadraoRoxo:active,
.btn-PadraoRoxo.active,
.open .dropdown-toggle.btn-PadraoRoxo {
background-image: none !important;
background-color: #694291 !important;
/* Cor sólida para o clique profundo */
}
/* Estado Desabilitado */
.btn-PadraoRoxo.disabled,
.btn-PadraoRoxo[disabled],
fieldset[disabled] .btn-PadraoRoxo,
.btn-PadraoRoxo.disabled:hover,
.btn-PadraoRoxo[disabled]:hover,
fieldset[disabled] .btn-PadraoRoxo:hover,
.btn-PadraoRoxo.disabled:focus,
.btn-PadraoRoxo[disabled]:focus,
fieldset[disabled] .btn-PadraoRoxo:focus,
.btn-PadraoRoxo.disabled:active,
.btn-PadraoRoxo[disabled]:active,
fieldset[disabled] .btn-PadraoRoxo:active,
.btn-PadraoRoxo.disabled.active,
.btn-PadraoRoxo[disabled].active,
fieldset[disabled] .btn-PadraoRoxo.active {
background: #a29bfe !important;
/* Roxo desbotado para indicar inatividade */
opacity: 0.65;
border: none !important;
cursor: not-allowed;
}
/* Badge dentro do botão */
.btn-PadraoRoxo .badge {
color: #764ba2 !important;
background-color: white !important;
}
/* Sobrescrevendo a classe base Primary */
.btn-primary {
color: #fff !important;
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
background-color: #764ba2 !important;
/* Fallback */
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
/* Hover e Foco */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
color: #fff !important;
background-image: linear-gradient(135deg, #5a6fd6 0%, #694291 100%) !important;
background-color: #694291 !important;
border: none !important;
transform: translateY(-1px);
/* Efeito sutil de flutuação */
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
}
/* Estado Ativo/Click */
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary.active:focus,
.btn-primary.active:hover {
background-image: linear-gradient(135deg, #4c5eb3 0%, #58377a 100%) !important;
transform: translateY(0);
}
/* Estado Desabilitado */
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus {
background-image: none !important;
background-color: #a29bfe !important;
border: none !important;
opacity: 0.40;
box-shadow: none;
}
/* Ajuste para Badges dentro do Primary */
.btn-primary .badge {
color: #764ba2 !important;
background-color: #fff !important;
}
/* Sobrescrevendo a classe base Info (Claro para Escuro) */
.btn-info {
color: #fff !important;
/* Invertido: Ciano (#00cec9) -> Azul (#0984e3) */
background-image: linear-gradient(135deg, #00cec9 0%, #0984e3 100%) !important;
background-color: #0984e3 !important;
/* Fallback */
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
/* Hover e Foco */
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
color: #fff !important;
/* Escurecido levemente mantendo Claro -> Escuro */
background-image: linear-gradient(135deg, #00b8b4 0%, #0875c9 100%) !important;
background-color: #0875c9 !important;
border: none !important;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
}
/* Estado Ativo/Click */
.btn-info:active:focus,
.btn-info:active:hover,
.btn-info.active:focus,
.btn-info.active:hover {
background-image: linear-gradient(135deg, #00a19d 0%, #0766b0 100%) !important;
transform: translateY(0);
}
/* Estado Desabilitado */
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus {
background-image: none !important;
background-color: #81ecec !important;
border: none !important;
opacity: 0.40;
box-shadow: none;
}
/* Ajuste para Badges dentro do Info */
.btn-info .badge {
color: #0984e3 !important;
background-color: #fff !important;
}
/* Sobrescrevendo a classe base Success (Claro para Escuro) */
.btn-success {
color: #fff !important;
/* Invertido: Claro (#2ecc71) -> Escuro (#27ae60) */
background-image: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
background-color: #27ae60 !important;
/* Fallback */
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
/* Hover e Foco */
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
color: #fff !important;
/* Escurecido mantendo a lógica Claro -> Escuro */
background-image: linear-gradient(135deg, #27ad60 0%, #219150 100%) !important;
background-color: #219150 !important;
border: none !important;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
}
/* Estado Ativo/Click */
.btn-success:active:focus,
.btn-success:active:hover,
.btn-success.active:focus,
.btn-success.active:hover {
background-image: linear-gradient(135deg, #229954 0%, #1e8449 100%) !important;
transform: translateY(0);
}
/* Estado Desabilitado */
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success {
background-image: none !important;
background-color: #58d68d !important;
border: none !important;
opacity: 0.40;
box-shadow: none;
cursor: not-allowed;
}
/* Ajuste para Badges dentro do Success */
.btn-success .badge {
color: #27ae60 !important;
background-color: #fff !important;
}
/* Sobrescrevendo a classe base Danger (Mais vibrante para Escuro) */
.btn-danger {
color: #fff !important;
/* Início mais claro (#ff5e4d) -> Escuro (#c0392b) */
background-image: linear-gradient(135deg, #ff5e4d 0%, #c0392b 100%) !important;
background-color: #c0392b !important;
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
/* Hover e Foco */
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
color: #fff !important;
/* Hover também ajustado para manter o brilho inicial */
background-image: linear-gradient(135deg, #ff4733 0%, #a93226 100%) !important;
background-color: #a93226 !important;
border: none !important;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
}
/* Estado Ativo/Click */
.btn-danger:active:focus,
.btn-danger:active:hover,
.btn-danger.active:focus,
.btn-danger.active:hover {
/* No clique, voltamos para um tom um pouco mais fechado para simular profundidade */
background-image: linear-gradient(135deg, #e74c3c 0%, #922b21 100%) !important;
transform: translateY(0);
}
/* Estado Desabilitado */
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger {
background-image: none !important;
background-color: #ffbcb0 !important;
/* Salmão mais suave para o estado desativado */
opacity: 0.6;
box-shadow: none;
}
/* Ajuste para Badges dentro do Danger */
.btn-danger .badge {
color: #c0392b !important;
background-color: #fff !important;
}
/* Sobrescrevendo a classe base Warning (Claro para Escuro) */
.btn-warning {
color: #fff !important;
/* Invertido: Claro (#f1c40f) -> Escuro (#f39c12) */
background-image: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%) !important;
background-color: #f39c12 !important;
/* Fallback */
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
/* Hover e Foco */
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
color: #fff !important;
/* Escurecido levemente para manter o contraste do feedback */
background-image: linear-gradient(135deg, #e1b70e 0%, #d68910 100%) !important;
background-color: #d68910 !important;
border: none !important;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
}
/* Estado Ativo/Click */
.btn-warning:active:focus,
.btn-warning:active:hover,
.btn-warning.active:focus,
.btn-warning.active:hover {
background-image: linear-gradient(135deg, #d4ac0d 0%, #ca7d0e 100%) !important;
transform: translateY(0);
}
/* Estado Desabilitado */
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus {
background-image: none !important;
background-color: #ffeaa7 !important;
/* Amarelo pálido para desabilitado */
border: none !important;
opacity: 0.40;
box-shadow: none;
}
/* Ajuste para Badges dentro do Warning */
.btn-warning .badge {
color: #f39c12 !important;
background-color: #fff !important;
}
/* Sobrescrevendo a classe base Editar (Claro para Escuro) */
.btn-editar {
color: #fff !important;
/* Invertido: Claro (#22e0d1) -> Escuro (#1BBDAF) */
background-image: linear-gradient(135deg, #22e0d1 0%, #1BBDAF 100%) !important;
background-color: #1BBDAF !important;
/* Fallback */
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
/* Hover e Foco */
.btn-editar:hover,
.btn-editar:focus,
.btn-editar:active,
.btn-editar.active {
color: #fff !important;
/* Tons escurecidos para efeito de profundidade */
background-image: linear-gradient(135deg, #1bcbc3 0%, #16a095 100%) !important;
background-color: #16a095 !important;
border: none !important;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
}
/* Estado Ativo/Click */
.btn-editar:active:focus,
.btn-editar:active:hover,
.btn-editar.active:focus,
.btn-editar.active:hover {
background-image: linear-gradient(135deg, #18b5ad 0%, #12837a 100%) !important;
transform: translateY(0);
}
/* Estado Desabilitado */
.btn-editar.disabled,
.btn-editar[disabled],
fieldset[disabled] .btn-editar {
background-image: none !important;
background-color: #a4e6e0 !important;
/* Tom pastel da cor base */
border: none !important;
opacity: 0.40;
box-shadow: none;
cursor: not-allowed;
}
/* Ajuste para Badges dentro do Editar */
.btn-editar .badge {
color: #1BBDAF !important;
background-color: #fff !important;
}
/* LUIZ*/
/* Seleciona todos os botões que estão dentro da nova UI de cadastro */
.cadastropg-nova-ui [class^="btnH-"],
.cadastropg-nova-ui [class*=" btnH-"],
.cadastropgFixo [class^="btnH-"],
.cadastropgFixo [class*=" btnH-"] {
height: 35px !important;
border-radius: 5px !important;
background: linear-gradient(135deg, #5a6fd6 0%, #694291 100%) !important;
border: none !important;
color: #ffffff !important;
padding: 0 20px !important;
transition: all 0.2s ease;
text-transform: uppercase;
display: inline-flex !important;
/* Mantém um ao lado do outro */
/*font-weight: 600 !important;*/
/*font-size: 11px !important;
display: inline-flex !important;*/
/* Mantém um ao lado do outro */
/*align-items: center !important;
justify-content: center !important;
padding: 0 20px !important;
box-shadow: 0 4px 6px rgba(111, 66, 193, 0.25);
transition: all 0.2s ease;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 5px;*/
/* Espaçamento entre eles */
}
/* Efeito de Hover */
.cadastropg-nova-ui [class^="btnH-"]:hover,
.cadastropg-nova-ui [class*=" btnH-"]:hover,
.cadastropgFixo [class^="btnH-"]:hover,
.cadastropgFixo [class*=" btnH-"]:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(111, 66, 193, 0.4);
filter: brightness(1.2);
color: #fff !important;
}
/* Ajuste para os ícones (Glyphicons ou FontAwesome) */
.cadastropg-nova-ui [class^="btnH-"] span,
.cadastropg-nova-ui [class*=" btnH-"] span,
.cadastropgFixo [class^="btnH-"] span,
.cadastropgFixo [class*=" btnH-"] span {
font-size: 12px !important
}
/* Botão DevExtreme com estilo Primary */
.dx-texteditor-buttons-container .dx-button.dx-button-mode-contained.dx-button-default {
color: #fff !important;
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
background-color: #764ba2 !important;
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
/* Hover e foco */
.dx-texteditor-buttons-container .dx-button.dx-button-mode-contained.dx-button-default:hover,
.dx-texteditor-buttons-container .dx-button.dx-button-mode-contained.dx-button-default:focus,
.dx-texteditor-buttons-container .dx-button.dx-button-mode-contained.dx-button-default.dx-state-hover,
.dx-texteditor-buttons-container .dx-button.dx-button-mode-contained.dx-button-default.dx-state-focused {
color: #fff !important;
background-image: linear-gradient(135deg, #5a6fd6 0%, #694291 100%) !important;
background-color: #694291 !important;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1);
}
/* Estado ativo */
.dx-texteditor-buttons-container .dx-button.dx-button-mode-contained.dx-button-default.dx-state-active {
background-image: linear-gradient(135deg, #4c5eb3 0%, #58377a 100%) !important;
transform: translateY(0);
}
/* Desabilitado */
.dx-texteditor-buttons-container .dx-button.dx-button-mode-contained.dx-button-default.dx-state-disabled {
background-image: none !important;
background-color: #a29bfe !important;
opacity: 0.40;
box-shadow: none;
}
.skin-blue .box > .box-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
/* Aplicando o estilo Success (Claro -> Escuro) ao botão de confirmação do SweetAlert2 */
.swal2-confirm.swal2-styled {
color: #fff !important;
background-image: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
background-color: #27ae60 !important;
/* Fallback */
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
transition: all 0.3s ease !important;
padding: 10px 30px !important;
/* Ajuste opcional de respiro */
}
/* Hover e Foco no SweetAlert */
.swal2-confirm.swal2-styled:hover {
background-image: linear-gradient(135deg, #27ad60 0%, #219150 100%) !important;
background-color: #219150 !important;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1) !important;
}
/* Estado Ativo/Click no SweetAlert */
.swal2-confirm.swal2-styled:active {
background-image: linear-gradient(135deg, #229954 0%, #1e8449 100%) !important;
transform: translateY(0);
}
/* Removendo o outline padrão que o SWAL2 às vezes coloca */
.swal2-confirm.swal2-styled:focus {
box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.5) !important;
}
/* Aplicando o estilo Danger (Claro -> Escuro) ao botão Deny do SweetAlert2 */
.swal2-deny.swal2-styled {
color: #fff !important;
/* Invertido: Claro (#e74c3c) -> Escuro (#c0392b) */
background-image: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
background-color: #c0392b !important;
/* Fallback */
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
transition: all 0.3s ease !important;
padding: 10px 30px !important;
}
/* Hover no botão Deny */
.swal2-deny.swal2-styled:hover {
background-image: linear-gradient(135deg, #d64535 0%, #a93226 100%) !important;
background-color: #a93226 !important;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1) !important;
}
/* Estado Ativo/Click no botão Deny */
.swal2-deny.swal2-styled:active {
background-image: linear-gradient(135deg, #c03e30 0%, #922b21 100%) !important;
transform: translateY(0);
}
/* Foco/Outline personalizado */
.swal2-deny.swal2-styled:focus {
box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.5) !important;
}
/* Aplicando o estilo Danger (Mais Claro -> Escuro) ao botão Cancel do SweetAlert2 */
.swal2-cancel.swal2-styled {
color: #fff !important;
/* Início bem mais claro (#ff5e4d) para dar contraste */
background-image: linear-gradient(135deg, #ff5e4d 0%, #c0392b 100%) !important;
background-color: #c0392b !important;
border: none !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
transition: all 0.3s ease !important;
padding: 10px 30px !important;
}
/* Hover no botão Cancel */
.swal2-cancel.swal2-styled:hover {
/* Mantendo o brilho no hover com um tom vibrante */
background-image: linear-gradient(135deg, #ff4733 0%, #a93226 100%) !important;
background-color: #a93226 !important;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1) !important;
}
/* Estado Ativo/Click no botão Cancel */
.swal2-cancel.swal2-styled:active {
/* Retorno para o tom original no clique para efeito de pressão */
background-image: linear-gradient(135deg, #e74c3c 0%, #922b21 100%) !important;
transform: translateY(0);
}
/* Ajuste de foco atualizado para combinar com o novo tom claro */
.swal2-cancel.swal2-styled:focus {
box-shadow: 0 0 0 3px rgba(255, 94, 77, 0.5) !important;
}
.summary-card.active {
/* background-color: #f4f8fb; */
border-top: 3px solid #764ba2 !important;
cursor: pointer;
}
.summary-card:hover {
background-color: #f4f8fb;
border-top: 3px solid #667eea !important;
cursor: pointer;
}
.BotoesFixos {
display: flex !important;
gap: 12px;
padding: 12px 24px !important;
background: #ffffff !important;
border-bottom: 2px solid #dee2e6;
/* Ajuste para sua cor de borda */
align-items: center;
flex-wrap: nowrap !important;
/* Mantém os botões em linha */
width: 100% !important;
position: relative !important;
/* Importante para não fugir da modal */
top: 0 !important;
left: 0 !important;
z-index: 1000 !important;
opacity: 1 !important;
transform: none !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
#BotoesClientesRapidos {
/* Força o botão a ficar no fluxo normal do HTML */
position: relative !important;
top: auto !important;
left: auto !important;
width: 100% !important;
/* Remove sombras e comportamentos de 'camada superior' */
z-index: 1 !important;
box-shadow: none !important;
/* Garante que ele apareça corretamente */
display: flex !important;
opacity: 1 !important;
transform: none !important;
/* Visual de barra interna */
padding: 10px 0;
border-bottom: 1px solid #ddd;
margin-bottom: 15px;
}
.cadastropgFixo {
display: flex !important;
gap: 12px;
padding: 12px 24px !important;
background: #ffffff !important;
border-bottom: 2px solid var(--sia-border);
align-items: center;
flex-wrap: wrap !important;
min-height: 60px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 900 !important;
width: 100%;
/* Animação Suave de Entrada */
/* opacity: 0;*/
transform: translateY(-10px);
transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: opacity, transform;
background: rgb(255, 255, 255);
opacity: 1;
}
.azul {
/* Substituindo a cor sólida pelo gradiente solicitado */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
margin-top: 13px;
padding-left: 12px;
margin-right: 11px;
margin-left: 11px;
margin-bottom: -10px;
}
.skin-blue .dx-toolbar-items-container .dx-group-panel-message {
background-color: transparent !important;
color: #ffffff !important;
}
.dx-toolbar-items-container .dx-group-panel-message {
background: transparent !important;
border: none !important;
}
.chkbox {
background-color: transparent !important;
color: white;
}
.skin-blue .dx-popup-title {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
.dx-radiobutton-icon-checked .dx-radiobutton-icon-dot {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border-width: 5px;
}
.dx-checkbox-checked .dx-checkbox-icon {
color: #764ba2 !important;
}
.skin-blue .main-header .logo {
background-color: transparent !important;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;
}
.main-header .logo {
background: transparent !important;
background-color: transparent !important;
border-bottom: none !important;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;
}
.main-header {
position: relative;
max-height: 100px;
z-index: 1030;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
.skin-blue .nav-tabs-custom > .nav-tabs > li.active {
border-top-color: #667eea !important;
}
/*/ load panel /*/
/* =========================================================
DevExtreme LoadPanel – Modern SAFE (2026)
Overlay leve + Card branco pequeno + Texto + Barra L→R suave + Shimmer no texto
(feito para NÃO TRAVAR: sem backdrop-filter, sem blur/filter, sem animar left/top)
========================================================= */
/* ===== BG-AQUA (AdminLTE) em GRADIENTE ===== */
.bg-aqua,
.small-box.bg-aqua,
.info-box.bg-aqua,
.info-box.bg-aqua.box {
/* fallback */
background-color: #00cec9 !important;
/* gradiente */
background-image: linear-gradient(135deg, #00cec9 0%, #0984e3 100%) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
color: #fff !important;
}
/* evita fundo sólido interno do info-box */
.info-box.bg-aqua .info-box-icon,
.info-box.bg-aqua .info-box-content {
background: transparent !important;
}
/* ===== BG-GREEN (AdminLTE) em GRADIENTE ===== */
.bg-green,
.small-box.bg-green,
.info-box.bg-green,
.info-box.bg-green.box {
/* fallback */
background-color: #2ecc71 !important;
/* gradiente (preferível ao shorthand) */
background-image: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
color: #fff !important;
}
/* Se o AdminLTE pinta partes internas do info-box, zera */
.info-box.bg-green .info-box-icon,
.info-box.bg-green .info-box-content {
background: transparent !important;
}
/* ===== BG-RED (AdminLTE) em GRADIENTE ===== */
.bg-red,
.small-box.bg-red,
.info-box.bg-red,
.info-box.bg-red.box {
/* fallback */
background-color: #ff5e4d !important;
/* gradiente */
background-image: linear-gradient(135deg, #ff5e4d 0%, #c0392b 100%) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
color: #fff !important;
}
/* remove fundos internos do info-box */
.info-box.bg-red .info-box-icon,
.info-box.bg-red .info-box-content {
background: transparent !important;
}
/* ===== BG-YELLOW (AdminLTE) em GRADIENTE ===== */
.bg-yellow,
.small-box.bg-yellow,
.info-box.bg-yellow,
.info-box.bg-yellow.box {
/* fallback */
background-color: #f1c40f !important;
/* gradiente */
background-image: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
color: #fff !important;
}
/* remove fundo interno do info-box */
.info-box.bg-yellow .info-box-icon,
.info-box.bg-yellow .info-box-content {
background: transparent !important;
}
/* ===== BG-BLUE (AdminLTE) em GRADIENTE ===== */
.bg-blue,
.small-box.bg-blue,
.info-box.bg-blue,
.info-box.bg-blue.box {
/* fallback */
background-color: #3498db !important;
/* gradiente */
background-image: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
color: #fff !important;
}
/* remove fundo interno do info-box */
.info-box.bg-blue .info-box-icon,
.info-box.bg-blue .info-box-content {
background: transparent !important;
}
/* ===== BG-PURPLE (AdminLTE) em GRADIENTE ===== */
.bg-purple,
.small-box.bg-purple,
.info-box.bg-purple,
.info-box.bg-purple.box {
/* fallback */
background-color: #9b59b6 !important;
/* gradiente */
background-image: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
color: #fff !important;
}
/* remove fundo interno do info-box */
.info-box.bg-purple .info-box-icon,
.info-box.bg-purple .info-box-content {
background: transparent !important;
}
/* =========================================================
DevExtreme LoadPanel – Modern Spinner Only (SEM TRAVAR)
========================================================= */
:root {
--lp-overlay: rgba(15, 23, 42, 0.28);
--lp-card-bg: #ffffff;
--lp-card-border: rgba(2, 6, 23, 0.08);
--lp-radius: 20px;
--lp-text: #0f172a;
--lp-accent-1: #667eea;
--lp-accent-2: #8b78ff;
--lp-accent-3: #764ba2;
--lp-spin-speed: 0.85s;
--lp-text-speed: 2.4s;
}
/* Overlay leve */
.dx-loadpanel-wrapper .dx-overlay-shader {
background: var(--lp-overlay) !important;
}
/* Remove pane padrão */
.dx-loadpanel-pane {
border: 0 !important;
background: transparent !important;
}
/* Card branco moderno */
.dx-loadpanel-content {
position: relative !important;
background: var(--lp-card-bg) !important;
border: 1px solid var(--lp-card-border) !important;
border-radius: var(--lp-radius) !important;
min-width: 300px !important;
min-height: 160px !important;
padding: 22px 24px !important;
box-shadow: 0 18px 55px rgba(2, 6, 23, 0.18), 0 6px 18px rgba(2, 6, 23, 0.12) !important;
overflow: hidden !important;
}
/* detalhe suave */
.dx-loadpanel-content::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 25% 20%, rgba(102,126,234,0.10), transparent 55%), radial-gradient(circle at 85% 75%, rgba(118,75,162,0.08), transparent 55%);
pointer-events: none;
}
/* Esconde indicador padrão do DevExtreme (evita conflitos/travadas) */
.dx-loadpanel-content .dx-loadindicator,
.dx-loadpanel-content .dx-loadindicator-wrapper,
.dx-loadpanel-content .dx-loadindicator-segment {
display: none !important;
}
/* Spinner custom (GARANTIDO girar) */
.dx-loadpanel-content::after {
content: "";
position: relative;
display: block;
width: 46px;
height: 46px;
margin: 8px auto 0 auto;
border-radius: 50%;
border: 4px solid rgba(102, 126, 234, 0.18);
border-top-color: var(--lp-accent-1);
/* !important pra não ser sobrescrito */
animation: lpSpin var(--lp-spin-speed) linear infinite !important;
will-change: transform;
transform: translateZ(0);
}
/* Texto com shimmer */
.dx-loadpanel-message {
position: relative !important;
z-index: 1 !important;
font-family: "Segoe UI", system-ui, -apple-system, sans-serif !important;
font-weight: 800 !important;
font-size: 15px !important;
letter-spacing: -0.01em !important;
text-align: center !important;
width: 100% !important;
margin-top: 14px !important;
background: linear-gradient( 90deg, var(--lp-text) 0%, var(--lp-text) 35%, var(--lp-accent-1) 50%, var(--lp-accent-2) 60%, var(--lp-accent-3) 74%, var(--lp-text) 92%, var(--lp-text) 100% );
background-size: 220% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
animation: lpTextShimmer var(--lp-text-speed) ease-in-out infinite;
}
/* Animations */
@keyframes lpSpin {
0% {
transform: translateZ(0) rotate(0deg);
}
100% {
transform: translateZ(0) rotate(360deg);
}
}
@keyframes lpTextShimmer {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Acessibilidade:
- NÃO desliga o spinner (pra não parecer "parado")
- Só desliga o shimmer do texto
*/
@media (prefers-reduced-motion: reduce) {
.dx-loadpanel-message {
animation: none !important;
background: none !important;
color: var(--lp-text) !important;
-webkit-background-clip: initial;
background-clip: initial;
}
.dx-loadpanel-content::after {
animation: lpSpin var(--lp-spin-speed) linear infinite !important;
}
}
.skin-blue .dx-datagrid-rowsview .dx-selection.dx-row > td {
background-color: #d9e0ff !important;
}
/* CHECKBOX ROXO - TAMANHO MAIOR */
input.dx-checkbox-icon {
appearance: none;
-webkit-appearance: none;
width: 20px; /* 👈 tamanho */
height: 20px; /* 👈 tamanho */
border: 2px solid #6f42c1;
border-radius: 5px;
cursor: pointer;
position: relative;
background: #fff;
transition: all 0.2s ease;
}
/* marcado */
input.dx-checkbox-icon:checked {
background: #6f42c1;
border-color: #6f42c1;
}
/* check branco proporcional */
input.dx-checkbox-icon:checked::after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* =========================================================
Lista de Checkboxes – Modern Purple UI
========================================================= */
/* ---------- ITEM BASE ---------- */
.dx-checkbox-has-text,
.dx-checkbox-has-text > label {
display: flex !important;
align-items: center !important; /* alinhamento vertical perfeito */
gap: 6px !important; /* espaço entre check e texto */
padding: 3px 8px !important; /* menos espaçamento */
margin: 0 !important;
border-radius: 6px !important;
cursor: pointer !important;
line-height: 1.25 !important;
transition: background-color 0.18s ease;
}
/* =========================================================
CHECKBOX – estilos aplicados SOMENTE no input
========================================================= */
/* ---------- CHECKBOX ---------- */
input.dx-checkbox-icon {
margin: 0 !important;
flex-shrink: 0;
vertical-align: middle !important;
}
/* ---------- TEXTO ---------- */
input.dx-checkbox-has-text span {
display: inline-flex !important;
align-items: center !important;
line-height: 1.25 !important;
}
/* ---------- HOVER ---------- */
.dx-checkbox-has-text:hover, .dx-checkbox-has-text:hover > label, .dx-checkbox.dx-state-hover, .dx-checkbox.dx-state-hover > label {
background: rgba(111, 66, 193, 0.10) !important;
}
/* ---------- ACTIVE (CLIQUE) ---------- */
.dx-checkbox.dx-state-active, .dx-checkbox.dx-state-active > label {
background: rgba(111, 66, 193, 0.16) !important;
}
/* ---------- FOCUS (TECLADO) ---------- */
.dx-checkbox.dx-state-focused, .dx-checkbox.dx-state-focused > label {
background: rgba(111, 66, 193, 0.12) !important;
box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.20) !important;
}
/* ---------- REMOVE AZUL PADRÃO ---------- */
.dx-checkbox-has-text:hover, .dx-checkbox.dx-state-hover, .dx-checkbox.dx-state-active, .dx-checkbox.dx-state-focused {
color: inherit !important;
}
/* Hover roxo claro - Marcar/Desmarcar todos */
label[for="ckbSelecionaTodosFiltrados"] {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.18s ease;
}
/* hover roxo claro */
label[for="ckbSelecionaTodosFiltrados"]:hover {
background: rgba(111, 66, 193, 0.20) !important;
}
/* =========================================================
DEVEXPRESS NOTIFY – TEMA ROXO PADRÃO
========================================================= */
.dx-toast {
border-radius: 10px !important;
overflow: hidden;
box-shadow: 0 10px 28px rgba(0,0,0,0.18) !important;
}
/* aplica o roxo padrão em TODOS */
.dx-toast-success,
.dx-toast-info,
.dx-toast-warning,
.dx-toast-error {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: #fff !important;
}
/* mensagem */
.dx-toast-message {
color: #fff !important;
font-weight: 600 !important;
font-size: 14px !important;
}