/* Girl's Boutique — Account pages (login / register / OTP) + profile
   Ported from the Financial_Tracker Auth.tsx pattern (single screen, switched
   views) into plain CSS with Pink Flush tokens. Also styles perfil.html. */

.account {
  min-height: calc(100vh - 64px);
  display: grid;
  place-items: center;
  padding: var(--space-7) var(--edge-gap);
}

.account__col {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
}

.account__brand {
  text-align: center;
}
.account__wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  color: var(--c-ink);
  line-height: 1;
}
.account__wordmark span { color: var(--c-pink); }
.account__subtitle {
  margin-top: var(--space-2);
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
}

/* ---- Card ---- */
.account__card {
  width: 100%;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.account__view { display: none; flex-direction: column; gap: var(--space-4); }
.account__view.is-active { display: flex; }

/* ---- Fields ---- */
.acc-field { display: flex; flex-direction: column; }
.acc-label {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--c-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.acc-input,
.acc-select {
  width: 100%;
  min-height: 46px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-4);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.acc-input:focus,
.acc-select:focus {
  outline: none;
  border-color: var(--c-pink);
  box-shadow: 0 0 0 3px var(--c-blush);
}
.acc-input::placeholder { color: var(--c-ink-soft); }

.acc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.acc-hint {
  font-size: var(--fs-xs);
  color: var(--c-ink-soft);
  margin-top: 4px;
  text-align: right;
  font-style: italic;
  opacity: 0.5;
}
.acc-error {
  font-size: var(--fs-xs);
  color: var(--c-danger);
  margin-top: 4px;
}

/* ---- Primary account button (light card → ink outline) ---- */
.acc-btn {
  width: 100%;
  min-height: 48px;
  background: var(--c-pink);
  border: 2px solid var(--c-pink);
  border-radius: var(--radius-md);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-weight: var(--fw-black);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: var(--transition);
}
.acc-btn:hover { opacity: 0.85; }
.acc-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.acc-switch {
  background: none;
  border: none;
  color: var(--c-ink-soft);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-align: center;
}
.acc-switch span {
  color: var(--c-pink);
  font-weight: var(--fw-bold);
  margin-left: 5px;
}

/* ---- OTP boxes ---- */
.otp-row {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}
.otp-box {
  width: 46px;
  height: 54px;
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-white);
  color: var(--c-ink);
}
.otp-box:focus {
  outline: none;
  border-color: var(--c-pink);
  box-shadow: 0 0 0 3px var(--c-blush);
}
.otp-box::placeholder { color: var(--c-line); }

.otp-status { font-size: var(--fs-sm); color: var(--c-ink-soft); text-align: center; }
.otp-status.is-expired { color: var(--c-danger); }

.otp-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
}
.otp-links button {
  background: none; border: none; padding: 0;
  color: var(--c-ink-soft); cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-sm);
}
.otp-links button:hover:not(:disabled) { color: var(--c-pink); }
.otp-links button:disabled { color: var(--c-line); cursor: default; }

/* ============ Profile ============ */
.profile {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--space-7) var(--space-9);
}
.profile__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.profile__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-pink);
  color: var(--c-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-xl);
}
.profile__name { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-xl); }
.profile__email { color: var(--c-ink-soft); font-size: var(--fs-sm); }

.profile__card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.profile__card h2 {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-soft);
  margin-bottom: var(--space-4);
}
.profile__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}
.profile__field .k {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-ink-soft);
  margin-bottom: 2px;
}
.profile__field .v { font-weight: var(--fw-bold); }

.profile__wishlist-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* fase 6a: "Cerrar sesión" sits directly on the pink canvas (outside the white
   cards), so the default pink .btn--outline vanished against the pink backdrop.
   Light pill instead: white fill + ink text + blush border, inverting to ink on
   hover. Scoped to .profile so 404/admin .btn--outline keep their own treatment. */
.profile .btn--outline {
  background: var(--c-blush-soft);
  border-color: var(--c-line);
  color: var(--c-ink);
}
.profile .btn--outline:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-white);
}

.pf-wishlist-count { color: var(--c-ink-soft); font-size: var(--fs-sm); margin-bottom: var(--space-4); }

.pf-wishlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-4);
}
.pf-wl-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.pf-wl-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--c-blush-soft);
}
.pf-wl-item:hover { color: var(--c-pink); }
.pf-wl-item:hover img { opacity: 0.92; }

@media (max-width: 420px) {
  .acc-row { grid-template-columns: 1fr; }
  .otp-box { width: 40px; height: 50px; }
}