/**
 * Componentes compartidos — Landing
 * @version 1.0.0
 */

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--transition); text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--outline { background: transparent; border: 1.5px solid var(--color-primary); color: var(--color-primary); }
.btn--outline:hover { background: var(--color-secondary); }
.btn--lg { padding: 14px 28px; font-size: 16px; }
.btn--block { width: 100%; }

.form { display: flex; flex-direction: column; gap: 16px; }
.form__group { display: flex; flex-direction: column; gap: 4px; }
.form__group--error .form__input { border-color: var(--color-danger); }
.form__label { font-size: 13px; font-weight: 600; }
.form__input, .form__select { padding: 10px 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius); font-size: 14px; width: 100%; background: #fff; }
.form__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(27,94,32,0.1); }
.form__error { font-size: 12px; color: var(--color-danger); }
.form__hint { font-size: 12px; color: var(--color-text-muted); }
.form__checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.form__checkbox input { width: 16px; height: 16px; accent-color: var(--color-primary); }

.card { background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow); }

.flash { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: var(--radius); margin: 16px auto; max-width: 600px; font-size: 14px; }
.flash--success { background: #E8F5E9; color: var(--color-success); border-left: 4px solid var(--color-success); }
.flash--error { background: #FFEBEE; color: var(--color-danger); border-left: 4px solid var(--color-danger); }
.flash--info { background: #E3F2FD; color: #1565C0; border-left: 4px solid #1565C0; }

.success-card__icon { font-size: 48px; margin-bottom: 16px; }
.success-card__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }