/* ui.css — the one stylesheet of every page of ~/myai, ~/inversiones, ~/emptylegs and /instagram/.
   Pedro, 2026-10-22: *"pasar la web a una tecnologia mas escalable … los componentes se reutilizan …
   una zona unica de notificaciones, un menu unico, footer, graficas, tablas sorteables y filtros"*.
   Catalogue and rules: docs/agents/ui.md. Visual reference: /ui/.

   Everything is prefixed: tokens are --ui-*, classes are .ui-*. A page that still carries its own
   CSS keeps working beside it; nothing here styles a bare element except inside .ui-page. */

:root{
 --ui-bg:#f6f5f1; --ui-surface:#fff; --ui-surface-2:#efede7; --ui-line:#dcd9cf; --ui-line-2:#c4c0b4;
 --ui-ink:#1d1d1b; --ui-ink-2:#59584f;
 --ui-accent:#2f5fa8; --ui-on-accent:#fff;
 --ui-ok:#276942; --ui-warn:#8a5a10; --ui-danger:#b3341f; --ui-info:#2f5fa8;
 /* 8 categorical hues: tags, chart series. Same order in both themes. */
 --ui-c1:#2f5fa8; --ui-c2:#276942; --ui-c3:#8a5a10; --ui-c4:#6f3fa8;
 --ui-c5:#b3341f; --ui-c6:#1f6f75; --ui-c7:#8a3f6b; --ui-c8:#4b6b8a;
 /* item statuses (TODO.md vocabulary) */
 --ui-st-open:var(--ui-ink-2); --ui-st-project:var(--ui-warn); --ui-st-resolved:var(--ui-ok);
 --ui-st-superseded:var(--ui-ink-2); --ui-st-vigilando:var(--ui-c4);
 --ui-font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
 --ui-prose:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
 --ui-mono:ui-monospace,Menlo,Consolas,monospace;
 --ui-fs-xs:12px; --ui-fs-sm:13px; --ui-fs:14px; --ui-fs-md:16px; --ui-fs-lg:20px; --ui-fs-xl:26px;
 --ui-1:4px; --ui-2:8px; --ui-3:12px; --ui-4:16px; --ui-5:24px; --ui-6:32px;
 --ui-r1:6px; --ui-r2:10px; --ui-r3:14px;
 --ui-shadow:0 14px 34px -12px rgba(0,0,0,.28); --ui-scrim:rgba(0,0,0,.4);
 --ui-max:1240px; --ui-bar-h:48px; --ui-tab-h:58px;
 color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --ui-bg:#141416; --ui-surface:#1d1d21; --ui-surface-2:#2a2a30; --ui-line:#34343b; --ui-line-2:#4a4a52;
 --ui-ink:#ecebe6; --ui-ink-2:#a3a198; --ui-accent:#7aa3e6; --ui-on-accent:#141416;
 --ui-ok:#6cc793; --ui-warn:#e3a94a; --ui-danger:#ef7a6b; --ui-info:#7aa3e6;
 --ui-c1:#7aa3e6; --ui-c2:#6cc793; --ui-c3:#e3a94a; --ui-c4:#b48ae6;
 --ui-c5:#ef7a6b; --ui-c6:#5cc2c8; --ui-c7:#e08bbd; --ui-c8:#8fb0d0;
 --ui-shadow:0 14px 34px -12px rgba(0,0,0,.7);}}
:root[data-theme="dark"]{
 --ui-bg:#141416; --ui-surface:#1d1d21; --ui-surface-2:#2a2a30; --ui-line:#34343b; --ui-line-2:#4a4a52;
 --ui-ink:#ecebe6; --ui-ink-2:#a3a198; --ui-accent:#7aa3e6; --ui-on-accent:#141416;
 --ui-ok:#6cc793; --ui-warn:#e3a94a; --ui-danger:#ef7a6b; --ui-info:#7aa3e6;
 --ui-c1:#7aa3e6; --ui-c2:#6cc793; --ui-c3:#e3a94a; --ui-c4:#b48ae6;
 --ui-c5:#ef7a6b; --ui-c6:#5cc2c8; --ui-c7:#e08bbd; --ui-c8:#8fb0d0;
 --ui-shadow:0 14px 34px -12px rgba(0,0,0,.7);}
:root[data-theme="light"]{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark}

/* ---------- page ---------- */
.ui-page{margin:0;background:var(--ui-bg);color:var(--ui-ink);font:var(--ui-fs)/1.45 var(--ui-font);
 -webkit-text-size-adjust:100%}
