@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;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');
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@800&display=swap');
:root {
    --green-50: #f2fbf2;
    --green-100: #e2f6e3;
    --green-200: #c6ecc8;
    --green-300: #98dd9c;
    --green-400: #64c46a;
    --green-500: #3fa846;
    --green-600: #2f8a35;
    --green-700: #286d2d;
    --green-800: #245728;
    --green-900: #1f4823;
    --green-950: #0c270f;
}

* { font-family: "Poppins", sans-serif; color: #0B334C; }
p { font-size: 16px; margin: 0;}
h1, h2, h3, h4, h5 { font-weight: 600; margin: 0; }

.fi {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1 !important;
}

/* Fontes */
.fs-7 { font-size: 14px !important; }
.f-size { font-size: 12px !important; }
.fw-semi { font-weight: 500; }
.f-libre { font-family: "Libre Bodoni", serif; }
.f-dipe { font-family: "Bungee", serif; }
.f-exo { font-family: "Exo", sans-serif; }

/* Colors */
.c-padrao { color: var(--green-400) !important; }
.c-secundaria { color: var(--green-950) !important; }
.c-hover { color: var(--green-800) !important; }
.c-nota { color: var(--green-500) !important; }
.c-black { color: #0B334C !important; }
.c-portugues { color: #7E78D2; }
.c-matematica { color: #0FA3B1; }
.c-ciencias { color: #FE938C; }
.c-humanas { color: #B8860B; }
.c-tecnica { color: #6C757D; }

/* Perfil aluno: cards e gráficos de simulados na mesma linha (3 ou 5 colunas iguais) */
.perfil-simulados-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .perfil-simulados-linha {
        flex-wrap: nowrap;
    }
    .perfil-simulados-linha .perfil-simulado-item {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
    }
}
@media (max-width: 767.98px) {
    .perfil-simulados-linha .perfil-simulado-item {
        flex: 1 1 100%;
    }
}

.bg-portugues { background-color: rgb(126, 120, 210) !important;}
.bg-matematica { background-color: rgb(15, 163, 177) !important;}
.bg-ciencias { background-color: rgb(254, 147, 140) !important;}

.bg-portugues-50 { background-color: #b9b5ee !important;}
.bg-matematica-50 { background-color: #8ad4db !important;}
.bg-ciencias-50 { background-color: #ffb3ac !important;}

.card-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem; /* Tamanho do ícone */
    color: #1a3b5d; /* Cor azul escuro dos ícones na imagem */
}

/* Fundos */
.bg-padrao { background-color: var(--green-500) !important; }
.bg-padrao-claro { background-color: var(--green-400) !important; }
.bg-secundaria { background-color: var(--green-200); }
.bg-branco { background-color: white; }
.bg-fundo { background-color: #F9F8FA; }
.bg-cinza { background-color: #F1F1F1; }
.bg-black { background-color: #0B334C !important; }
.bg-gradiente { background: linear-gradient(172.513deg, var(--green-200) 0%, var(--green-500) 100%); }
.bg-pattern {
    background-image: url('../img/pattern.png');
    background-size: 100px;
}

.borda { border: #D9D9D9 solid 1px; }
.borda-padrao { border: var(--green-500) solid 1px;}

html {
    scrollbar-color: var(--green-300) transparent; /* Firefox */
}
html::-webkit-scrollbar {
    width: 10px;
}
html::-webkit-scrollbar-track {
    background: transparent;
}
html::-webkit-scrollbar-thumb {
    background-color: var(--green-300);
    border-radius: 8px;
}
html::-webkit-scrollbar-thumb:hover {
    background-color: var(--green-400);
}

/* Pills de disciplinas (estilo ideia13) */
.nav-pills.materiais-pills .nav-link {
    background-color: white;
    color: #6c757d;
    border: 1px solid #D9D9D9;
    border-radius: 0.375rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
}

.nav-pills.materiais-pills .nav-link.active-all {
    background-color: #0B334C !important;
    color: white !important;
    border-color: #0B334C;
}.nav-pills.materiais-pills .nav-link.active-all i{
    color: white !important;
}

.nav-pills.materiais-pills .nav-link.active-port {
    background-color: #d3d1f5 !important;
    color: #7972df !important;
    border-color: #b9b5ee;
}.nav-pills.materiais-pills .nav-link.active-port i{
    color: #7972df !important;
}

.nav-pills.materiais-pills .nav-link.active-mat {
    background-color: #ccf9fd !important;
    color: #3ea2af !important;
    border-color: #8ad4db;
}.nav-pills.materiais-pills .nav-link.active-mat i{
    color: #3ea2af !important;
}

.nav-pills.materiais-pills .nav-link.active-cien {
    background-color: #fcd7d4 !important;
    color: #da5e56 !important;
    border-color: #ffb3ac;
}.nav-pills.materiais-pills .nav-link.active-cien i{
    color: #da5e56 !important;
}

.nav-pills.materiais-pills .nav-link.active-geral {
    background-color: #e8eaf0 !important;
    color: #455a64 !important;
    border-color: #b0bec5;
}.nav-pills.materiais-pills .nav-link.active-geral i{
    color: #455a64 !important;
}

.nav-pills.materiais-pills .nav-link.active-hum {
    background-color: #fff3e0 !important;
    color: #e65100 !important;
    border-color: #ffcc80;
}.nav-pills.materiais-pills .nav-link.active-hum i{
    color: #e65100 !important;
}

.nav-pills.materiais-pills .nav-link.active-tec {
    background-color: #ede7f6 !important;
    color: #5e35b1 !important;
    border-color: #b39ddb;
}.nav-pills.materiais-pills .nav-link.active-tec i{
    color: #5e35b1 !important;
}

/* Ícones dos cards por tipo: fundo e cor do ícone (padrão ideia14) */
#disciplinasTabContent .icon-tipo-video { background-color: #e3f2fd !important; }
#disciplinasTabContent .icon-tipo-video i { color: #1976d2 !important; }
#disciplinasTabContent .icon-tipo-documento { background-color: #ffebee !important; }
#disciplinasTabContent .icon-tipo-documento i { color: #d32f2f !important; }
#disciplinasTabContent .icon-tipo-exercicio { background-color: #e8f5e9 !important; }
#disciplinasTabContent .icon-tipo-exercicio i { color: var(--green-600) !important; }
#disciplinasTabContent .icon-tipo-aula { background-color: #e0f7fa !important; }
#disciplinasTabContent .icon-tipo-aula i { color: #00838f !important; }
#disciplinasTabContent .icon-tipo-resumo { background-color: #eceff1 !important; }
#disciplinasTabContent .icon-tipo-resumo i { color: #546e7a !important; }
#disciplinasTabContent .icon-tipo-outro { background-color: #e8f5e9 !important; }
#disciplinasTabContent .icon-tipo-outro i { color: var(--green-600) !important; }

/* Badge matéria (mesmas cores dos pills, sem borda) */
.badge-matéria-port { background-color: #d3d1f5 !important; color: #7972df !important; }
.badge-matéria-mat { background-color: #ccf9fd !important; color: #3ea2af !important; }
.badge-matéria-cien { background-color: #fcd7d4 !important; color: #da5e56 !important; }
.badge-matéria-outro { background-color: #e9ecef !important; color: #6c757d !important; }

.materiais-card-aluno {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.materiais-card-aluno:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px);
}

/* Cards de prova (gestor/professor): badge Ativa com verde do sistema */
.card-prova .badge-ativa { background-color: var(--green-100) !important; color: var(--green-700) !important; border-color: var(--green-300) !important; }

/* Temas ativos na sidebar: texto e ícones em c-hover */
.list-group-item.bg-secundaria.c-hover,
.list-group-item.bg-secundaria.c-hover span,
.list-group-item.bg-secundaria.c-hover i { color: var(--green-800) !important; }

.borda-padrao-dashed { border: var(--green-500) dashed 2px; }
.rounded { border-radius: 8px; }
.cursor-pointer { cursor: pointer !important; }

/* Botões */
.btn-padrao {
    background-color: var(--green-500);
    border-color: var(--green-500);
    color: var(--green-800);
}

.btn-padrao:hover {
    background-color: var(--green-600) !important;
    border-color: var(--green-600) !important;
    color: var(--green-800);
}

.btn-outline-padrao {
    background-color: none;
    border-color: var(--green-500);
    color: var(--green-500);
}

.btn-outline-padrao:hover {
    background-color: var(--green-500) !important;
    border-color: var(--green-500) !important;
    color: white !important;
}

.btn-outline-padrao.checked {
    background-color: var(--green-500) !important;
    border-color: var(--green-500) !important;
    color: white !important;
}

.btn-padrao-dark{
    background-color: var(--green-900) !important;
    border-color: var(--green-900) !important;
    color: var(--green-100);
}

.btn-padrao:active {
    background-color: var(--green-700) !important;
    border-color: var(--green-700) !important;
    color: var(--green-50) !important;
}

.btn-padrao.ativo {
    background-color: var(--green-500);
    border-color: var(--green-500);
    color: var(--green-800);
}

/* Garantir visibilidade de botões desabilitados no padrão */
#btnCriarQuestao:disabled {
    opacity: 1 !important;
    background-color: #e9ecef !important;
    border-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
}

.btn-secundario {
    background-color: var(--green-200);
    border-color: var(--green-200);
}.btn-secundario:hover {
    background-color: var(--green-300) !important;
    border-color: var(--green-300) !important;
}

.btn-black {
    background-color: #0B334C;
    border-color: #0B334C;
    color: white;
}

.btn-black:hover {
    background-color: #0B334C !important;
    border-color: #0B334C !important;
    color: white;
}
.btn-black:focus {
    background-color: #0B334C !important;
    border-color: #0B334C !important;
    color: white;
    box-shadow: none;
}

.btn-outline-black {
    background-color: none;
    outline: #0B334C solid 1px !important;
    color: #0B334C;
}

.btn-outline-black:hover {
    background-color: #0B334C !important;
    border-color: #0B334C !important;
    color: white;
}
.btn-outline-black:hover i {
    color: white;
}

.form-control:focus {
    box-shadow: 0 0 5px 2px var(--green-300);
}

/* Padronizando os tamanhos do body, header e main */
body {
    background-color: #f9f8fa;
    width: 100%;
    height: 100vh;
}

main {
    width: calc(100% - 32px);
    height: calc(100vh - 32px);
    margin-top: 16px;
    margin-left: calc(25%);
}

header {
    height: calc(100vh);
    position: fixed;
    float: left;
}

/* Tamanho dos botões do menu */
header .btn-padrao {
    width: calc(100% - 32px);
}

/* Largura dos cards para ter espaçamento entre eles de 16px */
.col-50 {
    width: calc(50% - 8px);
}

.rounded-tl {
    border-radius: .5rem 0 0 0 !important;
}

.rounded-tr {
    border-radius: 0 .5rem 0 0 !important;
}

/* Botão da opção Aluno/Professor do login */
.button-box {
    width: 259px;
    margin: 0 auto;
    position: relative;
    border-radius: 30px;
    background: #fff;
}

.toggle-btn {
    padding: 10px 35px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
    text-align: center;
}

#btnAluno {
    color: white;
    transition: .7s;
}

#btnProfessor {
    transition: .7s;
}

#btn {
    left: 2%;
    top: 10%;
    position: absolute;
    width: 105px;
    height: 80%;
    background: var(--green-800);
    border-radius: 30px;
    transition: .5s;
}

::after,
::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

.wrapper {
    display: flex;
}

.main {
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
    background-color: #fafbfe;
}

/* Padding-top para mobile quando há menu fixo */
@media screen and (max-width: 767.98px) {
    /* IMPORTANTE: Ocultar completamente o sidebar desktop em mobile */
    #sidebar-wrapper,
    #sidebar-wrapper * {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Garantir que o wrapper não deixe espaço para o sidebar */
    .wrapper {
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* IMPORTANTE: Sobrescrever a regra para main (sem ponto) que tem margin-left */
    main {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }
    
    /* Espaçamento para o menu mobile - reduzido para um valor mais adequado */
    .mobile-navbar-spacer {
        height: 40px !important;
        min-height: 40px !important;
        display: block !important;
        flex-shrink: 0;
        width: 100% !important;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* IMPORTANTE: Garantir que TODOS os .main tenham espaçamento adequado em mobile */
    /* Aplicar padding-top em TODOS os elementos .main dentro de .wrapper */
    .wrapper .main {
        padding-top: 40px !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Regra genérica para qualquer .main */
    div.main,
    .main {
        padding-top: 40px !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Regra mais específica para garantir */
    body .wrapper .main {
        padding-top: 40px !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ajuste adicional para garantir que não haja sobreposição */
    body > .wrapper > .main {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 40px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Garantir que o body não tenha padding ou margin */
    body {
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Classe pt-mobile também */
    .pt-mobile {
        padding-top: 40px !important;
    }
    
    /* Override qualquer padding inline que possa existir */
    .main[style*="padding"] {
        padding-top: 40px !important;
    }
    
    /* Garantir que o primeiro elemento após o menu tenha espaçamento */
    .wrapper > .main:first-of-type {
        padding-top: 40px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
}

/* Responsividade para a section de login */
@media (min-width: 768px) {
    .login-section {
        width: 75% !important;
    }
}

/* Forçar ocultação da barra lateral do login em mobile */
.login-sidebar {
    display: none;
}

@media (min-width: 768px) {
    .login-sidebar {
        display: block !important;
    }
}

/* Garantir que não apareça em mobile mesmo com outras classes */
@media (max-width: 767.98px) {
    .login-sidebar {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
}

#sidebar-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    align-self: flex-start;
    flex-direction: row;
}

/* Garantir que o sidebar-wrapper não apareça em mobile */
@media screen and (max-width: 767.98px) {
    #sidebar-wrapper {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        height: 0 !important;
        flex-shrink: 0 !important;
    }
}

#sidebar {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    height: 100%;
    z-index: 1002;
    transition: all .25s ease-in-out;
    background: linear-gradient(172.513deg, #C6ECC8 0%, #64C46A 100%);
    display: flex;
    flex-direction: column;
    font-weight: bold;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative;
}

#sidebar.expand {
    width: 260px;
    min-width: 260px;
}

#toggle-bar {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 100%;
    transition: all .25s ease-in-out;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    background: linear-gradient(172.513deg, var(--green-200) 0%, var(--green-500) 100%);
    flex-shrink: 0;
    box-sizing: border-box;
    z-index: 1001;
}

#toggle-bar:hover {
    background: linear-gradient(172.513deg, var(--green-300) 0%, var(--green-600) 100%);
}

#toggle-bar:active {
    background: linear-gradient(172.513deg, var(--green-400) 0%, var(--green-700) 100%);
}

.toggle-icon {
    font-size: 1.2rem;
    transition: transform .25s ease-in-out;
}

#sidebar-wrapper:not(.expand) #toggle-bar .toggle-icon {
    transform: rotate(0deg);
}

#sidebar-wrapper.expand #toggle-bar .toggle-icon {
    transform: rotate(180deg);
}

.toggle-btn {
    background-color: transparent;
    cursor: pointer;
    border: 0;
    padding: 0;
}

.toggle-btn.sidebar-link {
    padding: .625rem 1.625rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sidebar.expand .toggle-btn.sidebar-link {
    justify-content: flex-start;
}

.toggle-btn i {
    font-size: 1.5rem;
    color: #0B334C;
}

.sidebar-logo-container {
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sidebar.expand .sidebar-logo-container {
    justify-content: flex-start;
    padding-left: 0;
}

.menu-online-widget {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 0 0.65rem;
    flex-shrink: 0;
}

#sidebar.expand .menu-online-widget {
    justify-content: flex-end;
    padding-right: 1.25rem;
}

.menu-online-eye-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(11, 51, 76, 0.1);
    color: #0B334C;
    cursor: default;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.menu-online-eye-btn:hover,
.menu-online-eye-btn:focus-visible {
    background: rgba(11, 51, 76, 0.18);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
    outline: none;
}

.menu-online-eye-btn .fi {
    font-size: 1.05rem;
    line-height: 1;
}

.menu-online-tip {
    position: fixed;
    z-index: 10050;
    min-width: 8.5rem;
    padding: 0.55rem 0.75rem;
    background: #0B334C;
    color: #ffffff;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.menu-online-tip[hidden] {
    display: none !important;
}

.menu-online-tip p,
.menu-online-tip-title,
.menu-online-tip-line {
    color: #ffffff !important;
}

.menu-online-tip-title {
    margin: 0 0 0.35rem;
    font-weight: 700;
    font-size: 0.85rem;
}

.menu-online-tip-line {
    margin: 0;
    opacity: 0.95;
    font-size: 0.74rem;
}

.toggle-btn.sidebar-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#sidebar.expand .toggle-btn.sidebar-link {
    justify-content: flex-start;
}

.sidebar-logo-icon {
    display: block;
    flex-shrink: 0;
}

#sidebar:not(.expand) .sidebar-logo-icon {
    margin: 0 auto;
}

#sidebar.expand .sidebar-logo-icon {
    margin-right: .75rem;
}

.toggle-btn.sidebar-link span {
    white-space: nowrap;
    color: #0B334C;
}

#sidebar:not(.expand) .sidebar-logo,
#sidebar:not(.expand) a.sidebar-link span,
#sidebar:not(.expand) button.sidebar-link span {
    display: none;
}

.sidebar-nav {
    padding: 2rem 0;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Quando o sidebar está fechado, garantir que a ul não ultrapasse a largura */
#sidebar:not(.expand) .sidebar-nav {
    width: 50px;
    max-width: 50px;
    padding-left: 0;
    padding-right: 0;
}

a.sidebar-link {
    padding: .625rem 1.625rem;
    color: #0B334C;
    display: block;
    font-size: 0.9rem;
    white-space: nowrap;
    border-left: 3px solid transparent;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/* Quando o sidebar está fechado, remover padding horizontal e centralizar */
#sidebar:not(.expand) a.sidebar-link {
    padding: .625rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

button.sidebar-link {
    padding: .625rem 1.625rem;
    color: #0B334C;
    display: block;
    font-size: 0.9rem;
    white-space: nowrap;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/* Quando o sidebar está fechado, remover padding horizontal e centralizar */
#sidebar:not(.expand) button.sidebar-link {
    padding: .625rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

/* Sobrescrever text-start quando o menu está fechado */
#sidebar:not(.expand) button.sidebar-link.text-start {
    text-align: center !important;
    justify-content: center !important;
}

/* Ajustar form dentro do sidebar-item quando fechado */
#sidebar:not(.expand) .sidebar-item form {
    width: 100%;
    display: flex;
    justify-content: center;
}

#sidebar:not(.expand) .sidebar-item form button {
    width: 100%;
}

.sidebar-link i {
    font-size: 1.1rem;
    margin-right: .75rem;
    flex-shrink: 0;
}

/* Quando o sidebar está fechado, remover margin-right do ícone */
#sidebar:not(.expand) .sidebar-link i {
    margin-right: 0;
    margin-left: 0;
}

a.sidebar-link:hover {
    background-color: rgba(255, 255, 255, .3);
    border-left: 3px solid var(--green-400);
}

a.sidebar-link.active {
    background-color: rgba(255, 255, 255, .3);
}

button.sidebar-link:hover {
    background: none;
    border: none;
    background-color: rgba(255, 255, 255, .3) !important;
    border-left: 3px solid var(--green-400) !important;
}

button.sidebar-link.active {
    background-color: rgba(255, 255, 255, .3);
}

.sidebar-item {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Quando o sidebar está fechado, garantir que os li não ultrapassem a largura */
#sidebar:not(.expand) .sidebar-item {
    width: 50px;
    max-width: 50px;
}

/* Novo estilo para o collapse */
#sidebar:not(.expand) .collapse {
    display: none !important;
}

/* Estilo para os sub-links ficarem mais discretos */
.fs-7 {
    font-size: 0.8rem !important;
}

#sidebar .nav.flex-column.ps-4 {
    background-color: rgba(0, 0, 0, 0.05); /* Sombra sutil para diferenciar o grupo */
}

/* --- Correções para o Menu Recolhido (not(.expand)) --- */

/* 1. Esconder a seta e o texto do menu pai no estado recolhido */
#sidebar:not(.expand) .arrow-icon,
#sidebar:not(.expand) .menu-text {
    display: none !important;
}

/* 2. Centralizar o ícone principal e remover as margens no estado recolhido */
#sidebar:not(.expand) .main-icon {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* 3. Garantir que o link pai colapsável tenha o mesmo alinhamento centralizado que os outros links */
#sidebar:not(.expand) a.sidebar-link.d-flex.justify-content-between.align-items-center {
    justify-content: center !important;
    padding: 0.625rem 0 !important; /* Mesma padding dos outros links fechados */
}

/* 4. Esconder a div do collapse e todo o seu conteúdo no estado recolhido */
#sidebar:not(.expand) .collapse {
    display: none !important;
}

/* --- Estilos para os Submenus (quando expandidos) --- */
.submenu {
    padding-left: 1rem;
    background-color: rgba(0, 0, 0, 0.05); /* Sombra sutil para diferenciar o grupo */
    border-radius: 4px;
}

.sub-link {
    font-size: 0.85rem !important; /* Texto um pouco menor nos submenus */
    padding: 0.5rem 1rem !important;
}

.fs-6 {
    font-size: 0.9rem !important; /* Ícones um pouco menores nos submenus */
}

/* Estilo antigo do menu-resultados - mantido para compatibilidade */
.menu-resultados:not(.row) .bg-branco {
    width: calc(33% - 8px) !important;
}

/* Responsividade para menu-resultados (layout antigo) */
@media (max-width: 991.98px) {
    .menu-resultados:not(.row) .bg-branco {
        width: calc(50% - 8px) !important;
    }
}

@media (max-width: 575.98px) {
    .menu-resultados:not(.row) .bg-branco {
        width: 100% !important;
    }
}

.form-switch{
    cursor: pointer;
}

.form-switch:checked{
    background-color: var(--green-500);
    border-color: var(--green-500);

}

input[type="radio"]:not(.form-switch), input[type="checkbox"]:not(.form-switch){
    appearance: none; /* Remove o estilo padrão */
    width: 40px;
    height: 40px;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

/* Criando um ícone centralizado dentro do radio button */
input[type="radio"]:not(.form-switch)::before, 
input[type="checkbox"]:not(.form-switch)::before {
    content: "\F633"; 
    font-family: "Bootstrap-icons";
    font-size: 24px;
    color: transparent; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Quando o radio estiver selecionado, exibe o ícone */
input[type="radio"]:checked:not(.form-switch), 
input[type="checkbox"]:checked:not(.form-switch) {
    background: var(--green-500); 
    border-color: var(--green-500);
}

/* E finalmente na cor do ícone */
input[type="radio"]:checked:not(.form-switch)::before, 
input[type="checkbox"]:checked:not(.form-switch)::before {
    color: white;
}

/* Quando os inputs estão preenchidos eles ficam da cor branca */
input:not(:placeholder-shown) { background-color: white; }
textarea:not(:placeholder-shown) { background-color: white; }

/* Cor do divisor da tabela */
.table-group-divider { border-top: 2px solid var(--green-500) !important; }

/* Criando um circulo para os ícones do dashboard */
.circulo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center; 
}

.bg-icone{
    aspect-ratio: 1 / 1;
    width: 20px !important;
    height: 50px !important;
}

.nav-pills-padrao .nav-link.active, .nav-pills-success .show > .nav-link {
    background-color: var(--green-500); 
    color: var(--bs-white);
}

.nav-pills-padrao .nav-link {
    color: var(--green-500);
}

.nav-tabs .nav-link:not(.active) {
    color: var(--green-500) !important;
}

.nav-tabs .nav-link:not(.active):hover {
    color: #16a34a; 
    border-color: #e9ecef; 
}

.img-container > img {
    max-width: 100%;
    display: block; /* O Cropper.js recomenda isso */
}

/* Adiciona um asterisco vermelho após labels que tenham a classe .required */
.required::after {
    content: " *";
    color: red;
}

.upload-area {
    border: 2px dashed #ced4da;
    padding: 2rem;
    text-align: center;
    background-color: #fafafa;
    cursor: pointer;
    transition: all 0.2s;
}

.upload-area:hover {
    border-color: var(--primary-green);
    background-color: #f1f8e9;
}

/* Quando bg-opacity-25 e text-* estão NO MESMO elemento (ex: <span class="... bg-opacity-25 text-warning">) */
.bg-opacity-25.text-warning{
    color: #664d03 !important;
}
.bg-opacity-25.text-info{
    color: #055160 !important;
}
.bg-opacity-25.text-primary{
    color: #084298 !important;
}
.bg-opacity-25.text-secondary{
    color: #495057 !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #333 !important; /* Cor do texto */
    transition: background-color 5000s ease-in-out 0s;
}

.btn-icon-form { width: 40px !important; height: 40px !important; }
.btn-icon-form:hover { background-color: #e9ecef; color: #343a40 !important; }
.btn-icon-form.view:hover{ background-color: #e1fee3 !important; }
.btn-icon-form.stats:hover { background-color: #e1f5fe !important;}
.btn-icon-form.share:hover { background-color: #e3f2fd !important;}
.btn-icon-form.edit:hover{ background-color: #fff8e1 !important; }
.btn-icon-form.delete:hover { background-color: #ffebee !important;}

/* Observações estruturadas (percurso formativo) */
.pre-wrap { white-space: pre-wrap; }
.textarea-observacao-modal { min-height: 8rem; }

.scroll {
    scrollbar-color: var(--green-300) transparent; /* Firefox */
}
.scroll::-webkit-scrollbar {
    width: 10px;
}
.scroll::-webkit-scrollbar-track {
    background: transparent;
}
.scroll::-webkit-scrollbar-thumb {
    background-color: var(--green-300);
    border-radius: 8px;
}
.scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--green-400);
}

/* Chrome, Safari, Edge e Opera */
.form-range::-webkit-slider-thumb {
    background-color: var(--green-500);
  }
  
  /* Chrome, Safari, Edge e Opera - ao clicar/focar */
  .form-range::-webkit-slider-thumb:active {
    background-color: var(--green-500);
  }
  
  /* Firefox */
  .form-range::-moz-range-thumb {
    background-color: var(--green-500);
  }
  
  /* Firefox - ao clicar/focar */
  .form-range::-moz-range-thumb:active {
    background-color: var(--green-500);
  }

.btn-material.nav-link{
    color: var(--green-500) !important;
}
.btn-material.nav-link.active{
    color: white !important;
    background-color: var(--green-500) !important;
}

.btn-material.nav-link.active i{
    color: white !important;
}