/* Spacuo design system (S0.1b), restyled as «Variable · Eléctrico» (design-proposals/personal/rediseno/REDISENO.md,
   decided by the owner on 13-11-2026): rounded panels with no border, Unbounded titles, an electric blue used with
   intention, cyan for what went well and a scarce amber only for warnings. Additive: every class starts with "ds-".
   Logical properties only (RTL-ready); dark theme follows body.dark like the rest of the app.
   Themes (PENDIENTES §13, decided by the owner on 30-10-2026, brought in phase 0 of Personal): the light theme is B,
   blue-grey with no pure white (:root); the earlier white theme is the «High contrast» option (body.ds-contrast, light
   only); the dark theme keeps its colours. Chart steps --ds-chart-1 (most) to --ds-chart-3, per theme. Every pair is
   checked for WCAG AA by tests/design-system.test.mjs. */
:root{
  --ds-font:'Space Grotesk',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ds-font-display:'Unbounded','Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --ds-bg:#dce3ed;--ds-surface:#ebf0f6;--ds-surface-2:#d2dbe8;--ds-line:#c5cfde;--ds-line-strong:#5d6c8c;
  --ds-ink:#0a1430;--ds-ink-2:#22305a;--ds-muted:#45526e;
  --ds-brand:#1b44f0;--ds-brand-hover:#1535c7;--ds-brand-soft:#d3deff;--ds-brand-ink:#0b2a8f;--ds-on-brand:#ffffff;--ds-focus:#1b44f0;
  --ds-accent:#006a76;--ds-good-text:#006a76;--ds-warning-text:#8f5200;--ds-error-text:#b0153e;
  --ds-chart-1:#0b2a8f;--ds-chart-2:#1b44f0;--ds-chart-3:#4f6fe8;
  --ds-cat-1:#1b44f0;--ds-cat-2:#006a76;--ds-cat-3:#0b2a8f;--ds-cat-4:#7a3bd9;--ds-cat-5:#55617a;
  --ds-shadow-sm:none;--ds-shadow:0 18px 40px -18px rgba(10,20,48,.28);
  --ds-radius-lg:26px;--ds-radius:18px;--ds-radius-sm:12px;--ds-pill:999px;
  --ds-space-1:4px;--ds-space-2:8px;--ds-space-3:12px;--ds-space-4:16px;--ds-space-5:24px;--ds-space-6:32px;
  --ds-tap:44px;--ds-ease:cubic-bezier(.2,.8,.2,1);--ds-fast:140ms;--ds-normal:220ms;--ds-slow:260ms;
  --ds-hero:clamp(64px,19vw,112px);--ds-h1:min(clamp(1.5rem,6vw,2rem),9vw);
}
body.dark{
  --ds-bg:#050b1f;--ds-surface:#0c1633;--ds-surface-2:#13204a;--ds-line:#1b2850;--ds-line-strong:#6175ad;
  --ds-ink:#eef3ff;--ds-ink-2:#c3ceea;--ds-muted:#9dabcf;
  --ds-brand:#6e97ff;--ds-brand-hover:#8daeff;--ds-brand-soft:#18275e;--ds-brand-ink:#a9c1ff;--ds-on-brand:#050b1f;--ds-focus:#6e97ff;
  --ds-accent:#33e0d2;--ds-good-text:#33e0d2;--ds-warning-text:#f2b54a;--ds-error-text:#ff8fa8;
  --ds-shadow-sm:none;--ds-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  --ds-chart-1:#c4d3ff;--ds-chart-2:#6e97ff;--ds-chart-3:#4c6fd1;
  --ds-cat-1:#6e97ff;--ds-cat-2:#33e0d2;--ds-cat-3:#c4d3ff;--ds-cat-4:#c9a2ff;--ds-cat-5:#b7c1d8;
}
body.ds-contrast:not(.dark){
  --ds-bg:#ffffff;--ds-surface:#ffffff;--ds-surface-2:#eef2fa;--ds-line:#5c6784;--ds-line-strong:#1a2442;
  --ds-ink:#020716;--ds-ink-2:#0e1834;--ds-muted:#273250;
  --ds-brand:#0026b0;--ds-brand-hover:#001e8c;--ds-brand-soft:#e4eaff;--ds-brand-ink:#001a6e;--ds-focus:#0026b0;
  --ds-accent:#005560;--ds-good-text:#005560;--ds-warning-text:#663a00;--ds-error-text:#8a0a2c;
  --ds-chart-1:#001a6e;--ds-chart-2:#0026b0;--ds-chart-3:#3553c8;
  --ds-cat-1:#0026b0;--ds-cat-2:#005560;--ds-cat-3:#001a6e;--ds-cat-4:#5a1fb0;--ds-cat-5:#3a4560;
}
/* Typography: Space Grotesk for reading and Unbounded (variable weight) for titles and big figures, both self-hosted
   with their OFL licences in assets/fonts (nothing from Google Fonts or any other server). */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url('assets/fonts/unbounded-latin-wght.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url('assets/fonts/unbounded-latin-ext-wght.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Motion of «Variable» (REDISENO.md): 140–260 ms with a small bounce when something is confirmed, and «No motion» as
   the person's preference (body[data-motion="none"], set in Appearance). The system's reduce motion
   always wins. Only transform, opacity and the drawing of SVG lines may move; the design system's own durations follow. */
body{--ds-motion-fast:140ms;--ds-motion-normal:220ms;--ds-motion-slow:260ms;--ds-motion-stagger:20ms;--ds-motion-shift:8px;--ds-motion-ease:cubic-bezier(.2,.9,.3,1.1);
  --ds-fast:var(--ds-motion-fast);--ds-normal:var(--ds-motion-normal);--ds-slow:var(--ds-motion-slow);--ds-ease:var(--ds-motion-ease)}
body[data-motion="none"]{--ds-motion-fast:0ms;--ds-motion-normal:0ms;--ds-motion-slow:0ms;--ds-motion-stagger:0ms;--ds-motion-shift:0px;--ds-motion-ease:linear}
@media (prefers-reduced-motion:reduce){body,body[data-motion]{--ds-motion-fast:0ms;--ds-motion-normal:0ms;--ds-motion-slow:0ms;--ds-motion-stagger:0ms;--ds-motion-shift:0px;--ds-motion-ease:linear}}
body[data-motion="none"] *,body[data-motion="none"] *::before,body[data-motion="none"] *::after{animation:none!important;transition:none!important}

.ds-icon{inline-size:20px;block-size:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ds-icon--sm{inline-size:16px;block-size:16px}
.ds-icon--lg{inline-size:26px;block-size:26px}
[dir="rtl"] .ds-icon--mirror{transform:scaleX(-1)}
.ds-sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.ds-card{background:var(--ds-surface);color:var(--ds-ink);border:0;border-radius:var(--ds-radius-lg);padding:var(--ds-space-5);box-shadow:var(--ds-shadow-sm);min-inline-size:0}
body.ds-contrast:not(.dark) .ds-card{border:2px solid var(--ds-line-strong)}
.ds-card--link{transition:transform var(--ds-normal) var(--ds-ease),box-shadow var(--ds-normal) var(--ds-ease),border-color var(--ds-normal)}
.ds-card--link:hover{transform:translateY(-3px);box-shadow:var(--ds-shadow);border-color:var(--ds-line-strong)}

.ds-btn,.ds-iconbtn,.ds-chip--button,.ds-seg__item{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--ds-fast) var(--ds-ease),background var(--ds-fast),color var(--ds-fast),border-color var(--ds-normal)}
.ds-btn:active,.ds-iconbtn:active,.ds-chip--button:active,.ds-seg__item:active{transform:scale(.97)}
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);min-block-size:var(--ds-tap);padding-block:var(--ds-space-2);padding-inline:18px;border-radius:var(--ds-pill);border:1.5px solid var(--ds-line-strong);font-weight:600;font-size:0.875rem;line-height:1.2;text-align:center;background:none;color:var(--ds-ink)}
.ds-btn:hover{background:var(--ds-brand-soft)}
.ds-btn--primary{background:var(--ds-brand);border-color:var(--ds-brand);color:var(--ds-on-brand)}
.ds-btn--primary:hover{background:var(--ds-brand-hover)}
.ds-btn--sm{min-block-size:36px;padding-inline:14px;font-size:0.8125rem}
.ds-btn:disabled,.ds-iconbtn:disabled{opacity:.5;cursor:default;transform:none}
.ds-iconbtn{display:inline-grid;place-items:center;inline-size:var(--ds-tap);block-size:var(--ds-tap);border-radius:var(--ds-pill);background:var(--ds-surface);border:1px solid var(--ds-line);color:var(--ds-ink-2)}
.ds-iconbtn:hover{background:var(--ds-surface-2)}

