/*
 * Portal UNICENTRO – Estilos Personalizados
 * Tema-filho: University Child
 */

/* --- CONFIGURAÇÃO DE CORES --- */
:root {
    --unicentro-yellow: #fcb421;
    /* Amarelo institucional  */
    --unicentro-black: #1a1a1a;
    /* Preto */
    --unicentro-gray: #f8f9fa;
    /* Fundo neutro */
    --text-inactive: #757575;
    /* Cinza para itens não selecionados */
}

/* Container da Faixa */
.navegacao-seletiva-container {
    display: flex;
    width: 100%;
    background: #ffffff;
    /* Fundo branco limpo */
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    /* Borda para delimitar */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    /* Sombra muito leve */
    margin-bottom: 40px;
    flex-wrap: wrap;
    padding: 0;
    /* padding interno para colar as bordas */
}

/* O Botão Individual */
.nav-tab-item {
    flex: 1;
    min-width: 110px;
    border: none;
    background: transparent;
    padding: 20px 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-right: 1px solid #f0f0f0;
    /* Divisória leve entre botões */
    border-bottom: 4px solid transparent;
    /* Linha de status oculta */

    /* Layout Flexbox */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    /* Para conter efeitos de brilho */
}

.nav-tab-item:last-child {
    border-right: none;
}

/* Tipografia e Ícones */
.tab-icon-wrapper {
    display: inline-block;
    color: var(--text-inactive);
    /* Começa cinza */
    transition: all 0.3s ease;
}

.tab-icon-wrapper svg {
    width: 28px;
    height: 28px;
    display: block;
}

.tab-text {
    font-weight: 700;
    color: var(--text-inactive);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.8px;
    transition: color 0.3s ease;
}

/* --- ESTADO HOVER (Passar o mouse) --- */
.nav-tab-item:hover {
    background: rgba(252, 180, 33, 0.08);
    /* Amarelo com 8% de opacidade */
}

.nav-tab-item:hover .tab-icon-wrapper {
    color: var(--unicentro-black);
    /* Ícone fica preto */
    transform: translateY(-4px);
}

.nav-tab-item:hover .tab-text {
    color: var(--unicentro-black);
    /* Texto fica preto */
}

/* --- ESTADO ATIVO (Selecionado) --- */
.nav-tab-item.ativo {
    background: #fff;
    /* Borda Amarela grossa na base */
    border-bottom: 4px solid var(--unicentro-yellow);
}

/* Texto e Ícone no Estado Ativo */
.nav-tab-item.ativo .tab-text {
    color: var(--unicentro-black);
    /* Preto forte para leitura */
}

.nav-tab-item.ativo .tab-icon-wrapper {
    color: var(--unicentro-black);
    /* Preto forte */
    /* Animação de "Pulso" Amarelo atrás do ícone */
    filter: drop-shadow(0 0 5px rgba(252, 180, 33, 0.6));
    animation: pulse-yellow 2s infinite ease-in-out;
}

/* Animação do Pulso */
@keyframes pulse-yellow {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(252, 180, 33, 0.4));
    }

    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px rgba(252, 180, 33, 0.8));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(252, 180, 33, 0.4));
    }
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    .nav-tab-item {
        flex: 1 0 45%;
        border-right: none;
        border-bottom: 1px solid #eee;
        /* Linha divisória no mobile */
    }

    /* No mobile, o ativo precisa ter a borda amarela também, mas talvez lateral ou inferior */
    .nav-tab-item.ativo {
        border-bottom: 4px solid var(--unicentro-yellow);
    }
}

/* --- LÓGICA DE OCULTAR/MOSTRAR --- */

/* Força a ocultação de todas as abas por padrão */
.aba-conteudo {
    display: none !important;
    /* !important precisa ter aqui */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Mostra apenas a que tiver a classe extra .aba-visivel */
.aba-conteudo.aba-visivel {
    display: block !important;
    /* Força a exibição */
    animation: fadeIn 0.8s forwards;
}

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

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

/* --- FIM DO CSS DA BARRA DE BOTÕES DO TOPO --- */

/* --- LINHA DO TEMPO --- */
/* --- TIMELINE HÍBRIDA (Horizontal Desktop / Vertical Mobile) --- */

.unicentro-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 20px 0;
    margin-bottom: 20px;
    width: 100%;
}

/* Linha Conectora (Desktop) */
.timeline-line {
    position: absolute;
    top: 42px;
    /* Centro do ícone */
    left: 40px;
    right: 40px;
    height: 3px;
    background: #e0e0e0;
    z-index: 0;
}

