/* Visual direction A (pixel sobrio) with occasional B accents (neon glow).
   Pixel font only for numbers and titles; body text stays readable. */

:root {
  /* Module colours: pastel, one per module. Each page tints the whole screen with its own. */
  --mod-tokens: #f4a65c;      /* Fichas: orange */
  --mod-exercise: #ef7a58;    /* Ejercicio: reddish orange */
  --mod-finance: #f1d268;     /* Contabilidad: yellow */
  --mod-meditation: #86d39b;  /* Meditación: green */
  --mod-japanese: #a990f2;    /* Japonés: purple */
  --mod-music: #84a6e0;       /* Música: blue, slightly grey */
  --mod-projects: #c99a4e;    /* Proyectos musicales: ochre */

  --violet: #cc79e4;          /* base highlight: the Z, menu icon, focus accents */
  --module: #7d82aa;          /* tint of the current page (neutral on home and settings) */
  --ui: var(--violet);        /* buttons, titles and active tabs of the current page */

  --gold: #e9c46a;
  --teal: #2a9d8f;
  --coral: #e76f51;
  --negative: #e76f51;
  --neon-cyan: #5ef1ff;    /* B accent: timer and focus */
  --neon-yellow: #ffd23f;  /* B accent: redeemed rewards and balance */
  --text: #ebe8df;
  --muted: #a19d90;
  --pixel: "Silkscreen", "Courier New", monospace;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
/* Every page derives its dark, tinted background from its module colour. */
:root {
  --bg: color-mix(in oklab, var(--module) 9%, #0e1017);
  --surface: color-mix(in oklab, var(--module) 13%, #161922);
  --surface-2: color-mix(in oklab, var(--module) 18%, #1c1f2a);
  --shade: color-mix(in oklab, var(--module) 5%, #08090d);   /* stepped "shadow" for pixel-style borders */
  --line: color-mix(in oklab, var(--module) 22%, #252937);   /* inset borders */
}
:root:has(> body.tokens)      { --module: var(--mod-tokens); --ui: var(--mod-tokens); }
:root:has(> body.exercise)    { --module: var(--mod-exercise); --ui: var(--mod-exercise); }
:root:has(> body.finance)     { --module: var(--mod-finance); --ui: var(--mod-finance); }
:root:has(> body.meditation)  { --module: var(--mod-meditation); --ui: var(--mod-meditation); }
:root:has(> body.music)       { --module: var(--mod-music); --ui: var(--mod-music); }
:root:has(> body.japanese)    { --module: var(--mod-japanese); --ui: var(--mod-japanese); }
:root:has(> body.projects)    { --module: var(--mod-projects); --ui: var(--mod-projects); }

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: transparent; min-height: 100dvh; }
/* A soft glow of the module colour at the top of the screen */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 55% at 50% -12%, color-mix(in oklab, var(--module) 16%, transparent), transparent 72%),
    radial-gradient(90% 40% at 100% 110%, color-mix(in oklab, var(--module) 7%, transparent), transparent 70%);
}
body {
  color: var(--text);
  font-family: var(--body);
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
  font-variant-ligatures: none; /* the pixel font joins "fi" otherwise */
}
main { max-width: 560px; margin: 0 auto; padding: 16px 0 48px; }

/* Titles use the pixel font; smaller headings stay in the body font. */
h1, h2 { font-family: var(--pixel); font-weight: 400; letter-spacing: 0.02em; }
h1 { font-size: 1.4rem; margin: 24px 0 8px; }
h2 { font-size: 0.95rem; margin: 28px 0 10px; color: var(--ui); text-transform: uppercase; }
h3 { font-size: 0.95rem; margin: 16px 0 8px; }

.muted { color: var(--muted); font-size: 0.9rem; }
[hidden] { display: none !important; }
a.back { color: var(--ui); text-decoration: none; display: inline-block; margin-bottom: 8px; font-size: 0.9rem; }

/* Stepped pixel border: a hard shadow instead of a soft one. */
.pixel-card {
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--shade), 5px 5px 0 0 var(--shade);
}

.summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 16px; margin-top: 12px;
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--shade), 5px 5px 0 0 var(--shade);
}
.summary div { display: flex; flex-direction: column; }
.summary strong {
  font-family: var(--pixel); font-weight: 400;
  font-size: 1.8rem; color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 210, 63, 0.45); /* B: balance glow */
}
.summary div + div strong { color: var(--teal); text-shadow: none; }
.label { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* Behavior buttons */
.behavior-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.behavior {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 92px; padding: 14px; text-align: left;
  background: var(--surface); color: var(--text);
  border: 0; border-left: 6px solid var(--accent, var(--muted));
  box-shadow: 0 0 0 2px var(--shade), 4px 4px 0 0 var(--shade);
  font: inherit; font-size: 1rem; cursor: pointer;
}
.behavior b { font-family: var(--pixel); font-weight: 400; font-size: 1.2rem; color: var(--teal); }
.behavior small { color: var(--muted); font-size: 0.8rem; }
.behavior:active { transform: translate(2px, 2px); box-shadow: 0 0 0 2px var(--shade), 2px 2px 0 0 var(--shade); }
.behavior:focus-visible,
button:focus-visible,
a.module:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
  box-shadow: 0 0 10px rgba(94, 241, 255, 0.5); /* B: focus glow */
}

/* Lists */
.list { list-style: none; padding: 0; margin: 0; }
.list li {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--surface); padding: 10px 12px; margin-bottom: 10px;
  box-shadow: 0 0 0 2px var(--shade), 3px 3px 0 0 var(--shade);
}
.list li > span:last-child { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.list li b { font-family: var(--pixel); font-weight: 400; }

.reward-name { display: inline-flex; align-items: center; gap: 8px; color: var(--accent, var(--text)); }
.reward-name i { width: 18px; height: 18px; }
.swatch { display: inline-block; width: 12px; height: 12px; margin-right: 8px; box-shadow: 0 0 0 1px var(--shade); }

/* Redeemed rewards: B accent on the timeline entry */
.list li.redeemed { box-shadow: 0 0 0 2px var(--neon-yellow), 0 0 12px rgba(255, 210, 63, 0.35); }

/* Module tiles on the home page */
.modules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.module {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  background: var(--surface); color: var(--text); text-decoration: none;
  box-shadow: 0 0 0 2px var(--shade), 4px 4px 0 0 var(--shade);
}
.module i { width: 26px; height: 26px; color: var(--violet); }
.module span { font-family: var(--pixel); font-size: 0.95rem; }
.module small { color: var(--muted); }
.module.disabled { opacity: 0.45; }

/* Buttons */
button {
  font: inherit; font-size: 0.95rem; border: 0; padding: 10px 16px; cursor: pointer;
  background: var(--ui); color: var(--shade);
  box-shadow: 0 0 0 2px var(--shade), 3px 3px 0 0 var(--shade);
}
button:active { transform: translate(2px, 2px); box-shadow: 0 0 0 2px var(--shade), 1px 1px 0 0 var(--shade); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.secondary { background: var(--surface); color: var(--ui); }
button.mini { padding: 4px 10px; font-size: 0.8rem; }
button.danger { background: var(--coral); color: var(--shade); }

input, select {
  font: inherit; padding: 10px 12px; min-width: 0; flex: 1;
  background: var(--shade); color: var(--text); border: 0;
  box-shadow: inset 0 0 0 2px var(--line);
}
input[type="color"] { flex: 0 0 56px; height: 42px; padding: 4px; }
.row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.row input[type="number"] { flex: 0 0 96px; }

details { margin-top: 32px; }
summary { cursor: pointer; color: var(--ui); font-family: var(--pixel); font-size: 0.95rem; padding: 8px 0; }

/* Timer dialog: B accent on the clock */
dialog {
  background: var(--surface); color: var(--text); border: 0;
  padding: 20px; width: min(92vw, 380px);
  box-shadow: 0 0 0 2px var(--shade), 6px 6px 0 0 var(--shade);
}
dialog::backdrop { background: rgba(10, 11, 16, 0.75); }
.timer h2 { margin-top: 0; text-align: center; color: var(--violet); }
.timer .clock {
  font-family: var(--pixel); font-size: 3rem; text-align: center; margin: 12px 0;
  color: var(--neon-cyan); text-shadow: 0 0 12px rgba(94, 241, 255, 0.6);
  font-variant-numeric: tabular-nums;
}
.timer #timer-status { text-align: center; }
.timer .row { justify-content: center; }

#toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px); opacity: 0; transition: all .2s;
  background: var(--shade); color: var(--neon-yellow);
  box-shadow: 0 0 0 2px var(--neon-yellow), 0 0 14px rgba(255, 210, 63, 0.35);
  padding: 10px 16px; font-size: 0.9rem; pointer-events: none;
  max-width: calc(100% - 32px);
}
#toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* Top bar, greeting and user menu (from the Design canvas) */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 44px; margin: 8px 0 4px;
}
.brand { font-family: var(--pixel); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.08em; }
.greeting {
  font-family: var(--pixel); font-weight: 400; font-size: 1.6rem; line-height: 1.2;
  color: var(--gold); margin: 12px 0 16px;
}

