/* Spacuo Personal v1 (phase 1). From the approved prototype (design-proposals/personal/src/styles.css, 74629b3), on the
   design system of dist/spacuo-design.css: its themes (light B, high contrast and dark) and its motion tokens apply to
   every Personal screen. Logical properties only (RTL-ready). Mobile first: a bar at the bottom, a side menu from 900 px.
   One screen, one idea. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/space-grotesk-400.ttf') format('truetype')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/space-grotesk-600.ttf') format('truetype')}
/* The blue Spacuo icon (assets/brand, as it is) in every theme: its tile stands out on light and high contrast, its blue «S» on dark. */
.pp-logo__icon{background-image:url('assets/brand/icon-blue-192.png')}
body{margin:0;font-family:var(--ds-font);background:var(--ds-bg);color:var(--ds-ink);font-size:0.9375rem;line-height:1.45;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
/* Motion A and «No motion» (design-proposals/MOVIMIENTO.md): the system's reduce motion always wins. */
@media (prefers-reduced-motion:reduce){body *,body *::before,body *::after{animation:none!important;transition:none!important}}
*,*::before,*::after{box-sizing:border-box}
h1,h2,h3,p{margin:0}
h1{font-family:var(--ds-font-display);font-weight:650;font-size:var(--ds-h1);line-height:1.12;letter-spacing:-.02em}
h2{font-size:1.0625rem;font-weight:600}
:focus-visible{outline:3px solid var(--ds-focus);outline-offset:2px}
.pp-skip{position:absolute;inset-inline-start:8px;inset-block-start:8px;z-index:80;background:var(--ds-surface);color:var(--ds-ink);padding:8px 12px;border-radius:var(--ds-radius-sm)}
/* Hidden above the page until it has the focus, whatever the size of the text (a fixed offset let it peek with large
   text): it moves up by more than its own height. */
.pp-skip:not(:focus){inset-block-start:0;transform:translateY(-120%)}
.pp-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 16px;background:var(--ds-surface);border-block-end:1px solid var(--ds-line);position:sticky;inset-block-start:0;z-index:20}
.pp-logo{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px;cursor:pointer;color:var(--ds-ink);font:inherit;border-radius:var(--ds-radius-sm);min-block-size:var(--ds-tap)}
.pp-logo__icon{inline-size:30px;block-size:30px;border-radius:8px;background-size:cover}
.pp-logo__word{font-weight:600;letter-spacing:.18em;font-size:0.9375rem}
.pp-spaces .ds-seg__item{min-block-size:var(--ds-tap)}
.pp-soon{font-size:0.75rem;color:var(--ds-muted)}
.pp-top .ds-seg__item{min-block-size:var(--ds-tap)}
.pp-grow{flex:1;min-inline-size:0}
.pp-body{display:block}
.pp-main{max-inline-size:760px;margin-inline:auto;padding:16px 16px 96px;display:grid;gap:14px;outline:none;min-inline-size:0}
.pp-cols{display:grid;gap:14px}
.pp-col{display:grid;gap:14px;align-content:start;min-inline-size:0}
.pp-nav{position:fixed;inset-inline:0;inset-block-end:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);background:var(--ds-surface);border-block-start:1px solid var(--ds-line);padding-block-end:env(safe-area-inset-bottom)}
.pp-nav__item{display:grid;justify-items:center;gap:2px;min-block-size:58px;padding:6px 4px;background:none;border:0;color:var(--ds-ink-2);font:inherit;font-size:0.7812rem;cursor:pointer}
.pp-nav__item[aria-current="page"]{color:var(--ds-brand-ink);font-weight:600}
.pp-nav__item[aria-current="page"] .ds-icon{stroke-width:2.2}
body.dark .pp-nav__item[aria-current="page"]{color:var(--ds-brand)}
/* Wider screens: the content centred with a comfortable maximum width and grids of two or three columns; nothing boxed
   in. The side menu only when there is a menu (after the first use). */