.ui-page *,.ui-page *::before,.ui-page *::after{box-sizing:border-box}
:where(.ui-page) a{color:var(--ui-accent)}   /* specificity 0: a card that is a link keeps its own colour */
.ui-main{max-width:var(--ui-max);margin:0 auto;padding:var(--ui-4) var(--ui-4) var(--ui-6)}
.ui-main.narrow{max-width:880px}
.ui-h1{font-size:var(--ui-fs-xl);line-height:1.2;margin:var(--ui-2) 0 var(--ui-1);font-weight:700;letter-spacing:-.01em}
.ui-h2{font-size:var(--ui-fs-md);margin:var(--ui-5) 0 var(--ui-2);font-weight:650}
.ui-lead{color:var(--ui-ink-2);font-size:var(--ui-fs-sm);margin:0 0 var(--ui-4);max-width:70ch}
.ui-prose{font-family:var(--ui-prose);font-size:var(--ui-fs-md);line-height:1.55;max-width:72ch}
.ui-num{font-family:var(--ui-mono);font-variant-numeric:tabular-nums}
.ui-muted{color:var(--ui-ink-2)}
.ui-row{display:flex;flex-wrap:wrap;gap:var(--ui-2);align-items:center}
.ui-grow{flex:1 1 auto}
.ui-grid{display:grid;gap:var(--ui-3);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.ui-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:where(.ui-page) :focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px;border-radius:4px}

/* ---------- surfaces ---------- */
.ui-card{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r2);padding:var(--ui-3) var(--ui-4)}
.ui-card.tight{padding:var(--ui-2) var(--ui-3)}
.ui-card.new{background:color-mix(in srgb,var(--ui-accent) 7%,var(--ui-surface));border-color:color-mix(in srgb,var(--ui-accent) 30%,var(--ui-line))}
a.ui-card{display:block;color:inherit;text-decoration:none}
a.ui-card:hover{border-color:var(--ui-line-2)}
.ui-day{font-size:var(--ui-fs-xs);font-weight:650;color:var(--ui-ink-2);text-transform:uppercase;letter-spacing:.05em;
 margin:var(--ui-5) 0 var(--ui-2)}
.ui-empty{color:var(--ui-ink-2);text-align:center;padding:var(--ui-6) var(--ui-4);border:1px dashed var(--ui-line-2);
 border-radius:var(--ui-r2)}
.ui-note{font-size:var(--ui-fs-sm);border-radius:var(--ui-r1);padding:var(--ui-2) var(--ui-3);
 background:color-mix(in srgb,var(--ui-info) 10%,var(--ui-surface));border:1px solid color-mix(in srgb,var(--ui-info) 30%,transparent)}
.ui-note.warn{background:color-mix(in srgb,var(--ui-warn) 12%,var(--ui-surface));border-color:color-mix(in srgb,var(--ui-warn) 35%,transparent)}
.ui-note.danger{background:color-mix(in srgb,var(--ui-danger) 12%,var(--ui-surface));border-color:color-mix(in srgb,var(--ui-danger) 35%,transparent)}
.ui-kpis{display:grid;gap:var(--ui-2);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin:0 0 var(--ui-4)}
.ui-kpi{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r2);padding:var(--ui-2) var(--ui-3)}
.ui-kpi b{display:block;font:600 var(--ui-fs-lg)/1.2 var(--ui-mono);font-variant-numeric:tabular-nums}
.ui-kpi span{font-size:var(--ui-fs-xs);color:var(--ui-ink-2)}

/* ---------- controls ---------- */
.ui-btn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 var(--ui-3);border-radius:var(--ui-r1);
 border:1px solid var(--ui-line-2);background:var(--ui-surface);color:var(--ui-ink);font:500 var(--ui-fs-sm)/1 var(--ui-font);
 cursor:pointer;text-decoration:none;white-space:nowrap}
.ui-btn:hover{border-color:var(--ui-ink-2)}
.ui-btn.primary{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-on-accent)}
.ui-btn.ghost{border-color:transparent;background:transparent}
.ui-btn.ghost:hover{background:var(--ui-surface-2)}
.ui-btn[disabled]{opacity:.5;cursor:default}
.ui-btn svg{width:16px;height:16px}
.ui-link{background:none;border:0;padding:0;font:inherit;color:var(--ui-accent);cursor:pointer;text-decoration:none}
.ui-link:hover{text-decoration:underline}
.ui-input{min-height:34px;border:1px solid var(--ui-line-2);background:var(--ui-surface);color:var(--ui-ink);
 border-radius:var(--ui-r1);padding:0 var(--ui-3);font:var(--ui-fs-sm) var(--ui-font)}
.ui-input[type=search]{flex:1 1 200px;min-width:150px}
.ui-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ui-chip{display:inline-flex;align-items:center;gap:5px;min-height:30px;border:1px solid var(--ui-line);background:var(--ui-surface);
 color:var(--ui-ink);border-radius:999px;padding:0 11px;font:var(--ui-fs-sm) var(--ui-font);cursor:pointer;text-decoration:none}
.ui-chip:hover{border-color:var(--ui-line-2)}
.ui-chip[aria-pressed="true"]{background:var(--ui-ink);border-color:var(--ui-ink);color:var(--ui-bg)}
.ui-chip .n{font-variant-numeric:tabular-nums;opacity:.7}
.ui-tag{display:inline-block;font:600 11.5px/1.5 var(--ui-font);border-radius:999px;padding:0 8px;white-space:nowrap;
 color:var(--ui-tc,var(--ui-ink-2));background:color-mix(in srgb,var(--ui-tc,var(--ui-ink-2)) 14%,transparent)}
