/* ==========================================================================
   cuenta.css — Panel de cliente (sidebar + contenido). Estilo vx-* de la tienda.
   Depende de los tokens de tienda.css (--dark, --gray, --primary, etc.).
   ========================================================================== */
.account-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

/* ---- Sidebar ---- */
.acct-sidebar {
  position: sticky;
  top: 96px;
  background: var(--marca-superficie);
  border: 1px solid var(--light-gray);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--card-shadow);
}
.acct-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--light-gray);
}
.acct-avatar {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--marca-acento));
  color: var(--gold-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .02em;
}
.acct-profile__info { min-width: 0; }
.acct-profile__name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-profile__email {
  font-size: .82rem;
  color: var(--gray);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.acct-nav { display: flex; flex-direction: column; gap: 4px; }
.acct-nav__link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 11px 14px;
  border-radius: 11px;
  color: #48505f;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  transition: background .18s var(--vx-ease), color .18s var(--vx-ease);
}
.acct-nav__link i { width: 20px; text-align: center; font-size: .95rem; color: var(--marca-tenue); transition: color .18s var(--vx-ease); }
.acct-nav__link:hover { background: var(--marca-fondo); color: var(--dark); }
.acct-nav__link:hover i { color: var(--primary-dark); }
.acct-nav__link.active { background: color-mix(in srgb, var(--marca-acento) 14%, transparent); color: #8a5f06; }
.acct-nav__link.active i { color: var(--primary-dark); }
.acct-nav__logout { margin-top: 8px; border-top: 1px solid var(--light-gray); padding-top: 15px; color: #b0546a; border-radius: 0 0 11px 11px; }
.acct-nav__logout i { color: #cf7d8c; }
.acct-nav__logout:hover { background: #fdeef0; color: #e5484d; }
.acct-nav__logout:hover i { color: #e5484d; }

/* ---- Contenido ---- */
.acct-head { margin-bottom: 22px; }
.acct-title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800; font-size: 1.9rem; color: var(--dark);
  margin: 0 0 .3rem; letter-spacing: -.01em;
}
.acct-sub { color: var(--gray); margin: 0; }

.acct-card {
  background: var(--marca-superficie);
  border: 1px solid var(--light-gray);
  border-radius: 18px;
  padding: 28px;
  box-shadow: var(--card-shadow);
}
.acct-card__title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800; font-size: 1.1rem; color: var(--dark);
  margin: 0 0 18px;
}
.acct-card__title--mt { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--light-gray); }

.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.acct-field { display: flex; flex-direction: column; }
.acct-field--full { grid-column: 1 / -1; }
.acct-field label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
  color: #3a4051; margin-bottom: .5rem;
}
.acct-field .form-control {
  height: 48px;
  border: 1px solid var(--light-gray);
  border-radius: 11px;
  padding: 10px 14px;
  font-size: .95rem;
  color: var(--dark);
  transition: border-color .2s var(--vx-ease), box-shadow .2s var(--vx-ease);
}
.acct-field .form-control:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 18%, transparent);
}
.acct-field .form-control.is-invalid { border-color: #e5484d; }

/* Campo de contraseña con botón de ojo */
.acct-pass { position: relative; }
.acct-pass .form-control { padding-right: 44px; width: 100%; }
.toggle-password-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; background: transparent;
  color: var(--marca-tenue); cursor: pointer; border-radius: 8px;
  transition: color .2s var(--vx-ease), background .2s var(--vx-ease);
}
.toggle-password-btn:hover { color: var(--primary-dark); background: var(--marca-fondo); }

