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

:root{
  --FONTE_PADRAO: 'Source Sans 3', sans-serif;
  --FONTE_PEQUENA: 0.8rem;

  --COR_BACKGROUND: #f2f3f8;
  --COR_TEXTO: #333;
  --COR_BRANCO: #fff;
  --COR_BORDA: #d5dcf1;
  --COR_TITULO: #2c3e50;
  --COR_PRIMARIA: #45b7e5;
  --COR_PRIMARIA_HOVER: #2980b9;
  --COR_SECUNDARIA: #95a5a6;
  --COR_SECUNDARIA_HOVER: #7f8c8d;
  --COR_NEUTRO_MEDIO: #555;
  --COR_NEUTRO_CLARO: #ddd;
  --COR_NEUTRO_SUAVE: #f8f9fa;
  --COR_NEUTRO_FORTE: #999;
  --COR_NEUTRO_TEXTO: #666;
  --COR_ALERTA: #e53888;
  --COR_SUCESSO: #3eb288;

  --COR_AVISO: #e53888;
  --COR_ATIVIDADES: #f9e20f;
  --COR_ESTAGIO_BG: #e8f4fd;
  --COR_ESTAGIO_TEXTO: #45b7e5;
  --COR_APRENDIZ_BG: #f3e5f5;
  --COR_APRENDIZ_TEXTO: #7b1fa2;
  --COR_BOTAO_DESTAQUE: #f9e20f;
  --COR_BOTAO_DESTAQUE_TEXTO: #242527;

  --RAIO_PADRAO: 10px;
  --RAIO_PEQUENO: 5px;
  --TRANSICAO_PADRAO: 0.3s ease;
}

html {
  scroll-behavior: smooth;
}

* {

  box-sizing: border-box;
  font-family: var(--FONTE_PADRAO);
}

body {
  background-color: var(--COR_BACKGROUND);
  color: var(--COR_TEXTO);
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  margin-top: 30px;
}

/* ========== HEADER ========== */

header{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 20px;
  padding-bottom: 50px;
  flex-direction: column;
  border-bottom: 1px solid var(--COR_BORDA);
  text-align: center;
}

header img{
  max-width: 500px;
  width: 100%;
}


/* ========== FILTROS ========== */
.filtros-container {
  background-color: var(--COR_BRANCO);
  padding: 25px;
  margin-bottom: 25px;
  border: 1px solid var(--COR_BORDA);
  border-radius: var(--RAIO_PADRAO);
}

.filtros-container h2 {
  color: var(--COR_TITULO);
  margin-bottom: 20px;

}

.filtros-container h2 i {
  margin-right: 8px;
  color: var(--COR_PRIMARIA);
}

.filtro-acoes {
  display: flex;
  align-items: end;
  margin-bottom: 3px;
}

.filtros-grid {
  display: flex;
  gap: 20px;
}

.filtro-grupo {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1;
}

.filtro-grupo label {
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--COR_NEUTRO_MEDIO);
}

.filtro-grupo label i {
  margin-right: 5px;
  color: var(--COR_PRIMARIA);
}

.filtro-grupo select,
.filtro-grupo input {
  padding: 10px;

  border: 1px solid var(--COR_BORDA);
  border-radius: var(--RAIO_PEQUENO);

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

.filtro-grupo select:focus,
.filtro-grupo input:focus {
  outline: none;
  border-color: var(--COR_PRIMARIA);
}

/* Sugestões de cidade */
.sugestoes-lista {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--COR_BRANCO);
 
 
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}

.sugestao-item {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--COR_BORDA);
}

.sugestao-item:hover {
  background-color: var(--COR_NEUTRO_SUAVE);
}

.sugestao-item:last-child {
  border-bottom: none;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: var(--RAIO_PEQUENO);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: none;
  transition: all var(--TRANSICAO_PADRAO);
}

.btn-primary {
  background-color: var(--COR_PRIMARIA);
  color: var(--COR_BRANCO);
  flex: 1;
}

.btn-primary:hover {
  background-color: var(--COR_PRIMARIA_HOVER);
}

.btn-secondary {
  background-color: var(--COR_PRIMARIA);
  color: white;
  text-transform: uppercase;
}

.btn-secondary:hover {
  background-color: transparent;
  color: var(--COR_BOTAO_DESTAQUE_TEXTO);
  box-shadow: inset 0 0 0 2px var(--COR_PRIMARIA);
}

/* ========== INFO RESULTADO ========== */

.info-resultado p {
  color: var(--COR_NEUTRO_MEDIO);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-resultado i {
  color: var(--COR_PRIMARIA);
}

/* ========== LOADING ========== */
.loading {
  text-align: center;
  padding: 40px;
  color: var(--COR_NEUTRO_MEDIO);
}

.loading i {
  margin-right: 10px;
}

/* ========== VAGAS ========== */
.vagas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;

}

.vaga {
  background-color: var(--COR_BRANCO);
  border: 1px solid var(--COR_BORDA);
  padding: 20px;
  display: flex;
  flex-direction: column;
  border-radius: var(--RAIO_PADRAO);
}

