/* assets/css/vagas.css */

.vagas-container {

    padding: 2rem 5% 80px; /* padding-top, padding-horizontal, padding-bottom */

    background-color: var(--color-light);

    min-height: 100vh;

}



.dark-mode .vagas-container {

    background-color: #171923;

    color: #e2e8f0;

}



/* Barra de pesquisa e filtros */

.pesquisa-section {

    margin-bottom: 2rem;

}



.pesquisa-container {

    display: flex;

    gap: 1rem;

    margin-bottom: 1.5rem;

    flex-wrap: wrap;

}



.barra-pesquisa {

    flex: 1;

    min-width: 300px;

    position: relative;

}



.barra-pesquisa input {

    width: 100%;

    padding: 0.8rem 1rem 0.8rem 2.5rem;

    border: 2px solid var(--color-gray);

    border-radius: var(--border-radius);

    font-size: 1rem;

    transition: var(--transition);

    background-color: white;

}



.dark-mode .barra-pesquisa input {

    background-color: #2d3748;

    color: #e2e8f0;

    border-color: #4a5568;

}



.barra-pesquisa input:focus {

    outline: none;

    border-color: var(--color-primary);

    box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1);

}



.barra-pesquisa i {

    position: absolute;

    left: 0.8rem;

    top: 50%;

    transform: translateY(-50%);

    color: var(--color-gray);

}



.botao-filtro {

    padding: 0.8rem 1.5rem;

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

    color: white;

    border: none;

    border-radius: var(--border-radius);

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: 500;

    transition: var(--transition);

}



.botao-filtro:hover {

    background-color: #0f1f3d;

    transform: translateY(-2px);

}



/* Filtros dropdown */

.filtros-dropdown {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.5s ease;

    background-color: white;

    border-radius: var(--border-radius);

    box-shadow: var(--shadow);

    margin-bottom: 1.5rem;

}



.dark-mode .filtros-dropdown {

    background-color: #2d3748;

}



.filtros-dropdown.aberto {

    max-height: 1000px;

    padding: 1.5rem;

}



.grupo-filtro {

    margin-bottom: 1.5rem;

}



.grupo-filtro h4 {

    margin-bottom: 0.8rem;

    color: var(--color-dark);

    font-size: 1rem;

}



.dark-mode .grupo-filtro h4 {

    color: #e2e8f0;

}



.opcoes-filtro {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

}



.opcao-filtro {

    padding: 0.5rem 1rem;

    background-color: var(--color-light);

    border: 1px solid var(--color-gray);

    border-radius: 20px;

    cursor: pointer;

    font-size: 0.9rem;

    transition: var(--transition);

}



.dark-mode .opcao-filtro {

    background-color: #4a5568;

    border-color: #718096;

    color: #e2e8f0;

}



.opcao-filtro:hover,

.opcao-filtro.ativo {

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

    color: white;

    border-color: var(--color-primary);

}



/* Grid de vagas */

.vagas-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 1.5rem;

    margin-bottom: 2rem;

}



@media (max-width: 768px) {

    .vagas-grid {

        grid-template-columns: 1fr;

    }

}



/* Card de vaga */

.card-vaga {

    background-color: white;

    border-radius: var(--border-radius);

    box-shadow: var(--shadow);

    overflow: hidden;

    transition: var(--transition);

    display: flex;

    flex-direction: column;

    height: 100%;

}



.dark-mode .card-vaga {

    background-color: #2d3748;

}



.card-vaga:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

}



.card-vaga-imagem {

    height: 180px;

    background-color: var(--color-gray);

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

}



.card-vaga-imagem img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.sem-imagem {

    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    font-weight: bold;

}



.card-vaga-conteudo {

    padding: 1.5rem;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

}



.card-vaga-header {

    margin-bottom: 1rem;

}



.card-vaga-data {

    font-size: 0.8rem;

    color: var(--color-gray);

    margin-bottom: 0.5rem;

}



.dark-mode .card-vaga-data {

    color: #a0aec0;

}



.card-vaga-titulo {

    font-size: 1.2rem;

    font-weight: 600;

    color: var(--color-dark);

    margin-bottom: 0.5rem;

    line-height: 1.3;

}



.dark-mode .card-vaga-titulo {

    color: #e2e8f0;

}



.card-vaga-local {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--color-gray);

    font-size: 0.9rem;

    margin-bottom: 1rem;

}



