/* ==========================================================================
   Marca Abase (navy/laranja) — Portal da Transparência
   Carregado POR ÚLTIMO em todos os layouts (_Css, _LayoutHome, _LayoutLogin,
   _LayoutAdministrador) para sobrescrever o vendor WrapPixel (style.min.css).

   IMPORTANTE (acessibilidade): o "Alto Contraste" (assets/dist/js/acessibilidade.js)
   aplica style inline em todos os elementos. Inline vence CSS normal, mas perde
   para !important — por isso aqui só se usa !important onde o vendor JÁ usava
   (utilitários .text-*/.bg-*/.border-*). O resto vence o vendor por
   especificidade/ordem de carregamento. Não adicionar !important em cor/fundo.
   ========================================================================== */

:root {
    --abase-navy: #171e45;
    --abase-navy-claro: #232c5e;
    --abase-orange: #f2542d;
    --abase-orange-escuro: #d8431f;
}

/* ---------- Topbar: sempre navy (vence qualquer skin salva) ---------- */
body[class*="skin-"] .topbar {
    background: var(--abase-navy, #171e45);
}

    /* friso laranja entre o cabeçalho e o conteúdo (mesmo padrão do header dos modais).
       Desenhado DENTRO do topbar (::after absoluto) para não alterar a altura de 70px
       da qual dependem .page-wrapper e .left-sidebar. */
    body[class*="skin-"] .topbar::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: var(--abase-orange, #f2542d);
        pointer-events: none;
        z-index: 2;
    }

/* ---------- Links (laranja escuro = contraste AA sobre branco) ---------- */
a {
    color: var(--abase-orange-escuro, #d8431f);
}

    a:hover {
        color: var(--abase-navy, #171e45);
    }

/* ---------- Preloader ---------- */
.loader__figure {
    border-color: var(--abase-orange, #f2542d);
}

.loader__label {
    color: var(--abase-navy, #171e45);
}

@-webkit-keyframes loader-figure {
    0% { height: 0; width: 0; background-color: #f2542d; }
    29% { background-color: #f2542d; }
    30% { height: 2em; width: 2em; background-color: transparent; border-width: 1em; opacity: 1; }
    100% { height: 2em; width: 2em; border-width: 0; opacity: 0; background-color: transparent; }
}

@keyframes loader-figure {
    0% { height: 0; width: 0; background-color: #f2542d; }
    29% { background-color: #f2542d; }
    30% { height: 2em; width: 2em; background-color: transparent; border-width: 1em; opacity: 1; }
    100% { height: 2em; width: 2em; border-width: 0; opacity: 0; background-color: transparent; }
}

/* ---------- Breadcrumb ---------- */
body[class*="skin-"] .page-titles .breadcrumb .breadcrumb-item.active {
    color: var(--abase-navy, #171e45);
}

/* ---------- Menu lateral (_Layout: #menu-lateral) — navy sólido ---------- */
#menu-lateral,
#menu-lateral .scroll-sidebar,
#menu-lateral .sidebar-nav {
    background: var(--abase-navy, #171e45);
}

    #menu-lateral .sidebar-nav ul li a {
        color: rgba(255, 255, 255, .82);
    }

    #menu-lateral .sidebar-nav > ul > li > a {
        border-left: 0;
        margin: 2px 8px;
        border-radius: 6px;
    }

        #menu-lateral .sidebar-nav > ul > li > a i {
            color: rgba(255, 255, 255, .82);
        }

    #menu-lateral .sidebar-nav ul li a:hover,
    #menu-lateral .sidebar-nav ul li a:hover i {
        color: #fff;
    }

    #menu-lateral .sidebar-nav > ul > li > a:hover {
        background: rgba(255, 255, 255, .06);
    }

    /* item ativo = pill laranja sólido */
    #menu-lateral .sidebar-nav > ul > li.active > a,
    #menu-lateral .sidebar-nav ul li a.active {
        background: var(--abase-orange, #f2542d);
        color: #fff;
        border-left: 0;
    }

        #menu-lateral .sidebar-nav > ul > li.active > a i,
        #menu-lateral .sidebar-nav ul li a.active i {
            color: #fff;
        }

    #menu-lateral .sidebar-nav ul li a:focus-visible {
        outline: 2px solid var(--abase-orange, #f2542d);
        outline-offset: -2px;
    }

/* ripple do Waves sobre navy: bem sutil (ver armadilha 17 da skill) */
#menu-lateral .waves-ripple {
    background-color: rgba(255, 255, 255, .12);
}

/* Mini-sidebar: o fundo fica só na coluna de 70px (.left-sidebar). A área interna
   cresce até a largura do item em hover (290px) e, pintada, abria o painel inteiro. */
.mini-sidebar #menu-lateral .scroll-sidebar,
.mini-sidebar #menu-lateral .sidebar-nav {
    background: transparent;
}

/* Mini-sidebar: item colapsado vira flyout laranja com acabamento de tooltip */
.mini-sidebar #menu-lateral .sidebar-nav #sidebarnav > li > a {
    margin: 2px 0;
    border-radius: 0;
}

.mini-sidebar #menu-lateral .sidebar-nav #sidebarnav > li:hover > a {
    background: var(--abase-orange, #f2542d);
    color: #fff;
    position: relative;
    z-index: 1002;
    border-radius: 0 6px 6px 0;
    box-shadow: 6px 8px 24px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .18);
}

    .mini-sidebar #menu-lateral .sidebar-nav #sidebarnav > li:hover > a i {
        color: #fff;
    }