.vaga-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.vaga-banner {
  width: 100%;
  display: flex;
  justify-content: center;
}

.vaga-banner img {
  display: block;
  object-fit: cover;
}

.vaga-codigo {
  color: var(--COR_NEUTRO_FORTE);
  font-weight: 500;
  font-size: var(--FONTE_PEQUENA);
}

.vaga-tipo {
  padding: 4px 8px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--RAIO_PEQUENO);
  font-size: var(--FONTE_PEQUENA);
}

.vaga-tipo.estagio {
  background-color: var(--COR_ESTAGIO_BG);
  color: var(--COR_ESTAGIO_TEXTO);
}

.vaga-tipo.aprendiz {
  background-color: var(--COR_APRENDIZ_BG);
  color: var(--COR_APRENDIZ_TEXTO);
}

.vaga h3 {
  color: var(--COR_TITULO);
  margin-bottom: 15px;

}

.vaga-info {
  margin-bottom: 15px;
}

.vaga-info p {
  margin: 8px 0;
  color: var(--COR_NEUTRO_MEDIO);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.vaga-info i {
  color: var(--COR_PRIMARIA);
  margin-top: 4px;
  min-width: 16px;
}

.vaga-info .empresa {
  color: var(--COR_TITULO);
}

.vaga-info .bolsa {
  color: var(--COR_SUCESSO);
}

.vaga-info .bolsa i {
  color: var(--COR_SUCESSO);
}

.vaga-info .horario i {
  color: var(--COR_ATIVIDADES);
}

.vaga-info .horario {
  color: var(--COR_NEUTRO_MEDIO);
  font-style: italic;
}

.descricao {
  background-color: var(--COR_NEUTRO_SUAVE);
  padding: 12px;
  color: var(--COR_NEUTRO_TEXTO);
  border-left: 3px solid var(--COR_PRIMARIA);
}

.atividades {
  padding: 12px;
  border-left: 3px solid var(--COR_ATIVIDADES);
}

.atividades strong {

  display: block;
  margin-bottom: 8px;
}

.atividades ul {
  margin-left: -28px;
  color: var(--COR_NEUTRO_TEXTO);
  
}

.atividades li {
  margin: 4px 0;
font-size: var(--FONTE_PEQUENA);
}

.beneficios {

  padding: 10px 12px;
  margin: 15px 0;
  font-weight: 500;
  border-left: 3px solid var(--COR_SUCESSO);
}

.btn-candidatar {
  margin-top: auto;
  width: 100%;
  background-color: var(--COR_BOTAO_DESTAQUE);
  color: var(--COR_BOTAO_DESTAQUE_TEXTO);
  text-transform: uppercase;
}

.btn-candidatar:hover {
  background-color: transparent;
  color: var(--COR_BOTAO_DESTAQUE_TEXTO);
  box-shadow: inset 0 0 0 2px var(--COR_BOTAO_DESTAQUE);
}

/* ========== PAGINAÇÃO ========== */

.paginacao-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  padding: 10px 20px;

}

.paginacao {
  display: flex;
}

.paginas {
  display: flex;
  gap: 5px;
}

.btn-pagina {
  padding: 8px 12px;
  border: 1px solid var(--COR_BORDA);
  background-color: var(--COR_BRANCO);
  cursor: pointer;
  font-weight: 500;
  transition: all var(--TRANSICAO_PADRAO);
  min-width: 40px;
  text-align: center;
  border-radius: var(--RAIO_PEQUENO);
}

.btn-pagina:hover {
  border-color: var(--COR_PRIMARIA);
  color: var(--COR_PRIMARIA);
}

.btn-pagina.ativo {
  background-color: var(--COR_PRIMARIA);
  color: var(--COR_BRANCO);
  border-color: var(--COR_PRIMARIA);
}

.pagina-ellipsis {
  padding: 0 5px;
  color: var(--COR_NEUTRO_FORTE);
}

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

.sem-resultados,
.erro {
  text-align: center;
  padding: 60px 20px;
  background-color: var(--COR_BRANCO);
  border: 1px solid var(--COR_BORDA);
  border-radius: 10px;
}

.sem-resultados i,
.erro i {
  color: var(--COR_NEUTRO_CLARO);
  margin-bottom: 20px;
}

.sem-resultados h3 {
  color: var(--COR_NEUTRO_MEDIO);
  margin-bottom: 10px;
}

.sem-resultados p,
.erro p {
  color: var(--COR_NEUTRO_FORTE);
}

.erro i {
  color: var(--COR_ALERTA);
}

.erro .btn {
  margin-top: 20px;
}

/* ========== RESPONSIVIDADE ========== */
@media (max-width: 768px) {
  .filtro-acoes {
    flex-direction: column;
  }

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

  .paginas {
    flex-wrap: wrap;
  }

  .paginacao-container {
    flex-direction: column;
    gap: 15px;
  }

  .filtros-grid {
    flex-direction: column;
  }
}

.textooelike {
  margin-top: 20px !important;
}