/* Memo PWA components. Every colour, size, radius and font comes from tokens.css (--m-*).
   Values the mockups use that tokens.css does not name are derived below from the tokens with
   calc(), in one place, with the pixel value they produce. Candidates to promote to tokens.css. */

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-wght.woff2') format('woff2-variations'), url('../fonts/manrope-latin-wght.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inria Serif';
  src: url('../fonts/inria-serif-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --m-hairline: calc(var(--m-space-1) / 4);                          /* 1px borders */
  --m-stroke: calc(var(--m-space-1) / 2);                            /* 2px emphasis border, focus ring */
  --m-gutter: calc(var(--m-space-4) + var(--m-space-1));             /* 20px header sides */
  --m-gap-list: calc(var(--m-space-2) + var(--m-space-1) / 2);       /* 10px between cards */
  --m-gap-section: calc(var(--m-space-3) + var(--m-space-1) / 2);    /* 14px between sections, input side padding */
  --m-fs-chip: calc((var(--m-fs-meta) + var(--m-fs-card)) / 2);      /* 13px chips, secondary buttons */
  --m-fs-lead: calc(var(--m-fs-body) + var(--m-space-1) / 4);        /* 16px sheet title, empty state title */
  --m-fs-wordmark-desk: calc(var(--m-fs-title) - var(--m-space-1) / 2); /* 26px sidebar wordmark */
  --m-track-label: 0.05em;                                           /* 0.6px on 12px labels */
  --m-track-title: -0.018em;                                         /* -0.5px on 28px titles */
  --m-dot: var(--m-space-2);                                         /* 8px status dot */
  --m-icon: calc(var(--m-space-5) - var(--m-space-1) / 2);           /* 22px nav and header icons */
  --m-icon-sm: calc(var(--m-space-4) + var(--m-space-1) / 2);        /* 18px */
  --m-check: calc(var(--m-space-6) - var(--m-space-1));              /* 28px round check */
  --m-thumb-w: calc(var(--m-space-6) * 3);                           /* 96px card thumbnail */
  --m-thumb-h: calc(var(--m-space-6) * 2);                           /* 64px */
  --m-thumb-desk-w: calc(var(--m-space-2) * 11);                     /* 88px */
  --m-thumb-desk-h: calc(var(--m-space-2) * 7);                      /* 56px */
  --m-thumb-sheet-w: calc(var(--m-space-2) * 9);                     /* 72px */
  --m-thumb-sheet-h: calc(var(--m-space-2) * 6);                     /* 48px */
  --m-hero: calc(var(--m-space-5) * 7.5);                            /* 180px share preview */
  --m-hero-desk: calc(var(--m-space-5) * 6.25);                      /* 150px desktop detail preview */
  --m-tag: calc(var(--m-chip) - var(--m-space-2));                   /* 28px tag chip */
  --m-chip-desk: calc(var(--m-chip) - var(--m-space-1));             /* 32px desktop chip */
  --m-control-lg: calc(var(--m-control) + var(--m-space-1));         /* 52px share save button */
  --m-nav-item: calc(var(--m-space-6) + var(--m-space-2));           /* 40px sidebar item */
  --m-sidebar: calc(var(--m-space-6) * 7.5);                         /* 240px */
  --m-aside: calc(var(--m-space-6) * 12);                            /* 384px detail pane */
  --m-grabber-w: calc(var(--m-space-6) + var(--m-space-2));          /* 40px */
  --m-badge: calc(var(--m-space-5) - var(--m-space-1));              /* 20px count badge */
  --m-empty-icon: calc(var(--m-space-6) * 2);                        /* 64px */
  --m-read: calc(var(--m-space-6) * 22);                             /* 704px max reading width */
  --m-link-hover: color-mix(in srgb, var(--m-action), var(--m-text) 22%);
  --m-scrim: color-mix(in srgb, var(--m-text-soft) 62%, transparent);
  --m-shadow-sheet: 0 calc(var(--m-space-2) * -1) var(--m-space-5) color-mix(in srgb, var(--m-text) 25%, transparent);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-scrim: color-mix(in srgb, var(--m-bg) 72%, transparent);
    --m-shadow-sheet: 0 calc(var(--m-space-2) * -1) var(--m-space-5) color-mix(in srgb, var(--m-bg) 60%, transparent);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --m-scrim: color-mix(in srgb, var(--m-bg) 72%, transparent);
  --m-shadow-sheet: 0 calc(var(--m-space-2) * -1) var(--m-space-5) color-mix(in srgb, var(--m-bg) 60%, transparent);
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--m-bg);
  color: var(--m-text);
  font-family: var(--m-font-body);
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  -webkit-text-size-adjust: 100%;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--m-action); }
a:hover { color: var(--m-link-hover); }
[hidden] { display: none !important; }
:focus-visible { outline: var(--m-stroke) solid var(--m-action); outline-offset: var(--m-stroke); }
.sr-only {
  position: absolute; width: var(--m-hairline); height: var(--m-hairline); overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: calc(var(--m-hairline) * -1); padding: 0; border: 0;
}
.icon { width: var(--m-icon); height: var(--m-icon); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-sm { width: var(--m-icon-sm); height: var(--m-icon-sm); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-fill { fill: currentColor; stroke: none; }

/* Shared atoms */
.wordmark { font-family: var(--m-font-display); font-size: var(--m-fs-title); font-weight: 700; letter-spacing: var(--m-track-title); line-height: var(--m-lh-tight); margin: 0; }
.meta { font-size: var(--m-fs-meta); color: var(--m-text-soft); }
.label { margin: 0; font-size: var(--m-fs-meta); font-weight: 700; color: var(--m-text-soft); text-transform: uppercase; letter-spacing: var(--m-track-label); }
.dot { width: var(--m-dot); height: var(--m-dot); border-radius: 50%; display: inline-block; flex: none; background: var(--m-sync-ok); }
.dot.pending { background: var(--m-sync-pending); }

.btn {
  min-height: var(--m-control); padding: 0 var(--m-space-4); border-radius: var(--m-radius);
  border: var(--m-hairline) solid var(--m-line); background: var(--m-surface); color: var(--m-text-soft);
  font-size: var(--m-fs-card); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: var(--m-space-2);
  text-decoration: none;
}
.btn-primary { border-color: transparent; background: var(--m-action); color: var(--m-on-action); font-size: var(--m-fs-body); font-weight: 700; }
.btn-primary:hover { color: var(--m-on-action); }
.btn-primary:disabled { background: var(--m-line); color: var(--m-text-soft); }
.btn-small { min-height: var(--m-touch); padding: 0 var(--m-space-3); font-size: var(--m-fs-chip); }
.btn-block { width: 100%; }

.chips { display: flex; gap: var(--m-space-2); flex-wrap: wrap; }
.chip {
  min-height: var(--m-chip); padding: 0 var(--m-gap-section); border-radius: var(--m-radius-pill);
  border: var(--m-hairline) solid var(--m-line); background: var(--m-surface); color: var(--m-text-soft);
  font-size: var(--m-fs-chip); font-weight: 600; display: inline-flex; align-items: center; gap: var(--m-space-1);
}
.chip[aria-pressed="true"] { border-color: var(--m-action); background: var(--m-action-soft); color: var(--m-action); font-weight: 700; }
.chip.solid[aria-pressed="true"] { background: var(--m-action); color: var(--m-on-action); }
.chip.done:not([aria-pressed="true"]) { color: var(--m-done); }
.chip:disabled { opacity: 0.45; }
/* Pressable chips keep a 44px target with a 36px look. */
.chip { position: relative; }
.chip::after { content: ''; position: absolute; inset: calc((var(--m-chip) - var(--m-touch)) / 2) 0; }

.input, .textarea {
  width: 100%; min-width: 0; border: var(--m-hairline) solid var(--m-line); border-radius: var(--m-radius);
  background: var(--m-surface); color: var(--m-text);
}
.input { height: var(--m-control); padding: 0 var(--m-gap-section); }
.textarea { padding: var(--m-gap-list) var(--m-space-3); font-size: var(--m-fs-card); resize: vertical; line-height: var(--m-lh-body); }
.input::placeholder, .textarea::placeholder { color: var(--m-text-soft); opacity: 1; }
.input[aria-invalid="true"] { border: var(--m-stroke) solid var(--m-error); }
.input:disabled { opacity: 0.6; }
.field { display: flex; flex-direction: column; gap: var(--m-space-2); }

.callout {
  display: flex; gap: var(--m-space-2); align-items: flex-start; background: var(--m-surface-alt);
  border-radius: var(--m-radius); padding: var(--m-gap-list) var(--m-space-3); font-size: var(--m-fs-chip);
  line-height: var(--m-lh-tight); color: var(--m-text);
}
.callout.error { color: var(--m-error); font-size: var(--m-fs-card); }

/* App layout: mobile first */
.app { height: 100%; display: flex; }
.sidebar { display: none; }
.column { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--m-space-2);
  padding: calc(env(safe-area-inset-top) + var(--m-space-5)) var(--m-gutter) var(--m-space-2) var(--m-gutter);
}
.topbar .brand { display: flex; align-items: baseline; gap: var(--m-gap-list); min-width: 0; }
.topbar .host { font-size: var(--m-fs-meta); color: var(--m-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .end { display: flex; align-items: center; gap: var(--m-space-1); flex: none; }
.topbar.with-back { padding-left: var(--m-space-2); justify-content: flex-start; }
.syncstate { display: flex; align-items: center; gap: calc(var(--m-space-1) * 1.5); font-size: var(--m-fs-meta); color: var(--m-text-soft); }
.iconlink {
  width: var(--m-touch); height: var(--m-touch); display: inline-flex; align-items: center; justify-content: center;
  color: var(--m-text); border: 0; background: transparent; border-radius: var(--m-radius); padding: 0;
}
.iconlink:hover { color: var(--m-text); background: var(--m-surface-alt); }
.topbar .end .iconlink { margin-right: calc((var(--m-touch) - var(--m-icon)) / -2); }

.composer { display: flex; gap: var(--m-space-2); padding: var(--m-space-2) var(--m-space-4) var(--m-space-3) var(--m-space-4); margin: 0; }
.composer .send { width: var(--m-control); height: var(--m-control); flex: none; border: 0; border-radius: var(--m-radius); background: var(--m-action); color: var(--m-on-action); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.composer .send .label-desk { display: none; }

.toolbar:empty { display: none; }
.toolbar { padding: var(--m-space-1) var(--m-space-4) var(--m-space-3) var(--m-space-4); }
.weeknav { display: flex; align-items: center; justify-content: space-between; gap: var(--m-space-2); }
.weeknav .range { font-weight: 700; font-size: var(--m-fs-body); text-align: center; }
.weeknav .sum { text-align: center; }
.square {
  width: var(--m-touch); height: var(--m-touch); border: var(--m-hairline) solid var(--m-line); border-radius: var(--m-radius);
  background: var(--m-surface); color: var(--m-text); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none;
}

.main { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--m-space-4) var(--m-space-4) var(--m-space-4); display: flex; flex-direction: column; gap: var(--m-gap-list); outline: none; }
/* Scroll containers are flex columns: without this, cards shrink to fit the height (clipped
   action rows, no scrolling) instead of overflowing. */
.main > *, .detail > * { flex-shrink: 0; }
.listhead { display: flex; justify-content: space-between; align-items: center; gap: var(--m-space-2); font-size: var(--m-fs-meta); color: var(--m-text-soft); padding: calc(var(--m-space-1) / 2) var(--m-space-1); }
.section { display: flex; flex-direction: column; gap: var(--m-space-2); }
.sections { display: flex; flex-direction: column; gap: var(--m-gap-section); }
.section > .label { padding: 0 var(--m-space-1); display: flex; justify-content: space-between; }
.section > .label .today { color: var(--m-action); }
.banner { font-size: var(--m-fs-chip); line-height: var(--m-lh-tight); color: var(--m-text); background: var(--m-surface-alt); border-radius: var(--m-radius); padding: var(--m-gap-list) var(--m-space-3); }
.filter { display: flex; align-items: center; gap: var(--m-space-2); }

.tabbar { display: flex; border-top: var(--m-hairline) solid var(--m-line); background: var(--m-surface); padding: var(--m-space-2) var(--m-space-2) calc(env(safe-area-inset-bottom) + var(--m-space-2)) var(--m-space-2); }
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--m-space-1); padding: calc(var(--m-space-1) * 1.5) 0;
  min-height: var(--m-touch); text-decoration: none; color: var(--m-text-soft); font-size: var(--m-fs-nav); font-weight: 600; border-radius: var(--m-radius);
}
.tabbar a[aria-current="page"] { color: var(--m-action); font-weight: 700; }

/* Cards */
.card { background: var(--m-surface); border: var(--m-hairline) solid var(--m-line); border-radius: var(--m-radius); overflow: hidden; }
.card.selected, .card.today { border-color: var(--m-action); }
.card-open {
  display: flex; gap: var(--m-space-3); width: 100%; padding: var(--m-space-3) var(--m-space-3) var(--m-space-2) var(--m-space-3);
  border: 0; background: transparent; text-align: left; color: inherit; align-items: flex-start;
}
.card-open:focus-visible { outline-offset: calc(var(--m-stroke) * -1); }
.thumb {
  width: var(--m-thumb-w); height: var(--m-thumb-h); flex: none; border-radius: var(--m-radius-media); overflow: hidden;
  background: var(--m-surface-alt); color: var(--m-text); display: flex; align-items: center; justify-content: center;
}
.thumb.video { background: var(--m-media-dark); color: var(--m-surface-alt); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--m-space-1) / 2); }
.card-title { font-weight: 600; font-size: var(--m-fs-card); line-height: var(--m-lh-tight); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.card-title.one { display: block; white-space: nowrap; text-overflow: ellipsis; }
.card-note { font-size: var(--m-fs-body); line-height: var(--m-lh-body); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { font-size: var(--m-fs-meta); color: var(--m-text-soft); display: flex; gap: var(--m-space-2); flex-wrap: wrap; }
.pending-tag { display: inline-flex; align-items: center; gap: calc(var(--m-space-1) * 1.5); }
.actions { display: flex; border-top: var(--m-hairline) solid var(--m-line); }
.actions button {
  flex: 1; height: var(--m-touch); border: 0; background: transparent; font-size: var(--m-fs-meta); font-weight: 600; color: var(--m-action); padding: 0 var(--m-space-1);
}
.actions button + button { border-left: var(--m-hairline) solid var(--m-line); }
.actions .act-done { color: var(--m-done); }
.actions .act-drop { color: var(--m-text-soft); }
.actions button:hover { background: var(--m-surface-alt); }
.actions button:focus-visible { outline-offset: calc(var(--m-stroke) * -1); }

/* Compact row card (Semana, Hecho) */
.row { display: flex; gap: var(--m-space-3); align-items: center; padding: 0 var(--m-space-3) 0 0; }
.row .card-open { padding: var(--m-space-3) 0; align-items: center; }
.row.top { align-items: flex-start; }
.row.top .card-open { align-items: flex-start; }
.check {
  width: var(--m-touch); height: var(--m-touch); margin-right: calc((var(--m-touch) - var(--m-check)) / -2); flex: none; border: 0; background: transparent; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--m-action);
}
.check::before { content: ''; width: var(--m-check); height: var(--m-check); border-radius: 50%; border: var(--m-stroke) solid currentColor; background: var(--m-surface); }
.check:hover::before { background: var(--m-action-soft); }
.lead { padding-left: var(--m-space-3); }
.mark { width: var(--m-check); height: var(--m-check); flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: var(--m-space-3); }
.mark.done { background: var(--m-done); color: var(--m-surface); }
.mark.dropped { border: var(--m-stroke) solid var(--m-text-soft); color: var(--m-text-soft); }
.mark .icon-sm { width: var(--m-space-4); height: var(--m-space-4); stroke-width: 2.5; }
.row.dropped { opacity: 0.85; }
.outcome { font-size: var(--m-fs-chip); color: var(--m-text); background: var(--m-surface-alt); border-radius: var(--m-radius-media); padding: var(--m-space-2) var(--m-gap-list); margin-top: var(--m-space-1); overflow-wrap: anywhere; }

/* Empty states */
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--m-gap-list); text-align: center; padding: 0 var(--m-space-5) var(--m-space-6) var(--m-space-5); }
.empty .badge { width: var(--m-empty-icon); height: var(--m-empty-icon); border-radius: 50%; background: var(--m-surface-alt); color: var(--m-text-soft); display: flex; align-items: center; justify-content: center; }
.empty .badge .icon { width: var(--m-check); height: var(--m-check); }
.empty h2 { margin: 0; font-size: var(--m-fs-lead); font-weight: 700; line-height: var(--m-lh-tight); }
.empty p { margin: 0; font-size: var(--m-fs-card); line-height: var(--m-lh-body); color: var(--m-text-soft); max-width: var(--m-read); }
.empty .btn { margin-top: calc(var(--m-space-1) * 1.5); min-height: var(--m-touch); color: var(--m-action); }

