/* KairSun Web — mock 1:1 de Logros (pantalla 50).
 *
 * Contenido: vitrina con anillo de oro (N/20), «Lo próximo» con progreso y
 * premio real, destacados reclamados, packs cosméticos CONDICIONALES, catálogo
 * de premios del ledger, filtros con conteo y las 20 medallas con los SVG
 * reales (locked / progress / unlocked), más el detalle con «Sumar ahora» y el
 * estado de reclamo server-authoritative.
 *
 * Reglas duras: solo CSS, sin JS, sin estilos inline, sin prioridad forzada.
 * Prefijo .lg- para no rozar otras pantallas. El interior usa calc(N * var(--u))
 * como pide ks-screens-base.css (393dp de ancho base).
 *
 * Evidencia (repo app, READ-ONLY):
 * - Catálogo y metas: domain/achievement_catalog.dart:22-178.
 * - Orden y acción: presentation/logros_en_pantalla.dart:41-105.
 * - Vitrina/anillo/cards/filtros/detalle: screens/achievements_screen.dart.
 * - Medalla de 3 estados: widgets/medalla_de_logro.dart.
 * - Premios reales: supabase/functions/claim-achievement/index.ts:22-51.
 * - Assets: assets/images/app/logros/** (PROVENANCE.json documenta el mapeo).
 */

[data-screen="logros"] {
  --lg-gold: #ffd777;
  --lg-gold-hi: #ffe9b8;
  --lg-gold-deep: #e8a93e;
  --lg-gold-ink: #2b1d00;
  --lg-surface: #14161c;
  --lg-elev: #1d2029;
  --lg-glass-line: rgba(255, 255, 255, 0.14);
  --lg-ok: #6bffb0;

  /* Colores por categoría: los mismos que exportan los SVG reales
   * (assets/images/app/logros/PROVENANCE.json → exports[].category_color). */
  --lg-skills: #a855f7;
  --lg-routine: #22c55e;
  --lg-water: #0ea5e9;
  --lg-mood: #ec4899;
  --lg-notes: #eab308;
  --lg-streak: #f97316;
  --lg-detox: #6e7bff;
  --lg-meta: #f5c451;
}

/* ── Base de la pantalla ─────────────────────────────────────────────────── */

.lg-sprite {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.lg-i {
  display: block;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  fill: currentColor;
  flex: none;
}

.lg-screen {
  display: block;
}

.lg-app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Safe-area superior: la isla del bezel ocupa hasta 51u. */
  padding-top: calc(44 * var(--u));
  color: var(--ks-text);
  font-family: var(--ks-font);
  background:
    radial-gradient(120% 55% at 50% -12%, rgba(245, 196, 81, 0.10), transparent 62%),
    var(--ks-bg);
}

/* ── App bar ─────────────────────────────────────────────────────────────── */

.lg-topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(2 * var(--u));
}
.lg-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: calc(13 * var(--u));
  color: var(--ks-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--lg-glass-line);
  flex: none;
}
.lg-back .lg-i {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
.lg-topbar__title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: calc(18 * var(--u));
  font-weight: 900;
  letter-spacing: 0.03em;
}
.lg-topbar__pad {
  width: calc(38 * var(--u));
  flex: none;
}

/* ── Toggle Vitrina | Todos sobre el contrato de ks-screens-base.css ─────── */

.lg-view {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.lg-view .ks-view__tabs {
  align-self: center;
  margin: calc(6 * var(--u)) 0 calc(6 * var(--u));
  flex: none;
}
.lg-view .ks-view__panes {
  flex: 1;
  min-height: 0;
}
.lg-view .ks-pane {
  position: relative;
  height: 100%;
}

.lg-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lg-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.lg-scroll::-webkit-scrollbar {
  width: calc(3 * var(--u));
}
.lg-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

[data-screen="logros"] a:focus-visible {
  outline: 2px solid var(--ks-gold);
  outline-offset: 2px;
  border-radius: calc(12 * var(--u));
}

/* ── Vitrina: anillo de oro + saludo ─────────────────────────────────────── */

.lg-vitrina {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u));
}