.ui-tag[data-c="1"]{--ui-tc:var(--ui-c1)}.ui-tag[data-c="2"]{--ui-tc:var(--ui-c2)}.ui-tag[data-c="3"]{--ui-tc:var(--ui-c3)}
.ui-tag[data-c="4"]{--ui-tc:var(--ui-c4)}.ui-tag[data-c="5"]{--ui-tc:var(--ui-c5)}.ui-tag[data-c="6"]{--ui-tc:var(--ui-c6)}
.ui-tag[data-c="7"]{--ui-tc:var(--ui-c7)}.ui-tag[data-c="8"]{--ui-tc:var(--ui-c8)}
/* An open card is white when new and turns red with age (Pedro, 2026-10-23). --edad (0..1) is set on
   the element from `e`, computed once in build_group_map.py (edad_abierta: full red at 30 days). */
[data-st="open"],.s-open,.st-open,.t-open,.pill.open{--ui-st-open:color-mix(in srgb,var(--ui-danger) calc(var(--edad,0) * 100%),var(--ui-ink-2))}
.ui-tag[data-st="open"]{--ui-tc:var(--ui-st-open)}.ui-tag[data-st="project"]{--ui-tc:var(--ui-st-project)}
.ui-tag[data-st="resolved"]{--ui-tc:var(--ui-st-resolved)}.ui-tag[data-st="superseded"]{--ui-tc:var(--ui-st-superseded)}
.ui-tag[data-st="vigilando"]{--ui-tc:var(--ui-st-vigilando)}
.ui-tag[data-t="ok"]{--ui-tc:var(--ui-ok)}.ui-tag[data-t="warn"]{--ui-tc:var(--ui-warn)}.ui-tag[data-t="danger"]{--ui-tc:var(--ui-danger)}
.ui-toolbar{display:flex;flex-wrap:wrap;gap:var(--ui-2);align-items:center;margin:0 0 var(--ui-3)}
.ui-toolbar .ui-status{margin-left:auto;font-size:var(--ui-fs-xs);color:var(--ui-ink-2)}
details.ui-more>summary{cursor:pointer;color:var(--ui-ink-2);font-size:var(--ui-fs-sm)}
details.ui-more pre{white-space:pre-wrap;word-break:break-word;margin:6px 0 0;font:12px/1.45 var(--ui-mono);
 background:var(--ui-surface-2);padding:var(--ui-2);border-radius:var(--ui-r1);max-height:360px;overflow:auto}

/* ---------- table ---------- */
.ui-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ui-line);border-radius:var(--ui-r2);
 background:var(--ui-surface)}
.ui-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--ui-fs-sm)}
.ui-table th,.ui-table td{padding:7px 10px;border-bottom:1px solid var(--ui-line);text-align:left;vertical-align:top}
.ui-table tbody tr:last-child td{border-bottom:0}
.ui-table thead th{position:sticky;top:0;z-index:1;background:var(--ui-surface-2);font-weight:600;font-size:var(--ui-fs-xs);
 color:var(--ui-ink-2);white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.ui-table th.num,.ui-table td.num{text-align:right;font-family:var(--ui-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-table th[data-sortable]{cursor:pointer;user-select:none}
.ui-table th[data-sortable]:hover{color:var(--ui-ink)}
.ui-table th[aria-sort]::after{content:"";display:inline-block;margin-left:4px;border:4px solid transparent;vertical-align:1px;opacity:.25;border-top-color:currentColor}
.ui-table th[aria-sort="ascending"]::after{opacity:1;border-top-color:transparent;border-bottom-color:currentColor;vertical-align:4px}
.ui-table th[aria-sort="descending"]::after{opacity:1}
.ui-table tbody tr:hover td{background:color-mix(in srgb,var(--ui-accent) 5%,transparent)}
.ui-table td:first-child,.ui-table th:first-child{position:sticky;left:0;background:inherit}
.ui-table thead th:first-child{background:var(--ui-surface-2);z-index:2}   /* the corner: header colour, above both stickies */
.ui-table tbody td:first-child{background:var(--ui-surface)}
.ui-table .ui-none td{text-align:center;color:var(--ui-ink-2);padding:var(--ui-5)}
.ui-tablefoot{font-size:var(--ui-fs-xs);color:var(--ui-ink-2);margin:6px 2px 0}

/* ---------- chart ---------- */
.ui-chart{display:block;width:100%;height:auto;overflow:visible;font:11px var(--ui-font);color:var(--ui-ink-2)}
.ui-chart .ax{stroke:var(--ui-line);stroke-width:1}
.ui-chart .lbl{fill:var(--ui-ink-2)}
.ui-chart .bar{fill:var(--ui-c1)} .ui-chart .bar:hover{opacity:.8}
.ui-chart .ln{fill:none;stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}
.ui-spark{display:inline-block;vertical-align:middle;color:var(--ui-c1)}

/* ---------- shell: top bar ---------- */
.ui-shell{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--ui-bg) 92%,transparent);
 -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--ui-line);
 font:var(--ui-fs-sm)/1.3 var(--ui-font);color:var(--ui-ink)}