/* Medidor de fuerza */
.strength-track { height: 6px; background: #eeece6; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.strength-meter { height: 100%; width: 0; background: #e5e5e5; border-radius: 999px; transition: width .25s var(--vx-ease), background .25s var(--vx-ease); }
.acct-hints { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.acct-hints li {
  position: relative; padding-left: 22px;
  font-size: .8rem; color: var(--gray);
}
.acct-hints li::before {
  content: '\f111'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; left: 0; top: 1px; font-size: .5rem; color: #cfcabd; top: 4px;
}
.acct-hints li.valid { color: #1a7640; }
.acct-hints li.valid::before { content: '\f00c'; color: #1a7640; font-size: .72rem; top: 1px; }

.error-message { display: none; color: #e5484d; font-size: .82rem; margin-top: 6px; }

/* Acciones */
.acct-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.acct-btn {
  border: none; cursor: pointer;
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: .95rem;
  padding: 12px 26px; border-radius: 12px;
  transition: background .2s var(--vx-ease), color .2s var(--vx-ease), transform .2s var(--vx-ease), box-shadow .2s var(--vx-ease);
}
.acct-btn--ghost { background: #f4f2ec; color: var(--dark); }
.acct-btn--ghost:hover { background: #e9e6dd; }
.acct-btn--primary { background: var(--primary); color: var(--gold-ink); box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--marca-acento) 95%, transparent); }
.acct-btn--primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--marca-acento) 100%, transparent); }

/* Estado "en construcción" (páginas pedidos/cupones mientras se implementan) */
.acct-soon { text-align: center; padding: 56px 24px; color: var(--gray); }
.acct-soon i { font-size: 2.8rem; color: #e6e3db; margin-bottom: 16px; }
.acct-soon h3 { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; color: var(--dark); margin: 0 0 .4rem; }

@media (max-width: 991.98px) {
  .account-layout { grid-template-columns: 1fr; }
  .acct-sidebar { position: static; }
  .acct-nav { flex-direction: row; flex-wrap: wrap; }
  .acct-nav__link { flex: 1 1 auto; justify-content: center; }
  .acct-nav__logout { border-top: none; padding-top: 11px; margin-top: 0; }
}
@media (max-width: 575.98px) {
  .acct-grid { grid-template-columns: 1fr; }
  .acct-title { font-size: 1.55rem; }
  .acct-actions { flex-direction: column-reverse; }
  .acct-btn { width: 100%; }
}

/* ========================================================================== */
/*  MIS PEDIDOS (lista de tarjetas + estados)                                 */
/* ========================================================================== */
.orders-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.orders-state { text-align: center; padding: 40px 20px; color: var(--gray); }
.orders-state i { margin-right: .4rem; }
.orders-state--error { color: #e5484d; }

.order-card {
  background: var(--marca-superficie);
  border: 1px solid var(--light-gray);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--card-shadow);
  transition: transform .2s var(--vx-ease), box-shadow .2s var(--vx-ease), border-color .2s var(--vx-ease);
}
.order-card:hover { transform: translateY(-3px); border-color: #ecdca8; box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--marca-primario) 30%, transparent); }
.order-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.order-card__meta { display: flex; flex-direction: column; gap: 3px; }
.order-card__num { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; color: var(--dark); font-size: 1.02rem; }
.order-card__date { font-size: .82rem; color: var(--gray); }
.order-card__date i { margin-right: .3rem; }
.order-card__body {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--light-gray);
}
.order-card__total { display: flex; flex-direction: column; }
.order-card__total span { font-size: .76rem; color: var(--gray); text-transform: uppercase; letter-spacing: .03em; }
.order-card__total b { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; color: var(--marca-acento-hondo); font-size: 1.05rem; }
.order-card__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: color-mix(in srgb, var(--marca-acento) 14%, transparent); color: #8a5f06;
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: .86rem;
  text-decoration: none; padding: 9px 16px; border-radius: 10px;
  transition: background .18s var(--vx-ease), transform .18s var(--vx-ease);
}
.order-card__btn:hover { background: var(--primary); color: var(--gold-ink); transform: translateX(2px); }

/* Chip de estado */
.ostatus {
  display: inline-flex; align-items: center;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: .74rem;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.ostatus--pending { background: #fff4d6; color: #9a6a00; }
.ostatus--done    { background: #e2f5ea; color: #1a7640; }
.ostatus--cancel  { background: #fde8e8; color: #d33b3b; }
.ostatus--process { background: #e4eefc; color: #2f6fed; }
.ostatus--default { background: #eeece6; color: var(--marca-tenue); }

.orders-pagination { margin-top: 26px; }

/* ---- Detalle de pedido ---- */
.order-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.order-detail__head .acct-sub i { margin-right: .35rem; color: var(--primary-dark); }
.order-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start;
}
.order-items { display: flex; flex-direction: column; }
.order-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--light-gray);
}
.order-item:last-child { border-bottom: none; }
.order-item__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.order-item__name { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; color: var(--dark); }
.order-item__qty { font-size: .82rem; color: var(--gray); }
.order-item__sub { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; color: var(--dark); white-space: nowrap; }

.order-detail__aside { display: flex; flex-direction: column; gap: 20px; }
.order-coupon { color: var(--gray); font-size: .85rem; }
.order-info__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.order-info__list li { display: flex; align-items: flex-start; gap: .8rem; }
.order-info__list i {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  background: color-mix(in srgb, var(--marca-acento) 16%, transparent); color: var(--marca-acento-hondo);
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
}
.order-info__k { display: block; font-size: .76rem; color: var(--gray); text-transform: uppercase; letter-spacing: .03em; }
.order-info__v { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; color: var(--dark); }

@media (max-width: 991.98px) {
  .order-detail { grid-template-columns: 1fr; }
}

/* ========================================================================== */
/*  MIS CUPONES (tickets)                                                      */
/* ========================================================================== */
.coupons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }

.coupon {
  display: flex;
  position: relative;
  background: var(--marca-superficie);
  border: 1px solid var(--light-gray);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform .2s var(--vx-ease), box-shadow .2s var(--vx-ease);
}
.coupon:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--marca-primario) 30%, transparent); }

/* Notches del ticket (color del fondo de página) */
.coupon::before, .coupon::after {
  content: ''; position: absolute; left: 132px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--light);
  transform: translateX(-50%);
  z-index: 2;
}
.coupon::before { top: -8px; }
.coupon::after { bottom: -8px; }