@media (min-width:600px){.pp-main{padding-inline:24px}}
@media (min-width:768px){.pp-main{max-inline-size:900px}}
@media (min-width:900px){
  .pp-body--nav{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start}
  .pp-nav{position:sticky;inset-block-start:66px;inset-inline:auto;display:grid;grid-template-columns:none;align-content:start;gap:4px;padding:16px 12px;border:0;background:none;min-block-size:calc(100vh - 66px)}
  .pp-nav__item{display:flex;justify-content:flex-start;gap:12px;min-block-size:44px;padding-inline:12px;border-radius:var(--ds-radius-sm);font-size:0.9375rem}
  .pp-nav__item[aria-current="page"]{background:var(--ds-brand-soft);color:var(--ds-brand-ink)}
  .pp-main{inline-size:100%;max-inline-size:1120px;padding:24px 32px 48px}
  .pp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
  .pp-cols--flow{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .pp-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-days{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@media (min-width:1500px){.pp-main{max-inline-size:1240px}.pp-plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pp-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font-size:0.8125rem;color:var(--ds-ink-2)}
.pp-crumbs li+li::before{content:'›';margin-inline-end:6px;color:var(--ds-muted)}
.pp-crumbs__link{background:none;border:0;padding:0;font:inherit;color:var(--ds-brand-ink);text-decoration:underline;cursor:pointer;min-block-size:24px}
body.dark .pp-crumbs__link{color:var(--ds-brand)}
.pp-head{display:grid;gap:4px}
.pp-head h1{outline:none}
.pp-muted{color:var(--ds-muted);font-size:0.875rem}
.pp-card{display:grid;gap:10px;padding:16px}
.pp-row{display:flex;align-items:center;gap:10px}
.pp-wrap{flex-wrap:wrap}
.pp-stack{display:grid;gap:10px}
.pp-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pp-chips:empty{display:none}
.pp-note{display:flex;gap:8px;align-items:flex-start;font-size:0.875rem;color:var(--ds-ink-2);background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:10px 12px}
.pp-list,.pp-bullets,.pp-ms,.pp-timeline,.pp-days,.pp-options,.pp-plans,.pp-morelist{list-style:none;margin:0;padding:0}
.pp-list{display:grid;gap:8px}
.pp-list>li{min-inline-size:0}
.pp-list .pp-muted{display:block}
.pp-bullets{display:grid;gap:6px;padding-inline-start:18px;list-style:disc}
.pp-linkbtn{background:none;color:var(--ds-brand-ink);text-decoration:underline;padding-inline:8px}
body.dark .pp-linkbtn{color:var(--ds-brand)}
.pp-task{display:flex;align-items:center;gap:10px}
.pp-check{flex:none;display:grid;place-items:center;inline-size:var(--ds-tap);block-size:var(--ds-tap);border-radius:50%;border:2px solid var(--ds-line-strong);background:var(--ds-surface);color:var(--ds-line-strong);cursor:pointer}
.pp-check:hover{border-color:var(--ds-brand);color:var(--ds-brand)}
.pp-check:active{transform:scale(.94)}
.pp-when{flex:none;min-inline-size:84px;font-size:0.8125rem;color:var(--ds-ink-2);font-weight:600}
.pp-late{border-style:dashed}
.pp-field{display:grid;gap:4px;font-size:0.875rem;color:var(--ds-ink-2)}
.pp-field input,.pp-field select{font:inherit;min-block-size:var(--ds-tap);padding-inline:10px;border-radius:var(--ds-radius-sm);border:1px solid var(--ds-line-strong);background:var(--ds-surface);color:var(--ds-ink);min-inline-size:0}
.pp-inline{display:inline-grid}
.pp-grid2{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5em),1fr))}
.pp-field input[type=date]{min-inline-size:min(10.5em,100%)}
.pp-form{display:grid;gap:10px}
.pp-switch{display:flex;align-items:center;gap:10px;min-block-size:var(--ds-tap);cursor:pointer}
.pp-switch input{inline-size:22px;block-size:22px;accent-color:var(--ds-brand)}
.pp-quick{grid-template-columns:1fr}
.pp-quick .ds-btn,.pp-flowform .ds-btn{justify-self:start}
.pp-field textarea{font:inherit;inline-size:100%;min-block-size:64px;padding:10px;border-radius:var(--ds-radius-sm);border:1px solid var(--ds-line-strong);background:var(--ds-surface);color:var(--ds-ink);resize:vertical;line-height:1.4}
.pp-hero{display:grid;justify-items:start;gap:8px}
.pp-options,.pp-morelist{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:600px){.pp-options,.pp-morelist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pp-options,.pp-morelist{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pp-option{inline-size:100%;display:flex;align-items:center;gap:12px;text-align:start;padding:14px;border-radius:var(--ds-radius);border:1px solid var(--ds-line);background:var(--ds-surface);color:var(--ds-ink);font:inherit;cursor:pointer;min-block-size:64px}
.pp-option:hover{border-color:var(--ds-line-strong)}
.pp-option>span{display:grid;gap:2px}
.pp-option .ds-icon{color:var(--ds-brand-ink)}
body.dark .pp-option .ds-icon{color:var(--ds-brand)}
.pp-plans{display:grid;gap:10px}
.pp-plancard{inline-size:100%;display:flex;align-items:center;gap:14px;text-align:start;font:inherit;color:var(--ds-ink);cursor:pointer;padding:12px 16px}
.pp-plancard__text{display:grid;gap:2px;min-inline-size:0}
.pp-planhead{display:flex;align-items:center;gap:16px;padding:14px 16px}
.pp-big{font-size:1.25rem;font-weight:600}
.pp-kv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.pp-kv div{display:grid;gap:2px}
.pp-kv dt{font-size:0.8125rem;color:var(--ds-ink-2)}
.pp-kv dd{margin:0;font-size:1.125rem;font-weight:600}
.pp-meter{display:block;block-size:10px;border-radius:999px;background:var(--ds-surface-2);border:1px solid var(--ds-line-strong);overflow:hidden}
.pp-meter span{display:block;block-size:100%;background:var(--c,var(--ds-chart-1))}
.pp-item .pp-meter{border-color:var(--c,var(--ds-line-strong))}
.pp-meter.is-over span{background:var(--ds-warning-text)}
.pp-item{display:grid;gap:4px}
.pp-money{display:inline-flex;align-items:center;gap:4px}
.pp-money input{font:inherit;inline-size:96px;min-block-size:var(--ds-tap);padding-inline:8px;border-radius:var(--ds-radius-sm);border:1px solid var(--ds-line-strong);background:var(--ds-surface);color:var(--ds-ink);text-align:end}
.pp-money--sm input{inline-size:80px}
.pp-proposal .pp-row{align-items:center}
.pp-proposal .is-off b{color:var(--ds-muted);text-decoration:line-through}
.pp-accept{inline-size:24px;block-size:24px;flex:none;accent-color:var(--ds-brand);margin:10px}
.pp-editinput{font:inherit;inline-size:100%;min-block-size:var(--ds-tap);padding-inline:8px;border-radius:var(--ds-radius-sm);border:1px solid var(--ds-line-strong);background:var(--ds-surface);color:var(--ds-ink)}
.pp-sticky{position:sticky;inset-block-end:66px;background:var(--ds-bg);padding-block:8px;z-index:5}
@media (min-width:900px){.pp-sticky{inset-block-end:0}}
.pp-ms{display:grid;gap:6px}
.pp-ms li{display:flex;gap:8px;align-items:center}
.pp-ms li.is-done{color:var(--ds-good-text);font-weight:600}
.pp-timeline{display:grid;gap:8px;border-inline-start:2px solid var(--ds-line-strong);padding-inline-start:12px}
.pp-timeline li{display:flex;flex-wrap:wrap;gap:4px 10px}
.pp-timeline li.is-done span:last-child{text-decoration:line-through;color:var(--ds-muted)}
.pp-days{display:grid;gap:14px}
.pp-day{font-size:0.9375rem;margin-block-end:6px}
.pp-day::first-letter,.pp-date::first-letter{text-transform:uppercase}
.pp-reviewcard{gap:12px}
.pp-review-actions .ds-btn{flex:1 1 140px}
details.pp-card>summary{cursor:pointer;font-weight:600;min-block-size:28px}
/* Visual summary and sub-tabs (base/subtabs.js, from the Sports prototype, §48) */
.pp-subtabs{margin-block:4px}
.pp-subtabs__n{font-variant-numeric:tabular-nums;color:var(--ds-ink-2);font-weight:600}
.pp-subpanel{display:grid;gap:14px}
.pp-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.pp-summary__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm);background:var(--ds-surface)}
.pp-summary__item .ds-icon{color:var(--ds-brand-ink)}
body.dark .pp-summary__item .ds-icon{color:var(--ds-brand)}
.pp-summary__text{display:grid;gap:2px;min-inline-size:0}
.pp-summary__value{font-size:1.25rem;font-weight:700;color:var(--ds-ink)}
.pp-summary__label{font-size:0.8125rem;color:var(--ds-ink-2)}
/* art: the plan types' own illustrations (src/art.js), palette tokens only */
   (the global rule above). Their meaning is always in words too. */
.pp-ring{display:block;block-size:auto;overflow:visible}
.pp-ring{inline-size:56px;flex:none}
.pp-ring__track{fill:none;stroke:var(--ds-line);stroke-width:6}
.pp-ring__fill{fill:none;stroke:var(--ds-brand);stroke-width:6;stroke-linecap:round}
.pp-ring__text{font-size:13px;font-weight:700;fill:var(--ds-ink)}
.pp-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pp-caption{font-size:0.8125rem;color:var(--ds-ink-2);margin:0}
@media (forced-colors:active){.pp-ring *{forced-color-adjust:auto}}
/* visuals:end */
.pp-hero__mark{display:inline-flex;align-items:center;gap:10px}
.pp-hero__icon{inline-size:44px;block-size:44px;border-radius:12px}
.pp-hero__word{font-weight:600;letter-spacing:.2em;font-size:1.375rem}
.pp-hero__logo{display:none;inline-size:200px;block-size:52px;background:url('assets/brand/logo-horizontal.svg') no-repeat left center/contain}
body.dark .pp-hero__logo{display:block;mix-blend-mode:lighten}
body.dark .pp-hero__icon,body.dark .pp-hero__word{display:none}
.pp-short{display:none}
@media (max-width:599px){.pp-long{display:none}.pp-short{display:inline}.pp-spaces{order:5;flex:1 1 100%}.pp-top{row-gap:6px}}
.pp-sub{font-size:0.9375rem;margin-block-start:6px}
.pp-proposal{gap:2px}
.pp-proposal .pp-row{min-block-size:48px}

/* Data visuals only (owner's rule, 10-11-2026): every visual shows real data of the plan or the day. Motion only to
   confirm an action (a task done, an amount noted); «No motion» and the system's reduce motion stop it. */