.ui-shell *{box-sizing:border-box}
.ui-shell a{text-decoration:none}
.ui-bar{display:flex;align-items:center;gap:var(--ui-2);height:var(--ui-bar-h);max-width:var(--ui-max);margin:0 auto;padding:0 var(--ui-4)}
.ui-home{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ui-ink);margin-right:var(--ui-3);white-space:nowrap}
.ui-home i{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--ui-ink);color:var(--ui-bg);
 font:700 12px/1 var(--ui-font);font-style:normal}
.ui-secs{display:flex;gap:2px;align-items:center;min-width:0}
.ui-sec{position:relative}
.ui-sec>a{display:flex;align-items:center;height:32px;padding:0 10px;border-radius:8px;color:var(--ui-ink-2);font-weight:550}
.ui-sec>a:hover{color:var(--ui-ink);background:var(--ui-surface-2)}
.ui-sec.on>a{color:var(--ui-ink);background:var(--ui-surface-2)}
.ui-tools{margin-left:auto;display:flex;align-items:center;gap:4px}
.ui-icon{display:inline-grid;place-items:center;position:relative;width:36px;height:36px;border-radius:9px;border:0;background:transparent;
 color:var(--ui-ink-2);cursor:pointer;padding:0}
.ui-icon:hover{background:var(--ui-surface-2);color:var(--ui-ink)}
.ui-icon svg{width:19px;height:19px}
.ui-badge{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--ui-danger);
 color:#fff;font:700 10.5px/17px var(--ui-font);text-align:center}
.ui-badge.busy{background:var(--ui-accent)}
.ui-search-btn{display:flex;align-items:center;gap:8px;height:32px;min-width:210px;padding:0 10px;border:1px solid var(--ui-line);
 border-radius:8px;background:var(--ui-surface);color:var(--ui-ink-2);font:var(--ui-fs-sm) var(--ui-font);cursor:pointer}
.ui-search-btn svg{width:15px;height:15px}
.ui-search-btn kbd{margin-left:auto;font:11px var(--ui-font);border:1px solid var(--ui-line);border-radius:4px;padding:1px 5px}
.ui-pause{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:14px;font-weight:600;font-size:12px;
 color:var(--ui-warn);background:color-mix(in srgb,var(--ui-warn) 16%,transparent);white-space:nowrap}
/* second row: the pages of the current section */
.ui-sub{max-width:var(--ui-max);margin:0 auto;padding:0 var(--ui-4);display:flex;align-items:center;gap:2px;overflow-x:auto;
 scrollbar-width:none;height:38px}
.ui-sub::-webkit-scrollbar{display:none}
.ui-sub a{flex:none;display:flex;align-items:center;height:38px;padding:0 10px;color:var(--ui-ink-2);border-bottom:2px solid transparent;white-space:nowrap}
.ui-sub a:hover{color:var(--ui-ink)}
.ui-sub a.on{color:var(--ui-ink);border-bottom-color:var(--ui-ink);font-weight:600}
.ui-sub .grp{flex:none;color:var(--ui-ink-2);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:0 4px 0 12px}
.ui-crumbs{max-width:var(--ui-max);margin:0 auto;padding:var(--ui-3) var(--ui-4) 0;font-size:var(--ui-fs-xs);color:var(--ui-ink-2)}
.ui-crumbs a{color:var(--ui-ink-2);text-decoration:none} .ui-crumbs a:hover{color:var(--ui-accent);text-decoration:underline}
.ui-crumbs b{color:var(--ui-ink);font-weight:600}
/* section dropdown (desktop hover / click) */
.ui-pop{display:none;position:absolute;left:0;top:calc(100% + 6px);min-width:240px;max-width:360px;max-height:70vh;overflow:auto;
 background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:12px;box-shadow:var(--ui-shadow);padding:6px;z-index:90}
.ui-sec:hover .ui-pop,.ui-sec.open .ui-pop{display:block}
/* bridge the 6px gap so the hover survives the trip down; it lives on .ui-sec, not on .ui-pop,
   because .ui-pop scrolls (overflow:auto) and clips its own pseudo-elements out of hit-testing */
.ui-sec:hover::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
.ui-pop a,.ui-drawer a.it{display:flex;justify-content:space-between;gap:12px;padding:7px 10px;border-radius:7px;color:var(--ui-ink);white-space:nowrap}
.ui-pop a:hover,.ui-drawer a.it:hover{background:var(--ui-surface-2)}
.ui-pop a small,.ui-drawer a.it small{color:var(--ui-ink-2)}
.ui-pop .hd,.ui-drawer .hd{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ui-ink-2);padding:8px 10px 4px}
.ui-pop hr,.ui-drawer hr{border:0;border-top:1px solid var(--ui-line);margin:4px 0}