.lg-hero {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: calc(16 * var(--u));
  border-radius: calc(24 * var(--u));
  background: linear-gradient(150deg, #2a2210, var(--lg-surface));
  border: 1px solid rgba(245, 196, 81, 0.40);
  box-shadow: 0 calc(12 * var(--u)) calc(28 * var(--u)) rgba(245, 196, 81, 0.14);
}

/* Anillo de oro: el CustomPaint de la app (achievements_screen.dart:414-455)
 * llevado a conic-gradient + máscara para el hueco del centro. */
.lg-ring {
  position: relative;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  flex: none;
}
.lg-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    var(--lg-gold) calc(var(--p, 0) * 1%),
    rgba(255, 255, 255, 0.10) 0
  );
  -webkit-mask: radial-gradient(
    closest-side,
    transparent calc(100% - calc(7 * var(--u))),
    #000 calc(100% - calc(7 * var(--u)) + 1px)
  );
  mask: radial-gradient(
    closest-side,
    transparent calc(100% - calc(7 * var(--u))),
    #000 calc(100% - calc(7 * var(--u)) + 1px)
  );
}
.lg-ring__in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(1 * var(--u));
}
.lg-ring__in .lg-i {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: var(--lg-gold);
}
.lg-ring__num {
  font-size: calc(22 * var(--u));
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lg-ring__num i {
  font-style: normal;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  opacity: 0.62;
}

.lg-hero__text {
  flex: 1;
  min-width: 0;
}
.lg-hero__text h2 {
  margin: 0;
  font-size: calc(17 * var(--u));
  font-weight: 900;
  line-height: 1.2;
}
.lg-hero__text p {
  margin: calc(4 * var(--u)) 0 0;
  font-size: calc(13.5 * var(--u));
  font-weight: 600;
  color: var(--ks-text-2);
}

/* ── Lo próximo ──────────────────────────────────────────────────────────── */

.lg-next {
  display: block;
  padding: calc(12 * var(--u)) calc(13 * var(--u));
  border-radius: calc(20 * var(--u));
  text-decoration: none;
  color: var(--ks-text);
  background: #231c32;
  background: color-mix(in srgb, var(--c) 10%, var(--lg-surface));
  border: 1px solid rgba(168, 85, 247, 0.42);
  border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.lg-next__head {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
}
.lg-next__medal {
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  flex: none;
}
.lg-next__body {
  flex: 1;
  min-width: 0;
}
.lg-next__kicker,
.lg-next__title,
.lg-next__prog {
  display: block;
}
.lg-next__kicker {
  margin: 0;
  font-size: calc(10.5 * var(--u));
  font-weight: 900;
  letter-spacing: 0.13em;
  color: var(--lg-gold);
}
.lg-next__title {
  margin: calc(2 * var(--u)) 0 0;
  font-size: calc(15 * var(--u));
  font-weight: 800;
  line-height: 1.2;
}
.lg-next__prog {
  margin: calc(2 * var(--u)) 0 0;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  color: var(--ks-text-2);
  font-variant-numeric: tabular-nums;
}
.lg-next__chev {
  color: var(--ks-muted);
  display: inline-flex;
  flex: none;
}
.lg-next__bar {
  margin-top: calc(10 * var(--u));
}
.lg-bar {
  display: block;
  height: calc(7 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.lg-bar > i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 1%);
  border-radius: inherit;
  background: linear-gradient(90deg, #cfa2fb, var(--c));
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #ffffff), var(--c));
}

/* Premio (+Seeds / +Suns) */
.lg-reward {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
  font-size: calc(12 * var(--u));
  font-weight: 800;
  color: var(--lg-gold-hi);
  background: rgba(245, 196, 81, 0.13);
  border: 1px solid rgba(245, 196, 81, 0.42);
}
.lg-reward img {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  object-fit: contain;
  flex: none;
}
.lg-reward b {
  font-variant-numeric: tabular-nums;
}
.lg-reward span {
  font-weight: 700;
  color: var(--ks-text-2);
}
.lg-next .lg-reward {
  margin-top: calc(10 * var(--u));
}

/* ── Destacados (desbloqueados recientes) ────────────────────────────────── */

.lg-sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  margin: calc(6 * var(--u)) calc(2 * var(--u)) 0;
}
.lg-sec h3 {
  margin: 0;
  font-size: calc(11 * var(--u));
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ks-text-2);
}
.lg-sec small {
  font-size: calc(10.5 * var(--u));
  color: var(--ks-muted);
}

.lg-feat {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
  margin-top: calc(8 * var(--u));
}
.lg-feat__row {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: calc(16 * var(--u));
  text-decoration: none;
  color: var(--ks-text);
  background: #201b2e;
  background: color-mix(in srgb, var(--c) 8%, var(--lg-surface));
  border: 1px solid rgba(168, 85, 247, 0.32);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
}
.lg-feat__row img {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  flex: none;
}
.lg-feat__body {
  flex: 1;
  min-width: 0;
}
.lg-feat__body b {
  display: block;
  font-size: calc(13.5 * var(--u));
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lg-feat__body small {
  display: block;
  margin-top: calc(1 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
  color: #c085f9;
  color: color-mix(in srgb, var(--c) 72%, #ffffff);
}
.lg-feat__state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--lg-ok);
}
.lg-feat__state .lg-i {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}

/* ── Packs condicionales + premios del catálogo ──────────────────────────── */

.lg-packs {
  display: flex;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u));
  border-radius: calc(20 * var(--u));
  background: linear-gradient(155deg, rgba(110, 123, 255, 0.12), rgba(110, 123, 255, 0.03)),
    var(--lg-surface);
  border: 1px dashed rgba(110, 123, 255, 0.45);
}
.lg-packs__art {
  position: relative;
  width: calc(74 * var(--u));
  height: calc(74 * var(--u));
  flex: none;
}
.lg-packs__art img:first-child {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  object-fit: contain;
}
.lg-packs__art img:last-child {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  object-fit: contain;
}
.lg-packs__body {
  flex: 1;
  min-width: 0;
}
.lg-packs__body h3 {
  margin: 0;
  font-size: calc(13 * var(--u));
  font-weight: 800;
}
.lg-packs__body p {
  margin: calc(4 * var(--u)) 0 0;
  font-size: calc(10.5 * var(--u));
  line-height: 1.45;
  color: var(--ks-text-2);
}
.lg-packs__flag {
  display: inline-flex;
  margin-top: calc(7 * var(--u));
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  font-size: calc(9 * var(--u));
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #c3caff;
  background: rgba(110, 123, 255, 0.16);
  border: 1px solid rgba(110, 123, 255, 0.5);
}

