:root {
  --azul: #0057b8;
  --azul-escuro: #003d82;
  --verde: #00a651;
  --cinza-bg: #f4f6f9;
  --cinza-borda: #dde3ea;
  --texto: #1c2b3a;
  --texto-suave: #5b6b7c;
  --erro: #d92d20;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--cinza-bg);
  color: var(--texto);
}

.topo {
  background: var(--azul);
  color: #fff;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topo h1 {
  font-size: 18px;
  margin: 0;
}

.topo button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
}

.container {
  max-width: 420px;
  margin: 60px auto;
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.container.largo {
  max-width: 900px;
}

h2 {
  margin-top: 0;
}

.tabs {
  display: flex;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--cinza-borda);
}

.tabs button {
  flex: 1;
  padding: 10px;
  border: none;
  background: none;
  font-size: 15px;
  cursor: pointer;
  color: var(--texto-suave);
  border-bottom: 2px solid transparent;
}

.tabs button.ativo {
  color: var(--azul);
  border-bottom-color: var(--azul);
  font-weight: 600;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 4px;
  color: var(--texto-suave);
}

input, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  font-size: 14px;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--azul);
}

.btn {
  width: 100%;
  margin-top: 22px;
  padding: 12px;
  background: var(--azul);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover {
  background: var(--azul-escuro);
}

.btn.secundario {
  background: #fff;
  color: var(--azul);
  border: 1px solid var(--azul);
}

.msg-erro {
  background: #fef3f2;
  color: var(--erro);
  border: 1px solid #fda29b;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-top: 16px;
  display: none;
}

.msg-erro.ativo {
  display: block;
}

.conteudo {
  max-width: 900px;
  margin: 24px auto;
  padding: 0 16px;
}

.card {
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 12px;
  padding: 24px;
}

.aviso {
  background: #fff8e6;
  border: 1px solid #f4d788;
  color: #8a6d1c;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-top: 16px;
}

.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.resumo-item {
  background: var(--cinza-bg);
  border: 1px solid var(--cinza-borda);
  border-radius: 10px;
  padding: 14px 16px;
}

.resumo-item .valor {
  font-size: 22px;
  font-weight: 700;
  color: var(--azul);
}

.resumo-item .rotulo {
  font-size: 12px;
  color: var(--texto-suave);
}

.lista-indicacoes {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item-indicacao {
  border: 1px solid var(--cinza-borda);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}

.item-indicacao .info strong {
  display: block;
}

.item-indicacao .info span {
  font-size: 12px;
  color: var(--texto-suave);
}

.badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-cinza { background: #eef1f4; color: var(--texto-suave); }
.badge-azul { background: #e6f0ff; color: var(--azul); }
.badge-verde { background: #e5f7ec; color: var(--verde); }
.badge-dourado { background: #fff3d6; color: #8a6d1c; }

.vazio {
  text-align: center;
  padding: 30px 0;
  color: var(--texto-suave);
}

.item-indicacao-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.btn-detalhes {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--texto-suave);
  padding: 0 6px 0 0;
}

.grade-detalhe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 20px;
  font-size: 13px;
  width: 100%;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--cinza-borda);
}

.grade-detalhe .campo strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--texto-suave);
}