/* =====================================================
HEADER PREMIUM SISGCOE
===================================================== */

.topo-sistema {

    background:
        linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);

    padding: 18px 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    box-shadow:
        0 2px 10px rgba(0,0,0,0.06);

    border-bottom:
        1px solid rgba(0,0,0,0.05);

    position: sticky;

    top: 0;

    z-index: 999;
}

/* ===== LOGOS ===== */

.topo-sistema img {

    height: 72px;

    object-fit: contain;

    transition: transform 0.2s ease;
}

.topo-sistema img:hover {
    transform: scale(1.03);
}

/* ===== CENTRO ===== */

.titulo-central {

    text-align: center;

    flex: 1;
}

/* ===== TÍTULO ===== */

.titulo-sistema {

    font-size: 34px;

    font-weight: 800;

    color:var(--text-main);

    letter-spacing: 0.5px;

    margin-bottom: 6px;
}

/* ===== SUBTÍTULO ===== */

.subtitulo-sistema {

    font-size: 13px;

    color: #6b7280;

    letter-spacing: 1px;

    text-transform: uppercase;
}

/* ===== LINHA PREMIUM ===== */

.linha-topo {

    width: 120px;

    height: 4px;

    border-radius: 999px;

    margin: 10px auto 0;

    background:
        linear-gradient(90deg,
        #2388ff 0%,
        #28a745 100%);
}

/* =====================================================
BARRA GESTÃO
===================================================== */

.barra-gestao {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 14px;

    margin-top: 0px;

    margin-bottom: 18px;
}

/* ===== TÍTULO ===== */

.barra-gestao h2 {

    margin: 0;

    font-size: 22px;

    font-weight: 800;

    color:var(--text-main);
}

/* ===== BOTÃO TOPO ===== */

.btn-topo {

    border: none;

    border-radius: 10px;

    background: #2388ff;

    color: white;

    padding: 7px 14px;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

    box-shadow:
        0 2px 6px rgba(0,0,0,0.08);
}

.btn-topo:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

/* =========================
   PRELOADER ENTERPRISE
========================= */

#preloader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#f4f6f9;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity .2s ease;
}

.loader-conteudo{
    text-align:center;
    animation:fadeLoader .5s ease;
}

.loader-logo{
    width:120px;
    margin-bottom:20px;
}

.loader-conteudo h2{
    font-size:42px;
    color:#102542;
    margin-bottom:10px;
    font-weight:bold;
}

.loader-conteudo p{
    color:#666;
    font-size:16px;
}

body.loaded #preloader{
    opacity:0;
    pointer-events:none;
}

@keyframes fadeLoader{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* =====================================================
BOTÃO TEMA
===================================================== */

.btn-tema{

    border:none;

    width:42px;
    height:42px;

    border-radius:14px;

    cursor:pointer;

    font-size:18px;

    background:
        linear-gradient(180deg,
        #1e293b 0%,
        #0f172a 100%);

    color:white;

    box-shadow:
        0 8px 20px rgba(15,23,42,.28);

    transition:.18s ease;
}

.btn-tema:hover{

    transform:translateY(-1px);

    filter:brightness(1.08);
}

.btn-tema:hover{

    transform:translateY(-1px);

    background:#f8fafc;
}