/* Personal Center - Layout-only styles for Perfil/Progreso (Fase 9 Parte 2)

   No new component factories live here - every visual building block
   (Card, Badge, StatCard, Avatar, Progress, etc.) comes from
   js/components/*.js (Fase 8). These rules only arrange them: grids,
   spacing, and the two small custom visualizations the Design System
   doesn't have a component for yet (the weekly activity bars and the
   monthly calendar grid) - both consume tokens exclusively, no raw
   colors/shadows/radii/durations. */

/* ============ Identity (Perfil) ============ */
.profile-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.profile-identity__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.profile-identity__levels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.profile-identity__level-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-right: var(--space-1);
}

/* ============ Settings (Perfil) ============ */
.settings-field {
  min-width: 0;
}

.settings-field label {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.settings-field select {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
}

.settings-field--toggle label {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}

.settings-toggle__control {
  gap: var(--space-3);
  margin-bottom: 0;
}

.settings-field--toggle input {
  flex: 0 0 auto;
}

.settings-field__hint {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  overflow-wrap: break-word;
  word-break: normal;
}

.profile-identity .btn {
  min-height: 44px;
}

.settings-page .btn {
  min-height: 44px;
}

/* ============ Dedicated Settings / profile management ============ */
.settings-page .card {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
}

.settings-page .card-body {
  margin: 0;
}

.settings-page .form-group {
  margin-bottom: 0;
}

.settings-stack,
.profile-management {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.settings-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}

.settings-identity > .avatar-lg {
  width: 96px;
  height: 96px;
}

.settings-identity__copy {
  min-width: 0;
}

.settings-identity__name,
.settings-identity__hint {
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

.settings-identity__name {
  display: block;
  font-size: var(--font-size-lg);
}

.settings-identity .btn {
  grid-column: 1 / -1;
  width: 100%;
}

.settings-data-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.settings-data-group + .settings-data-group {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.settings-data-group--danger {
  margin-top: var(--space-2);
}

.settings-data-group__title {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--type-overline-letter-spacing);
}

.profile-management__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

.profile-management__identity {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-management__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.profile-management__actions .btn {
  flex: 1 1 96px;
  min-height: 44px;
}

.settings-app-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.settings-app-info > div {
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
  gap: var(--space-3);
}

.settings-app-info dt {
  color: var(--color-text-secondary);
}

.settings-app-info dd {
  margin: 0;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.settings-import-control {
  min-width: 0;
}

.settings-import-control > label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.settings-import-preview,
.settings-import-preview__profiles,
.settings-import-warning {
  min-width: 0;
  overflow-wrap: anywhere;
}

.settings-import-preview__profiles,
.settings-import-warning ul {
  padding-left: var(--space-5);
}

.settings-import-warning {
  border-left: 4px solid var(--color-warning);
  padding: var(--space-3);
  background: var(--color-warning-bg-soft);
}

.settings-import-preview__impact,
.settings-import-preview__confirmation {
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 359px) {
  .settings-identity {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .settings-identity__copy,
  .settings-identity__action {
    width: 100%;
  }
}

@media (min-width: 48rem) {
  .settings-page .card {
    padding: var(--space-6);
  }

  .settings-identity {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .settings-identity > .avatar-lg {
    width: 104px;
    height: 104px;
  }

  .settings-identity .btn {
    grid-column: auto;
    width: auto;
  }

  .profile-management__item {
    grid-template-columns: auto minmax(0, 1fr) minmax(150px, auto);
  }

  .profile-management__actions {
    grid-column: auto;
    justify-content: flex-end;
  }
}

/* ============ Location / active course row ============ */
.profile-location {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-location__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.profile-location__label {
  color: var(--color-text-secondary);
}

.profile-location__value {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  text-align: right;
}

/* ============ Recent activity feed ============ */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.activity-feed__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-bg-secondary);
}

.activity-feed__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.activity-feed__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
}

.activity-feed__body {
  flex: 1;
  min-width: 0;
}

.activity-feed__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.activity-feed__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin: var(--space-1) 0 0;
}

.activity-feed__value {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-xp);
}

/* ============ Weekly activity bars ============ */
.weekly-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  height: 96px;
  padding-top: var(--space-4);
}

.weekly-bars__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  height: 100%;
  justify-content: flex-end;
}

.weekly-bars__track {
  width: 100%;
  max-width: 28px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.weekly-bars__fill {
  width: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  min-height: 4px;
}

.weekly-bars__fill--today {
  background: var(--color-xp);
}

.weekly-bars__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ============ Monthly calendar grid ============ */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}

.calendar-grid__weekday {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-align: center;
  padding-bottom: var(--space-1);
}

.calendar-grid__cell {
  aspect-ratio: 1 / 1;
  min-height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
}

.calendar-grid__cell--placeholder {
  background: transparent;
}

.calendar-grid__cell--future {
  opacity: var(--opacity-disabled);
}

.calendar-grid__cell--today {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  font-weight: var(--font-weight-bold);
}

.calendar-grid__cell[data-intensity="1"] {
  background: var(--color-info-bg-soft);
  color: var(--color-text-primary);
}

.calendar-grid__cell[data-intensity="2"] {
  background: var(--color-success-bg-soft);
  color: var(--color-text-primary);
}

.calendar-grid__cell[data-intensity="3"] {
  background: var(--color-success);
  color: var(--color-text-light);
}

.calendar-grid__cell[data-intensity="4"] {
  background: var(--color-ocean-deep);
  color: var(--color-text-light);
  font-weight: var(--font-weight-bold);
}

/* ============ Small section utilities shared by Perfil/Progreso ============ */
.personal-section {
  margin-bottom: var(--space-8);
}

.personal-section__grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

/* 4 columns used to activate at 414px - real iPhone widths (390-430px)
   only gave each card ~86px, and after StatCard's own padding
   (--space-6, 24px each side) that left ~38px for content, so even with
   overflow-wrap on long single words like "Precisión"/"Próximamente"
   there was no room to fit more than one or two characters per line
   (measured real symptom: "Ciuda/des", "No/di/sp/o/ni/bl/e"). 2 columns
   is now the phone default all the way through the last mobile
   breakpoint (430px) - 4 columns only activate at 768px (tablet/desktop,
   the same tier #app already gets more room at), where each card has
   comfortable width regardless of content length. */
.personal-section__grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .personal-section__grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Grid items default to min-width: auto, so a column holding a card
   with a long unbreakable word (e.g. StatCard's "Precisión" label or
   its "No disponible" value, rendered at --font-size-4xl) forces that
   whole column track wider than its sibling - real example measured at
   390px: repeat(2, 1fr) resolving to 121px/224px instead of 173px/173px.
   min-width: 0 removes that automatic minimum so both fr tracks stay
   genuinely equal and long text wraps inside its own cell instead. */
.personal-section__grid-2 > *,
.personal-section__grid-4 > * {
  min-width: 0;
}

.collection-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}