/* ================================================================
   app-cuenta.css — Módulo Mi Cuenta
   ================================================================ */

.cta-card { padding: 24px; margin-bottom: 16px; }
.cta-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.cta-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.cta-field { flex: 1; min-width: 180px; }
.cta-field-2 { flex: 2; }
.cta-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.cta-email-row {
  display: flex;
  gap: 6px;
}
.cta-email-row .form-control { flex: 1; }
.cta-email-row .btn { flex-shrink: 0; padding: 8px 12px; }

.cta-row-info {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--bg-main);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.cta-prefs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.cta-toggle-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-main);
  border-radius: var(--radius-sm);
}
.cta-toggle-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-main);
}

/* Reuse saved style from configuracion */
#cuenta-guardar-btn.saved {
  background: #10B981 !important;
  border-color: #10B981 !important;
}

.cta-2fa-disabled {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-main);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
}

@media (max-width: 600px) {
  .cta-row { flex-direction: column; gap: 10px; }
  .cta-prefs-grid { grid-template-columns: 1fr; }
}