:root {
  --ink: #1c2430;
  --muted: #5c6b7a;
  --line: #d5dee4;
  --paper: #f3f6f5;
  --surface: #ffffff;
  --teal: #0f6e6e;
  --sand: #f8efe4;
  --rust: #9a3b2f;
  --ok: #1f7a4d;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  font-family: "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.45;
}
a { color: var(--teal); }
h1, h2 { margin: 0 0 8px; }
img { max-width: 100%; }

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: #14343a;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 5;
}
.topo a { color: #fff; text-decoration: none; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.marca img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.topo nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.topo nav a, .topo nav span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  font-size: 14px;
}

main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 48px; }
.grelha, .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cartao, .stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.stat-card h3 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 650; }
.stat-value { font-size: 26px; line-height: 1.15; }
.stat-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.duas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 12px; align-items: start; }
.grafico { position: relative; height: 280px; }
.grafico canvas { width: 100% !important; height: 100% !important; }

table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 12px; overflow: hidden; }
th, td { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: middle; font-size: 14px; }
th { font-size: 12px; color: var(--muted); background: #f7faf9; }
.tabela-larga { overflow-x: auto; }
.num { text-align: right; white-space: nowrap; }

label { display: block; font-size: 13px; color: var(--muted); margin: 8px 0; }
input, select, textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
textarea { min-height: 72px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto; margin: 0 6px 0 0; vertical-align: middle; }
input[type="file"] { max-width: 100%; }
table input, table select, table textarea { min-width: 90px; }
button, .botao {
  border: 0;
  border-radius: 10px;
  background: var(--teal);
  color: #fff;
  padding: 9px 14px;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.botao.claro, button.claro { background: #e7eef0; color: var(--ink); }
.linha-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 14px 0; }
.linha-acoes input, .linha-acoes select { width: auto; min-width: 180px; margin: 0; }
.aviso { background: var(--sand); color: var(--rust); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.ok { background: #e7f6ee; color: var(--ok); }
.abas { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.abas a { padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--ink); background: #e7eef0; }
.abas a.ativa { background: var(--teal); color: #fff; }
.selo { font-size: 12px; font-weight: 700; white-space: nowrap; }
.selo.superior, .selo.cumpre { color: var(--ok); }
.selo.equivalente { color: #8a5a00; }
.selo.nao_cumpre { color: var(--rust); }

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login form { width: min(420px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
.login img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.login h1 { margin-top: 12px; }

.tabela-larga { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
img, svg, canvas, video { max-width: 100%; height: auto; }
@media (max-width: 800px) {
  .duas, .grelha, .stat-grid { grid-template-columns: 1fr; }
  .topo { align-items: stretch; flex-direction: column; padding: 10px 12px; gap: 10px; }
  .topo nav { width: 100%; }
  .topo nav a, .topo nav span { padding: 10px 12px; }
  main { padding: 14px 12px 80px; }
  h1 { font-size: 1.35rem; }
  .stat-value { font-size: 20px; overflow-wrap: anywhere; }
  .linha-acoes { align-items: stretch; }
  .linha-acoes > * { flex: 1 1 100%; }
  .linha-acoes input, .linha-acoes select, .linha-acoes .botao, .linha-acoes button { width: 100%; min-width: 0; }
  .linha-password { flex-direction: column; align-items: stretch; }
  .linha-password input, .linha-password button { width: 100%; min-width: 0; }
  .login { padding: 12px; }
  .login form { padding: 20px 16px; }
  .grafico { height: 220px; }
  button, .botao { padding: 12px 14px; }
  input, select, textarea { font-size: 16px; }
  .abas a { padding: 10px 12px; }
  .margem-concurso { overflow-wrap: anywhere; }
}
@media (max-width: 460px) {
  .stat-grid { grid-template-columns: 1fr; }
}

.voltar-topo {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  background: #14343a;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(20, 52, 58, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
.voltar-topo.visivel {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.ajuda details summary { cursor: pointer; font-weight: 700; font-size: 18px; }
.ajuda details p, .ajuda details ul, .ajuda details table { margin-top: 10px; }
.frase { background: var(--paper); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.frase h3 { margin: 0 0 6px; font-size: 15px; }
.frase-texto { font-size: 16px; font-weight: 650; }
.resposta { margin-top: 8px; background: #e7f6ee; color: var(--ok); border-radius: 12px; padding: 12px 14px; }

button.perigo { background: var(--rust); }

.linha-password { display: flex; gap: 8px; align-items: center; margin: 0; }
.linha-password input { width: 190px; min-width: 140px; margin: 0; }

.margem-concurso { font-weight: 700; color: var(--teal); }

@media (max-width: 800px) {
  .movel { overflow: visible; }
  .movel table, .movel thead, .movel tbody, .movel tr, .movel th, .movel td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .movel thead { display: none; }
  .movel tr {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    margin: 0 0 12px;
    padding: 8px 12px;
  }
  .movel td {
    display: block;
    border: 0;
    padding: 8px 0;
    text-align: left;
    white-space: normal;
  }
  .movel td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }
  .movel td:not([data-label])::before, .movel td[data-label=""]::before { content: none; }
  .movel input, .movel select, .movel textarea { min-width: 0; width: 100%; font-size: 16px; }
  .movel .num { text-align: left; font-size: 18px; font-weight: 700; }
}

.urgente { background: #fdecea; border-color: var(--rust); }
.urgente h2, .urgente a { color: var(--rust); }
.caducado { color: var(--rust); font-weight: 700; }
.a-vencer { color: #8a5a00; font-weight: 700; }