/* ---------- mobile: bottom tabs + drawer ---------- */
.ui-tabs{display:none}
@media (max-width:899px){
 .ui-secs,.ui-search-btn kbd,.ui-home span,.ui-pause .lg{display:none}
 .ui-pause{padding:0 8px;gap:3px}
 .ui-search-btn{min-width:0;width:36px;height:36px;padding:0;justify-content:center;border:0;background:transparent}
 .ui-search-btn span{display:none}
 .ui-search-btn svg{width:19px;height:19px}
 .ui-bar .ui-title{font-weight:650;font-size:var(--ui-fs-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
 .ui-tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:96;
  height:calc(var(--ui-tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--ui-surface) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--ui-line);font:600 10.5px/1.1 var(--ui-font)}
 .ui-tabs a,.ui-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ui-ink-2);
  background:none;border:0;font:inherit;cursor:pointer;text-decoration:none}
 .ui-tabs svg{width:22px;height:22px}
 .ui-tabs .on{color:var(--ui-accent)}
 body.ui-has-tabs{padding-bottom:calc(var(--ui-tab-h) + env(safe-area-inset-bottom))}
 :root{--ui-tabs:calc(var(--ui-tab-h) + env(safe-area-inset-bottom))}
 .ui-toasts{bottom:calc(var(--ui-tab-h) + 12px + env(safe-area-inset-bottom))}
 /* the sheet opens ABOVE the tabs and leaves a band of scrim on top: tap it, tap the X, tap
    «Menú» again or press Escape. Pedro, 2026-10-22: *"cuando se abre el menu en el movil si quiero
    cerrarlo no se puede porque no hay sitio"*. */
 body .ui-drawer.sheet{bottom:calc(var(--ui-tab-h) + env(safe-area-inset-bottom));max-height:calc(100vh - var(--ui-tab-h) - 96px);
  max-height:calc(100dvh - var(--ui-tab-h) - 96px);padding-bottom:var(--ui-4)}
 /* on the phone the top bar scrolls away (the tabs below are the navigation), so the old pages'
    own sticky bars keep working at top:0 */
 .ui-shell{position:relative}
}
@media (min-width:900px){.ui-bar .ui-title,.ui-pause .sm{display:none}}
.ui-scrim{position:fixed;inset:0;z-index:95;background:var(--ui-scrim)}
.ui-drawer{position:fixed;z-index:97;background:var(--ui-surface);color:var(--ui-ink);box-shadow:var(--ui-shadow);
 font:var(--ui-fs)/1.35 var(--ui-font);overflow:auto;-webkit-overflow-scrolling:touch}
.ui-drawer.sheet{left:0;right:0;bottom:0;max-height:86vh;border-radius:16px 16px 0 0;padding:6px var(--ui-3) calc(var(--ui-4) + env(safe-area-inset-bottom));
 box-shadow:0 -10px 30px -10px rgba(0,0,0,.35)}
.ui-drawer .dh{position:sticky;top:-6px;z-index:1;background:var(--ui-surface);padding:4px 0}
.ui-drawer.side{top:0;right:0;bottom:0;width:min(420px,100vw);border-left:1px solid var(--ui-line);padding:var(--ui-3)}
.ui-drawer a{text-decoration:none}
.ui-drawer.side .grip{display:none}
.ui-drawer .grip{width:40px;height:5px;border-radius:3px;background:var(--ui-line-2);margin:4px auto 10px}
.ui-drawer .dh{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.ui-drawer .dh h2{font-size:var(--ui-fs-md);margin:0;flex:1}
.ui-drawer .secgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.ui-drawer .secgrid section{min-width:0}
.ui-drawer .secgrid a.it{white-space:normal}
.ui-drawer .secgrid a.it.on{font-weight:650;color:var(--ui-accent)}

/* ---------- search palette ---------- */
.ui-palette{position:fixed;z-index:98;left:50%;top:12vh;transform:translateX(-50%);width:min(640px,calc(100vw - 24px));
 background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:14px;box-shadow:var(--ui-shadow);overflow:hidden;
 font:var(--ui-fs)/1.35 var(--ui-font);color:var(--ui-ink)}
.ui-palette input{width:100%;border:0;border-bottom:1px solid var(--ui-line);background:transparent;color:inherit;
 font:var(--ui-fs-md) var(--ui-font);padding:14px 16px;outline:none}
.ui-palette ul{list-style:none;margin:0;padding:6px;max-height:min(60vh,480px);overflow:auto}
.ui-palette li a{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:8px;color:inherit;text-decoration:none}
.ui-palette li a small{margin-left:auto;color:var(--ui-ink-2);white-space:nowrap}
.ui-palette li.sel a{background:color-mix(in srgb,var(--ui-accent) 14%,transparent)}
.ui-palette .none{padding:16px;color:var(--ui-ink-2)}
@media (max-width:899px){.ui-palette{top:8px}}

/* ---------- notifications ---------- */
.ui-notif .grp{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ui-ink-2);margin:12px 4px 6px}
.ui-notif .row{display:flex;gap:6px;align-items:stretch;margin:0 0 6px}
.ui-notif .row>a,.ui-notif .row>div{flex:1;display:block;padding:9px 11px;border-radius:10px;border:1px solid var(--ui-line);
 background:var(--ui-bg);color:var(--ui-ink);text-decoration:none;min-width:0}
