/* Estilo customizado para o botão btn-ghost-danger */
.btn-ghost-danger {
--vz-btn-color: #ed5e5e !important;
--vz-btn-bg: rgba(237, 94, 94, 0.1) !important;
--vz-btn-border-color: transparent !important;
color: #ed5e5e !important;
background-color: rgba(237, 94, 94, 0.1) !important;
border-color: transparent !important;
}
.btn-ghost-danger:hover,
.btn-ghost-danger:focus,
.btn-ghost-danger:active {
--vz-btn-hover-color: #fff !important;
--vz-btn-hover-bg: #dc3545 !important;
--vz-btn-hover-border-color: #dc3545 !important;
color: #fff !important;
background-color: #dc3545 !important;
border-color: #dc3545 !important;
}
/* Foco visível nos botões: o tema compila o Bootstrap com $btn-focus-width: 0, então o anel
de foco existe mas tem 0px — invisível. Reativamos com o mesmo cinza do SweetAlert para o
usuário enxergar onde o foco parou ao navegar com Tab/Enter (ex.: ao chegar no Salvar).
Usamos box-shadow e não outline porque há botões quadrados de ícone sem padding, e um
outline com offset invadiria os campos vizinhos. */
.btn:focus,
.btn:focus-visible,
.btn:first-child:active:focus,
.btn.active:focus,
.btn.show:focus,
.btn-check:focus + .btn {
--vz-btn-focus-box-shadow: 0 0 0 3px rgba(110, 120, 129, .5);
outline: 0;
box-shadow: 0 0 0 3px rgba(110, 120, 129, .5);
}
/* Mesmo problema nos radios/checkboxes: o anel de .form-check-input:focus também vem com 0px,
e como o marcador é pequeno o usuário não enxergava em qual opção o teclado parou. Só em
:focus-visible — clicar com o mouse não deixa o anel para trás. */
.form-check-input:focus-visible {
border-color: var(--vz-primary, #405189);
outline: 0;
box-shadow: 0 0 0 3px rgba(110, 120, 129, .5);
}
/* Estilo para manter abas de produtos em uma linha */
/* (deploy) */
#produtosTabs,
#produtosTabsEdit {
flex-wrap: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
#produtosTabs .nav-item,
#produtosTabsEdit .nav-item {
flex-shrink: 0;
white-space: nowrap;
}
#produtosTabs .nav-link,
#produtosTabsEdit .nav-link {
white-space: nowrap;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
/* Em telas muito pequenas, permite quebra de linha */
@media (max-width: 768px) {
#produtosTabs,
#produtosTabsEdit {
flex-wrap: wrap !important;
}
}
/* Modal de lookup deve aparecer acima de outros modais */
/* Bootstrap usa z-index 1055 para modais, então usamos valores maiores */
#modalLookup {
z-index: 1080 !important;
}
#modalLookup.modal.show {
z-index: 1080 !important;
}
#modalLookup .modal-backdrop {
z-index: 1079 !important;
}
/* Quando há um modal aberto e outro modal é aberto, ajustar z-index */
.modal.show ~ .modal.show {
z-index: 1080 !important;
}
.modal.show ~ .modal.show .modal-backdrop {
z-index: 1079 !important;
}
/* Garantir que o modal de lookup apareça acima do modal de editar produto */
#modalEditarProduto.show ~ #modalLookup.show,
#modalEditarProduto.show + #modalLookup.show {
z-index: 1080 !important;
}
#modalEditarProduto.show ~ #modalLookup.show .modal-backdrop,
#modalEditarProduto.show + #modalLookup.show .modal-backdrop {
z-index: 1079 !important;
}
/* Forçar z-index maior para qualquer modal de lookup quando há modal de editar aberto */
body:has(#modalEditarProduto.show) #modalLookup {
z-index: 1080 !important;
}
body:has(#modalEditarProduto.show) #modalLookup .modal-backdrop {
z-index: 1079 !important;
}
/*# sourceMappingURL=custom.min.css.map */
/* Personalizados */
.input-number-small {
max-width: 70px;
}
/* Altura canônica dos campos (mesmo valor do Select2 do tema) */
:root {
--apollo-input-height: 37.5px;
}
/*
* Inputs e selects — altura padrão global do ERP.
* NÃO depende de estarem dentro de