/* =========================================================
   La cuenta del cliente

   Hoja aparte por lo mismo que la de la Mistery Box: son estilos de tres
   páginas de las treinta del sitio. Usa los tokens de estilos.css y no
   redefine ningún color de marca.
   ========================================================= */

.ct { background: var(--crema); padding-block: clamp(24px, 4vw, 56px); min-height: 70vh; }
.ct__caja {
  max-width: 720px; background: #fff; border-radius: var(--radio);
  padding: clamp(24px, 4vw, 42px);
}
.ct__caja--angosta { max-width: 460px; }

.ct__volver { font-size: var(--t-xs); color: var(--gris); display: inline-block; margin-bottom: 1.2rem; }
.ct__titulo { font-size: var(--t-l); margin: 0; }
.ct__bajada { color: var(--gris); font-size: var(--t-s); margin: .6rem 0 1.8rem; }
.ct__sub { font-size: 1.05rem; margin: 2.2rem 0 .9rem; }
.ct__nota { font-size: var(--t-xs); color: var(--gris); margin: .3rem 0 0; }
.ct__nota a { color: var(--fucsia); }

.ct__encabezado {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem;
}

.ct__chip {
  background: #EFE9EE; border-radius: 999px; padding: .28rem .75rem;
  font-size: var(--t-xs); white-space: nowrap;
}
.ct__chip--activa, .ct__chip--entregado { background: #E7F6EF; color: #2F7D4F; }
.ct__chip--enviado, .ct__chip--pago_confirmado { background: #E4F0F7; color: #2A6A8A; }
.ct__chip--morosa, .ct__chip--cancelado { background: #FBEBE5; color: #B4502F; }
.ct__chip--cancelada { color: var(--gris); }

/* ---------- Entrar ---------- */
.ct__campo { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; font-size: var(--t-s); }
.ct__campo span { color: var(--gris); }
.ct__campo input {
  font: inherit; padding: .85rem 1rem; border: 1.5px solid var(--linea);
  border-radius: var(--radio-chico); background: #fff; color: var(--tinta);
}
.ct__campo input:focus {
  outline: none; border-color: var(--fucsia); box-shadow: 0 0 0 3px rgba(244, 17, 101, .12);
}
/* El código se escribe separado y grande: seis dígitos pegados se leen mal y
   se corrigen peor cuando uno se equivoca en el cuarto. */
.ct__codigo {
  text-align: center; font-size: 1.7rem; letter-spacing: .45em;
  text-indent: .45em; font-weight: 600;
}
.ct__link {
  background: none; border: 0; color: var(--gris); font: inherit;
  font-size: var(--t-xs); text-decoration: underline; cursor: pointer;
  padding: .8rem 0 0; display: block; margin-inline: auto;
}
.ct__link:hover { color: var(--fucsia); }

.ct__aviso { font-size: var(--t-s); color: var(--gris); margin-top: 1rem; }
.ct__aviso--mal { color: #A3123F; }
.ct__alerta {
  background: #FBEBE5; border-radius: var(--radio-chico);
  padding: .85rem 1rem; font-size: var(--t-xs); margin: .8rem 0 0; line-height: 1.55;
}

/* ---------- Suscripción ---------- */
.ct__susc {
  border: 1.5px solid var(--linea); border-radius: var(--radio-chico);
  padding: 1.1rem 1.3rem; margin-bottom: 12px;
}
.ct__susc__top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.ct__susc__plan { margin: 0; font-size: 1.02rem; }

.ct__botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 1rem; }
.ct__btn {
  background: #fff; border: 1.5px solid var(--linea); border-radius: 999px;
  padding: .5rem 1rem; font: inherit; font-size: var(--t-xs); cursor: pointer;
  transition: border-color .15s;
}
.ct__btn:hover { border-color: var(--fucsia); }
/* Cancelar no se esconde ni se pinta de rojo de alarma. Hacerla difícil de
   encontrar es lo que convierte una baja en un contracargo, que cuesta la
   venta más la multa. */
.ct__btn--baja { color: var(--gris); }
.ct__btn--baja:hover { border-color: #C9A9B5; }
.ct__btn[disabled] { opacity: .5; }

.ct__promo {
  background: var(--menta); border-radius: var(--radio-chico);
  padding: 1.3rem 1.4rem; text-align: center;
}
.ct__promo p { margin: 0 0 .5rem; }
.ct__promo .btn { margin-top: .8rem; }

/* ---------- Pedidos ---------- */
.ct__pedidos { list-style: none; padding: 0; margin: 0; }
.ct__pedido a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .95rem 0; border-bottom: 1px solid var(--linea);
}
.ct__pedido a:hover .ct__pedido__izq strong { color: var(--fucsia); }
.ct__pedido__izq { display: flex; flex-direction: column; gap: .15rem; }
.ct__pedido__izq .ct__nota { margin: 0; }
.ct__pedido__der { display: flex; align-items: center; gap: .9rem; }
.ct__pedido__total { font-weight: 600; font-size: var(--t-s); }
.ct__vacio { color: var(--gris); font-size: var(--t-s); }
.ct__vacio a { color: var(--fucsia); }

/* ---------- Detalle del pedido ---------- */
.ct__seguimiento {
  background: var(--menta); border-radius: var(--radio-chico);
  padding: .9rem 1.1rem; margin: 1.2rem 0; display: flex;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: var(--t-s);
}
.ct__items { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.ct__item {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--linea);
}
.ct__item img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; }
.ct__item__txt { display: flex; flex-direction: column; gap: .15rem; flex: 1; font-size: var(--t-s); }
.ct__item__txt .ct__nota { margin: 0; }
.ct__item__total { font-weight: 500; font-size: var(--t-s); }

.ct__totales { margin-top: 1.4rem; font-size: var(--t-s); }
.ct__totales div { display: flex; justify-content: space-between; padding: .35rem 0; color: var(--gris); }
.ct__totales__final {
  border-top: 1px solid var(--linea); margin-top: .4rem; padding-top: .8rem !important;
  color: var(--tinta) !important; font-weight: 600; font-size: 1.05rem;
}
.ct__envio { margin-top: 1.8rem; font-size: var(--t-s); line-height: 1.6; }

.ct__pie { font-size: var(--t-xs); color: var(--gris); margin-top: 2rem; line-height: 1.6; }
.ct__pie a { color: var(--fucsia); text-decoration: underline; }