.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: var(--surface); color: var(--violet);
  box-shadow: 0 0 0 2px var(--shade), 3px 3px 0 0 var(--shade);
}
.icon-button i, .icon-button svg { width: 22px; height: 22px; }

/* Side menu: opened from the person icon */
.drawer { position: fixed; inset: 0; z-index: 10; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(10, 11, 16, 0.7); }
.drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(80vw, 280px); padding: calc(env(safe-area-inset-top) + 16px) 16px 16px;
  background: var(--surface); box-shadow: -6px 0 0 0 var(--shade);
  display: flex; flex-direction: column; gap: 12px;
}
.drawer-header { display: flex; justify-content: space-between; align-items: center; }
.drawer-header .label { font-family: var(--pixel); color: var(--ui); font-size: 0.85rem; }
.drawer-nav { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.drawer-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px; background: var(--shade); color: var(--text);
  box-shadow: inset 0 0 0 2px var(--line);
  font: inherit; font-size: 1rem; text-align: left; text-decoration: none; border-radius: 0;
}
.drawer-item i, .drawer-item svg { width: 20px; height: 20px; color: var(--ui); flex: 0 0 auto; }
.drawer-item.danger, .drawer-item.danger i { color: var(--coral); }

.topbar a.back { margin: 0; }

/* Timer: progress bar and the pause rule (from the Design canvas) */
.timer .row button { flex: 1; }
.progress {
  height: 12px; margin: 16px 0 0;
  background: var(--shade); box-shadow: inset 0 0 0 2px var(--line);
}
.progress span {
  display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, var(--teal) 0 8px, var(--shade) 8px 10px);
  transition: width 0.5s linear;
}
.tip {
  display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding: 12px;
  background: var(--shade); box-shadow: inset 0 0 0 2px var(--line); font-size: 0.9rem;
}

/* Three-wallet summary: daily, today, savings */
.summary.three { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.summary.three strong { font-size: 1.5rem; }
.summary strong.savings { color: var(--violet); text-shadow: 0 0 10px rgba(204, 121, 228, 0.4); }

/* Register sheet: levels, timers, stopwatch and manual minutes */
.sheet h2 { margin-top: 0; color: var(--ui); }
.sheet .label { display: block; margin: 16px 0 8px; }
.level-list { display: flex; flex-direction: column; gap: 10px; }
.level {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: var(--shade); color: var(--text); text-align: left;
  box-shadow: inset 0 0 0 2px var(--line);
}
.level b { font-family: var(--pixel); font-weight: 400; color: var(--teal); }
button.wide { width: 100%; margin-top: 12px; }
.sheet .row { margin-top: 12px; margin-bottom: 0; flex-wrap: nowrap; }
.sheet .row input[type="number"] { flex: 1; }

/* Rewards with levels and the "Especial" badge */
.list li.reward { flex-wrap: wrap; }
.reward-levels { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.badge {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 6px; color: var(--shade); background: var(--muted);
}
.badge.special { background: var(--violet); box-shadow: 0 0 8px rgba(204, 121, 228, 0.5); }
.check { display: flex; align-items: center; gap: 8px; flex: 1; color: var(--muted); font-size: 0.9rem; }
.check input { flex: 0 0 auto; width: 18px; height: 18px; }

/* ---------- Home: pixel scene, wallets and modules ---------- */
.sprite { display: block; image-rendering: pixelated; }

.hero {
  position: relative; overflow: hidden; margin: 8px 0 18px;
  aspect-ratio: 96 / 40; min-height: 150px; background: #0d0f17;
  box-shadow: 0 0 0 2px var(--shade), 5px 5px 0 0 var(--shade);
}
.hero-art { position: absolute; inset: 0; }
.hero-art svg { display: block; width: 100%; height: 100%; }
.hero-text { position: absolute; left: 16px; top: 14px; right: 40%; }
.hero .greeting {
  margin: 0; font-size: 1.5rem; text-shadow: 3px 3px 0 var(--shade);
}
.hero[data-time="afternoon"] .greeting { color: var(--violet); }
.hero[data-time="night"] .greeting { color: var(--neon-cyan); }
.hero-date { margin: 6px 0 0; color: var(--text); font-size: 0.85rem; text-shadow: 2px 2px 0 var(--shade); }

.wallets .label { display: flex; align-items: center; gap: 6px; }

.modules .module {
  position: relative; gap: 10px; min-height: 150px;
  border-top: 4px solid var(--accent, var(--muted));
}
.module-art { height: 48px; }
.module .module-name { font-family: var(--pixel); font-size: 1rem; color: var(--accent, var(--text)); }
.module small { line-height: 1.35; }
.module.disabled { opacity: 1; }
.module.disabled .module-art { opacity: 0.55; filter: saturate(0.6); }
.module.disabled .module-name { color: var(--muted); }
.soon {
  position: absolute; top: 10px; right: 10px;
  font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); padding: 2px 5px;
}
a.module:hover { box-shadow: 0 0 0 2px var(--accent), 4px 4px 0 0 var(--shade); }

/* ---------- Config rows and editor ---------- */
.list li.config-row { padding: 0; gap: 0; }
.row-link {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  padding: 12px; background: transparent; color: var(--text); box-shadow: none;
  text-align: left; font-size: 0.95rem;
}
.row-link:hover { background: var(--surface-2); }
.row-link:active { transform: none; box-shadow: none; }
.row-link.is-hidden { color: var(--muted); }
.row-link .swatch { flex: 0 0 auto; margin-right: 0; }
.config-row > .mini { margin-right: 10px; }
.column-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.column-head h2 { margin-bottom: 10px; }

.editor { width: min(94vw, 520px); }
.editor form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.field > span { color: var(--muted); font-size: 0.8rem; }
.field input[type="color"] { flex: 0 0 auto; width: 100%; }
.field-row { display: flex; gap: 12px; }
.levels { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }
.levels legend { font-family: var(--pixel); color: var(--ui); font-size: 0.85rem; margin-bottom: 8px; }
.level-row, .level-head { display: grid; grid-template-columns: 1fr 72px 72px 34px; gap: 6px; align-items: center; }
.level-row.reward-row, .level-head.reward-row { grid-template-columns: 1fr 80px 34px; }
.level-head span { color: var(--muted); font-size: 0.7rem; }
.level-row input { width: 100%; padding: 8px; }
.levels > .mini { align-self: flex-start; }
.hint { margin: 0; font-size: 0.8rem; }
.form-error { margin: 0; color: var(--coral); min-height: 1em; }
.form-error:empty { display: none; }
.editor-actions { display: flex; gap: 10px; }
.editor-actions button { flex: 1; }
.editor .wide { margin-top: 0; }

/* ---------- Desktop: more room and columns ---------- */
@media (min-width: 960px) {
  body.wide main { max-width: 1180px; }
  body.home main { max-width: 880px; }
  .columns { display: grid; gap: 32px; align-items: start; }
  .columns.two { grid-template-columns: 3fr 2fr; }
  .columns.three { grid-template-columns: repeat(3, 1fr); }
  .columns.two .behavior-grid { grid-template-columns: repeat(3, 1fr); }
  .home .modules { grid-template-columns: repeat(3, 1fr); }
  .home .hero { min-height: 220px; }
  .home .hero .greeting { font-size: 2.2rem; }
}

/* Fixes: badge size, editor fields keep their natural height */
.module .soon {
  position: static; align-self: flex-start; margin-top: auto;
  font-family: var(--body); font-size: 0.65rem; color: var(--muted);
}
.field input, .field select { flex: 0 0 auto; }

/* Today's history: tappable rows, popup and undo in the toast */
.today-row { justify-content: space-between; }
.today-row b { font-family: var(--pixel); font-weight: 400; flex: 0 0 auto; }
.list li.redeemed .today-row b { color: var(--neon-yellow); }
.level.current { box-shadow: inset 0 0 0 2px var(--ui); }
.level.current span::after { content: ' · actual'; color: var(--muted); font-size: 0.8rem; }
#record-details { margin: 0; }
#toast.has-action {
  display: flex; align-items: center; gap: 12px; pointer-events: auto;
  padding: 8px 8px 8px 16px;
}
#toast:not(.visible) { pointer-events: none; }
.toast-action { flex: 0 0 auto; }
#toast.has-action { width: min(92vw, 440px); justify-content: space-between; }