/* Item Individual */
.timeline-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

/* O Ícone Circular */
.step-icon {
    width: 44px;
    height: 44px;
    background: #fff;
    border: 3px solid #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    margin-bottom: 12px;
    background-color: #fff;
    /* Garante que cubra a linha */
    box-shadow: 0 0 0 5px #fff;
    /* Margem branca ao redor */
    position: relative;
    /* Para o pulso absoluto */
}

/* --- CONTEÚDO E TEXTOS --- */
.step-content {
    display: flex;
    flex-direction: column;
    /* Empilha: Título > Data > Botão */
    align-items: center;
    width: 100%;
}

.step-title {
    font-weight: 700;
    color: #555;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1.2;
}

.step-date {
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
    /* Espaço para o botão abaixo */
}

/* --- O NOVO BOTÃO DE STATUS --- */
.step-status {
    font-size: 11px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none !important;
    display: inline-block;
    /* Permite padding */
    transition: all 0.3s ease;
    margin-top: 5px;
    /* Garante quebra de linha */
}

/* Estilo Botão Ativo (Ação) */
.step-status.btn-action {
    background: var(--unicentro-black, #1a1a1a);
    color: var(--unicentro-yellow, #fcb421);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid transparent;
    cursor: pointer;
}

.step-status.btn-action:hover {
    background: var(--unicentro-yellow, #fcb421);
    color: #1a1a1a;
    transform: translateY(-2px);
}

/* Estilo Desabilitado (Apenas texto) */
.step-status.disabled {
    background: #f0f0f0;
    color: #999;
    border: 1px solid #eee;
    cursor: default;
}

/* --- ESTADOS (ATIVO E CONCLUÍDO) --- */

/* Concluído */
.step-completed .step-icon {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fcb421;
}

/* Ativo */
.step-active .step-icon {
    background: #fcb421;
    border-color: #fcb421;
    color: #1a1a1a;
    /* Removemos o transform scale aqui para não desfocar */
}

.step-active .step-title {
    color: #1a1a1a;
    font-weight: 900;
}

/* --- ANIMAÇÃO DE PULSO (RIPPLE EFFECT) --- */
/* Cria um anel falso atrás do ícone */
.step-active .step-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid #fcb421;
    top: -3px;
    /* Compensa a borda */
    left: -3px;
    z-index: -1;
    animation: ripple 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0.8;
        border-width: 6px;
        /* Começa grosso */
    }

    100% {
        transform: scale(1.8);
        /* Expande mais */
        opacity: 0;
        border-width: 0px;
        /* Termina fino */
    }
}


/* --- TRANSFORMAÇÃO MOBILE (VERTICAL CENTRALIZADA) --- */
@media (max-width: 768px) {
    .unicentro-timeline {
        flex-direction: column;
        align-items: center;
        /* Centraliza tudo horizontalmente */
        padding-left: 0;
        overflow: visible;
    }

    /* Linha Vertical no MEIO da tela */
    .timeline-line {
        width: 4px;
        /* Linha um pouco mais grossa no mobile */
        height: 100%;
        left: 50%;
        /* Joga para o meio */
        transform: translateX(-50%);
        /* Centraliza exato */
        top: 0;
        right: auto;
    }

    /* Item empilhado (Ícone em cima, texto embaixo) */
    .timeline-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 40px;
        /* Espaço maior entre os passos */
        width: 100%;
    }

    /* Ajuste do Ícone */
    .step-icon {
        margin-right: 0;
        margin-bottom: 15px;
        /* Espaço entre ícone e texto */
        flex-shrink: 0;
        background: #fff;
        /* Fundo branco cobre a linha que passa atrás */
        position: relative;
        z-index: 2;
        /* Garante que fique SOBRE a linha */
    }

    /* Ajuste do Conteúdo */
    .step-content {
        align-items: center;
        /* Centraliza textos e botões */
        background: rgba(255, 255, 255, 0.9);
        /* Opcional: melhora leitura se a linha passar por trás */
        padding: 0 10px;
        z-index: 2;
    }

    .step-status {
        width: auto;
        margin-top: 8px;
    }
}

/* --- FIM DO CSS DA LINHA DO TEMPO --- */

/* --- ABAS --- */
/* Força a lista de abas a ocupar 100% e usar Flexbox */
.abas-expandidas .vc_tta-tabs-list {
    display: flex !important;
    width: 100% !important;
}

