/* ZEFRA Higiene — classes/tokens comuns do app (base.html + o que mais de um módulo usa).
   Só tokens do design system no que é layout; os tokens abaixo são semântica de exposição/risco
   do próprio app, mantidos com os valores originais (não são cor de marca, não trocar). */

:root {
  /* Nível de ação / limite de tolerância (dosimetrias) — cor de status técnico, igual em todo laudo. */
  --nivel-acao: #E8B93E;
  --nivel-limite: #C23B3B;
  --alerta-bg: #FBEAEA;
  /* Zona de incerteza da medição (IEC 61672 etc.) — nunca é "marca". */
  --zona-aceitavel: #6FAE7A;
  --zona-incerteza: #E08A3C;
  /* Sombra de cartão específica do app (herdada do styles.css anterior). */
  --shadow-card: 0 1px 2px rgba(13, 20, 51, 0.06), 0 6px 16px rgba(13, 20, 51, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --alerta-bg: #3A1917;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.25);
  }
}
:root[data-theme="dark"] {
  --alerta-bg: #3A1917;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   Componentes locais do app (portados do antigo web/static/styles.css).
   base.html deixou de carregar styles.css na migração pro ZEFRA, e essas
   classes ainda não têm equivalente em zefra-ui.css — sem isso, as telas
   de projetos/cadastros que dependem delas ficam sem estilo nenhum.
   Cores atualizadas pros tokens novos (ver tokens/tokens.css); tudo o
   mais preservado igual ao styles.css original. */

.radio-group { display: flex; flex-wrap: wrap; gap: 1rem; }
.radio-group label { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 400; font-size: 0.9rem; color: var(--text); }

.check-list { display: flex; flex-direction: column; gap: 0.7rem; }
.check-item {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
}
.check-item input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); }
.check-item label { font-weight: 600; font-size: 0.95rem; margin: 0; }

/* Alias: JS gera className "pill ruim" (ver script inline de
   dosimetria_sessao_editar.html) — mesma aparência de .pill.danger. */
.pill.ruim { background: var(--danger-bg); color: var(--danger-text); }

.amostragem-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.amostragem-vazao {
  display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: 0.82rem;
  color: var(--brand-soft-text); background: var(--brand-soft); padding: 0.1rem 0.5rem; border-radius: 6px;
  white-space: nowrap;
}
.amostragem-detalhe { font-size: 0.76rem; color: var(--text-faint); }

.ghe-grupo-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  margin: 1rem 0 0.4rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--line);
}
.ghe-grupo-cabecalho:first-of-type { margin-top: 0.6rem; }
.ghe-grupo-nome { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.ghe-grupo-progresso {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint);
  background: var(--surface-sunken); padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.ghe-grupo-progresso.completo { background: var(--ok-bg); color: var(--ok-text); }

.duplicar-grupo-form {
  display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 9px;
  overflow: hidden; background: var(--surface-sunken);
}
.duplicar-grupo-form input[type="text"] {
  border: none; background: transparent; padding: 0.42rem 0.7rem; font-size: 0.8rem;
  width: 140px; color: var(--text); font-family: var(--font-ui);
}
.duplicar-grupo-form input[type="text"]::placeholder { color: var(--text-faint); }
.duplicar-grupo-form input[type="text"]:focus { outline: none; background: var(--brand-soft); }
.duplicar-grupo-form input[type="text"][readonly] { cursor: pointer; }
.duplicar-grupo-form button {
  border: none; border-left: 1px solid var(--line); border-radius: 0;
  background: var(--surface); color: var(--text); padding: 0.42rem 0.85rem;
  font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: var(--font-ui);
}
.duplicar-grupo-form button:hover { background: var(--brand-soft); color: var(--brand-soft-text); }
@media (max-width: 640px) {
  /* Sem isso, "nome do GHE + progresso" e o form de duplicar (largura fixa
     de 140px no input + botão com texto longo) ficam lado a lado numa
     linha só e estouram a largura da tela no mobile. */
  .ghe-grupo-cabecalho { flex-wrap: wrap; }
  .ghe-grupo-cabecalho .acoes { width: 100%; }
  .duplicar-grupo-form { width: 100%; }
  .duplicar-grupo-form input[type="text"] { width: auto; flex: 1 1 auto; min-width: 0; }
}

.campo-status { font-size: 0.83rem; color: var(--text-soft); margin: 0.5rem 0 0; }
.campo-status.ok { color: var(--ok-text); }
.campo-status.erro { color: var(--danger-text); }

.campo-ia-legenda {
  display: flex; align-items: flex-start; gap: 0.5rem;
  background: var(--brand-soft); color: var(--text); border: 1px solid var(--brand);
  border-radius: var(--radius-md); padding: 0.7rem 0.9rem; font-size: 0.83rem; margin: 0 0 1.3rem;
}
.campo-ia-legenda .emoji { flex: none; font-size: 1rem; line-height: 1; }
.field.campo-ia input, .field.campo-ia select, .field.campo-ia textarea {
  background: var(--brand-soft); border-color: var(--brand);
}
.field.campo-ia > label::after { content: " 🤖"; }

/* Campo de texto sem atributo type (matricula, avaliador...) fica de fora
   do seletor .field input[type=text] do zefra-ui.css -- sem este bloco
   aparecia com a cara padrao do navegador nas telas do desktop. Mesmos
   valores do zefra pra manter a aparencia igual. */
.field input:not([type]) {
  width: 100%; min-height: 2.75rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 0.6rem 0.8rem; font: 400 1rem / 1.4 var(--font-ui); background: var(--surface); color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field input:not([type]):hover { border-color: var(--text-faint); }
.field input:not([type]):focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

.campo-previa { margin: 0.7rem 0 0; padding: 0.7rem 0.9rem; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px dashed var(--line-strong); }
.campo-previa[hidden] { display: none; }
.campo-previa p { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--text); }
.campo-previa-ressalva { color: var(--text-faint) !important; font-size: 0.76rem !important; }

.campo-pontos-total {
  font-family: var(--font-mono); font-size: 0.8rem; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm);
  background: var(--brand-soft); color: var(--brand-soft-text); margin-bottom: 1rem; text-align: center;
}
.campo-pontos-total.alerta { background: var(--alerta-bg); color: var(--nivel-limite); }