.ui-notif .row>a:hover{border-color:var(--ui-line-2)}
.ui-notif .row b{display:block;font-size:var(--ui-fs-sm)}
.ui-notif .row span{display:block;font-size:var(--ui-fs-xs);color:var(--ui-ink-2);overflow:hidden;text-overflow:ellipsis;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* a dot before the title says what kind of notice it is */
.ui-notif .row b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px;background:var(--ui-dot,var(--ui-ink-2))}
.ui-notif .row.rdy{--ui-dot:var(--ui-accent)} .ui-notif .row.done{--ui-dot:var(--ui-ok)} .ui-notif .row.sys{--ui-dot:var(--ui-warn)}
.ui-notif .x{flex:none;width:36px;border-radius:10px;border:1px solid var(--ui-line);background:transparent;color:var(--ui-ink-2);
 cursor:pointer;font-size:18px}
.ui-notif .x:hover{color:var(--ui-ink);border-color:var(--ui-line-2)}
.ui-toasts{position:fixed;z-index:102;left:50%;transform:translateX(-50%);bottom:20px;display:flex;flex-direction:column;gap:8px;
 width:min(460px,calc(100vw - 24px));pointer-events:none}
.ui-toast{pointer-events:auto;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--ui-ink);
 color:var(--ui-bg);box-shadow:var(--ui-shadow);font:var(--ui-fs-sm)/1.35 var(--ui-font);animation:ui-in .18s ease-out}
.ui-toast a{color:inherit;font-weight:650;text-decoration:underline}
.ui-toast button{margin-left:auto;background:none;border:0;color:inherit;opacity:.7;font-size:18px;cursor:pointer}
.ui-toast[data-t="danger"]{background:var(--ui-danger);color:#fff}
@keyframes ui-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ui-toast{animation:none}}

/* ---------- footer ---------- */
.ui-footer{margin-top:var(--ui-6);border-top:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-ink-2);
 font:var(--ui-fs-xs)/1.5 var(--ui-font)}
