/* Estilo das páginas do app (login, definir senha, início) — atividade 3.2.
   Cores dos questionários R01: azul-escuro #1a2634 e laranja #e67e22. */
:root {
  --kh-escuro: #1a2634;
  --kh-laranja: #e67e22;
  --kh-laranja-escuro: #d35400;
  --kh-texto: #2c3e50;
  --kh-texto-suave: #5d6d7e;
  --kh-borda: #dce1e6;
  --kh-fundo: #f4f6f8;
  --kh-branco: #fff;
  --kh-erro: #c0392b;
  --kh-erro-fundo: #fdecea;
  --kh-aviso-fundo: #fff4e5;
  --kh-ok-fundo: #e8f6ee;
  --kh-ok: #1e8449;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kh-fundo);
  color: var(--kh-texto);
  font: 16px/1.5 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.kh-topo {
  background: var(--kh-escuro);
  padding: 16px;
  padding-right: 200px; /* espaço para o botão Sair (kh-auth.js) */
}
.kh-topo img { display: block; height: 44px; width: auto; max-width: 100%; }
.kh-topo-centro { padding-right: 16px; }
.kh-topo-centro img { margin: 0 auto; }

main { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }

/* Cartão central das páginas de login */
.kh-cartao-login {
  max-width: 420px;
  margin: 32px auto;
  background: var(--kh-branco);
  border: 1px solid var(--kh-borda);
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 6px 20px rgba(26, 38, 52, .08);
}
.kh-cartao-login h1 { font-size: 22px; margin: 0 0 20px; color: var(--kh-escuro); }

label { display: block; font-weight: 600; margin: 0 0 6px; }
input[type=email], input[type=password] {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin: 0 0 16px;
  border: 1px solid var(--kh-borda);
  border-radius: 8px;
  font: inherit;
  color: inherit;
  background: var(--kh-branco);
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--kh-laranja);
  outline-offset: 2px;
}

.kh-caixa { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 0 0 20px; }
.kh-caixa input { margin: 4px 0 0; width: 18px; height: 18px; flex: none; }

.kh-botao {
  display: inline-block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--kh-laranja);
  color: var(--kh-branco);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 13px 18px;
  min-height: 44px; /* alvo de toque (E5, 5.5) */
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
/* Link com aparência de botão: texto centralizado na altura mínima, como no <button> */
a.kh-botao { display: inline-flex; align-items: center; justify-content: center; }
.kh-botao:hover { background: var(--kh-laranja-escuro); }
.kh-botao:disabled { opacity: .6; cursor: wait; }
.kh-botao-auto { width: auto; }

.kh-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 16px 0 0;
  color: var(--kh-escuro);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.kh-msg { border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; }
.kh-msg:empty { display: none; }
.kh-msg.erro { background: var(--kh-erro-fundo); color: var(--kh-erro); }
.kh-msg.aviso { background: var(--kh-aviso-fundo); color: var(--kh-texto); }
.kh-msg.ok { background: var(--kh-ok-fundo); color: var(--kh-ok); }
.kh-msg a { color: inherit; font-weight: 600; }

.kh-dica { font-size: 14px; color: var(--kh-texto-suave); margin: -8px 0 16px; }

[hidden] { display: none !important; }

