/* ===== LAYOUT PRINCIPAL ===== */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.profile-section {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}

.profile-image {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* ===== GRID SYSTEM ===== */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

.software-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.data-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.data-row {
  display: flex;
  gap: 10px;
}

/* ===== FLEX UTILITIES ===== */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-sm {
  gap: 8px;
}

.gap-md {
  gap: 16px;
}

.gap-lg {
  gap: 24px;
}

/* ===== CONTAINERS ===== */
.container {
  width: 100%;
  padding: 20px;
}

.container-sm {
  max-width: 800px;
  margin: 0 auto;
}

.container-md {
  max-width: 1000px;
  margin: 0 auto;
}

.container-lg {
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== SPACING ===== */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 2rem; }

.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 2rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }

/* ===== WIDTH & HEIGHT ===== */
.w-full { width: 100%; }
.h-full { height: 100%; }

.min-h-screen {
  min-height: 100vh;
}

.max-w-full {
  max-width: 100%;
}