/* PERFIL USUÁRIO/EMPRESA - ABA CONFIG SISTEMA */
/* Variáveis no body: valem para a aba, para o modal de senha e para a
   confirmação do alertify (que é criada direto no body) */
body{
    --cfg-primaria: #3c8dbc;
    --cfg-primaria-suave: rgba(60, 141, 188, 0.08);
    --cfg-sucesso: #00a65a;
    --cfg-borda: #e3e8ee;
    --cfg-texto: #333;
    --cfg-texto-suave: #6b7785;
}
/* Cor principal por skin — mesmo padrão do restante do projeto */
.skin-purple,
.skin-purple-light { --cfg-primaria: #605ca8; --cfg-primaria-suave: rgba(96, 92, 168, 0.08); }

.skin-green,
.skin-green-light  { --cfg-primaria: #00a65a; --cfg-primaria-suave: rgba(0, 166, 90, 0.08); }

.skin-red,
.skin-red-light    { --cfg-primaria: #dd4b39; --cfg-primaria-suave: rgba(221, 75, 57, 0.08); }

.skin-yellow,
.skin-yellow-light { --cfg-primaria: #db8b0b; --cfg-primaria-suave: rgba(219, 139, 11, 0.08); }

.skin-black,
.skin-black-light  { --cfg-primaria: #222d32; --cfg-primaria-suave: rgba(34, 45, 50, 0.06); }

.cfgPerfil{
    padding: 5px 0 0;
}

.cfgAjuda{
    display: block;
    margin-top: 4px;
    color: var(--cfg-texto-suave);
    font-size: 12px;
    font-weight: normal;
    line-height: 1.4;
}

/* RESUMO / LOGOTIPO */
.cfgResumo{
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    margin-bottom: 20px;
    border: 1px solid var(--cfg-borda);
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cfg-primaria-suave), #fff 60%);
}
.cfgLogo{
    position: relative;
    flex: 0 0 auto;
}
.cfgPerfil .mostraImg{
    width: 110px;
    height: 110px;
    border-radius: 12px;
    border: 1px solid var(--cfg-borda);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px;
}
.cfgPerfil .mostraImg img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.cfgLogoBtn{
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--cfg-primaria);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s;
}
.cfgLogoBtn:hover{
    transform: scale(1.08);
}
.cfgResumoInfo{
    flex: 1 1 auto;
    min-width: 0;
}
.cfgResumoInfo h3{
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
    color: var(--cfg-texto);
    word-break: break-word;
}
.cfgResumoInfo p{
    margin: 0;
    color: var(--cfg-texto-suave);
}
.cfgResumoUser{
    margin-left: 6px;
    color: var(--cfg-primaria);
}
.cfgArquivoSelecionado{
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #fcf8e3;
    color: #8a6d3b;
    font-size: 12px;
}
.cfgResumoAcoes{
    flex: 0 0 auto;
}

/* CARTÕES DE SEÇÃO */
.cfgCard{
    background: #fff;
    border: 1px solid var(--cfg-borda);
    border-radius: 10px;
    padding: 18px 20px 6px;
    margin-bottom: 20px;
}
.cfgCardHeader{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cfg-borda);
}
.cfgCardHeader h4{
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cfg-texto);
}
.cfgCardHeader p{
    margin: 0;
    color: var(--cfg-texto-suave);
    font-size: 13px;
}
/* Cartões lado a lado com a mesma altura (Empresa e usuário / Endereço) */
.cfgLinhaIgual{
    display: flex;
    flex-wrap: wrap;
}
.cfgLinhaIgual:before,
.cfgLinhaIgual:after{
    display: none;
}
.cfgLinhaIgual > [class*='col-']{
    float: none;
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
}
@media (min-width: 1200px){
    .cfgLinhaIgual > .col-lg-4{
        flex-basis: 33.3333%;
        max-width: 33.3333%;
    }
    .cfgLinhaIgual > .col-lg-6{
        flex-basis: 50%;
        max-width: 50%;
    }
    .cfgLinhaIgual > .col-lg-8{
        flex-basis: 66.6667%;
        max-width: 66.6667%;
    }
}
.cfgLinhaIgual .cfgCard{
    flex: 1 1 auto;
    width: 100%;
}
.cfgCardIcone{
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--cfg-primaria);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.cfgCard label{
    font-weight: 600;
}
.cfgLinkAjuda{
    margin-left: 6px;
    font-size: 12px;
    font-weight: normal;
}

/* OPÇÕES LIGA/DESLIGA */
.cfgOpcoes{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.cfgOpcao{
    display: block;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--cfg-borda);
    border-left: 4px solid #d2d6de;
    border-radius: 8px;
    background: #fafbfc;
    cursor: pointer;
    font-weight: normal !important;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.cfgOpcao:hover{
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}
.cfgOpcao.ativo{
    border-color: rgba(0, 166, 90, 0.35);
    border-left-color: var(--cfg-sucesso);
    background: rgba(0, 166, 90, 0.04);
}
/* Checkbox, título e status alinhados pelo topo: com título longo
   (quebra em 2 linhas) o checkbox não desce para o meio do texto */
.cfgOpcaoTopo{
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.cfgOpcaoTopo > div,
.cfgOpcaoTopo > input{
    flex: 0 0 22px;
    margin: 0;
}
.cfgOpcaoTitulo{
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
    font-weight: 600;
    color: var(--cfg-texto);
    line-height: 1.35;
}
.cfgOpcaoTitulo .fa{
    width: 16px;
    margin-right: 2px;
    text-align: center;
    color: var(--cfg-primaria);
}
.cfgStatus{
    flex: 0 0 auto;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: #e4e7eb;
    color: #777;
}
.cfgStatus::after{
    content: 'Desligado';
}
.cfgOpcao.ativo .cfgStatus{
    background: var(--cfg-sucesso);
    color: #fff;
}
.cfgOpcao.ativo .cfgStatus::after{
    content: 'Ligado';
}
.cfgOpcaoDesc{
    display: block;
    margin-top: 8px;
    padding-left: 34px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cfg-texto-suave);
}
.cfgOpcaoDesc > span{
    display: block;
    margin-top: 3px;
    opacity: 0.55;
}
/* Destaca a linha que descreve o comportamento atual */
.cfgOpcao.ativo .cfgDescLigado,
.cfgOpcao:not(.ativo) .cfgDescDesligado{
    opacity: 1;
    color: var(--cfg-texto);
}
.cfgObs{
    margin-bottom: 14px;
}
.cfgObs textarea{
    resize: vertical;
}

/* BARRA SALVAR */
.cfgBarraSalvar{
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    padding: 12px 16px;
    margin: 0 -10px -10px;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--cfg-borda);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}
.cfgBarraSalvar .cfgAjuda{
    margin: 0 auto 0 0;
}
.cfgBarraSalvar .btn{
    min-width: 200px;
    font-weight: 600;
}

/* MODAL ALTERAR SENHA */
.cfgModal .modal-content{
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.cfgModal .modal-header{
    padding: 18px 20px;
    border-bottom: 1px solid var(--cfg-borda);
}
.cfgModal .modal-header .cfgCardHeader{
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
}
.cfgModal .modal-header .close{
    margin-top: 6px;
    font-size: 26px;
}
.cfgModal .modal-header .modal-title{
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}
/* Texto explicativo logo abaixo do título do modal */
.cfgModalIntro{
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--cfg-primaria-suave);
    color: var(--cfg-texto);
    line-height: 1.5;
}

/* MODAL FUSO HORÁRIO */
.cfgMapaFuso{
    max-height: 420px;
    margin-bottom: 15px;
    border-radius: 8px;
}
.cfgFusos{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cfgFuso{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    background: #fafbfc;
    border: 1px solid var(--cfg-borda);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cfgFuso:hover,
.cfgFuso:focus{
    outline: none;
    border-color: var(--cfg-primaria);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}
.cfgFuso.ativo{
    border-color: var(--cfg-primaria);
    border-left-width: 4px;
    background: var(--cfg-primaria-suave);
}
.cfgFusoCor{
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.cfgFusoAuto{
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cfg-primaria);
    border-color: transparent;
    color: #fff;
}
.cfgFusoTexto{
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cfg-texto-suave);
}
.cfgFusoTexto strong{
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    color: var(--cfg-texto);
}
.cfgFusoTexto .label{
    margin-left: 4px;
    font-size: 10px;
    vertical-align: middle;
}
.cfgFusoAtual{
    display: none;
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--cfg-primaria);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.cfgFuso.ativo .cfgFusoAtual{
    display: inline-block;
}
.cfgDica{
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fcf8e3;
    color: #8a6d3b;
    font-size: 12.5px;
    line-height: 1.45;
}
.cfgDica .fa{
    margin-top: 2px;
    font-size: 16px;
}
/* E-mail para envio aos clientes: dica alinhada com o campo ao lado */
.cfgDicaEmailEnvio{
    margin: 0 0 15px;
}
@media (min-width: 992px){
    .cfgDicaEmailEnvio{
        margin-top: 25px;
    }
}
.cfgModal .modal-body{
    padding: 20px;
}
.cfgModal label{
    font-weight: 600;
}
.cfgModal .input-group-addon{
    min-width: 40px;
    border-radius: 8px 0 0 8px;
    background: var(--cfg-primaria-suave);
    color: var(--cfg-primaria);
}
.cfgModal .input-group .form-control{
    height: 38px;
}
.cfgModal .input-group-btn > .btn{
    height: 38px;
    border-radius: 0 8px 8px 0;
    color: var(--cfg-texto-suave);
}
.cfgModal .modal-footer{
    padding: 14px 20px;
    background: #f7f9fb;
    border-top: 1px solid var(--cfg-borda);
}

/* BOTÕES ARREDONDADOS (aba, modal e confirmação) */
.cfgPerfil .btn,
.cfgModal .modal-footer .btn{
    border-radius: 8px;
    padding: 8px 18px;
}

/* CONFIRMAÇÃO (alertify) */
.cfgDialog .ajs-dialog{
    max-width: 460px;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.cfgDialog .ajs-header{
    margin: 0;
    padding: 16px 50px 16px 20px;
    border-bottom: 1px solid var(--cfg-borda);
    border-radius: 12px 12px 0 0;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    color: var(--cfg-texto);
}
/* X de fechar: o alertify sobe o botão com margem negativa pensando no
   padding padrão do diálogo, que aqui foi zerado */
.cfgDialog .ajs-commands{
    top: 16px;
    right: 16px;
    margin: 0;
}
.cfgDialog .ajs-body{
    margin: 0;
    padding: 0;
}
.cfgDialog .ajs-body .ajs-content{
    padding: 20px;
}
.cfgDialogCorpo{
    display: flex;
    align-items: center;
    gap: 14px;
}
.cfgDialogCorpo p{
    margin: 0;
    color: var(--cfg-texto);
    line-height: 1.5;
}
.cfgDialog .ajs-footer{
    margin: 0;
    padding: 12px 20px;
    background: #f7f9fb;
    border-top: 1px solid var(--cfg-borda);
    border-radius: 0 0 12px 12px;
}
.cfgDialog .ajs-footer .ajs-buttons .ajs-button{
    min-width: 110px;
    margin: 0 0 0 8px;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: none;
}
.cfgDialog .ajs-dialog .ajs-footer .ajs-buttons .ajs-ok{
    background: var(--cfg-sucesso);
    border: 1px solid var(--cfg-sucesso);
    color: #fff;
}
/* Variante para ações que apagam algo (ex.: limpar sugestão) */
.cfgDialogPerigo .cfgCardIcone{
    background: #dd4b39;
}
.cfgDialogPerigo .ajs-dialog .ajs-footer .ajs-buttons .ajs-ok{
    background: #dd4b39;
    border-color: #dd4b39;
}
.cfgDialog .ajs-dialog .ajs-footer .ajs-buttons .ajs-cancel{
    background: #fff;
    border: 1px solid #d2d6de;
    color: var(--cfg-texto);
}

/* BARRA DE ABAS */
.nav-tabs-custom.cfgTabs{
    border: 1px solid var(--cfg-borda);
    border-radius: 12px;
    box-shadow: none;
    /* sem overflow:hidden: quebraria a barra fixa de Salvar (position: sticky) */
}
.nav-tabs-custom.cfgTabs > .nav-tabs{
    border-radius: 12px 12px 0 0;
    padding: 6px 6px 0;
    background: #f7f9fb;
    border-bottom: 1px solid var(--cfg-borda);
}
.nav-tabs-custom.cfgTabs > .nav-tabs > li,
.nav-tabs-custom.cfgTabs > .nav-tabs > li.no-margin,
.nav-tabs-custom.cfgTabs > .nav-tabs > li:not(.header):hover{
    margin: 0 !important;
    border-top: 0;
    background: transparent;
}
.nav-tabs-custom.cfgTabs > .nav-tabs > li > a{
    margin: 0;
    padding: 12px 10px 10px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    color: var(--cfg-texto-suave);
    transition: color 0.15s, background-color 0.15s;
}
.nav-tabs-custom.cfgTabs > .nav-tabs > li > a .fa{
    margin-right: 5px;
}
.nav-tabs-custom.cfgTabs > .nav-tabs > li > a:hover{
    color: var(--cfg-primaria);
    background: rgba(255, 255, 255, 0.7);
}
.nav-tabs-custom.cfgTabs > .nav-tabs > li.active > a,
.nav-tabs-custom.cfgTabs > .nav-tabs > li.active > a:hover{
    border: 0;
    border-bottom: 3px solid var(--cfg-primaria);
    background: #fff;
    color: var(--cfg-primaria);
}
.nav-tabs-custom.cfgTabs > .tab-content{
    padding: 15px;
}

/* ELEMENTOS COMUNS DAS ABAS */
.cfgCardHeaderAcao > .btn{
    flex: 0 0 auto;
    margin-left: auto;
}
.cfgAcoesCard{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0;
    margin-top: 6px;
    border-top: 1px solid var(--cfg-borda);
}
.cfgSubtitulo{
    margin: 18px 0 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--cfg-primaria);
}
.cfgSubtitulo .fa{
    width: 18px;
    margin-right: 4px;
    text-align: center;
}
.cfgLista{
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.cfgLista li{
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--cfg-borda);
    color: var(--cfg-texto);
    line-height: 1.45;
}
.cfgLista li:last-child{
    border-bottom: 0;
}
.cfgLista .fa{
    flex: 0 0 18px;
    margin-top: 3px;
    text-align: center;
    color: var(--cfg-primaria);
}
.cfgLinhaSugestao .cfgDica{
    margin-bottom: 16px;
}
.cfgIconePerigo{
    background: #dd4b39;
}
.cfgBtnExcluir{
    color: #dd4b39;
}
.cfgBtnExcluir:hover,
.cfgBtnExcluir:focus{
    color: #fff;
    background: #dd4b39;
    border-color: #dd4b39;
}

/* USUÁRIOS */
.cfgUsuarios{
    margin-bottom: 16px;
}
/* O bootstrap.min.css do projeto traz o .card/.accordion do Bootstrap 4 (borda em volta,
   fundo cinza e linhas no card-header/card-body): zera aqui para ficar só o cartão de cada usuário */
.cfgUsuarios > .card{
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.cfgUsuarios .cfgUsuario .cfgUsuarioTopo.card-header{
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.cfgUsuarios .cfgUsuario .cfgUsuarioTopo.card-header:hover,
.cfgUsuarios .cfgUsuario .cfgUsuarioTopo.card-header:focus,
.cfgUsuarios .cfgUsuario .cfgUsuarioTopo.card-header.aberto{
    background: var(--cfg-primaria-suave);
}
.cfgUsuarios .cfgUsuario .cfgUsuarioCorpo.card-body{
    border-bottom: 0;
}
.cfgUsuario{
    border: 1px solid var(--cfg-borda);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.cfgUsuarioTopo{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.15s;
}
.cfgUsuarioTopo:hover,
.cfgUsuarioTopo:focus,
.cfgUsuarioTopo.aberto{
    outline: none;
    background: var(--cfg-primaria-suave);
}
.cfgAvatar{
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cfg-primaria);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.cfgUsuarioInfo{
    flex: 1 1 auto;
    min-width: 0;
}
.cfgUsuarioInfo strong{
    display: block;
    color: var(--cfg-texto);
    font-size: 15px;
}
.cfgUsuarioInfo small{
    display: block;
    color: var(--cfg-texto-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cfgSelo{
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--cfg-sucesso);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    vertical-align: middle;
}
.cfgUsuarioQtd{
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 12px;
    background: #eef1f4;
    color: var(--cfg-texto-suave);
    font-size: 12px;
    font-weight: 600;
}
.cfgUsuarioSeta{
    flex: 0 0 auto;
    color: var(--cfg-texto-suave);
    transition: transform 0.2s;
}
.cfgUsuarioTopo.aberto .cfgUsuarioSeta{
    transform: rotate(180deg);
}
.cfgUsuarioCorpo{
    padding: 16px 16px 0;
    border-top: 1px solid var(--cfg-borda);
}

/* Aba Usuários: sem a moldura em volta da listagem */
.cfgCard.cfgCardSolto{
    padding: 0;
    border: 0;
    background: transparent;
}

/* GRUPOS DE PERMISSÃO DENTRO DO USUÁRIO (Sistema web, App, NFS-e, Boleto) */
/* "Acesso apenas ao app" no fim do grupo App do motorista */
.cfgApenasApp{
    margin-top: 12px;
}
.cfgGrupo{
    margin-bottom: 14px;
    border: 1px solid var(--cfg-borda);
    border-radius: 10px;
    background: #fff;
}
.cfgGrupoTopo{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f7f9fb;
    border-bottom: 1px solid var(--cfg-borda);
    border-radius: 10px 10px 0 0;
}
.cfgGrupoIcone{
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--cfg-primaria);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.cfgGrupoTitulo{
    flex: 1 1 auto;
    min-width: 0;
}
.cfgGrupoTitulo strong{
    display: block;
    font-size: 14px;
    color: var(--cfg-texto);
}
.cfgGrupoTitulo small{
    display: block;
    font-size: 12px;
    color: var(--cfg-texto-suave);
}
.cfgGrupoAviso{
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    background: #f9e1de;
    color: #b03a2e;
    font-size: 11px;
    font-weight: 600;
}
.cfgGrupoCorpo{
    padding: 12px 14px;
}
.cfgGrupoCorpo .cfgPerms{
    margin-bottom: 0;
}
/* Grupo desativado pelo "acesso apenas ao app" */
.cfgGrupo.bloqueado .cfgGrupoAviso{
    display: inline-flex;
}
.cfgGrupo.bloqueado .cfgGrupoIcone{
    background: #b8c0c8;
}
.cfgGrupo.bloqueado .cfgGrupoCorpo{
    opacity: 0.55;
}
/* NFS-e e Boleto lado a lado quando houver espaço */
.cfgGruposLado{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.cfgGruposLado .cfgGrupo{
    margin-bottom: 0;
}

/* CARTÕES DE PERMISSÃO */
.cfgPerms{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    margin-bottom: 6px;
}
.cfgPerm{
    border: 1px solid var(--cfg-borda);
    border-left: 4px solid #d2d6de;
    border-radius: 8px;
    background: #fafbfc;
    transition: border-color 0.15s, background-color 0.15s;
}
.cfgPerm.ativo{
    border-color: rgba(0, 166, 90, 0.35);
    border-left-color: var(--cfg-sucesso);
    background: rgba(0, 166, 90, 0.04);
}
.cfgPermLabel{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: normal;
}
.cfgPermLabel > div,
.cfgPermLabel > input{
    flex: 0 0 22px;
    margin: 0;
}
.cfgPermTexto{
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 1px;
    line-height: 1.35;
}
.cfgPermTexto strong{
    display: block;
    color: var(--cfg-texto);
    font-weight: 600;
}
.cfgPermTexto small{
    display: block;
    margin-top: 3px;
    color: var(--cfg-texto-suave);
    font-size: 12px;
    line-height: 1.4;
}
/* Permissão bloqueada (ex.: "apenas app" marcado) */
.cfgPermLabel .disabled + .cfgPermTexto{
    opacity: 0.5;
}
.cfgPermLabel .disabled ~ .cfgPermTexto,
.cfgPerm:has(.disabled) .cfgPermLabel{
    cursor: not-allowed;
}
.cfgPermDestaque{
    border-left-color: var(--cfg-primaria);
}
/* Versão compacta (modal de novo usuário): mais opções por linha, descrição em até 2 linhas */
.cfgPermsCompacto{
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.cfgPermsCompacto .cfgPerm{
    border-left-width: 3px;
}
.cfgPermsCompacto .cfgPermLabel{
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
}
.cfgPermsCompacto .cfgPermTexto{
    padding-top: 0;
    line-height: 1.25;
}
.cfgPermsCompacto .cfgPermTexto strong{
    font-size: 13px;
}
.cfgPermsCompacto .cfgPermTexto small{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.3;
}

/* Subtítulo com ação à direita (ex.: Marcar todos) */
.cfgSubtituloLinha{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 10px;
}
.cfgSubtituloLinha .cfgSubtitulo{
    margin: 0;
}
.cfgSubtituloLinha .btn{
    border-radius: 8px;
    font-weight: 600;
}
.cfgSubtituloMenor{
    margin: 14px 0 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cfg-texto-suave);
}
.cfgSubtituloMenor .fa{
    margin-right: 4px;
    color: var(--cfg-primaria);
}

/* Modal mais largo (novo usuário) */
@media (min-width: 992px){
    .cfgModalLargo{
        width: 1100px;
        max-width: 94vw;
    }
}

/* ABAS NFS-e E BANCO: mesmo visual dos cartões, sem mexer na estrutura delas */
.cfgAba .box{
    border: 1px solid var(--cfg-borda);
    border-radius: 10px;
    box-shadow: none;
}
.cfgAba .box .box{
    border-radius: 8px;
}
.cfgAba .box-header.with-border{
    padding: 14px 18px;
    border-bottom: 1px solid var(--cfg-borda);
}
.cfgAba .box-header .box-title{
    font-size: 16px;
    font-weight: 600;
    color: var(--cfg-texto);
}
/* Ícone antes do título (Config Banco / Config NFS-e), igual ao das outras abas */
.cfgAba .box-header .box-title{
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.3;
}
.cfgBoxIcone{
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    border-radius: 8px;
    background: var(--cfg-primaria);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
/* No flex o espaço do início do " — Pessoa Jurídica (PJ)" some: repõe com margem */
.cfgAba .box-header .box-title .labelPfPj{
    margin-left: 4px;
}
/* Barrinha lateral só para títulos que ainda não têm ícone */
.cfgAba .box-header .box-title:has(.cfgBoxIcone)::before{
    display: none;
}
.cfgAba .box-header .box-title::before{
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    margin-right: 10px;
    border-radius: 2px;
    background: var(--cfg-primaria);
    vertical-align: -2px;
}
.cfgAba .box-header > .box-tools{
    top: 10px;
    right: 14px;
}
.cfgAba .box-body{
    padding: 16px 18px;
}
.cfgAba .box-footer{
    padding: 12px 18px;
    background: #f7f9fb;
    border-top: 1px solid var(--cfg-borda);
    border-radius: 0 0 10px 10px;
}
.cfgAba .box-footer .btn,
.cfgAba .box-tools .btn,
.cfgAba .modal-footer .btn{
    border-radius: 8px;
}
.cfgAba .box-footer .btn{
    padding: 8px 18px;
    font-weight: 600;
}
.cfgAba .modal-content{
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.cfgAba .modal-header{
    padding: 16px 20px;
    border-bottom: 1px solid var(--cfg-borda);
}
.cfgAba .modal-header .modal-title{
    font-weight: 600;
}
.cfgAba .modal-footer{
    padding: 14px 20px;
    background: #f7f9fb;
    border-top: 1px solid var(--cfg-borda);
}

/* RESPONSIVO */
@media (max-width: 767px){
    .cfgResumo{
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        padding: 18px 14px;
    }
    .cfgResumoInfo{
        flex-basis: 100%;
    }
    .cfgResumoAcoes,
    .cfgResumoAcoes .btn{
        width: 100%;
    }
    .cfgCard{
        padding: 14px 12px 4px;
    }
    .cfgOpcoes{
        grid-template-columns: 1fr;
    }
    .cfgOpcaoDesc{
        padding-left: 0;
    }
    .cfgBarraSalvar .btn{
        width: 100%;
        min-width: 0;
    }
    .cfgDialog .ajs-footer .ajs-buttons .ajs-button{
        min-width: 0;
    }
    .nav-tabs-custom.cfgTabs > .tab-content{
        padding: 10px;
    }
    .cfgCardHeaderAcao{
        flex-wrap: wrap;
    }
    .cfgCardHeaderAcao > .btn{
        width: 100%;
    }
    .cfgPerms{
        grid-template-columns: 1fr;
    }
    .cfgUsuarioTopo{
        flex-wrap: wrap;
        padding: 12px;
    }
    .cfgUsuarioQtd{
        order: 3;
        margin-left: 52px;
    }
    .cfgUsuarioCorpo{
        padding: 12px 12px 0;
    }
    .cfgGruposLado{
        grid-template-columns: 1fr;
    }
    .cfgGrupoTopo{
        flex-wrap: wrap;
    }
    .cfgGrupoAviso{
        margin-left: 42px;
    }
    .cfgAcoesCard .btn{
        flex: 1 1 auto;
    }
}