.pp-startgrid{display:grid;gap:14px}
@media (min-width:900px){.pp-startgrid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}
/* Today: the day's header, the things as cards with their icon and plan, and what comes next as a timeline. */
.pp-dayhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pp-dayhead .pp-head{flex:1;min-inline-size:200px}
.pp-date{font-size:0.8125rem;font-weight:600;color:var(--ds-ink-2)}
.pp-tcards{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pp-tcard{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:var(--ds-radius);background:var(--ds-surface-2);border:1px solid var(--ds-line)}
.pp-badge{flex:none;display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:12px;background:var(--ds-brand-soft);color:var(--ds-brand-ink)}
body.dark .pp-badge{color:var(--ds-brand)}
.pp-tmeta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:0.8125rem}
.pp-tmeta .pp-when{min-inline-size:0;font-weight:600}
.pp-ctx{display:inline-flex;padding:1px 8px;border-radius:999px;background:var(--ds-surface);color:var(--ds-ink-2);border:1px solid var(--ds-line)}
.pp-tcard .pp-muted{display:inline}
.pp-tl{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative}
.pp-tl::before{content:'';position:absolute;inset-block:12px;inset-inline-start:13px;inline-size:2px;background:var(--ds-line-strong)}
.pp-tl__item{display:flex;align-items:center;gap:10px;position:relative}
.pp-tl__dot{flex:none;display:grid;place-items:center;inline-size:28px;block-size:28px;border-radius:50%;background:var(--ds-surface);border:2px solid var(--ds-line-strong);color:var(--ds-brand-ink);z-index:1}
.pp-tl__item--start .pp-tl__dot,.pp-tl__item--milestone .pp-tl__dot{border-color:var(--ds-chart-1)}
body.dark .pp-tl__dot{color:var(--ds-brand)}
.pp-tl__when{flex:none;min-inline-size:76px;font-size:0.8125rem;font-weight:600;color:var(--ds-ink-2)}
/* Plan covers, the track to the plan and the items' chips. */
.pp-planhead{display:grid;gap:12px;padding:12px}
.pp-planhead__text{display:grid;gap:4px;padding-inline:4px}

.pp-plancard{flex-direction:column;align-items:stretch;padding:10px}
.pp-plancard__text{padding-inline:4px}
.pp-itemchip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;background:var(--ds-brand-soft);color:var(--ds-brand-ink);font-weight:600;font-size:0.875rem}
body.dark .pp-itemchip{color:var(--ds-brand)}
.pp-track{position:relative;block-size:34px;margin-block:4px 6px}
.pp-track__line{position:absolute;inset-inline:0;inset-block-start:21px;block-size:4px;border-radius:2px;background:var(--ds-surface-2);border:1px solid var(--ds-line-strong)}
.pp-track__fill{position:absolute;inset-inline-start:0;inset-block-start:21px;block-size:4px;border-radius:2px;background:var(--ds-chart-1)}
.pp-track__flag{position:absolute;inset-block-start:0;transform:translateX(-50%);color:var(--ds-ink-2)}
.pp-track__flag.is-done{color:var(--ds-good-text)}
.pp-track__now{position:absolute;inset-block-start:16px;inline-size:14px;block-size:14px;border-radius:50%;background:var(--ds-surface);border:3px solid var(--ds-chart-1);transform:translateX(-50%)}
/* Empty states: a picture and one clear action. */
.pp-empty{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;padding:14px}
.pp-tick{inline-size:18px;block-size:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:8px;flex:none}
.pp-tick path{stroke-dasharray:1;stroke-dashoffset:1;animation:pp-draw var(--ds-motion-slow) var(--ds-motion-ease) forwards}
body[data-motion="none"] .pp-tick path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.pp-tick path{stroke-dashoffset:0}}
@keyframes pp-draw{to{stroke-dashoffset:0}}

/* Corrections after the owner's test at 1280 px: an item's name on its own line with «spent / planned» below; dates
   shown whole; milestones close together share one mark with their dates; the coin leaves nothing behind; settings rows
   wrap instead of overlapping. */
.pp-item{gap:6px;padding-block:4px}
.pp-item__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px}
.pp-item__head .pp-muted{display:inline;font-size:0.8125rem}
.pp-item__nums{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:0.875rem}
.pp-item__nums .pp-money{gap:6px}
.pp-track{block-size:58px}
.pp-track__flag{display:inline-flex;align-items:flex-start;gap:1px}
.pp-track__flag--start{transform:none}.pp-track__flag--end{transform:translateX(-100%)}
.pp-track__n{font-size:0.6875rem;font-weight:700;color:var(--ds-ink-2)}
.pp-track__label{position:absolute;inset-block-start:36px;transform:translateX(-50%);font-size:0.75rem;color:var(--ds-ink-2);white-space:nowrap}
.pp-track__label--start{transform:none}.pp-track__label--end{transform:translateX(-100%)}
.pp-setrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pp-setrow>.pp-grow{flex:1 0 auto;min-inline-size:max-content}

.pp-money-tab{display:grid;gap:14px}
@media (min-width:900px){.pp-live .pp-items{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));column-gap:24px}.pp-live .pp-kv{max-inline-size:640px}}

