em cada controle
e
agrupando botoes finais.
========================================================================== */
.filtros-bar {
background: white;
border: 1px solid var(--borda);
border-radius: var(--raio);
padding: 12px 14px;
margin-bottom: 14px;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-end;
}
.filtros-bar .campo {
display: flex;
flex-direction: column;
min-width: 130px;
}
.filtros-bar .campo.flex {
flex: 1;
min-width: 200px;
}
.filtros-bar .campo label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--texto-secundario);
font-weight: 700;
margin-bottom: 4px;
line-height: 1.2;
height: 14px;
}
.filtros-bar .campo input,
.filtros-bar .campo select {
padding: 0 10px;
height: 36px;
border: 1px solid var(--borda);
border-radius: var(--raio-sm);
font-family: inherit;
font-size: 13.5px;
background: white;
box-sizing: border-box;
}
.filtros-bar .campo input:focus,
.filtros-bar .campo select:focus {
outline: none;
border-color: var(--cor-primaria);
box-shadow: 0 0 0 3px rgba(255,117,0,.12);
}
.filtros-bar .btn-filtro {
height: 36px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 14px;
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.filtros-bar .acoes {
margin-left: auto;
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: flex-end;
}
.filtros-bar .acoes .btn {
height: 36px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 14px;
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
/* Garante que botoes dentro do filtros-bar nao tenham margin extra */
.filtros-bar button,
.filtros-bar .btn {
margin: 0;
}
/* Modal: ja existe, mas garantimos opcoes de relatorio bem dispostas */
.opcoes-relatorio {
display: grid;
gap: 14px;
}
.opcoes-relatorio .opcao-grupo {
border: 1px solid var(--borda);
border-radius: var(--raio-sm);
padding: 12px 14px;
background: var(--fundo);
}
.opcoes-relatorio .opcao-grupo > label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--texto-secundario);
font-weight: 700;
margin-bottom: 8px;
}
.opcoes-relatorio .opcoes-radio {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.opcoes-relatorio .opcoes-radio label {
flex: 1;
min-width: 140px;
border: 1.5px solid var(--borda);
border-radius: var(--raio-sm);
padding: 10px 12px;
background: white;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all .15s;
}
.opcoes-relatorio .opcoes-radio label:hover {
border-color: var(--cor-primaria);
background: #FFFBEB;
}
.opcoes-relatorio .opcoes-radio input[type="radio"] {
margin: 0;
accent-color: var(--cor-primaria);
width: 16px; height: 16px;
}
.opcoes-relatorio .opcoes-radio label.selecionado {
border-color: var(--cor-primaria);
background: #FFF7ED;
box-shadow: 0 0 0 2px rgba(255,117,0,.1);
}
.opcoes-relatorio .opcoes-radio .desc {
font-size: 12.5px;
font-weight: 600;
color: var(--texto);
}
.opcoes-relatorio .opcoes-radio .sub {
font-size: 11px;
color: var(--texto-fraco);
}
/* =========================================================================
Registros desativados (inativos) — esmaecidos e sobretachados
Aplica em qualquer linha de tabela ou cartão que carregue data-ativo="0".
========================================================================= */
tr[data-ativo="0"] > td,
tr[data-ativo="0"] > td a,
tr[data-ativo="0"] > td span,
[data-ativo="0"].card-item,
[data-ativo="0"].linha-cadastro {
color: var(--texto-fraco) !important;
opacity: .55;
}
tr[data-ativo="0"] > td:not(:last-child),
tr[data-ativo="0"] > td:not(:last-child) > *:not(.btn):not(button):not(a),
[data-ativo="0"].card-item .titulo,
[data-ativo="0"].card-item .descricao,
[data-ativo="0"].linha-cadastro .titulo,
[data-ativo="0"].linha-cadastro .descricao {
text-decoration: line-through;
text-decoration-color: rgba(100,116,139,.6);
text-decoration-thickness: 1px;
}
/* Ações (último td) NÃO ficam sobretachadas — só esmaecidas */
tr[data-ativo="0"] > td:last-child,
tr[data-ativo="0"] > td:last-child * {
text-decoration: none !important;
}
/* Restaura clareza ao passar o mouse pra ficar legível antes de reativar */
tr[data-ativo="0"]:hover > td {
opacity: .85;
}