/* Detail: bottom sheet on phones, side pane on desktop */
.scrim { position: fixed; inset: 0; background: var(--m-scrim); z-index: 10; }
.detail {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; max-height: calc(100% - var(--m-space-6) * 2); overflow-y: auto;
  background: var(--m-bg); border-radius: var(--m-radius-sheet) var(--m-radius-sheet) 0 0; box-shadow: var(--m-shadow-sheet);
  padding: var(--m-gap-list) var(--m-space-4) calc(env(safe-area-inset-bottom) + var(--m-space-5)) var(--m-space-4);
}
.sheet { display: flex; flex-direction: column; gap: var(--m-space-4); }
.grabber { width: var(--m-grabber-w); height: var(--m-space-1); border-radius: var(--m-space-1); background: var(--m-line); margin: 0 auto; }
.sheet-close { position: absolute; top: var(--m-space-1); right: var(--m-space-1); color: var(--m-text-soft); }
.sheet-head { display: flex; gap: var(--m-space-3); padding-right: var(--m-touch); }
.sheet-head .thumb { width: var(--m-thumb-sheet-w); height: var(--m-thumb-sheet-h); }
.sheet-head .thumb .icon, .sheet-head .thumb .icon-fill { width: var(--m-icon-sm); height: var(--m-icon-sm); }
.title-input {
  width: 100%; border: 0; border-bottom: var(--m-hairline) solid var(--m-line); background: transparent;
  padding: calc(var(--m-space-1) / 2) 0 calc(var(--m-space-1) * 1.5) 0; font-weight: 700; font-size: var(--m-fs-lead); color: var(--m-text); border-radius: 0;
}
.title-input:focus-visible { outline-offset: 0; }
.urlline { display: block; font-size: var(--m-fs-meta); margin-top: calc(var(--m-space-1) * 1.5); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tag {
  min-height: var(--m-tag); padding: 0 var(--m-gap-list); border-radius: calc(var(--m-tag) / 2); background: var(--m-surface-alt);
  font-size: var(--m-fs-meta); font-weight: 600; color: var(--m-text); display: inline-flex; align-items: center; gap: var(--m-space-1); border: 0;
}
button.tag { position: relative; }
button.tag::after { content: ''; position: absolute; inset: calc((var(--m-tag) - var(--m-touch)) / 2) 0; }
.tag .icon-sm { width: var(--m-space-3); height: var(--m-space-3); }
.tag-add { border: var(--m-hairline) dashed var(--m-text-soft); background: transparent; color: var(--m-text-soft); }
.tag-input { height: var(--m-tag); width: auto; flex: 1 1 calc(var(--m-space-6) * 4); padding: 0 var(--m-gap-list); border-radius: calc(var(--m-tag) / 2); font-size: var(--m-fs-meta); }
.sheet-actions { display: flex; gap: var(--m-gap-list); align-items: center; }
.sheet-actions .btn-primary { flex: 1; }
.sheet-foot { text-align: center; }
.date-input { max-width: calc(var(--m-space-6) * 6); }
.placeholder { color: var(--m-text-soft); font-size: var(--m-fs-card); text-align: center; margin: auto 0; }

/* Login */
.login { min-height: 100dvh; display: flex; flex-direction: column; padding: 0 var(--m-space-5); max-width: calc(var(--m-space-6) * 14); margin: 0 auto; }
.login .grow { flex: 1; min-height: calc(var(--m-space-6) * 5); }
.login .grow-2 { flex: 1.4; }
.login .brandblock { display: flex; flex-direction: column; align-items: center; gap: var(--m-space-1); padding-bottom: var(--m-space-6); }
.login form { display: flex; flex-direction: column; gap: var(--m-space-3); margin: 0; }
.login .pass { display: flex; gap: var(--m-space-2); }
.login .square { width: var(--m-control); height: var(--m-control); color: var(--m-text-soft); }
.login .square[aria-pressed="true"] { color: var(--m-action); }
.login .foot { text-align: center; padding-bottom: var(--m-space-6); }
.center { text-align: center; }

/* Capture sheet (share target) */
.capture { min-height: 100dvh; display: flex; flex-direction: column; max-width: calc(var(--m-space-6) * 20); margin: 0 auto; }
.capture .topbar a { font-size: var(--m-fs-chip); font-weight: 600; text-decoration: none; padding: var(--m-gap-list) var(--m-space-1); min-height: var(--m-touch); display: inline-flex; align-items: center; }
.capture-body { flex: 1; padding: var(--m-space-2) var(--m-space-4); display: flex; flex-direction: column; gap: var(--m-gap-section); }
.hero { height: var(--m-hero); background: var(--m-surface-alt); color: var(--m-text); display: flex; align-items: center; justify-content: center; }
.hero.video { background: var(--m-media-dark); color: var(--m-surface-alt); }
.hero .icon, .hero .icon-fill { width: calc(var(--m-touch)); height: calc(var(--m-touch)); }
.hero-text { padding: var(--m-space-3) var(--m-gap-section); display: flex; flex-direction: column; gap: var(--m-space-1); }
.hero-title { font-weight: 700; font-size: var(--m-fs-body); line-height: var(--m-lh-tight); overflow-wrap: anywhere; }
.capture .spacer { flex: 1; }
.btn-hero { min-height: var(--m-control-lg); font-size: var(--m-fs-lead); }
.capture .foot { text-align: center; padding-bottom: calc(env(safe-area-inset-bottom) + var(--m-space-5)); }

/* Settings */
.settings { gap: var(--m-space-4); padding-top: var(--m-space-1); padding-bottom: var(--m-space-5); }
.panel { background: var(--m-surface); border: var(--m-hairline) solid var(--m-line); border-radius: var(--m-radius); padding: var(--m-space-3); display: flex; align-items: center; gap: var(--m-space-3); }
.panel.col { flex-direction: column; align-items: stretch; gap: var(--m-gap-list); }
.panel.strong { border: var(--m-stroke) solid var(--m-action); padding: var(--m-gap-section); }
.panel h2 { margin: 0; font-size: var(--m-fs-body); font-weight: 700; }
.grow1 { flex: 1; min-width: 0; }
.strong-text { font-weight: 600; font-size: var(--m-fs-card); line-height: var(--m-lh-tight); }
.help { font-size: var(--m-fs-chip); color: var(--m-text-soft); padding: 0 var(--m-space-1); line-height: var(--m-lh-tight); margin: 0; }
.segmented { display: flex; border: var(--m-hairline) solid var(--m-line); border-radius: var(--m-radius); overflow: hidden; flex: none; }
.segmented button { min-height: var(--m-touch); padding: 0 var(--m-space-3); border: 0; background: var(--m-surface); font-size: var(--m-fs-chip); font-weight: 600; color: var(--m-text-soft); }
.segmented button + button { border-left: var(--m-hairline) solid var(--m-line); }
.segmented button[aria-checked="true"] { background: var(--m-action-soft); color: var(--m-action); font-weight: 700; }
.segmented button:focus-visible { outline-offset: calc(var(--m-stroke) * -1); }
.tokens { list-style: none; margin: 0; padding: 0; background: var(--m-surface); border: var(--m-hairline) solid var(--m-line); border-radius: var(--m-radius); overflow: hidden; }
.tokens li { display: flex; align-items: center; gap: var(--m-space-3); padding: var(--m-gap-list) var(--m-space-3); }
.tokens li + li { border-top: var(--m-hairline) solid var(--m-line); }
.tokens .btn { color: var(--m-text); }
.mono { font-family: var(--m-font-mono); }
.token-value { background: var(--m-surface-alt); font-family: var(--m-font-mono); font-size: var(--m-fs-chip); padding: 0 var(--m-space-3); }
.cmd { margin: 0; background: var(--m-surface-alt); border-radius: var(--m-radius-media); padding: var(--m-gap-list) var(--m-space-3); font-family: var(--m-font-mono); font-size: var(--m-fs-meta); line-height: var(--m-lh-body); color: var(--m-text); white-space: pre-wrap; word-break: break-all; }
.inline-code { font-family: var(--m-font-mono); font-size: var(--m-fs-meta); color: var(--m-text); }
.versionline { margin-top: auto; display: flex; justify-content: center; align-items: center; gap: var(--m-space-2); font-size: var(--m-fs-meta); color: var(--m-text-soft); flex-wrap: wrap; }
.warnline { display: flex; gap: var(--m-space-2); align-items: flex-start; font-size: var(--m-fs-chip); line-height: var(--m-lh-tight); }

/* Toast */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + var(--m-space-6) * 3);
  z-index: 20; max-width: calc(100% - var(--m-space-6)); background: var(--m-text); color: var(--m-bg); border-radius: var(--m-radius);
  padding: var(--m-gap-list) var(--m-space-4); font-size: var(--m-fs-chip); line-height: var(--m-lh-tight); pointer-events: none;
}
.toast:empty { display: none; }