/* A label, not a pill: chips everywhere are part of the «AI look» the owner asked to drop. */
.ds-chip{display:inline-flex;align-items:center;gap:6px;min-block-size:24px;padding:0;border-radius:0;background:none;color:var(--ds-muted);font-size:0.8125rem;border:0}
.ds-chip--brand{color:var(--ds-brand-ink);font-weight:600}
.ds-chip--button{min-block-size:var(--ds-tap)}

.ds-seg{display:inline-flex;max-inline-size:100%;overflow-x:auto;gap:2px;padding:3px;border-radius:var(--ds-pill);background:var(--ds-surface-2);scrollbar-width:none}
.ds-seg__item{display:inline-flex;align-items:center;gap:6px;min-block-size:38px;padding-inline:14px;border-radius:var(--ds-pill);border:0;background:none;color:var(--ds-ink-2);font-size:0.8125rem;white-space:nowrap}
.ds-seg__item[aria-pressed="true"],.ds-seg__item[aria-selected="true"],.ds-seg__item[aria-current="page"]{background:var(--ds-brand-ink);color:var(--ds-on-brand);font-weight:600}
body.dark .ds-seg__item[aria-pressed="true"],body.dark .ds-seg__item[aria-selected="true"],body.dark .ds-seg__item[aria-current="page"]{color:var(--ds-bg)}
body.ds-contrast:not(.dark) .ds-seg{background:none;box-shadow:inset 0 0 0 2px var(--ds-line-strong)}