.evidencia-lista { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.evidencia-thumb-link {
  display: inline-block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line-strong);
  line-height: 0; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.evidencia-thumb-link:hover { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.evidencia-thumb { width: 44px; height: 44px; object-fit: cover; display: block; background: var(--surface-sunken); }
.evidencia-thumb-assinatura .evidencia-thumb { width: 84px; height: 44px; object-fit: contain; background: #fff; }
.evidencia-epi-item { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; max-width: 90px; }
.evidencia-epi-obs { font-size: 0.7rem; color: var(--text-faint); text-align: center; line-height: 1.15; }

.campo-epi-foto-row { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.8rem; margin-bottom: 0.8rem; }

/* Modal simples de busca (ex.: catálogo NR-15 ao lançar amostra química,
   escolher setor/GHE ao duplicar programação) — usado tanto nas telas de
   campo quanto nas telas de cadastro, por isso mora aqui (compartilhado),
   não em styles.css (só campo). */
.modal-busca { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.modal-busca[hidden] { display: none; }
.modal-busca-fundo { position: absolute; inset: 0; background: var(--overlay); }
.modal-busca-caixa {
  position: relative; width: 100%; max-width: 560px; max-height: 82vh; overflow-y: auto;
  background: var(--surface); border-radius: 16px 16px 0 0; padding: 1.2rem;
  box-shadow: 0 -8px 30px rgba(var(--shadow-color), 0.35);
}
@media (min-width: 640px) {
  .modal-busca { align-items: center; }
  .modal-busca-caixa { border-radius: 16px; max-height: 70vh; }
}
.modal-busca-cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
.modal-busca-cabecalho h3 { margin: 0; font-size: 1rem; }
.modal-busca-fechar { background: none; border: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--text-soft); }
/* #busca-agente-input não tem wrapper .field (achado durante o teste
   visual) -- sem isso ele nunca teve estilo nenhum, nem no design antigo,
   só que agora destoa mais dentro do modal já migrado. */
.modal-busca-caixa > input[type=text] {
  width: 100%; min-height: 2.75rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 0.6rem 0.8rem; font: 400 1rem / 1.4 var(--font-ui); background: var(--surface); color: var(--text);
}
.modal-busca-caixa > input[type=text]:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.busca-agente-lista { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.busca-agente-item { padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 0.9rem; }
.busca-agente-item:hover { background: var(--surface-sunken); }
.busca-agente-lista li.hint { color: var(--text-faint); font-size: 0.82rem; padding: 0.7rem 0.6rem; cursor: default; }
.busca-setor-input {
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 0.65rem 0.8rem;
  font-size: 0.95rem; background: var(--surface); color: var(--text); font-family: var(--font-ui);
}
.busca-setor-input:focus { outline: none; border-color: var(--brand); background: var(--surface); }