/* ===== Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --cor-primaria: #0e7a5f;
  --cor-primaria-escura: #0a5c47;
  --cor-fundo: #f2f5f4;
  --cor-texto: #1d2b27;
  --cor-borda: #d8e0dd;
  --cor-perigo: #c0392b;
  --cor-alerta-fundo: #fff6e5;
  --raio: 8px;
}
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 15px;
}
a { color: var(--cor-primaria); }
code { background: #eef2f0; padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }

/* ===== Topo / navegação ===== */
.topo {
  display: flex; align-items: center; gap: 24px;
  background: var(--cor-primaria); color: #fff;
  padding: 10px 20px; flex-wrap: wrap;
}
.topo-marca { font-weight: 700; font-size: 1.1rem; }
.topo-nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.topo-nav a {
  color: #eafff8; text-decoration: none; padding: 6px 12px; border-radius: 6px;
}
.topo-nav a:hover { background: var(--cor-primaria-escura); }
.topo-nav a.destaque { background: #fff; color: var(--cor-primaria); font-weight: 600; }
.topo-usuario { display: flex; gap: 12px; align-items: center; }
.topo-usuario a { color: #cdeee3; }

.conteudo { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
.conteudo h1 { margin-bottom: 16px; }
.conteudo h2 { margin: 12px 0; font-size: 1.05rem; }

/* ===== Cartões / grades ===== */
.cartao {
  background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio);
  padding: 16px; margin-bottom: 16px;
}
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.grade-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grade-2col { grid-template-columns: 1fr; } }

.metrica { display: flex; flex-direction: column; gap: 4px; }
.metrica-rotulo { color: #5c6f69; font-size: 0.85rem; }
.metrica-valor { font-size: 1.8rem; font-weight: 700; }
.metrica-extra { color: #5c6f69; font-size: 0.9rem; }
.metrica-alerta { border-color: #e67e22; background: var(--cor-alerta-fundo); }

/* ===== Tabelas ===== */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--cor-borda); vertical-align: top; }
.tabela th { font-size: 0.8rem; text-transform: uppercase; color: #5c6f69; }
.linha-inativa { opacity: 0.55; }

/* ===== Formulários ===== */
.formulario label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 0.9rem; }
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=month], select, textarea {
  padding: 8px 10px; border: 1px solid var(--cor-borda); border-radius: 6px;
  font: inherit; background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cor-primaria); outline-offset: 0; }
.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
.grade-form .col-2 { grid-column: span 2; }
.grade-checkboxes { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.grade-checkboxes label { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.grade-checkboxes input[type=checkbox] { width: auto; }
.linha-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.linha-form label { margin: 0; }
.linha-form-mini { display: flex; gap: 6px; align-items: center; }
.acoes-form { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.barra-busca { display: flex; gap: 8px; margin-bottom: 14px; align-items: flex-end; flex-wrap: wrap; }
.barra-busca input[type=text] { max-width: 420px; }
.campo-mini { width: 120px !important; display: inline-block; }
.linha-titulo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }

/* ===== Botões ===== */
.botao {
  display: inline-block; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--cor-borda);
  background: #fff; color: var(--cor-texto); text-decoration: none; cursor: pointer; font: inherit;
}
.botao:hover { background: #eef2f0; }
.botao-primario { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.botao-primario:hover { background: var(--cor-primaria-escura); }
.botao-perigo { background: var(--cor-perigo); border-color: var(--cor-perigo); color: #fff; }
.botao-mini { padding: 4px 10px; font-size: 0.85rem; }
.botao-cheio { width: 100%; }

/* ===== Alertas / selos ===== */
.alerta { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; }
.alerta-ok { background: #e3f6ee; border: 1px solid #9bd8bf; }
.alerta-erro { background: #fdecea; border: 1px solid #f0b6ae; }
.selo {
  display: inline-block; background: #eef2f0; border-radius: 20px; padding: 2px 10px;
  font-size: 0.78rem; margin: 1px;
}
.selo-vermelho { background: #fdecea; color: #a93226; }
.selo-azul { background: #e8f0fd; color: #1a5276; }
.selo-verde { background: #e3f6ee; color: #117a52; }
.selo-cinza { background: #ececec; color: #666; }
.texto-suave { color: #5c6f69; font-size: 0.88rem; }

/* ===== Login ===== */
.tela-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0e7a5f, #0a4a3a);
  padding: 16px;
}
.cartao-login {
  background: #fff; border-radius: 12px; padding: 32px; width: 100%; max-width: 380px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.cartao-login h1 { font-size: 1.3rem; margin-bottom: 4px; }
.cartao-login .subtitulo { color: #5c6f69; margin-bottom: 18px; }
.cartao-login label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 0.9rem; }
.cartao-confirmacao { max-width: 560px; }
.cartao-confirmacao .tabela { margin: 12px 0; }