@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
    /* ==============================
       CORES GERAIS
       ============================== */

    --body_gradient_left: #005ad0;
    --body_gradient_right: #0078c8;

    --background: #f3f4f6;
    --background_dark: #929292;

    --input_bg: #e5e5e5;
    --input_hover: #eaeaea;
    --input: #eaeaea;

    --shadow: rgba(0, 64, 124, 0.1);

    --primary: #ffffff;
    --primary_hover: color-mix(in srgb, var(--primary) 75%, black);
    --primary_alt: color-mix(in srgb, var(--primary) 65%, black);
    --primary_alt_hover: color-mix(in srgb, var(--primary) 55%, black);

    --secondary: #003985;
    --secondary_light: color-mix(in srgb, var(--secondary) 90%, white);
    --secondary_dark: color-mix(in srgb, var(--secondary) 80%, black);

    --accent: #1278fd;
    --accent_hover: color-mix(in srgb, var(--accent) 80%, black);

    --submit_bg: #0b3b5b;
    --submit_hover: #0b4fa7;

    --icon_color: #6b6b6b;

    --neutral: #000000;
    --reverse: #000000;
    --reverse_hover: color-mix(in srgb, var(--reverse) 95%, white);


    /* ==============================
       ESTADOS
       ============================== */

    --atrasado: #ffae00;
    --atrasado_hover: #d69200;

    --positive: #6bc94f;
    --positive_hover: color-mix(in srgb, var(--positive) 80%, black);

    --erro: #f02323;

    --negative: #ff6e6e;
    --negative_hover: color-mix(in srgb, var(--negative) 80%, black);

    --negative_alt: #fee2e2;
    --negative_alt_hover: #fecaca;


    /* ==============================
       DASHBOARD
       ============================== */

    --dashboard_bg: #f4f7fe;
    --dashboard_white: #ffffff;
    --dashboard_text: #334155;

    --dashboard_red: #ef4444;
    --dashboard_orange: #f59e0b;
    --dashboard_blue: #3b82f6;
    --dashboard_green: #10b981;

    --dashboard_border: #e2e8f0;
    --dashboard_border_light: #f1f5f9;
    --dashboard_header: #f8fafc;
    --dashboard_muted: #64748b;
    --dashboard_icon: #94a3b8;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Chivo Mono", monospace;

    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

input,
input:focus,
input:active {
    outline: none;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--accent);
}

link_footer {
    color: var(--primary);
    text-decoration: none;
}

/* =========================================================
   BODY
   ========================================================= */

body {
    background-color: var(--background);
    display: flex;
    flex-direction: column;
}

/* =========================================================
   LOGIN
   ========================================================= */

.login_box {
    background: var(--primary);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px var(--shadow);
    width: 350px;
    text-align: center;
}

h2 {
    color: var(--secondary);
    margin-bottom: 10px;
}

p {
    color: var(--background_dark);
    font-size: 14px;
    margin-bottom: 25px;
}


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

#logo {
    height: 80px;
    padding: 0 12px;

    background-color: var(--background);

    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav {
    width: 100%;
}

#div_logo_emop,
#div_logo_rge {
    height: 100%;
}

#div_logo_emop {
    width: 200px;
    aspect-ratio: 3 / 1;

    mask: url(../img/emop_logo.png) no-repeat center / contain;
    -webkit-mask: url(../img/emop_logo.png) no-repeat center / contain;

    background-color: var(--accent);
}

#div_logo_rge {
    width: 250px;
    aspect-ratio: 4 / 1;

    mask: url(../img/logo_rge.png) no-repeat center / contain;
    -webkit-mask: url(../img/logo_rge.png) no-repeat center / contain;

    background-color: var(--accent);
}


/* =========================================================
   FORMULÁRIO
   ========================================================= */

#form_login {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.input_wrapper {
    background-color: transparent;
    width: 100%;

    border-bottom: 1px solid var(--icon_color);

    display: flex;
    padding: 8px;
    gap: 8px;
}