/* Faz cada aba (li) crescer igualmente (1:1:1) */
.abas-expandidas .vc_tta-tab {
    flex: 1 !important;
    text-align: center !important;
    padding: 0 !important;
    /* Remove padding lateral que atrapalha */
}

/* Garante que o link clicável ocupe todo o espaço da aba */
.abas-expandidas .vc_tta-tab>a {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    /* Opcional: deixa quadrado */
}

/* --- AJUSTE MOBILE (Essencial) --- */
/* No celular, 3 abas lado a lado ficam apertadas. 
   Aqui forçamos elas a empilhar ou permitimos rolagem. 
   Vou sugerir empilhar para melhor leitura: */
@media (max-width: 768px) {
    .abas-expandidas .vc_tta-tabs-list {
        flex-direction: column !important;
        /* Um embaixo do outro no mobile */
    }
}

/* Fundo da aba inativa */
.abas-expandidas .vc_tta-tab>a {
    background-color: #f4f4f4 !important;
    color: #dfa21c !important;
    border: 1px solid #e0e0e0 !important;
}

/* Fundo da aba ATIVA */
.abas-expandidas .vc_tta-tab.vc_active>a {
    background-color: var(--unicentro-black, #1a1a1a) !important;
    /* Preto */
    color: var(--unicentro-yellow, #fcb421) !important;
    /* Texto Amarelo */
    border-color: var(--unicentro-black, #1a1a1a) !important;
    font-weight: bold !important;
}

/* Hover (ao passar o mouse) */
.abas-expandidas .vc_tta-tab>a:hover {
    background-color: #4f4e47 !important;
}

/*---- FIM CSS ABAS */

/* ----- CARDS ----- */
/* Container Grid (Atualizado para 5 itens) */
.grid-orientacoes-unicentro {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 colunas no desktop */
    gap: 15px;
    margin-bottom: 40px;
}

/* O Card Quadrado */
.card-quadrado {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    /* Força ser quadrado perfeito */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

/* Ícone Grande */
.card-quadrado .card-icon {
    font-size: 40px;
    color: var(--unicentro-black, #1a1a1a);
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

/* Textos */
.card-quadrado h3 {
    font-size: 16px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 5px 0;
    line-height: 1.2;
}

.card-quadrado p {
    font-size: 13px;
    color: #666;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

/* Botão Falso (Visual apenas) */
.btn-fake {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
    color: #1a1a1a;
    background: var(--unicentro-yellow, #fcb421);
    padding: 5px 15px;
    border-radius: 20px;
    opacity: 0;
    /* Escondido por padrão */
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* --- HOVER EFFECTS (Animação) --- */
.card-quadrado:hover {
    border-color: var(--unicentro-yellow, #fcb421);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-quadrado:hover .card-icon {
    transform: scale(0.9);
    color: var(--unicentro-yellow, #fcb421);
}

.card-quadrado:hover .btn-fake {
    opacity: 1;
    /* Aparece ao passar o mouse */
    transform: translateY(0);
}

/* --- MOBILE RESPONSIVO --- */
@media (max-width: 1024px) {
    .grid-orientacoes-unicentro {
        grid-template-columns: repeat(3, 1fr);
        /* Tablet: 3 em cima, 2 embaixo */
    }
}

@media (max-width: 768px) {
    .grid-orientacoes-unicentro {
        grid-template-columns: repeat(2, 1fr);
        /* 2 colunas no tablet */
        gap: 10px;
    }

    .card-quadrado {
        aspect-ratio: auto;
        /* Remove quadrado forçado se o texto for grande */
        min-height: 160px;
        /* Garante altura mínima */
    }

    .btn-fake {
        opacity: 1;
        /* No celular sempre mostra o botão */
        transform: translateY(0);
        margin-top: auto;
        /* Empurra para o final */
    }
}

/* ---- FIM CARDS ----*/

/* --- CSS DO SISTEMA DE MODAL --- */
/* Fundo Escuro (Overlay) */
.modal-overlay {
    display: none;
    /* Oculto por padrão */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Preto transparente */
    z-index: 9998;
    /* Fica acima de tudo */
    backdrop-filter: blur(3px);
    /* Efeito de desfoque moderno */
}

/* A Caixa do Modal */
.modal-box {
    display: none;
    /* Oculto por padrão */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centraliza exato */
    background: #fff;
    width: 90%;
    max-width: 600px;
    /* Largura máxima no Desktop */
    z-index: 9999;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border-top: 5px solid var(--unicentro-yellow, #fcb421);
    animation: modalPopUp 0.3s ease-out;
}

/* Animação de entrada */
@keyframes modalPopUp {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Cabeçalho do Modal */
.modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #1a1a1a;
    font-weight: 700;
}

/* Botão Fechar (X) */
.modal-close {
    font-size: 28px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    line-height: 20px;
}

.modal-close:hover {
    color: #d32f2f;
}

/* Corpo do Texto */
.modal-body {
    padding: 25px;
    max-height: 70vh;
    /* Se o texto for longo, cria barra de rolagem */
    overflow-y: auto;
}

/* Estilos internos do texto */
.modal-body h4 {
    color: #004a80;
    margin-top: 0;
    font-size: 16px;
}

.modal-body ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

.modal-body li {
    margin-bottom: 5px;
    color: #555;
}

/* Box de Alerta Amarelo */
.modal-alert {
    background: #fffbf0;
    border-left: 4px solid #fcb421;
    padding: 10px 15px;
    font-size: 13px;
    color: #555;
    margin: 15px 0;
}

/* Botão dentro do modal */
.btn-modal-action {
    display: inline-block;
    background: #1a1a1a;
    color: #fcb421;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
}

.btn-modal-action:hover {
    background: #333;
    color: #fff;
}

/* --- RESPONSIVIDADE MOBILE --- */
/* (Já incluída na lógica de max-width e max-height acima, 
   mas aqui forçamos tela cheia se for muito pequeno) */
@media (max-width: 600px) {
    .modal-box {
        width: 95%;
        max-height: 90vh;
    }
}

/* --- GRID COMPACTO (5 COLUNAS) --- */
.grid-prepare-se-compacto {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 colunas iguais */
    gap: 15px;
    /* Espaço menor */
    margin-bottom: 30px;
}

.card-mini {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;

    min-height: 220px;
    /* Força o card a ser alto */
    padding: 30px 15px;
    /* Mais espaço interno nas pontas */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Centraliza o conteúdo verticalmente */
    gap: 15px;
    /* Separa o ícone do texto */

    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
    height: 100%;
    /* Garante que todos na linha tenham a mesma altura */
}

.card-mini:hover {
    border-color: var(--unicentro-yellow, #fcb421);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    /* Sombra um pouco maior */
}

/* Ícone um pouco maior para acompanhar o novo tamanho */
.card-icon-mini {
    font-size: 32px;
    /* Aumentei de 24px para 32px */
    color: #1a1a1a;
    margin-bottom: 0;
    /* O gap do pai já resolve */
    transition: transform 0.3s ease;
}

.card-mini:hover .card-icon-mini {
    color: #fcb421;
    transform: scale(1.1);
}

.card-mini h4 {
    font-size: 14px;
    /* Aumentei levemente */
    font-weight: 800;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.3;
}

.card-mini span {
    font-size: 12px;
    color: #777;
    line-height: 1.2;
}

/* --- ESTILO DO DROPDOWN (MODAL GRUPOS) --- */
.input-unicentro {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    margin-bottom: 10px;
}

.grupo-destaque {
    background: #f8f9fa;
    border-left: 5px solid #fcb421;
    padding: 20px;
    border-radius: 4px;
    text-align: center;
}

.badge-grupo {
    background: #1a1a1a;
    color: #fcb421;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

#disciplinas-grupo {
    margin: 10px 0 0 0;
    color: #004a80;
    font-size: 18px;
}

/* --- CARROSSEL (SCROLL SNAP) --- */
.scroll-snap-container {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 15px;
    scroll-snap-type: x mandatory;
    /* O segredo do carrossel nativo */
    -webkit-overflow-scrolling: touch;
}

.snap-item {
    flex: 0 0 80%;
    /* No mobile mostra 80% do card */
    width: 80%;
    scroll-snap-align: center;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #eee;
}

/* Desktop: mostrar 2 ou 3 por vez no carrossel */
@media(min-width: 768px) {
    .snap-item {
        flex: 0 0 45%;
    }
}

.snap-icon {
    font-size: 30px;
    margin-bottom: 10px;
}

.tag-genero {
    font-size: 10px;
    text-transform: uppercase;
    background: #e0e0e0;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Botões de Navegação do Carrossel */
.nav-carrossel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border: 1px solid #ddd;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-weight: bold;
    color: #1a1a1a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    display: flex;
    /* Centralizar a seta */
    align-items: center;
    justify-content: center;
}

.nav-carrossel:hover {
    background-color: var(--unicentro-yellow, #fcb421);
    border-color: var(--unicentro-yellow, #fcb421);
}

.nav-carrossel.prev {
    left: 5px;
}

.nav-carrossel.next {
    right: 5px;
}

/* Ajuste no Mobile: Botões menores ou ocultos se preferir só deslizar */
@media (max-width: 600px) {
    .nav-carrossel {
        width: 30px;
        height: 30px;
    }

    .modal-body {
        padding: 20px 30px !important;
    }

    /* Ajusta padding */
}

/* --- RESPONSIVIDADE DO GRID 5 COLUNAS --- */
@media (max-width: 1024px) {
    .grid-prepare-se-compacto {
        grid-template-columns: repeat(3, 1fr);
        /* Tablet: 3 colunas */
    }
}

@media (max-width: 600px) {
    .grid-prepare-se-compacto {
        grid-template-columns: repeat(2, 1fr);
        /* Mobile: 2 colunas */
    }

    .card-mini {
        min-height: 160px;
        padding: 20px 10px;
    }

    /* Menor no celular */
}


/* --- ABA #AREA DO CANDIDATO# --- */
/* Container Principal */
.login-gateway-unicentro {
    display: flex;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    /* Arredonda os cantos */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    max-width: 900px;
    margin: 0 auto;
    /* Centraliza na aba */
    border: 1px solid #e0e0e0;
}

/* Colunas Comuns */
.gateway-col {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- LADO ESQUERDO (DESTAQUE) --- */
.gateway-col.destaque {
    background: #fffbf0;
    /* Amarelo bem claro */
    border-right: 1px solid #f0e6cc;
    position: relative;
}

/* Ícone de Fundo Decorativo */
.gateway-col.destaque .gateway-icon {
    font-size: 40px;
    color: var(--unicentro-yellow, #fcb421);
    margin-bottom: 20px;
    text-align: center;
}

.gateway-col.destaque h3 {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.vantagens-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 30px 0;
}

.vantagens-list li {
    margin-bottom: 8px;
    color: #555;
    font-size: 14px;
}

.vantagens-list li i {
    color: var(--unicentro-yellow, #fcb421);
    /* Check amarelo */
    margin-right: 8px;
}

/* Botão Principal (Inscrição) */
.btn-gateway-primary {
    display: block;
    background: var(--unicentro-black, #1a1a1a);
    color: var(--unicentro-yellow, #fcb421);
    text-align: center;
    padding: 15px;
    border-radius: 6px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-gateway-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(252, 180, 33, 0.3);
    color: #fff;
}

/* --- LADO DIREITO (ACESSO) --- */
.gateway-col.acesso {
    background: #fff;
}

.gateway-col.acesso h3 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

/* Botão Outline (Login) */
.btn-gateway-outline {
    display: block;
    border: 2px solid #e0e0e0;
    color: #333;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s;
    background: #fafafa;
}

.btn-gateway-outline:hover {
    border-color: var(--unicentro-black, #1a1a1a);
    background: #fff;
    color: #000;
}

/* Links Rápidos (Esqueci senha, etc) */
.quick-actions {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.quick-actions a {
    color: #004a80;
    text-decoration: none;
}

.quick-actions a:hover {
    text-decoration: underline;
}

.suporte-note {
    margin-top: 30px;
    font-size: 12px;
    color: #999;
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {
    .login-gateway-unicentro {
        flex-direction: column;
        /* Empilha um sobre o outro */
    }

    .gateway-col.destaque {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding: 30px;
    }
}

/* --- ABA ## CURSOS E VAGAS ## --- */
/* --- CONTAINER E FILTROS --- */
.catalogo-cursos-unicentro {
    font-family: inherit;
    /* Usa a fonte do seu site */
    max-width: 100%;
}

.filtros-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-bottom: 30px;
}

/* Barra de Busca */
.busca-wrapper {
    position: relative;
    margin-bottom: 15px;
}

.icone-busca {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

#busca-curso,
#busca-curso-sisu {
    width: 100%;
    padding: 12px 12px 12px 40px;
    /* Espaço para o ícone */
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    outline: none;
    background: #fff;
}

#busca-curso:focus,
#busca-curso-sisu:focus {
    border-color: var(--unicentro-yellow, #fcb421);
}

/* Botões de Filtro */
.label-filtros {
    font-size: 12px;
    font-weight: bold;
    color: #555;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.filtros-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-filtro {
    background: #fff;
    border: 1px solid #ccc;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    color: #555;
    transition: all 0.2s;
}

.btn-filtro:hover,
.btn-filtro.ativo {
    background: var(--unicentro-black, #1a1a1a);
    color: var(--unicentro-yellow, #fcb421);
    border-color: #1a1a1a;
    font-weight: bold;
}

/* --- ITEM DE CURSO --- */
.curso-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

/* Header (Cabeçalho Clicável) */
.curso-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s;
}

.curso-header:hover {
    background: #fafafa;
}

.curso-titulo-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.curso-titulo-wrapper h4 {
    margin: 0;
    font-size: 16px;
    color: #1a1a1a;
    font-weight: 700;
}

/* Badge Campus */
.badge-campus {
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Cores dos Câmpus */
.cedeteg {
    background: #2e7d32;
}

.santa-cruz {
    background: #1565c0;
}

.irati {
    background: #c62828;
}

.chopinzinho {
    background: #ef6c00;
}

.coronel-vivida {
    background: #00838f;
}

.pitanga {
    background: #ad1457;
}

.prudentopolis {
    background: #4527a0;
}

.curso-meta-short {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #777;
    font-size: 13px;
}

.seta-expandir {
    transition: transform 0.3s;
}

.curso-item.aberto .seta-expandir {
    transform: rotate(180deg);
}

/* --- CORPO DO CURSO (Conteúdo) --- */
.curso-body {
    display: none;
    /* Oculto por padrão */
    padding: 25px;
    border-top: 1px solid #eee;
    background: #fff;
}

/* Tags (Bacharelado, Turno...) */
.curso-tags {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.tag-info {
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tag-info i {
    color: var(--unicentro-yellow, #fcb421);
}

/* GRID DE VAGAS (6 Itens) */
.painel-vagas-completo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 colunas */
    gap: 10px;
    margin-bottom: 30px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
}

.vaga-box {
    background: #fff;
    border: 1px solid #eee;
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70px;
}

.vaga-num {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
    display: block;
}

.vaga-desc {
    font-size: 10px;
    text-transform: uppercase;
    color: #666;
    margin-top: 4px;
    line-height: 1.2;
}

/* Bordas coloridas das vagas */
.universal {
    border-bottom: 3px solid #2196f3;
}

.publica {
    border-bottom: 3px solid #4caf50;
}

.pcd {
    border-bottom: 3px solid #9c27b0;
}

.racial-ep {
    border-bottom: 3px solid #ff9800;
}

.racial-qp {
    border-bottom: 3px solid #795548;
}

.total {
    background: #1a1a1a;
    border-bottom: 3px solid #fcb421;
}

.total .vaga-num,
.total .vaga-desc {
    color: #fcb421;
}

/* CONTEÚDO FINAL (Texto + Podcast) */
.curso-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.curso-sobre h5,
.curso-media h5 {
    margin: 0 0 10px 0;
    color: #004a80;
    font-size: 14px;
    font-weight: 700;
}

.curso-sobre p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

.link-ementa {
    font-weight: bold;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 13px;
}

/* PLAYER PODCAST */
.podcast-player {
    display: flex;
    align-items: center;
    background: #1a1a1a;
    padding: 12px;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s;
}

.podcast-player:hover {
    transform: translateY(-2px);
}

.play-btn {
    width: 36px;
    height: 36px;
    background: #fcb421;
    border-radius: 50%;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.track-title {
    font-size: 12px;
    font-weight: bold;
    display: block;
}

.track-time {
    font-size: 11px;
    color: #aaa;
    display: block;
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
    .curso-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .curso-meta-short {
        width: 100%;
        justify-content: space-between;
    }

    .curso-content-grid {
        grid-template-columns: 1fr;
    }

    /* Empilha texto/podcast */
    .painel-vagas-completo {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Vagas 2x3 */
    .curso-tags {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* --- FIM ABA ## CURSOS E VAGAS ## --- */

/* --- #CUSTOMIZAÇÃO DO ACCORDION WPBAKERY (FAQ)# --- */
/* 1. Título do accordion */
.vc_tta-container h2 {
    text-align: center;
    background: #333;
    padding: 15px;
    margin-bottom: 0px;
    color: #fff;
}

/* 2. O Cabeçalho (Onde clica) */
.faq-unicentro .vc_tta-panel-heading {
    background: #00000000 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* 3. O Link do Título (Texto + Ícone) */
.faq-unicentro .vc_tta-panel-title>a {
    padding: 20px 0 !important;
    /* Espaçamento vertical generoso */
    color: #333 !important;
    /* Cor padrão do texto */
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;

    /* Mágica para jogar o ícone para a direita */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row-reverse !important;
    /* Inverte: Ícone vai pro fim, Texto pro começo */
}

.faq-unicentro .vc_tta-panel-title>a:hover {
    color: #004a80 !important;
    /* Azul Unicentro ao passar o mouse */
}

/* O Texto do Título (Ajuste fino) */
.faq-unicentro .vc_tta-title-text {
    flex-grow: 1;
    /* Ocupa o espaço todo */
    text-align: left;
    /* Garante texto na esquerda */
}

/* 4. O Ícone de Controle (+ ou Seta) */
.faq-unicentro .vc_tta-controls-icon {
    position: static !important;
    /* Remove posicionamento absoluto padrão */
    margin-right: 0 !important;
    margin-left: 15px !important;
    /* Espaço entre texto e ícone */

    /* Estilo do Ícone */
    border: none !important;
    background: transparent !important;
    color: var(--unicentro-yellow, #fcb421) !important;
    /* Ícone Amarelo */
    font-size: 14px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    transition: transform 0.3s cubic-bezier(0.59, 0.28, 0.25, 0.65) !important;
}

/* Ícone quando ATIVO (Aberto) */
.faq-unicentro .vc_tta-panel.vc_active .vc_tta-controls-icon {
    color: #1a1a1a !important;
    /* Fica preto */
    transform: rotate(45deg) !important;
    /* Gira (se for cruz vira X) */
}

/* Se o ícone for seta, use rotate(180deg) ao invés de 45 */

/* 6. Texto do Título quando ATIVO */
.faq-unicentro .vc_tta-panel.vc_active .vc_tta-panel-title {
    background: #fab422b5;
}

.faq-unicentro .vc_tta-panel.vc_active .vc_tta-panel-title>a {
    color: #1a1a1a !important;
    /* Título fica preto forte */
}

/* 7. O Conteúdo da Resposta (Body) */
.faq-unicentro .vc_tta-panel-body {
    background: #fab42221 !important;
    padding: 20px 35px !important;
    /* Espaço embaixo */
    font-size: 14px !important;
    color: #555 !important;
    line-height: 1.6 !important;
}

/* Links dentro da resposta */
.faq-unicentro .vc_tta-panel-body a {
    color: #004a80;
    font-weight: bold;
    text-decoration: underline;
}


/* --- ##### INÍCIO DA ##### --- 
   --- ##### SEÇÃO DO PAC ##### --- */

/* --- LÓGICA DE VISIBILIDADE (FIX NO BODY) --- */

/* 1. Esconde tudo que é específico por padrão */
.show-pac1,
.show-pac2,
.show-pac3 {
    display: none !important;
}

/* 2. Mostra apenas o conteúdo da etapa ativa no Body */
body[data-pac-etapa="pac1"] .show-pac1 {
    display: block !important;
}

body[data-pac-etapa="pac1"] .card-mini.show-pac1 {
    display: flex !important;
}

/* Ajuste Flex */

body[data-pac-etapa="pac2"] .show-pac2 {
    display: block !important;
}

body[data-pac-etapa="pac2"] .card-mini.show-pac2 {
    display: flex !important;
}

body[data-pac-etapa="pac3"] .show-pac3 {
    display: block !important;
}

body[data-pac-etapa="pac3"] .card-mini.show-pac3 {
    display: flex !important;
}

/* 3. Ajuste da Barra de Info para não quebrar o layout */
.pac-info-bar {
    margin: 0 auto 30px auto;
    max-width: 800px;
}


/* =========================================
   ESTILOS DA ABA PAC (COMPLETO)
   ========================================= */

/* Container Principal */
.pac-container {
    padding: 20px 0;
    width: 100%;
}

/* --- 1. SELETOR DE ETAPAS (BOTÕES) --- */
.pac-selector-wrapper {
    text-align: center;
    margin-bottom: 20px;
    /* Espaço até a timeline */
}

.pac-title-main {
    font-size: 20px;
    color: #555;
    margin-bottom: 20px;
    font-weight: 700;
}

.pac-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    /* Garante que não quebre em telas pequenas */
}

.btn-pac {
    background: #fff;
    border: 2px solid #e0e0e0;
    padding: 15px 30px;
    border-radius: 8px;
    cursor: pointer;
    min-width: 130px;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.btn-pac .pac-ano {
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    font-weight: 700;
    margin-bottom: 4px;
}

.btn-pac .pac-nome {
    font-size: 24px;
    color: #1a1a1a;
    font-weight: 800;
    line-height: 1;
}

/* Estado Ativo e Hover (Amarelo Unicentro) */
.btn-pac:hover,
.btn-pac.ativo {
    border-color: var(--unicentro-yellow, #fcb421);
    background: #fffbf0;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(252, 180, 33, 0.15);
}

.btn-pac.ativo .pac-nome {
    color: #000;
}

.btn-pac.ativo .pac-ano {
    color: #bcaaa4;
}

/* Cor levemente destacada */

/* --- 2. TIMELINE (AJUSTADA PARA O MEIO) --- */
.pac-timeline-section {
    /* Controlado via JS (display block/none), aqui estilizamos a aparição */
    margin-top: 20px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    /* Linha divisória */
    animation: fadeIn 0.6s ease-out;
}

#titulo-cronograma-pac {
    text-align: center;
    color: #999;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.pac-timeline-section .step-icon i {
    font-size: 16px;
    color: #999;
}

.pac-timeline-section .step-active .step-icon i,
.pac-timeline-section .step-completed .step-icon i {
    color: inherit;
    /* Pega a cor do pai (amarelo ou preto) */
}

/* --- 3. CONTEÚDO DINÂMICO (CARDS) --- */
.pac-content-wrapper {
    /* Container que engloba os conteúdos de cada etapa */
    min-height: 300px;
    /* Evita pulo de layout */
}

.pac-stage-content {
    /* Oculto por padrão, classe .visivel (via JS) ou display block ativa */
    animation: slideUp 0.5s ease-out;
}

/* Barra de Informações (Peso/Foco) */
.pac-info-bar {
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 30px;
    font-size: 14px;
    color: #333;
    border: 1px solid #eee;
}

.pac-info-bar.destaque-final {
    background: #e3f2fd;
    /* Azul suave para PAC 3 */
    border-color: #bbdefb;
    color: #0d47a1;
}

.info-item i {
    margin-right: 8px;
    color: var(--unicentro-yellow, #fcb421);
}

.pac-info-bar.destaque-final .info-item i {
    color: #1976d2;
}

/* Ícone Azul no PAC 3 */

/* GRID DE CARDS (3 Colunas) */
.pac-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.card-pac {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.card-pac:hover {
    border-color: var(--unicentro-yellow, #fcb421);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.card-pac i {
    font-size: 32px;
    color: #1a1a1a;
    margin-bottom: 15px;
    transition: transform 0.3s;
}

.card-pac:hover i {
    transform: scale(1.1);
    color: var(--unicentro-yellow, #fcb421);
}

.card-pac h4 {
    font-size: 15px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}

.card-pac p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* Card Destaque (Calculadora/Simulador) */
.card-pac.destaque {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

.card-pac.destaque i {
    color: #fcb421;
}

.card-pac.destaque h4 {
    color: #fff;
}

.card-pac.destaque p {
    color: #ccc;
}

.card-pac.destaque:hover {
    background: #000;
    box-shadow: 0 10px 25px rgba(26, 26, 26, 0.4);
}

/* --- 4. FOOTER (EDITAIS) --- */
.pac-editais-section {
    border-top: 1px solid #eee;
    padding-top: 30px;
    margin-top: 30px;
}

.pac-editais-section h4 {
    text-align: center;
    margin-bottom: 20px;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 16px;
}

/* --- ANIMAÇÕES --- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* --- RESPONSIVIDADE --- */
@media (max-width: 768px) {

    /* Botões lado a lado com scroll se necessário */
    .pac-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
        justify-content: flex-start;
    }

    .btn-pac {
        min-width: 110px;
        padding: 10px;
        flex-shrink: 0;
    }

    /* Info Bar empilhada */
    .pac-info-bar {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    /* Cards em coluna única */
    .pac-cards-grid {
        grid-template-columns: 1fr;
    }

    /* Timeline ajustada (o CSS da timeline mobile já cuida do resto) */
    .pac-timeline-section {
        padding-left: 0;
    }
}

/* ==========================================================================
   UTILITÁRIO – Ocultação por busca de texto
   Usada pela função filtrarPorTexto() no JS.
   Usa !important para não conflitar com display aplicado pelo filtro de botões.
   ========================================================================== */

.oculto-por-busca {
    display: none !important;
}