.lg-prizes {
  padding: calc(12 * var(--u)) calc(13 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--lg-elev);
  border: 1px solid var(--lg-glass-line);
}
.lg-prizes h3 {
  margin: 0;
  font-size: calc(11 * var(--u));
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ks-text-2);
}
.lg-prizes ul {
  list-style: none;
  margin: calc(9 * var(--u)) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
}
.lg-prizes li {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(11.5 * var(--u));
  color: var(--ks-text-2);
}
.lg-prizes li img {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  object-fit: contain;
  flex: none;
}
.lg-prizes li b {
  color: var(--ks-text);
  font-weight: 800;
}
.lg-prizes li .lg-num {
  margin-left: auto;
  font-weight: 800;
  color: var(--lg-gold-hi);
  font-variant-numeric: tabular-nums;
}
.lg-prizes__note {
  margin: calc(9 * var(--u)) 0 0;
  font-size: calc(9.5 * var(--u));
  line-height: 1.45;
  color: var(--ks-muted);
}

/* ── Filtros con conteo (radio + :checked, sin JS) ───────────────────────── */

.lg-todos {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u));
}
.lg-filters {
  position: relative;
}
.lg-filters__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
}
.lg-chips {
  display: flex;
  gap: calc(7 * var(--u));
  overflow-x: auto;
  padding-bottom: calc(2 * var(--u));
  scrollbar-width: none;
  margin: 0 calc(-12 * var(--u));
  padding-left: calc(12 * var(--u));
  padding-right: calc(12 * var(--u));
}
.lg-chips::-webkit-scrollbar {
  display: none;
}
.lg-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-height: calc(40 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: 999px;
  font-size: calc(12 * var(--u));
  font-weight: 800;
  white-space: nowrap;
  color: var(--ks-text-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--lg-glass-line);
  cursor: pointer;
}
.lg-chip .lg-i {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  color: var(--ks-muted);
}
.lg-chip b {
  font-size: calc(11 * var(--u));
  font-weight: 700;
  color: var(--ks-muted);
  font-variant-numeric: tabular-nums;
}
.lg-chip--all .lg-i {
  color: var(--ks-text-2);
}

