/* Escalinha — estilos de tela. Fontes do sistema, responsivo, sem dependência de rede. */
:root {
  --cor-fundo: #f4f6f8;
  --cor-texto: #1b1f24;
  --cor-primaria: #205072;
  --cor-primaria-escura: #123047;
  --cor-borda: #c7d0d8;
  --cor-alerta: #8a4b00;
  --cor-alerta-fundo: #fff2df;
  --cor-erro: #8a1f1f;
  --cor-erro-fundo: #fde8e8;
  --cor-sucesso: #1f6f43;
  --cor-sucesso-fundo: #e6f4ec;
  --cor-fixada: #205072;
  --raio: 6px;
  --espaco: 8px;
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.4;
}

header.app-cabecalho {
  background: var(--cor-primaria);
  color: #fff;
  padding: calc(var(--espaco) * 2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco);
}

header.app-cabecalho h1 { font-size: 1.25rem; margin: 0; }

nav.app-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--espaco);
  background: #fff;
  border-bottom: 1px solid var(--cor-borda);
}

nav.app-nav button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raio);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.95rem;
}

nav.app-nav button:hover,
nav.app-nav button:focus-visible {
  border-color: var(--cor-primaria);
}

nav.app-nav button[aria-current="page"] {
  background: var(--cor-primaria);
  color: #fff;
  font-weight: 600;
}

main.app-conteudo {
  padding: calc(var(--espaco) * 2);
  max-width: 1100px;
  margin: 0 auto;
}

.painel {
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: calc(var(--espaco) * 2);
  margin-bottom: calc(var(--espaco) * 2);
}

.painel h2 { margin-top: 0; }

.campo { margin-bottom: var(--espaco); display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.campo label { font-weight: 600; font-size: 0.9rem; }
.campo input, .campo select {
  padding: 8px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  font-size: 1rem;
}
.campo .erro-campo { color: var(--cor-erro); font-size: 0.85rem; }

.linha-campos { display: flex; flex-wrap: wrap; gap: calc(var(--espaco) * 2); }

button.botao {
  background: var(--cor-primaria);
  color: #fff;
  border: none;
  border-radius: var(--raio);
  padding: 10px 16px;
  font-size: 0.95rem;
  cursor: pointer;
}
button.botao:hover, button.botao:focus-visible { background: var(--cor-primaria-escura); }
button.botao:disabled { background: #9aa7b1; cursor: not-allowed; }
button.botao.secundario { background: #fff; color: var(--cor-primaria); border: 1px solid var(--cor-primaria); }
button.botao.perigo { background: var(--cor-erro); }
button.botao.perigo:hover { background: #6b1414; }

table.tabela-dados {
  width: 100%;
  border-collapse: collapse;
}
table.tabela-dados th, table.tabela-dados td {
  border: 1px solid var(--cor-borda);
  padding: 6px 8px;
  text-align: left;
  font-size: 0.9rem;
}
table.tabela-dados th { background: #eef2f5; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.badge-inativo { background: #eee; color: #555; border-color: #ccc; }
.badge-ativo { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); border-color: var(--cor-sucesso); }
.badge-fixada { background: #e7eef5; color: var(--cor-fixada); border-color: var(--cor-fixada); }
.badge-vaga-aberta { background: var(--cor-alerta-fundo); color: var(--cor-alerta); border-color: var(--cor-alerta); }
.badge-parcial { background: var(--cor-alerta-fundo); color: var(--cor-alerta); border-color: var(--cor-alerta); }
.badge-completa { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); border-color: var(--cor-sucesso); }
.badge-desatualizada { background: var(--cor-erro-fundo); color: var(--cor-erro); border-color: var(--cor-erro); }
.badge-ambos-periodos { background: #eaf6ec; color: var(--cor-sucesso); border-color: var(--cor-sucesso); font-weight: 700; }

.alerta {
  border-radius: var(--raio);
  padding: 10px 14px;
  margin-bottom: var(--espaco);
  border: 1px solid transparent;
}
.alerta-info { background: #e7eef5; border-color: var(--cor-primaria); color: var(--cor-primaria-escura); }
.alerta-aviso { background: var(--cor-alerta-fundo); border-color: var(--cor-alerta); color: var(--cor-alerta); }
.alerta-erro { background: var(--cor-erro-fundo); border-color: var(--cor-erro); color: var(--cor-erro); }
.alerta-sucesso { background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso); color: var(--cor-sucesso); }

.disponibilidade-grade {
  overflow-x: auto;
}
.disponibilidade-grade table { min-width: 640px; }

.estado-disponibilidade {
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  padding: 4px 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  min-width: 108px;
}
.estado-disponibilidade[data-estado="DISPONIVEL"] { background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso); }
.estado-disponibilidade[data-estado="INDISPONIVEL"] { background: var(--cor-erro-fundo); border-color: var(--cor-erro); }
.estado-disponibilidade[disabled] { background: #eee; color: #888; cursor: not-allowed; }

footer.app-rodape {
  padding: calc(var(--espaco) * 2);
  text-align: center;
  color: #666;
  font-size: 0.85rem;
}

:focus-visible { outline: 3px solid #ffb703; outline-offset: 1px; }

@media (max-width: 640px) {
  main.app-conteudo { padding: var(--espaco); }
  .linha-campos { flex-direction: column; }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 30, 0.55);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: calc(var(--espaco) * 3) var(--espaco);
  overflow-y: auto;
  z-index: 1000;
}

.modal-caixa {
  background: #fff;
  border-radius: var(--raio);
  max-width: 960px;
  width: 100%;
  padding: calc(var(--espaco) * 2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.modal-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espaco);
  margin-bottom: calc(var(--espaco) * 2);
  border-bottom: 1px solid var(--cor-borda);
  padding-bottom: var(--espaco);
}

.modal-cabecalho h3 { margin: 0; }