
/* Páginas de cuenta de cliente: compensan navbar fijo y unifican la estética Bon Gon. */
.account-page {
  min-height: 68vh;
  padding: 7.25rem 1.25rem 3.5rem;
  background: #f7ead7;
}
.account-shell { width: min(920px, 100%); margin: 0 auto; }
.account-shell--narrow { width: min(760px, 100%); }
.account-card {
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(82,67,57,.10);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(54,42,33,.11);
  overflow: hidden;
}
.account-card__head {
  padding: 1.6rem 1.75rem 1.15rem;
  border-bottom: 1px solid #eee7df;
  background: linear-gradient(180deg, #fff 0%, #fbf8f4 100%);
}
.account-kicker { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: #947e6d; font-weight: 700; }
.account-title { margin-top: .25rem; font-family: Georgia, 'Times New Roman', serif; font-size: 1.8rem; line-height: 1.15; color: #4b352e; font-weight: 700; }
.account-subtitle { margin-top: .45rem; color: #82766e; font-size: .88rem; }
.account-card__body { padding: 1.5rem 1.75rem 1.75rem; }

.account-empty { text-align:center; padding: 2.6rem 1rem; color:#81756c; }
.account-empty svg { width:42px; height:42px; margin:0 auto .75rem; color:#b6a79b; }

.order-list { display:grid; gap:.9rem; }
.order-row {
  display:grid; grid-template-columns: 1fr auto; gap:1rem; align-items:center;
  padding:1rem 1.1rem; border:1px solid #e9e1da; border-radius:14px; background:#fff;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.order-row:hover { border-color:#d9cabd; box-shadow:0 8px 22px rgba(54,42,33,.08); transform:translateY(-1px); }
.order-row__number { font-weight:700; color:#3f342e; }
.order-row__meta { display:flex; flex-wrap:wrap; gap:.45rem 1rem; margin-top:.35rem; color:#7b7069; font-size:.78rem; }
.order-status { display:inline-flex; padding:.28rem .55rem; border-radius:999px; background:#eef3ff; color:#24449a; font-size:.7rem; font-weight:700; }
.order-row__action { color:#24449a; font-weight:700; font-size:.78rem; text-decoration:none; white-space:nowrap; }
.order-row__action:hover { text-decoration:underline; }

.profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.1rem; }
.profile-section { padding:1.2rem; border:1px solid #ece4dd; border-radius:16px; background:#fcfaf8; }
.profile-section--wide { grid-column:1 / -1; }
.profile-section__title { display:flex; align-items:center; gap:.55rem; font-weight:800; color:#4b352e; margin-bottom:1rem; font-size:.95rem; }
.profile-section__title svg { width:18px; height:18px; color:#24449a; }
.profile-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem 1rem; }
.profile-field--wide { grid-column:1 / -1; }
.profile-label { display:block; font-size:.72rem; font-weight:700; color:#6d625b; margin-bottom:.35rem; letter-spacing:.02em; }
.profile-field input, .profile-field textarea, .profile-field select,
.profile-section input, .profile-section textarea, .profile-section select {
  width:100%; border:1px solid #d9d1ca !important; border-radius:10px !important; background:#fff !important;
  padding:.66rem .75rem !important; font-size:.82rem !important; color:#3f3833 !important; outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.profile-section textarea { min-height:92px; resize:vertical; }
.profile-section input:focus, .profile-section textarea:focus, .profile-section select:focus { border-color:#24449a !important; box-shadow:0 0 0 3px rgba(36,68,154,.09); }
.profile-readonly { background:#f3f1ef !important; color:#817970 !important; cursor:not-allowed; }
.profile-help { margin-top:.3rem; font-size:.68rem; color:#91877f; }
.profile-error { margin-top:.3rem; font-size:.7rem; color:#b42318; }
.profile-actions { display:flex; justify-content:flex-end; gap:.75rem; padding-top:.25rem; }
.profile-save { border:0; border-radius:999px; background:#24449a; color:#fff; font-size:.78rem; font-weight:800; letter-spacing:.03em; padding:.72rem 1.45rem; box-shadow:0 8px 18px rgba(36,68,154,.18); cursor:pointer; }
.profile-save:hover { filter:brightness(1.06); }
.profile-password { display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem; color:#8c4a1b; text-decoration:none; }
.profile-password:hover { text-decoration:underline; }

@media (max-width: 767px) {
  .account-page { padding: 6.35rem .8rem 2.5rem; }
  .account-card__head, .account-card__body { padding-left:1rem; padding-right:1rem; }
  .profile-grid, .profile-fields { grid-template-columns:1fr; }
  .profile-section--wide, .profile-field--wide { grid-column:auto; }
  .order-row { grid-template-columns:1fr; }
  .order-row__action { justify-self:start; }
}


/* Cambio de contraseña dentro de Mi perfil */
.profile-password {
  border:0; background:transparent; padding:0; cursor:pointer; font-family:inherit;
}
.password-modal { position:fixed; inset:0; z-index:260; display:flex; align-items:center; justify-content:center; padding:1rem; }
.password-modal[hidden] { display:none; }
.password-modal__backdrop { position:absolute; inset:0; background:rgba(13,10,20,.66); backdrop-filter:blur(2px); }
.password-modal__card {
  position:relative; z-index:1; width:min(460px,100%); background:rgba(250,249,248,.98); border:1px solid rgba(82,67,57,.10);
  border-radius:22px; box-shadow:0 24px 65px rgba(25,18,14,.30); padding:1.65rem 1.7rem 1.5rem; color:#443a34;
}
.password-modal__close { position:absolute; top:.8rem; right:1rem; border:0; background:transparent; color:#988e87; font-size:1.65rem; line-height:1; cursor:pointer; }
.password-modal__close:hover { color:#4b352e; }
.password-modal__icon { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#edf2ff; color:#24449a; margin-bottom:.8rem; }
.password-modal__icon svg { width:22px; height:22px; }
.password-modal__title { margin:.2rem 0 .4rem; font-family:Georgia,'Times New Roman',serif; font-size:1.65rem; color:#4b352e; font-weight:700; }
.password-modal__subtitle { margin:0 0 1.15rem; color:#7d716a; font-size:.82rem; line-height:1.5; }
.password-modal__field { margin-bottom:.85rem; }
.password-modal__field label { display:block; margin-bottom:.35rem; font-size:.72rem; font-weight:800; color:#625750; }
.profile-password-input { width:100%; border:1px solid #d9d1ca; border-radius:11px; background:#fff; padding:.72rem .8rem; font-size:.84rem; color:#3f3833; outline:none; transition:.18s ease; }
.profile-password-input:focus { border-color:#24449a; box-shadow:0 0 0 3px rgba(36,68,154,.10); }
.profile-password-input.is-invalid { border-color:#c94b42; box-shadow:0 0 0 3px rgba(201,75,66,.08); }
.password-modal__error { min-height:.9rem; margin:.25rem 0 0; color:#b42318; font-size:.69rem; }
.password-modal__general-error { margin-bottom:.85rem; border:1px solid #f0b9b4; background:#fff1ef; color:#9f2d25; border-radius:10px; padding:.65rem .75rem; font-size:.75rem; }
.password-modal__success { margin-bottom:.85rem; border:1px solid #a9dfc8; background:#eefbf5; color:#176b4d; border-radius:10px; padding:.65rem .75rem; font-size:.75rem; }
.password-modal__actions { display:flex; justify-content:flex-end; gap:.65rem; margin-top:.35rem; }
.password-modal__cancel, .password-modal__save { border-radius:999px; padding:.7rem 1.1rem; font-size:.72rem; font-weight:800; cursor:pointer; }
.password-modal__cancel { border:1px solid #d8d0c9; background:#fff; color:#6e625b; }
.password-modal__save { border:0; background:#24449a; color:#fff; box-shadow:0 8px 18px rgba(36,68,154,.18); }
.password-modal__save:hover { filter:brightness(1.06); }
.password-modal__save:disabled { opacity:.6; cursor:wait; }
body.password-modal-open { overflow:hidden; }
@media (max-width:520px) {
  .password-modal__card { padding:1.35rem 1rem 1.1rem; border-radius:18px; }
  .password-modal__actions { flex-direction:column-reverse; }
  .password-modal__cancel, .password-modal__save { width:100%; }
}


/* Aislamiento visual defensivo del modal de contraseña */
.password-modal {
  box-sizing: border-box;
}
.password-modal *,
.password-modal *::before,
.password-modal *::after {
  box-sizing: border-box;
}
.password-modal__card {
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
.password-modal__card form {
  margin: 0;
}
.password-modal__card svg {
  display: block;
  max-width: 100%;
}


/* Recuperación de contraseña: misma identidad visual que los modales */
.reset-key-page {
  min-height: 72vh;
  padding: 7.2rem 1rem 4rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #f7ead7;
}
.reset-key-card {
  position: relative;
  width: min(520px, 100%);
  overflow: hidden;
  background: rgba(250,249,248,.98);
  border: 1px solid rgba(82,67,57,.10);
  border-radius: 24px;
  box-shadow: 0 22px 55px rgba(54,42,33,.14);
  padding: 1.65rem 2rem 1.9rem;
}
.reset-key-watermark {
  position: absolute; left: 50%; top: 53%; transform: translate(-50%,-50%);
  font-family: Georgia,'Times New Roman',serif; font-size: 6.5rem; font-weight: 700;
  color: rgba(70,70,70,.045); pointer-events: none; user-select: none;
}
.reset-key-logo { display:block; width:150px; max-height:64px; object-fit:contain; margin:0 auto 1rem; position:relative; z-index:1; }
.reset-key-content { position:relative; z-index:1; }
.reset-key-kicker { margin:0 0 .35rem; text-align:center; font-size:.66rem; letter-spacing:.18em; font-weight:800; color:#9a8778; }
.reset-key-title { margin:0; text-align:center; font-size:1.55rem; line-height:1.15; font-weight:800; color:#514940; }
.reset-key-text { width:min(400px,100%); margin:.75rem auto 1.3rem; text-align:center; color:#756b64; font-size:.86rem; line-height:1.5; }
.reset-key-form { width:min(430px,100%); margin:0 auto; }
.reset-key-field { margin-bottom:1rem; }
.reset-key-field label { display:block; margin:0 0 .4rem .15rem; font-family:Georgia,'Times New Roman',serif; font-size:.76rem; font-weight:800; color:#5c5148; }
.reset-key-field input {
  width:100%; height:46px; border:1px solid rgba(0,0,0,.05); border-radius:999px; background:#fff;
  padding:0 1.1rem; color:#514940; font-size:.9rem; outline:none; box-shadow:0 7px 17px rgba(0,0,0,.12);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.reset-key-field input:focus { border-color:#1f6097; box-shadow:0 0 0 3px rgba(31,96,151,.11),0 7px 17px rgba(0,0,0,.10); }
.reset-key-error { margin:.35rem .15rem 0; color:#b42318; font-size:.7rem; line-height:1.35; }
.reset-key-alert { margin:0 auto 1rem; width:min(430px,100%); padding:.7rem .8rem; border:1px solid rgba(180,35,24,.2); background:#fff1ef; border-radius:11px; color:#9f2d25; font-size:.75rem; }
.reset-key-btn {
  display:flex; align-items:center; justify-content:center; width:max-content; min-width:170px; height:42px;
  margin:1.2rem auto 0; padding:0 1.4rem; border:0; border-radius:999px; background:#24449a; color:#fff;
  font-size:.82rem; font-weight:800; text-decoration:none; cursor:pointer; box-shadow:0 8px 18px rgba(36,68,154,.21);
  transition:transform .16s ease, filter .16s ease;
}
.reset-key-btn:hover { transform:translateY(-1px); filter:brightness(1.06); }
.reset-key-back { display:block; margin:1rem auto 0; text-align:center; color:#665a52; font-size:.72rem; font-weight:700; text-decoration:underline; }
.reset-key-card--success { padding-bottom:2.15rem; }
@media (max-width:640px) {
  .reset-key-page { padding:6.4rem .8rem 2.5rem; }
  .reset-key-card { padding:1.35rem 1rem 1.55rem; border-radius:19px; }
  .reset-key-logo { width:135px; }
  .reset-key-title { font-size:1.35rem; }
  .reset-key-watermark { font-size:4.7rem; }
}


/* BonGon V10.1 · Historial de compras y seguimiento */
.v101-orders { background:linear-gradient(165deg,#faf6ef 0%,#f7ead7 100%); }
.v101-orders .account-shell { width:min(1080px,100%); }
.v101-orders-top,.v101-order-detail-head { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.v101-orders .account-title { font-size:clamp(1.9rem,4vw,2.55rem); margin:.35rem 0 0; }
.v101-orders-list { display:grid; grid-template-columns:1fr; gap:18px; }
.v101-order-card,.v101-detail-card { background:#fff; border:1px solid #e9e1d8; box-shadow:0 12px 32px rgba(53,39,25,.055); border-radius:20px; overflow:hidden; }
.v101-order-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:21px 24px 15px; border-bottom:1px solid #f1ebe5; }
.v101-order-identity h2 { font:700 1.3rem Georgia,'Times New Roman',serif; color:#46342d; margin:4px 0 0; overflow-wrap:anywhere; }
.v101-eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#80746e; }
.v101-status { border-radius:999px; display:inline-flex; align-items:center; font-size:.74rem; font-weight:800; line-height:1.3; padding:8px 12px; background:#eaf0ff; color:#25468e; }
.v101-status--entregado,.v101-status--pagado,.v101-status--enviado { background:#e8f7ee; color:#17603b; }
.v101-status--cancelado,.v101-status--pago_fallido { background:#fff0ed; color:#a12d28; }
.v101-status--pendiente,.v101-status--pendiente_pago { background:#fff7df; color:#885d0a; }
.v101-order-body { padding:18px 24px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; }
.v101-order-products { display:grid; gap:12px; min-width:0; }
.v101-order-product { display:flex; align-items:center; gap:13px; min-width:0; }
.v101-product-initial { width:46px; height:46px; min-width:46px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,#f5e6d1,#f1f2fa); color:#815e48; font:700 1.2rem Georgia,serif; }
.v101-order-product-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.v101-order-product-info strong { font-size:.89rem; color:#423630; line-height:1.4; overflow-wrap:anywhere; }
.v101-order-product-info span,.v101-muted,.v101-product-more { color:#7e736c; font-size:.78rem; line-height:1.55; }
.v101-product-more { font-weight:700; padding-left:4px; }
.v101-order-summary { display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right; }
.v101-order-summary span { font-size:.72rem; color:#81766c; }
.v101-order-summary strong { color:#344f86; font:700 1.4rem Georgia,serif; white-space:nowrap; }
.v101-order-summary small { font-size:.72rem; color:#8c8178; }
.v101-order-footer { border-top:1px solid #f0e9e1; background:#fcfaf7; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:16px 24px; }
.v101-order-progress-copy { color:#625952; font-size:.78rem; flex:1 1 240px; }
.v101-order-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.v101-link-button { display:inline-flex; align-items:center; justify-content:center; min-height:39px; padding:9px 15px; border-radius:999px; font-size:.75rem; line-height:1.2; font-weight:800; text-decoration:none; cursor:pointer; text-align:center; border:1px solid transparent; transition:background .15s ease,transform .15s ease; }
.v101-link-button:focus-visible,.v101-back-link:focus-visible { outline:3px solid #6389d5; outline-offset:2px; }
.v101-link-button--primary { background:#234385; color:#fff; }
.v101-link-button--primary:hover { background:#142f66; color:#fff; }
.v101-link-button--outline { border-color:#cfd8e8; color:#244482; background:#fff; }
.v101-link-button--outline:hover { background:#f0f5ff; }
.v101-orders-empty .account-empty { padding:3rem 1.25rem; }
.v101-orders-empty .account-empty h2 { color:#4b352e; font:700 1.5rem Georgia,serif; margin:10px 0; }
.v101-orders-empty .account-empty p { margin-bottom:17px; }
.v101-empty-icon { display:inline-grid; place-items:center; width:60px; height:60px; border-radius:20px; color:#244482; background:#eef2fa; font-size:2rem; }
.v101-back-link { display:inline-flex; margin-bottom:20px; font-size:.8rem; color:#244482; font-weight:800; text-decoration:none; }
.v101-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; align-items:start; gap:18px; }
.v101-detail-main { display:grid; gap:18px; min-width:0; }
.v101-detail-card { padding:24px; }
.v101-section-heading h2,.v101-detail-sidebar h2 { color:#46342d; font:700 1.3rem Georgia,serif; margin:0 0 8px; }
.v101-section-heading p { color:#83766f; font-size:.78rem; margin-bottom:18px; }
.v101-order-timeline { list-style:none; display:grid; gap:0; padding:0; margin:12px 0 22px; }
.v101-timeline-step { display:flex; gap:15px; align-items:center; color:#958981; font-size:.85rem; font-weight:650; min-height:45px; position:relative; }
.v101-timeline-step:not(:last-child)::before { content:''; position:absolute; left:15px; top:31px; height:calc(100% - 30px); width:2px; background:#e6e3e1; }
.v101-timeline-step.is-complete { color:#254a82; }
.v101-timeline-step.is-complete:not(:last-child)::before { background:#b8c7e7; }
.v101-timeline-dot { z-index:1; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#f4f1ed; color:#8c817a; font-size:.75rem; border:1px solid #e5ded7; flex:none; }
.v101-timeline-step.is-complete .v101-timeline-dot { background:#244482; color:#fff; border-color:#244482; }
.v101-tracking-card { background:#f5f8ff; border:1px solid #dce7fa; border-radius:16px; padding:17px; display:flex; flex-wrap:wrap; gap:13px; justify-content:space-between; align-items:center; }
.v101-tracking-number { font-size:1rem; font-weight:800; color:#233c71; overflow-wrap:anywhere; margin-top:4px; }
.v101-tracking-actions { display:flex; flex-wrap:wrap; gap:8px; }
.v101-tracking-note { flex-basis:100%; font-size:.72rem; color:#66738d; line-height:1.5; }
.v101-tracking-pending { background:#faf7ef; border:1px solid #eadcc5; border-radius:12px; padding:13px; font-size:.82rem; color:#775e3c; }
.v101-order-alert { border:1px solid #efcbc4; background:#fff5f2; border-radius:14px; color:#922e29; margin-bottom:18px; padding:14px 18px; font-size:.85rem; }
.v101-detail-products { display:grid; gap:16px; margin-top:17px; }
.v101-order-product--full:not(:last-child) { padding-bottom:16px; border-bottom:1px solid #f1ece7; }
.v101-item-amount { margin-left:auto; color:#40372f; font-weight:800; font-size:.88rem; white-space:nowrap; }
.v101-detail-sidebar { display:grid; gap:18px; }
.v101-detail-summary>div { display:flex; justify-content:space-between; gap:10px; font-size:.83rem; margin-top:15px; color:#71665d; }
.v101-detail-summary>div strong { color:#443630; white-space:nowrap; }
.v101-detail-summary .v101-detail-total { border-top:1px solid #eee7dd; padding-top:15px; font-size:1rem; font-weight:800; color:#334d86; }
.v101-detail-summary .v101-detail-total strong { color:#244482; }
.v101-address-card p { color:#736860; font-size:.83rem; overflow-wrap:anywhere; line-height:1.65; }
@media(max-width:860px) { .v101-detail-layout { grid-template-columns:1fr; } .v101-detail-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:580px) { .v101-orders .account-shell { width:100%; } .v101-order-header,.v101-order-body,.v101-order-footer { padding:15px; } .v101-order-body { grid-template-columns:1fr; } .v101-order-summary { align-items:flex-start; text-align:left; padding-top:8px; border-top:1px solid #eee9e4; } .v101-order-actions { width:100%; } .v101-order-actions .v101-link-button { flex:1 1 auto; } .v101-detail-card { padding:17px; } .v101-detail-sidebar { grid-template-columns:1fr; } .v101-tracking-actions { width:100%; } .v101-tracking-actions>* { flex:1 1 auto; } }