/* Chip activo: el color de la categoría elige borde y tinte. */
#lgf-todos:checked ~ .lg-chips label[for="lgf-todos"] {
  color: var(--ks-text);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.42);
}
#lgf-skills:checked ~ .lg-chips label[for="lgf-skills"],
#lgf-routine:checked ~ .lg-chips label[for="lgf-routine"],
#lgf-water:checked ~ .lg-chips label[for="lgf-water"],
#lgf-mood:checked ~ .lg-chips label[for="lgf-mood"],
#lgf-notes:checked ~ .lg-chips label[for="lgf-notes"],
#lgf-streak:checked ~ .lg-chips label[for="lgf-streak"],
#lgf-detox:checked ~ .lg-chips label[for="lgf-detox"],
#lgf-meta:checked ~ .lg-chips label[for="lgf-meta"] {
  color: var(--c-ink);
  background: rgba(168, 85, 247, 0.2);
  background: color-mix(in srgb, var(--c) 20%, transparent);
  border-color: rgba(168, 85, 247, 0.58);
  border-color: color-mix(in srgb, var(--c) 58%, transparent);
}
#lgf-skills:checked ~ .lg-chips label[for="lgf-skills"] .lg-i,
#lgf-routine:checked ~ .lg-chips label[for="lgf-routine"] .lg-i,
#lgf-water:checked ~ .lg-chips label[for="lgf-water"] .lg-i,
#lgf-mood:checked ~ .lg-chips label[for="lgf-mood"] .lg-i,
#lgf-notes:checked ~ .lg-chips label[for="lgf-notes"] .lg-i,
#lgf-streak:checked ~ .lg-chips label[for="lgf-streak"] .lg-i,
#lgf-detox:checked ~ .lg-chips label[for="lgf-detox"] .lg-i,
#lgf-meta:checked ~ .lg-chips label[for="lgf-meta"] .lg-i {
  color: var(--c-ink);
}
#lgf-skills:checked ~ .lg-chips label[for="lgf-skills"] b,
#lgf-routine:checked ~ .lg-chips label[for="lgf-routine"] b,
#lgf-water:checked ~ .lg-chips label[for="lgf-water"] b,
#lgf-mood:checked ~ .lg-chips label[for="lgf-mood"] b,
#lgf-notes:checked ~ .lg-chips label[for="lgf-notes"] b,
#lgf-streak:checked ~ .lg-chips label[for="lgf-streak"] b,
#lgf-detox:checked ~ .lg-chips label[for="lgf-detox"] b,
#lgf-meta:checked ~ .lg-chips label[for="lgf-meta"] b {
  color: #cfa2fb;
  color: color-mix(in srgb, var(--c) 55%, #ffffff);
}

/* Foco por teclado: el radio es el control; el chip es su etiqueta. */
#lgf-todos:focus-visible ~ .lg-chips label[for="lgf-todos"],
#lgf-skills:focus-visible ~ .lg-chips label[for="lgf-skills"],
#lgf-routine:focus-visible ~ .lg-chips label[for="lgf-routine"],
#lgf-water:focus-visible ~ .lg-chips label[for="lgf-water"],
#lgf-mood:focus-visible ~ .lg-chips label[for="lgf-mood"],
#lgf-notes:focus-visible ~ .lg-chips label[for="lgf-notes"],
#lgf-streak:focus-visible ~ .lg-chips label[for="lgf-streak"],
#lgf-detox:focus-visible ~ .lg-chips label[for="lgf-detox"],
#lgf-meta:focus-visible ~ .lg-chips label[for="lgf-meta"] {
  outline: 2px solid var(--ks-gold);
  outline-offset: 2px;
}

/* ── Grilla de medallas ──────────────────────────────────────────────────── */