.input_wrapper input {
    width: 100%;
    background-color: transparent;
    border: none;
}

.input_wrapper:focus-within {
    border-bottom-color: var(--accent);
}

.input_btn {
    background-color: transparent;
    border: 2px solid var(--accent);

    color: var(--accent);

    padding: 12px;
}

.input_btn:hover {
    background-color: var(--accent);
    color: var(--background);
}


/* =========================================================
   UTILITÁRIOS
   ========================================================= */

.rounded {
    border-radius: 5px;
}

.full-width {
    width: 100%;
}

.clicavel {
    cursor: pointer;
}


/* =========================================================
   ERROS
   ========================================================= */

.erro {
    background: var(--background);
    color: var(--erro);

    padding: 10px;
    border-radius: 6px;

    margin-bottom: 20px;
    font-size: 14px;
}


/* =========================================================
   LINKS DO FOOTER
   ========================================================= */

footer {
    min-height: 100px;
    color: var(--primary);
}

.footer_links {
    margin-top: 20px;
    font-size: 13px;
}

.footer_links a {
    color: var(--accent);
    text-decoration: none;
}

#footer_contato div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#formCadastro {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#footer_contato div h5 {
    opacity: 60%;
    width: fit-content;
}

.form_section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form_section_title {
    font-size: 14px;
    font-weight: 700;
    color: var(--secondary);
    border-bottom: 1px solid #ddd;
    padding-bottom: 7px;
}

.form_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.form_group {
    width: 100%;
}

.form_group.full {
    grid-column: 1 / -1;
}

.form_group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
}

.input_wrapper {
    width: 100%;
}

.input_wrapper .input_field {
    width: 100%;
    box-sizing: border-box;
}

.input_wrapper select.input_field {
    appearance: auto;
}

#btnCadastrar {
    margin-top: 10px;
}

#voltarLogin {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.obrigatorio {
    color: var(--erro);
}

/* =========================================================
   PÁGINA DE ERRO
   ========================================================= */

#footer_erro {
    text-align: center;
    background: var(--background);
    padding: 18px;
    color: var(--reverse);
    font-size: 14px;
    width: 100%;
}

#main_erro {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

#wrap_erro {
    background: var(--primary);

    max-width: 700px;
    width: 100%;

    border-radius: 12px;
    padding: 50px;

    text-align: center;

    box-shadow: 0 10px 30px var(--shadow);
}

.codigo_erro {
    font-size: 90px;
    font-weight: bold;

    color: var(--accent);

    line-height: 1;
}

.titulo_erro {
    margin-top: 20px;

    font-size: 32px;

    color: var(--reverse);
}

.texto_erro {
    margin-top: 20px;

    color: var(--reverse);

    font-size: 18px;
    line-height: 1.6;
}

.btn_msg_erro {
    display: inline-block;

    margin-top: 35px;

    padding: 14px 35px;

    background: var(--accent);
    color: var(--primary);

    text-decoration: none;

    border-radius: 6px;

    transition: 0.2s;

    font-weight: bold;
}

#pagina_inicio {
    display: flex;
    flex-direction: row;
    height: 100vh;
}

#inicio_esq {
    background-color: var(--primary);
    width: 50%;
    padding: 20px;
}

#inicio_esq_alt {
    background-color: var(--secondary);
    color: var(--primary);
    width: 50%;
    padding: 20px;
}

#inicio_dir {
    background-color: var(--secondary);
    width: 50%;
    background-image: url(../img/fundo_login.png);
    background-position: 90% center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

#inicio_dir_alt {
    background-color: var(--primary);
    width: 50%;
    background-image: url(../img/fundo_login.png);
    background-position: 90% center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

#inicio_form_wrapper,
#inicio_form_wrapper_alt {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    height: 90vh;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn_form {
    background-color: var(--secondary);
    border: none;
    padding: 12px;
    color: var(--primary);
}