.card-vaga-detalhes {

    margin-top: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.card-vaga-tipo {

    padding: 0.3rem 0.8rem;

    background-color: var(--color-light);

    border-radius: 15px;

    font-size: 0.8rem;

    color: var(--color-dark);

}



.dark-mode .card-vaga-tipo {

    background-color: #4a5568;

    color: #e2e8f0;

}



.botao-detalhes {

    padding: 0.5rem 1rem;

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

    color: white;

    border: none;

    border-radius: var(--border-radius);

    cursor: pointer;

    font-size: 0.9rem;

    transition: var(--transition);

}



.botao-detalhes:hover {

    background-color: #0f1f3d;

}



/* Paginação */

.paginacao {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 0.5rem;

    margin: 2rem 0;

}



.botao-paginacao {

    padding: 0.5rem 1rem;

    background-color: var(--color-light);

    border: 1px solid var(--color-gray);

    border-radius: var(--border-radius);

    cursor: pointer;

    transition: var(--transition);

}



.dark-mode .botao-paginacao {

    background-color: #4a5568;

    border-color: #718096;

    color: #e2e8f0;

}



.botao-paginacao:hover:not(.desativado) {

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

    color: white;

    border-color: var(--color-primary);

}



.botao-paginacao.desativado {

    opacity: 0.5;

    cursor: not-allowed;

}



.pagina-atual {

    padding: 0.5rem 1rem;

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

    color: white;

    border-radius: var(--border-radius);

    font-weight: 600;

}



/* Ação para candidatos/empresas */

.acao-container {

    display: grid;

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

    gap: 2rem;

    margin: 3rem 0;

}



.carta-acao {

    background: linear-gradient(135deg, var(--color-primary) 0%, #2c5282 100%);

    padding: 2rem;

    border-radius: var(--border-radius);

    color: white;

    text-align: center;

    box-shadow: var(--shadow);

}



.carta-acao.empresa {

    background: linear-gradient(135deg, var(--color-secondary) 0%, #c53030 100%);

}



.carta-acao h3 {

    font-size: 1.5rem;

    margin-bottom: 1rem;

}



.carta-acao p {

    margin-bottom: 1.5rem;

    opacity: 0.9;

}



.botoes-acao {

    display: flex;

    gap: 1rem;

    justify-content: center;

    flex-wrap: wrap;

}



.botao-acao {

    padding: 0.8rem 1.5rem;

    background-color: white;

    color: var(--color-primary);

    border: none;

    border-radius: var(--border-radius);

    cursor: pointer;

    font-weight: 600;

    transition: var(--transition);

}



.carta-acao.empresa .botao-acao {

    color: var(--color-secondary);

}



.botao-acao:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

}



/* Botões de províncias */

.provincias-section {

    margin-top: 3rem;

}



.provincias-section h2 {

    text-align: center;

    margin-bottom: 1.5rem;

    color: var(--color-dark);

}



.dark-mode .provincias-section h2 {

    color: #e2e8f0;

}



.botoes-provincias {

    display: flex;

    flex-wrap: wrap;

    gap: 0.8rem;

    justify-content: center;

}



.botao-provincia {

    padding: 0.8rem 1.5rem;

    background-color: var(--color-light);

    border: 2px solid var(--color-primary);

    color: var(--color-primary);

    border-radius: 25px;

    cursor: pointer;

    font-weight: 500;

    transition: var(--transition);

    white-space: nowrap;

}



.dark-mode .botao-provincia {

    background-color: #2d3748;

    color: #90cdf4;

    border-color: #90cdf4;

}



.botao-provincia:hover {

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

    color: white;

    transform: translateY(-2px);

}



.dark-mode .botao-provincia:hover {

    background-color: #90cdf4;

    color: #171923;

}



/* Mensagem sem resultados */

.sem-resultados {

    text-align: center;

    padding: 3rem;

    color: var(--color-gray);

    grid-column: 1 / -1;

}



.dark-mode .sem-resultados {

    color: #a0aec0;

}



/* Responsividade */

@media (max-width: 768px) {

    .vagas-container {

        padding: 1rem;

    }

    

    .pesquisa-container {

        flex-direction: column;

    }

    

    .barra-pesquisa {

        min-width: 100%;

    }

    

    .acao-container {

        grid-template-columns: 1fr;

    }

    

    .carta-acao {

        padding: 1.5rem;

    }

    

    .botoes-provincias {

        justify-content: flex-start;

        overflow-x: auto;

        padding-bottom: 1rem;

    }

}



@media (max-width: 480px) {

    .card-vaga {

        margin-bottom: 1rem;

    }

    

    .vagas-grid {

        gap: 1rem;

    }

    

    .paginacao {

        flex-wrap: wrap;

    }

    

    .botoes-acao {

        flex-direction: column;

    }

    

    .botao-acao {

        width: 100%;

    }

}



































/* Estilos específicos para vagas-local.php */



/* Botão de voltar - já tem estilo inline mas adicionamos regras de hover */

.botao-voltar:hover {

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

    color: white;

    border-color: var(--color-primary);

    text-decoration: none;

}



.dark-mode .botao-voltar:hover {

    background-color: #2c5282;

    border-color: #2c5282;

}



/* Card de informação da província */

.provincia-card {

    max-width: 600px;

    margin: 0 auto;

}



.provincia-card h3 {

    font-size: 1.2rem;

    margin-bottom: 0.5rem;

}



.provincia-card p {

    font-size: 1rem;

    margin: 0;

}



/* Ajustes para a seção de províncias */

.botoes-provincias {

    justify-content: center;

}



.botoes-provincias .botao-provincia {

    cursor: pointer;

}



/* Ajuste no grid para garantir 3 cards por linha em desktop */

@media (min-width: 1200px) {

    .vagas-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



/* Ajuste para tablets */

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

    .vagas-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



/* Ajuste para mobile */

@media (max-width: 767px) {

    .vagas-grid {

        grid-template-columns: 1fr;

    }

    

    .provincia-card {

        padding: 1rem;

    }

    

    .provincia-card h3 {

        font-size: 1.1rem;

    }

}



/* Botão de ação no sem resultados */

.sem-resultados .botao-acao {

    display: inline-block;

    padding: 0.8rem 1.5rem;

    background-color: white;

    color: var(--color-primary);

    border: none;

    border-radius: var(--border-radius);

    cursor: pointer;

    font-weight: 600;

    transition: var(--transition);

    text-decoration: none;

    margin-top: 1rem;

}



.dark-mode .sem-resultados .botao-acao {

    background-color: #2d3748;

    color: #90cdf4;

}



.sem-resultados .botao-acao:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

}



















/* Ajustes para barra de pesquisa em mobile */

@media (max-width: 768px) {

    .pesquisa-container {

        display: flex;

        flex-direction: column;

        gap: 0.8rem;

        width: 100%;

        margin-bottom: 1.5rem;

    }

    

    .barra-pesquisa {

        flex: none;

        min-width: 100%;

        width: 100%;

        max-width: 100%;

    }

    

    .barra-pesquisa input {

        width: 100%;

        box-sizing: border-box;

        font-size: 0.95rem;

        padding: 0.75rem 1rem 0.75rem 2.5rem;

    }

    

    .botao-filtro {

        width: 100%;

        justify-content: center;

        padding: 0.75rem 1rem;

    }

    

    /* Garantir que o dropdown dos filtros não ultrapasse a tela */

    .filtros-dropdown {

        position: relative;

        left: 0;

        right: 0;

        width: 100%;

        max-width: 100vw;

        box-sizing: border-box;

    }

    

    .filtros-dropdown.aberto {

        padding: 1rem;

        margin: 0 -0.5rem; /* Ajuste para compensar padding do container */

    }

    

    .filtros-grid {

        display: flex;

        flex-direction: column;

        gap: 1rem;

    }

    

    .grupo-filtro {

        margin-bottom: 1rem;

    }

    

    .opcoes-filtro {

        display: flex;

        flex-wrap: wrap;

        gap: 0.4rem;

        overflow-x: hidden;

    }

    

    .opcao-filtro {

        padding: 0.4rem 0.8rem;

        font-size: 0.85rem;

        white-space: nowrap;

    }

    

    .filtros-actions {

        display: flex;

        gap: 0.5rem;

        margin-top: 1rem;

    }

    

    .filtros-actions button {

        flex: 1;

        padding: 0.6rem 0.8rem;

        font-size: 0.9rem;

    }

}



/* Ajustes adicionais para telas muito pequenas */

@media (max-width: 480px) {

    .barra-pesquisa input {

        padding: 0.7rem 0.8rem 0.7rem 2.2rem;

        font-size: 0.9rem;

    }

    

    .barra-pesquisa i {

        left: 0.6rem;

        font-size: 0.9rem;

    }

    

    .opcoes-filtro {

        gap: 0.3rem;

    }

    

    .opcao-filtro {

        padding: 0.35rem 0.6rem;

        font-size: 0.8rem;

        min-width: auto;

    }

    

    /* Garantir que nenhum elemento ultrapasse a tela */

    * {

        max-width: 100vw;

        box-sizing: border-box;

    }

    

    .vagas-container {

        padding-left: 0.5rem;

        padding-right: 0.5rem;

        overflow-x: hidden;

    }

}



/* Garantir que o container de pesquisa não cause scroll horizontal */

.pesquisa-section {

    width: 100%;

    max-width: 100%;

    overflow-x: hidden;

}



/* Ajuste para inputs de pesquisa em mobile específico */

@media (max-width: 768px) {

    input[type="text"],

    input[type="search"],

    select,

    textarea {

        max-width: 100%;

        box-sizing: border-box;

    }

    

    /* Remover zoom automático em iOS */

    @supports (-webkit-touch-callout: none) {

        .barra-pesquisa input {

            font-size: 16px; /* Previne zoom automático no iOS */

        }

    }

}

















/* ==================== ESTILOS PARA IMAGENS DAS VAGAS ==================== */



/* Container da imagem */

.card-vaga-imagem {

    position: relative;

    width: 100%;

    height: 200px;

    overflow: hidden;

    background: linear-gradient(135deg, var(--color-light) 0%, #e2e8f0 100%);

    border-radius: var(--border-radius) var(--border-radius) 0 0;

}



/* Imagem propriamente dita */

.vaga-imagem {

    width: 100%;

    height: 100%;

    object-fit: cover; /* Mantém proporção e cobre todo o container */

    object-position: center; /* Centraliza a imagem */

    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    will-change: transform;

}



/* Efeito hover na imagem */

.card-vaga:hover .vaga-imagem {

    transform: scale(1.08);

}



/* Placeholder para quando não há imagem */

.sem-imagem {

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 5rem;

    font-weight: 600;

    text-transform: uppercase;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

    transition: var(--transition);

}



/* Efeito hover no placeholder */

.card-vaga:hover .sem-imagem {

    transform: scale(1.02);

    filter: brightness(1.1);

}



/* Variação de cores para diferentes empresas (opcional) */

.sem-imagem[data-empresa^="A"],

.sem-imagem[data-empresa^="B"] { background: linear-gradient(135deg, #2A4D7A, #1e3a5f); }

.sem-imagem[data-empresa^="C"],

.sem-imagem[data-empresa^="D"] { background: linear-gradient(135deg, #e53e3e, #c53030); }

.sem-imagem[data-empresa^="E"],

.sem-imagem[data-empresa^="F"] { background: linear-gradient(135deg, #2c7a4d, #1e5a3a); }

.sem-imagem[data-empresa^="G"],

.sem-imagem[data-empresa^="H"] { background: linear-gradient(135deg, #805ad5, #6b46c1); }

.sem-imagem[data-empresa^="I"],

.sem-imagem[data-empresa^="J"] { background: linear-gradient(135deg, #dd6b20, #c05621); }

.sem-imagem[data-empresa^="L"],

.sem-imagem[data-empresa^="M"] { background: linear-gradient(135deg, #319795, #2c7a7b); }

.sem-imagem[data-empresa^="N"],

.sem-imagem[data-empresa^="O"] { background: linear-gradient(135deg, #d53f8c, #b83280); }



/* Loading state para imagens */

.vaga-imagem.loading {

    opacity: 0.5;

    animation: pulse 1.5s ease-in-out infinite;

}



.vaga-imagem.loaded {

    opacity: 1;

    animation: none;

}



/* Animação de pulse para loading */

@keyframes pulse {

    0%, 100% { opacity: 0.5; }

    50% { opacity: 0.8; }

}



/* Dark mode ajustes */

.dark-mode .card-vaga-imagem {

    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);

}



.dark-mode .sem-imagem {

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}



/* Responsividade */

@media (max-width: 768px) {

    .card-vaga-imagem {

        height: 180px;

    }

    

    .sem-imagem {

        font-size: 4rem;

    }

}



@media (max-width: 480px) {

    .card-vaga-imagem {

        height: 160px;

    }

    

    .sem-imagem {

        font-size: 3.5rem;

    }

}



/* Suporte para telas de alta resolução */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

    .vaga-imagem {

        image-rendering: -webkit-optimize-contrast;

        image-rendering: crisp-edges;

    }

}