/* The stacked budget bar, the plan's data header and the confirmation of an amount noted. */
/* Each budget item's own colour (≥ 3:1 against the card in the three themes; the number on it ≥ 4.5:1). */
/* Blues, cyan, violet and slate: never the amber of warnings nor the red of errors, and always with their number. */
body{--pp-c-stay:var(--ds-cat-1);--pp-c-transport:var(--ds-cat-2);--pp-c-food:var(--ds-cat-3);--pp-c-activities:var(--ds-cat-4);--pp-c-spare:var(--ds-cat-5)}
.pp-c--stay{--c:var(--pp-c-stay)}.pp-c--transport{--c:var(--pp-c-transport)}.pp-c--food{--c:var(--pp-c-food)}.pp-c--activities{--c:var(--pp-c-activities)}.pp-c--spare{--c:var(--pp-c-spare)}
.pp-stackbar{display:flex;gap:3px;block-size:22px}
.pp-stackbar--mini{block-size:16px;margin-block:4px 2px}
.pp-stackbar__seg{position:relative;min-inline-size:6px;border-radius:5px;border:1.5px solid var(--c,var(--ds-line-strong));background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--c) 30%,transparent) 0 3px,transparent 3px 7px);overflow:hidden;container-type:inline-size}
.pp-stackbar__spent{position:absolute;inset-block:0;inset-inline-start:0;background:var(--c,var(--ds-chart-1))}
.pp-stackbar__n{position:absolute;inset-block-start:50%;inset-inline-start:3px;translate:0 -50%;min-inline-size:14px;block-size:14px;padding-inline:2px;border-radius:4px;background:var(--ds-surface);color:var(--ds-ink);font-size:0.625rem;font-weight:700;line-height:14px;text-align:center;box-sizing:border-box}
.pp-stackbar--mini .pp-stackbar__n{block-size:12px;line-height:12px;min-inline-size:12px;font-size:0.5625rem;inset-inline-start:1px}
@container (max-width:19px){.pp-stackbar__n{display:none}}
.pp-stackbar__seg.is-over{outline:2px solid var(--ds-warning-text);outline-offset:-1px}
.pp-itemchip__n{display:inline-grid;place-items:center;min-inline-size:18px;block-size:18px;padding-inline:3px;border-radius:5px;background:var(--c,var(--ds-brand));color:var(--ds-on-brand);font-size:0.6875rem;font-weight:700;line-height:1;box-sizing:border-box}
.pp-minilegend{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:0.75rem;color:var(--ds-ink-2)}
.pp-minilegend>span{display:inline-flex;align-items:center;gap:4px}
.pp-minilegend .pp-itemchip__n{min-inline-size:14px;block-size:14px;font-size:0.5625rem}
.pp-legend{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pp-legend li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;font-size:0.875rem}
.pp-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:0.8125rem;font-weight:600;color:var(--ds-ink-2);text-transform:uppercase;letter-spacing:.06em}
.pp-bigdate{font-size:1.25rem;font-weight:600}
.pp-countdown{font-size:0.9375rem;color:var(--ds-ink-2)}
.pp-countdown b{font-size:1.875rem;color:var(--ds-ink);margin-inline-end:6px}
.pp-planhead{display:grid;gap:4px;padding:16px}
.pp-plancard{display:grid;gap:4px;text-align:start;padding:14px 16px}
.pp-plancard__top{display:flex;align-items:center;gap:8px}
.pp-plancard__top .ds-icon{color:var(--ds-brand-ink)}
body.dark .pp-plancard__top .ds-icon{color:var(--ds-brand)}
.pp-plancard__fig{color:var(--ds-ink-2)}
.pp-plancard__fig b{font-size:1.375rem;color:var(--ds-ink)}
.pp-empty{display:grid;gap:10px;padding:16px}
.pp-flownote{display:block}
.pp-flash{animation:pp-flash calc(var(--ds-motion-slow) * 4) var(--ds-motion-ease)}
@keyframes pp-flash{0%,40%{background:var(--ds-brand-soft);box-shadow:0 0 0 4px var(--ds-brand-soft)}100%{background:transparent;box-shadow:none}}
.pp-planhead--compact{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding-block:10px}
.pp-planhead--compact .pp-bigdate{font-size:1rem}
.pp-planhead--compact .pp-countdown b{font-size:1.25rem}
.pp-planhead--compact .pp-muted:last-child{display:none}
/* The mix chosen by the owner (10-11-2026): direction A's header and direction B's week by week view. */
.pp-place{font-size:2.5rem;line-height:1.1;letter-spacing:-.02em;outline:none}
.pp-planhead--compact .pp-place{font-size:1.5rem}
.pp-cal{list-style:none;margin:0;padding:0 0 0 12px;display:grid;gap:8px;border-inline-start:3px solid var(--ds-line-strong)}
.pp-cal__period{display:grid;gap:4px}
.pp-cal__label{font-size:0.8125rem;font-weight:700;color:var(--ds-ink-2)}
.pp-cal__period.is-now .pp-cal__label{color:var(--ds-brand-ink)}
body.dark .pp-cal__period.is-now .pp-cal__label{color:var(--ds-brand)}
.pp-cal__items{display:flex;flex-wrap:wrap;gap:4px}
.pp-cal__task{font-size:0.8125rem;padding:2px 8px;border-radius:999px;background:var(--ds-surface-2);border:1px solid var(--ds-line)}
.pp-cal__task.is-plan{background:var(--ds-brand);color:var(--ds-on-brand);border-color:transparent;font-weight:600}
.pp-cal__gap{font-size:0.8125rem;color:var(--ds-muted);font-style:italic}
.pp-cal__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;max-inline-size:340px}
.pp-cal__day{text-align:center;font-size:0.75rem;padding-block:3px;border-radius:5px;border:1px solid var(--ds-line-strong);color:var(--ds-ink-2)}
.pp-cal__day.is-on{background:var(--ds-brand);color:var(--ds-on-brand);border-color:transparent;font-weight:700}
.pp-kicker .ds-chip{text-transform:none;letter-spacing:0;margin-inline-start:4px}
.pp-cal__behind{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pp-cal__behind>li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;border-radius:12px;border:1px solid var(--ds-line-strong)}
.pp-cal__behind .pp-grow{display:grid;min-inline-size:160px}
.pp-cal__behind .pp-muted{font-size:0.8125rem}
.pp-check--sm{inline-size:32px;block-size:32px}
.pp-proposal>li{flex-wrap:wrap}.pp-proposal .pp-grow{min-inline-size:min(100%,160px)}
.pp-pantryrow .pp-grow{display:grid;flex:1 1 220px;min-inline-size:0}.pp-pantryrow .pp-grow>*{overflow-wrap:anywhere}
.pp-buy{flex:1 1 100%}

/* ===== «Variable · Eléctrico» (design-proposals/personal/rediseno/REDISENO.md, applied on 13-11-2026) =====
   One big thing per screen (a figure or a drawing) and the rest in the background; rounded panels with no border
   instead of boxes inside boxes; labels instead of chips; Unbounded only for titles and figures; the electric blue only
   where it means something (the figure, what is selected, the focus, the main button); cyan for what went well and the
   scarce amber only for warnings, always with a mark and words. High contrast: white with firm edges. */
.pp-main{gap:18px}
.pp-card{gap:12px;padding:18px 20px}
.pp-note{background:none;border:0;padding:4px 0;color:var(--ds-muted)}
.pp-note .ds-icon{color:var(--ds-muted)}
.pp-head{gap:6px}
.pp-head .pp-muted{max-inline-size:60ch}
.pp-figure{font-family:var(--ds-font-display);font-weight:700;font-size:var(--ds-hero);line-height:1.25;margin-block:0;letter-spacing:-.04em;color:var(--ds-brand);font-variant-numeric:tabular-nums}
.pp-figure--sm{font-size:clamp(2.5rem,11vw,4rem)}
.pp-figline{font-size:1.0625rem;color:var(--ds-ink-2);max-inline-size:34ch}
.pp-figline b{color:var(--ds-ink)}
.pp-summary{gap:10px}
.pp-summary__item{border:0;border-radius:var(--ds-radius);padding:12px 14px}
.pp-summary__value{font-family:var(--ds-font-display);font-weight:650;font-size:1.375rem;letter-spacing:-.02em}
body.ds-contrast:not(.dark) .pp-summary__item,body.ds-contrast:not(.dark) .pp-tcard{border:2px solid var(--ds-line-strong)}
.pp-tcard{border:0;background:var(--ds-surface)}
.pp-badge{border-radius:14px}
.pp-ctx{padding:0;border:0;background:none;color:var(--ds-muted)}
.pp-itemchip{padding:0;background:none;color:var(--ds-ink);font-weight:600}
body.dark .pp-itemchip{color:var(--ds-ink)}
.pp-option{border:0;border-radius:var(--ds-radius)}
body.ds-contrast:not(.dark) .pp-option{border:2px solid var(--ds-line-strong)}
.pp-plancard__fig b,.pp-countdown b,.pp-kv dd,.pp-big,.pp-bigdate{font-family:var(--ds-font-display);font-weight:650;letter-spacing:-.02em}
.pp-place{font-family:var(--ds-font-display);font-weight:700;letter-spacing:-.03em}
.pp-kicker{letter-spacing:.04em}
/* States: a mark and a word, never colour alone. */
.pp-good{color:var(--ds-good-text);font-weight:600}
.pp-warn{color:var(--ds-warning-text);font-weight:600}
.pp-bad{color:var(--ds-error-text);font-weight:600}
/* Navigation of the redesign: on phones a bar with four sections and «Menu», which opens a sheet with the rest; from
   900 px a rail with the seven sections and «More» apart, at the end. */