.btn_form:hover {
    background-color: var(--secondary_light);
}

.btn_form_alt {
    background-color: var(--primary);
    border: none;
    padding: 12px;
    color: var(--secondary);
}

.btn_form_alt:hover {
    background-color: var(--primary_hover);
}



#inicio_form_wrapper form,
#inicio_form_wrapper_alt form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 60%;
}

#inicio_form_wrapper_alt form input {
    color: var(--primary);
}

#inicio_form_wrapper h3 {
    text-align: start;
    font-weight: bolder;
    font-size: xx-large;
    margin-bottom: 0px;
    color: var(--secondary);
}

#inicio_form_wrapper_alt h3 {
    text-align: start;
    font-weight: bolder;
    font-size: xx-large;
    margin-bottom: 0px;
    color: var(--primary);
}

#inicio_form_wrapper h5,
#inicio_form_wrapper_alt h5 {
    font-weight: lighter;
    margin-bottom: 22px;
}

#logoEmopAlt {
    width: 350px;
}

.overlayColor {
    background-color: var(--secondary_dark);
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

#footer_contato {
    background-color: var(--secondary);
    padding: 72px;
    display: flex;
    justify-content: space-evenly;
}

/* =========================================================
   POPUP
   ========================================================= */

.popup {
    display: flex;
    gap: 15px;

    position: fixed;

    top: -100%;
    left: 50%;

    justify-content: center;

    transform: translateX(-50%);

    padding: 20px;

    border-radius: 5px;

    text-align: center;

    transition: top 0.5s ease-in-out;

    z-index: 1000;

    width: fit-content;
    height: fit-content;
}

.popup img {
    width: 60px;
    height: 100%;
}

.popupContent {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 4px;

    max-width: 700px;
}

.popup_title,
.popup_message {
    line-height: 24px;
    text-align: start;
}

.popup_title {
    font-weight: 700;
    font-size: 24px;
}

.popup_message {
    font-weight: 300;
}

.popup.show {
    top: 20px;
}


/* =========================================================
   CORES DOS POPUPS
   ========================================================= */

.success {
    background-color: #dcf3d6;
    border: 1px solid #c2dfb8;
    color: #3d643f;
}

.warning {
    background-color: #f8f4c4;
    border: 1px solid #e9e29c;
    color: #955d02;
}

.error {
    background-color: #eec8c5;
    border: 1px solid #d49e9d;
    color: #c71e16;
}

.info {
    background-color: #cde9f7;
    border: 1px solid #9fcfeb;
    color: #007bb0;
}

.error_bg {
    background-color: var(--negative_alt) !important;
}

.error_bg:hover {
    background-color: var(--negative_alt_hover) !important;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.topbar {
    width: 100%;

    background: var(--secondary);
    color: var(--primary);

    padding: 0.8rem 2rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Container principal */

.container {
    max-width: 1200px;

    width: 100%;

    margin: 30px auto;

    padding: 0 20px;
}


/* =========================================================
   CARDS DE ESTATÍSTICAS
   ========================================================= */

.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(200px, 1fr));

    gap: 20px;

    margin-bottom: 30px;
}

.stat-card {
    background: var(--primary);

    padding: 20px;

    border-radius: 12px;

    display: flex;
    align-items: center;

    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.05);

    border-bottom: 4px solid #ddd;
}

.stat-card i {
    font-size: 2rem;
    margin-right: 15px;
}

.stat-card h3 {
    margin: 0;
    font-size: 1.5rem;
}

.stat-card p {
    margin: 0;

    font-size: 0.7rem;

    font-weight: bold;

    text-transform: uppercase;

    color: var(--dashboard_muted);
}


/* Cores dos cards */

.c-red {
    border-color: var(--dashboard_red);
    color: var(--dashboard_red);
}

.c-orange {
    border-color: var(--dashboard_orange);
    color: var(--dashboard_orange);
}

