/* ==========================================================================
   cuenta.css — Piezas de cuenta KYROSCH
   --------------------------------------------------------------------------
   Este archivo vive en dos contextos con dos capas de tokens distintas:
   las paginas vieja (style.css + theme-peru.css) y las nuevas
   (producto-detalle.css). Por eso todo se resuelve con fallback en vez de
   asumir una sola paleta. No se define ningun color nuevo: cada propiedad
   cae al token que ya exista y, si no existe, al valor mas cercano del
   sistema actual.
   ========================================================================== */

.cuenta-scope {
  --c-blanco: var(--blanco, #ffffff);
  --c-ink: var(--ink, #111110);
  --c-ink-mid: var(--ink-mid, #6b6760);
  --c-ink-faint: var(--ink-faint, #b0ada8);
  --c-line: var(--line, #e8e5e0);
  --c-paper: var(--paper, #f2f0ec);
  --c-gold: var(--gold, #c9a42d);
  --c-gold-bg: var(--gold-bg, #fdf8ee);
  --c-gold-line: var(--gold-line, #e8d89a);
  --c-red: var(--red, #c0392b);
  --c-wa: var(--wa, #25d366);
  --c-ease: var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

/* ------------------------------------------------------------------
   Boton de cuenta del header
   ------------------------------------------------------------------
   Una sola clase para las dos posiciones. La de movil vive dentro de
   .header-right, que ya se oculta en desktop; la de desktop lleva
   .cuenta-btn--desktop y se apaga por debajo de 769px, el mismo corte
   que usa .header-right. No hay dos reglas ni dos scripts.

   42x42, radio 14 y hover #f5f2ee: exactamente los valores de
   .mobile-search-btn y .mobile-menu-btn. Copiados, no inventados.
   ------------------------------------------------------------------ */

.cuenta-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  background: #fff;
  border-radius: 14px;
  color: #111;
  font-size: 18px;
  cursor: pointer;
  transition: 0.25s ease;
  text-decoration: none;
}

.cuenta-btn:hover {
  background: #f5f2ee;
  transform: translateY(-1px);
}

.cuenta-btn:focus-visible {
  outline: 2px solid var(--gold, #c9a42d);
  outline-offset: 2px;
}

.cuenta-btn i,
.cuenta-btn svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* El avatar con la inicial se elimino a pedido del usuario: el icono de
   usuario se queda siempre como esta, sin un circulo dorado al lado. */

/* Punto discreto: avisa que hay sesion sin gritarlo en el header.
   Badge de estado: circulo verde con un check blanco. Va en position
   absolute para salirse del flujo y no desplazar ni deformar el icono de
   persona ni el resto del header, y se pinta solo cuando el boton lleva
   .is-activo, que es lo que auth-ui.js activa con la sesion real de Supabase
   (no con localStorage). */
.cuenta-btn__punto {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--wa, #25d366);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.2 7.3l2.5 2.5L10.8 4.7' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  display: none;
}

/* Con sesion: se muestra. Sin sesion, se queda oculto y el icono se ve
   exactamente igual que antes. */
.cuenta-btn.is-activo .cuenta-btn__punto {
  display: block;
}

.cuenta-btn--desktop {
  display: flex;
}

.cuenta-btn--mobile {
  display: none;
}

@media (max-width: 768px) {
  .cuenta-btn--desktop { display: none; }
  .cuenta-btn--mobile { display: flex; }

  /* iOS Safari: evitar zoom automático al enfocar inputs/textarea/select */
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* ------------------------------------------------------------------
   Toast
   ------------------------------------------------------------------ */

.cuenta-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  z-index: 10050;
  max-width: min(440px, calc(100vw - 32px));
  padding: 13px 20px;
  border-radius: 14px;
  background: #111110;
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s, transform 0.24s;
}

.cuenta-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.cuenta-toast[data-tipo="ok"] { background: #14361f; }
.cuenta-toast[data-tipo="error"] { background: #5c1d1d; }

/* Bloquea el scroll de fondo sin romper el del panel movil, que usa
   la clase .no-scroll por su cuenta. */
html.cuenta-abierto,
html.cuenta-abierto body {
  overflow: hidden;
}

/* ------------------------------------------------------------------
   Modal
   ------------------------------------------------------------------ */

.cuenta-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s;
  z-index: 10060;
}

.cuenta-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cuenta-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.97);
  width: min(520px, calc(100vw - 32px));
  max-height: min(88vh, 760px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--c-blanco, #fff);
  border-radius: 20px;
  z-index: 10070;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s, transform 0.24s;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.cuenta-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.cuenta-modal-cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line, #e8e5e0);
  border-radius: 12px;
  background: var(--c-blanco, #fff);
  color: var(--c-ink, #111110);
  cursor: pointer;
  transition: 0.2s;
  z-index: 2;
}

.cuenta-modal-cerrar:hover {
  background: var(--c-paper, #f2f0ec);
}

.cuenta-modal-cerrar svg {
  width: 18px;
  height: 18px;
}

.cuenta-modal-cuerpo {
  padding: 30px 30px 26px;
  color: var(--c-ink, #111110);
  font-family: var(--fuente-delgada-moderna, system-ui, sans-serif);
}

.cuenta-modal-cabecera {
  margin-bottom: 20px;
  padding-right: 44px;
}

.cuenta-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold, #c9a42d);
  margin-bottom: 7px;
}

.cuenta-modal-cabecera h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.cuenta-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-ink-mid, #6b6760);
}

/* Tabs */

.cuenta-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 20px;
  background: var(--c-paper, #f2f0ec);
  border-radius: 14px;
}

.cuenta-tab {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--c-ink-mid, #6b6760);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: 0.2s;
}

.cuenta-tab:hover {
  color: var(--c-ink, #111110);
}

.cuenta-tab.is-activa {
  background: var(--c-blanco, #fff);
  color: var(--c-ink, #111110);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Formularios */

.cuenta-form {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cuenta-form[hidden] {
  display: none;
}

.cuenta-label {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-ink-mid, #6b6760);
}

.cuenta-opcional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-ink-faint, #b0ada8);
}

.cuenta-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--c-line, #e8e5e0);
  border-radius: 12px;
  background: var(--c-blanco, #fff);
  color: var(--c-ink, #111110);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cuenta-input:focus {
  border-color: var(--c-gold, #c9a42d);
  box-shadow: 0 0 0 3px rgba(201, 164, 45, 0.12);
}

.cuenta-input::placeholder {
  color: var(--c-ink-faint, #b0ada8);
}

.cuenta-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cuenta-grid-2 > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cuenta-nota {
  margin: 12px 0 4px;
  padding: 12px 14px;
  background: var(--c-gold-bg, #fdf8ee);
  border: 1px solid var(--c-gold-line, #e8d89a);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-ink-mid, #6b6760);
}

.cuenta-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-ink-mid, #6b6760);
}

.cuenta-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--c-gold, #c9a42d);
  cursor: pointer;
}

.cuenta-check a {
  color: var(--c-ink, #111110);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cuenta-btn-primary {
  margin-top: 16px;
  height: 50px;
  border: 1px solid var(--c-ink, #111110);
  border-radius: 13px;
  background: var(--c-ink, #111110);
  color: var(--c-blanco, #fff);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  transition: 0.24s;
}

.cuenta-btn-primary:hover:not(:disabled) {
  background: var(--c-gold, #c9a42d);
  border-color: var(--c-gold, #c9a42d);
  transform: translateY(-2px);
}

.cuenta-btn-primary:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Bloqueado por no aceptar los terminos: no es una espera, es que falta un
   paso. El cursor lo dice. */
.cuenta-btn-primary.is-pendiente-terminos {
  cursor: not-allowed;
}

.cuenta-btn-secundario {
  margin-top: 18px;
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--c-line, #e8e5e0);
  border-radius: 13px;
  background: transparent;
  color: var(--c-ink, #111110);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  transition: 0.22s;
}

.cuenta-btn-secundario:hover {
  border-color: var(--c-red, #c0392b);
  color: var(--c-red, #c0392b);
}

.cuenta-btn-secundario svg {
  width: 16px;
  height: 16px;
}

.cuenta-enlace {
  align-self: center;
  margin-top: 12px;
  border: none;
  background: none;
  color: var(--c-ink-mid, #6b6760);
  font-size: 13px;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s;
}

.cuenta-enlace:hover {
  color: var(--c-ink, #111110);
}

.cuenta-error {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fdeeee;
  border: 1px solid #f0c9c9;
  color: #8c2a2a;
  font-size: 13px;
  line-height: 1.5;
}

.cuenta-error[hidden] {
  display: none;
}

/* Panel de cuenta con sesion iniciada */

.cuenta-panel-datos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 16px;
  border: 1px solid var(--c-line, #e8e5e0);
  border-radius: 14px;
  overflow: hidden;
}

.cuenta-dato {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  background: var(--c-blanco, #fff);
  font-size: 14px;
}

.cuenta-dato + .cuenta-dato {
  border-top: 1px solid var(--c-line, #e8e5e0);
}

.cuenta-dato span {
  color: var(--c-ink-mid, #6b6760);
  font-size: 13px;
}

.cuenta-dato strong {
  font-weight: 600;
}

.cuenta-panel-avisos:empty {
  display: none;
}

.cuenta-alerta {
  margin: 0 0 16px;
  padding: 13px 15px;
  background: var(--c-gold-bg, #fdf8ee);
  border: 1px solid var(--c-gold-line, #e8d89a);
  border-radius: 13px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-ink-mid, #6b6760);
}

.cuenta-alerta a {
  color: var(--c-ink, #111110);
  font-weight: 600;
}

.cuenta-panel-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cuenta-panel-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--c-line, #e8e5e0);
  border-radius: 13px;
  background: var(--c-blanco, #fff);
  color: var(--c-ink, #111110);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.22s;
}

.cuenta-panel-link:hover {
  border-color: var(--c-gold, #c9a42d);
  color: var(--c-gold, #c9a42d);
  transform: translateY(-1px);
}

.cuenta-panel-link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   Pagina de cuenta
   ------------------------------------------------------------------ */

.cuenta-page {
  /* El body global es flex column con altura fija (html,body{height:100%}).
     Sin flex:0 0 auto, el <main> se encoje a la altura del viewport y su
     contenido se desborda; el footer cae encima y la vista de perfil se ve
     cortada en movil. flex:0 0 auto deja que crezca con su contenido. */
  flex: 0 0 auto;
  min-height: 100vh;
  padding-top: var(--header-h, 100px);
  background: var(--fondo-general, #f6efe1);
  color: var(--ink, #111110);
  font-family: var(--fuente-delgada-moderna, system-ui, sans-serif);
}

.cuenta-page-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px 90px;
}

.cuenta-page-cabecera {
  margin-bottom: 28px;
}

.cuenta-page-cabecera h1 {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.cuenta-page-cabecera p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mid, #6b6760);
}

.cuenta-nav {
  display: flex;
  gap: 6px;
  padding: 5px;
  margin-bottom: 26px;
  background: #fff;
  border: 1px solid var(--line, #e8e5e0);
  border-radius: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cuenta-nav a {
  flex: 1;
  min-width: max-content;
  padding: 12px 18px;
  border-radius: 12px;
  color: var(--ink-mid, #6b6760);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.22s;
}

.cuenta-nav a:hover {
  color: var(--ink, #111110);
  background: var(--paper, #f2f0ec);
}

.cuenta-nav a.is-activo {
  background: var(--ink, #111110);
  color: #fff;
}

.cuenta-card {
  background: #fff;
  border: 1px solid var(--line, #e8e5e0);
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 20px;
}

.cuenta-card h2 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 600;
}

.cuenta-card-sub {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mid, #6b6760);
}

.cuenta-seccion[hidden] {
  display: none;
}

/* La tarjeta de perfil (y las demas secciones) crecen con su contenido: nunca
   se les fija un alto. Alto automatico, sin scroll propio y sin
   alto minimo que empuje el boton de guardar fuera de la vista. */
.cuenta-card,
.cuenta-seccion {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

.cuenta-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cuenta-campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* min-width:0 evita que un input largo estire la columna del grid y
     desborde la tarjeta en pantallas de 320-360px. */
  min-width: 0;
}

.cuenta-campo .cuenta-input {
  min-width: 0;
  max-width: 100%;
}

/* Un correo largo o un nombre sin espacios no debe empujar la tarjeta. */
.cuenta-card h2,
.cuenta-card p,
.cuenta-favorito-info strong,
.cuenta-favorito-info span {
  overflow-wrap: anywhere;
}

.cuenta-campo--ancho {
  grid-column: 1 / -1;
}

.cuenta-acciones {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line, #e8e5e0);
}

.cuenta-guardado {
  font-size: 13px;
  color: var(--wa, #25d366);
  opacity: 0;
  transition: opacity 0.24s;
}

.cuenta-guardado.is-visible {
  opacity: 1;
}

.cuenta-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cuenta-favorito {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--line, #e8e5e0);
  border-radius: 14px;
  background: #fff;
  transition: 0.22s;
}

.cuenta-favorito:hover {
  border-color: var(--gold, #c9a42d);
}

.cuenta-favorito img {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 10px;
  background: var(--paper, #f2f0ec);
}

.cuenta-favorito-info {
  flex: 1 1 auto;
  min-width: 0;
}

.cuenta-favorito-info strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 3px;
}

.cuenta-favorito-info span {
  font-size: 13px;
  color: var(--ink-mid, #6b6760);
}

.cuenta-favorito-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.cuenta-icono-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #e8e5e0);
  border-radius: 11px;
  background: #fff;
  color: var(--ink, #111110);
  cursor: pointer;
  transition: 0.2s;
}

.cuenta-icono-btn:hover {
  border-color: var(--red, #c0392b);
  color: var(--red, #c0392b);
}

.cuenta-icono-btn svg {
  width: 16px;
  height: 16px;
}

/* Pedidos */

.cuenta-pedido {
  border: 1px solid var(--line, #e8e5e0);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.cuenta-pedido + .cuenta-pedido {
  margin-top: 10px;
}

.cuenta-pedido-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px;
  background: var(--paper, #f2f0ec);
  border-bottom: 1px solid var(--line, #e8e5e0);
}

.cuenta-pedido-codigo {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cuenta-pedido-fecha {
  font-size: 12.5px;
  color: var(--ink-mid, #6b6760);
}

.cuenta-estado {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--gold-bg, #fdf8ee);
  border: 1px solid var(--gold-line, #e8d89a);
  color: #7a5f11;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cuenta-estado[data-pagado="true"] {
  background: #eaf6ee;
  border-color: #b9dfc6;
  color: #1f6b34;
}

.cuenta-pedido-cuerpo {
  padding: 16px 18px;
}

.cuenta-pedido-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--ink-mid, #6b6760);
}

.cuenta-pedido-meta b {
  color: var(--ink, #111110);
  font-weight: 600;
}

.cuenta-pedido-productos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #e8e5e0);
}

.cuenta-pedido-producto {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}

.cuenta-pedido-producto img {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 8px;
  background: var(--paper, #f2f0ec);
}

.cuenta-pedido-producto-info {
  flex: 1 1 auto;
  min-width: 0;
}

.cuenta-pedido-producto-info span {
  display: block;
  font-size: 12px;
  color: var(--ink-mid, #6b6760);
}

.cuenta-pedido-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--line, #e8e5e0);
  font-size: 16px;
  font-weight: 700;
}

.cuenta-pedido-acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.cuenta-enlace-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: 1px solid var(--ink, #111110);
  border-radius: 12px;
  background: var(--ink, #111110);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: 0.22s;
}

.cuenta-enlace-btn:hover {
  background: var(--gold, #c9a42d);
  border-color: var(--gold, #c9a42d);
}

.cuenta-enlace-btn--suave {
  background: transparent;
  color: var(--ink, #111110);
}

.cuenta-enlace-btn--suave:hover {
  background: var(--ink, #111110);
  color: #fff;
}

.cuenta-enlace-btn svg {
  width: 15px;
  height: 15px;
}

/* Estados vacios y de carga */

.cuenta-vacio {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-mid, #6b6760);
  font-size: 14.5px;
  line-height: 1.6;
}

.cuenta-vacio svg {
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  color: var(--ink-faint, #b0ada8);
}

.cuenta-cargando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--ink-mid, #6b6760);
  font-size: 14px;
}

.cuenta-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line, #e8e5e0);
  border-top-color: var(--gold, #c9a42d);
  border-radius: 50%;
  animation: cuenta-gira 0.7s linear infinite;
}

@keyframes cuenta-gira {
  to { transform: rotate(360deg); }
}

/* Pantalla de sesion obligatoria, para cuando se abre /cuenta.html sin sesion */

.cuenta-cerca {
  max-width: 460px;
  margin: 60px auto;
  padding: 40px 30px;
  background: #fff;
  border: 1px solid var(--line, #e8e5e0);
  border-radius: 20px;
  text-align: center;
}

.cuenta-cerca h2 {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 600;
}

.cuenta-cerca p {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-mid, #6b6760);
}

.cuenta-cerca-boton {
  width: 100%;
  height: 48px;
  border: 1px solid var(--ink, #111110);
  border-radius: 13px;
  background: var(--ink, #111110);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  transition: 0.22s;
}

.cuenta-cerca-boton:hover {
  background: var(--gold, #c9a42d);
  border-color: var(--gold, #c9a42d);
}

@media (max-width: 640px) {
  .cuenta-modal-cuerpo { padding: 26px 20px 22px; }
  .cuenta-grid-2,
  .cuenta-form-grid { grid-template-columns: 1fr; }
  .cuenta-page-wrap { padding: 24px 14px 60px; }
  .cuenta-page-cabecera h1 { font-size: 24px; }
  .cuenta-card { padding: 20px 14px; }
  .cuenta-favorito { gap: 12px; }
  .cuenta-favorito img { width: 56px; height: 56px; }
  .cuenta-acciones { flex-direction: column; align-items: stretch; }
  .cuenta-acciones .cuenta-btn-primary { width: 100% !important; }
  .cuenta-guardado { text-align: center; }
}

/* ------------------------------------------------------------------
   Favoritos: contador en el corazon del header
   ------------------------------------------------------------------
   El corazon del header es un <a> con su <i data-lucide="heart">. Para no
   anadir markup en los HTML que repiten la cabecera, el contador se
   pinta con ::after y el numero se pasa por data-count. auth-ui.js pone el
   atributo cuando hay favoritos y lo quita cuando son 0, asi que en 0 el
   pseudo-elemento ni se crea. Mismo sitio y mismo tamano que el contador
   del carrito (.cart-count), en color rojo. */
.favorito-btn--desktop,
.mobile-favorito {
  position: relative;
}

.favorito-btn--desktop[data-count]::after,
.mobile-favorito[data-count]::after {
  content: attr(data-count);
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  pointer-events: none;
}

/* Con un solo digito la pastilla se mantiene proporcionada */
.favorito-btn--desktop[data-count="1"]::after,
.mobile-favorito[data-count="1"]::after {
  min-width: 18px;
  padding: 0 4px;
}

@media (max-width: 768px) {
  .favorito-btn--desktop[data-count]::after,
  .mobile-favorito[data-count]::after {
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    top: -3px;
    right: -3px;
    padding: 0 4px;
  }
}

/* ------------------------------------------------------------------
   Favoritos: drawer lateral (escritorio) / modal adaptativo (movil)
   ------------------------------------------------------------------
   Overlay + panel, visualmente integrado con KYROSCH. En escritorio
   entra por la derecha (drawer); en movil entra desde abajo ocupando
   la pantalla casi completa como modal adaptativo. */
.favoritos-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 16, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
  z-index: 10060;
}

.favoritos-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.favoritos-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--c-blanco, #fff);
  box-shadow: -18px 0 60px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.26s ease;
  z-index: 10061;
  outline: none;
}

.favoritos-panel.is-open {
  transform: translateX(0);
}

.favoritos-panel-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 18px 14px;
  border-bottom: 1px solid var(--c-line, #e8e5e0);
  background: var(--c-blanco, #fff);
  flex: 0 0 auto;
}

.favoritos-panel-cabecera h2 {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-ink, #111110);
}

.favoritos-panel-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mid, #6b6760);
}

.favoritos-panel-cerrar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line, #e8e5e0);
  border-radius: 12px;
  background: var(--c-blanco, #fff);
  color: var(--c-ink, #111110);
  cursor: pointer;
  transition: 0.2s;
}

.favoritos-panel-cerrar:hover {
  background: var(--c-paper, #f2f0ec);
}

.favoritos-panel-cerrar:focus-visible {
  outline: 2px solid var(--gold, #c9a42d);
  outline-offset: 2px;
}

.favoritos-panel-cerrar svg {
  width: 17px;
  height: 17px;
}

/* Un solo elemento con scroll: la lista */
.favoritos-panel-lista {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.favoritos-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--c-line, #e8e5e0);
  border-radius: 14px;
  background: var(--c-blanco, #fff);
}

.favoritos-item:hover {
  border-color: var(--gold, #c9a42d);
}

.favoritos-item img {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 10px;
  background: var(--c-paper, #f2f0ec);
}

.favoritos-item-info {
  flex: 1 1 auto;
  min-width: 0;
}

.favoritos-item-info strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink, #111110);
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}

.favoritos-item-info span {
  display: block;
  font-size: 12px;
  color: var(--ink-mid, #6b6760);
  overflow-wrap: anywhere;
}

.favoritos-item-precio {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink, #111110);
}

.favoritos-item-acciones {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.favoritos-item-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line, #e8e5e0);
  border-radius: 10px;
  background: var(--c-blanco, #fff);
  color: var(--c-ink, #111110);
  cursor: pointer;
  transition: 0.2s;
}

.favoritos-item-btn:hover {
  border-color: var(--gold, #c9a42d);
}

.favoritos-item-btn:focus-visible {
  outline: 2px solid var(--gold, #c9a42d);
  outline-offset: 2px;
}

.favoritos-item-btn svg {
  width: 15px;
  height: 15px;
}

.favoritos-item-btn--quitar:hover {
  border-color: var(--red, #c0392b);
  color: var(--red, #c0392b);
}

.favoritos-vacio {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 34px 22px;
  text-align: center;
}

.favoritos-vacio svg {
  width: 42px;
  height: 42px;
  color: var(--line, #e8e5e0);
  margin-bottom: 6px;
}

.favoritos-vacio strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink, #111110);
}

.favoritos-vacio p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mid, #6b6760);
  max-width: 260px;
}

.favoritos-vacio a {
  margin-top: 14px;
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--ink, #111110);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}

.favoritos-vacio a:hover {
  opacity: 0.9;
}

.favoritos-panel-pie {
  flex: 0 0 auto;
  padding: 12px 14px;
  border-top: 1px solid var(--c-line, #e8e5e0);
}

.favoritos-panel-pie a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px;
  border-radius: 13px;
  background: var(--c-paper, #f2f0ec);
  color: var(--c-ink, #111110);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}

.favoritos-panel-pie a:hover {
  background: #e9e5df;
}

.favoritos-panel-pie svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 768px) {
  /* En movil el drawer se lee como modal bottom-sheet: entra desde abajo,
     ocupa hasta 92vh y deja el fondo atenuado. */
  .favoritos-panel {
    top: auto;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 92vh;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.22);
  }

  .favoritos-panel.is-open {
    transform: translateY(0);
  }

  .favoritos-panel-cabecera {
    padding: 18px 16px 12px;
  }
}