/* assets/css/pages/cuenta.css — «Mi cuenta», el portal privado del comprador.
 *
 * Dos modos en la misma hoja porque son la misma página:
 *
 *   · `.modo-tarjeta`  — entrar, registrarse, confirmar correo, recuperar
 *     contraseña. Una tarjeta centrada, sin cabecera ni lateral.
 *   · `.modo-portal`   — la cuenta ya abierta: cabecera pública, encabezado,
 *     navegación lateral y secciones.
 *
 * `/cuenta` NO tiene 'unsafe-inline' ni en script-src ni en style-src (ver
 * `_headers`), así que aquí no hay ni un `style="..."` ni un `<style>`: todo
 * lo que varía en tiempo de ejecución entra por variables CSS puestas con
 * `style.setProperty()`, que es CSSOM y la CSP no inspecciona.
 */

:root {
  --papel: var(--color-brand-cream);
  --tarjeta: #fff;
  --tinta: var(--color-brand-ink);
  --apagado: var(--color-mudo);
  --linea: var(--color-linea);
  --linea-fuerte: #C6D0DA;
  --coral: var(--color-brand-coral);
  --coral-oscuro: var(--color-brand-coral-oscuro);
  --coral-suave: #FFECEA;
  --verde: #157f4c;
  --verde-suave: #e8f6ee;
  --ambar: #a06a06;
  --ambar-suave: #fdf3e0;
  --rojo: #b42318;
  --rojo-suave: #fdeceb;
  --serif: var(--font-brand);
  --sans: var(--font-brand);
  --sombra: var(--shadow-soft);
  --ancho: 1280px;
  --r-s: 12px;
  --r-m: 14px;
  --r-l: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.55;
  min-height: 100vh;
  /* Sin scroll horizontal accidental: cualquier hijo que se pase de ancho se
     recorta aquí en vez de empujar la página entera. */
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
img { max-width: 100%; }

/* El foco se ve SIEMPRE, y con el color de marca: navegar con teclado no
   puede ser adivinar dónde estás. */
:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-radius: 4px;
}

.oculto, [hidden] { display: none !important; }

/* Visible solo para lectores de pantalla. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  padding: 10px 16px; border-radius: 999px; background: var(--tinta); color: #fff;
}
.saltar:focus { left: 16px; }

/* ══════════════════ Cabecera pública ══════════════════ */

.cab {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 245, 242, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.cab__int {
  width: min(var(--ancho), calc(100% - 48px));
  margin: 0 auto;
  height: 68px;
  display: flex; align-items: center; gap: 28px;
}
.marca { display: inline-flex; align-items: center; }
/* El logotipo ya lleva el nombre dentro: sin texto al lado. */
.marca__logo { display: block; height: 38px; width: auto; }
.marca__punto {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--coral);
  flex: 0 0 26px;
}
.marca__texto { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; letter-spacing: -.02em; }

.cab__nav { display: flex; align-items: center; gap: 30px; margin: 0 auto; font-size: .89rem; }
.cab__nav a { color: var(--apagado); padding: 6px 2px; }
.cab__nav a:hover { color: var(--tinta); }

.cab__der { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.icono-btn {
  position: relative;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--apagado);
}
.icono-btn:hover { background: #efece7; color: var(--tinta); }
.icono-btn__aviso {
  position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--coral);
}

.avatar {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--coral); color: #fff;
  font-weight: 700; font-size: .86rem;
  overflow: hidden; flex: 0 0 34px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--l { width: 58px; height: 58px; flex-basis: 58px; font-size: 1.25rem; }
.avatar--xl { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.4rem; }