.c-blue {
    border-color: var(--dashboard_blue);
    color: var(--dashboard_blue);
}

.c-green {
    border-color: var(--dashboard_green);
    color: var(--dashboard_green);
}


/* =========================================================
   BARRA DE FERRAMENTAS
   ========================================================= */

.toolbar {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 20px;

    gap: 15px;
}

.search-wrapper {
    position: relative;
    flex: 1;
}

.search-wrapper i {
    position: absolute;

    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--dashboard_icon);
}

.search-input {
    width: 100%;

    padding: 12px 45px;

    border-radius: 30px;

    border: 1px solid var(--dashboard_border);

    outline: none;

    box-sizing: border-box;

    background: var(--primary);
}

.search-input:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px color-mix(in srgb,
            var(--accent) 12%,
            transparent);
}

.link {
    color: var(--secondary_light);
    text-decoration: underline;
}

.link_alt {
    color: var(--primary);
    text-decoration: underline;
}


/* =========================================================
   BOTÕES
   ========================================================= */

.btn-new {
    background: var(--dashboard_green);

    color: var(--primary);

    text-decoration: none;

    padding: 12px 25px;

    border-radius: 30px;

    font-weight: 600;

    display: flex;
    align-items: center;

    gap: 10px;

    transition: 0.3s;
}

.btn-new:hover {
    filter: brightness(0.92);
}

.btn-pendente {
    background: var(--dashboard_orange);
}


/* =========================================================
   TABELA
   ========================================================= */

.table-card {
    background: var(--primary);

    border-radius: 15px;

    overflow: hidden;

    box-shadow:
        0 10px 15px rgba(0, 0, 0, 0.05);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: var(--dashboard_header);

    padding: 18px;

    text-align: left;

    font-size: 0.75rem;

    color: var(--dashboard_muted);

    text-transform: uppercase;
}

td {
    padding: 18px;

    border-top: 1px solid var(--dashboard_border_light);
}


/* =========================================================
   BADGES
   ========================================================= */

.badge {
    padding: 4px 10px;

    border-radius: 20px;

    font-size: 0.7rem;

    font-weight: bold;
}

.bg-red {
    background: #fee2e2;
    color: #b91c1c;
}


/* =========================================================
   AÇÕES
   ========================================================= */

.actions {
    display: flex;

    gap: 15px;

    justify-content: flex-end;
}

.actions a {
    color: var(--dashboard_icon);

    font-size: 1.1rem;

    text-decoration: none;
}

.actions a:hover {
    color: var(--accent);
}


/* =========================================================
   RESPONSIVIDADE
   ========================================================= */

@media screen and (max-width: 1200px) {

    .popup_title {
        font-size: 22px;
    }

    .popup_message {
        font-size: 14px;
    }

}

@media (max-width: 900px) {

    #inicio_dir {
        display: none;
    }

    #inicio_esq {
        width: 100% !important;
    }

    #inicio_form_wrapper,
    #inicio_form_wrapper_alt {
        max-width: 700px;
        margin: auto;
    }

}


