/* ============ Login / Registro / Mi cuenta (JUVAD) ============ */
:root {
  --color-black: #0e0e0e;
  --color-white: #ffffff;
  --color-gray-light: #f5f5f5;
  --color-gray-border: #e5e5e5;
}

/* ---------- Login / Registro ---------- */
.auth-page {
  min-height: calc(100vh - 120px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 20px 90px;
}
.auth-card {
  width: 100%; max-width: 480px;
  border: 1px solid var(--color-black);
  padding: 44px 46px 36px;
  text-align: center;
  background: #fff;
}
.auth-card--wide { max-width: 660px; }
.auth-card__logo { height: 34px; width: auto; margin: 0 auto 22px; display: block; }
.auth-card__title { font-size: 1rem; letter-spacing: .22em; margin-bottom: 16px; font-weight: 700; }
.auth-card__text { font-size: .68rem; letter-spacing: .06em; line-height: 1.8; color: #555; margin-bottom: 30px; }
.auth-card__divider { border-top: 1px solid var(--color-gray-border); margin: 26px 0; position: relative; }
.auth-card__divider span {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: #fff; padding: 0 12px; font-size: .66rem; color: #999;
}
.auth-card__footer { font-size: .68rem; margin-top: 20px; }
.auth-card__link { border-bottom: 1px solid currentColor; }
.auth-card__secure { font-size: .62rem; color: #888; margin-top: 16px; }
.auth-card__error { background: #fdecea; color: #b00020; font-size: .72rem; padding: 10px; margin-bottom: 16px; }

.auth-form { text-align: left; }
.auth-form__label { display: block; font-size: .66rem; letter-spacing: .08em; margin: 16px 0 6px; }
.auth-form__input {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--color-gray-border);
  font-family: inherit; font-size: .8rem;
  box-sizing: border-box;
}
.auth-form__input:focus { border-color: var(--color-black); outline: none; }
.auth-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.auth-form__check {
  display: flex; align-items: center; gap: 10px;
  font-size: .68rem; margin: 16px 0 0;
}
.auth-form__check input { width: 18px; height: 18px; accent-color: #0e0e0e; }
.auth-form__row { margin-top: 30px; }

.btn-main {
  background: var(--color-black); color: #fff;
  font-size: .72rem; letter-spacing: .14em;
  padding: 14px 30px; transition: opacity .2s;
  border: none; cursor: pointer; font-family: inherit;
  text-decoration: none; display: inline-block;
}
.btn-main:hover { opacity: .82; }
.btn-main--full { width: 100%; box-sizing: border-box; text-align: center; }

.btn-outline {
  width: 100%; background: #fff; color: var(--color-black);
  border: 1px solid var(--color-black);
  font-size: .68rem; letter-spacing: .14em;
  padding: 14px; font-family: inherit; cursor: pointer;
  transition: all .2s; box-sizing: border-box;
}
.btn-outline:hover { background: var(--color-black); color: #fff; }

/* ---------- Mi cuenta ---------- */
.account {
  max-width: 1200px; margin: 0 auto;
  padding: 40px 40px 80px;
  display: grid; grid-template-columns: 240px 1fr; gap: 50px;
}
.account__side-title { font-size: .95rem; letter-spacing: .18em; margin-bottom: 22px; }
.account__nav { display: flex; flex-direction: column; gap: 16px; }
.account__nav a { font-size: .8rem; letter-spacing: .1em; width: fit-content; text-decoration: none; color: inherit; }
.account__nav a:hover { border-bottom: 1px solid currentColor; }
.account__navlink--active { border-bottom: 1px solid currentColor; }
.account__hello { font-size: 1rem; letter-spacing: .14em; }
.account__welcome { font-size: .72rem; color: #777; margin: 4px 0 28px; }
.account__panel-head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--color-gray-border);
  padding-bottom: 14px; margin-bottom: 22px;
}
.account__panel-head h3 { font-size: .78rem; letter-spacing: .16em; }
.account__data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; max-width: 720px; }
.account__data-grid span { font-size: .64rem; letter-spacing: .1em; color: #888; }
.account__data-grid p { font-size: .82rem; margin: 4px 0 0; }
.account__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; margin-bottom: 24px; }
.account__form label { display: block; font-size: .66rem; letter-spacing: .08em; margin-bottom: 6px; }
.account__form input, .account__form textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--color-gray-border);
  font-family: inherit; font-size: .8rem; box-sizing: border-box;
}
.account__form input:focus, .account__form textarea:focus { border-color: var(--color-black); outline: none; }
.account__address {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border: 1px solid var(--color-gray-border); padding: 14px 18px; margin-bottom: 10px;
  font-size: .8rem;
}
.account__msg { font-size: .74rem; padding: 10px 14px; margin-bottom: 16px; }
.account__msg--ok { background: #d4edda; color: #155724; }
.account__msg--err { background: #fdecea; color: #b00020; }
.account__empty { font-size: .8rem; color: #666; }

.badge { font-size: .62rem; letter-spacing: .08em; padding: 4px 10px; border-radius: 2px; text-transform: uppercase; }
.badge--pendiente { background: #fff3cd; color: #856404; }
.badge--pagado { background: #cce5ff; color: #004085; }
.badge--enviado { background: #d4edda; color: #155724; }
.badge--entregado { background: #c3e6cb; color: #0f5132; }
.badge--cancelado { background: #f8d7da; color: #842029; }

.fav-heart { font-size: .95rem; margin-left: 8px; color: #bbb; text-decoration: none; }
.fav-heart--on { color: #b00020; }

@media (max-width: 768px) {
  .auth-card { padding: 32px 22px; }
  .auth-form__grid { grid-template-columns: 1fr; }
  .account { grid-template-columns: 1fr; padding: 28px 20px 60px; gap: 26px; }
  .account__nav { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .account__data-grid, .account__form-grid { grid-template-columns: 1fr; }
}

.auth-form__forgotrow { display: flex; justify-content: flex-end; width: 100%; margin: 10px 0 4px; text-align: right; }
.auth-form__forgot { font-size: .64rem; letter-spacing: .04em; border-bottom: 1px solid currentColor; color: #555; }
.auth-form__forgot:hover { color: #0e0e0e; }
.auth-form__row { margin-top: 30px; }
.auth-card__success { background: #d4edda; color: #155724; font-size: .74rem; padding: 12px 14px; margin-bottom: 18px; line-height: 1.6; }

.auth-form .btn-main--full { margin-top: 28px; }
.auth-form__check + .btn-main--full { margin-top: 30px; }