/* Reset points: kept apart at the end of Configuración */
.danger-zone {
  margin-top: 40px; padding: 16px;
  box-shadow: inset 0 0 0 2px var(--coral);
}
.danger-zone h2 { margin-top: 0; color: var(--coral); }
#reset-form { display: flex; flex-direction: column; gap: 14px; }
#reset-form h2 { color: var(--coral); }
#reset-form p { margin: 0; }
#reset-word { text-transform: uppercase; letter-spacing: 0.1em; }
.module.disabled .module-art { opacity: 0.85; filter: saturate(0.8); }

/* ---------- Exercise module ---------- */
textarea {
  font: inherit; padding: 10px 12px; width: 100%; resize: vertical;
  background: var(--shade); color: var(--text); border: 0; box-shadow: inset 0 0 0 2px var(--line);
}
a.button {
  display: inline-block; text-decoration: none; padding: 10px 16px;
  background: var(--ui); color: var(--shade); box-shadow: 0 0 0 2px var(--shade), 3px 3px 0 0 var(--shade);
}
.tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 16px;
  position: sticky; top: 0; z-index: 5; padding: 6px 0; background: var(--bg);
}
.tabs a {
  text-align: center; padding: 10px 4px; text-decoration: none; color: var(--muted);
  font-family: var(--pixel); font-size: 0.75rem; background: var(--surface);
  box-shadow: 0 0 0 2px var(--shade);
}
.tabs a.active { color: var(--shade); background: var(--ui); }
.card {
  background: var(--surface); padding: 14px; margin-bottom: 16px;
  box-shadow: 0 0 0 2px var(--shade), 4px 4px 0 0 var(--shade);
}
.card h2 { margin-top: 0; }
.accent-card { box-shadow: 0 0 0 2px var(--ui), 4px 4px 0 0 var(--shade); }
.accent-card p { margin-top: 0; }

