/* Frente C (melhorias 3): o número da clínica e a Plataforma. Usa as variáveis de cor de estilo.css. */
.area-codigo { margin: 8px 0; display: grid; gap: 8px; justify-items: center; text-align: center; }
.codigo-pareamento {
  font-family: var(--mono);
  font-size: 28px;
  letter-spacing: 0.18em;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--raio);
  background: var(--surface);
  color: var(--text);
  user-select: all;
}
.numero-bloco { display: grid; gap: 10px; }
.numero-bloco textarea { width: 100%; font: inherit; }
.form-status { display: grid; gap: 8px; }
.form-status textarea { width: 100%; font: inherit; }
.cores-status { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.cor-status { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.amostra-cor { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); }
.cor-status input:checked + .amostra-cor { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.cor-status input:focus-visible + .amostra-cor { outline: 2px solid var(--brand); outline-offset: 2px; }
tr.sem-negocio td { background: var(--warn-fundo); }
.prontidao { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; }
.prontidao .falta { color: var(--danger); }
.prontidao .opcional { color: var(--text); opacity: 0.8; }
.dialogo-passos { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.passo-corpo { display: grid; gap: 10px; }
.passo-corpo .tabela { width: 100%; }
@media (max-width: 640px) {
  .codigo-pareamento { font-size: 22px; letter-spacing: 0.12em; }
  .dialogo-passos .form-linha { flex-direction: column; align-items: stretch; }
}