.ds-notice{display:flex;align-items:center;gap:var(--ds-space-3);padding-block:10px;padding-inline:14px 10px;border-radius:var(--ds-radius);background:var(--ds-surface);border:0;color:var(--ds-ink)}
.ds-notice__body{flex:1;min-inline-size:0}
.ds-empty{display:grid;justify-items:center;gap:var(--ds-space-3);text-align:center;padding:var(--ds-space-6) var(--ds-space-5);color:var(--ds-ink)}
.ds-empty__text{max-inline-size:36ch;color:var(--ds-muted)}

.ds-toasts{position:fixed;z-index:70;inset-block-end:24px;inset-inline:0;display:grid;justify-items:center;gap:var(--ds-space-2);pointer-events:none;padding-inline:var(--ds-space-4)}
.ds-toast{display:flex;align-items:center;gap:10px;max-inline-size:100%;padding-block:12px;padding-inline:16px;border-radius:var(--ds-radius);background:var(--ds-ink);color:var(--ds-bg);box-shadow:var(--ds-shadow);font-size:0.875rem;pointer-events:auto;animation:ds-enter var(--ds-normal) var(--ds-ease) both}

.ds-btn:focus-visible,.ds-iconbtn:focus-visible,.ds-chip--button:focus-visible,.ds-seg__item:focus-visible,.ds-card--link:focus-visible{outline:3px solid var(--ds-focus);outline-offset:2px}
@keyframes ds-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){[class*="ds-"],[class*="ds-"]::before,[class*="ds-"]::after{animation:none!important;transition:none!important}}