/* =====================================================================
   Formulários — gerados pelo FormularioBuilder (app/form_builders)
   e pelas partials em componentes/formulario
   ===================================================================== */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-3-5) var(--espaco-4); }
.form-grid .inteiro { grid-column: 1 / -1; }
@media (max-width: 520px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

.campo { display: flex; flex-direction: column; gap: var(--espaco-1-5); min-width: 0; }
.campo > label, .campo-rotulo { font-size: var(--tamanho-sm); font-weight: var(--peso-semibold); color: var(--texto-2); }
.campo .opcional { font-weight: var(--peso-regular); color: var(--texto-3); }
.campo-ajuda { font-size: var(--tamanho-xs); color: var(--texto-3); }
.campo-erro { font-size: 12.5px; color: var(--despesa-texto); font-weight: var(--peso-medio); display: flex; gap: var(--espaco-1); align-items: flex-start; }
.campo-erro::before { content: "⚠"; font-size: var(--tamanho-xs); line-height: var(--altura-linha); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--altura-input);
  padding: 9px var(--espaco-3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--tamanho-base);
  transition: border-color var(--transicao), box-shadow var(--transicao);
  appearance: none;
  -webkit-appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--texto-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--texto-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primaria);
  box-shadow: 0 0 0 3px var(--primaria-suave);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--despesa); }
.input:disabled, .select:disabled { background: var(--superficie-2); color: var(--texto-3); }
.input[readonly] { background: var(--superficie-2); }
.textarea { min-height: 80px; resize: vertical; }
.select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
}
.input-moeda { font-variant-numeric: tabular-nums; font-weight: var(--peso-semibold); }
.input-codigo { text-transform: uppercase; letter-spacing: 0.3em; font-weight: var(--peso-semibold); font-variant-numeric: tabular-nums; }
input[type="date"].input { min-height: var(--altura-input); }

.input-com-icone { position: relative; }
.input-com-icone .icone { position: absolute; left: var(--espaco-3); top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.input-com-icone .input { padding-left: var(--espaco-10); }
.input-com-botao { position: relative; }
.input-com-botao .input { padding-right: var(--espaco-12); }
.input-com-botao .btn-icone { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }

.checkbox { display: inline-flex; align-items: center; gap: var(--espaco-2-5); cursor: pointer; font-size: var(--tamanho-md); color: var(--texto-2); }
.checkbox input { width: 18px; height: 18px; accent-color: var(--primaria); cursor: pointer; margin: 0; }

/* interruptor */
.switch { display: inline-flex; align-items: center; gap: var(--espaco-2-5); cursor: pointer; font-size: var(--tamanho-md); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-trilho { width: 40px; height: 24px; border-radius: 999px; background: var(--borda-forte); position: relative; transition: background-color var(--transicao); flex: none; }
.switch-trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--transicao); }
.switch input:checked + .switch-trilho { background: var(--primaria); }
.switch input:checked + .switch-trilho::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-trilho { outline: 2px solid var(--foco); outline-offset: 2px; }

/* controle segmentado (radio) */
.segmentado {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--superficie-3); border-radius: var(--raio-sm); padding: 3px; gap: 3px;
  max-width: 100%;
}
.segmentado label { position: relative; }
.segmentado input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmentado span {
  display: flex; align-items: center; justify-content: center; gap: var(--espaco-1-5);
  min-height: 34px; padding: var(--espaco-1-5) var(--espaco-3-5); border-radius: 8px;
  font-size: var(--tamanho-md); font-weight: var(--peso-semibold); color: var(--texto-2);
  transition: background-color var(--transicao), color var(--transicao), box-shadow var(--transicao);
  white-space: nowrap;
}
.segmentado input:checked + span { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }
.segmentado input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 1px; }
.segmentado.bloco { display: grid; width: 100%; }
.segmentado input[value="despesa"]:checked + span, .segmentado input[value="pagar"]:checked + span { color: var(--despesa-texto); }
.segmentado input[value="receita"]:checked + span, .segmentado input[value="receber"]:checked + span { color: var(--receita-texto); }
.segmentado + .campo-erro { margin-top: var(--espaco-1-5); }

/* seletores de cor e de ícone (partials componentes/formulario/_seletor_cor e _seletor_emoji) */
input[type="color"] { width: 42px; height: 42px; padding: 3px; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); background: var(--superficie); cursor: pointer; }
.amostras { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }
.amostra { width: 30px; height: 30px; border-radius: 50%; background: var(--cor); border: 2px solid var(--superficie); box-shadow: 0 0 0 1px var(--borda-forte); transition: transform var(--transicao), box-shadow var(--transicao); }
.amostra:hover { transform: scale(1.1); }
.amostra[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--texto); }
.emoji-atual { display: flex; gap: var(--espaco-2-5); align-items: center; }
.emoji-atual .input { width: 76px; text-align: center; font-size: 20px; padding: var(--espaco-1-5); }
.grade-emoji { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: var(--espaco-1); max-height: 132px; overflow-y: auto; padding: var(--espaco-1); border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie-2); }
.grade-emoji button { font-size: 20px; height: 38px; border-radius: 8px; }
.grade-emoji button:hover { background: var(--superficie-3); }
.grade-emoji button[aria-pressed="true"] { background: var(--primaria-suave); box-shadow: inset 0 0 0 2px var(--primaria); }

/* opções em cartão (partial componentes/_escolha: "Só esta ocorrência", "Esta e as próximas"...) */
.opcoes-cartao { display: grid; gap: var(--espaco-2-5); }
.opcao-cartao { position: relative; display: flex; gap: var(--espaco-3); align-items: flex-start; padding: var(--espaco-3-5); border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); cursor: pointer; transition: border-color var(--transicao), background-color var(--transicao); text-align: left; width: 100%; }
.opcao-cartao:hover { border-color: var(--texto-3); }
.opcao-cartao input { margin: 3px 0 0; accent-color: var(--primaria); width: 18px; height: 18px; flex: none; }
.opcao-cartao:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); }
.opcao-cartao strong { display: block; font-size: var(--tamanho-md); }
.opcao-cartao small { display: block; color: var(--texto-2); font-size: var(--tamanho-sm); margin-top: var(--espaco-0-5); }
button.opcao-cartao:hover { background: var(--superficie-2); }
/* Rails: opção que abre outro modal é um link; mantém a aparência do botão do mockup */
a.opcao-cartao { color: inherit; }
a.opcao-cartao:hover { background: var(--superficie-2); text-decoration: none; }