@font-face{font-family:Manrope;src:url('Manrope-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('Manrope-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url('Manrope-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('Manrope-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Literata;src:url('Literata-Variable.woff2') format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('JetBrainsMono-Variable.woff2') format('woff2');font-weight:100 800;font-display:swap}
/* Auto Remoto: the chat with the coordinator on a phone. Same tokens as Auto (its design system,
   dark only) and the desktop's timeline styles, laid out for one column and touch. */
:root{
  --safe-top:env(safe-area-inset-top);--safe-bottom:env(safe-area-inset-bottom);
  --bg-000:#1F1F1E;--bg-100:#191918;--bg-200:#2B2B29;--surface-raised:#272726;--user-bubble:#30302E;--code-bg:#161615;
  --text-000:#F2F1EE;--text-200:#B6B4AE;--text-400:#A3A19B;--border-100:#343432;--border-300:#75736D;
  --accent:#8DBBFF;--on-accent:#0E1A2E;--accent-soft:#1E2B40;--success:#6FCF9B;--warning:#E9B862;--danger:#FF8F80;
  --font-sans:Manrope,system-ui,sans-serif;--font-serif:Literata,Georgia,serif;--font-mono:"JetBrains Mono","Cascadia Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  /* What the desktop timeline's styles read. */
  --muted:var(--text-200);--line:var(--border-100);--theme-line:var(--border-100);--theme-text:var(--text-000);--theme-muted:var(--text-200);--theme-border:var(--border-100);--theme-raised:rgba(255,255,255,.04);--chat-font-size:16px;--chat-line-height:26px;--chat-column:100%;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* No overflow clipping on the root: an iPhone app on the home screen reports a viewport 59 px shorter
   than its screen (iOS bug with black-translucent), and clipping there cut the composer off. */
html,body{margin:0;height:100vh;overscroll-behavior:none;background:var(--bg-000);color:var(--text-000);font:400 15px/24px var(--font-sans);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.d{font:400 13px/18px var(--font-sans);color:var(--text-200)}
.t{font:500 14px/20px var(--font-sans)}
.center{text-align:center}
.page-title{margin:0;font:400 24px/32px var(--font-serif)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@keyframes pulse{50%{opacity:.25}}
@keyframes reveal{from{opacity:0;transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Each screen is exactly the visible viewport (app.js keeps --app-top/--app-h from visualViewport):
   the composer stays on the bottom edge with the keyboard open or closed, on any phone. */
.screen{position:fixed;left:0;right:0;top:var(--app-top,0px);height:var(--app-h,100dvh);display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.avatar{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--surface-raised);border:1px solid var(--border-100);color:var(--accent)}
.avatar svg{width:30px;height:30px}
.avatar.big{width:88px;height:88px}.avatar.big svg{width:46px;height:46px}
.card{border:1px solid var(--border-100);border-radius:16px;background:var(--surface-raised)}

/* Pairing and not paired */
.pair{padding:env(safe-area-inset-top) 24px calc(32px + env(safe-area-inset-bottom))}
.pair-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center}
.pair-card{width:100%;padding:16px;display:flex;flex-direction:column;gap:14px;text-align:left}
.pc-row{display:flex;align-items:center;gap:12px}
.pc-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--bg-100)}
.pc-icon svg{width:20px;height:20px;fill:none;stroke:var(--text-200);stroke-width:1.5;stroke-linecap:round}
.pair-code{padding-top:14px;border-top:1px solid var(--border-100)}
.code{margin-top:6px;font:500 28px/36px var(--font-mono);letter-spacing:.08em}
.pair-actions{display:flex;flex-direction:column;gap:12px}
.lead{max-width:300px}
.primary{height:48px;border:0;border-radius:10px;background:var(--accent);color:var(--on-accent);font:600 15px/20px var(--font-sans)}
.primary:disabled{opacity:.5}
.error{margin:0;text-align:center;font:500 13px/18px var(--font-sans);color:var(--danger)}
.secondary{height:48px;padding:0 16px;border:1px solid var(--border-100);border-radius:10px;background:transparent;font:500 15px/20px var(--font-sans)}
.secondary:disabled{opacity:.5}
/* The camera, inside the app, while it reads the code. */
.pair.scanning .intro{display:none}
.scanner{position:relative;width:100%;max-width:340px;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--bg-100);border:1px solid var(--border-100)}
.scanner video{width:100%;height:100%;object-fit:cover;display:block}
.scan-frame{position:absolute;inset:14%;border:2px solid var(--accent);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.paste{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.paste-row{display:flex;gap:8px}
/* 16px keeps iOS from zooming in on the field. */
.paste input{flex:1;min-width:0;height:48px;padding:0 12px;border:1px solid var(--border-100);border-radius:10px;background:var(--bg-100);color:var(--text-000);font:400 16px/24px var(--font-sans);outline:0}
.paste input:focus{border-color:var(--border-300)}
.paste input::placeholder{color:var(--text-400)}

/* Chat: the avatar and the name float over the conversation, taking only their own space. */
.chat{position:fixed;padding-top:0}
.head{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;padding-top:calc(env(safe-area-inset-top) + 8px);pointer-events:none}
.head>*{pointer-events:auto}
/* Text never runs under the clock and the battery: a short fade, the height of the status bar. */
.chat::before{content:"";position:absolute;top:0;left:0;right:0;height:calc(env(safe-area-inset-top) + 6px);background:linear-gradient(var(--bg-000) 70%,transparent);z-index:1;pointer-events:none}
.name-pill{margin-top:8px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 14px;border-radius:999px;border:1px solid var(--border-100);background:var(--surface-raised);font:600 15px/20px var(--font-sans)}
.name-pill svg{width:14px;height:14px;fill:none;stroke:var(--text-200);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.status-pill{margin-top:12px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid var(--border-100);background:var(--bg-100);font:500 13px/18px var(--font-sans);color:var(--warning)}
.status-pill .dot,.state .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
/* The PC closing to restart or update: not a warning; the dot is the person's orb colour. */
.status-pill.is-closing{color:var(--text-200)}
.status-pill.is-closing .dot{background:var(--orb,#8bbdff)}
.chat.offline .avatar{color:var(--border-300)}
.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.column{min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(env(safe-area-inset-top) + 130px) 16px 8px}
/* The desktop timeline, on a phone: the person's bubble a little wider, no room lost on the sides. */
.auto-timeline{font-size:15px;line-height:24px}
.auto-timeline .timeline-message{margin:0 0 24px}
.auto-timeline .timeline-message.user{max-width:85%;padding:10px 16px;border:0;border-radius:18px;background:var(--user-bubble)}
.auto-timeline .timeline-empty{margin:40px auto;font:400 24px/32px var(--font-serif);color:var(--text-000)}
.auto-timeline .timeline-tool-detail{font-family:var(--font-mono)}

/* Decisions: the desktop's question card. */

/* Composer */
/* Navegador reflejado: what an encargo asks the person in its browser, with a live still. */
.askcard{display:flex;flex-direction:column;border-radius:14px;border:1px solid var(--border-100);background:var(--surface-raised);overflow:hidden}
.askcard[hidden]{display:none}
.askcard .shot{position:relative;height:124px;background:var(--bg-100);overflow:hidden;border-bottom:1px solid var(--border-100)}
.askcard .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.askcard .shot .none{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-400,#8C8A84);font:500 13px/18px var(--font-sans,system-ui)}
.askcard .shot img:not([hidden])+.none{display:none}
.askcard .shot img[hidden]~.live{display:none}
.askcard .live{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;background:rgba(20,20,19,.82);color:#F2F1EE;font:600 11px/16px var(--font-sans,system-ui)}
.askcard .live i{width:6px;height:6px;border-radius:50%;background:#E5484D}
.askcard .body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 4px}
.askcard .k{font:600 11px/16px var(--font-sans,system-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--warning)}
.askcard .q{font:500 16px/22px var(--font-sans,system-ui)}
.askcard .m{font:400 13px/18px var(--font-sans,system-ui);color:var(--text-200,#B8B6B0)}
.askcard .acts{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px}
.askcard .btn{height:44px;border-radius:10px;border:1px solid var(--border-100);background:transparent;color:inherit;font:500 15px/20px var(--font-sans,system-ui)}
.askcard .btn.ghost{border-color:transparent;color:var(--text-200,#B8B6B0)}
.dock{flex:none;padding:8px 12px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.hint{margin:0 4px;font:400 13px/18px var(--font-sans);color:var(--text-200)}
.composer{display:flex;flex-direction:column;gap:8px;padding:7px;border-radius:22px;border:1px solid var(--border-100);background:var(--surface-raised);box-shadow:0 1px 2px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.25)}
.composer:focus-within{border-color:var(--border-300)}
.composer-row{display:flex;align-items:flex-end;gap:6px}
.attach{flex:none;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent}
.attach svg{width:22px;height:22px;fill:none;stroke:var(--text-000);stroke-width:1.6;stroke-linecap:round}
.attach[aria-expanded="true"]{background:var(--bg-200)}
/* The «+» menu, above the composer. */
.dock{position:relative}
.attach-menu{position:absolute;left:12px;bottom:calc(100% - 4px);z-index:5;min-width:220px;padding:8px;display:flex;flex-direction:column;border-radius:24px;border:1px solid var(--border-100);background:var(--surface-raised);box-shadow:0 10px 32px rgba(0,0,0,.5);animation:reveal .14s ease-out}
.attach-menu button{display:flex;align-items:center;gap:14px;height:56px;padding:0 10px;border:0;border-radius:14px;background:transparent;font:500 16px/20px var(--font-sans);text-align:left}
.attach-menu button:active{background:var(--bg-200)}
.attach-menu .ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--bg-200)}
.attach-menu svg{width:20px;height:20px;fill:none;stroke:var(--text-000);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* What goes with the message: a chip per file, with its progress, removable. */
.attachments{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 0;scrollbar-width:none}
.att{position:relative;flex:none;display:flex;align-items:center;gap:8px;max-width:210px;height:56px;padding:0 34px 0 6px;border-radius:12px;border:1px solid var(--border-100);background:var(--bg-100)}
.att img,.att .file{flex:none;width:44px;height:44px;border-radius:8px;object-fit:cover}
.att .file{display:grid;place-items:center;background:var(--bg-200);font:600 11px/14px var(--font-sans);color:var(--text-200);text-transform:uppercase}
.att .meta{min-width:0;display:flex;flex-direction:column}
.att .n{font:500 13px/18px var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att .s{font:400 12px/16px var(--font-sans);color:var(--text-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att .x{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:var(--border-300);color:var(--bg-000);font:700 13px/1 var(--font-sans)}
.att .bar{position:absolute;left:6px;right:6px;bottom:3px;height:3px;border-radius:2px;background:var(--border-100);overflow:hidden}
.att .bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
.att.error{border-color:var(--danger)}
.att.error .s{color:var(--danger)}
/* 16px keeps iOS from zooming in on the field. */
.composer textarea{flex:1;min-width:0;min-height:36px;max-height:160px;padding:6px 2px 6px 0;resize:none;border:0;outline:0;background:transparent;font:400 16px/24px var(--font-sans)}
.composer textarea::placeholder{color:var(--text-400)}
.send,.stop{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%}
.send{border:0;background:var(--accent)}
.send svg{width:18px;height:18px;fill:none;stroke:var(--on-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.send:disabled{opacity:.5;cursor:default}
.stop{border:1px solid var(--border-300);background:transparent}
.stop span{width:11px;height:11px;border-radius:2px;background:var(--text-000)}
.chat.offline .composer{opacity:.5;box-shadow:none}

/* With the keyboard up the home indicator is hidden: no room kept for it. */
.keyboard .dock{padding-bottom:8px}
/* «Tu PC no está conectado» under the name makes the floating header taller. */
.chat.offline .column{padding-top:calc(env(safe-area-inset-top) + 174px)}
/* «Trabajando · …» or «En espera · …» under the name, as the PC says it. */
.head-status{margin:8px 0 0;max-width:min(320px,calc(100vw - 48px));font:400 13px/18px var(--font-sans);color:var(--text-200);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head-status[hidden]{display:none}
.chat.has-status .column{padding-top:calc(env(safe-area-inset-top) + 156px)}
.chat.offline.has-status .column{padding-top:calc(env(safe-area-inset-top) + 200px)}
/* The chat's text size (Ajustes → Texto): only the conversation. */
html.text-small{--chat-font-size:15px;--chat-line-height:24px}
html.text-large{--chat-font-size:18px;--chat-line-height:28px}
.seg{flex:none;display:inline-flex;padding:2px;border:1px solid var(--border-100);border-radius:10px}
.seg button{min-width:40px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--text-200);font:500 15px/20px var(--font-sans)}
.seg button[data-size=small]{font-size:13px}.seg button[data-size=large]{font-size:18px}
.seg button[aria-checked=true]{background:var(--surface-raised);color:var(--text-000);box-shadow:0 0 0 1px var(--border-100)}

/* Settings sheet */
.sheet-veil{position:fixed;inset:0;background:rgba(0,0,0,.56);animation:reveal .16s ease-out}
.sheet{position:fixed;left:0;right:0;bottom:0;padding:10px 20px calc(24px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;border-top:1px solid var(--border-100);background:var(--surface-raised);box-shadow:0 10px 32px rgba(0,0,0,.5);display:flex;flex-direction:column;animation:reveal .18s ease-out}
/* «¿Qué he mejorado?»: the same sheet, centered, the person's orb on top (56 px, breathing). */
.sheet.whats-new{align-items:center;max-height:calc(100dvh - 54px);overflow:auto;padding:24px 16px calc(16px + env(safe-area-inset-bottom))}
.whats-new-orb{display:grid;place-items:center;width:72px;height:72px;flex:none}
.whats-new-orb auto-orb{--orb-size:56px;width:56px;height:56px;animation:whats-new-breathe 3.2s ease-in-out infinite}
.whats-new-who{margin:12px 0 0;font:500 12px/16px var(--font-sans);color:var(--text-400)}
.whats-new-title{margin:4px 0 0;font:400 26px/34px var(--font-serif);text-align:center}
.whats-new-list{align-self:stretch;margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.whats-new-list li{position:relative;padding-left:16px;font:400 16px/24px var(--font-sans);color:var(--text-000)}
.whats-new-list li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--text-400)}
.whats-new-ok{align-self:stretch;min-height:44px;margin-top:24px;border:0;border-radius:10px;background:#EFEEEB;color:#1B1B1A;font:500 15px/22px var(--font-sans)}
@keyframes whats-new-breathe{0%,100%{transform:scale(.97);filter:brightness(1)}50%{transform:scale(1.03);filter:brightness(1.1)}}
@media(prefers-reduced-motion:reduce){.whats-new-orb auto-orb{animation:none}}
.grip{align-self:center;width:36px;height:4px;border-radius:999px;background:var(--border-300);margin-bottom:14px}
.sheet .page-title{margin-bottom:4px}
.row{display:flex;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid var(--border-100)}
.row .copy{flex:1;min-width:0}
.state{display:inline-flex;align-items:center;gap:6px;font:500 13px/18px var(--font-sans);color:var(--success)}
.state.off{color:var(--warning)}
.chip{flex:none;max-width:170px;height:32px;padding:0 10px;border:1px solid var(--border-100);border-radius:8px;background:transparent;color:var(--text-200);font:500 13px/18px var(--font-sans)}
.chip option{background:var(--surface-raised);color:var(--text-000)}
.chip-btn{flex:none;height:32px;padding:0 12px;border:1px solid var(--border-100);border-radius:8px;background:transparent;font:500 13px/18px var(--font-sans)}
.chip-btn:disabled{opacity:.5}
.danger{margin-top:20px;height:44px;border:1px solid var(--border-100);border-radius:10px;background:transparent;color:var(--danger);font:500 14px/20px var(--font-sans)}

/* Under the floating header, so it never covers the composer however tall it grows. */
.toast{position:fixed;left:16px;right:16px;top:calc(env(safe-area-inset-top) + 118px);z-index:6;padding:10px 14px;border-radius:10px;border:1px solid var(--border-100);background:var(--surface-raised);font:500 13px/18px var(--font-sans);text-align:center;animation:reveal .16s ease-out}
.sprites{position:absolute}
.viewport-trace{position:fixed;left:8px;top:calc(env(safe-area-inset-top) + 96px);z-index:9;margin:0;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.8);color:#8DBBFF;font:500 11px/15px var(--font-mono);pointer-events:none;white-space:pre}
/* Dictation: while recording, the text on top and below it x, the sound, stop and the same send button. */
.dictation-host,.dict{display:contents}
.dict button{flex:none;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--text-000)}
.dict button[hidden],.dict-time[hidden],.dict-wave[hidden]{display:none}
.dict button:disabled{opacity:.5}
.dict[data-state="failed"] .dict-main{color:#e5655a}
.dict-square{width:11px;height:11px;border-radius:2px;background:currentColor}
.dict-spinner{width:16px;height:16px;box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:dict-spin .9s linear infinite}
.dict-time{flex:none;align-self:center;font:500 13px/20px var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text-400)}
.dict-wave{flex:1;min-width:0;height:26px;align-self:center;color:var(--text-000)}
body.dictating .composer-row{flex-wrap:wrap;align-items:center}
body.dictating .composer-row textarea{flex:1 0 100%;order:0}
body.dictating .attach{display:none}
body.dictating .dict-cancel{order:1;background:var(--bg-200)}
body.dictating .dict-wave{order:2}
body.dictating .dict-time{order:3}
body.dictating .dict-main{order:4;background:var(--bg-200)}
body.dictating #send{order:5}
@keyframes dict-spin{to{transform:rotate(360deg)}}
/* A visualization's dialog and notes: the shared host writes the desktop's class names. */
.auto-viz-dialog .au-btn,.auto-viz-error .au-btn{min-height:44px;padding:0 16px;border:0;border-radius:10px;background:transparent;color:var(--text-000);font:500 14px/20px var(--font-sans)}
.auto-viz-dialog .au-btn.primary{background:var(--accent);color:var(--on-accent)}
.auto-viz-dialog .au-btn:disabled{opacity:.5}
.auto-viz-dialog .au-input{padding:10px 12px;border:1px solid var(--border-100);border-radius:10px;background:var(--surface-raised);color:var(--text-000);font:400 16px/22px var(--font-sans)}
.auto-viz-dialog .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* <auto-orb> (orb.js): the bubble drawn 27 % larger than its box, as on the PC. */
auto-orb{display:inline-block;position:relative;flex:none;width:var(--orb-size,24px);height:var(--orb-size,24px);pointer-events:none}
auto-orb>img{position:absolute;inset:-13.5%;width:127%;height:127%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
auto-orb>img:not([src]){visibility:hidden}
/* The assistant's orb in the header (56 px): its color, breathing while Auto works, a 1 px halo with each breath; still and dimmed while it waits at the limit or the PC is away. */
.avatar.orb{position:relative;background:none;border:0;overflow:visible;pointer-events:none}
.avatar.orb auto-orb{--orb-size:56px}
.avatar.orb[data-state="work"] auto-orb{animation:orb-breathe 3.2s ease-in-out infinite}
.avatar.orb[data-state="work"]::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 0 1px var(--orb-line,rgba(139,189,255,.4));opacity:0;animation:orb-halo 3.2s ease-in-out infinite;pointer-events:none}
.avatar.orb[data-state="wait"] auto-orb{filter:saturate(.45) brightness(.7)}
.chat.offline .avatar.orb auto-orb{filter:grayscale(1) brightness(.6)}
@keyframes orb-breathe{0%,100%{transform:scale(.97);filter:brightness(1)}50%{transform:scale(1.03);filter:brightness(1.1)}}
@keyframes orb-halo{0%,100%{opacity:0;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.avatar.orb auto-orb,.avatar.orb::after{animation:none!important}}

/* Designs: a card in the chat where one is cited, the list from Ajustes, one design as a page and
   one screen at a time. Same tokens as the chat; the screens are pictures the PC draws. */
.remote-designs{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.design-card{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 12px;border:1px solid var(--border-100);border-radius:16px;background:var(--surface-raised);text-align:left}
.design-card:active{background:var(--bg-200)}
.design-card:disabled{cursor:default}
.design-card .ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--bg-100)}
.design-card .ico svg,.sub-head svg,.viewer svg{width:20px;height:20px;fill:none;stroke:var(--text-000);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.design-card .ico svg{stroke:var(--accent)}
.design-card .copy{flex:1;min-width:0}
.design-card .t,.design-card .d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.design-card .chev{flex:none;width:16px;height:16px;fill:none;stroke:var(--text-200);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.design-card.gone .ico svg{stroke:var(--border-300)}
.file-card .t,.file-card .d{display:block}
.file-card.gone .d{white-space:normal}
.sub{z-index:3;background:var(--bg-000)}
.sub-head{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 6px;border-bottom:1px solid var(--border-100)}
.sub-head .back,.viewer-head .back{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent}
.sub-head .back:active,.viewer-head .back:active{background:var(--bg-200)}
.sub-title{min-width:0;flex:1}
.sub-title h1{margin:0;font:600 16px/22px var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub-title .d{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub-column{display:flex;flex-direction:column;gap:12px;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
.sub-empty{margin:40px 8px;text-align:center}
.design-section{margin:16px 0 0;font:600 15px/20px var(--font-sans)}
.design-section.page{font:600 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--text-200)}
.design-note{margin:0;padding:12px 14px;border-radius:12px;color:#1F1F1E;font:500 14px/20px var(--font-sans);white-space:pre-wrap;overflow-wrap:anywhere}
.design-note.plain{padding:0 2px;color:var(--text-200);background:none}
.design-reports{display:flex;flex-wrap:wrap;gap:8px}
.design-reports button{display:inline-flex;align-items:center;gap:8px;max-width:100%;height:36px;padding:0 12px;border:1px solid var(--border-100);border-radius:999px;background:transparent;font:500 13px/18px var(--font-sans)}
.design-reports button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.design-reports svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--text-200);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.screen-card{display:flex;flex-direction:column;gap:8px;padding:0;border:0;background:none;text-align:left}
.screen-card .frame{position:relative;width:100%;border:1px solid var(--border-100);border-radius:12px;overflow:hidden;background:var(--bg-100)}
.screen-card img{display:block;width:100%;height:100%;object-fit:contain}
.screen-card .wait{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center}
.screen-card .wait.loading::after{content:"";width:20px;height:20px;border:2px solid var(--border-300);border-right-color:transparent;border-radius:50%;animation:dict-spin .9s linear infinite}
.screen-card .meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 2px}
.screen-card .meta .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screen-card .meta .d{flex:none;font-variant-numeric:tabular-nums}
.screen-card .retry{margin-top:8px;height:32px;padding:0 12px;border:1px solid var(--border-100);border-radius:8px;background:transparent;font:500 13px/18px var(--font-sans)}
.report-body{font-size:15px;line-height:24px}
/* The viewer: the whole screen for the picture, black around it as in a photo viewer. */
/* A file of the chat. */
.timeline-attachment.is-openable{cursor:pointer}
.timeline-attachment.is-openable:active{opacity:.75}
.file-player{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:12px}
.file-player video{display:block;width:100%;max-height:calc(var(--app-h,100dvh) - 160px);border-radius:12px;background:#000}
.file-player audio{display:block;width:100%}
.file-player .file-status{margin:0;text-align:center}
.file-art{display:grid;place-items:center;width:96px;height:96px;border-radius:24px;background:var(--surface-raised);border:1px solid var(--border-100)}
.file-art svg{width:40px;height:40px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.file-name{margin:0;max-width:100%;text-align:center;overflow-wrap:anywhere}
.file-doc{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:32px;text-align:center}
.file-doc p{margin:0;overflow-wrap:anywhere}
.file-doc .primary,.file-doc .ghost{display:grid;place-items:center;width:100%;max-width:320px;margin-top:12px;padding:0 16px;text-decoration:none}
.file-doc .ghost{height:48px;margin-top:4px;border:1px solid var(--border-100);border-radius:10px;color:var(--text-000);font:600 15px/20px var(--font-sans)}
.file-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:400 13px/20px var(--font-mono)}
#file.is-page .sub-column{max-width:none;padding:0}
.file-frame{display:block;width:100%;height:calc(var(--app-h,100dvh) - 64px - env(safe-area-inset-top));border:0;background:#fff}
.file-frame.is-visual{background:var(--bg-000)}
.viewer{position:fixed;left:0;right:0;top:var(--app-top,0px);height:var(--app-h,100dvh);z-index:7;display:flex;flex-direction:column;background:#0F0F0E;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.viewer-head{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 6px}
.stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab}
.stage img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.viewer-status{position:absolute;inset:0;margin:0;display:grid;place-items:center;padding:24px;text-align:center;font:400 14px/20px var(--font-sans);color:var(--text-200)}
.viewer-foot{flex:none;display:flex;align-items:center;justify-content:space-between;padding:6px 12px calc(10px + env(safe-area-inset-bottom))}
.viewer-foot .nav{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--border-100);border-radius:50%;background:var(--surface-raised)}
.viewer-foot .nav:disabled{opacity:.35}
.viewer-foot .d{font-variant-numeric:tabular-nums}
/* Waiting at the limit: the orb still and dimmed with its clock, as on the PC (R4). */
.avatar.orb[data-state="wait"]::after{content:"";position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:var(--bg-000) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 17a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM10 6.5V10l2.5 1.5' fill='none' stroke='%23E9B862' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");box-shadow:0 0 0 2px var(--bg-000)}
/* «Anotar» en el teléfono: pluma y recuadro sobre el visor */
.viewer-annotate{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;margin-left:auto;padding:0 12px 0 10px;border:1px solid rgba(141,187,255,.22);border-radius:10px;background:rgba(141,187,255,.12);color:#8dbbff;font:600 14px/18px var(--font-sans,system-ui,sans-serif)}
.viewer .viewer-annotate svg{width:18px;height:18px;stroke:#8dbbff}
.viewer-annotate[hidden]{display:none}
.phone-annotate{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;background:#000;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.phone-annotate header{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 6px;background:#0F0F0E}
.phone-annotate header .back{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent}
.phone-annotate header .t{font:600 16px/22px var(--font-sans,system-ui,sans-serif);color:#f2f1ee}
.phone-annotate header .d{margin-left:auto;font-size:13px;color:#b8b6b0;text-align:right}
.phone-annotate .ann-stage{flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 2px #8dbbff}
.phone-annotate canvas{touch-action:none;display:block}
.phone-annotate footer{flex:none;display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:64px;padding:0 10px env(safe-area-inset-bottom);background:#222221;border-top:1px solid #2a2a28}
.phone-annotate .tool{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent}
.phone-annotate .tool[aria-pressed=true]{background:rgba(141,187,255,.12)}
.phone-annotate .tool[aria-pressed=true] svg{stroke:#8dbbff}
.phone-annotate .sw{width:28px;height:28px;border:2px solid transparent;border-radius:50%;padding:0}
.phone-annotate .sw[aria-pressed=true]{border-color:#f2f1ee}
.phone-annotate .go{height:40px;padding:0 16px;border:0;border-radius:12px;background:#efeeeb;color:#141413;font:600 15px/18px var(--font-sans,system-ui,sans-serif)}
.phone-annotate .go:disabled{opacity:.45}

/* A PDF drawn in the phone with pdf.js, page by page («Auto es la única app que necesitas»). */
.pdf-pages{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 0 72px;background:#525659}
.pdf-page{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.4);display:grid;place-items:center;color:#5f6368;font:500 13px/18px var(--font-sans,Manrope,system-ui)}
.pdf-page canvas{display:block}
.pdf-counter{position:sticky;bottom:64px;align-self:center;margin:-56px auto 0;display:block;width:max-content;height:28px;padding:0 12px;border-radius:999px;background:rgba(32,33,36,.92);color:#E8EAED;font:500 12px/28px var(--font-sans,Manrope,system-ui)}
.pdf-save{display:block;margin:12px auto 24px}

/* Ubicación: the switch, its options under it, and the question Auto asks before the phone's. */
/* Ajustes leaves room to tap outside it below the status bar (an iPhone app on the home screen
   draws under it), and its title and close button stay on screen while it scrolls. */
#sheet{max-height:calc(var(--app-h,100dvh) - env(safe-area-inset-top) - 56px);overflow:auto;padding-top:0}
.sheet-head{position:sticky;top:0;z-index:1;display:flex;flex-direction:column;margin:0 -20px;padding:10px 20px 0;background:var(--surface-raised);touch-action:none}
.sheet-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet-close{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;border:0;border-radius:50%;background:transparent}
.sheet-close:active{background:var(--bg-200)}
.sheet-close svg{width:20px;height:20px;fill:none;stroke:var(--text-000);stroke-width:1.5;stroke-linecap:round}
.toggle{flex:none;position:relative;width:44px;height:26px;padding:0;border:0;border-radius:999px;background:var(--border-100);transition:background .15s}
.toggle span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#F2F1EE;transition:transform .15s}
.toggle[aria-checked=true]{background:var(--accent)}
.toggle[aria-checked=true] span{transform:translateX(18px);background:#0E1A2E}
.toggle:disabled{opacity:.5}
.loc-row{border-bottom:0}
.loc-sub{display:flex;flex-direction:column;gap:10px;padding:0 0 14px;border-bottom:1px solid var(--border-100)}
.loc-subrow{display:flex;align-items:center;gap:12px;font:400 13px/18px var(--font-sans);color:var(--text-200)}
.loc-subrow .k{flex:1;min-width:0}
.loc-subrow .seg button{min-width:0;height:30px;padding:0 10px;font:500 13px/18px var(--font-sans)}
.loc-honest{margin:0;font:500 12px/16px var(--font-sans);color:var(--text-400)}
.loc-help{margin:0;font:400 13px/18px var(--font-sans);color:var(--text-200)}
#location-line.warn{color:var(--warning)}
.sheet.loc-ask{max-height:calc(100dvh - 24px);overflow:auto}
/* Encargos: the state of each encargo, read only, when the person turned the mod on in the PC. */
.enc-pill{position:fixed;top:calc(env(safe-area-inset-top) + 12px);right:12px;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--border-100);background:var(--surface-raised);color:var(--text-000);font:600 14px/20px var(--font-sans);font-variant-numeric:tabular-nums}
.enc-pill[hidden]{display:none}
.enc-pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.enc-pill svg circle{fill:currentColor;stroke:none}
.enc-pill.is-urgent span{color:var(--danger)}
.sheet.encargos{max-height:calc(100dvh - 54px);overflow:auto}
.enc-list{margin-top:8px}
.enc-label{margin:16px 0 4px;font:600 11px/16px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text-400)}
.enc-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--border-100)}
.enc-row:last-child{border-bottom:0}
.enc-glyph{flex:none;display:grid;place-items:center;width:16px;height:16px;color:var(--text-400)}
.enc-glyph svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.enc-glyph.fail{color:var(--danger)}
.enc-dot{width:8px;height:8px;border-radius:50%;background:var(--orb,#8bbdff);box-shadow:0 0 0 3px rgba(139,189,255,.4)}
.enc-txt{flex:1;min-width:0}
.enc-n{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 15px/22px var(--font-sans)}
.enc-m{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 13px/18px var(--font-sans);color:var(--text-200)}
.enc-m .err{color:var(--danger)}
.enc-when{flex:none;font:400 13px/18px var(--font-sans);color:var(--text-400);font-variant-numeric:tabular-nums}
.enc-empty{margin:16px 0 0;font:400 15px/22px var(--font-sans);color:var(--text-200)}
.sheet.encargos .whats-new-ok{width:100%}
.loc-ico{display:grid;place-items:center;width:48px;height:48px;margin:6px 0 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--border-100)}
.loc-ico svg,.loc-facts svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.loc-ico svg{width:24px;height:24px}
.loc-lead{margin:6px 0 14px;font:400 14px/20px var(--font-sans);color:var(--text-200)}
.loc-facts{display:flex;flex-direction:column;gap:12px;margin:4px 0 20px;padding:0;list-style:none}
.loc-facts li{display:flex;gap:12px;align-items:flex-start;font:400 15px/21px var(--font-sans)}
.loc-facts li svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--text-200)}
.loc-facts small{display:block;margin-top:2px;font:400 13px/18px var(--font-sans);color:var(--text-200)}
.loc-primary{min-height:48px;border:0;border-radius:12px;background:#EFEEEB;color:#1B1B1A;font:600 16px/22px var(--font-sans)}
.loc-ghost{min-height:44px;margin-top:6px;border:0;background:transparent;color:var(--text-200);font:600 16px/22px var(--font-sans)}

/* Ajustes (lavado de cara, 10/11): grouped cards with a title, as in Configuración on the PC; the close
   button filled so it reads as one; unlinking apart at the end. */
#sheet{background:var(--bg-100)}
#sheet>*{flex-shrink:0}
#sheet .sheet-head{background:var(--bg-100);padding-bottom:6px}
#sheet .sheet-head.scrolled{box-shadow:0 1px 0 var(--border-100)}
#sheet .sheet-close{background:var(--bg-200)}
#sheet .sheet-close:active{background:var(--border-100)}
.rs-gt{margin:20px 4px 8px;font:600 11px/16px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text-400)}
.sheet-head + .rs-gt{margin-top:8px}
.rs-card{margin:0 -4px;border:1px solid var(--border-100);border-radius:12px;background:var(--surface-raised);overflow:hidden}
.rs-card>.row{gap:14px;min-height:60px;padding:12px 14px;border-bottom:0}
.rs-card>:not([hidden])~:not([hidden]){border-top:1px solid var(--border-100)}
.rs-card .loc-sub{padding:10px 14px 12px;margin:0;border-bottom:0;background:var(--bg-000)}
.rs-link{position:relative}
.rs-go{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;background:transparent;color:var(--text-200)}
.rs-go::after{content:"";position:absolute;inset:0}
.rs-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#sheet .danger{margin-top:24px;height:48px;border-radius:12px;font-size:15px}
.rs-fine{margin:8px 4px 0;font:400 12px/17px var(--font-sans);color:var(--text-400);text-align:center}