/* Página inicial */
.kh-saudacao { font-size: 24px; margin: 0 0 20px; color: var(--kh-escuro); }
.kh-bloco {
  background: var(--kh-branco);
  border: 1px solid var(--kh-borda);
  border-radius: 12px;
  padding: 20px;
  margin: 0 0 20px;
}
.kh-bloco h2 { font-size: 18px; margin: 0 0 12px; color: var(--kh-escuro); }
.kh-bloco h3 { font-size: 15px; margin: 16px 0 10px; color: var(--kh-texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.kh-bloco h3:first-of-type { margin-top: 0; }

.kh-dados { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.kh-dados dt { color: var(--kh-texto-suave); }
.kh-dados dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.kh-instrumentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.kh-instrumento {
  display: block;
  border: 1px solid var(--kh-borda);
  border-left: 5px solid var(--kh-laranja);
  border-radius: 10px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  background: var(--kh-branco);
}
.kh-instrumento:hover { border-color: var(--kh-laranja); }
.kh-instrumento strong { display: block; font-size: 20px; color: var(--kh-escuro); }
.kh-instrumento span { display: block; color: var(--kh-texto-suave); font-size: 14px; }

/* Sequência IOD → IME → IMC → IGP (3.9): lista "Seus questionários" do respondente */
.kh-sequencia { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.kh-sequencia .kh-instrumento { display: flex; gap: 14px; align-items: center; }
.kh-seq-numero {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--kh-fundo); color: var(--kh-escuro); font-weight: 700;
}
.kh-seq-texto { flex: 1; min-width: 0; }
.kh-instrumento .kh-seq-acao { margin-top: 4px; color: var(--kh-escuro); font-weight: 600; }
.kh-seq-proximo { border: 2px solid var(--kh-laranja); border-left-width: 5px; background: var(--kh-aviso-fundo); }
.kh-seq-proximo .kh-seq-numero { background: var(--kh-laranja); color: var(--kh-branco); }
.kh-seq-proximo .kh-seq-acao { color: var(--kh-laranja-escuro); }
.kh-seq-enviado { border-left-color: var(--kh-ok); }
.kh-seq-enviado .kh-seq-numero { background: var(--kh-ok-fundo); color: var(--kh-ok); }
.kh-instrumento .kh-seq-enviado-em { color: var(--kh-ok); font-weight: 600; }
.kh-seq-bloqueado { border-left-color: var(--kh-borda); opacity: .6; cursor: not-allowed; }
.kh-seq-bloqueado:hover { border-color: var(--kh-borda); }
.kh-seq-bloqueado .kh-seq-acao { color: var(--kh-texto-suave); font-weight: 400; }

.kh-em-breve { color: var(--kh-texto-suave); margin: 0; }
.kh-desativado { color: var(--kh-texto-suave); cursor: not-allowed; text-decoration: none; }

/* Meus envios e consulta (E4) */
main.kh-largo { max-width: 1200px; }
.kh-voltar { margin: -12px 0 20px; }
.kh-voltar a, .kh-em-breve a { color: var(--kh-escuro); font-weight: 600; }
.kh-dica-envios { margin: 12px 0 0; }
.kh-dica-filtros { margin: 12px 0 0; }

.kh-botao-secundario { background: var(--kh-branco); color: var(--kh-escuro); border: 1px solid var(--kh-borda); }
.kh-botao-secundario:hover { background: var(--kh-fundo); }
.kh-botao-pequeno { font-size: 14px; padding: 9px 12px; white-space: nowrap; }

select, input[type=text], input[type=date] {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--kh-borda);
  border-radius: 8px;
  font: inherit;
  color: inherit;
  background: var(--kh-branco);
}
select:focus-visible, input:focus-visible { outline: 3px solid var(--kh-laranja); outline-offset: 2px; }

.kh-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 16px; align-items: end; }
.kh-filtros label { font-size: 14px; }
.kh-filtros-botoes { display: flex; gap: 8px; }

.kh-barra-resultados { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.kh-exportar { display: flex; flex-wrap: wrap; gap: 8px; }

.kh-tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.kh-tabela th {
  text-align: left;
  font-size: 13px;
  color: var(--kh-texto-suave);
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 2px solid var(--kh-borda);
  padding: 8px 10px;
}
.kh-tabela td { border-bottom: 1px solid var(--kh-borda); padding: 10px; vertical-align: top; overflow-wrap: anywhere; }
.kh-tabela td small { display: block; color: var(--kh-texto-suave); font-size: 13px; }
.kh-tabela td small.kh-conta { font-size: 12px; margin-top: 2px; }
.kh-tabela tbody tr:hover { background: var(--kh-fundo); }
.kh-reuniao { min-width: 140px; padding: 6px 8px; font-size: 14px; }

/* Celular: a tabela vira lista, um envio por cartão */
@media (max-width: 760px) {
  .kh-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .kh-tabela, .kh-tabela tbody, .kh-tabela tr, .kh-tabela td { display: block; width: 100%; }
  .kh-tabela tr { border: 1px solid var(--kh-borda); border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; }
  .kh-tabela td { border: 0; padding: 4px 0; display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
  .kh-tabela td::before { content: attr(data-rotulo); color: var(--kh-texto-suave); font-size: 13px; }
  .kh-tabela td > * { grid-column: 2; }
  .kh-filtros-botoes .kh-botao { flex: 1; }
}

@media (max-width: 560px) {
  .kh-topo { padding-right: 16px; padding-top: 64px; }
  .kh-topo img { height: 36px; }
  .kh-dados { grid-template-columns: 1fr; gap: 0; }
  .kh-dados dd { margin: 0 0 10px; }
  .kh-filtros { grid-template-columns: 1fr; }
}

@media print {
  .kh-topo { background: none; }
}