/* ============ Base ============ */
:root {
  --azul: #2563eb;
  --azul-escuro: #1d4ed8;
  --fundo: #f1f5f9;
  --borda: #e2e8f0;
  --texto: #0f172a;
  --texto-suave: #64748b;
  --verde: #16a34a;
  --verde-claro: #84cc16;
  --amarelo: #eab308;
  --laranja: #f97316;
  --vermelho: #dc2626;
  --perigo: #b91c1c;
}

* { box-sizing: border-box; }

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

/* ============ Painel (topo e conteúdo) ============ */
.topo {
  background: var(--azul);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  flex-wrap: wrap;
}
.topo .marca { color: #fff; font-weight: 700; font-size: 1.2rem; text-decoration: none; }
.topo nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.topo nav a {
  color: #dbeafe; text-decoration: none; padding: 0.4rem 0.7rem;
  border-radius: 0.375rem; font-size: 0.9rem;
}
.topo nav a:hover { background: rgba(255,255,255,0.15); color: #fff; }
.topo .usuario { font-size: 0.85rem; color: #dbeafe; }
.topo .usuario a { color: #fff; }

.conteudo { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
.conteudo.publico { max-width: 760px; }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; border-bottom: 1px solid var(--borda); padding-bottom: 0.4rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
a { color: var(--azul); }
code { background: #eef2ff; padding: 0.1rem 0.35rem; border-radius: 0.25rem; font-size: 0.85em; }

/* ============ Cartões (KPIs) ============ */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.85rem;
  margin: 1rem 0;
}
.cartao {
  background: #fff; border: 1px solid var(--borda); border-radius: 0.75rem;
  padding: 1rem; box-shadow: 0 1px 2px rgba(15,23,42,0.05);
}
.cartao span { display: block; font-size: 0.8rem; color: var(--texto-suave); margin-bottom: 0.25rem; }
.cartao strong { font-size: 1.4rem; }
.cartao strong.menor { font-size: 0.95rem; word-break: break-all; }

/* ============ Tabelas ============ */
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 0.5rem; overflow: hidden; margin: 0.75rem 0 1.5rem; }
th, td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--borda); font-size: 0.9rem; vertical-align: top; }
th { background: #f8fafc; color: var(--texto-suave); font-weight: 600; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }
small { color: var(--texto-suave); }

/* ============ Formulários ============ */
.formulario {
  background: #fff; border: 1px solid var(--borda); border-radius: 0.75rem;
  padding: 1.25rem; margin: 1rem 0; display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.formulario.estreito { max-width: 480px; }
.formulario.linha { display: flex; align-items: end; gap: 0.5rem; }
.formulario textarea, .questionario textarea { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 0.25rem; }
.campo span { font-size: 0.85rem; color: var(--texto-suave); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
  padding: 0.55rem 0.7rem; border: 1px solid var(--borda); border-radius: 0.5rem;
  font-size: 0.95rem; font-family: inherit; background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #bfdbfe; border-color: var(--azul); }
.linha { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.inline { display: inline; }
.inline, form.inline { margin: 0; }
.link { background: none; border: none; color: var(--azul); cursor: pointer; padding: 0; font-size: 0.9rem; }
.link.perigo { color: var(--perigo); }

/* ============ Botões ============ */
.botao {
  display: inline-block; background: #e2e8f0; color: var(--texto);
  border: none; border-radius: 0.5rem; padding: 0.55rem 1rem;
  font-size: 0.9rem; font-family: inherit; cursor: pointer; text-decoration: none;
}
.botao:hover { background: #cbd5e1; }
.botao.principal, .botao[type=submit] { background: var(--azul); color: #fff; }
.botao.principal:hover, .botao[type=submit]:hover { background: var(--azul-escuro); }
.botao.secundario { background: #e2e8f0; color: var(--texto); }
.botao.perigo { background: var(--perigo); color: #fff; }
.botao.perigo:hover { background: #991b1b; }
.acoes { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }

/* ============ Avisos (flash) ============ */
.aviso { border-radius: 0.5rem; padding: 0.7rem 1rem; margin: 0.75rem 0; font-size: 0.9rem; }
.aviso-ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.aviso-erro { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ============ Badges (semáforo) ============ */
.badge {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; color: #fff;
}
.badge-verde        { background: var(--verde); }
.badge-verde_claro  { background: var(--verde-claro); }
.badge-amarelo      { background: var(--amarelo); }
.badge-laranja      { background: var(--laranja); }
.badge-vermelho     { background: var(--vermelho); }
.badge-disponivel   { background: var(--verde); }
.badge-em_uso       { background: var(--amarelo); }
.badge-concluido    { background: var(--azul); }
.badge-expirado     { background: var(--laranja); }
.badge-cancelado, .badge-cancelado { background: var(--texto-suave); }
.badge-ativo        { background: var(--verde); }
.badge-encerrado, .badge-inativo { background: var(--texto-suave); }

/* ============ Barras de progresso ============ */
.barra { background: #e2e8f0; border-radius: 999px; height: 10px; overflow: hidden; min-width: 80px; }
.barra-preenchida { height: 100%; background: var(--azul); border-radius: 999px; }
.barra-curta { max-width: 200px; }

/* ============ QR Code ============ */
.qr { background: #fff; border: 1px solid var(--borda); border-radius: 0.5rem; padding: 0.4rem; display: inline-block; }
.qr-url { font-size: 0.72rem; color: var(--texto-suave); word-break: break-all; max-width: 220px; }

/* ============ Página pública (respondente) ============ */
body.publica { background: #f8fafc; }
.cabecalho-pesquisa, .pagina-laudo { background: #fff; border: 1px solid var(--borda); border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1rem; }
.subtitulo { color: var(--texto-suave); margin-top: -0.5rem; }
.pequeno { font-size: 0.85rem; color: var(--texto-suave); }
.bloco { margin-top: 2rem; }
.questao {
  border: 1px solid var(--borda); border-radius: 0.75rem; background: #fff;
  padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.questao.obrigatoria { border-left: 4px solid var(--azul); }
.questao legend { font-weight: 600; padding: 0 0.3rem; font-size: 0.95rem; }
.estrela { color: var(--perigo); margin-left: 0.2rem; }
.opcao { display: block; padding: 0.35rem 0; cursor: pointer; }
.opcao input { margin-right: 0.5rem; }
.questionario { margin-top: 1rem; }
.inline-bloco { border-bottom: 1px solid var(--borda); padding-bottom: 0.75rem; margin-bottom: 0.75rem; }
.rodape-laudo { color: var(--texto-suave); margin-top: 1.5rem; }
.ok { color: var(--verde); font-weight: 600; }
.erro { color: var(--perigo); font-weight: 600; }

/* ============ Impressão (PDF do laudo) ============ */
@media print {
  body { background: #fff; }
  .topo, .nao-imprimir, .aviso, form { display: none !important; }
  .conteudo { max-width: 100%; padding: 0; }
  .pagina-laudo { border: none; padding: 0; box-shadow: none; }
  table { box-shadow: none; }
  th, td { color: #000; }
}

/* ============ Home ============ */
.hero {
  background: #fff; border: 1px solid var(--borda); border-radius: 0.75rem;
  padding: 1.5rem; margin-bottom: 1rem;
}
.hero h1 { margin-bottom: 0.25rem; }
.duas-colunas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0;
}
.duas-colunas > div {
  background: #fff; border: 1px solid var(--borda); border-radius: 0.75rem; padding: 1.25rem;
}
@media (max-width: 760px) {
  .duas-colunas { grid-template-columns: 1fr; }
}

/* ============ Auditoria de instrumentos ============ */
.lista-achados { list-style: none; padding: 0; margin: 0.5rem 0 1.5rem; display: grid; gap: 0.5rem; }
.lista-achados li {
  border: 1px solid var(--borda); border-radius: 0.5rem; padding: 0.7rem 0.9rem;
  background: #fff; font-size: 0.88rem;
}
.lista-achados li.achado-erro  { border-left: 4px solid var(--vermelho); }
.lista-achados li.achado-aviso { border-left: 4px solid var(--amarelo); }
.lista-achados li.achado-nota  { border-left: 4px solid var(--texto-suave); }
.badge-negativa { background: var(--laranja); }
.badge-inconsistente, .badge-inconclusivo { background: var(--amarelo); }

/* ============ Status de aplicação ============ */
.badge-em_andamento { background: var(--amarelo); }
.badge-concluida    { background: var(--azul); }
.badge-abandonada   { background: var(--texto-suave); }
.badge-corporativo  { background: var(--azul); }
.badge-publico      { background: var(--verde-claro); }

/* ============ Tela centralizada (login) ============ */
body.corpo-centralizado {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.corpo-centralizado .conteudo {
  width: 100%;
  max-width: 520px;
  margin: 0;
  padding: 1.5rem;
}

body.corpo-centralizado .titulo-centralizado {
  text-align: center;
  margin-bottom: 1.25rem;
}

/* Pergunta DENTRO do card */
#formQuestionario fieldset {
  border: 1px solid var(--borda);
  border-radius: 0.5rem;
  padding: 1.1rem 1.1rem 1.25rem;
  margin: 0;
}
.pergunta-titulo {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: 0.9rem;
}

/* Badge de classificação — fundo claro + texto na cor definida */

/* Valor padrão de todos os cards do laudo — mesmo tamanho e fonte */
/* Rótulo do card (texto de cima) — +20% também */
.cartao > span:first-child {
  font-size: 1.08rem; /* +20% em relação ao padrão do rótulo */
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 0.25rem;
}

/* Valor padrão dos cards — +20% */
.valor-card {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Badge de classificação — usa o mesmo tamanho do .valor-card, só com fundo e cor */
.badge-classificacao {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}
/* Badge de classificação — fundo forte + texto claro */
.badge-cor-verde       { background: #047857; color: #d1fae5; }
.badge-cor-verde-claro { background: #047857; color: #d1fae5; }
.badge-cor-amarelo     { background: #FFFF00; color: #fef3c7; }
.badge-cor-laranja     { background: #FFA500; color: #ffedd5; }
.badge-cor-vermelho    { background: #b91c1c; color: #fee2e2; }

/* Card de validação ocupa a linha inteira, abaixo dos 3 cards */
.cartoes .cartao-largo { grid-column: 1 / -1; flex-basis: 100%; }