/* Desktop (Escritorio mockup): sidebar, list, detail pane */
@media (min-width: 1024px) {
  .sidebar {
    display: flex; flex-direction: column; gap: var(--m-space-5); width: var(--m-sidebar); flex: none; height: 100%; overflow-y: auto;
    padding: calc(var(--m-space-6) - var(--m-space-1)) var(--m-space-4); border-right: var(--m-hairline) solid var(--m-line);
  }
  .sidebar .wordmark { font-size: var(--m-fs-wordmark-desk); padding: 0 var(--m-space-2); }
  .sidenav { display: flex; flex-direction: column; gap: calc(var(--m-space-1) / 2); }
  .sidenav a {
    display: flex; align-items: center; justify-content: space-between; min-height: var(--m-nav-item); padding: 0 var(--m-space-3);
    border-radius: var(--m-radius); color: var(--m-text); text-decoration: none; font-weight: 600; font-size: var(--m-fs-card);
  }
  .sidenav a:hover { background: var(--m-surface-alt); }
  .sidenav a[aria-current="page"] { background: var(--m-action-soft); color: var(--m-action); font-weight: 700; }
  .sidenav .count { font-size: var(--m-fs-meta); color: var(--m-text-soft); }
  .sidenav a[aria-current="page"] .count { background: var(--m-action); color: var(--m-on-action); border-radius: calc(var(--m-badge) / 2); padding: 0 var(--m-space-2); line-height: var(--m-badge); }
  .sidetags { display: flex; flex-direction: column; gap: calc(var(--m-space-1) * 1.5); padding: 0 var(--m-space-3); }
  .sidetags .label { font-size: var(--m-fs-nav); }
  .sidetags button { border: 0; background: transparent; padding: 0; text-align: left; font-size: var(--m-fs-chip); color: var(--m-text); min-height: var(--m-space-5); }
  .sidetags button[aria-pressed="true"] { color: var(--m-action); font-weight: 700; }
  .sidefoot { margin-top: auto; padding: 0 var(--m-space-3); display: flex; flex-direction: column; gap: var(--m-space-1); font-size: var(--m-fs-meta); color: var(--m-text-soft); }
  .sidefoot a { font-size: var(--m-fs-meta); }

  .tabbar { display: none; }
  .topbar { padding: calc(var(--m-space-6) - var(--m-space-1)) var(--m-space-6) var(--m-space-3) var(--m-space-6); }
  .topbar .end { display: none; }
  .topbar.inbox { display: none; }
  .topbar.with-back .back { display: none; }
  .composer { padding: calc(var(--m-space-6) - var(--m-space-1)) var(--m-space-6) var(--m-space-4) var(--m-space-6); }
  .composer .send { width: auto; padding: 0 calc(var(--m-space-4) + var(--m-space-1) / 2); font-size: var(--m-fs-card); font-weight: 700; }
  .composer .send .icon-sm { display: none; }
  .composer .send .label-desk { display: inline; }
  .toolbar { padding: 0 var(--m-space-6) var(--m-space-3) var(--m-space-6); }
  .main { padding: 0 var(--m-space-6) var(--m-space-6) var(--m-space-6); gap: var(--m-space-2); }
  .main > * { max-width: var(--m-read); width: 100%; }
  .main > .listhead { gap: var(--m-space-4); }

  /* Inbox card: one row, two actions on the right */
  .card.inbox { display: flex; align-items: center; padding-right: var(--m-gap-section); }
  .card.inbox .card-open { padding: var(--m-space-3) 0 var(--m-space-3) var(--m-gap-section); gap: var(--m-gap-section); align-items: center; flex: 1; min-width: 0; }
  .card.inbox .thumb { width: var(--m-thumb-desk-w); height: var(--m-thumb-desk-h); }
  .card.inbox .card-note { font-size: var(--m-fs-card); -webkit-line-clamp: 2; }
  .card.inbox .actions { border-top: 0; gap: calc(var(--m-space-1) * 1.5); flex: none; }
  .card.inbox .actions button { flex: none; height: var(--m-chip); padding: 0 var(--m-space-3); border: var(--m-hairline) solid var(--m-line); border-radius: var(--m-radius); background: var(--m-surface); }
  .card.inbox .actions button + button { border-left: var(--m-hairline) solid var(--m-line); }
  .card.inbox .actions .act-date, .card.inbox .actions .act-drop { display: none; }
  .card.inbox .when-mobile { display: none; }

  .scrim { display: none; }
  .detail {
    position: static; z-index: auto; max-height: none; height: 100%; width: var(--m-aside); flex: none; border-radius: 0; box-shadow: none;
    background: var(--m-surface); border-left: var(--m-hairline) solid var(--m-line); padding: calc(var(--m-space-6) - var(--m-space-1)) var(--m-space-5);
    display: flex; flex-direction: column;
  }
  .detail[hidden] { display: flex !important; }
  .grabber, .sheet-close { display: none; }
  .sheet-head { flex-direction: column; padding-right: 0; }
  .sheet-head .thumb { width: 100%; height: var(--m-hero-desk); border-radius: var(--m-radius); }
  .sheet-head .thumb .icon, .sheet-head .thumb .icon-fill { width: calc(var(--m-space-6) + var(--m-space-1)); height: calc(var(--m-space-6) + var(--m-space-1)); }
  .sheet-head .thumb.empty-media { display: none; }
  .detail .title-input { font-size: var(--m-fs-body); }
  .detail .label { font-size: var(--m-fs-nav); }
  .detail .chip { min-height: var(--m-chip-desk); padding: 0 var(--m-space-3); border-radius: calc(var(--m-chip-desk) / 2); font-size: var(--m-fs-meta); }
  .detail .chips { gap: calc(var(--m-space-1) * 1.5); }
  .detail .textarea { background: var(--m-bg); font-size: var(--m-fs-chip); }

  .settings > * { max-width: var(--m-read); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --m-aside: calc(var(--m-space-6) * 10); }
}

@media (prefers-reduced-motion: no-preference) {
  .detail { transition: transform 160ms ease-out; }
}