/* ==========================================
   ESTILOS DE CARDS & FORMULÁRIOS
========================================= */
.card { background-color: var(--card-bg-principal); padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); margin-bottom: 25px; border: 1px solid var(--cor-borda); transition: all 0.4s ease; }
.card-destaque { background-color: var(--card-bg-destaque); border-left: 5px solid var(--botao-bg); }
.card h2 { margin-bottom: 10px; color: var(--texto-primario); font-size: 1.5em; transition: font-size 0.4s ease; }

form { display: flex; flex-direction: column; gap: 20px; margin-top: 15px; }
.form-group { display: flex; flex-direction: column; }
.form-group-row { display: flex; gap: 15px; width: 100%; flex-wrap: wrap; }
.form-group-row .form-group { flex: 1; min-width: 120px; }

label { font-weight: 600; margin-bottom: 6px; color: var(--texto-primario); font-size: 1em; transition: all 0.4s ease; }
input, select { width: 100%; padding: 15px; border: 2px solid var(--cor-borda); border-radius: 6px; font-size: 16px; background-color: var(--input-bg); color: var(--texto-primario); transition: all 0.4s ease; }
input:focus, select:focus { outline: none; border-color: var(--botao-bg); box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2); background-color: var(--card-bg-principal); }

#btn-calcular { padding: 18px; background-color: var(--botao-bg); color: #FFF; border: none; border-radius: 6px; font-size: 18px; font-weight: bold; cursor: pointer; transition: all 0.4s ease; margin-top: 10px; width: 100%; }
#btn-calcular:hover { background-color: var(--botao-hover); }
#btn-calcular:active { transform: translateY(2px); }

/* ==========================================
   MÁGICA DO FORMULÁRIO ENCOLHENDO
========================================= */
.container-grid.calculado .card { padding: 15px; margin-bottom: 15px; }
.container-grid.calculado .card h2 { font-size: 1.1em; margin-bottom: 5px; }
.container-grid.calculado form { gap: 12px; }
.container-grid.calculado label { font-size: 0.85em; margin-bottom: 3px; }
.container-grid.calculado input, .container-grid.calculado select { padding: 8px 10px; font-size: 13px; border-width: 1px; }
.container-grid.calculado #btn-calcular { padding: 12px; font-size: 15px; }

@media (max-width: 768px) {
    .form-group-row { flex-direction: column; gap: 15px; }
    .form-group-row .form-group { min-width: 100%; }
}