/* KairSun Web — Mock 1:1 de la pantalla ÁNIMO.
 *
 * Convive con ks-screens-base.css (fuentes, tokens, marco de teléfono y el
 * toggle Hoy|Tracking). Acá no se redefine nada de esa base: sólo se agrega.
 *
 * Contrato de colores (mood.dart / mood_dynamic_color.dart):
 *   [data-emo]  → --e (color base) y --e-d (color intenso)
 *   [data-i]    → --f (factor 0..100%) y --accent = lerp(--e, --e-d, factor)
 * Es el mismo moodDynamicColor de la app: tenue a baja intensidad, fuerte a
 * alta. color-mix() hace el lerp; si el navegador no lo soporta queda --e.
 *
 * Los datos que se ven son de EJEMPLO (una persona con historia): no hay
 * usuario real. La lectura honesta Free/Mastery vive en .screen-notes.
 */

.preview-animo {
  --u: 1px;
  --m-accent: #9b7bff;
  --m-high: #22c55e;
  --m-med: #eab308;
  --m-low: #ef4444;
  --m-gold: #f5c451;
  --m-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

/* ── Paleta de las 26 emociones (mood.dart) ────────────────────────────── */
[data-emo="happy"] { --e: #fff59d; --e-d: #ffd600; }
[data-emo="motivated"] { --e: #ffcc80; --e-d: #ff6d00; }
[data-emo="excited"] { --e: #ff80ab; --e-d: #f50057; }
[data-emo="grateful"] { --e: #80cbc4; --e-d: #00bfa5; }
[data-emo="proud"] { --e: #ce93d8; --e-d: #6200ea; }
[data-emo="loved"] { --e: #f48fb1; --e-d: #ec407a; }
[data-emo="hopeful"] { --e: #80deea; --e-d: #26c6da; }
[data-emo="content"] { --e: #c5e1a5; --e-d: #7cb342; }
[data-emo="calm"] { --e: #a5d6a7; --e-d: #00c853; }
[data-emo="neutral"] { --e: #b0bec5; --e-d: #ffffff; }
[data-emo="tired"] { --e: #9fa8da; --e-d: #311b92; }
[data-emo="bored"] { --e: #90a4ae; --e-d: #78909c; }
[data-emo="confused"] { --e: #e6ee9c; --e-d: #827717; }
[data-emo="frustrated"] { --e: #ff8a65; --e-d: #bf360c; }
[data-emo="stressed"] { --e: #ff7043; --e-d: #d84315; }
[data-emo="sad"] { --e: #4fc3f7; --e-d: #01579b; }
[data-emo="angry"] { --e: #ef5350; --e-d: #b71c1c; }
[data-emo="anxious"] { --e: #ffb74d; --e-d: #e65100; }
[data-emo="lonely"] { --e: #90caf9; --e-d: #283593; }
[data-emo="overwhelmed"] { --e: #b39ddb; --e-d: #4a148c; }
[data-emo="burnedOut"] { --e: #bcaaa4; --e-d: #8d6e63; }
[data-emo="guilty"] { --e: #d7a5b0; --e-d: #7b1f3a; }
[data-emo="inspired"] { --e: #ea80fc; --e-d: #d500f9; }
[data-emo="relieved"] { --e: #f4ff81; --e-d: #aeea00; }
[data-emo="nostalgic"] { --e: #ffe082; --e-d: #b8860b; }
[data-emo="insecure"] { --e: #9fc5c8; --e-d: #2f5d62; }

[data-emo] {
  --accent: var(--e);
  --accent: color-mix(in srgb, var(--e), var(--e-d) var(--f, 0%));
}

[data-i="1"] { --f: 0%; }
[data-i="2"] { --f: 11.1%; }
[data-i="3"] { --f: 22.2%; }
[data-i="4"] { --f: 33.3%; }
[data-i="5"] { --f: 44.4%; }
[data-i="6"] { --f: 55.6%; }
[data-i="7"] { --f: 66.7%; }
[data-i="8"] { --f: 77.8%; }
[data-i="9"] { --f: 88.9%; }
[data-i="10"] { --f: 100%; }

/* ── Teléfono dentro de la grilla de preview ─────────────────────────────
 * --u se recalcula con unidades de container (1cqw = 1% del ancho real del
 * teléfono), no con porcentajes: un porcentaje dentro de --u resolvería
 * distinto en width que en height y las alturas se disparaban. La primera
 * línea deja el valor del base para navegadores sin unidades cq; el override
 * en cqw sólo se aplica dentro de @supports (si no, --u queda inválido). */
.preview-animo .phone {
  container-type: inline-size;
  --u: calc(min(380px, 92vw) / 393);
  width: min(100%, 380px);
  margin-inline: auto;
}
@supports (container-type: inline-size) {
  .preview-animo .phone {
    --u: calc(1cqw / 3.93);
  }
}
.m-togglehead { text-align: center; margin-bottom: calc(12 * var(--u)); }

/* ── Estructuras de pantalla ───────────────────────────────────────────── */
.m-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ks-text);
  font-family: var(--ks-font);
  --m-r-card: calc(26 * var(--u));
  --m-r-tile: calc(20 * var(--u));
  background:
    radial-gradient(120% 40% at 50% -8%, rgba(155, 123, 255, 0.18), transparent 70%),
    radial-gradient(80% 30% at 100% 100%, rgba(155, 123, 255, 0.07), transparent 70%),
    var(--ks-bg);
  background:
    radial-gradient(120% 40% at 50% -8%, color-mix(in srgb, var(--m-accent) 18%, transparent), transparent 70%),
    radial-gradient(80% 30% at 100% 100%, color-mix(in srgb, var(--m-accent) 7%, transparent), transparent 70%),
    var(--ks-bg);
}
.m-screen--hoy { --m-accent: #64748b; }
.m-screen--hoy-on { --m-accent: #d5f648; }
.m-screen--track { --m-accent: var(--m-accent, #9b7bff); --m-accent: #9b7bff; }
.m-screen--create { --m-accent: #2487c4; }
.m-screen--read { --m-accent: #cdf339; }
.m-screen__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(54 * var(--u)) calc(16 * var(--u)) calc(128 * var(--u));
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.m-screen__scroll--flat { padding-bottom: calc(24 * var(--u)); }
.m-screen__scroll--pad { padding-top: calc(46 * var(--u)); }

.m-appbar {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-bottom: calc(12 * var(--u));
}
.m-appbar__tabs {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(3 * var(--u));
  padding: calc(3 * var(--u));
  border-radius: calc(20 * var(--u));
  background: rgba(20, 22, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.m-appbar__tab {
  min-height: calc(38 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--u));
  border-radius: calc(16 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 800;
  color: rgba(255, 255, 255, 0.62);
}
.m-appbar__tab--on {
  background: linear-gradient(180deg, #a78bff, var(--m-accent));
  background: linear-gradient(180deg, color-mix(in srgb, var(--m-accent) 88%, #fff), var(--m-accent));
  color: #0d0d0d;
  box-shadow: 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.4);
}
.m-appbar__tab svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

.m-iconbtn {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: calc(14 * var(--u));
  background: rgba(20, 22, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  box-shadow:
    calc(3 * var(--u)) calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.m-iconbtn svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.m-iconbtn--accent { color: var(--m-accent); border-color: rgba(155, 123, 255, 0.4);
 border-color: color-mix(in srgb, var(--m-accent) 40%, transparent); }

.m-screen--read .m-read__close { position: absolute; top: calc(52 * var(--u)); left: calc(18 * var(--u)); }

/* Iconos: el trazo se hereda del contenedor (stroke/fill son propiedades
 * heredadas en SVG, así valen también dentro del shadow de <use>). */
.m-ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-ic--fill { fill: currentColor; stroke: none; }
.m-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Anchos flex y alturas de las gráficas (sin style inline). */
[data-w="1"] { flex: 1 1 0; } [data-w="2"] { flex: 2 1 0; } [data-w="3"] { flex: 3 1 0; }
[data-w="4"] { flex: 4 1 0; } [data-w="5"] { flex: 5 1 0; } [data-w="6"] { flex: 6 1 0; }
[data-w="7"] { flex: 7 1 0; } [data-w="8"] { flex: 8 1 0; } [data-w="11"] { flex: 11 1 0; }
[data-w="13"] { flex: 13 1 0; }
[data-hp="5"] { --hb: 5; } [data-hp="25"] { --hb: 25; } [data-hp="30"] { --hb: 30; }
[data-hp="35"] { --hb: 35; } [data-hp="44"] { --hb: 44; } [data-hp="45"] { --hb: 45; }
[data-hp="50"] { --hb: 50; } [data-hp="55"] { --hb: 55; } [data-hp="56"] { --hb: 56; }
[data-hp="60"] { --hb: 60; } [data-hp="67"] { --hb: 67; } [data-hp="75"] { --hb: 75; }
[data-hp="78"] { --hb: 78; } [data-hp="89"] { --hb: 89; } [data-hp="90"] { --hb: 90; }
[data-hp="100"] { --hb: 100; }
.m-wd__bar[data-hp] { height: calc(var(--hb, 50) * 0.5%); }
.m-arcWeek__bar[data-hp] { height: calc(var(--hb, 50) * 0.72 * var(--u)); }
[data-wp="24"] { --w: 24%; } [data-wp="28"] { --w: 28%; } [data-wp="31"] { --w: 31%; }
[data-wp="34"] { --w: 34%; } [data-wp="38"] { --w: 38%; } [data-wp="48"] { --w: 48%; }
[data-wp="64"] { --w: 64%; } [data-wp="71"] { --w: 71%; }
[data-ww="66"] { width: 66%; } [data-ww="100"] { width: 100%; }
.m-iconbtn--ghost { visibility: hidden; }

.preview-animo .ks-view { text-align: center; }
.preview-animo .ks-view__panes { margin-top: calc(12 * var(--u)); text-align: left; }

/* ── Panel cápsula: mascota + carta del día ────────────────────────────── */
.m-panel {
  display: flex;
  align-items: flex-end;
  gap: calc(4 * var(--u));
  padding: calc(10 * var(--u));
  border-radius: calc(24 * var(--u));
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--ks-glass-border);
  -webkit-backdrop-filter: blur(calc(10 * var(--u)));
  backdrop-filter: blur(calc(10 * var(--u)));
  margin-bottom: calc(14 * var(--u));
}
.m-mascot { width: calc(66 * var(--u)); flex: 0 0 auto; text-align: center; }
.m-mascot img {
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
  object-fit: contain;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.5));
}
.m-mascot__plate {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  margin-top: calc(2 * var(--u));
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(155, 123, 255, 0.4);
  border: 1px solid color-mix(in srgb, var(--m-accent) 40%, transparent);
  font-size: calc(9.5 * var(--u));
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
}
.m-mascot__plate svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }

.m-letter {
  position: relative;
  flex: 1;
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(18 * var(--u));
  background: linear-gradient(150deg, #302a4a, #201e2f);
  background: linear-gradient(150deg, color-mix(in srgb, var(--m-accent) 20%, #15161d), color-mix(in srgb, var(--m-accent) 8%, #15161d));
  border: 1px solid rgba(155, 123, 255, 0.42);
  border: 1px solid color-mix(in srgb, var(--m-accent) 42%, transparent);
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(155, 123, 255, 0.18);
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) color-mix(in srgb, var(--m-accent) 18%, transparent);
}
.m-letter::before {
  content: "";
  position: absolute;
  left: calc(-8 * var(--u));
  top: 50%;
  width: 0;
  height: 0;
  translate: 0 -50%;
  border: calc(6 * var(--u)) solid transparent;
  border-right-color: #302a4a;
  border-right-color: color-mix(in srgb, var(--m-accent) 20%, #15161d);
}
.m-letter__eyebrow {
  margin: 0 0 calc(3 * var(--u));
  font-family: var(--m-mono);
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b9a3ff;
  color: color-mix(in srgb, var(--m-accent) 70%, #fff);
}
.m-letter__title { margin: 0; font-size: calc(13 * var(--u)); font-weight: 700; line-height: 1.35; }
.m-letter__detail { margin: calc(4 * var(--u)) 0 0; font-size: calc(11 * var(--u)); color: var(--ks-text-2); }

/* ── Registro rápido ───────────────────────────────────────────────────── */
.m-hero { margin: calc(34 * var(--u)) 0 auto; text-align: center; }
.m-hero h2 { margin: 0; font-size: calc(27 * var(--u)); font-weight: 900; letter-spacing: -0.01em; }
.m-hero p { margin: calc(8 * var(--u)) auto calc(20 * var(--u)); max-width: calc(300 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.4; color: var(--ks-text-2); }

.m-quick {
  padding: calc(13 * var(--u)) calc(13 * var(--u));
  border-radius: calc(26 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, #1e1b26, #14121a);
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.42);
}
.m-quick__head {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.76);
}
.m-quick__head svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.m-quick__head b { font-weight: 800; }
.m-quick__head em {
  margin-left: auto;
  font-style: normal;
  font-size: calc(10.5 * var(--u));
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #CBD5E1;
}
.m-quick__tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(9 * var(--u));
  margin-top: calc(12 * var(--u));
}
.m-quick__tile { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); min-width: 0; }
.m-quick__box {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(19 * var(--u));
  border: 1px solid rgba(155, 123, 255, 0.65);
  border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  background: linear-gradient(135deg, rgba(155, 123, 255, 0.34), rgba(155, 123, 255, 0.12));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
}
.m-quick__box img { width: calc(42 * var(--u)); height: calc(42 * var(--u)); object-fit: contain; }
.m-quick__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(9.5 * var(--u));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.m-quick--hero .m-quick__box { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
.m-quick--hero .m-quick__box img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
.m-quick--hero .m-quick__name { font-size: calc(10.5 * var(--u)); }
.m-quick--row { margin-bottom: calc(14 * var(--u)); }

/* ── Tarjeta de ánimo ──────────────────────────────────────────────────── */
.m-card {
  position: relative;
  border-radius: var(--m-r-card);
  border: 1px solid rgba(174, 148, 255, 0.37);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, rgba(255, 255, 255, 0.10));
  background:
    linear-gradient(160deg, #262136, #131119);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, #1a1822), #131119);
  box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, 0.40);
  overflow: hidden;
}
.m-card + .m-card { margin-top: calc(14 * var(--u)); }
.m-list { display: grid; gap: calc(14 * var(--u)); }
.m-card__streak {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(42 * var(--u));
  padding: 0 calc(14 * var(--u));
  background: linear-gradient(180deg, #7059b8, #352a57);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, #000), color-mix(in srgb, var(--accent) 34%, #000));
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.m-card__led { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 0 calc(8 * var(--u)) #fff; }
.m-card__streak b { font-family: var(--m-mono); font-size: calc(10.5 * var(--u)); letter-spacing: 0.1em; }
.m-card__week { display: flex; gap: calc(7 * var(--u)); margin-left: auto; }
.m-card__day { display: grid; gap: calc(3 * var(--u)); justify-items: center; font-family: var(--m-mono); font-size: calc(8 * var(--u)); font-weight: 700; color: rgba(255, 255, 255, 0.7); }
.m-card__dot { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #1f1933;
 background: color-mix(in srgb, var(--accent) 20%, #000); }
.m-card__dot--on { background: #fff; box-shadow: 0 0 calc(7 * var(--u)) #fff; }
.m-card__dot--today { outline: calc(1.5 * var(--u)) solid rgba(255, 255, 255, 0.55); outline-offset: calc(1.5 * var(--u)); }
.m-card__count { margin-left: calc(4 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 800; }

.m-card__body { padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); }
.m-card__row { display: flex; align-items: flex-start; gap: calc(13 * var(--u)); }
.m-squircle {
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: calc(28 * var(--u));
  background: linear-gradient(135deg, rgba(155, 123, 255, 0.42), rgba(155, 123, 255, 0.14));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 42%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
  border: 1px solid rgba(155, 123, 255, 0.6);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 calc(18 * var(--u)) rgba(155, 123, 255, 0.42);
  box-shadow: 0 0 calc(18 * var(--u)) color-mix(in srgb, var(--accent) 42%, transparent);
}
.m-squircle img { width: calc(62 * var(--u)); height: calc(62 * var(--u)); object-fit: contain; }
.m-card__meta { display: flex; flex-direction: column; gap: calc(3 * var(--u)); min-width: 0; }
.m-card__eyebrow {
  font-size: calc(10.5 * var(--u));
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #bea9ff;
  color: color-mix(in srgb, var(--accent) 65%, #fff);
}
.m-card__title { margin: 0; font-size: calc(19 * var(--u)); font-weight: 800; line-height: 1.15; }
.m-card__title--caps { text-transform: uppercase; font-size: calc(21 * var(--u)); letter-spacing: 0.03em; }
.m-card__journal { margin: 0; font-size: calc(13.5 * var(--u)); line-height: 1.45; color: var(--ks-text-2); }
.m-card__addnote {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  border-radius: calc(14 * var(--u));
  border: 1px solid rgba(177, 152, 255, 0.384);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.04);
  font-size: calc(12 * var(--u));
  font-weight: 700;
  color: var(--ks-text-2);
}
.m-card__addnote svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

.m-card__footer { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); }
.m-card__time { display: grid; gap: calc(1 * var(--u)); font-family: var(--m-mono); flex: 0 0 auto; }
.m-card__time b { font-size: calc(12 * var(--u)); }
.m-card__time span { font-size: calc(9 * var(--u)); color: var(--ks-muted); letter-spacing: 0.06em; }
.m-meter {
  flex: 1;
  padding: calc(7 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u));
  border-radius: calc(12 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.5);
}
.m-meter__top { display: flex; align-items: center; gap: calc(6 * var(--u)); font-family: var(--m-mono); font-size: calc(9.5 * var(--u)); font-weight: 700; letter-spacing: 0.1em; color: var(--ks-muted); }
.m-meter__top b { font-size: calc(11 * var(--u)); letter-spacing: 0; color: var(--ks-text); }
.m-meter__bars { display: flex; gap: calc(3 * var(--u)); margin-top: calc(5 * var(--u)); height: calc(16 * var(--u)); }
.m-meter__bar {
  flex: 1;
  border-radius: calc(3 * var(--u));
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 calc(1.5 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.55);
}
.m-meter__bar--on {
  background: linear-gradient(180deg, #c8b6ff, var(--accent));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent));
  box-shadow: 0 0 calc(6 * var(--u)) rgba(155, 123, 255, 0.7);
  box-shadow: 0 0 calc(6 * var(--u)) color-mix(in srgb, var(--accent) 70%, transparent);
}
.m-card__act {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(12 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
}
.m-card__act svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.m-card__act--danger { color: #ff8a80; }

.m-tags {
  margin-top: calc(13 * var(--u));
  padding-top: calc(11 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(7 * var(--u));
}
.m-tag {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  min-height: calc(32 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-radius: calc(14 * var(--u));
  border: 1px solid rgba(175, 150, 255, 0.327);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, rgba(255, 255, 255, 0.09));
  background: rgba(255, 255, 255, 0.045);
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
  color: var(--ks-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-tag i { font-style: normal; font-size: calc(12 * var(--u)); }
.m-tag--full { grid-column: 1 / -1; }

/* ── CTA inferior ──────────────────────────────────────────────────────── */
.m-cta-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u));
  background: linear-gradient(180deg, transparent, rgba(10, 12, 16, 0.9) 34%, var(--ks-bg));
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ks-bg) 90%, transparent) 34%, var(--ks-bg));
}
.m-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(9 * var(--u));
  min-height: calc(56 * var(--u));
  padding: calc(8 * var(--u)) calc(18 * var(--u));
  border-radius: 999px;
  background: linear-gradient(180deg, #ad93ff, var(--m-accent));
  background: linear-gradient(180deg, color-mix(in srgb, var(--m-accent) 82%, #fff), var(--m-accent));
  color: #0d0d0d;
  font-size: calc(12.5 * var(--u));
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(155, 123, 255, 0.34);
  box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) color-mix(in srgb, var(--m-accent) 34%, transparent);
}
.m-cta svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); flex: 0 0 auto; }
.m-cta small { display: block; font-size: calc(9.5 * var(--u)); font-weight: 700; letter-spacing: 0; text-transform: none; opacity: 0.72; }
.m-cta--ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(155, 123, 255, 0.45);
  border: 1px solid color-mix(in srgb, var(--m-accent) 45%, transparent);
  color: var(--m-accent);
  box-shadow: none;
}

/* ── Crear: menú de creación ───────────────────────────────────────────── */
.m-pbox {
  padding: calc(12 * var(--u));
  border-radius: calc(24 * var(--u));
  background: linear-gradient(180deg, #231f34, #121017);
  background: linear-gradient(180deg, color-mix(in srgb, var(--m-accent) 8%, #191722), #121017);
  border: 1px solid rgba(177, 152, 255, 0.282);
  border: 1px solid color-mix(in srgb, var(--m-accent) 22%, rgba(255, 255, 255, 0.08));
  box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, 0.35);
}
.m-pbox + .m-pbox, .m-pbox + .m-field, .m-field + .m-field, .m-pbox + .m-pbox { margin-top: calc(10 * var(--u)); }
.m-pbox__head { display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(24 * var(--u)); }
.m-pbox__title { font-size: calc(12 * var(--u)); font-weight: 800; letter-spacing: 0.02em; }
.m-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: calc(9 * var(--u));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.m-pill--accent { color: var(--m-accent); }
.m-pill--muted { color: var(--ks-muted); }
.m-preview {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(5 * var(--u)) calc(10 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u));
  border-radius: 999px;
  border: 1px solid rgba(155, 123, 255, 0.45);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: rgba(0, 0, 0, 0.25);
}
.m-preview__ring {
  position: relative;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--accent) var(--f, 0%), rgba(255, 255, 255, 0.12) 0);
}
.m-preview__ring::before {
  content: "";
  position: absolute;
  inset: calc(3 * var(--u));
  border-radius: 50%;
  background: #14121a;
}
.m-preview__ring img { position: relative; width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.m-preview__text { display: grid; line-height: 1.15; }
.m-preview__text b { font-size: calc(11.5 * var(--u)); }
.m-preview__text span { font-family: var(--m-mono); font-size: calc(9 * var(--u)); color: var(--ks-muted); }
.m-preview__emojis { font-size: calc(12 * var(--u)); }

.m-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(3 * var(--u));
  height: calc(40 * var(--u));
  padding: calc(3 * var(--u));
  margin-top: calc(10 * var(--u));
  border-radius: calc(22 * var(--u));
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.m-seg__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--u));
  border-radius: calc(18 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
}
.m-seg__item::before { content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: currentColor; }
.m-seg__item--high { color: var(--m-high); }
.m-seg__item--med { color: var(--m-med); }
.m-seg__item--low { color: var(--m-low); }
.m-seg__item--on { background: linear-gradient(180deg, rgba(239, 68, 68, 0.42), rgba(239, 68, 68, 0.24));
 background: linear-gradient(180deg, color-mix(in srgb, var(--m-low) 42%, transparent), color-mix(in srgb, var(--m-low) 24%, transparent)); border: 1px solid rgba(239, 68, 68, 0.75);
 border: 1px solid color-mix(in srgb, var(--m-low) 75%, transparent); color: #fff; box-shadow: 0 0 calc(12 * var(--u)) rgba(239, 68, 68, 0.35);
 box-shadow: 0 0 calc(12 * var(--u)) color-mix(in srgb, var(--m-low) 35%, transparent); }

.m-picker { margin-top: calc(10 * var(--u)); }
.m-picker__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(7 * var(--u)); }
.m-picker__row + .m-picker__row { margin-top: calc(8 * var(--u)); }
.m-tile {
  position: relative;
  min-height: calc(76 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--u));
  padding: calc(5 * var(--u)) calc(3 * var(--u));
  border-radius: var(--m-r-tile);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.14));
}
.m-tile img { width: calc(46 * var(--u)); height: calc(46 * var(--u)); object-fit: contain; }
.m-tile__name {
  max-width: 100%;
  padding: 0 calc(3 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-tile__v3 {
  display: inline-block;
  padding: 0 calc(4 * var(--u));
  border-radius: calc(5 * var(--u));
  background: rgba(155, 123, 255, 0.3);
  background: color-mix(in srgb, var(--m-accent) 30%, transparent);
  color: #fff;
  font-size: calc(8 * var(--u));
  font-weight: 800;
  vertical-align: calc(1 * var(--u));
}
.m-tile--sel {
  border: calc(1.6 * var(--u)) solid rgba(155, 123, 255, 0.95);
  border: calc(1.6 * var(--u)) solid color-mix(in srgb, var(--accent) 95%, transparent);
  background: linear-gradient(180deg, rgba(155, 123, 255, 0.44), rgba(155, 123, 255, 0.18));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 44%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
  box-shadow: 0 0 calc(16 * var(--u)) rgba(155, 123, 255, 0.42);
  box-shadow: 0 0 calc(16 * var(--u)) color-mix(in srgb, var(--accent) 42%, transparent);
}
.m-tile--sel img { transform: scale(1.08); }
.m-tile--sel .m-tile__name { color: #fff; font-weight: 800; }

.m-slider { margin-top: calc(14 * var(--u)); --p: 0.556; }
.m-slider__label { display: block; margin-bottom: calc(6 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 800; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.55); }
.m-slider__track { position: relative; height: calc(48 * var(--u)); }
.m-slider__rail { position: absolute; left: 0; right: 0; top: calc(18 * var(--u)); height: calc(12 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.m-slider__fill {
  position: absolute;
  left: 0;
  top: calc(18 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 999px;
  width: calc((100% - 32 * var(--u)) * var(--p, 0));
  background: linear-gradient(90deg, rgba(155, 123, 255, 0.45), var(--accent));
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent));
  box-shadow: 0 0 calc(12 * var(--u)) rgba(155, 123, 255, 0.45);
  box-shadow: 0 0 calc(12 * var(--u)) color-mix(in srgb, var(--accent) 45%, transparent);
}
.m-slider__dots { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(23 * var(--u)); display: flex; justify-content: space-between; }
.m-slider__dot { width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.m-slider__dot--on { background: rgba(255, 255, 255, 0.7); }
.m-slider__thumb {
  position: absolute;
  left: calc((100% - 32 * var(--u)) * var(--p, 0));
  top: calc(8 * var(--u));
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #bea9ff, var(--accent));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 65%, #fff), var(--accent));
  border: calc(2.5 * var(--u)) solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 calc(16 * var(--u)) rgba(155, 123, 255, 0.55), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 calc(16 * var(--u)) color-mix(in srgb, var(--accent) 55%, transparent), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.25);
  font-family: var(--m-mono);
  font-size: calc(14 * var(--u));
  font-weight: 900;
  color: #fff;
}
.m-slider__thumb--ink { color: #16141c; }

.m-strip { display: flex; gap: calc(6 * var(--u)); margin-top: calc(2 * var(--u)); }
.m-strip__rows { flex: 1; min-width: 0; display: grid; gap: calc(8 * var(--u)); overflow: hidden; }
.m-strip__row { display: flex; gap: calc(8 * var(--u)); overflow: hidden; }
.m-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 calc(5 * var(--u));
  border-radius: calc(20 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  font-size: calc(12.5 * var(--u));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}
.m-chip i { display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(255, 255, 255, 0.07); font-style: normal; font-size: calc(15 * var(--u)); }
.m-chip--on {
  border: calc(1.6 * var(--u)) solid rgba(155, 123, 255, 0.95);
  border: calc(1.6 * var(--u)) solid color-mix(in srgb, var(--accent) 95%, transparent);
  background: linear-gradient(180deg, rgba(155, 123, 255, 0.55), rgba(155, 123, 255, 0.3));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 30%, transparent));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(155, 123, 255, 0.32);
  box-shadow: 0 calc(6 * var(--u)) calc(12 * var(--u)) color-mix(in srgb, var(--accent) 32%, transparent);
}
.m-chip--on::after { content: "✓"; font-size: calc(12 * var(--u)); }
.m-seeall {
  flex: 0 0 calc(66 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--u));
  border-radius: calc(20 * var(--u));
  border: 1px solid rgba(155, 123, 255, 0.45);
  border: 1px solid color-mix(in srgb, var(--m-accent) 45%, transparent);
  background: rgba(155, 123, 255, 0.1);
  background: color-mix(in srgb, var(--m-accent) 10%, transparent);
  color: var(--m-accent);
  font-size: calc(11 * var(--u));
  font-weight: 800;
}
.m-seeall svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.m-counter { margin-left: auto; margin-right: calc(8 * var(--u)); font-family: var(--m-mono); font-size: calc(11 * var(--u)); color: var(--ks-muted); }
.m-change { font-size: calc(11 * var(--u)); font-weight: 800; color: var(--m-accent); }

.m-field {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-height: calc(56 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u));
  border-radius: calc(20 * var(--u));
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(174, 147, 255, 0.319);
  border: 1px solid color-mix(in srgb, var(--m-accent) 26%, rgba(255, 255, 255, 0.08));
}
.m-field--journal { display: block; }
.m-field__text { flex: 1; min-width: 0; font-size: calc(14 * var(--u)); color: var(--ks-text-2); }
.m-field__text--value { color: var(--ks-text); font-weight: 600; }
.m-field__hint { color: var(--ks-muted); }
.m-mic {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: calc(14 * var(--u));
  border: 1px solid rgba(155, 123, 255, 0.45);
  border: 1px solid color-mix(in srgb, var(--m-accent) 45%, transparent);
  background: rgba(155, 123, 255, 0.14);
  background: color-mix(in srgb, var(--m-accent) 14%, transparent);
  color: var(--m-accent);
}
.m-mic svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.m-field__foot { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); font-size: calc(10 * var(--u)); color: var(--ks-muted); }
.m-field__foot b { margin-left: auto; font-family: var(--m-mono); font-weight: 700; }

.m-save {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--u));
  min-height: calc(58 * var(--u));
  border-radius: 999px;
  background: linear-gradient(180deg, #ad93ff, var(--m-accent));
  background: linear-gradient(180deg, color-mix(in srgb, var(--m-accent) 82%, #fff), var(--m-accent));
  color: #16141c;
  font-size: calc(13 * var(--u));
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(155, 123, 255, 0.34);
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) color-mix(in srgb, var(--m-accent) 34%, transparent);
}
.m-save::before {
  content: "";
  position: absolute;
  left: calc(12 * var(--u));
  right: calc(12 * var(--u));
  top: calc(7 * var(--u));
  height: calc(3 * var(--u));
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) calc(var(--prog, 0) * 1%), rgba(0, 0, 0, 0.12) 0);
}
.m-create__spacer { height: calc(12 * var(--u)); }

/* ── Lectura del día ───────────────────────────────────────────────────── */
.m-read { position: absolute; inset: 0; overflow-y: auto; padding: calc(64 * var(--u)) calc(18 * var(--u)) calc(30 * var(--u)); text-align: center; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
.m-read__eyebrow { margin: 0; font-size: calc(11 * var(--u)); font-weight: 800; letter-spacing: 0.24em; color: var(--m-accent); }
.m-read__title { margin: calc(6 * var(--u)) 0 calc(10 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 800; letter-spacing: -0.01em; }
.m-read__count {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  border: 1px solid rgba(155, 123, 255, 0.5);
  border: 1px solid color-mix(in srgb, var(--m-accent) 50%, transparent);
  background: rgba(155, 123, 255, 0.12);
  background: color-mix(in srgb, var(--m-accent) 12%, transparent);
  font-size: calc(12 * var(--u));
  font-weight: 700;
}
.m-read__count svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

.m-arc { position: relative; height: calc(150 * var(--u)); margin: calc(14 * var(--u)) 0 calc(4 * var(--u)); }
.m-arc__curve { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-arc__path { fill: none; stroke: url(#m-arc-grad); stroke-width: calc(3.5 * var(--u)); stroke-linecap: round; }
.m-arc__curve .m-arc__guides line { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.m-arc__node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); }
.m-arc__node--1 { left: calc(18 * var(--u)); top: calc(76 * var(--u)); }
.m-arc__node--2 { left: calc(153 * var(--u)); top: calc(18 * var(--u)); }
.m-arc__node--3 { left: calc(288 * var(--u)); top: calc(44 * var(--u)); }
.m-arc__box {
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  display: grid;
  place-items: center;
  border-radius: calc(28 * var(--u));
  background: linear-gradient(135deg, #bea9ff, #55448c);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 65%, #fff), color-mix(in srgb, var(--accent) 55%, #000));
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(155, 123, 255, 0.55);
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) color-mix(in srgb, var(--accent) 55%, transparent);
}
.m-arc__box img { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.m-arc__time { font-family: var(--m-mono); font-size: calc(9.5 * var(--u)); font-weight: 700; color: var(--ks-text-2); }

.m-read__letter { display: flex; align-items: center; gap: calc(2 * var(--u)); margin-top: calc(10 * var(--u)); text-align: left; }
.m-read__letter .m-mascot { width: calc(76 * var(--u)); }
.m-read__letter .m-mascot img { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
.m-glass {
  border-radius: calc(22 * var(--u));
  border: 1px solid rgba(155, 123, 255, 0.36);
  border: 1px solid color-mix(in srgb, var(--m-accent) 36%, transparent);
  background: linear-gradient(150deg, rgba(42, 37, 64, 0.914), rgba(21, 22, 29, 0.9));
  background: linear-gradient(150deg, color-mix(in srgb, var(--m-accent) 14%, rgba(21, 22, 29, 0.9)), rgba(21, 22, 29, 0.9));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  text-align: left;
}
.m-glass + .m-glass { margin-top: calc(12 * var(--u)); }
.m-idea { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); }
.m-idea__icon {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: calc(14 * var(--u));
  background: rgba(155, 123, 255, 0.18);
  background: color-mix(in srgb, var(--m-accent) 18%, transparent);
  color: var(--m-accent);
}
.m-idea__icon svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.m-idea__label { margin: 0; font-size: calc(10 * var(--u)); font-weight: 800; letter-spacing: 0.16em; color: var(--m-accent); }
.m-idea__text { margin: calc(3 * var(--u)) 0 0; font-size: calc(13.5 * var(--u)); line-height: 1.4; color: var(--ks-text-2); }
.m-locked {
  border-color: rgba(245, 196, 81, 0.6);
  border-color: color-mix(in srgb, var(--m-gold) 60%, transparent);
  background: linear-gradient(150deg, rgba(34, 28, 18, 0.92), rgba(20, 17, 12, 0.92));
}
.m-locked__head { display: flex; align-items: center; gap: calc(7 * var(--u)); color: var(--m-gold); font-size: calc(10 * var(--u)); font-weight: 800; letter-spacing: 0.16em; }
.m-locked__head svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.m-locked__body { margin: calc(7 * var(--u)) 0 0; font-size: calc(12.5 * var(--u)); line-height: 1.4; color: rgba(255, 255, 255, 0.72); }
.m-locked__cta { display: flex; align-items: center; justify-content: flex-end; gap: calc(6 * var(--u)); margin-top: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 800; color: var(--m-gold); }
.m-locked__cta svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.m-read__cta { margin-top: calc(16 * var(--u)); }

/* ── Tracking ──────────────────────────────────────────────────────────── */
.m-track__head { display: flex; align-items: center; gap: calc(6 * var(--u)); min-height: calc(42 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.m-track__title { flex: 1; text-align: center; font-size: calc(17 * var(--u)); font-weight: 800; }
.m-chartbtn { position: relative; }
.m-chartbtn input { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; }
.m-chartbtn label {
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: calc(14 * var(--u));
  border: 1px solid rgba(155, 123, 255, 0.35);
  border: 1px solid color-mix(in srgb, var(--m-accent) 35%, transparent);
  background: rgba(181, 158, 255, 0.136);
  background: color-mix(in srgb, var(--m-accent) 10%, rgba(255, 255, 255, 0.04));
  color: var(--m-accent);
  cursor: pointer;
}
.m-chartbtn label svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.m-chartbtn label { transition: border-color 0.15s ease; }
.m-chartbtn input:focus-visible ~ label { outline: 2px solid var(--ks-gold); outline-offset: 2px; }

.m-ranges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(3 * var(--u));
  padding: calc(3 * var(--u));
  border-radius: calc(26 * var(--u));
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: calc(12 * var(--u));
}
.m-range {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  min-height: calc(38 * var(--u));
  border-radius: calc(22 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 800;
  color: rgba(255, 255, 255, 0.55);
}
.m-range svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); color: var(--m-gold); }
.m-range--on {
  background: linear-gradient(180deg, rgba(155, 123, 255, 0.55), rgba(155, 123, 255, 0.3));
  background: linear-gradient(180deg, color-mix(in srgb, var(--m-accent) 55%, transparent), color-mix(in srgb, var(--m-accent) 30%, transparent));
  border: 1px solid rgba(155, 123, 255, 0.8);
  border: 1px solid color-mix(in srgb, var(--m-accent) 80%, transparent);
  color: #fff;
}
.m-range--muted { opacity: 0.6; }

.m-tpanel {
  padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: calc(28 * var(--u));
  background: linear-gradient(180deg, rgba(26, 24, 34, 0.93), #121017);
  background: linear-gradient(180deg, color-mix(in srgb, var(--glow, transparent) 7%, #1a1822), #121017);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 calc(12 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.35);
}
.m-tpanel + .m-tpanel { margin-top: calc(14 * var(--u)); }
.m-tpanel--glow { border-color: rgba(155, 123, 255, 0.3);
 border-color: color-mix(in srgb, var(--glow, var(--m-accent)) 30%, transparent); }
.m-tlabel { margin: 0; font-size: calc(10.5 * var(--u)); font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(248, 250, 252, 0.6); }
.m-thead { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.m-thead svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--m-gold); }

.m-reading__row { display: flex; align-items: flex-end; gap: calc(6 * var(--u)); }
.m-reading__row .m-mascot { width: calc(72 * var(--u)); }
.m-reading__row .m-mascot img { width: calc(62 * var(--u)); height: calc(62 * var(--u)); }
.m-reading__more { display: grid; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
.m-reading__line {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--u));
  padding: calc(9 * var(--u)) calc(11 * var(--u));
  border-radius: calc(18 * var(--u));
  border: 1px solid rgba(155, 123, 255, 0.22);
  border: 1px solid color-mix(in srgb, var(--m-accent) 22%, transparent);
  background: rgba(155, 123, 255, 0.08);
  background: color-mix(in srgb, var(--m-accent) 8%, transparent);
}
.m-reading__line svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); flex: 0 0 auto; margin-top: calc(1 * var(--u)); }
.m-reading__line p { margin: 0; font-size: calc(12.5 * var(--u)); font-weight: 600; line-height: 1.35; color: rgba(248, 250, 252, 0.88); }
.m-reading__line--high { --m-accent: var(--m-high); }
.m-reading__line--low { --m-accent: var(--m-low); }

.m-balance { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.m-ring { position: relative; width: calc(116 * var(--u)); height: calc(116 * var(--u)); flex: 0 0 auto; }
.m-ring svg { width: 100%; height: 100%; rotate: -90deg; }
.m-ring__track { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 11; }
.m-ring__arc { fill: none; stroke-width: 11; stroke-linecap: round; }
.m-ring__arc--high { stroke: var(--m-high); }
.m-ring__arc--med { stroke: var(--m-med); }
.m-ring__arc--low { stroke: var(--m-low); }
.m-ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1 * var(--u)); }
.m-ring__center b { font-size: calc(24 * var(--u)); font-weight: 900; }
.m-ring__center span { font-size: calc(10 * var(--u)); font-weight: 900; letter-spacing: 0.14em; }

.m-stats { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
.m-stat { display: grid; gap: calc(2 * var(--u)); }
.m-stat b { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 900; }
.m-stat b svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); color: #ff8a3d; }
.m-stat span { font-size: calc(10 * var(--u)); font-weight: 600; color: var(--ks-muted); }
.m-delta { display: inline-flex; align-items: center; gap: calc(2 * var(--u)); margin-left: calc(6 * var(--u)); padding: calc(1 * var(--u)) calc(5 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(155, 123, 255, 0.18);
 background: color-mix(in srgb, var(--m-accent) 18%, transparent); color: var(--m-accent); font-family: var(--m-mono); font-size: calc(10.5 * var(--u)); font-weight: 800; }
.m-delta svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); color: inherit; }

/* Gráfica 7D: barras apiladas | curva de valencia.
 * El formato (Barras|Curva) es un toggle CSS puro: los radios viven en la
 * appbar del tracking y los panes en la card; :has() los conecta sin JS. */
.m-chart__pane--bars { display: grid; }
.m-chart__pane--curve { display: block; }
/* Sin :has() no se puede leer qué radio está activo: queda el primer pane
 * (barras), que es el estado por defecto del markup. */
@supports not selector(:has(*)) {
  .m-chart__pane--curve { display: none; }
}
@supports selector(:has(*)) {
  .m-screen--track:has(#m-chart-curve:checked) .m-chart__pane--bars { display: none; }
  .m-screen--track:has(#m-chart-bars:checked) .m-chart__pane--curve { display: none; }
  .m-screen--track:has(#m-chart-bars:checked) .m-chartbtn label[for="m-chart-curve"] { display: none; }
  .m-screen--track:has(#m-chart-curve:checked) .m-chartbtn label[for="m-chart-bars"] { display: none; }
}

.m-bars { position: relative; height: calc(160 * var(--u)); margin-top: calc(26 * var(--u)); }
.m-chart__pane--bars { padding-bottom: calc(22 * var(--u)); }
.m-bar { position: absolute; bottom: 0; width: calc(100% / 7); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.m-bar:nth-child(1) { left: 0; }
.m-bar:nth-child(2) { left: calc(100% / 7); }
.m-bar:nth-child(3) { left: calc(200% / 7); }
.m-bar:nth-child(4) { left: calc(300% / 7); }
.m-bar:nth-child(5) { left: calc(400% / 7); }
.m-bar:nth-child(6) { left: calc(500% / 7); }
.m-bar:nth-child(7) { left: calc(600% / 7); }
.m-bar__fill {
  width: calc(24 * var(--u));
  height: var(--h, 0%);
  min-height: calc(6 * var(--u));
  display: flex;
  flex-direction: column-reverse;
  border-radius: calc(10 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  overflow: hidden;
  box-shadow: 0 0 calc(12 * var(--u)) rgba(155, 123, 255, 0.3);
  box-shadow: 0 0 calc(12 * var(--u)) color-mix(in srgb, var(--accent) 30%, transparent);
}
.m-bar__seg { flex-grow: var(--g, 1); }
.m-bar__seg--high { background: linear-gradient(160deg, #53d281, var(--m-high));
 background: linear-gradient(160deg, color-mix(in srgb, var(--m-high) 78%, #fff), var(--m-high)); }
.m-bar__seg--medium { background: linear-gradient(160deg, #efc43e, var(--m-med));
 background: linear-gradient(160deg, color-mix(in srgb, var(--m-med) 78%, #fff), var(--m-med)); }
.m-bar__seg--low { background: linear-gradient(160deg, #f36d6d, var(--m-low));
 background: linear-gradient(160deg, color-mix(in srgb, var(--m-low) 78%, #fff), var(--m-low)); }
[data-g="1"] { --g: 1; } [data-g="2"] { --g: 2; } [data-g="3"] { --g: 3; } [data-g="4"] { --g: 4; }
[data-g="5"] { --g: 5; } [data-g="6"] { --g: 6; } [data-g="7"] { --g: 7; } [data-g="8"] { --g: 8; }
[data-g="9"] { --g: 9; } [data-g="10"] { --g: 10; } [data-g="11"] { --g: 11; } [data-g="12"] { --g: 12; }
.m-bar__face {
  position: absolute;
  bottom: calc(var(--h, 0%) + 3 * var(--u));
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.m-bar[data-emo="tired"] .m-bar__face { background-image: url("/assets/images/app/mood/Tired.webp"); }
.m-bar[data-emo="calm"] .m-bar__face { background-image: url("/assets/images/app/mood/Calm.webp"); }
.m-bar[data-emo="anxious"] .m-bar__face { background-image: url("/assets/images/app/mood/Anxious.webp"); }
.m-bar[data-emo="stressed"] .m-bar__face { background-image: url("/assets/images/app/mood/Stressed.webp"); }
.m-bar[data-emo="motivated"] .m-bar__face { background-image: url("/assets/images/app/mood/Motivated.webp"); }
.m-bar[data-emo="sad"] .m-bar__face { background-image: url("/assets/images/app/mood/Sad.webp"); }
[data-h="28"] { --h: 28%; } [data-h="33"] { --h: 33%; } [data-h="39"] { --h: 39%; }
[data-h="44"] { --h: 44%; } [data-h="52"] { --h: 52%; } [data-h="72"] { --h: 72%; } [data-h="100"] { --h: 100%; }
.m-bar__day { position: absolute; bottom: calc(-18 * var(--u)); font-family: var(--m-mono); font-size: calc(9.5 * var(--u)); font-weight: 800; color: var(--ks-muted); }
.m-bar--today .m-bar__day { color: var(--m-accent); background: rgba(155, 123, 255, 0.2);
 background: color-mix(in srgb, var(--m-accent) 20%, transparent); border-radius: calc(7 * var(--u)); padding: 0 calc(5 * var(--u)); }
.m-bars__avg { position: absolute; left: 0; right: 0; bottom: 52%; border-top: calc(1.4 * var(--u)) dashed rgba(255, 255, 255, 0.35); }
.m-bars__avg span { position: absolute; right: 0; bottom: calc(2 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: calc(5 * var(--u)); background: #15131b; font-family: var(--m-mono); font-size: calc(8.5 * var(--u)); color: rgba(255, 255, 255, 0.7); }

.m-curve { width: 100%; height: calc(160 * var(--u)); }
.m-curve__guides line { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.m-curve__line { fill: none; stroke: url(#m-val-grad); stroke-width: 3.2; stroke-linecap: round; }
.m-curve__fill { fill: url(#m-val-fill); }
.m-curve__dot { fill: #fff; stroke-width: 3; }
.m-curve__dot:nth-of-type(1) { stroke: var(--m-med); }
.m-curve__dot:nth-of-type(2) { stroke: var(--m-high); }
.m-curve__dot:nth-of-type(3) { stroke: var(--m-low); }
.m-curve__dot:nth-of-type(4) { stroke: var(--m-med); }
.m-curve__dot:nth-of-type(5) { stroke: var(--m-high); }
.m-curve__dot:nth-of-type(6) { stroke: var(--m-low); }
.m-curve__dot:nth-of-type(7) { stroke: var(--m-med); }
.m-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(14 * var(--u)); margin-top: calc(10 * var(--u)); }
.m-legend__item { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 800; letter-spacing: 0.1em; color: rgba(248, 250, 252, 0.65); }
.m-legend__swatch { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(4 * var(--u)); }
.m-legend__swatch--high { background: var(--m-high); }
.m-legend__swatch--med { background: var(--m-med); }
.m-legend__swatch--low { background: var(--m-low); }
.m-hint { margin: calc(8 * var(--u)) 0 0; text-align: center; font-size: calc(11 * var(--u)); line-height: 1.35; color: var(--ks-muted); }
.m-divider { height: 1px; background: rgba(255, 255, 255, 0.07); margin: calc(12 * var(--u)) 0; }

.m-daypeek { display: grid; gap: calc(8 * var(--u)); }
.m-daypeek__date { font-size: calc(12.5 * var(--u)); font-weight: 800; color: rgba(255, 255, 255, 0.75); }
.m-daypeek__row { display: flex; gap: calc(8 * var(--u)); overflow-x: auto; padding-bottom: calc(2 * var(--u)); scrollbar-width: none; }
.m-daypill {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  padding: calc(5 * var(--u)) calc(11 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u));
  border-radius: calc(22 * var(--u));
  border: 1px solid rgba(155, 123, 255, 0.6);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background: rgba(155, 123, 255, 0.16);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.m-daypill img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.m-daypill b { display: block; font-size: calc(12 * var(--u)); }
.m-daypill span { display: block; font-family: var(--m-mono); font-size: calc(9.5 * var(--u)); color: var(--ks-muted); }

/* Calendario 30D */
.m-cal { display: grid; gap: calc(6 * var(--u)); }
.m-cal__head { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(6 * var(--u)); }
.m-cal__head span { text-align: center; font-family: var(--m-mono); font-size: calc(10 * var(--u)); font-weight: 800; color: var(--ks-muted); }
.m-cal__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(6 * var(--u)); }
.m-cal__cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: calc(16 * var(--u));
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--m-mono);
  font-size: calc(11 * var(--u));
  font-weight: 800;
  color: #9CA3AF;
}
.m-cal__cell--void { background: transparent; }
.m-cal__cell--high, .m-cal__cell--medium, .m-cal__cell--low { color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }
.m-cal__cell--high { background: rgba(34, 197, 94, 0.6);
 background: color-mix(in srgb, var(--m-high) 60%, transparent); }
.m-cal__cell--medium { background: rgba(234, 179, 8, 0.6);
 background: color-mix(in srgb, var(--m-med) 60%, transparent); }
.m-cal__cell--low { background: rgba(239, 68, 68, 0.6);
 background: color-mix(in srgb, var(--m-low) 60%, transparent); }
.m-cal__cell--high.m-cal__q2 { background: rgba(34, 197, 94, 0.8);
 background: color-mix(in srgb, var(--m-high) 80%, transparent); }
.m-cal__cell--medium.m-cal__q2 { background: rgba(234, 179, 8, 0.8);
 background: color-mix(in srgb, var(--m-med) 80%, transparent); }
.m-cal__cell--low.m-cal__q2 { background: rgba(239, 68, 68, 0.8);
 background: color-mix(in srgb, var(--m-low) 80%, transparent); }
.m-cal__cell--high.m-cal__q3 { background: var(--m-high); color: #06210f; text-shadow: none; }
.m-cal__cell--medium.m-cal__q3 { background: var(--m-med); color: #241c02; text-shadow: none; }
.m-cal__cell--low.m-cal__q3 { background: var(--m-low); color: #2b0605; text-shadow: none; }
.m-cal__cell--today { outline: calc(1.8 * var(--u)) solid var(--m-accent); outline-offset: calc(1 * var(--u)); }
.m-cal__cell--sel { outline: calc(2 * var(--u)) solid #fff; outline-offset: calc(1 * var(--u)); }

/* Grilla 90D tipo GitHub */
.m-gh { display: grid; gap: calc(3 * var(--u)); }
.m-gh__row { display: grid; grid-template-columns: calc(14 * var(--u)) repeat(14, 1fr); gap: calc(3 * var(--u)); align-items: center; }
.m-gh__row > i { font-style: normal; font-family: var(--m-mono); font-size: calc(8.5 * var(--u)); font-weight: 700; color: var(--ks-muted); }
.m-gh__cell { aspect-ratio: 1; border-radius: calc(5 * var(--u)); background: rgba(255, 255, 255, 0.04); }
.m-gh__cell--void { background: transparent; }
.m-gh__cell--high { background: rgba(34, 197, 94, 0.55);
 background: color-mix(in srgb, var(--m-high) 55%, transparent); }
.m-gh__cell--medium { background: rgba(234, 179, 8, 0.55);
 background: color-mix(in srgb, var(--m-med) 55%, transparent); }
.m-gh__cell--low { background: rgba(239, 68, 68, 0.55);
 background: color-mix(in srgb, var(--m-low) 55%, transparent); }
.m-gh__q2 { filter: saturate(1.1) brightness(1.25); }
.m-gh__q3 { filter: saturate(1.15) brightness(1.5); }
.m-gh__ends { display: flex; justify-content: space-between; margin-top: calc(5 * var(--u)); font-family: var(--m-mono); font-size: calc(9 * var(--u)); color: var(--ks-muted); }

/* Emociones, triggers y ritmo */
.m-energybar { display: flex; height: calc(10 * var(--u)); border-radius: calc(6 * var(--u)); overflow: hidden; }
.m-energybar > i { display: block; }
.m-energybar .e-high { background: var(--m-high); }
.m-energybar .e-med { background: var(--m-med); }
.m-energybar .e-low { background: var(--m-low); }
.m-egroup { margin-top: calc(13 * var(--u)); }
.m-egroup__head { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.m-egroup__dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; box-shadow: 0 0 calc(6 * var(--u)) currentColor; background: currentColor; }
.m-egroup__label { font-size: calc(10.5 * var(--u)); font-weight: 900; letter-spacing: 0.13em; }
.m-egroup__pct { margin-left: auto; font-family: var(--m-mono); font-size: calc(12 * var(--u)); font-weight: 800; color: rgba(248, 250, 252, 0.7); }
.m-fichas { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
.m-ficha {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(9 * var(--u));
  border-radius: calc(20 * var(--u));
  border: 1px solid rgba(155, 123, 255, 0.35);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: rgba(155, 123, 255, 0.1);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.m-ficha img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); flex: 0 0 auto; }
.m-ficha__body { flex: 1; min-width: 0; display: grid; gap: calc(4 * var(--u)); }
.m-ficha__name { font-size: calc(12 * var(--u)); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-ficha__meter { display: flex; gap: calc(1.5 * var(--u)); }
.m-ficha__meter i { flex: 1; height: calc(3.5 * var(--u)); border-radius: calc(2 * var(--u)); background: rgba(255, 255, 255, 0.08); }
.m-ficha__meter i.on { background: var(--mc, var(--accent)); }
.m-ficha__count { font-family: var(--m-mono); font-size: calc(12.5 * var(--u)); font-weight: 900; color: rgba(255, 255, 255, 0.85); }

.m-trigrow { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.m-trigrow + .m-trigrow { margin-top: calc(10 * var(--u)); }
.m-trigrow__emoji { width: calc(32 * var(--u)); height: calc(32 * var(--u)); flex: 0 0 auto; display: grid; place-items: center; border-radius: calc(14 * var(--u)); background: rgba(255, 255, 255, 0.07); font-size: calc(15 * var(--u)); }
.m-trigrow__body { flex: 1; min-width: 0; display: grid; gap: calc(5 * var(--u)); }
.m-trigrow__top { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.m-trigrow__name { flex: 1; min-width: 0; font-size: calc(12.5 * var(--u)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-trigrow__total { font-family: var(--m-mono); font-size: calc(11.5 * var(--u)); font-weight: 800; color: rgba(255, 255, 255, 0.75); }
.m-distbar { display: flex; height: calc(8 * var(--u)); border-radius: calc(5 * var(--u)); overflow: hidden; }
.m-distbar i { display: block; }
.m-distbar .e-high { background: var(--m-high); }
.m-distbar .e-med { background: var(--m-med); }
.m-distbar .e-low { background: var(--m-low); }

.m-rhythm { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.m-rhythm + .m-rhythm { margin-top: calc(10 * var(--u)); }
.m-rhythm svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: 0 0 auto; color: var(--m-accent); }
.m-rhythm__label { width: calc(64 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 700; }
.m-rhythm__bar { flex: 1; display: flex; height: calc(10 * var(--u)); border-radius: calc(5 * var(--u)); overflow: hidden; max-width: calc(180 * var(--u)); }
.m-rhythm__bar--half { flex: 0 0 50%; }
.m-tl__segments i.on:nth-of-type(1) { opacity: 0.5; }
.m-tl__segments i.on:nth-of-type(2) { opacity: 0.56; }
.m-tl__segments i.on:nth-of-type(3) { opacity: 0.62; }
.m-tl__segments i.on:nth-of-type(4) { opacity: 0.68; }
.m-tl__segments i.on:nth-of-type(5) { opacity: 0.74; }
.m-tl__segments i.on:nth-of-type(6) { opacity: 0.80; }
.m-tl__segments i.on:nth-of-type(7) { opacity: 0.86; }
.m-tl__segments i.on:nth-of-type(8) { opacity: 0.92; }
.m-tl__segments i.on:nth-of-type(9) { opacity: 1; }
.m-tl__segments i.on:nth-of-type(10) { opacity: 1; }
.m-rhythm__bar i { display: block; }
.m-rhythm__bar .e-high { background: var(--m-high); }
.m-rhythm__bar .e-med { background: var(--m-med); }
.m-rhythm__bar .e-low { background: var(--m-low); }
.m-rhythm__empty { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(5 * var(--u)); background: rgba(255, 255, 255, 0.06); }
.m-rhythm__pct { width: calc(38 * var(--u)); text-align: right; font-family: var(--m-mono); font-size: calc(11.5 * var(--u)); font-weight: 800; }

/* Comparación, acompañantes, semana tipo y arco (Mastery) */
.m-compare__row { display: flex; align-items: center; gap: calc(10 * var(--u)); --pc: var(--m-accent); }
.m-compare__row--high { --pc: var(--m-high); }
.m-compare__row--med { --pc: var(--m-med); }
.m-compare__row--low { --pc: var(--m-low); }
.m-compare__row + .m-compare__row { margin-top: calc(12 * var(--u)); }
.m-compare__label { width: calc(54 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 900; letter-spacing: 0.12em; }
.m-compare__bars { flex: 1; display: grid; gap: calc(4 * var(--u)); }
.m-pair { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.m-pair__rail { flex: 1; height: calc(8 * var(--u)); border-radius: calc(5 * var(--u)); background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.m-pair__fill { display: block; height: 100%; border-radius: inherit; background: var(--pc, var(--m-accent)); width: var(--w, 0%); }
.m-pair__fill--before { background: rgba(155, 123, 255, 0.24);
 background: color-mix(in srgb, var(--pc, var(--m-accent)) 24%, transparent); }
.m-pair__pct { width: calc(38 * var(--u)); text-align: right; font-family: var(--m-mono); font-size: calc(11 * var(--u)); font-weight: 800; }
.m-compare__legend { display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); margin-top: calc(12 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 700; color: var(--ks-muted); }
.m-compare__swatch { display: inline-block; width: calc(12 * var(--u)); height: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: currentColor; opacity: 0.22; }
.m-compare__swatch--now { width: calc(18 * var(--u)); background: linear-gradient(90deg, var(--m-high), var(--m-med), var(--m-low)); opacity: 1; }
.m-moves { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); }
.m-move {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  border-radius: calc(20 * var(--u));
  border: 1px solid rgba(155, 123, 255, 0.4);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: rgba(155, 123, 255, 0.12);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: calc(11.5 * var(--u));
  font-weight: 800;
}
.m-move img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.m-move b { font-family: var(--m-mono); font-weight: 800; color: var(--ks-text-2); }
.m-move i { font-style: normal; color: var(--m-accent); }

.m-companion { display: flex; gap: calc(10 * var(--u)); }
.m-companion + .m-companion { margin-top: calc(12 * var(--u)); }
.m-companion__emoji { width: calc(36 * var(--u)); height: calc(36 * var(--u)); flex: 0 0 auto; display: grid; place-items: center; border-radius: calc(16 * var(--u)); background: rgba(255, 255, 255, 0.07); font-size: calc(17 * var(--u)); }
.m-companion__body { flex: 1; min-width: 0; display: grid; gap: calc(6 * var(--u)); }
.m-companion__top { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.m-companion__name { flex: 1; font-size: calc(12.5 * var(--u)); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-companion__energy { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); font-size: calc(9.5 * var(--u)); font-weight: 900; letter-spacing: 0.12em; }
.m-companion__energy svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.m-companion--high { --m-accent: var(--m-high); }
.m-companion--low { --m-accent: var(--m-low); }

.m-weekdays { display: flex; align-items: stretch; gap: calc(4 * var(--u)); height: calc(120 * var(--u)); }
.m-wd { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); }
.m-wd__star { height: calc(14 * var(--u)); font-size: calc(12 * var(--u)); color: var(--m-gold); }
.m-wd__mid { position: relative; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.m-wd__mid::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, 0.10); }
.m-wd__bar { position: absolute; left: 50%; translate: -50% 0; width: calc(14 * var(--u)); border-radius: calc(6 * var(--u)); }
.m-wd__bar--up { bottom: 50%; background: linear-gradient(180deg, var(--m-high), rgba(34, 197, 94, 0.35));
 background: linear-gradient(180deg, var(--m-high), color-mix(in srgb, var(--m-high) 35%, transparent)); }
.m-wd__bar--down { top: 50%; background: linear-gradient(180deg, rgba(239, 68, 68, 0.35), var(--m-low));
 background: linear-gradient(180deg, color-mix(in srgb, var(--m-low) 35%, transparent), var(--m-low)); }
.m-wd__label { font-family: var(--m-mono); font-size: calc(9.5 * var(--u)); font-weight: 800; color: var(--ks-muted); }
.m-wd--best .m-wd__label { color: var(--m-gold); }

.m-arcWeek { display: flex; align-items: flex-end; gap: calc(6 * var(--u)); height: calc(132 * var(--u)); overflow: hidden; }
.m-arcWeek__slot { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); height: 100%; }
.m-arcWeek__slot img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.m-arcWeek__bar { width: calc(20 * var(--u)); border-radius: calc(8 * var(--u)); background: linear-gradient(180deg, #4ed17e, var(--wc, var(--m-accent)));
 background: linear-gradient(180deg, color-mix(in srgb, var(--wc, var(--m-accent)) 80%, #fff), var(--wc, var(--m-accent))); margin-top: auto; }
[data-eg="high"] { --wc: var(--m-high); }
[data-eg="med"] { --wc: var(--m-med); }
[data-eg="low"] { --wc: var(--m-low); }
.m-arcWeek__label { font-family: var(--m-mono); font-size: calc(9 * var(--u)); color: var(--ks-muted); white-space: nowrap; }

/* Mastery teaser (Free) */
.m-teaser {
  border-radius: calc(28 * var(--u));
  border: calc(1.2 * var(--u)) solid rgba(245, 196, 81, 0.58);
  border: calc(1.2 * var(--u)) solid color-mix(in srgb, var(--m-gold) 58%, transparent);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(245, 196, 81, 0.14), transparent 60%),
    linear-gradient(150deg, #221c12, #14110c);
  padding: calc(16 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(245, 196, 81, 0.16);
}
.m-teaser__head { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 900; letter-spacing: 0.16em; color: var(--m-gold); }
.m-teaser__head svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.m-teaser h3 { margin: calc(8 * var(--u)) 0 calc(4 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 900; }
.m-teaser p { margin: 0 0 calc(12 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: 1.35; color: rgba(255, 255, 255, 0.7); }
.m-gold-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--u));
  min-height: calc(44 * var(--u));
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe9b8, #f5c451 55%, #e8a93e);
  border: 1px solid #e8a93e;
  color: #2b1d00;
  font-size: calc(13 * var(--u));
  font-weight: 900;
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(245, 196, 81, 0.3);
}
.m-gold-btn svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }

/* ── Línea de tiempo ───────────────────────────────────────────────────── */
.m-tl { position: relative; padding-left: calc(24 * var(--u)); }
.m-tl__rail { position: absolute; left: calc(7 * var(--u)); top: calc(4 * var(--u)); bottom: 0; width: calc(2 * var(--u)); border-radius: 2px; background: linear-gradient(180deg, rgba(155, 123, 255, 0.55), rgba(155, 123, 255, 0.2));
 background: linear-gradient(180deg, color-mix(in srgb, var(--m-accent) 55%, transparent), color-mix(in srgb, var(--m-accent) 20%, transparent)); }
.m-tl__day { position: relative; padding: calc(8 * var(--u)) 0 calc(10 * var(--u)); }
.m-tl__day::before { content: ""; position: absolute; left: calc(-21 * var(--u)); top: calc(13 * var(--u)); width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: var(--m-accent); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(155, 123, 255, 0.25);
 box-shadow: 0 0 0 calc(3 * var(--u)) color-mix(in srgb, var(--m-accent) 25%, transparent); }
.m-tl__day:has(.m-tl__entry[data-emo="calm"])::before,
.m-tl__day:has(.m-tl__entry[data-emo="motivated"])::before,
.m-tl__day:has(.m-tl__entry[data-emo="happy"])::before { background: var(--m-high); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(34, 197, 94, 0.25);
 box-shadow: 0 0 0 calc(3 * var(--u)) color-mix(in srgb, var(--m-high) 25%, transparent); }
.m-tl__day:has(.m-tl__entry[data-emo="sad"])::before,
.m-tl__day:has(.m-tl__entry[data-emo="anxious"])::before { background: var(--m-low); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(239, 68, 68, 0.25);
 box-shadow: 0 0 0 calc(3 * var(--u)) color-mix(in srgb, var(--m-low) 25%, transparent); }
.m-tl__dayhead { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.m-tl__dayhead b { font-size: calc(13 * var(--u)); font-weight: 800; }
.m-tl__dayhead span { font-family: var(--m-mono); font-size: calc(10 * var(--u)); color: var(--ks-muted); }
.m-tl__node { position: relative; padding: calc(8 * var(--u)) 0; }
.m-tl__entry { position: relative; }
.m-tl__entry::before { content: ""; position: absolute; left: calc(-18 * var(--u)); top: calc(16 * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--accent, var(--m-accent)); }
.m-tl__entry {
  display: flex;
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u));
  border-radius: calc(24 * var(--u));
  border: 1px solid rgba(155, 123, 255, 0.26);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: linear-gradient(150deg, #272238, #131119);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 10%, #1a1822), #131119);
}
.m-tl__entry img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex: 0 0 auto; }
.m-tl__entry-body { flex: 1; min-width: 0; display: grid; gap: calc(5 * var(--u)); }
.m-tl__entry-top { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.m-tl__entry-top b { font-size: calc(13.5 * var(--u)); font-weight: 800; }
.m-tl__entry-top span { font-family: var(--m-mono); font-size: calc(10.5 * var(--u)); color: var(--ks-muted); }
.m-tl__title { margin: 0; font-size: calc(12 * var(--u)); color: var(--ks-text-2); }
.m-tl__segments { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.m-tl__segments i { width: calc(8 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: rgba(255, 255, 255, 0.08); }
.m-tl__segments i.on { background: var(--accent); opacity: var(--o, 1); }
.m-tl__segments b { margin-left: calc(5 * var(--u)); font-family: var(--m-mono); font-size: calc(9.5 * var(--u)); color: var(--ks-muted); }
.m-tl__tags { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); }
.m-tl__tag { padding: calc(2 * var(--u)) calc(7 * var(--u)); border-radius: calc(8 * var(--u)); background: rgba(255, 255, 255, 0.06); font-size: calc(10 * var(--u)); font-weight: 700; color: rgba(255, 255, 255, 0.7); }
.m-tl__more { display: block; margin: calc(8 * var(--u)) auto 0; font-size: calc(12 * var(--u)); font-weight: 800; color: var(--m-accent); }

.m-period {
  position: sticky;
  top: calc(46 * var(--u));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin: calc(6 * var(--u)) 0;
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(10, 12, 16, 0.88);
  background: color-mix(in srgb, var(--ks-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(calc(6 * var(--u)));
  backdrop-filter: blur(calc(6 * var(--u)));
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.m-period svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--m-accent); }
.m-period b { font-size: calc(12 * var(--u)); }
.m-period span { margin-left: auto; font-family: var(--m-mono); font-size: calc(10 * var(--u)); color: var(--ks-muted); }

/* ── Tablero de revisión: las 26 emociones ─────────────────────────────── */
.m-board {
  border: 1px solid var(--ks-glass-border);
  border-radius: 18px;
  padding: 22px 22px 26px;
  background: rgba(255, 255, 255, 0.03);
}
.m-board > h2 { margin: 0 0 4px; font-size: 1.05rem; }
.m-board > p { margin: 0 0 18px; color: var(--ks-text-2); font-size: 0.9rem; }
.m-board__group + .m-board__group { margin-top: 18px; }
.m-board__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}
.m-board__label span { color: var(--ks-muted); font-family: var(--m-mono); }
.m-board__label--high { color: #4ade80; }
.m-board__label--medium { color: #facc15; }
.m-board__label--low { color: #f87171; }
.m-board__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.m-board .m-tile { min-height: 104px; cursor: default; }
.m-board .m-tile img { width: 56px; height: 56px; }
.m-board .m-tile__name { font-size: 0.72rem; }

/* ── Notas, foco y responsive ──────────────────────────────────────────── */
.preview-animo .ks-view__tabs { background: rgba(255, 255, 255, 0.06); }
.preview-animo :focus-visible { outline: 2px solid var(--ks-gold); outline-offset: 2px; border-radius: 4px; }
.m-chartbtn input:focus-visible ~ label,
.ks-view > input:focus-visible ~ .ks-view__tabs label { outline: 2px solid var(--ks-gold); outline-offset: 2px; }

@media (max-width: 560px) {
  .m-board__grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}