/* ==========================================================================
   FORMULÁRIOS
   Seções, campos, estados de validação, dados somente leitura
   ========================================================================== */

/* ─────────────────────────────────────────
   CAMPOS SOMENTE LEITURA
───────────────────────────────────────── */

.input.is-static,
.input[readonly],
.textarea[readonly] {
  background-color: var(--bg-body);
  border-color: transparent;
  color: var(--text-secondary);
  cursor: default;
  box-shadow: none;
}

/* ─────────────────────────────────────────
   SEÇÕES DE FORMULÁRIO
───────────────────────────────────────── */

.form-section {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.form-section + .form-section {
  margin-top: var(--spacing-lg);
}

.form-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* ─────────────────────────────────────────
   DADOS SOMENTE VISUALIZAÇÃO
   info-label / info-value usados em páginas
   de detalhe e formulários bloqueados
───────────────────────────────────────── */

.info-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.info-value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* ─────────────────────────────────────────
   ÁREA DE TEXTO — HISTÓRICO
   Aplicada via macro textarea_field(readonly=True)
───────────────────────────────────────── */

.textarea.is-history {
  background-color: var(--bg-body);
  border-color: var(--border-color);
  color: var(--text-secondary);
  cursor: default;
  resize: none;
  min-height: 120px;
}

/* ─────────────────────────────────────────
   CAMPO READONLY — modificar_notificacao
   Campos já salvos que não podem ser alterados
───────────────────────────────────────── */

.campo-readonly {
  background-color: var(--bg-body) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary);
  cursor: not-allowed;
}

/* ─────────────────────────────────────────
   ESTADOS DE VALIDAÇÃO
───────────────────────────────────────── */

.field .help {
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
}

.field .help.is-danger {
  color: var(--color-danger);
}
.field .help.is-success {
  color: var(--color-success);
}

/* ─────────────────────────────────────────
   VIOLÊNCIAS — blocos de ocorrência
───────────────────────────────────────── */

.violencia-bloco {
  transition:
    opacity var(--transition-speed) ease,
    transform var(--transition-speed) ease;
}

.violencia-bloco.oculto {
  display: none;
}

.violencia-divider {
  border: none;
  border-top: 2px dashed var(--border-color);
  margin: var(--spacing-md) 0;
}

/* ─────────────────────────────────────────
   ORIENTAÇÕES DE PREENCHIMENTO
───────────────────────────────────────── */

.orientacoes-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-info);
  background-color: rgba(62, 142, 208, 0.08);
  border: 1px solid rgba(62, 142, 208, 0.2);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  transition:
    background-color var(--transition-speed) ease,
    border-color var(--transition-speed) ease;
  cursor: pointer;
  list-style: none;
}

.orientacoes-summary:hover {
  background-color: rgba(62, 142, 208, 0.15);
  border-color: rgba(62, 142, 208, 0.4);
}

/* ─────────────────────────────────────────
   BUSCA — input estilizado
───────────────────────────────────────── */

.busca-input {
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  box-shadow: none;
  transition:
    border-color var(--transition-speed) ease,
    background-color var(--transition-speed) ease;
}

.busca-input:focus {
  border-color: var(--color-link);
  background-color: var(--bg-body);
}

/* ─────────────────────────────────────────
   RESPONSIVIDADE
───────────────────────────────────────── */

@media (max-width: 768px) {
  .form-section {
    padding: var(--spacing-md);
  }

  .form-section-title {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .form-section {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
  }
}