.pp-nav__item--wide,.pp-nav__more{display:none}
.pp-nav__menu.is-here{color:var(--ds-brand-ink);font-weight:600}
body.dark .pp-nav__menu.is-here{color:var(--ds-brand)}
.pp-sheet{position:fixed;z-index:29;inset-inline:0;inset-block-end:calc(58px + env(safe-area-inset-bottom));background:var(--ds-surface);border-start-start-radius:var(--ds-radius-lg);border-start-end-radius:var(--ds-radius-lg);padding:16px;display:grid;gap:12px;box-shadow:var(--ds-shadow)}
.pp-sheet[hidden]{display:none}
body.ds-contrast:not(.dark) .pp-sheet{border:2px solid var(--ds-line-strong)}
.pp-sheet__main{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pp-sheet__main .pp-nav__item{display:grid;border-radius:var(--ds-radius);background:var(--ds-bg);min-block-size:72px;font-size:0.875rem}
.pp-sheet__more{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.pp-sheet__link{display:inline-flex;align-items:center;gap:6px;min-block-size:var(--ds-tap);background:none;border:0;padding:0 4px;font:inherit;font-size:0.875rem;color:var(--ds-ink);cursor:pointer}
.pp-sheet__link[aria-current="page"]{color:var(--ds-brand-ink);font-weight:600}
body.dark .pp-sheet__link[aria-current="page"]{color:var(--ds-brand)}
.pp-hubtabs{align-self:start;justify-self:start}
.pp-hubtabs .ds-seg__item{min-block-size:var(--ds-tap)}
.pp-morelist .pp-option{min-block-size:56px}
@media (min-width:900px){
  .pp-nav__item--wide{display:flex}
  .pp-nav__menu,.pp-sheet{display:none!important}
  .pp-nav__more{display:block;margin-block-start:12px;padding-block-start:12px;border-block-start:1px solid var(--ds-line)}
}
/* The interactive drawings (spacuo-personal-visuals.js): every region is a button; colours from the tokens only; the
   marks (filled dots, triangles, crosses, numbers) carry the meaning too. «No motion» keeps the box lid still. */
.pp-vz{display:block;inline-size:100%;block-size:auto;max-inline-size:560px;overflow:visible}
.pp-vz text{font-family:var(--ds-font)}
.pp-vz-hit{cursor:pointer;outline:none}
.pp-vz-hit:focus-visible .pp-vz-seg{stroke:var(--ds-focus);stroke-width:3}
.pp-vz-label{font-size:12px;fill:var(--ds-ink-2)}
.pp-vz-label--on{fill:var(--ds-on-brand);font-weight:600}
.pp-vz-seg{rx:8px}
.pp-vz-seg.is-0{fill:var(--ds-cat-1)}.pp-vz-seg.is-1{fill:var(--ds-cat-3)}.pp-vz-seg.is-2{fill:var(--ds-cat-2)}.pp-vz-seg.is-3{fill:var(--ds-cat-4)}
.pp-vzview{justify-self:start}
.pp-figure-side{display:grid;gap:16px;align-items:start}
@media (min-width:900px){.pp-figure-side{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px}}
.pp-boxes{display:flex;flex-wrap:wrap;gap:12px}
.pp-boxbtn{display:grid;justify-items:center;gap:2px;background:none;border:0;cursor:pointer;padding:4px;inline-size:172px;text-align:center;font:inherit;font-size:0.8125rem;color:var(--ds-ink);border-radius:var(--ds-radius-sm)}
.pp-boxbtn .pp-vz{max-inline-size:110px}
.pp-jars{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px}
.pp-jarbtn{display:grid;justify-items:center;gap:4px;background:none;border:0;cursor:pointer;padding:4px;text-align:center;font:inherit;font-size:0.875rem;color:var(--ds-ink);border-radius:var(--ds-radius-sm)}
.pp-jarbtn .pp-vz{max-inline-size:110px}
.pp-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}

.pp-linkbtn{border-color:transparent}
.pp-hubtabs{flex-wrap:wrap;border-radius:var(--ds-radius)}
.ds-seg__item[aria-selected="true"] .pp-subtabs__n,.ds-seg__item[aria-pressed="true"] .pp-subtabs__n,.ds-seg__item[aria-current="page"] .pp-subtabs__n{color:inherit}
.pp-monthbar{display:grid;gap:10px}
.pp-mark{display:inline-grid;flex:none}.pp-mark--warn{color:var(--ds-warning-text)}.pp-mark--error{color:var(--ds-error-text)}
.pp-hero--today{gap:2px}
/* The illustrations (REDISENO.md, «Ilustraciones»): one 2 px line with round joins everywhere, flat fills from the
   tokens, the kinds of food tinted from the categories' colours. Doors swing only in the render that opens them
   (.is-opening); «No motion» and the system's reduce motion draw the final state at once. */
.pp-il{max-inline-size:440px;margin-inline:auto}
.pp-il rect,.pp-il polygon,.pp-il circle,.pp-il path{stroke-linejoin:round;stroke-linecap:round}
.pp-il-body{fill:var(--ds-surface-2);stroke:var(--ds-ink-2);stroke-width:2}
.pp-il-door{fill:var(--ds-surface);stroke:var(--ds-ink-2);stroke-width:2;transition:fill var(--ds-fast) var(--ds-ease)}
.pp-il-plinth,.pp-il-handle,.pp-il-dot{fill:var(--ds-ink-2);stroke:none}
.pp-il-screen{fill:var(--ds-ink);stroke:none}
.pp-il-screen-num{font-family:var(--ds-font-display);font-weight:700;font-size:26px;fill:var(--ds-bg)}
.pp-il-num{font-family:var(--ds-font-display);font-weight:700;font-size:26px;fill:var(--ds-ink)}
.pp-il-warn{font-size:12px;font-weight:700;fill:var(--ds-warning-text)}
.pp-il-label{font-size:12px;font-weight:600;fill:var(--ds-ink-2)}
.pp-il-caption{font-size:13px;font-weight:700;fill:var(--ds-ink)}
.pp-il-name{font-size:11px;fill:var(--ds-ink)}
.pp-il-count{font-size:15px;font-weight:700;fill:var(--ds-ink)}
.pp-il-floor{fill:none;stroke:var(--ds-line-strong);stroke-width:2}
.pp-il-wood{fill:var(--ds-line-strong);stroke:none}
.pp-il-cavity{fill:var(--ds-bg);stroke:var(--ds-ink-2);stroke-width:1.5}
.pp-il--fridge .pp-il-cavity{fill:var(--ds-brand-soft)}
.pp-il-shelf{fill:var(--ds-line-strong);stroke:none}
.pp-il-drawer,.pp-il-bin{fill:var(--ds-surface);stroke:var(--ds-ink-2);stroke-width:1.5}
.pp-il-hitbox{fill:transparent;stroke:none;rx:12px}
.pp-il-glyph *{fill:var(--ds-surface);stroke:var(--ds-ink-2);stroke-width:1.6;vector-effect:non-scaling-stroke}
.pp-il-glyph .pp-il-dot{fill:var(--ds-ink-2);stroke:none}
.pp-il-glyph.is-dairy>:first-child{fill:color-mix(in srgb,var(--ds-cat-1) 28%,var(--ds-surface))}
.pp-il-glyph.is-produce>:first-child{fill:color-mix(in srgb,var(--ds-cat-2) 32%,var(--ds-surface))}
.pp-il-glyph.is-meat>:first-child{fill:color-mix(in srgb,var(--ds-cat-4) 28%,var(--ds-surface))}
.pp-il-glyph.is-drinks>:first-child{fill:color-mix(in srgb,var(--ds-cat-3) 26%,var(--ds-surface))}
.pp-il-glyph.is-other>:nth-child(2){fill:color-mix(in srgb,var(--ds-cat-5) 24%,var(--ds-surface))}
.pp-il-badge circle{fill:var(--ds-warning-text);stroke:var(--ds-surface);stroke-width:1.5}
.pp-il-badge path{fill:none;stroke:var(--ds-surface);stroke-width:2.2}
.pp-il-tile{fill:transparent;stroke:none;transition:fill var(--ds-fast) var(--ds-ease)}
.pp-il-tile--more{fill:var(--ds-surface);stroke:var(--ds-line-strong);stroke-width:1.5;stroke-dasharray:4 3}
.pp-vz-hit:hover .pp-il-tile{fill:var(--ds-surface)}
.pp-vz-hit.is-on .pp-il-tile{fill:var(--ds-surface);stroke:var(--ds-brand);stroke-width:2.5}
.pp-vz-hit:focus-visible .pp-il-tile,.pp-vz-hit:focus-visible .pp-il-hitbox{stroke:var(--ds-focus);stroke-width:3}
.pp-vz-hit:focus-visible>.pp-il-body,.pp-vz-hit:focus-visible .pp-il-leaf .pp-il-door{stroke:var(--ds-focus);stroke-width:3.5}
.pp-vz-hit:hover .pp-il-door{fill:var(--ds-brand-soft)}
.pp-il-front{transform-box:fill-box;transform:scaleX(0);opacity:0;animation:pp-il-front calc(var(--ds-motion-slow) * 1.4) var(--ds-motion-ease)}
.pp-il-front--start{transform-origin:0 50%}.pp-il-front--end{transform-origin:100% 50%}
@keyframes pp-il-front{from{transform:none;opacity:1}85%{opacity:1}to{transform:scaleX(0);opacity:0}}
.is-opening .pp-il-leaf{transform-box:fill-box;transform-origin:100% 50%;animation:pp-il-leaf calc(var(--ds-motion-slow) * 1.4) var(--ds-motion-ease)}
.is-opening .pp-il-leaf--end{transform-origin:0 50%}
@keyframes pp-il-leaf{from{transform:scaleX(0)}}
.is-opening .pp-il-inside{animation:pp-il-in calc(var(--ds-motion-slow) * 1.4) var(--ds-motion-ease)}
@keyframes pp-il-in{from{opacity:0}}
.pp-il-chip{inline-size:22px;block-size:22px;flex:none;vertical-align:-5px;margin:0;max-inline-size:none}
@media (forced-colors:active){.pp-il-body,.pp-il-door,.pp-il-cavity,.pp-il-drawer,.pp-il-bin,.pp-il-glyph *{stroke:CanvasText}.pp-il-badge circle,.pp-il-screen{fill:Highlight}.pp-vz-hit.is-on .pp-il-tile{stroke:Highlight}}
/* My things: the floor plan (walls, doors with their swing, corridors), a room seen close, cardboard boxes; the shopping
   list as paper and a bag. */
.pp-il-floorplan{fill:var(--ds-surface);stroke:none;transition:fill var(--ds-fast) var(--ds-ease)}
.pp-il-floorplan.is-loose{fill:var(--ds-surface-2)}
.pp-vz-hit:hover .pp-il-floorplan,.pp-il-floorplan.is-on{fill:var(--ds-brand-soft)}
.pp-vz-hit:focus-visible .pp-il-floorplan{stroke:var(--ds-focus);stroke-width:4}
.pp-il-corridor{fill:var(--ds-bg);stroke:none}
.pp-il-wall{fill:none;stroke:var(--ds-ink-2);stroke-width:6;stroke-linecap:square}
.pp-il-wall--in{stroke-width:4}
.pp-il-doorleaf{fill:none;stroke:var(--ds-ink-2);stroke-width:2}
.pp-il-swing{fill:none;stroke:var(--ds-line-strong);stroke-width:1.5;stroke-dasharray:3 3}
.is-zooming .pp-il-zoom{transform-box:fill-box;transform-origin:50% 50%;animation:pp-il-zoom calc(var(--ds-motion-slow) * 1.4) var(--ds-motion-ease)}
@keyframes pp-il-zoom{from{transform:scale(.6);opacity:0}}
.pp-il-card{fill:var(--ds-surface);stroke:var(--ds-ink-2);stroke-width:2}
.pp-il-card--side{fill:var(--ds-surface-2)}
.pp-il-card--top{fill:color-mix(in srgb,var(--ds-surface) 60%,var(--ds-surface-2))}
.pp-il-tape{fill:var(--ds-brand-soft);stroke:var(--ds-brand);stroke-width:1}
.pp-il-hole{fill:var(--ds-ink-2);stroke:none}
.pp-il-sticker{fill:var(--ds-bg);stroke:var(--ds-line-strong);stroke-width:1}
.is-opening .pp-il-flap{transform-box:fill-box;transform-origin:50% 100%;animation:pp-il-flap calc(var(--ds-motion-slow) * 1.4) var(--ds-motion-ease)}
@keyframes pp-il-flap{from{transform:scaleY(0)}}
.pp-boxbtn .pp-il{max-inline-size:164px}
.pp-boxbtn[aria-expanded="true"] .pp-il-card{stroke:var(--ds-brand)}
.pp-il-paper{fill:var(--ds-surface);stroke:var(--ds-ink-2);stroke-width:2}
.pp-il--shop .pp-il-hole{fill:var(--ds-bg);stroke:var(--ds-ink-2);stroke-width:1.5}
.pp-il-box{fill:var(--ds-surface);stroke:var(--ds-ink-2);stroke-width:1.5}
.pp-il-name--list{font-size:13px}
.pp-il-rule{fill:none;stroke:var(--ds-line);stroke-width:1}
.pp-il-handlebar{fill:none;stroke:var(--ds-ink-2);stroke-width:4}
.pp-il-bag{fill:var(--ds-surface)}
.pp-il-bag--line{fill:none;stroke:var(--ds-ink-2);stroke-width:2}
.pp-il-level{fill:var(--ds-brand-soft)}
.pp-il-glyph[class*="is-t-"]>:first-child{fill:color-mix(in srgb,var(--ds-cat-1) 18%,var(--ds-surface))}
.pp-il-glyph.is-bread>:first-child{fill:color-mix(in srgb,var(--ds-cat-5) 22%,var(--ds-surface))}
.pp-il-glyph.is-frozen *{fill:none}
.pp-il-glyph.is-cleaning>:first-child{fill:color-mix(in srgb,var(--ds-cat-2) 24%,var(--ds-surface))}
@media (forced-colors:active){.pp-il-wall,.pp-il-doorleaf,.pp-il-card,.pp-il-paper,.pp-il-bag--line{stroke:CanvasText}.pp-il-floorplan.is-on,.pp-il-level{fill:Highlight}}
/* The rest of the app: the day's dial, plans as objects, the wall calendar, the task board, envelopes, jars. */
.pp-il-dial{fill:var(--ds-surface);stroke:var(--ds-ink-2);stroke-width:2}
.pp-il-passed{fill:none;stroke:var(--ds-brand-soft);stroke-width:10}
.pp-il-hour{fill:none;stroke:var(--ds-ink-2);stroke-width:1.5}
.pp-il-hand{fill:none;stroke:var(--ds-brand);stroke-width:3}
.pp-il-now{fill:var(--ds-brand);stroke:var(--ds-surface);stroke-width:2}
.pp-il-clock{font-family:var(--ds-font-display);font-weight:700;font-size:28px;fill:var(--ds-ink)}
.pp-il-event{fill:var(--ds-surface);stroke:var(--ds-ink-2);stroke-width:2}
.pp-vz-hit.is-on .pp-il-event,.pp-vz-hit:focus-visible .pp-il-event{stroke:var(--ds-focus);stroke-width:3}
.pp-il-note{fill:var(--ds-surface);stroke:var(--ds-line-strong);stroke-width:1.5}
.pp-il-note.is-done{fill:var(--ds-surface-2)}
.pp-vz-hit.is-on .pp-il-note,.pp-vz-hit:focus-visible .pp-il-note{stroke:var(--ds-focus);stroke-width:3}
.pp-il-name.is-done{text-decoration:line-through;fill:var(--ds-muted)}
.pp-il-tick{fill:none;stroke:var(--ds-good-text);stroke-width:2.6}
.pp-il-case{fill:color-mix(in srgb,var(--ds-cat-1) 22%,var(--ds-surface));stroke:var(--ds-ink-2);stroke-width:2}
.pp-il-cloth{stroke:var(--ds-ink-2);stroke-width:1.2}
.pp-il-cloth.is-0{fill:color-mix(in srgb,var(--ds-cat-2) 35%,var(--ds-surface))}
.pp-il-cloth.is-1{fill:color-mix(in srgb,var(--ds-cat-4) 30%,var(--ds-surface))}
.pp-il-cloth.is-2{fill:color-mix(in srgb,var(--ds-cat-3) 25%,var(--ds-surface))}
.pp-il-string{fill:none;stroke:var(--ds-ink-2);stroke-width:1.5}
.pp-il-tag{fill:var(--ds-surface);stroke:var(--ds-ink-2);stroke-width:1.5}
.pp-il-pig{fill:var(--ds-surface)}
.pp-il-pig--line{fill:none;stroke:var(--ds-ink-2);stroke-width:2}
.pp-il-coin{fill:var(--ds-surface-2);stroke:var(--ds-ink-2);stroke-width:2}
.pp-il-num--sm{font-size:18px}
.pp-il-band{fill:var(--ds-brand)}
.pp-il-bandtext{font-size:14px;font-weight:700;fill:var(--ds-on-brand)}
.pp-il-ring{fill:none;stroke:var(--ds-ink-2);stroke-width:3}
.pp-il-today{fill:var(--ds-brand)}
.pp-il-daynum{font-family:var(--ds-font-display);font-size:15px;font-weight:700;fill:var(--ds-ink)}
.pp-il-daynum--sm{font-family:var(--ds-font);font-size:12px}
.pp-il-daynum.is-today{fill:var(--ds-on-brand)}
.pp-il-chipbox{fill:var(--ds-surface-2);stroke:none}
.pp-il-chipbox.is-plan{fill:var(--ds-brand-soft)}
.pp-il-chipbox.is-charge{fill:var(--ds-surface);stroke:var(--ds-line-strong);stroke-width:1;stroke-dasharray:3 2}
.pp-il-cell{fill:var(--ds-surface);stroke:var(--ds-line);stroke-width:1}
.pp-il-cell.is-full{stroke:var(--ds-line-strong);stroke-width:1.5}
.pp-vz-hit.is-on .pp-il-cell,.pp-vz-hit:focus-visible .pp-il-cell{fill:var(--ds-brand-soft);stroke:var(--ds-focus);stroke-width:2.5}
.pp-il-pin{fill:var(--ds-ink-2)}
.pp-il-pin.is-plan{fill:var(--ds-brand)}
.pp-il-pin.is-charge{fill:none;stroke:var(--ds-ink-2);stroke-width:1.5}
.pp-il-amount{font-weight:700}
.pp-il-amount.is-long{font-size:9.5px}
.is-flipping{transform-box:fill-box;transform-origin:50% 0;animation:pp-il-flip calc(var(--ds-motion-slow) * 1.4) var(--ds-motion-ease)}
@keyframes pp-il-flip{from{transform:scaleY(.15);opacity:.2}}
.pp-il-cork{fill:color-mix(in srgb,var(--ds-cat-5) 16%,var(--ds-surface-2));stroke:var(--ds-ink-2);stroke-width:5}
.pp-il-postit{stroke:var(--ds-ink-2);stroke-width:1.2;fill:var(--ds-surface)}
.pp-il-postit.is-today{fill:var(--ds-brand-soft)}
.pp-il-postit.is-done{fill:color-mix(in srgb,var(--ds-accent) 18%,var(--ds-surface))}
.pp-vz-hit.is-on .pp-il-postit,.pp-vz-hit:focus-visible .pp-il-postit{stroke:var(--ds-focus);stroke-width:3}
.pp-il-pinhead{fill:var(--ds-ink-2)}
.pp-il-name--note{font-size:12px}
.pp-il-stick.is-pinned{animation:pp-il-pin calc(var(--ds-motion-slow) * 1.4) var(--ds-motion-ease)}
@keyframes pp-il-pin{from{opacity:0}}
.pp-il-bill{fill:color-mix(in srgb,var(--ds-accent) 26%,var(--ds-surface));stroke:var(--ds-ink-2);stroke-width:1.5}
.pp-il-env{fill:var(--ds-surface);stroke:var(--ds-ink-2);stroke-width:2}
.pp-il-fold{fill:none;stroke:var(--ds-line-strong);stroke-width:1.5}
.pp-il-badge--error circle{fill:var(--ds-error-text)}
.pp-il-bad{font-size:12px;font-weight:700;fill:var(--ds-error-text)}
.pp-il-caption--sm{font-size:12px}
.pp-il-glass{fill:var(--ds-surface)}
.pp-il-glass--line{fill:none;stroke:var(--ds-ink-2);stroke-width:2}
.pp-il-liquid{fill:var(--ds-brand-soft);stroke:var(--ds-brand);stroke-width:1.5}
.pp-il-lid{fill:var(--ds-ink-2)}
.pp-il-shine{fill:none;stroke:var(--ds-line);stroke-width:3}
.pp-jarbtn[aria-pressed="true"] .pp-il-glass--line{stroke:var(--ds-brand);stroke-width:3}
.pp-objects{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.pp-objbtn{display:grid;justify-items:center;gap:2px;inline-size:100%;background:var(--ds-surface);border:0;border-radius:var(--ds-radius);padding:12px 10px;cursor:pointer;font:inherit;font-size:0.8125rem;color:var(--ds-ink);text-align:center}
.pp-objbtn b{font-size:0.9375rem}
.pp-objbtn .pp-il{max-inline-size:170px}
.pp-objbtn:hover{background:var(--ds-brand-soft)}
.pp-envelopes{display:grid;gap:12px}
@media (forced-colors:active){.pp-il-dial,.pp-il-case,.pp-il-postit,.pp-il-env,.pp-il-glass--line{stroke:CanvasText}.pp-il-band,.pp-il-today,.pp-il-liquid,.pp-il-hand{fill:Highlight;stroke:Highlight}}
.pp-il-pill{fill:var(--ds-surface);stroke:var(--ds-line-strong);stroke-width:1.5}
.pp-il--wall{max-inline-size:400px}
@media (min-width:900px){.pp-legend{grid-template-columns:1fr 1fr;column-gap:28px}}
/* The installable app: the notice of a new version, and the install steps. */
.pp-update{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--ds-brand-soft);color:var(--ds-ink);border-radius:var(--ds-radius);padding:12px 16px;margin-block-end:16px}
.pp-steps{margin:12px 0 0;padding-inline-start:22px;display:grid;gap:8px}
.pp-iosnote{flex-wrap:wrap}
/* The legal texts: drafts, with what the owner must still give marked (not by colour alone: the brackets say it). */
.pp-legal details{border-block-start:1px solid var(--ds-line);padding-block:10px}
.pp-legal summary{cursor:pointer;font-weight:600;min-block-size:var(--ds-tap);display:flex;align-items:center;gap:10px;list-style:none}
.pp-legal summary::-webkit-details-marker{display:none}
.pp-legal summary::before{content:"+";inline-size:1em;text-align:center;font-size:1.2em;color:var(--ds-brand-ink)}
.pp-legal details[open]>summary::before{content:"−"}
.pp-legal p{max-inline-size:70ch}
.pp-legal__draft{display:flex;gap:8px;align-items:flex-start;color:var(--ds-warning-text);font-weight:600}
.pp-pending{background:var(--ds-brand-soft);color:var(--ds-ink);border-radius:4px;padding:0 3px}
@media (min-width:1100px){.pp-legal{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-items:start}.pp-legal>h2,.pp-legal>.pp-legal__draft{grid-column:1/-1}}
/* Editing and deleting a plan (correcciones de la beta): the edit button in the plan's header, and the delete button
   apart, below a line, in the error colour (with its icon, never colour alone). */
.pp-planhead__edit{margin:4px 0 0}
.pp-danger{border-block-start:1px solid var(--ds-line);margin-block-start:8px;padding-block-start:12px}
.pp-btn-danger{color:var(--ds-error-text);border-color:currentColor}
/* Large text (REVISION-SIMULADA.md, B5): the sizes are in rem, so a browser's text size setting enlarges them. The phone
   bar keeps its five buttons whole: equal columns that never grow past the screen, labels that grow with the text but
   never past what fits a fifth of the screen. Long words in titles break instead of pushing the page sideways. */
@media (max-width:899px){
  .pp-nav{grid-template-columns:repeat(5,minmax(0,1fr))}
  .pp-nav__item{min-inline-size:0}
  .pp-nav__item>span{font-size:min(1em,3.6vw);max-inline-size:100%;overflow-wrap:anywhere;line-height:1.15}
}
h1,h2,h3,.pp-place,.pp-figline,.pp-option b,.pp-objbtn b,.pp-jarbtn span,.pp-summary__value{overflow-wrap:anywhere}
/* Columns of cards and objects become one when the text is large; nothing inside a grid or a row pushes it wider than
   the screen; the big figures of a plan's header grow with the text only up to what a phone can hold. */
.pp-cols>*,.pp-figure-side>*,.pp-money-tab>*,.pp-grid2>*,.pp-item__nums>*{min-inline-size:0}
.pp-summary{grid-template-columns:repeat(auto-fit,minmax(min(100%,9.375rem),1fr))}
.pp-objects{grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr))}
.pp-jars{grid-template-columns:repeat(auto-fill,minmax(min(100%,8rem),1fr))}
.pp-item__nums .pp-money{flex-wrap:wrap}
.pp-money input{inline-size:6em}
.pp-money--sm input{inline-size:5.5em}
.pp-setrow .ds-seg{min-inline-size:0;flex-wrap:wrap;border-radius:var(--ds-radius)}
.pp-setrow>.pp-grow{min-inline-size:0}
.pp-place{font-size:min(2.5rem,12vw)}
.pp-planhead--compact .pp-place{font-size:min(1.5rem,9vw)}
.pp-bigdate{font-size:min(1.25rem,7vw)}
.pp-countdown b{font-size:min(1.875rem,10vw)}
.pp-tl__when{min-inline-size:min(4.75rem,22vw)}
.pp-main>*{min-inline-size:0}
.pp-kv{grid-template-columns:repeat(auto-fit,minmax(min(100%,6.5rem),1fr))}
/* A row of text and a button: the button moves under the text when they no longer fit side by side. */
.pp-row,.pp-tl__item{flex-wrap:wrap}
.pp-row>.pp-grow,.pp-tl__item>.pp-grow{flex:1 1 8rem}
.pp-row>.ds-btn,.pp-tl__item>.ds-btn{flex-shrink:0}
.pp-track__label{font-size:min(.75rem,3.2vw)}
.pp-quick textarea,.pp-card textarea{field-sizing:content;min-block-size:3lh}
.ds-btn{max-inline-size:100%;text-align:center}
.pp-monthbar>*,.pp-legend li>*{min-inline-size:0;overflow-wrap:anywhere}
.pp-card .ds-seg{flex-wrap:wrap;border-radius:var(--ds-radius)}
.pp-card .ds-seg__item{white-space:normal}
.pp-field{min-inline-size:0}
.pp-field>input,.pp-field>select,.pp-field>textarea{min-inline-size:0;max-inline-size:100%;box-sizing:border-box}
.pp-vzview,.pp-row.pp-wrap{min-inline-size:0;max-inline-size:100%}
.pp-bullets li,.pp-card p{overflow-wrap:anywhere}
.pp-field--wide{grid-column:1/-1}
/* «Jot down» and editing a task (correcciones de la beta): the form on top of the screen, the day as chips (radio
   buttons), a task's title as the button that opens it, and the box of a task on Today's dial as a button of its own. */