.menu-usuario { position: relative; }
.menu-usuario__btn { display: flex; align-items: center; gap: 9px; padding: 4px 6px 4px 4px; border-radius: 999px; }
.menu-usuario__btn:hover { background: #efece7; }
.menu-usuario__nombre { font-size: .89rem; font-weight: 600; }
.menu-usuario__lista {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  min-width: 220px; padding: 6px;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-m);
  box-shadow: 0 18px 40px -22px rgba(27, 26, 25, .45);
  display: flex; flex-direction: column;
}
.menu-usuario__lista a, .menu-usuario__lista button {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 9px; font-size: .88rem; text-align: left;
}
.menu-usuario__lista a:hover, .menu-usuario__lista button:hover { background: #f4f1ec; }
.menu-usuario__sep { height: 1px; margin: 5px 4px; background: var(--linea); }

.cab__hamburguesa { display: none; }

/* ══════════════════ Estructura ══════════════════ */

.env {
  width: min(var(--ancho), calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0 96px;
}

/* Encabezado de la cuenta */
.hola { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
.hola__texto { min-width: 0; }
.hola h1 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.hola__sub { color: var(--apagado); font-size: .95rem; margin-top: 4px; }
.hola__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: .87rem; color: var(--apagado); }
.hola__avatar { margin-left: auto; }

/* Estado de verificación: nunca solo por color — cada uno lleva su icono y
   su palabra, que es lo que lee quien no distingue verde de ámbar. */
.estado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 8px; border-radius: 999px;
  font-size: .8rem; font-weight: 600;
}
.estado svg { width: 15px; height: 15px; }
.estado--ok { background: var(--verde-suave); color: var(--verde); }
.estado--pend { background: var(--ambar-suave); color: var(--ambar); }
.estado--mal { background: var(--rojo-suave); color: var(--rojo); }

/* Rejilla principal: lateral + contenido */
.rejilla {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* ── Navegación lateral ── */
.lateral {
  position: sticky; top: 88px;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-l);
  padding: 20px 14px 14px;
  box-shadow: var(--sombra);
}
.lateral__yo { display: flex; align-items: center; gap: 12px; padding: 0 6px 18px; }
.lateral__yo strong { display: block; font-size: .95rem; }
.lateral__yo small { display: block; color: var(--apagado); font-size: .76rem; word-break: break-all; }
.lateral__nav { display: flex; flex-direction: column; gap: 2px; }
.lateral__nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px;
  font-size: .9rem; color: var(--tinta);
}
.lateral__nav a:hover { background: #f4f1ec; }
.lateral__nav a[aria-current="page"] { background: var(--coral-suave); color: var(--coral-oscuro); font-weight: 600; }
.lateral__nav a[aria-current="page"] svg { color: var(--coral); }
.lateral__nav svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--apagado); }
.lateral__pie { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); }
.lateral__pie button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: 10px; font-size: .9rem; color: var(--apagado);
}
.lateral__pie button:hover { background: #f4f1ec; color: var(--tinta); }
.lateral__pie svg { width: 19px; height: 19px; }

/* Selector compacto en móvil */
.lateral-movil { display: none; }

/* ── Secciones ── */
.seccion__cab { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.seccion__cab h2 { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; letter-spacing: -.02em; }
.seccion__cab p { color: var(--apagado); font-size: .9rem; }

/* Indicadores */
.indicadores { display: flex; gap: 12px; margin-left: auto; }
.indicador {
  display: flex; align-items: center; gap: 12px;
  min-width: 142px; padding: 14px 18px;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-m);
}
.indicador__icono {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; background: var(--coral-suave); color: var(--coral);
  flex: 0 0 38px;
}
.indicador__icono svg { width: 20px; height: 20px; }
.indicador small { display: block; color: var(--apagado); font-size: .78rem; }
.indicador strong { display: block; font-size: 1.35rem; font-weight: 600; line-height: 1.1; }

/* Reparto de la sección: contenido + columna de tarjetas de apoyo */
.reparto { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 16px; align-items: start; }

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-l);
  padding: 22px; box-shadow: var(--sombra);
}
.tarjeta + .tarjeta { margin-top: 16px; }
.tarjeta > h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.tarjeta > p.ayuda { color: var(--apagado); font-size: .84rem; }

