/* ---------- Fundamentos e variáveis ----------
   Paleta escolhida para atender contraste mínimo AA (4.5:1 para texto normal,
   3:1 para texto grande/UI) no modo padrão e no modo alto contraste. */
:root {
  --cor-fundo: #ffffff;
  --cor-texto: #1a1a1a;
  --cor-primaria: #0b3d91;      /* contraste ~8.6:1 sobre branco */
  --cor-primaria-escura: #072a66;
  --cor-superficie: #f3f5f9;
  --cor-borda: #c7cdd9;
  --cor-urgente: #b3261e;       /* contraste ~6.3:1 sobre branco */
  --cor-foco: #ffbf47;
  --fonte-base: 1rem;
  --raio: 10px;
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: var(--fonte-base);
  line-height: 1.55;
}

h1, h2, h3 { line-height: 1.25; }

/* ---------- Skip link (WCAG 2.4.1 – Blocos de desvio) ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cor-primaria);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 1000;
  border-radius: 0 0 var(--raio) 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Foco visível (WCAG 2.4.7) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Cabeçalho ---------- */
.app-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--cor-primaria);
  color: #fff;
}
.app-header__brand { display: flex; gap: 0.75rem; align-items: center; }
.app-header__logo { font-size: 2rem; }
.app-header__eyebrow { margin: 0; font-size: 0.8rem; opacity: 0.85; }
.app-header h1 { margin: 0; font-size: 1.3rem; }

.a11y-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.a11y-bar button {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--raio);
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px; /* alvo de toque WCAG 2.5.5 */
}
.a11y-bar button:hover { background: rgba(255,255,255,0.25); }
.a11y-bar button[aria-pressed="true"] {
  background: #fff;
  color: var(--cor-primaria-escura);
  font-weight: 700;
}

/* ---------- Layout principal ---------- */
main {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
}
section { margin-bottom: 2.5rem; }
.secao-descricao { color: #444; max-width: 65ch; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.carregando { color: #555; font-style: italic; }

.card {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 1rem;
  background: var(--cor-superficie);
}
.card h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.card p { margin: 0.25rem 0; }
.card__meta { font-size: 0.85rem; color: #555; }

.card--urgente {
  border-color: var(--cor-urgente);
  background: #fdeceb;
}
.badge-urgente {
  display: inline-block;
  background: var(--cor-urgente);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.35rem;
}

/* ---------- Busca ---------- */
.busca label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.busca__controles { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.busca input[type="search"] {
  flex: 1 1 260px;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  font-size: 1rem;
}
.busca__status { font-size: 0.9rem; color: var(--cor-primaria-escura); }

/* ---------- Formulário ---------- */
form { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; }
.campo { display: flex; flex-direction: column; gap: 0.35rem; }
.campo label { font-weight: 600; }
input, select, textarea {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  font: inherit;
  color: inherit;
  background: #fff;
}

.botao-primario, .botao-secundario {
  align-self: flex-start;
  border: none;
  border-radius: var(--raio);
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
}
.botao-primario { background: var(--cor-primaria); color: #fff; }
.botao-primario:hover { background: var(--cor-primaria-escura); }
.botao-secundario { background: #fff; color: var(--cor-primaria); border: 2px solid var(--cor-primaria); }
.botao-secundario:hover { background: var(--cor-superficie); }

#feedback-formulario, #status-push { min-height: 1.4em; font-weight: 600; }

/* ---------- Rodapé ---------- */
.app-footer {
  text-align: center;
  padding: 1.5rem;
  border-top: 1px solid var(--cor-borda);
  color: #444;
  font-size: 0.9rem;
}
.app-footer a { color: var(--cor-primaria); }

/* ---------- Modo alto contraste ----------
   Preto puro sobre amarelo/branco: maximiza contraste para baixa visão. */
body.alto-contraste {
  --cor-fundo: #000000;
  --cor-texto: #ffffff;
  --cor-primaria: #ffd60a;
  --cor-primaria-escura: #ffd60a;
  --cor-superficie: #111111;
  --cor-borda: #ffffff;
  --cor-urgente: #ff5c4d;
  background: #000;
}
body.alto-contraste .app-header { background: #000; border-bottom: 2px solid #ffd60a; }
body.alto-contraste .app-header,
body.alto-contraste .app-header h1,
body.alto-contraste .app-header__eyebrow { color: #ffd60a; }
body.alto-contraste .a11y-bar button { color: #ffd60a; border-color: #ffd60a; background: #000; }
body.alto-contraste .a11y-bar button[aria-pressed="true"] { background: #ffd60a; color: #000; }
body.alto-contraste .card { background: #111; border-color: #ffd60a; }
body.alto-contraste .card--urgente { background: #1a0000; border-color: #ff5c4d; }
body.alto-contraste input,
body.alto-contraste select,
body.alto-contraste textarea { background: #000; color: #fff; border-color: #ffd60a; }
body.alto-contraste .botao-primario { background: #ffd60a; color: #000; }
body.alto-contraste .botao-secundario { background: #000; color: #ffd60a; border-color: #ffd60a; }
body.alto-contraste a { color: #ffd60a; }

@media (max-width: 640px) {
  .app-header { flex-direction: column; align-items: flex-start; }
}