/* ============================================================
   QAD Calidad — Perfil de usuario
   ============================================================ */

.profile-header { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem; border-bottom: 1px solid var(--color-border-row); }
.profile-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); margin-bottom: 1.5rem; }
.profile-tab {
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.profile-tab:hover { color: var(--color-text); }
.profile-tab.active { color: var(--color-accent); border-bottom-color: var(--color-copper); }

.trusted-devices { padding: 1.5rem 0; border-bottom: 1px solid var(--color-border-row); }
.trusted-devices-heading { margin-bottom: 1rem; }
.trusted-device-list { list-style: none; padding: 0; margin: 0; }
.trusted-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border-row);
  border-radius: var(--radius-md);
}
.trusted-device + .trusted-device { margin-top: 0.75rem; }
.trusted-device-details { min-width: 0; }
.trusted-device-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.trusted-device-current {
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-md);
  background: var(--color-copper-soft-bg);
  color: var(--color-accent);
  font-size: 0.75rem;
}
.trusted-device-dates { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.75rem 0 0; font-size: 0.75rem; }
.trusted-device-dates dt { color: var(--color-text-muted); }
.trusted-device-dates dd { margin: 0.2rem 0 0; color: var(--color-text); }
.trusted-devices-empty { padding: 1rem; border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: 0.875rem; }
@media (max-width: 480px) {
  .trusted-device { align-items: stretch; }
  .trusted-device form, .trusted-device button { width: 100%; }
}