/* ── Estado vacío de la biblioteca ── */
.vacio-bib { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; align-items: center; padding: 22px; }
.vacio-bib__foto { border-radius: var(--r-m); overflow: hidden; aspect-ratio: 3 / 4; background: #e9e5df; }
.vacio-bib__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vacio-bib h3 { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.vacio-bib p { color: var(--apagado); font-size: .92rem; margin: 12px 0 22px; max-width: 44ch; }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: 10px;
  background: var(--coral); color: #fff; font-size: .92rem; font-weight: 600;
}
.btn:hover { background: var(--coral-oscuro); }
.btn:disabled { opacity: .55; cursor: default; }
.btn--ancho { width: 100%; }
.btn--fantasma { background: transparent; color: var(--tinta); border: 1px solid var(--linea-fuerte); }
.btn--fantasma:hover { background: #f4f1ec; }
.btn--s { min-height: 36px; padding: 0 14px; font-size: .84rem; }
.btn--peligro { color: var(--rojo); border-color: #f3c9c5; background: transparent; }
.btn--peligro:hover { background: var(--rojo-suave); }
.enlace { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; font-size: .89rem; }
.enlace:hover { color: var(--coral-oscuro); }
.enlace--coral { color: var(--coral-oscuro); font-weight: 600; }

/* ── Tarjetas de guía ── */
.guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; }
.guia {
  display: flex; flex-direction: column;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-l);
  overflow: hidden; box-shadow: var(--sombra);
}
.guia__foto { position: relative; aspect-ratio: 16 / 10; background: #e9e5df; }
.guia__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guia__cuerpo { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.guia__titulo { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.guia__meta { color: var(--apagado); font-size: .8rem; }
.guia__datos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; color: var(--apagado); font-size: .76rem; }
.guia__acciones { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.guia__acciones .btn { flex: 1; }

/* Progreso del itinerario. El ancho llega por --pct desde el JS (CSSOM). */
.progreso { margin-top: 10px; }
.progreso__barra { height: 6px; border-radius: 999px; background: #eee9e2; overflow: hidden; }
.progreso__hecho { height: 100%; width: calc(var(--pct, 0) * 1%); background: var(--coral); border-radius: 999px; }
.progreso small { display: block; margin-top: 5px; color: var(--apagado); font-size: .74rem; }

/* Estados de una copia */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 600;
  background: #f0ece6; color: var(--apagado);
}
.chip svg { width: 13px; height: 13px; }
.chip--ok { background: var(--verde-suave); color: var(--verde); }
.chip--espera { background: var(--ambar-suave); color: var(--ambar); }
.chip--mal { background: var(--rojo-suave); color: var(--rojo); }
.chip--info { background: #eef2f7; color: #445266; }
.guia__foto .chip { position: absolute; left: 10px; top: 10px; background: rgba(255, 255, 255, .94); }

/* Menú de acciones de una tarjeta */
.acciones { position: relative; }
.acciones__lista {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20;
  min-width: 240px; padding: 6px;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r-m);
  box-shadow: 0 18px 40px -22px rgba(27, 26, 25, .45);
  display: flex; flex-direction: column;
}
.acciones__lista button { padding: 9px 11px; border-radius: 9px; font-size: .86rem; text-align: left; }
.acciones__lista button:hover { background: #f4f1ec; }
.acciones__lista button small { display: block; color: var(--apagado); font-size: .74rem; font-weight: 400; }

/* ── Canje de código ── */
.canje label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; }
.canje input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--linea-fuerte); border-radius: 10px;
  font: inherit; font-size: .95rem; letter-spacing: .06em; background: #fff;
}
.canje input:focus { border-color: var(--coral); outline: none; }
.canje .btn { margin-top: 10px; }
.canje .ayuda { margin-top: 10px; color: var(--apagado); font-size: .8rem; }

/* ── Accesos rápidos ── */
.rapidos { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.rapidos a { display: flex; align-items: center; gap: 11px; padding: 10px 8px; border-radius: 10px; font-size: .89rem; }
.rapidos a:hover { background: #f4f1ec; }
.rapidos svg { width: 18px; height: 18px; color: var(--apagado); }
.rapidos .flecha { margin-left: auto; color: var(--apagado); }

/* ── Tablas (compras) ── */
.tabla-env { overflow-x: auto; }
table.datos { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 620px; }
table.datos th {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea);
  font-size: .73rem; text-transform: uppercase; letter-spacing: .06em; color: var(--apagado);
}
table.datos td { padding: 13px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
table.datos tr:last-child td { border-bottom: 0; }

/* ── Regalos ── */
.regalos { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 14px; }
.regalo { display: flex; gap: 13px; padding: 15px; border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--tarjeta); }
.regalo__foto { width: 74px; height: 92px; flex: 0 0 74px; border-radius: 10px; overflow: hidden; background: #e9e5df; }
.regalo__foto img { width: 100%; height: 100%; object-fit: cover; }
.regalo strong { display: block; font-size: .95rem; }
.regalo small { display: block; color: var(--apagado); font-size: .79rem; }
.regalo blockquote {
  margin-top: 8px; padding-left: 11px; border-left: 2px solid var(--coral);
  color: var(--tinta); font-size: .84rem; font-style: italic;
}

/* ── Favoritos ── */
.favoritos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
/* `color` explícito y no heredado: esta pastilla se usa sobre la foto oscura
   de una recomendación, donde el texto que hay alrededor es blanco. Sin esto,
   el precio salía blanco sobre el fondo blanco de la propia pastilla — la
   tarjeta parecía no tener precio. */
.precio { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: #fff; color: var(--tinta); font-size: .8rem; font-weight: 700; }
.precio--gratis { background: var(--verde-suave); color: var(--verde); }

/* ── Perfil y seguridad ── */
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: .82rem; font-weight: 600; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--linea-fuerte); border-radius: 10px;
  font: inherit; font-size: .92rem; background: #fff; color: var(--tinta);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--coral); outline: none; }
.campo small { color: var(--apagado); font-size: .78rem; }
.campo--error input { border-color: var(--rojo); }
.campo .error { color: var(--rojo); font-size: .79rem; }

.medidor { display: flex; gap: 4px; margin-top: 6px; }
.medidor span { height: 5px; flex: 1; border-radius: 999px; background: #eee9e2; }
.medidor[data-nivel="1"] span:nth-child(-n+1) { background: var(--rojo); }
.medidor[data-nivel="2"] span:nth-child(-n+2) { background: var(--ambar); }
.medidor[data-nivel="3"] span:nth-child(-n+3) { background: #7aa32b; }
.medidor[data-nivel="4"] span { background: var(--verde); }

.sesiones { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sesion { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--linea); border-radius: var(--r-s); }
.sesion strong { font-size: .9rem; }
.sesion small { display: block; color: var(--apagado); font-size: .78rem; }
.sesion .btn { margin-left: auto; }

/* ── Recomendaciones ── */
.recos { margin-top: 40px; }
.recos__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.recos__cab h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.recos__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.reco { position: relative; display: block; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 10; background: #e9e5df; }
.reco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reco__velo { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 19, 18, .82), rgba(20, 19, 18, .04) 62%); }
.reco__txt { position: absolute; left: 18px; right: 18px; bottom: 15px; color: #fff; display: flex; align-items: flex-end; gap: 12px; }
.reco__txt strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; display: block; }
.reco__txt small { display: block; font-size: .8rem; opacity: .86; }
.reco .precio { margin-left: auto; flex: 0 0 auto; }

/* ── Avisos y estados de carga ── */
.aviso {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px; border-radius: var(--r-s); font-size: .87rem;
  background: #eef2f7; color: #3d4a5c;
}
.aviso--ok { background: var(--verde-suave); color: var(--verde); }
.aviso--err { background: var(--rojo-suave); color: var(--rojo); }
.aviso--pend { background: var(--ambar-suave); color: var(--ambar); }
.aviso svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }
.aviso .btn { margin-left: auto; }

.esqueleto { border-radius: var(--r-m); background: linear-gradient(90deg, #eee9e2, #f5f2ed, #eee9e2); background-size: 200% 100%; animation: brillo 1.3s linear infinite; }
.esqueleto--tarjeta { height: 240px; }
@keyframes brillo { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } }

.spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

.apagado { color: var(--apagado); }
.pequeno { font-size: .82rem; }
.centrado { text-align: center; }
.sin-margen { margin: 0; }

/* ══════════════════ Aviso de almacenamiento ══════════════════ */

.aviso-alm {
  position: fixed; left: 50%; bottom: 16px; z-index: 500;
  transform: translateX(-50%);
  width: min(760px, calc(100% - 24px));
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px 12px 18px;
  background: #1f2430; color: #fff; border-radius: 999px;
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .6);
  font-size: .86rem;
}
.aviso-alm p { flex: 1; min-width: 0; }
.aviso-alm a { color: #ffb3bd; text-decoration: underline; text-underline-offset: 3px; }
.aviso-alm .btn { min-height: 36px; padding: 0 18px; }

/* ══════════════════ Modo tarjeta (entrar / registrarse / tokens) ══════════════════ */

.modo-tarjeta .env { display: grid; place-items: center; min-height: calc(100vh - 68px); padding: 32px 0 64px; }
.tarjeta-auth {
  width: 100%; max-width: 430px;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px;
  padding: 32px 30px; box-shadow: var(--sombra);
}
/* `.marca`/`.marca__logo` son compartidas con la cabecera del portal (.cab);
   aquí, dentro de la tarjeta, el logo vive solo —sin barra de navegación
   alrededor que le dé aire— así que necesita su propio tamaño y una
   separación real antes del título, o queda pegado al «Crea tu cuenta». */
.tarjeta-auth .marca { margin-bottom: 22px; }
.tarjeta-auth .marca__logo { height: 44px; }
.tarjeta-auth h1 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin-bottom: 8px; line-height: 1.2; }
.tarjeta-auth p.lead { color: var(--apagado); font-size: .9rem; margin-bottom: 20px; }
.tarjeta-auth .field { margin-bottom: 14px; }
.tarjeta-auth label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 6px; }
.tarjeta-auth input {
  width: 100%; border: 1px solid var(--linea-fuerte); border-radius: 10px;
  padding: 11px 13px; font: inherit; font-size: .92rem; background: #fff;
}
.tarjeta-auth input:focus { border-color: var(--coral); outline: none; }
.tarjeta-auth .btn { width: 100%; margin-top: 4px; }
.tarjeta-auth .btn.alt { background: transparent; color: var(--tinta); border: 1px solid var(--linea-fuerte); margin-top: 9px; }
.tarjeta-auth .btn.alt:hover { background: #f4f1ec; }
.msg { margin-top: 16px; padding: 12px 14px; border-radius: 10px; font-size: .86rem; display: none; }
.msg.show { display: block; }
.msg.ok { background: var(--verde-suave); color: var(--verde); }
.msg.err { background: var(--rojo-suave); color: var(--rojo); }
.msg.info { background: #eef2f7; color: #3d4a5c; }
.links { margin-top: 18px; font-size: .83rem; color: var(--apagado); text-align: center; }
.links a { color: var(--azul, var(--color-brand-blue, #002D55)); font-weight: 600; }
.links a:hover { text-decoration: underline; }
.pista-campo { color: var(--apagado); font-size: .78rem; }
.texto-apagado { color: var(--apagado); }
.enlace-heredado { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.vacio { padding: 26px 18px; text-align: center; color: var(--apagado); font-size: .88rem; border: 1px dashed var(--linea-fuerte); border-radius: var(--r-m); }
.vacio a { color: var(--azul, var(--color-brand-blue, #002D55)); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vacio .btn { margin-top: 12px; }
/* `.vacio a` subraya TODO enlace de dentro, y eso alcanzaba también al botón:
   un botón subrayado se lee como un enlace roto (se veía en «Explorar guías»
   de «Mis compras»). El subrayado es para los enlaces de texto, no para él. */
.vacio .btn { text-decoration: none; }

/* ── «Mis ventas» ── */
/* `.indicadores` nació en la cabecera de sección, pegado a la derecha con
   `margin-left:auto`. Aquí vive dentro de la tarjeta y ocupa su propia fila. */
.indicadores--ventas { margin: 0 0 18px; flex-wrap: wrap; }
.indicadores--ventas .indicador {
  flex: 1 1 142px; flex-direction: column; align-items: flex-start; gap: 2px;
}

/* Los estados vacíos del resto del portal son un aviso de una línea. Estos dos
   son la única puerta de entrada a vender, así que llevan titular y texto. */
.vacio--vender { padding: 30px 22px; color: var(--tinta); }
.vacio--vender h3 {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.2;
}
.vacio--vender p { color: var(--apagado); font-size: .92rem; margin: 10px auto 0; max-width: 52ch; }

/* ══════════════════ Tablet ══════════════════ */

@media (max-width: 1080px) {
  .env, .cab__int { width: calc(100% - 36px); }
  .rejilla { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
  .reparto { grid-template-columns: minmax(0, 1fr); }
  .indicadores { width: 100%; margin-left: 0; }
  .indicador { flex: 1; min-width: 0; }
  .recos__lista {
    /* Desplazables en tablet: tres tarjetas de 300 px no caben, y encogerlas
       hasta que quepan deja fotos ilegibles. */
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
  }
  .recos__lista .reco { flex: 0 0 300px; scroll-snap-align: start; }
  .vacio-bib { grid-template-columns: 200px minmax(0, 1fr); }
}

/* ══════════════════ Móvil ══════════════════ */

@media (max-width: 720px) {
  .env, .cab__int { width: calc(100% - 28px); }
  .env { padding: 22px 0 84px; }
  .cab__int { height: 60px; gap: 12px; }
  .cab__nav { display: none; }
  .cab__nav--abierta {
    display: flex; position: absolute; left: 0; right: 0; top: 60px;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px;
    background: var(--tarjeta); border-bottom: 1px solid var(--linea);
  }
  .cab__nav--abierta a { padding: 12px 14px; border-radius: 10px; font-size: .95rem; }
  .cab__hamburguesa { display: grid; }
  .menu-usuario__nombre { display: none; }

  .rejilla { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
  .lateral-movil {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -14px 16px; padding: 0 14px 4px;
  }
  .lateral-movil::-webkit-scrollbar { display: none; }
  .lateral-movil a {
    flex: 0 0 auto; padding: 9px 15px; border-radius: 999px;
    border: 1px solid var(--linea); background: var(--tarjeta);
    font-size: .87rem; white-space: nowrap;
  }
  .lateral-movil a[aria-current="page"] { background: var(--coral); border-color: var(--coral); color: #fff; font-weight: 600; }

  .hola { flex-direction: row-reverse; align-items: center; }
  .hola__avatar { margin-left: 0; }
  .hola h1 { font-size: 1.7rem; }

  .indicadores { flex-wrap: wrap; }
  .indicador { min-width: calc(50% - 6px); padding: 12px 14px; }

  .guias, .favoritos, .regalos { grid-template-columns: minmax(0, 1fr); }
  .guia__acciones { flex-wrap: wrap; }
  .guia__acciones .btn { flex: 1 1 100%; }

  .vacio-bib { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .vacio-bib__foto { aspect-ratio: 16 / 10; }

  .recos__lista .reco { flex-basis: 260px; }

  .aviso-alm { flex-wrap: wrap; border-radius: var(--r-m); padding: 14px 16px; }
  .aviso-alm .btn { width: 100%; }

  /* Todo lo pulsable llega a los 44 px que pide una yema de dedo. */
  .btn--s, .icono-btn, .lateral-movil a { min-height: 44px; }
}

/* Zoom al 200 %: la rejilla ya cae a una columna por ancho efectivo, y aquí
   se retira el pegado del lateral, que a esa escala tapa media pantalla. */
@media (max-height: 560px) {
  .lateral { position: static; }
  .cab { position: static; }
}

/* ─── Aceptación de los documentos legales en el alta ───
   La línea entera es zona pulsable (`<label for>`): una casilla suelta de
   17 px es un objetivo imposible en un móvil. Los dos enlaces abren en otra
   pestaña porque leerlos no puede costar perder lo ya tecleado. */
.acepta{display:flex;gap:10px;align-items:flex-start;margin:2px 0 16px;
  font-size:.84rem;line-height:1.45;color:var(--apagado,#667);cursor:pointer;text-align:left}
.acepta input{flex:0 0 auto;margin-top:2px;width:17px;height:17px}
.acepta a{text-decoration:underline;text-underline-offset:2px}
.acepta input:focus-visible{outline:3px solid currentColor;outline-offset:2px}

/* ── Mi perfil viajero (0041): chips del cuestionario, versión cuenta ── */
/* LAS PÍLDORAS IBAN UNA POR LÍNEA, y el motivo no estaba aquí: `.v-chips`
   lleva también la clase `.campo`, que es `display:flex; flex-direction:
   column`. Cada etiqueta se convertía en una fila del flex y la lista de
   intereses medía media pantalla. Se recupera el flujo horizontal con envolver
   —el `display` de aquí gana al de `.campo` por venir después—. */
.v-chips { border: 0; padding: 0; display: flex; flex-flow: row wrap; gap: 8px; }
.v-chips legend { flex: 0 0 100%; }
.v-chips legend { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.v-chips label { position: relative; display: inline-flex; margin: 0; }
.v-chips input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.v-chips span { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 13px;
  border: 1.5px solid var(--linea-fuerte); border-radius: 99px; font-size: .86rem; background: var(--tarjeta); }
.v-chips input:checked + span { background: var(--azul, var(--color-brand-blue, #002D55));
  border-color: var(--azul, var(--color-brand-blue, #002D55)); color: #fff; }
.v-chips input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }

/* ── Cabecera de «Mi perfil»: foto, progreso y el porqué de rellenarlo ──────
   Antes no había forma de poner la foto (se guardaba en `users.avatar_url`
   pero ninguna pantalla la pedía) y el formulario empezaba en frío, con veinte
   campos y ninguna señal de avance. */
.perfil-cab { display: flex; align-items: flex-start; gap: 26px; flex-wrap: wrap; }
.perfil-cab__foto { position: relative; flex: none; width: 104px; text-align: center; }
.perfil-cab__foto img,
.perfil-cab__inicial {
  display: block; width: 104px; height: 104px; border-radius: 50%;
  object-fit: cover; background: var(--coral, #ff3b2f); color: #fff;
  font: 700 2.4rem/104px system-ui, sans-serif; text-align: center;
}
.perfil-cab__cambiar {
  margin-top: 10px; padding: 6px 12px; border: 1px solid var(--linea, #d8dce0);
  border-radius: 999px; background: #fff; color: inherit;
  font-size: .76rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.perfil-cab__cambiar:hover { border-color: var(--coral, #ff3b2f); color: var(--coral, #ff3b2f); }
.perfil-cab__cambiar:focus-visible { outline: 2px solid var(--coral, #ff3b2f); outline-offset: 2px; }
.perfil-cab__cambiar[disabled] { opacity: .6; cursor: progress; }

.perfil-cab__texto { flex: 1 1 260px; min-width: 0; }
.perfil-cab__hola { margin: 0 0 2px; font-size: 1.05rem; font-weight: 700; }

.perfil-progreso { margin: 16px 0 12px; }
.perfil-progreso__barra {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(0, 27, 53, .09);
}
.perfil-progreso__barra span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--coral, #ff3b2f); transition: width .35s ease;
}
.perfil-progreso__texto { margin: 7px 0 0; font-size: .8rem; color: var(--apagado, #6d7b87); }
.perfil-progreso__texto strong { color: inherit; font-size: .92rem; }

.perfil-cab__premio {
  margin: 0; padding: 11px 14px; border-left: 3px solid var(--coral, #ff3b2f);
  background: rgba(255, 59, 47, .07); font-size: .86rem; line-height: 1.45;
}

@media (max-width: 560px) {
  .perfil-cab { gap: 18px; }
  .perfil-cab__foto { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; }
  .perfil-cab__foto img, .perfil-cab__inicial { width: 72px; height: 72px; font-size: 1.7rem; line-height: 72px; }
  .perfil-cab__cambiar { margin-top: 0; }
}