.lg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(12 * var(--u));
}
/* Sin JS: el filtro visible es el que está :checked. */
.lg-grid .lg-card {
  display: none;
}
#lgf-todos:checked ~ .lg-grid .lg-card {
  display: flex;
}
#lgf-skills:checked ~ .lg-grid .lg--skills,
#lgf-routine:checked ~ .lg-grid .lg--routine,
#lgf-water:checked ~ .lg-grid .lg--water,
#lgf-mood:checked ~ .lg-grid .lg--mood,
#lgf-notes:checked ~ .lg-grid .lg--notes,
#lgf-streak:checked ~ .lg-grid .lg--streak,
#lgf-detox:checked ~ .lg-grid .lg--detox,
#lgf-meta:checked ~ .lg-grid .lg--meta {
  display: flex;
}

.lg-card {
  flex-direction: column;
  align-items: center;
  /* Alto fijo con texto adentro, como la celda de la app
   * (achievements_screen.dart:136: 100 + 86 * crecer). */
  min-height: calc(186 * var(--u));
  padding: calc(14 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(20 * var(--u));
  text-align: center;
  text-decoration: none;
  color: var(--ks-text);
  background: var(--lg-surface);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.35);
}
.lg-card__medal {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  flex: none;
}
.lg-card__title {
  margin-top: calc(10 * var(--u));
  flex: 1;
  font-size: calc(13.5 * var(--u));
  font-weight: 800;
  line-height: 1.2;
  color: var(--ks-text-2);
  overflow-wrap: anywhere;
}
.lg-card__foot {
  margin-top: calc(4 * var(--u));
  max-width: 100%;
  font-size: calc(12 * var(--u));
  font-weight: 800;
  color: var(--ks-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* Desbloqueada: metal del color de la categoría + halo + tinta clara. */
.lg-card--unlocked {
  background: linear-gradient(
    180deg,
    #2c203f,
    var(--lg-surface)
  );
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c) 16%, var(--lg-surface)),
    var(--lg-surface)
  );
  border: 1.4px solid rgba(168, 85, 247, 0.55);
  border: 1.4px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u))
    rgba(168, 85, 247, 0.22);
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u))
    color-mix(in srgb, var(--c) 22%, transparent);
}
.lg-card--unlocked .lg-card__title {
  color: var(--ks-text);
}
.lg-card--unlocked .lg-card__foot {
  color: var(--c-ink);
}
/* Clases de categoría: color + tinta legible sobre oscuro. */
.lg--skills { --c: var(--lg-skills); --c-ink: #d8b4fe; }
.lg--routine { --c: var(--lg-routine); --c-ink: #86efac; }
.lg--water { --c: var(--lg-water); --c-ink: #7dd3fc; }
.lg--mood { --c: var(--lg-mood); --c-ink: #f9a8d4; }
.lg--notes { --c: var(--lg-notes); --c-ink: #fde047; }
.lg--streak { --c: var(--lg-streak); --c-ink: #fdba74; }
.lg--detox { --c: var(--lg-detox); --c-ink: #b4bcff; }
.lg--meta { --c: var(--lg-meta); --c-ink: #ffe9b8; }

/* Anchos de progreso usados por barras y anillo (sin estilos inline). */
.lg-p--23 { --p: 23; }
.lg-p--27 { --p: 27; }
.lg-p--29 { --p: 29; }
.lg-p--34 { --p: 34; }
.lg-p--40 { --p: 40; }
.lg-p--43 { --p: 43; }
.lg-p--50 { --p: 50; }
.lg-p--55 { --p: 55; }

/* ── Detalle (bottom sheet sobre scrim, como la app) ─────────────────────── */

.lg-stack {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: calc(44 * var(--u));
  filter: blur(calc(2.5 * var(--u)));
  opacity: 0.42;
  pointer-events: none;
}
.lg-stack__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u));
}
.lg-stack__bar h2 {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: calc(18 * var(--u));
  font-weight: 900;
}
.lg-stack__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(12 * var(--u));
  padding: 0 calc(12 * var(--u));
}

.lg-scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, 0.62);
}

.lg-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 94%;
  display: flex;
  flex-direction: column;
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  background: linear-gradient(
      180deg,
      #2c203f,
      var(--lg-surface) 45%
    );
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) 16%, var(--lg-surface)),
      var(--lg-surface) 45%
    );
  border-top: 1px solid rgba(168, 85, 247, 0.45);
  border-top: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: 0 calc(-16 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.55);
}
.lg-sheet--mood { --c: var(--lg-mood); --c-ink: #f9a8d4; }
.lg-sheet--streak { --c: var(--lg-streak); --c-ink: #fdba74; }
.lg-sheet__grab {
  align-self: center;
  width: calc(36 * var(--u));
  height: calc(4 * var(--u));
  margin: calc(8 * var(--u)) 0 calc(4 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.20);
  flex: none;
}
.lg-sheet__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u));
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.lg-sheet__scroll::-webkit-scrollbar {
  width: calc(3 * var(--u));
}
.lg-sheet__scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}
.lg-sheet__medal {
  width: calc(104 * var(--u));
  height: calc(104 * var(--u));
  flex: none;
}
.lg-sheet__title {
  margin: 0;
  text-align: center;
  font-size: calc(22 * var(--u));
  font-weight: 900;
  line-height: 1.2;
}
.lg-sheet__desc {
  margin: 0;
  text-align: center;
  font-size: calc(15 * var(--u));
  line-height: 1.45;
  color: var(--ks-text-2);
}
.lg-sheet__bar {
  width: 100%;
  margin-top: calc(6 * var(--u));
}
.lg-bar--thick {
  height: calc(10 * var(--u));
}
.lg-sheet__prog {
  margin: 0;
  font-size: calc(13.5 * var(--u));
  font-weight: 700;
  color: var(--ks-text-2);
  font-variant-numeric: tabular-nums;
}
.lg-sheet__reward {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-top: calc(4 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border-radius: calc(14 * var(--u));
  color: var(--lg-gold-hi);
  background: rgba(245, 196, 81, 0.12);
  border: 1px solid rgba(245, 196, 81, 0.42);
}
.lg-sheet__reward img {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  object-fit: contain;
  flex: none;
}
.lg-sheet__reward b {
  font-size: calc(15 * var(--u));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.lg-sheet__reward span {
  font-size: calc(11 * var(--u));
  font-weight: 700;
  color: var(--ks-text-2);
}
.lg-sheet__unlocked {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(9 * var(--u)) calc(14 * var(--u));
  border-radius: calc(14 * var(--u));
  font-size: calc(13.5 * var(--u));
  font-weight: 800;
  color: var(--c-ink);
  background: rgba(168, 85, 247, 0.16);
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid rgba(168, 85, 247, 0.5);
  border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
}
.lg-sheet__unlocked .lg-i {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}
.lg-claimstate {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(6 * var(--u)) calc(11 * var(--u));
  border-radius: calc(12 * var(--u));
  font-size: calc(11.5 * var(--u));
  font-weight: 900;
  letter-spacing: 0.02em;
}
.lg-claimstate--claimed {
  color: var(--lg-ok);
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.42);
}
.lg-sheet__note {
  margin: 0;
  text-align: center;
  font-size: calc(10.5 * var(--u));
  line-height: 1.5;
  color: var(--ks-muted);
}
.lg-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  width: 100%;
  min-height: calc(52 * var(--u));
  margin-top: calc(8 * var(--u));
  border-radius: calc(18 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: var(--c, var(--lg-gold));
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u))
    rgba(168, 85, 247, 0.35);
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u))
    color-mix(in srgb, var(--c, var(--lg-gold)) 35%, transparent);
}
.lg-cta .lg-i {
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
}

/* Ciclo del cobro server-authoritative (achievement_unlock_listener.dart). */
.lg-claimflow {
  list-style: none;
  width: 100%;
  margin: calc(6 * var(--u)) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}
.lg-claimflow__step {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(7 * var(--u)) calc(10 * var(--u));
  border-radius: calc(13 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 700;
  color: var(--ks-muted);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lg-claimflow__step .lg-i {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}
.lg-claimflow__step--done {
  color: var(--ks-text-2);
}
.lg-claimflow__step--done .lg-i {
  color: var(--lg-ok);
}
.lg-claimflow__step--now {
  color: var(--lg-ok);
  font-weight: 900;
  background: rgba(16, 185, 129, 0.13);
  border-color: rgba(16, 185, 129, 0.42);
}

/* ── Panel de notas (mock web, fuera del teléfono) ───────────────────────── */

.lg-notes .screen-notes {
  margin: 0;
}
.lg-notes code {
  color: var(--ks-gold-hi);
}