/* ============================================================
   SIMPLIFICADO.CSS
   Sobras específicas do front simplificado. O grosso do visual
   vem de main.css / components.css / dashboard.css / css/app.css
   (os mesmos do front principal).
   ============================================================ */

/* Sem barra lateral: a seta de voltar precisa aparecer também no
   celular (o components.css a esconde <=768px por causa do menu
   hambúrguer do front principal, que aqui não existe). */
@media (max-width: 768px){
  .topbar-left .topbar-back{ display: inline-flex; }
}

/* Qualquer filho .span-2 dentro do form-grid ocupa a linha toda
   (o components.css só cobre .form-field.span-2). */
.form-grid > .span-2{
  grid-column: 1 / -1;
}

/* O Safari/iOS dá zoom automático ao focar um campo com fonte < 16px.
   Nos formulários de cadastro (usados no celular) força 16px nos campos
   quando a tela é pequena, o que impede o zoom sem desativar o pinch. */
@media (max-width: 768px){
  .form-field input,
  .form-field select,
  .form-field textarea,
  .combo-busca{
    font-size: 16px;
  }
}

#form-pc .btn-primary{
  justify-self: start;
  padding: 11px 22px;
  font-size: 15px;
  margin-top: 4px;
}

.campo-erro{
  color: var(--danger);
  font-size: 12px;
}

/* .form-field usa display:flex, que vence o [hidden] do navegador.
   Usado no campo de telefone que só aparece p/ cliente sem número. */
.form-field[hidden]{ display: none; }

/* ---------- Campos de foto do computador ---------- */
/* As 4 fotos: uma coluna no celular, duas em telas maiores. */
.fotos-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px){
  .fotos-grid{ grid-template-columns: 1fr 1fr; }
}

.foto-campo{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.foto-area{
  position: relative;
  width: 100%;
  max-width: 420px;
  align-self: center;
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

.foto-area img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* o main.css tem `img{ display:block }`, que vence o [hidden] do
   navegador — sem isto a prévia continua na tela depois do envio. */
.foto-area img[hidden]{ display: none; }

.foto-campo input[type="file"]{ display: none; }