/* The quick form is a sheet over the screen: at the bottom on a phone (over the bar, scrolling inside if it is long),
   beside the content on a computer; the screen under it keeps its place. */
.pp-quickdlg{position:fixed;z-index:40;inset-inline:0;inset-block:auto 0;margin:0;padding:0;border:0;background:none;color:inherit;inline-size:auto;max-inline-size:none;max-block-size:88dvh;overflow:auto;box-shadow:var(--ds-shadow)}
.pp-quickform{border:2px solid var(--ds-brand);border-end-start-radius:0;border-end-end-radius:0;padding-block-end:calc(16px + env(safe-area-inset-bottom))}
@media (min-width:900px){.pp-quickdlg{inset-inline:auto 24px;inset-block:84px auto;inline-size:min(440px,40vw);max-block-size:calc(100vh - 108px);border-radius:var(--ds-radius-lg)}.pp-quickform{border-radius:var(--ds-radius-lg)}}
.pp-place{line-height:1.2}
.pp-when{border:0;margin:0;padding:0;display:grid;gap:6px}
.pp-when legend{font-size:0.875rem;color:var(--ds-ink-2);padding:0;margin-block-end:4px}
.pp-chipradio{display:inline-flex;align-items:center;gap:6px;min-block-size:var(--ds-tap);padding-inline:12px;border-radius:var(--ds-pill);border:1.5px solid var(--ds-line-strong);background:var(--ds-surface);cursor:pointer}
.pp-chipradio:has(input:checked){border-color:var(--ds-brand);background:var(--ds-brand-soft);color:var(--ds-brand-ink);font-weight:600}
.pp-chipradio input{accent-color:var(--ds-brand);margin:0}
.pp-titlebtn{display:block;min-block-size:24px;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer;text-decoration:underline;text-decoration-color:var(--ds-line-strong);text-underline-offset:3px}
.pp-titlebtn:hover{text-decoration-color:currentColor}
.pp-il-hitbox{fill:transparent}
.pp-dayhead .ds-btn--primary{margin-inline-start:auto}
.pp-flowother{display:grid;gap:10px;justify-items:start}
.pp-flowother .ds-btn{white-space:normal;text-align:start;justify-content:flex-start}
.pp-search{align-items:center}.pp-search .pp-field{gap:0}
/* On a phone the notices appear above the bar, never over its buttons (a tap right after saving went to the notice). */
@media (max-width:899px){.pp-body--nav ~ .ds-toasts{inset-block-end:calc(74px + env(safe-area-inset-bottom))}}