.ui-footer .in{max-width:var(--ui-max);margin:0 auto;padding:var(--ui-5) var(--ui-4)}
.ui-footer .map{display:grid;gap:var(--ui-4);grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.ui-footer h3{font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px;color:var(--ui-ink)}
.ui-footer ul{list-style:none;margin:0;padding:0}
.ui-footer li{margin:0 0 3px}
.ui-footer a{color:var(--ui-ink-2);text-decoration:none} .ui-footer a:hover{color:var(--ui-accent);text-decoration:underline}
.ui-footer .meta{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:var(--ui-4);padding-top:var(--ui-3);
 border-top:1px solid var(--ui-line)}
.ui-footer .meta .genstamp{margin:0!important;padding:0!important;text-align:left!important;opacity:1!important;font:inherit!important}
.ui-footer select{font:inherit;color:inherit;background:transparent;border:1px solid var(--ui-line);border-radius:5px;padding:1px 4px}
/* A page with the shell drops the old header and the old notification corner. */
html[data-ui] #gnav,html[data-ui] #nc{display:none!important}
html[data-ui]{scroll-padding-top:var(--ui-top,0px)}
/* Markdown rendered by UI.md: a .md of the archive in the viewer, Claude's messages in a project thread.
   Pedro, 2026-10-26: *"si es md que se renderice bien"*. */
.ui-md h1{font-size:var(--ui-fs-xl);margin:.2em 0 .5em}.ui-md h2{font-size:var(--ui-fs-lg);margin:1.2em 0 .5em}
.ui-md h3,.ui-md h4,.ui-md h5,.ui-md h6{font-size:var(--ui-fs-md);margin:1em 0 .4em}
.ui-md>:first-child{margin-top:0}.ui-md>:last-child{margin-bottom:0}
.ui-md p,.ui-md ul,.ui-md ol,.ui-md blockquote{margin:0 0 .7em}
.ui-md ul,.ui-md ol{padding-left:1.4em}.ui-md li{margin:.15em 0}.ui-md li>ul,.ui-md li>ol{margin:.2em 0}
.ui-md blockquote{border-left:3px solid var(--ui-line);padding-left:12px;color:var(--ui-ink-2)}
.ui-md code{font:.9em var(--ui-mono);background:var(--ui-surface-2);padding:0 4px;border-radius:4px}
.ui-md pre{font:12.5px/1.45 var(--ui-mono);background:var(--ui-surface-2);padding:10px 12px;border-radius:8px;overflow:auto;white-space:pre-wrap}
.ui-md a{color:var(--ui-accent);overflow-wrap:anywhere}
.ui-md hr{border:0;border-top:1px solid var(--ui-line);margin:1em 0}
.ui-md-tw{overflow-x:auto;margin:0 0 1em}
.ui-md table{border-collapse:collapse;font:var(--ui-fs-sm)/1.4 var(--ui-font);min-width:100%}
.ui-md th,.ui-md td{border:1px solid var(--ui-line);padding:5px 8px;text-align:left;vertical-align:top}
.ui-md th{background:var(--ui-surface-2)}
/* Every conversation between Pedro and Claude looks like WhatsApp (Pedro, 2026-10-26: *"siempre que haya
   conversaciones entre tu y yo utiliza en look n feel de whatsapp, eso incluye las pagina de trabajo de
   proyecto"*). Moved here from the card (ficha.css): his messages right and green, Claude's left and
   white, the tail at the top corner, the time inside the bubble, the beige wallpaper; the composer is a
   pill with a round green send button. Used by the card's Conversación tab and the project's Trabajo. */
:root{--ui-chatbg:#efeae2;--ui-out:#d9fdd3;--ui-in:#fff;--ui-chatline:rgba(11,20,26,.13);--ui-wa:#00a884}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ui-chatbg:#0b141a;--ui-out:#005c4b;--ui-in:#202c33;--ui-chatline:rgba(0,0,0,.35);--ui-wa:#00a884}}
:root[data-theme="dark"]{--ui-chatbg:#0b141a;--ui-out:#005c4b;--ui-in:#202c33;--ui-chatline:rgba(0,0,0,.35);--ui-wa:#00a884}
.ui-chat{background:var(--ui-chatbg);display:flex;flex-direction:column;gap:3px;padding:16px 14px 18px}
.ui-burbuja{position:relative;display:flow-root;max-width:78%;padding:6px 9px 7px;border-radius:8px;font-size:14px;line-height:1.4;
 overflow-wrap:anywhere;color:var(--ui-ink);box-shadow:0 1px .5px var(--ui-chatline);font-family:var(--ui-font)}
.ui-burbuja a{color:var(--ui-accent)}
.ui-burbuja.pedro+.ui-burbuja.claude,.ui-burbuja.claude+.ui-burbuja.pedro{margin-top:9px}
.ui-burbuja.pedro{align-self:flex-end;background:var(--ui-out);border-top-right-radius:0;margin-right:8px}
.ui-burbuja.claude{align-self:flex-start;background:var(--ui-in);border-top-left-radius:0;margin-left:8px;max-width:84%}
.ui-burbuja::after{content:"";position:absolute;top:0;width:8px;height:13px}
.ui-burbuja.pedro::after{right:-8px;background:var(--ui-out);clip-path:polygon(0 0,100% 0,0 100%)}
.ui-burbuja.claude::after{left:-8px;background:var(--ui-in);clip-path:polygon(0 0,100% 0,100% 100%)}
.ui-burbuja.sistema{align-self:center;background:transparent;color:var(--ui-ink-2);font-size:12px;font-style:italic;box-shadow:none}
.ui-burbuja.sistema::after{display:none}
.ui-burbuja.retirado{opacity:.55;text-decoration:line-through}
.ui-burbuja .when{float:right;margin:7px 0 -2px 10px;font-size:11px;opacity:.55;line-height:1;white-space:nowrap}
.ui-burbuja.ui-md p,.ui-burbuja.ui-md ul,.ui-burbuja.ui-md ol,.ui-burbuja.ui-md blockquote{margin:0 0 .45em}
.ui-burbuja.ui-md h1,.ui-burbuja.ui-md h2,.ui-burbuja.ui-md h3,.ui-burbuja.ui-md h4{font-size:14.5px;margin:.6em 0 .3em}
.ui-burbuja.ui-md>:first-child{margin-top:0}
.ui-burbuja.nuevo{animation:ui-nuevo 1.6s ease-out}
@keyframes ui-nuevo{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-wa) 45%,transparent)}100%{box-shadow:0 1px .5px var(--ui-chatline)}}
.ui-chat-dia{align-self:center;background:var(--ui-in);color:var(--ui-ink-2);font-size:12px;border-radius:8px;padding:4px 10px;margin:8px 0;box-shadow:0 1px .5px var(--ui-chatline)}
.ui-chat-vacio{color:var(--ui-ink-2);font-size:13px;text-align:center;padding:26px 14px;background:var(--ui-in);border-radius:8px;align-self:center;max-width:80%}
.ui-pensando{align-self:flex-start;margin-left:8px;background:var(--ui-in);border-radius:8px;border-top-left-radius:0;padding:7px 10px;font-size:13px;
 color:var(--ui-ink-2);display:flex;align-items:center;gap:8px;box-shadow:0 1px .5px var(--ui-chatline)}
.ui-pensando a{color:var(--ui-accent);font-size:12px}
.ui-puntos{display:inline-flex;gap:3px}
.ui-puntos i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.4;animation:ui-punto 1.2s infinite ease-in-out}
.ui-puntos i:nth-child(2){animation-delay:.2s}.ui-puntos i:nth-child(3){animation-delay:.4s}
@keyframes ui-punto{40%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.ui-puntos i,.ui-burbuja.nuevo{animation:none}}
.ui-wa-compose{display:flex;gap:8px;align-items:flex-end;background:var(--ui-chatbg);padding:8px 10px}
.ui-wa-compose textarea{flex:1 1 auto;min-width:0;font:16px/1.4 var(--ui-font);color:var(--ui-ink);background:var(--ui-in);border:0;border-radius:22px;
 padding:10px 16px;resize:none;min-height:44px;max-height:40vh;box-shadow:0 1px .5px var(--ui-chatline)}