.mini-sidebar #menu-lateral .sidebar-nav #sidebarnav > li > ul {
    background: var(--abase-navy, #171e45);
}

/* ---------- Menu horizontal (_LayoutHome) — mantém fundo claro ---------- */
body[class*="skin-"] .sidebar-nav ul li a.active,
body[class*="skin-"] .sidebar-nav ul li a.active i,
body[class*="skin-"] .sidebar-nav ul li a:hover,
body[class*="skin-"] .sidebar-nav ul li a:hover i,
body[class*="skin-"] .sidebar-nav > ul > li.active > a,
body[class*="skin-"] .sidebar-nav > ul > li.active > a i {
    color: var(--abase-orange-escuro, #d8431f);
}

body[class*="skin-"] .sidebar-nav > ul > li.active > a {
    border-left-color: var(--abase-orange, #f2542d);
}

/* ---------- Botões ---------- */
.btn-info,
.btn-primary,
.btn-info.disabled, .btn-info:disabled,
.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: var(--abase-orange, #f2542d);
    border-color: var(--abase-orange, #f2542d);
}

    .btn-info:hover, .btn-info:focus, .btn-info.focus,
    .btn-primary:hover, .btn-primary:focus, .btn-primary.focus,
    .btn-info:not(:disabled):not(.disabled).active,
    .btn-info:not(:disabled):not(.disabled):active,
    .show > .btn-info.dropdown-toggle,
    .btn-primary:not(:disabled):not(.disabled).active,
    .btn-primary:not(:disabled):not(.disabled):active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: var(--abase-orange-escuro, #d8431f);
        border-color: var(--abase-orange-escuro, #d8431f);
        box-shadow: 0 0 0 .2rem rgba(242, 84, 45, .3);
    }

.btn-outline-info,
.btn-outline-primary,
.btn-outline-info.disabled, .btn-outline-info:disabled,
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: var(--abase-orange-escuro, #d8431f);
    border-color: var(--abase-orange, #f2542d);
    background-color: transparent;
}

    .btn-outline-info:hover, .btn-outline-primary:hover,
    .btn-outline-info:not(:disabled):not(.disabled).active,
    .btn-outline-info:not(:disabled):not(.disabled):active,
    .show > .btn-outline-info.dropdown-toggle,
    .btn-outline-primary:not(:disabled):not(.disabled).active,
    .btn-outline-primary:not(:disabled):not(.disabled):active,
    .show > .btn-outline-primary.dropdown-toggle {
        color: #fff;
        background-color: var(--abase-orange, #f2542d);
        border-color: var(--abase-orange, #f2542d);
    }

    .btn-outline-info:focus, .btn-outline-info.focus,
    .btn-outline-primary:focus, .btn-outline-primary.focus {
        box-shadow: 0 0 0 .2rem rgba(242, 84, 45, .3);
    }

.btn-link {
    color: var(--abase-orange-escuro, #d8431f);
}

/* secundário navy — para grupos com 2+ ações primárias (armadilha 22 da skill) */
.btn-abase-secundario {
    color: #fff;
    background-color: var(--abase-navy, #171e45);
    border-color: var(--abase-navy, #171e45);
}

    .btn-abase-secundario:hover, .btn-abase-secundario:focus {
        color: #fff;
        background-color: var(--abase-navy-claro, #232c5e);
        border-color: var(--abase-navy-claro, #232c5e);
    }

body .dt-buttons .dt-button {
    background: var(--abase-orange, #f2542d);
    color: #fff;
}

/* ---------- Labels / badges / utilitários (vendor já usa !important) ---------- */
.label-info,
.label-primary,
.badge-info,
.badge-primary {
    color: #fff;
    background-color: var(--abase-orange, #f2542d);
}

.bg-info,
.bg-primary {
    background-color: var(--abase-orange, #f2542d) !important;
}

.text-info,
.text-primary {
    color: var(--abase-orange-escuro, #d8431f) !important;
}

.border-info,
.border-primary {
    border-color: var(--abase-orange, #f2542d) !important;
}

html body .bg-theme,
.round.round-primary {
    background-color: var(--abase-orange, #f2542d);
}

/* ---------- Paginação (vendor + DataTables) ---------- */
body .page-link {
    color: var(--abase-navy, #171e45);
}

body .page-item.active .page-link,
body .active > .page-link,
body .page-link.active {
    color: #fff;
    background-color: var(--abase-orange, #f2542d);
    border-color: var(--abase-orange, #f2542d);
}

/* ---------- Navegação por abas / pills / listas / dropdown ---------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.list-group-item.active,
.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    background-color: var(--abase-orange, #f2542d);
    border-color: var(--abase-orange, #f2542d);
}

.customtab li a.nav-link.active,
.profile-tab li a.nav-link.active {
    border-bottom-color: var(--abase-orange, #f2542d);
    color: var(--abase-orange-escuro, #d8431f);
}

.customtab li a.nav-link:hover,
.profile-tab li a.nav-link:hover,
ul.list-style-none li a:hover {
    color: var(--abase-orange-escuro, #d8431f);
}

.progress-bar {
    background-color: var(--abase-orange, #f2542d);
}

/* ---------- Formulários ---------- */
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: var(--abase-orange, #f2542d);
    background-color: var(--abase-orange, #f2542d);
}

.form-material .form-control,
.form-material .form-control.focus,
.form-material .form-control:focus,
.dataTables_filter input,
.dataTables_filter input:focus,
.dataTables_length select,
.dataTables_length select:focus {
    background-image: linear-gradient(#f2542d, #f2542d), linear-gradient(#e9ecef, #e9ecef);
}

.form-control-line .form-control:focus {
    border-bottom-color: var(--abase-orange, #f2542d);
}

body .bootstrap-select .dropdown-menu li a:focus,
body .bootstrap-select .dropdown-menu li a:hover {
    color: var(--abase-orange-escuro, #d8431f);
}

/* ---------- Select2 (global) ---------- */
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--abase-orange, #f2542d);
    color: #fff;
}

body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--abase-orange, #f2542d);
    border-color: var(--abase-orange, #f2542d);
    color: #fff;
}

body .select2-container--default.select2-container--focus .select2-selection--multiple,
body .select2-container--open .select2-selection--single {
    border-color: var(--abase-orange, #f2542d);
}

/* ---------- Datepickers ---------- */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background: var(--abase-orange, #f2542d);
    color: #fff;
}

/* ---------- Modais: header navy + friso laranja (padrão aprovado) ---------- */
.modal-header {
    background: var(--abase-navy, #171e45);
    border-bottom: 3px solid var(--abase-orange, #f2542d);
}

    .modal-header .modal-title {
        color: #fff;
    }

    .modal-header .close,
    .modal-header .btn-close {
        color: #fff;
        text-shadow: none;
        opacity: .85;
    }

    .modal-header .btn-close {
        filter: invert(1) grayscale(1) brightness(2);
    }

        .modal-header .close:hover,
        .modal-header .btn-close:hover {
            opacity: 1;
        }

/* ---------- Painel de Serviços (lateral direita) ---------- */
.right-sidebar .rpanel-title {
    background: var(--abase-navy, #171e45);
    border-bottom: 3px solid var(--abase-orange, #f2542d);
}

/* ---------- Tokens dos ícones dos cards de menu (Home/submenus) ---------- */
body,
body[class*="skin-"] {
    --icon-bg-from: #fde4dc;
    --icon-bg-to: #fbc9b9;
    --icon-bg-hov-from: #fbc9b9;
    --icon-bg-hov-to: #f89f85;
    --icon-color: var(--abase-orange, #f2542d);
    --icon-shadow: rgba(242, 84, 45, .18);
    --icon-shadow-hov: rgba(242, 84, 45, .28);
}

/* ---------- Tabelas coloridas do template ---------- */
.color-table.primary-table thead th,
.color-bordered-table.primary-bordered-table thead th {
    background-color: var(--abase-navy, #171e45);
    color: #fff;
}

.color-bordered-table.primary-bordered-table {
    border-color: var(--abase-navy, #171e45);
}

/* ---------- Mapa do site (_LayoutHome, antes do rodapé) ---------- */
.mapa-site {
    margin-top: 40px;
    background: var(--abase-navy, #171e45);
    border-top: 3px solid var(--abase-orange, #f2542d);
    color: rgba(255, 255, 255, .82);
}

.mapa-site-conteudo {
    padding: 28px 30px 24px;
}

.mapa-site-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin-bottom: 18px;
}

    .mapa-site-cabecalho h2 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: #fff;
    }

        .mapa-site-cabecalho h2 i {
            color: var(--abase-orange, #f2542d);
            margin-right: 4px;
        }

    .mapa-site-cabecalho span {
        font-size: .82rem;
        color: rgba(255, 255, 255, .6);
    }

.mapa-site-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 4px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mapa-site-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: .85rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

    .mapa-site-item a:hover,
    .mapa-site-item a:focus-visible {
        background: rgba(255, 255, 255, .07);
        color: #fff;
        text-decoration: none;
    }

    .mapa-site-item a:focus-visible {
        outline: 2px solid var(--abase-orange, #f2542d);
        outline-offset: 1px;
    }

.mapa-site-icone {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    color: var(--abase-orange, #f2542d);
    background: rgba(242, 84, 45, .14);
    transition: background-color .15s ease, color .15s ease;
}

.mapa-site-item a:hover .mapa-site-icone {
    background: var(--abase-orange, #f2542d);
    color: #fff;
}

@media (max-width: 575px) {
    .mapa-site-conteudo {
        padding: 22px 16px 18px;
    }

    .mapa-site-lista {
        grid-template-columns: 1fr 1fr;
    }
}

/* Rodapé da _LayoutHome: o home/css/abase.css deixa o .footer em position:absolute
   (bottom:0), o que o faz cobrir o mapa do site. Aqui ele volta ao fluxo normal,
   logo depois do mapa; o body em coluna flex mantém o rodapé colado embaixo
   quando a página é curta. */
body.horizontal-nav {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    body.horizontal-nav > #main-wrapper {
        flex: 1 0 auto;
    }

    body.horizontal-nav > .mapa-site,
    body.horizontal-nav > .footer {
        flex-shrink: 0;
    }

.horizontal-nav .footer {
    position: relative;
}

/* lista do mapa com altura limitada + rolagem própria (entidades com muitos menus) */
.mapa-site-lista {
    max-height: 190px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

    .mapa-site-lista::-webkit-scrollbar {
        width: 6px;
    }

    .mapa-site-lista::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .25);
        border-radius: 3px;
    }

/* Mapa do site compacto: 2 linhas visíveis, cada item em uma linha só
   (nome longo vira reticências; nome completo no title do link).
   Altura do item = 5px + 24px (ícone) + 5px = 34px; 2 linhas + 1 gap de 2px = 70px. */
.mapa-site-conteudo {
    padding: 16px 30px 14px;
}

.mapa-site-cabecalho {
    margin-bottom: 10px;
}

    .mapa-site-cabecalho h2 {
        font-size: 1rem;
    }

.mapa-site-lista {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    grid-auto-rows: 34px;
    gap: 2px 14px;
    max-height: 70px;
    scroll-snap-type: y mandatory;
}

.mapa-site-item {
    min-width: 0;
    scroll-snap-align: start;
}

    .mapa-site-item a {
        height: 34px;
        gap: 8px;
        padding: 5px 8px;
        font-size: .8rem;
    }

        .mapa-site-item a > span:last-child {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.mapa-site-icone {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: .72rem;
}

@media (max-width: 575px) {
    .mapa-site-conteudo {
        padding: 14px 16px 12px;
    }
}