:root{
  --pad: 16px;
}

*{ box-sizing: border-box; }
html, body{ width: 100%; max-width: 100%; overflow-x: hidden; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: #f5f7fb;
  color: #0f172a;
}
img{ max-width: 100%; height: auto; display: block; }

main{
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 24px var(--pad);
}
#feedback{
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 0 var(--pad);
}

button, .btn, a.btn{
  min-height: 44px;
}
input, select, textarea{
  min-height: 44px;
  font-size: 16px; 
}

.filtros{
  flex-wrap: wrap;
}
.filtros input{
  flex: 1 1 260px;
  min-width: 0;
}
.filtros select{
  flex: 0 0 220px;
  min-width: 0;
}

select{
  background: #ffffff;
  color: #0f172a;
}
select option{
  background: #ffffff;
  color: #0f172a;
}

.resumo{
  flex-wrap: wrap;
}
.card-resumo{
  min-width: 220px;
}

.lista-eleicoes{
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (max-width: 640px){
  :root{ --pad: 14px; }

  main{ padding: 18px var(--pad); }

  .topo{
    padding: 14px var(--pad) !important;
  }

  .logo{ font-size: 18px; }
  .slogan{ font-size: 12px; }

  .card-resumo strong{ font-size: 26px; }

  .filtros{
    flex-direction: column;
    gap: 10px;
  }
  .filtros input, .filtros select{
    width: 100%;
  }

  .acoes{
    flex-wrap: wrap;
  }
  .acoes button, .acoes a{
    flex: 1 1 140px;
  }

  .modal-content{
    width: calc(100vw - 20px) !important;
    max-width: 560px !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 14px !important;
    padding: 16px !important;
  }
}

.funcionarios-container{
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 24px var(--pad);
}

@media (max-width: 640px){
  .funcionarios-container{ padding: 18px var(--pad); }

  .topo-lista{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .acoes-topo{
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }

  .acoes-topo input{
    min-width: 0 !important;
    width: 100%;
    flex: 1 1 220px;
  }
}

@media (max-width: 720px){
  .tabela-wrap, .table-wrap, .table-container{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table, .tabela{
    min-width: 720px;
  }
}

@media (max-width: 900px){
  .eleicao-conteudo{
    grid-template-columns: 1fr !important;
  }
}

.eleicao-container{
  width: min(1100px, 100%);
  margin: 0 auto;
}

@media (max-width: 640px){
  .eleicao-container{ padding: 18px var(--pad) !important; }
  .card{ padding: 14px !important; border-radius: 14px !important; }
}

@media (max-width: 640px){
  .perfil-container, .profile-container, .perfil{
    width: min(1100px, 100%);
    margin: 0 auto;
    padding: 18px var(--pad);
  }
}