.goal-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 10px; margin: 8px 0; }
.goal-row b { font-family: var(--pixel); font-weight: 400; }
.pips { display: flex; gap: 4px; flex-wrap: wrap; }
.pip { width: 18px; height: 18px; background: var(--shade); box-shadow: inset 0 0 0 2px var(--line); }
.goal-gym .pip.on { background: var(--coral); box-shadow: inset 0 0 0 2px #9c3d28; }
.goal-swim .pip.on { background: #3aa7d8; box-shadow: inset 0 0 0 2px #1d5a8c; }
.pip.bonus.on { outline: 2px solid var(--neon-yellow); outline-offset: -2px; }

.next-workout { color: var(--ui); font-family: var(--pixel); font-weight: 400; }
.preview { margin: 10px 0 12px; padding-left: 22px; line-height: 1.6; }
.swim-plan { margin: 8px 0 12px; }
.swim-plan summary { font-size: 0.85rem; }
.swim-plan ol { padding-left: 22px; line-height: 1.7; }
.activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.activity-grid button { width: 100%; }

.session-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.session-head h1 { margin: 4px 0; color: var(--ui); }
.session-head p { margin: 0 0 12px; }
.session-clock { font-family: var(--pixel); font-size: 1.4rem; color: var(--neon-cyan); text-shadow: 0 0 10px rgba(94, 241, 255, 0.5); }
.ex-card h3 { margin: 0; font-size: 1rem; }
.ex-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.video-link { color: var(--violet); font-size: 0.85rem; white-space: nowrap; text-decoration: none; }
.ex-target { margin: 6px 0 4px; font-size: 0.85rem; color: var(--muted); }
.cues { margin: 4px 0; font-size: 0.8rem; }
.ex-last { margin: 8px 0 4px; font-size: 0.85rem; }
.ex-tip { margin: 4px 0 10px; font-size: 0.9rem; color: var(--gold); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-tip.tip-increase { color: var(--teal); }
.ex-tip.tip-hold { color: var(--neon-yellow); }
.ex-tip.tip-swap { color: var(--coral); }
.set-list { list-style: none; padding: 0; margin: 0 0 8px; }
.set-list li { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 8px; padding: 4px 0; }
.set-list b { font-family: var(--pixel); font-weight: 400; }
.record { color: var(--neon-yellow); text-shadow: 0 0 8px rgba(255, 210, 63, 0.6); }
.set-input { display: grid; grid-template-columns: 70px 1fr 1fr auto; gap: 8px; align-items: center; margin: 6px 0 10px; }
.set-input input { width: 100%; min-width: 0; }
.ex-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.wrist { display: flex; align-items: center; gap: 8px; }
.light { width: 30px; height: 30px; padding: 0; opacity: 0.35; box-shadow: 0 0 0 2px var(--shade); }
.light.green { background: #3fbf6e; } .light.amber { background: #f4b942; } .light.red { background: var(--coral); }
.light.on { opacity: 1; box-shadow: 0 0 0 2px var(--text), 0 0 10px currentColor; }
.ex-actions { display: flex; gap: 6px; }
.ex-card.skipped { opacity: 0.6; }
.session-actions { margin-top: 16px; }
.rest-bar {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 8; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px;
  background: var(--shade); color: var(--neon-cyan); box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 14px rgba(94, 241, 255, 0.35);
}
.rest-bar b { font-family: var(--pixel); font-weight: 400; font-size: 1.2rem; }

.kind-dot { display: inline-block; width: 10px; height: 10px; flex: 0 0 auto; background: var(--muted); }
.kind-gym { background: var(--coral); } .kind-swim { background: #3aa7d8; } .kind-walk { background: var(--teal); }
.kind-run, .kind-bike { background: var(--gold); } .kind-cardio { background: var(--violet); } .kind-mobility { background: #8fa8ff; }
.light-dot { display: inline-block; width: 10px; height: 10px; }
.light-dot.green { background: #3fbf6e; } .light-dot.amber { background: #f4b942; } .light-dot.red { background: var(--coral); }
.detail-list { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.detail-list li { display: flex; flex-direction: column; gap: 2px; }

.chart-card { padding: 10px; }
.chart { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--line); stroke-width: 2; }
.chart .tick { fill: var(--muted); font-size: 9px; font-family: var(--body); }
.chart .line { fill: none; stroke: var(--gold); stroke-width: 2; }
.chart .dot { fill: var(--gold); }
.chart .dot.record { fill: var(--neon-yellow); stroke: var(--shade); }
.chart .bar.gym { fill: var(--coral); } .chart .bar.swim { fill: #3aa7d8; }
.chart .goal { stroke-width: 1; stroke-dasharray: 3 3; }
.chart .goal.gym { stroke: var(--coral); } .chart .goal.swim { stroke: #3aa7d8; }
.legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); margin: 8px 0 0; }
.record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; margin: 8px 0; }
.record-grid div { display: flex; flex-direction: column; gap: 4px; padding: 10px; background: var(--surface); box-shadow: 0 0 0 2px var(--shade); }
.record-grid strong { font-family: var(--pixel); font-weight: 400; color: var(--neon-yellow); }

.settings-form { display: flex; flex-direction: column; gap: 12px; }
.inline-field { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.inline-field > span { flex: 0 0 110px; }
.inline-field select { flex: 1; min-width: 0; }
.list li.group-label {
  background: none; box-shadow: none; padding: 10px 2px 4px; margin: 0;
  color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.field-row.three .field { min-width: 0; }
.check-list { display: grid; grid-template-columns: 1fr; gap: 6px; max-height: 180px; overflow: auto; padding: 4px; background: var(--shade); }
.wide-editor { width: min(96vw, 860px); }
.day-block { padding: 10px; margin-bottom: 12px; background: var(--shade); box-shadow: inset 0 0 0 2px var(--line); display: flex; flex-direction: column; gap: 8px; }
.day-head { display: flex; gap: 8px; align-items: center; }
.day-head input { flex: 1; }
.row-tools { display: flex; gap: 4px; flex: 0 0 auto; }
.item-head, .item-row { display: grid; grid-template-columns: minmax(0, 2.4fr) 52px 52px 52px 60px minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.item-head span { color: var(--muted); font-size: 0.7rem; }
.item-row input, .item-row select { width: 100%; min-width: 0; padding: 8px 6px; }
.items { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 700px) {
  .item-head { display: none; }
  .item-row { grid-template-columns: 1fr 1fr 1fr 1fr; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
  .item-row select { grid-column: 1 / -1; }
  .item-row [name="notes"] { grid-column: 1 / 3; }
  .item-row .row-tools { grid-column: 3 / -1; justify-content: flex-end; }
}
/* Fieldsets default to min-width: min-content, which overflows narrow dialogs */
fieldset.levels { min-width: 0; }
.wide-editor .day-head input { min-width: 0; }

/* Fichas inner tabs and general settings */
.tabs.two { grid-template-columns: 1fr 1fr; }
.settings .card p { margin: 0 0 12px; }
.settings-links { margin: 0; }
.settings-links .row-link { text-decoration: none; }
.settings-links small { display: block; margin-top: 2px; }
.drawer-version {
  margin: auto 0 0; padding-top: 12px; color: var(--muted);
  font-family: var(--pixel); font-size: 0.7rem; letter-spacing: 0.04em;
  border-top: 1px dashed var(--line);
}
/* The side-menu logout keeps the menu look (button.danger would paint it red on red) */
button.drawer-item.danger { background: var(--shade); color: var(--coral); }

/* ---------- Mobility routine ---------- */
.mobility > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.mobility > summary::-webkit-details-marker { display: none; }
.mob-title { font-family: var(--pixel); color: var(--neon-cyan); font-size: 0.95rem; }
.mob-status { font-family: var(--pixel); font-size: 0.8rem; color: var(--muted); }
.mob-status.complete { color: var(--teal); }
.mob-progress { margin: 10px 0 6px; }
.mob-progress span { background: repeating-linear-gradient(90deg, var(--neon-cyan) 0 8px, var(--shade) 8px 10px); }
.mob-section { margin: 14px 0 6px; color: var(--muted); }
.mob-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mob-item {
  display: grid; grid-template-columns: 22px 44px 1fr; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; text-align: left; background: var(--shade); color: var(--text);
  box-shadow: inset 0 0 0 2px var(--line); font-size: 0.95rem;
}
.mob-item:active { transform: none; box-shadow: inset 0 0 0 2px var(--neon-cyan); }
.mob-check { width: 18px; height: 18px; box-shadow: inset 0 0 0 2px var(--muted); }
.mob-item.done .mob-check { background: var(--teal); box-shadow: inset 0 0 0 2px var(--teal), 0 0 8px rgba(42, 157, 143, 0.6); }
.mob-item.done .mob-name { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.mob-icon { display: inline-flex; align-items: center; }
.mob-icon .sprite { image-rendering: pixelated; }

.drag-handle {
  flex: 0 0 auto; width: 36px; align-self: stretch; padding: 0; font-size: 1.1rem;
  background: transparent; color: var(--muted); box-shadow: none; cursor: grab; touch-action: none;
}
.drag-handle:active { transform: none; box-shadow: none; cursor: grabbing; }
.sortable li.dragging { opacity: 0.85; box-shadow: 0 0 0 2px var(--neon-cyan), 6px 6px 0 0 var(--shade); position: relative; z-index: 2; }
.sortable .row-link { padding-left: 4px; }

.pose-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.pose-option input { position: absolute; opacity: 0; pointer-events: none; }
.pose-option span {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; cursor: pointer;
  background: var(--shade); box-shadow: inset 0 0 0 2px var(--line); font-size: 0.7rem; color: var(--muted);
}
.pose-option input:checked + span { box-shadow: inset 0 0 0 2px var(--neon-cyan); color: var(--text); }
.pose-option input:focus-visible + span { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
/* Fields in a row must be able to shrink on narrow screens */
.field { min-width: 0; }
.field > input, .field > select, .field > textarea { width: 100%; min-width: 0; }

/* ---------- Chevrons: everything that folds shows a pixel arrow ---------- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: ''; display: inline-block; flex: 0 0 auto; width: 0; height: 0; margin-right: 10px; vertical-align: middle;
  border-left: 7px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  transition: transform 0.15s steps(2);
}
details[open] > summary::before { transform: rotate(90deg); }
.mobility > summary { justify-content: flex-start; }
.mobility > summary .mob-title { color: var(--neon-cyan); }
.mobility > summary::before { color: var(--neon-cyan); }
.mobility > summary .mob-status { margin-left: auto; }
.swim-plan > summary { color: var(--ui); }
@media (prefers-reduced-motion: reduce) { details > summary::before { transition: none; } }

/* Rows that open something else get a chevron on the right */
.chevron-right {
  width: 8px; height: 8px; flex: 0 0 auto; margin-left: auto;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg);
}
.pick-option { display: grid; grid-template-columns: 44px 1fr 12px; gap: 10px; align-items: center; }
.ex-head h3 { display: flex; align-items: center; gap: 8px; }
.ex-icon { display: inline-flex; flex: 0 0 auto; }

/* ---------- Exercise preview card ---------- */
.preview-card { width: min(92vw, 420px); text-align: left; }
.preview-art {
  display: flex; justify-content: center; align-items: center; padding: 18px 0;
  background: repeating-linear-gradient(0deg, var(--surface) 0 2px, var(--shade) 2px 4px);
  box-shadow: inset 0 0 0 2px var(--line); margin-bottom: 14px;
}
.preview-art .sprite { max-width: 100%; height: auto; }
.preview-card h2 { margin: 0 0 6px; color: var(--ui); }
.preview-card p { margin: 0 0 8px; }
.preview-card .video-link { display: inline-block; margin: 4px 0 14px; }

/* Prototype tag next to the app name */
.proto-tag { font-family: var(--pixel); font-size: 0.55rem; color: var(--coral); border: 1px solid currentColor; padding: 1px 5px; margin-left: 6px; vertical-align: middle; letter-spacing: 0.06em; text-transform: uppercase; }
h1 .proto-tag { font-size: 0.6rem; }
.brand-z { color: var(--violet); }

/* ---------- Contabilidad ---------- */
.worth-card { display: flex; flex-direction: column; gap: 6px; }
.worth { font-family: var(--pixel); font-weight: 400; font-size: 1.6rem; color: var(--neon-yellow); }
.change { font-size: 0.85rem; color: var(--muted); margin: 0; }
.change.up { color: #a3be8c; }
.change.down { color: var(--coral); }
.money-field > span:first-child { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 0.9rem; }
.money-input { display: flex; align-items: center; gap: 8px; }
.money-input input { font-family: var(--pixel); font-size: 1.1rem; text-align: right; }
.money-input b { font-family: var(--pixel); font-weight: 400; color: var(--muted); }
.month-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.month-head h2 { margin: 0; }
.month-head strong { font-family: var(--pixel); font-weight: 400; }
.balance-row { flex-direction: row !important; justify-content: space-between; gap: 10px; }
.month-card .editor-actions { margin-top: 10px; }

/* ---------- Notificaciones (Configuración) ---------- */
.reminder-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reminder-row .check { color: var(--text); align-items: flex-start; }
.reminder-row input[type="time"] { flex: 0 0 auto; width: 120px; }
.reminder-row .check b { font-family: var(--body); font-weight: 600; }
#notificaciones .editor-actions { margin-bottom: 8px; }
.view a:not(.back), #notificaciones a, .settings .muted a { color: var(--ui); }

/* ---------- Contabilidad: gastos ---------- */
.quick-add { display: flex; flex-direction: column; gap: 14px; }
.kind-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kind-toggle button.active { background: var(--ui); color: var(--shade); }
.money-input.big input { font-size: 2rem; padding: 12px; }
.money-input.big b { font-size: 1.4rem; }
.category-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.category-chip {
  padding: 8px 12px; font-size: 0.85rem; background: var(--shade); color: var(--text);
  box-shadow: inset 4px 0 0 0 var(--chip), 0 0 0 2px var(--line);
}
.category-chip.active { background: var(--chip); color: var(--shade); box-shadow: 0 0 0 2px var(--text); }
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 24px 0 12px; }
.month-nav h2 { margin: 0; text-align: center; flex: 1; }
.month-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.month-totals div { display: flex; flex-direction: column; gap: 4px; }
.month-totals strong { font-family: var(--pixel); font-weight: 400; font-size: 0.95rem; }
.month-totals strong.down { color: var(--coral); }
.month-totals + .change { margin-top: 10px; }
.category-bars { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.category-bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 0.9rem; }
.category-bar-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar-track { grid-column: 1 / -1; height: 6px; background: var(--shade); }
.bar-track span { display: block; height: 100%; }
.day-title { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 2px 8px; font-size: 0.85rem; }
.tx-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tx-text small:empty { display: none; }
.tx-amount { font-family: var(--pixel); font-weight: 400; white-space: nowrap; }
.tx-amount.income { color: #a3be8c; }

/* ---------- Global assistant (core/assistant.js) ---------- */
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.assistant-open { color: var(--neon-cyan); }
.assistant-mic {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%; margin: 12px 0; padding: 18px 12px;
  background: var(--shade); color: var(--neon-cyan);
  box-shadow: inset 0 0 0 2px var(--line);
}
.assistant-mic svg { width: 40px; height: 40px; }
.assistant-mic.listening {
  color: var(--violet);
  box-shadow: inset 0 0 0 2px var(--violet), 0 0 14px rgba(204, 121, 228, 0.45);
  animation: assistant-pulse 1.2s ease-in-out infinite;
}
@keyframes assistant-pulse { 50% { box-shadow: inset 0 0 0 2px var(--violet), 0 0 2px rgba(204, 121, 228, 0.2); } }
@media (prefers-reduced-motion: reduce) { .assistant-mic.listening { animation: none; } }
.assistant textarea { margin-bottom: 8px; }
.assistant { max-height: 92vh; overflow-y: auto; }
.assistant-module { font-size: 0.8rem; margin: 16px 0 8px; color: var(--neon-cyan); text-transform: uppercase; letter-spacing: 0.06em; }
.assistant-items li.assistant-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.assistant-item .check { color: var(--text); align-items: flex-start; }
.assistant-item .check input { margin-top: 3px; }
.assistant-item .check span { display: flex; flex-direction: column; gap: 2px; }
.assistant-item select { grid-column: 1 / -1; width: 100%; }
.assistant-item.blocked { opacity: 0.7; }
.assistant-value { font-family: var(--pixel); color: var(--teal); text-align: right; }
.assistant-heard { color: var(--muted); font-style: italic; }
.assistant-blocked { color: var(--coral); }
.assistant-unmatched { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 0.9rem; }

/* ---------- Meditation module ---------- */
.med-today { display: flex; gap: 16px; align-items: center; }
.med-today-art { flex: 0 0 auto; }
.med-today-text { flex: 1; min-width: 0; }
.med-today-text .label { margin: 0; }
.med-today .progress { margin: 8px 0; }
.med-today .progress span { background: var(--ui); }
.med-minutes { margin: 4px 0 0; color: var(--muted); }
.med-minutes b { font-family: var(--pixel); font-weight: 400; font-size: 1.9rem; color: color-mix(in oklab, var(--ui) 55%, white); }
.med-streak { margin: 0; font-size: 0.9rem; color: var(--muted); }
.med-streak b { font-family: var(--pixel); font-weight: 400; color: var(--neon-yellow); }
button.med-start {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px;
  background: var(--ui); font-size: 1.05rem;
}
button.med-start small { font-size: 0.8rem; opacity: 0.8; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
button.chip { padding: 8px 12px; font-size: 0.85rem; }
.med-kind-timer { background: var(--ui); } .med-kind-breathing { background: var(--neon-cyan); }
.med-kind-guided { background: var(--violet); } .med-kind-manual { background: var(--muted); }
.field-row.four { flex-wrap: wrap; }
.field-row.four .field { flex: 1 1 40%; min-width: 0; }

/* Mood: five emoji buttons */
.mood-picker { display: flex; gap: 6px; margin: 6px 0 14px; }
.mood-picker .mood {
  flex: 1; padding: 8px 0; font-size: 1.4rem; line-height: 1;
  background: var(--shade); box-shadow: inset 0 0 0 2px var(--line); filter: grayscale(0.7); opacity: 0.75;
}
.mood-picker .mood.selected { filter: none; opacity: 1; box-shadow: inset 0 0 0 2px var(--ui), 0 0 10px color-mix(in oklab, var(--ui) 40%, transparent); }

/* Full-screen player */
body.playing { overflow: hidden; }
.player {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 24px);
  background: color-mix(in oklab, var(--module) 6%, #06070a); text-align: center;
}
.player-title { margin: 0 0 12px; font-family: var(--pixel); color: var(--muted); font-size: 0.85rem; letter-spacing: 0.04em; }
.player-stage { position: relative; width: min(72vw, 300px); aspect-ratio: 1; display: grid; place-items: center; }
.player-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--line); stroke-width: 4; }
.ring-progress { fill: none; stroke: var(--ui); stroke-width: 4; stroke-linecap: butt; transition: stroke-dashoffset 0.25s linear; }
.player.open-ended .ring-progress { display: none; }
.player-art { position: relative; opacity: 0.9; }
.player-breath {
  position: absolute; inset: 14%;
  background: radial-gradient(circle, rgba(94, 241, 255, 0.35), rgba(94, 241, 255, 0.08) 60%, transparent 70%);
  box-shadow: inset 0 0 0 3px rgba(94, 241, 255, 0.6);
  transform: scale(var(--breath, 0.3)); transition: transform 0.25s linear;
}
.player-phase { min-height: 1.4em; margin: 18px 0 0; font-family: var(--pixel); color: var(--neon-cyan); font-size: 1.1rem; }
.player-clock { margin: 4px 0 0; font-family: var(--pixel); font-size: 3rem; color: var(--text); }
.player-sub { margin: 0 0 24px; min-height: 1.2em; }
.player.paused .player-clock { opacity: 0.5; animation: med-blink 1.6s steps(2) infinite; }
@keyframes med-blink { 50% { opacity: 0.25; } }
.player-actions { display: flex; gap: 12px; width: min(100%, 360px); }
.player-actions button { flex: 1; padding: 14px; }
@media (prefers-reduced-motion: reduce) {
  .player-breath, .ring-progress { transition: none; }
  .player.paused .player-clock { animation: none; }
}

/* Progress: calendar and mood */
.med-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 220px; }
.cal-head { text-align: center; font-size: 0.7rem; color: var(--muted); }
.cal-cell { display: inline-block; aspect-ratio: 1; min-width: 12px; background: var(--line); }
.cal-cell.lvl-1 { background: color-mix(in oklab, var(--ui) 30%, var(--surface)); } .cal-cell.lvl-2 { background: color-mix(in oklab, var(--ui) 55%, var(--surface)); }
.cal-cell.lvl-3 { background: color-mix(in oklab, var(--ui) 80%, var(--surface)); } .cal-cell.lvl-4 { background: color-mix(in oklab, var(--ui) 70%, white); box-shadow: 0 0 6px color-mix(in oklab, var(--ui) 50%, transparent); }
.cal-cell.future { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.cal-cell.today { outline: 2px solid var(--gold); outline-offset: 1px; }
.cal-legend { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 12px 0 0; }
.cal-legend .cal-cell { width: 12px; }
.mood-compare { display: flex; align-items: center; justify-content: center; gap: 18px; }
.mood-compare div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mood-compare strong { font-family: var(--pixel); font-weight: 400; font-size: 1.8rem; color: color-mix(in oklab, var(--ui) 55%, white); }
.mood-arrow { font-size: 1.4rem; color: var(--muted); }
#end-minutes:empty { display: none; }
.ext-mark { color: var(--muted); flex: 0 0 auto; }

/* ---------- Demo mode (core/demo/) ---------- */
.demo-badge {
  position: sticky; top: 0; z-index: 9; margin: 0 -16px 8px;
  padding: 6px 16px;
  background: var(--violet); color: var(--shade);
  font-family: var(--pixel); font-size: 0.7rem; letter-spacing: 0.06em; text-align: center; text-transform: uppercase;
}
.drawer-item > span { display: flex; flex-direction: column; gap: 2px; }
.drawer-hint { color: var(--muted); font-size: 0.75rem; }
.demo-login { margin-top: 24px; }

/* ---------- Music module ---------- */
body.music { --music: var(--ui); }
.tabs.six { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 700px) { .tabs.six { grid-template-columns: repeat(6, 1fr); } }
.instrument-chips { margin: 0 0 16px; }
.instrument-chips[hidden] { display: none; }
.segmented { margin: 0 0 16px; }
.small { font-size: 0.85rem; }
.pre { white-space: pre-wrap; }
button.link { background: none; box-shadow: none; padding: 0; color: var(--ui); text-decoration: underline; text-align: left; }
button.link:active { transform: none; }
.file-button {
  display: inline-block; cursor: pointer; padding: 4px 10px; font-size: 0.8rem;
  background: var(--surface); color: var(--ui); box-shadow: 0 0 0 2px var(--shade), 3px 3px 0 0 var(--shade);
}
a.button.mini { padding: 4px 10px; font-size: 0.8rem; }
a.button.secondary { background: var(--surface); color: var(--ui); }
.progress.small { display: block; height: 6px; margin: 6px 0 0; }
.progress.small span { background: var(--music, var(--teal)); }

/* Today */
.music-instrument h2 { margin-bottom: 4px; }
.music-instrument .progress { margin: 8px 0; }
.music-instrument .progress span { background: repeating-linear-gradient(90deg, var(--music) 0 8px, var(--shade) 8px 10px); }
.music-instrument.met { box-shadow: 0 0 0 2px var(--teal), 4px 4px 0 0 var(--shade); }
.goal-text { margin: 0; color: var(--muted); }
.goal-text b { font-family: var(--pixel); font-weight: 400; color: var(--text); font-size: 1.1rem; }
.next-step { margin: 10px 0; padding: 10px 12px; background: var(--shade); box-shadow: inset 3px 0 0 0 var(--music); }
.next-step .label { display: block; margin: 0 0 2px; }
.next-step .label ~ .label { margin-top: 8px; }
body.music .row-link small { display: block; margin-top: 2px; }
body.music .row-link small.badge { display: inline-block; margin: 0 0 0 4px; vertical-align: middle; }
.skip-list { margin: 0 0 10px; color: var(--muted); font-size: 0.9rem; }
.skip-list .label { margin-right: 6px; }

/* Running session */
.blocks { display: flex; flex-direction: column; }
.block-card.done { opacity: 0.65; }
.block-card .field-row { flex-wrap: wrap; }
.block-card .field-row .field { flex: 1 1 200px; }
.block-card .field { margin-bottom: 10px; }
.block-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.block-head h3 { margin: 0; flex: 1 1 auto; }
.block-timer { font-family: var(--pixel); padding: 6px 10px; background: var(--shade); color: var(--neon-cyan); box-shadow: inset 0 0 0 2px var(--line); }
.block-timer.running { box-shadow: inset 0 0 0 2px var(--neon-cyan), 0 0 10px rgba(94, 241, 255, 0.35); }
.block-tempo { display: flex; gap: 10px; align-items: flex-end; }
.block-tempo .field { flex: 1; margin-bottom: 0; }
.block-tempo button { margin-bottom: 2px; }
.block-card .wrist { margin: 12px 0; }
.block-tools { display: flex; gap: 6px; justify-content: flex-end; }
.block-warmups .mob-list { margin-bottom: 8px; }
.session-actions { display: flex; gap: 10px; }
.session-actions button { flex: 1; padding: 14px; }

/* Hexagon map */
.hex-map { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; margin: 4px 0 6px; }
.flower { width: clamp(160px, 45vw, 240px); height: auto; overflow: visible; }
.hex polygon { fill: color-mix(in srgb, var(--area) 14%, var(--surface)); stroke: color-mix(in srgb, var(--area) 45%, var(--shade)); stroke-width: 1.5; }
.hex.cycle polygon { fill: var(--area); stroke: var(--shade); stroke-width: 2.5; filter: drop-shadow(0 0 4px var(--area)); }
.hex.done polygon { fill: color-mix(in srgb, var(--area) 55%, var(--surface)); stroke: var(--text); }
.hex.area polygon { fill: var(--text); stroke: var(--area); stroke-width: 3; }
.hex-label { font: 7.6px var(--body); fill: var(--muted); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.hex.cycle .hex-label, .hex.area .hex-label { fill: var(--shade); font-weight: 600; }
.hex.done .hex-label { fill: var(--text); }
.hex.area .hex-label { font-family: var(--pixel); font-size: 6.4px; font-weight: 400; }
.hex-star { font-size: 8px; fill: var(--neon-yellow); text-anchor: middle; pointer-events: none; }
g.hex[data-act] { cursor: pointer; }
g.hex[data-act]:hover polygon, g.hex[data-act]:focus-visible polygon { stroke: var(--text); stroke-width: 2.5; }
g.hex:focus { outline: none; }
.hex-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; justify-content: center; }
.hex-key { display: inline-block; width: 12px; height: 12px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hex-key.cycle { background: var(--music); } .hex-key.new { background: var(--line); } .hex-key.done { background: var(--neon-yellow); }
.goal-item.done .row-link > span:first-child { color: var(--muted); }
.assess-row { border: 0; padding: 0; margin: 0; min-width: 0; }
.assess-row legend { margin-bottom: 6px; }

/* Concept picker (tags) */
.concept-picker { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow: auto; padding-right: 4px; }
.concept-pick { border: 0; margin: 0; padding: 0 0 0 10px; box-shadow: inset 3px 0 0 0 var(--area); min-width: 0; }
.concept-pick legend { color: var(--muted); font-size: 0.8rem; padding: 0; margin-bottom: 4px; }
.concept-pick .pick { display: inline-flex; margin: 0 6px 6px 0; }
.concept-pick .pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.concept-pick .pick span { padding: 5px 9px; font-size: 0.8rem; background: var(--shade); box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; }
.concept-pick .pick input:checked + span { background: var(--area); color: var(--shade); box-shadow: inset 0 0 0 2px var(--area); }
.concept-pick .pick input:focus-visible + span { outline: 2px solid var(--text); }

/* Library */
.exercise-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; margin-bottom: 10px; }
.exercise-chip { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; background: var(--shade); color: var(--text); box-shadow: inset 0 0 0 2px var(--line); }
.exercise-chip b { font-family: var(--pixel); font-weight: 400; font-size: 0.8rem; }
.exercise-chip small { font-size: 0.65rem; color: var(--teal); }
.exercise-chip.done { box-shadow: inset 0 0 0 2px var(--teal); }
.exercise-chip.next { box-shadow: inset 0 0 0 2px var(--music), 0 0 8px color-mix(in oklab, var(--music) 40%, transparent); }
.variant-list { margin: 0; padding-left: 20px; color: var(--muted); font-size: 0.9rem; }
.video-list .row-link { align-items: center; gap: 10px; }
.video-thumb { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; flex: 0 0 auto; background: var(--shade); }
.video-frame { position: relative; aspect-ratio: 16 / 9; margin: -4px 0 12px; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.spark { width: 90px; height: 28px; flex: 0 0 auto; }
.spark polyline { fill: none; stroke: var(--music); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* PDF viewer */
dialog.pdf-viewer { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; display: none; flex-direction: column; background: var(--shade); }
dialog.pdf-viewer[open] { display: flex; }
.pdf-bar { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--surface); }
.pdf-page { flex: 1; text-align: center; font-family: var(--pixel); font-size: 0.85rem; }
.pdf-stage { flex: 1; overflow: auto; background: #fff; }
.pdf-stage canvas { display: block; }

/* Progress */
.week-plot { position: relative; height: 130px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; border-bottom: 2px solid var(--line); }
.week-plot span { display: block; min-height: 2px; background: color-mix(in srgb, var(--music) 60%, var(--shade)); }
.week-plot span.met { background: var(--teal); }
.week-goal { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--neon-yellow); }
.week-labels { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 6px; }
.week-labels small { display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; color: var(--muted); }
.week-labels b { font-family: var(--pixel); font-weight: 400; color: var(--text); }

/* Sound & production */
.badge.prio-essential { background: var(--coral); } .badge.prio-improvement { background: var(--gold); } .badge.prio-whim { background: #8fa8ff; }
.badge.study-pending { background: var(--muted); } .badge.study-studying { background: var(--gold); } .badge.study-understood { background: var(--teal); }
.option-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; }
.option { padding: 10px; background: var(--shade); box-shadow: inset 0 0 0 2px var(--line); }
.option.chosen { box-shadow: inset 0 0 0 2px var(--teal); }
.option p { margin: 6px 0; }
.option .price { font-family: var(--pixel); color: var(--neon-yellow); font-size: 0.85rem; }
.option .row-tools { flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Config */
.cfg-area { padding: 8px 0 8px 10px; margin-bottom: 8px; box-shadow: inset 3px 0 0 0 var(--area); }
.cfg-area .chip-row { margin-top: 6px; }
.cfg-area .area-name { color: var(--text); font-family: var(--pixel); font-size: 0.85rem; text-decoration: none; }
button.chip.is-hidden { opacity: 0.45; text-decoration: line-through; }

/* Metronome */
dialog.metronome { width: min(96vw, 460px); }
.met-tempo { display: flex; align-items: center; gap: 6px; }
.met-tempo button { padding: 10px 8px; min-width: 44px; }
.met-bpm { flex: 1; margin: 0; text-align: center; display: flex; flex-direction: column; }
.met-bpm b { font-family: var(--pixel); font-weight: 400; font-size: 2.6rem; color: var(--neon-cyan); line-height: 1; }
.met-bpm small { color: var(--muted); font-size: 0.75rem; }
#met-slider { width: 100%; margin: 12px 0; padding: 0; box-shadow: none; background: transparent; }
.met-beats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0; }
.met-beat { width: 40px; height: 40px; padding: 0; font-family: var(--pixel); background: var(--shade); color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); }
.met-beat.accent { color: var(--shade); background: var(--music); }
.met-beat.mute { opacity: 0.35; text-decoration: line-through; }
.met-beat.now { box-shadow: inset 0 0 0 3px var(--neon-cyan), 0 0 12px rgba(94, 241, 255, 0.6); }
.met-beats.gap .met-beat.now { box-shadow: inset 0 0 0 3px var(--muted); }
.met-status { text-align: center; min-height: 1.2em; margin: 4px 0 10px; font-size: 0.85rem; }
.met-actions { display: flex; gap: 10px; }
.met-actions button { flex: 1; padding: 14px; }
.met-actions button:first-child { flex: 2; }
.met-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.met-extra { border: 0; padding: 8px 0 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); }
.field-row.three .field { min-width: 0; }
@media (prefers-reduced-motion: reduce) { .hex.cycle polygon { filter: none; } }

/* =====================================================================
   Design pass 0.15: module colours, finer pixels, full-screen forms,
   animated home banner with the weather, and today's basics.
   ===================================================================== */

/* Finer pixel grid: thinner hard shadows, pixel font with more detail. */
.pixel-card, .summary, .card, .module, .behavior, dialog, .icon-button, .hero {
  box-shadow: 0 0 0 2px var(--shade), 3px 3px 0 0 var(--shade);
}
h1, h2 { font-weight: 400; }
.tabs a { font-size: 0.75rem; padding: 11px 4px; }
.tabs a.active { color: var(--shade); background: var(--ui); }
.brand { color: var(--text); }
.brand-z { color: var(--violet); text-shadow: 0 0 8px rgba(204, 121, 228, 0.55); }
.icon-button { color: var(--violet); }
.drawer-item i, .drawer-item svg { color: var(--ui); }
.demo-badge { background: var(--violet); }
.proto-tag { font-size: 0.6rem; }
a.back { color: var(--ui); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--ui); box-shadow: 0 0 10px color-mix(in oklab, var(--ui) 45%, transparent); }

/* A <details> inside a card starts at the top of the card (the global 32px margin is for loose sections). */
.card > details:first-child, .card details.mobility { margin-top: 0; }

/* ---------- Home banner ---------- */
.hero { background: #0b0d14; }
.hero-text { right: 38%; top: 16px; display: flex; flex-direction: column; gap: 6px; }
.hero .greeting { font-size: 1.5rem; line-height: 1.15; }
.hero[data-time="afternoon"] .greeting { color: var(--violet); }
.hero-date { margin: 0; }
.hero-weather {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 0;
  text-shadow: 2px 2px 0 var(--shade); font-size: 0.85rem;
}
.hero-weather > span { display: inline-flex; align-items: center; gap: 4px; }
.hero-weather b { font-family: var(--pixel); font-weight: 400; font-size: 1rem; }
.hero-weather small { color: var(--muted); font-size: 0.75rem; margin-left: 2px; }
.weather-rain b { color: #9cc3ff; }
.hero-weather .sprite { filter: drop-shadow(2px 2px 0 var(--shade)); }

/* Scene animation: stars twinkle, clouds drift, rain falls, a shooting star crosses at night. */
.hero-star { animation: hero-twinkle 4s ease-in-out infinite; }
@keyframes hero-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.hero-star.dim { animation-name: hero-twinkle-dim; }
@keyframes hero-twinkle-dim { 0%, 100% { filter: none; } 50% { filter: brightness(0.45); } }
/* A vehicle crossing the banner now and then (core/sprites.js, scheduleFlybys) */
.hero-flyby { animation: hero-fly 7s steps(140) 1 both; }
@keyframes hero-fly { from { transform: translateX(var(--from)); } to { transform: translateX(var(--to)); } }
.hero-cloud { animation: hero-drift 90s steps(240) infinite; }
@keyframes hero-drift { from { transform: translateX(-60%); } to { transform: translateX(110%); } }
.hero-rain { animation: hero-fall 0.9s steps(9) infinite; }
.hero-snow { animation: hero-fall 9s steps(60) infinite; }
@keyframes hero-fall { from { transform: translate(0, 0); } to { transform: translate(-12px, 240px); } }
.hero-flash { opacity: 0; animation: hero-flash 7s steps(1) infinite; }
@keyframes hero-flash { 0%, 91%, 93%, 95%, 100% { opacity: 0; } 92%, 94% { opacity: 0.18; } }
.hero-shooting { opacity: 0; animation: hero-shoot 11s linear infinite; }
@keyframes hero-shoot {
  0%, 82% { opacity: 0; transform: translate(0, 0); }
  84% { opacity: 1; }
  92% { opacity: 0; transform: translate(150px, 50px); }
  100% { opacity: 0; transform: translate(150px, 50px); }
}
.hero-moon { animation: hero-glow 6s ease-in-out infinite; }
@keyframes hero-glow { 50% { filter: drop-shadow(0 0 6px rgba(232, 230, 220, 0.35)); } }
.hero .greeting, .hero-date, .hero-weather { animation: hero-in 0.6s steps(6) both; }
.hero-date { animation-delay: 0.1s; }
.hero-weather { animation-delay: 0.2s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-flyby { display: none; }
  .hero-star, .hero-cloud, .hero-rain, .hero-snow, .hero-flash, .hero-shooting, .hero-moon,
  .hero .greeting, .hero-date, .hero-weather { animation: none; }
  .hero-shooting, .hero-flash { display: none; }
}

/* ---------- Wallets ---------- */
.wallets .label { gap: 8px; }
.wallets .label .sprite { flex: 0 0 auto; }
.summary strong.savings { color: var(--violet); text-shadow: 0 0 10px rgba(204, 121, 228, 0.45); }

/* ---------- Today's basics ---------- */
.basics { margin-top: 28px; }
.basics-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.basics-head h2 { margin: 0; }
.basics-count { font-family: var(--pixel); font-weight: 400; font-size: 1rem; color: var(--muted); }
.basics-count.complete { color: var(--teal); text-shadow: 0 0 8px rgba(42, 157, 143, 0.5); }
.basics-progress { height: 6px; margin: 10px 0 12px; }
.basics-progress span { background: repeating-linear-gradient(90deg, var(--violet) 0 6px, transparent 6px 8px); transition: width 0.4s steps(8); }
.basics-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.basic {
  display: grid; grid-template-columns: 24px 1fr auto 22px; align-items: center; gap: 12px;
  padding: 10px 12px; min-height: 52px; text-decoration: none; color: var(--text);
  background: var(--surface); box-shadow: 0 0 0 2px var(--shade), inset 3px 0 0 0 var(--accent);
}
.basic:hover { background: var(--surface-2); }
.basic:active { transform: translate(1px, 1px); }
.basic-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.basic-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.basic-bar { display: block; height: 4px; background: var(--shade); }
.basic-bar span { display: block; height: 100%; background: var(--accent); }
.basic-detail { font-family: var(--pixel); font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.basic-check { width: 22px; height: 22px; box-shadow: inset 0 0 0 2px var(--line); }
.basic.done { background: color-mix(in oklab, var(--surface) 70%, var(--bg)); }
.basic.done .basic-label { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.basic.done .basic-icon { opacity: 0.55; filter: saturate(0.6); }
.basic-check { display: inline-flex; align-items: center; justify-content: center; color: var(--shade); }
.basic-check svg { width: 14px; height: 14px; }
.basic.done .basic-check { background: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), 0 0 8px color-mix(in oklab, var(--accent) 55%, transparent); }
.basic-icon { display: inline-flex; }

/* ---------- Module tiles ---------- */
.modules .module { min-height: 140px; gap: 8px; padding: 14px 14px 16px; border-top: 0; box-shadow: 0 0 0 2px var(--shade), 3px 3px 0 0 var(--shade), inset 0 3px 0 0 var(--accent); }
.modules .module .module-art { margin-top: 4px; }
.module .module-name { font-weight: 400; font-size: 0.95rem; }
a.module:hover { box-shadow: 0 0 0 2px var(--accent), 3px 3px 0 0 var(--shade), inset 0 3px 0 0 var(--accent); }
a.module { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 7%, var(--surface)), var(--surface) 60%); }

/* ---------- Forms and sheets: no small scrolling boxes; the page scrolls, actions stay at the bottom ---------- */
[id$="-fields"] { display: flex; flex-direction: column; gap: 16px; }
.field-row { gap: 12px; }
.concept-picker { max-height: none; overflow: visible; padding-right: 0; gap: 14px; }
.check-list { max-height: none; overflow: visible; }
.assistant { max-height: none; }

dialog.sheet { max-height: min(92dvh, 100%); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; }
dialog.sheet > :last-child { margin-bottom: 0; }
/* Bottom actions stick to the bottom edge of the sheet while the content scrolls under them. */
.sheet .editor-actions {
  position: sticky; bottom: 0; z-index: 2;
  margin: 16px -20px 0; padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  background: var(--surface); box-shadow: 0 -2px 0 0 var(--line), 0 -14px 14px -10px var(--surface);
}
/* A lone Cerrar button keeps its button look; the wide surface-coloured shadow hides what scrolls under it. */
.sheet > button.wide:last-child, #sheet-close {
  position: sticky; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 2;
  margin: 16px 0 calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 0 0 2px var(--shade), 3px 3px 0 0 var(--shade), 0 14px 0 14px var(--surface), 0 -10px 12px 6px var(--surface);
}
.sheet .editor-actions + button.danger.wide, .sheet form > button.danger.wide:last-child, .sheet form > button.wide:last-child {
  position: static; width: 100%; margin: 12px 0 16px; padding: 10px 16px; box-shadow: 0 0 0 2px var(--shade), 3px 3px 0 0 var(--shade);
}
/* In forms with a Borrar button after the actions, Borrar goes above them so the sticky bar is last. */
.sheet.editor form { display: flex; flex-direction: column; gap: 18px; }
.sheet.editor form > button.wide { order: 1; margin: 0; }
.sheet.editor form > .editor-actions { order: 2; margin-top: auto; }
.sheet.editor form > .form-error { order: 1; }

@media (max-width: 699px) {
  /* Forms open as a full screen page instead of a small box. */
  dialog.sheet.editor, dialog.sheet.wide-editor, dialog#sheet, dialog.assistant {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0;
    padding: calc(env(safe-area-inset-top) + 20px) 20px 0;
    box-shadow: none;
  }
  dialog.sheet.editor[open], dialog#sheet[open], dialog.assistant[open] { display: flex; flex-direction: column; }
  dialog.assistant > div { flex: 1 0 auto; }
  dialog.sheet.editor > form { flex: 1 0 auto; }
  dialog#sheet > #sheet-body { flex: 1 0 auto; }
  /* Other sheets (short ones) slide up from the bottom, full width. */
  dialog.sheet:not(.editor):not(#sheet):not(.preview-card):not(.assistant) {
    width: 100vw; max-width: 100vw; margin: auto 0 0; box-shadow: 0 -2px 0 0 var(--line);
  }
}

/* ---------- Spacing fixes ---------- */
/* Exercise cards: the set input, the wrist light and the Cambiar / Saltar buttons get room. */
.ex-card { padding: 16px; }
.ex-card .ex-head { margin-bottom: 4px; }
.set-list { margin: 4px 0 10px; }
.set-input { margin: 12px 0 0; gap: 10px; }
.ex-foot { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); gap: 12px; flex-wrap: nowrap; }
.ex-foot .wrist { font-size: 0.8rem; gap: 8px; }
.ex-actions { gap: 10px; margin-left: auto; }
.ex-actions button { padding: 7px 12px; }
.light { width: 26px; height: 26px; }
@media (max-width: 340px) { .ex-foot { flex-wrap: wrap; } }
.mini { min-height: 34px; }
.list li { padding: 12px 14px; }
.card { padding: 16px; margin-bottom: 18px; }
.editor-actions { gap: 12px; }
.hero-weather > span { background: rgba(8, 9, 13, 0.62); padding: 3px 8px 3px 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.sheet.editor form > button.danger.wide { background: transparent; color: var(--coral); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--coral) 60%, transparent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ui); }
.ex-foot .wrist .muted { font-size: 0.8rem; }
.file-button { display: inline-flex; align-items: center; min-height: 34px; }
.row-tools { gap: 6px; }
#sheet-body > .row-tools { margin: 4px 0 8px; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.column-head > span { display: inline-flex; gap: 10px; }
#sheet-body .column-head { margin-top: 18px; }
/* Assistant: each step is a column whose action bar sits at the bottom. */
.assistant > div { display: flex; flex-direction: column; }
.assistant > div > .editor-actions { margin-top: auto; }
.assistant .assistant-back { margin: 12px 0 0; }
.assistant .assistant-mic { margin: 16px 0 12px; }
.row-link .ext-mark { margin-left: auto; padding-left: 8px; }
@media (min-width: 960px) { .basics-list { display: grid; grid-template-columns: 1fr 1fr; } }

/* Text on dark buttons: a lighter tint of the module colour, so reds and oranges stay readable. */
button.secondary, a.button.secondary, .file-button, .ex-actions button { color: color-mix(in oklab, var(--ui) 55%, white); }

/* Básicos de hoy: the title folds the list; "Elegir" picks what shows. */
.basics-head { align-items: center; }
.basics-title { flex: 1; min-width: 0; margin: 0; }
.basics-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 0; text-align: left;
  background: none; box-shadow: none; color: var(--ui); font: inherit; text-transform: inherit; letter-spacing: inherit;
}
.basics-toggle:active { transform: none; box-shadow: none; }
.basics-toggle::before {
  content: ''; flex: 0 0 auto; width: 0; height: 0; transform: rotate(90deg); transition: transform 0.15s steps(2);
  border-left: 7px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.basics.folded .basics-toggle::before { transform: none; }
.basics-toggle .basics-count { margin-left: auto; }
.basics.folded .basics-progress { margin-bottom: 0; }
.basics-empty { margin: 4px 0 0; }
.basics-options { display: flex; flex-direction: column; gap: 18px; }
.basics-group { border: 0; margin: 0; padding: 0 0 0 12px; min-width: 0; display: flex; flex-direction: column; gap: 12px; box-shadow: inset 3px 0 0 0 var(--accent); }
.basics-group legend { display: flex; align-items: center; gap: 8px; padding: 0; margin-bottom: 10px; font-family: var(--pixel); font-size: 0.85rem; color: var(--accent); }
.basics-group .check { color: var(--text); font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) { .basics-toggle::before { transition: none; } }
/* Exercise pictograms are drawn at 32x16: give them 48 px. */
.mob-item { grid-template-columns: 22px 48px 1fr; }
.pick-option { grid-template-columns: 48px 1fr 12px; }

/* Banner: fixed height (the aspect ratio with a minimum height made it wider than narrow screens)
   and the weather on its own line at the bottom, never wrapping. */
.hero { aspect-ratio: auto; width: 100%; min-height: 0; height: clamp(184px, 50vw, 250px); }
.hero-text { right: 34%; }
.hero-weather {
  position: absolute; left: 16px; right: 16px; bottom: 12px; margin: 0;
  flex-wrap: nowrap; gap: 8px; overflow: hidden;
}
.hero-weather > span { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 359px) { .hero-weather small { display: none; } }
@media (min-width: 960px) { .home .hero { height: 300px; min-height: 0; } }
.basic-detail.negative { color: var(--coral); }