.ui-wa-compose textarea:focus{outline:2px solid color-mix(in srgb,var(--ui-wa) 45%,transparent)}
@media (min-width:640px){.ui-wa-compose textarea{font-size:14.5px}}
.ui-wa-send{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;background:var(--ui-wa);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.ui-wa-send svg{width:22px;height:22px;margin-left:2px}
.ui-wa-send:disabled{opacity:.55;cursor:progress}
.ui-wa-send:focus-visible{outline:2px solid var(--ui-ink);outline-offset:2px}
/* Files waiting to go with the next message, and the round + of the composer (2026-10-26) */
.ui-wa-mas{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--ui-ink-2);cursor:pointer;display:grid;place-items:center;padding:0}
.ui-wa-mas:hover{background:color-mix(in srgb,var(--ui-ink) 8%,transparent)}
.ui-wa-mas svg{width:26px;height:26px}
.ui-wa-mas:focus-visible{outline:2px solid var(--ui-wa);outline-offset:2px}
.ui-adj{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px 0;background:var(--ui-chatbg);font-size:12.5px}
.ui-adj[hidden]{display:none}
.ui-adjc{display:inline-flex;align-items:center;gap:6px;min-height:32px;background:var(--ui-in);border-radius:999px;padding:3px 4px 3px 10px;max-width:100%;box-shadow:0 1px .5px var(--ui-chatline)}
.ui-adjc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.ui-adjc small{color:var(--ui-ink-2)}
.ui-adjc button{font:inherit;font-size:12px;cursor:pointer;border:0;background:none;color:var(--ui-ink-2);min-width:28px;min-height:28px;border-radius:999px}
.ui-adjc button:focus-visible{outline:2px solid var(--ui-wa)}
.ui-adjc>svg{flex:0 0 auto;width:14px;height:14px;color:var(--ui-ink-2)}
.ui-adjc button:hover{background:var(--ui-surface-2)}
.ui-soltar{outline:3px dashed var(--ui-wa);outline-offset:-6px}
/* UI.compositor (ui.js): LA caja de escribir a Claude, la misma en la ficha, el expediente, «Nueva tarea» y los
   proyectos (2026-10-31). Chips de peticion rapida, ficheros que esperan, la barra y una linea de estado. */
.ui-comp{background:var(--ui-chatbg);position:relative}
.ui-comp-rapido{display:flex;flex-wrap:wrap;gap:var(--ui-2);padding:8px 12px 0}
.ui-comp-rapido .ui-chip{background:var(--ui-in);box-shadow:0 1px .5px var(--ui-chatline)}
.ui-comp-rapido .ui-chip:disabled{opacity:.55;cursor:progress}
.ui-comp-estado{margin:0;padding:0 16px 8px;font-size:var(--ui-fs-xs);color:var(--ui-ink-2)}
.ui-comp-estado:empty{display:none}
.ui-comp [aria-busy="true"] .ui-wa-mas{cursor:progress;opacity:.7}

/* El chat de trabajo con Claude (UI.chatTrabajo en ui.js), el mismo en Proyectos y en Familia: las burbujas y la
   barra son .ui-chat y .ui-wa-compose; esto es la caja, con altura propia y abierta bajada hasta lo ultimo, y los
   chips de peticiones rapidas. Salio de proyecto.css el 2026-10-28. */
.pr-rapido{display:flex;flex-wrap:wrap;gap:var(--ui-2);margin:var(--ui-3) 0}
.pr-rapido .ui-chip:active:not(:disabled){transform:scale(.96)}
.pr-rapido .ui-chip:disabled{opacity:.55;cursor:progress}
.pr-rapido .ui-chip[aria-pressed="true"]:disabled{opacity:1}
.pr-chat{border-radius:var(--ui-r2);overflow:hidden;border:1px solid var(--ui-line);margin-top:var(--ui-3)}
.pr-hilo{height:min(68vh,720px);overflow-y:auto;overscroll-behavior:contain}
#pide-e:empty{display:none}
.pr-trabajo .pr-meta{font-size:var(--ui-fs-xs)}

/* Las pestañas de una página (UI.pestanas en ui.js), las mismas en Proyectos y en Familia. Salieron de proyecto.css
   el 2026-10-28. */
.pr-tabs{position:sticky;top:var(--ui-top,0px);z-index:5;display:flex;gap:var(--ui-1);overflow-x:auto;background:var(--ui-bg);
  border-bottom:1px solid var(--ui-line);margin:var(--ui-3) calc(-1 * var(--ui-4)) 0;padding:0 var(--ui-4);scrollbar-width:none}
.pr-tabs::-webkit-scrollbar{display:none}
.pr-tabs button{flex:0 0 auto;font:500 var(--ui-fs-sm)/1 var(--ui-font);color:var(--ui-ink-2);background:none;border:0;
  border-bottom:2px solid transparent;padding:var(--ui-3) var(--ui-2);cursor:pointer}
.pr-tabs button[aria-selected="true"]{color:var(--ui-ink);border-bottom-color:var(--ui-accent);font-weight:600}
.pr-tabs .n{font-size:var(--ui-fs-xs);color:var(--ui-ink-2);margin-left:2px}
@media (min-width:720px){.pr-tabs{margin-left:0;margin-right:0;padding:0}}