@media screen and (max-width: 768px) {

    .popup_title {
        font-size: 21px;
    }

    .popup_message {
        font-size: 14px;
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-new {
        justify-content: center;
    }

    .table-card {
        overflow-x: auto;
    }

    .permBadges {
        grid-template-columns: repeat(3, 1fr);
    }

    #homeBanner {
        position: relative;
        height: 30vh;
        background-color: var(--secondary);
    }

    .containerPDFs h1 {
        font-size: medium;
    }

    .containerPDFs a {
        font-size: small;
    }

    #perfilDados {
        flex-direction: column;
        align-items: start;
        gap: 20px;
    }

    #perfilPacote {
        width: 100%;
    }

    #pagina_inicio {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .wid50 {
        width: 100vw;
    }

    .vetor {
        width: 14px;
    }

    #divLogoAlt {
        display: flex;
        justify-content: center;
        padding-bottom: 12px;
        border-bottom: 3px solid var(--secondaryLight);
    }

    #inicio_esq {
        background-color: var(--primary);
        width: 100%;
        padding: 10px;
    }

    #inicio_dir {
        display: none;
    }

    #semConta {
        font-size: small;
    }

    #navHorizontal div {
        font-weight: 500;
        font-size: 10px;
    }

    #navHorizontal button svg {
        fill: var(--primary);
    }

    #navHorizontal button:hover svg {
        fill: var(--accent);
    }

    .dropdown-content.show {
        display: block;
        z-index: 999;
    }

    #dropdownButtonWrap {
        display: block;
    }


    #wrapPerfil {
        display: none;
    }

    #navPerfil img {
        margin-right: 0px;
    }

    #navPerfil img:hover {
        cursor: pointer;
    }

    th {
        font-size: 7px;
        font-weight: 600;
    }

    td {
        font-size: 7px;
    }

    .pagination button,
    #pdf-controls button {
        padding: 0 8px;
        font-size: 12px;
    }

    .input {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .inputField {
        font-size: 12px;
    }

    .inputLabel,
    .inputLabelAlt {
        font-size: small;
        left: 10px;
        top: 13px;
    }

    .inputField:focus+.inputLabel,
    .inputField:not(:placeholder-shown)+.inputLabel {
        transform: translate(0.20rem, -100%) scale(0.8);
        color: var(--secondary);
        background-color: var(--primary);
    }

    .inputsContainer {
        display: block;
    }

    input:checked+.slider:before {
        transform: translateX(13px);
    }

    .inputsContainer select {
        width: 100%;
    }

    .pesquisa {
        width: 100%;
    }

    #menuTabelaOpcoes,
    #menuTabela {
        flex-direction: column;
        width: 100%;
    }

    #menuTabelaOpcoes button {
        background-color: var(--primary);
        border: 3px solid var(--neutral);
        color: var(--neutral);
        height: fit-content;
        padding: 12px;
        width: 100%;
    }

    #exportExcel img {
        display: none;
    }

    #exportExcel,
    #exportExcel span {
        display: block;
        width: 100%;
    }

    .popupTitle {
        font-size: 21px;
    }

    .popupMessage {
        font-size: 14px;
    }

    #noticias {
        min-height: 80vh;
        margin-top: -20px;
        background-color: var(--primary);
        display: flex;
        flex-direction: column;
        gap: 90px;
        grid-auto-rows: minmax(20px, auto);
        padding: 20px;
    }

    .noticia {
        background-color: var(--secondary);
        display: flex;
        flex-direction: column;
        width: 60%;
        height: 350px;
        justify-content: center;
        align-items: center;
        border-radius: 10px 10px 0px 0px;
    }

    .noticiaImg img {
        border-radius: 10px 10px 0px 0px;
        width: 100%;
        height: 120px;
    }

    .noticiaContent {
        flex-direction: column;
        justify-content: space-evenly;
    }

    .noticiaText {
        color: var(--primary);
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .noticiaText h3 {
        font-weight: 500;
        font-size: large;
    }

    .noticiaText span {
        font-weight: 300;
        font-size: small;
    }

    .noticia button {
        width: 125px;
        padding: 10px;
        border-radius: 8px;
        font-size: medium;
        font-weight: 400;

        transition: all 0.3s ease;
        background-color: var(--primary);
        border: none;
    }

    #footer_contato {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

}

@media (max-width: 600px) {

    .form_grid {
        grid-template-columns: 1fr;
    }

    .form_group.full {
        grid-column: auto;
    }

    #inicio_form_wrapper,
    #inicio_form_wrapper_alt {
        padding: 20px;
    }

}

@media screen and (max-width: 568px) {

    #logo_emop {
        height: 70%;
    }

    .popup_title {
        font-size: 21px;
    }

    .popup_message {
        font-size: 14px;
    }

    .container {
        padding: 0 12px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

}