.coupon__left {
  flex: none; width: 132px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--marca-acento) 100%);
  color: var(--gold-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 22px 12px; text-align: center;
}
.coupon__value { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 1.65rem; line-height: 1.05; word-break: break-word; }
.coupon__type { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; font-weight: 700; opacity: .82; }

.coupon__perf { flex: none; width: 0; border-left: 2px dashed var(--light-gray); margin: 14px 0; }

.coupon__right { flex: 1; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; }
.coupon__codelabel { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gray); font-weight: 700; }
.coupon__coderow { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.coupon__code {
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 1.05rem;
  color: var(--dark); letter-spacing: .04em;
  background: var(--marca-fondo); border: 1px dashed #d9d5cb; border-radius: 8px;
  padding: 5px 10px;
}
.coupon__copy {
  flex: none; width: 34px; height: 34px; border: none; border-radius: 9px;
  background: color-mix(in srgb, var(--marca-acento) 16%, transparent); color: #8a5f06; cursor: pointer;
  transition: background .18s var(--vx-ease), color .18s var(--vx-ease);
}
.coupon__copy:hover { background: var(--primary); color: var(--gold-ink); }
.coupon__copy.is-copied { background: #e2f5ea; color: #1a7640; }

.coupon__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coupon__uses { font-size: .86rem; color: #48505f; font-weight: 600; }
.coupon__soon {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: #fff4d6; color: #9a6a00; padding: 3px 8px; border-radius: 999px;
}
.coupon__period { font-size: .78rem; color: var(--gray); }

@media (max-width: 400px) {
  .coupon__left { width: 108px; }
  .coupon::before, .coupon::after { left: 108px; }
}

/* ==========================================================================
   Seguimiento del envío en la ficha del pedido (Fase 2)
   ========================================================================== */
.order-track__msg{
  font-size:.86rem;color:#5f6b7a;margin:0;display:flex;gap:.45rem;align-items:flex-start;
}
.order-track__code{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem;
}
.order-track__k{font-size:.78rem;color:#8a94a6;text-transform:uppercase;letter-spacing:.04em}
.order-track__code code{
  font-family:Consolas,Menlo,monospace;font-size:.92rem;font-weight:700;
  background:var(--marca-fondo);border:1px solid var(--marca-linea);border-radius:7px;padding:.2rem .5rem;color:var(--marca-primario);
}
.order-track__state{
  display:inline-block;font-size:.76rem;font-weight:700;padding:.2rem .6rem;
  border-radius:999px;background:#e6f6ed;color:#137a41;margin-bottom:.6rem;
}
.order-track__link{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:600;
  color:var(--marca-primario);text-decoration:none;
}
.order-track__link:hover{text-decoration:underline}

/* Botón principal oscuro de las pantallas de la cuenta (direcciones). Lo
   usaban «Añadir dirección» y «Guardar» sin que existiera la regla: salía el
   botón del navegador. */
.btn-tinta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 42px; padding: 0 1.2rem;
  border: 0; border-radius: 999px;
  background: var(--vx-ink, var(--marca-primario)); color: var(--marca-sobre-primario);
  font-family: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}
.btn-tinta:hover { background: #262c3a; color: var(--marca-sobre-primario); }
.btn-tinta:disabled { opacity: .55; cursor: not-allowed; }
.btn-tinta:focus-visible { outline: 3px solid var(--vx-gold, var(--marca-acento)); outline-offset: 2px; }

/* Los avisos de «todavía no hay nada» (pedidos, cupones) van en tarjeta y a
   todo el ancho: sueltos sobre el fondo parecían un hueco de la página, y
   dentro de la rejilla de pedidos ocupaban una sola columna. */
.acct-soon {
  grid-column: 1 / -1;
  background: var(--marca-superficie);
  border: 1px solid #ecebe6;
  border-radius: 18px;
  box-shadow: var(--card-shadow);
}
.acct-soon h3 { font-size: 1.15rem; }
.acct-card .acct-soon { border: 0; box-shadow: none; }