/* ==========================================================================
   Cuadrilla · estilos
   Tokens, base, componentes y sistema de movimiento.
   ========================================================================== */
/* La letra del sistema (San Francisco en Mac e iPhone, Segoe UI en Windows, Roboto en Android), como Notion, GitHub o
   WhatsApp: la dibuja el propio sistema, con su ajuste a los píxeles, así que es la más nítida en cada aparato, la que la
   persona ya está acostumbrada a leer y no hay que descargar nada. */
:root{
  color-scheme:light;
  --ground:#ECEEE6; --ground2:#E4E7DC; --panel:#F7F7F3; --white:#fff; --ink:#1A1C19; --ink2:#30332E; --ink3:#4A4E47; --on-ink:#fff;
  --muted:#5E625B; --muted2:#6B6F67; --faint:#8A8E86; --line:#E3E5DE; --line2:#EFF0EA; --sep:#DDE0D6; --sel:#D0D6C7; --hover:#E1E4DA;
  --surface:#fff; --surface2:#FCFCFA; --subtle:#FAFAF7; --soft:#F5F6F1; --soft2:#EEF0EA; --border:#D7DAD0; --border2:#C9CCC3; --border3:#A9ADA3;
  --glass:rgba(255,255,255,.88); --glass-line:rgba(255,255,255,.9); --scrim:rgba(26,28,25,.32);
  --lime:#D9F27A; --lime2:#EDF6C8; --teal:#0E6B58; --teal-h:#0A5446; --amber:#F2B544; --amber2:#FFF3D6; --red:#C2412D; --red2:#FBE7E2; --green:#2F8F5B; --green2:#E3F3E8; --blue:#2F6FB5;
  --lime-tint:#F5F9E6; --lime-line:#D7E8A0; --lime-ink:#4C5A12; --blue-tint:#E3EEF9; --blue-tint2:#D3E3F4; --blue-ink:#1D3A57; --violet-tint:#EFE9F8; --violet-ink:#3C2F66;
  --amber-line:#F0DB9A; --amber-ink:#6B4B05; --green-tint:#F3FAF6; --green-line:#C6E0D4; --green-ink:#1F5A3A; --red-line:#F0D4CC;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --sh-1:0 1px 2px rgba(26,28,25,.06),0 0 0 1px rgba(26,28,25,.04);
  --sh-2:0 8px 24px -12px rgba(26,28,25,.18),0 1px 2px rgba(26,28,25,.05);
  --sh-3:0 30px 60px -24px rgba(26,28,25,.35),0 2px 6px rgba(26,28,25,.06);
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1); --out:cubic-bezier(.16,1,.3,1);
  --font:-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
}
/* Modo oscuro: lo pone theme.js en <html data-theme="dark"> (por preferencia o porque el sistema está en oscuro).
   Grises neutros (apenas un punto cálido, sin el tinte verde del claro) para que el negro sea negro y el texto, casi
   blanco: más contraste y capas que se distinguen. La lima, el único color. En el móvil va aún más oscuro (mobile.css). */
:root[data-theme=dark]{
  color-scheme:dark;
  --ground:#161615; --ground2:#1A1A19; --panel:#1B1B1A; --white:#232322; --ink:#F4F4F1; --ink2:#DADAD5; --ink3:#BDBDB7; --on-ink:#141413;
  --muted:#A6A6A0; --muted2:#9A9A94; --faint:#787873; --line:#2E2E2C; --line2:#282826; --sep:#2C2C2A; --sel:#353532; --hover:#262625;
  --surface:#232322; --surface2:#1F1F1E; --subtle:#272726; --soft:#2B2B29; --soft2:#31312F; --border:#3B3B38; --border2:#4A4A46; --border3:#5F5F5A;
  --glass:rgba(35,35,34,.86); --glass-line:rgba(255,255,255,.06); --scrim:rgba(0,0,0,.6);
  --lime2:#2D3418; --teal:#4FBF9F; --teal-h:#76D3B8; --amber2:#33290E; --red:#EE6B55; --red2:#3A1D17; --green:#52BE84; --green2:#1B2E22; --blue:#6FA8E6;
  --lime-tint:#21261A; --lime-line:#47522A; --lime-ink:#D3E98A; --blue-tint:#1C2836; --blue-tint2:#243446; --blue-ink:#A9C8EA; --violet-tint:#251F33; --violet-ink:#C8B9EE;
  --amber-line:#5A4A1C; --amber-ink:#F2C977; --green-tint:#18251E; --green-line:#2C4A3C; --green-ink:#8ED6AE; --red-line:#5A2A22;
  --sh-1:0 1px 2px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.035);
  --sh-2:0 10px 28px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);
  --sh-3:0 30px 70px -20px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body,#root{height:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:14px;line-height:1.45}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-h)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--lime);color:#1A1C19}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
code{font-family:var(--mono);font-size:.88em;background:var(--soft2);border-radius:5px;padding:1px 5px}
kbd{font-family:var(--mono);font-size:10.5px;color:var(--muted2);background:var(--soft);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;line-height:16px}
.mono{font-family:var(--mono)}
.grow{flex:1;min-width:0}
.muted{color:var(--muted2)} .small{font-size:12.5px} .block{display:block} .right{text-align:right}
.rel{position:relative}
.self-start{align-self:flex-start}
.row-end{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:6px}
.row{display:flex;gap:8px}
.mt{margin-top:22px}
.pad{padding:16px}
.ic{width:16px;height:16px;flex:none} .ic.sm{width:12px;height:12px} .ic.dim{color:var(--faint)} .ic.teal{color:var(--teal)}
.hint{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted2)}
.err{color:var(--red);font-size:13px;background:var(--red2);border-radius:var(--r-sm);padding:8px 10px}
.err-t{color:var(--red)} .ok-t{color:var(--green);display:inline-flex;align-items:center;gap:6px}
.notice{background:var(--amber2);border:1px solid var(--amber-line);color:var(--amber-ink);border-radius:var(--r);padding:10px 12px;font-size:13px}
.pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--soft2);color:var(--ink3);font-size:11.5px;font-weight:500;margin-left:6px}
.pill.lime{background:var(--lime);color:#1A1C19}
.cnt{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;font:600 11px var(--mono);background:var(--ink);color:var(--on-ink);border-radius:9px;padding:0 6px}
.cnt.soft{background:var(--soft2);color:var(--ink3)}
.udot{width:8px;height:8px;border-radius:50%;background:var(--ink);flex:none;animation:pop .45s var(--spring)}
.link-btn{border:0;background:none;color:var(--muted2);font-size:12.5px;padding:2px 0;text-decoration:underline;text-underline-offset:2px}
.link-btn:hover{color:var(--ink)}
.hint .link-btn{font-size:inherit;color:var(--ink2);padding:0}
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13.5px}
.back-link:hover{color:var(--ink)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 15px;border-radius:10px;border:1px solid var(--border);background:var(--surface);font:500 14px var(--font);color:var(--ink);white-space:nowrap;
  transition:background .15s,border-color .15s,transform .12s var(--ease),box-shadow .2s;box-shadow:0 1px 0 rgba(26,28,25,.04)}
.btn:hover{background:var(--soft);border-color:var(--border2);color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--on-ink);box-shadow:0 6px 16px -8px rgba(26,28,25,.6)}
.btn.dark:hover{background:var(--ink2);color:var(--on-ink)}
.btn.big{height:50px;padding:0 22px;border-radius:14px;font-size:15.5px;width:100%}
.btn.sm{height:30px;padding:0 11px;font-size:13px;border-radius:8px}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--hover)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger:hover{background:#A63724;color:#fff}
.btn.danger-t{color:var(--red)}
.btn.ok{background:var(--green);border-color:var(--green);color:#fff}
.btn.stop{border-color:var(--red-line);color:var(--red)}
.btn.stop:hover{background:var(--red2)}
.icon-btn{width:34px;height:34px;border:0;border-radius:9px;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--ink3);transition:background .15s,color .15s,transform .12s}
.icon-btn:hover,.icon-btn.on{background:var(--ground);color:var(--ink)}
.icon-btn:active{transform:scale(.92)}
.icon-btn.sm{width:24px;height:24px;border-radius:6px}
.icon-btn-space{width:34px;flex:none}

/* ---------- caras ---------- */
.av{--s:22px;--r:6px;position:relative;display:inline-flex;flex:none;width:var(--s);height:var(--s)}
.av>img,.av>.letter{width:100%;height:100%;border-radius:var(--r);display:flex;align-items:center;justify-content:center;object-fit:cover;font-size:calc(var(--s)*.44);font-weight:600;user-select:none}
.av .letter.lime{background:var(--lime);color:#1A1C19}
.av .iab{position:absolute;right:-3px;bottom:-3px;font:600 8px var(--mono);background:var(--lime);color:#1A1C19;border:1.5px solid var(--surface);border-radius:4px;padding:0 2px;line-height:11px;z-index:2}
.av .pres{position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:var(--border3);border:2px solid var(--ground);transition:background .3s}
.av .pres.on{background:var(--green);box-shadow:0 0 0 0 rgba(47,143,91,.5);animation:presPulse 2.6s ease-out infinite}
.av .pres.on.working{background:var(--blue);animation:none}
.av.wsi>.letter{font-size:calc(var(--s)*.46)}
/* Caras vivas (WorkerAvatar): dentro de su marco, el worker respira, se balancea un poco y parpadea, cada uno a su
   ritmo (--br, --bl y sus desfases). El parpadeo es su fotograma con los ojos cerrados, encima, un instante. */
.av>.av-pic{position:relative;display:block;width:100%;height:100%;border-radius:var(--r);overflow:hidden;isolation:isolate}
.av-pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;transform-origin:50% 100%;scale:1.05;
  animation:av-breathe var(--br,4.8s) ease-in-out var(--brd,0s) infinite,av-sway calc(var(--br,4.8s)*1.9) ease-in-out var(--brd,0s) infinite}
.av-pic>.av-blink{opacity:0;animation:av-breathe var(--br,4.8s) ease-in-out var(--brd,0s) infinite,av-sway calc(var(--br,4.8s)*1.9) ease-in-out var(--brd,0s) infinite,
  var(--blk,av-blink) var(--bl,5s) linear var(--bld,0s) infinite}
@keyframes av-breathe{0%,100%{scale:1.05}45%{scale:1.075}}
@keyframes av-sway{0%,100%{rotate:-.6deg;translate:-.4% 0}50%{rotate:.6deg;translate:.4% 0}}
@keyframes av-blink{0%,95%,100%{opacity:0}95.8%,97.8%{opacity:1}}
@keyframes av-blink2{0%,89%,92.6%,95%,100%{opacity:0}89.8%,91.4%,95.8%,97.8%{opacity:1}}
@media (prefers-reduced-motion:reduce){.av-pic>img,.av.ring .halo{animation:none!important}}
.morph{animation:morph .5s var(--spring)}
.pop{animation:pop .45s var(--spring)}
/* anillo de estado del worker */
.av.ring .halo{position:absolute;inset:calc(var(--s)*-.16);border-radius:calc(var(--r) + var(--s)*.16);pointer-events:none;opacity:0;transition:opacity .3s}
.av .privb{position:absolute;right:-4px;bottom:-4px;width:13px;height:13px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--teal);box-shadow:0 0 0 1.5px var(--ground);z-index:2}
.av .privb .ic{width:8px;height:8px}
/* Sin anillo al pensar ni al escribir: solo un arco discreto cuando trabaja con herramientas. El arco recorre el borde
   de su marco (el mismo cuadrado redondeado que su foto, no un círculo): lo que gira es el degradado, no el anillo. */
@property --arc{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes arc-run{to{--arc:360deg}}
.av.ring.st-working .halo{opacity:.85;padding:2px;background:conic-gradient(from var(--arc),transparent 0 62%,rgba(47,111,181,.55) 82%,var(--blue) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:arc-run 2.4s linear infinite}
.av.ring.st-blocked{animation:shake .4s}
.av.ring.st-done .halo{opacity:1;box-shadow:0 0 0 2px var(--green);animation:done-flash 1.2s var(--out) forwards}
.star-ic{flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.08))}
.ph{position:relative;display:inline-flex;flex:none}
.star-badge{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.2)}

/* ---------- arranque y vacíos ---------- */
.splash{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.splash.boot .logo{animation:float 1.6s ease-in-out infinite}
/* La de index.html, encima de todo hasta que la app tiene algo que enseñar; luego se funde (ui/boot.js). */
#boot{position:fixed;inset:0;z-index:1000;background:var(--ground);transition:opacity .2s var(--ease)}
#boot.out{opacity:0;pointer-events:none}
.spinner{display:inline-block;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;opacity:.7;flex:none}
.skel{display:flex;flex-direction:column;gap:10px;padding:6px 0;width:100%}
/* Asoma solo si de verdad tarda: al saltar de una conversación a otra, un esqueleto de un instante era un parpadeo. */
.skel-row{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--soft2) 0%,var(--soft) 40%,var(--soft2) 80%);background-size:300% 100%;animation:skel 1.4s ease-in-out infinite,fade .3s .35s both}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:34px 20px;color:var(--muted);animation:view-in .4s var(--out)}
.empty-state h3{margin:6px 0 0;color:var(--ink);font-size:16px;font-weight:600}
.empty-state p{margin:0;max-width:420px;font-size:13.5px;line-height:1.5}
.es-icon{color:var(--muted)}
.es-check{width:44px;height:44px;border-radius:50%;background:var(--green2);color:var(--green);display:flex;align-items:center;justify-content:center;animation:pop .6s var(--spring)}
.es-check .ic{width:22px;height:22px}

/* ---------- entrada (auth) ---------- */
.auth{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:28px 20px;position:relative;overflow:hidden;background:var(--panel)}
.auth-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.b1{width:520px;height:520px;background:radial-gradient(circle,#E2F5A0,transparent 70%);top:-160px;left:-120px;animation:drift1 18s ease-in-out infinite}
.b2{width:460px;height:460px;background:radial-gradient(circle,#BFE3D3,transparent 70%);bottom:-180px;right:-100px;animation:drift2 22s ease-in-out infinite}
.b3{width:340px;height:340px;background:radial-gradient(circle,#F3DAE2,transparent 70%);top:40%;left:60%;animation:drift3 26s ease-in-out infinite;opacity:.35}
.auth-bg .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(26,28,25,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(26,28,25,.035) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.auth-brand{position:relative;align-self:stretch;display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.auth-card{position:relative;margin:auto 0;width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:34px 30px;background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--glass-line);border-radius:24px;box-shadow:var(--sh-3);animation:card-in .6s var(--out)}
.auth-card.wide{max-width:560px}
.auth-card h1{margin:4px 0 0;font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.auth-card .lead{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5;max-width:340px}
.auth-form{width:100%;display:flex;flex-direction:column;gap:12px;text-align:left;margin-top:6px}
.auth-alt{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.auth-form .code-input{font-size:28px;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums;padding-left:.4em}
.auth-alt .link-btn{font-size:inherit}
.auth .nowrap{white-space:nowrap}
.auth-foot{position:relative;font-size:12px;color:var(--muted2);margin-top:20px}
.auth .back-link{align-self:flex-start}
.pw{position:relative;display:flex}
.pw input{flex:1;padding-right:64px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);font-size:12px;padding:4px 8px;border-radius:6px}
.pw-toggle:hover{background:var(--ground);color:var(--ink)}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.meter i{height:4px;border-radius:2px;background:var(--line);transition:background .3s}
.meter.s1 i:nth-child(-n+1){background:var(--red)} .meter.s2 i:nth-child(-n+2){background:var(--amber)} .meter.s3 i:nth-child(-n+3){background:#8BC34A} .meter.s4 i{background:var(--green)}
.ws-preview,.invite-hero{position:relative;margin-bottom:4px;isolation:isolate}
.ws-preview .wsi img{object-fit:contain;background:var(--surface)}
.ws-preview.looking::after{content:'';position:absolute;inset:-6px;border-radius:30px;background:conic-gradient(from 0deg,transparent 0 60%,var(--lime) 85%,transparent);animation:spin 1.1s linear infinite;z-index:-1;opacity:.9}
.ws-preview-x{position:absolute;right:-8px;top:-8px;width:24px;height:24px;border-radius:50%;border:0;background:var(--ink);color:var(--on-ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-2);opacity:0;transform:scale(.8);transition:opacity .2s,transform .25s var(--spring)}
.ws-preview:hover .ws-preview-x,.ws-preview-x:focus-visible{opacity:1;transform:none}
.ws-preview-x .ic{width:12px;height:12px}
.invite-sparkles i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--lime);top:50%;left:50%;opacity:0;animation:sparkle 2.4s var(--out) infinite}
.invite-sparkles i:nth-child(1){--x:-56px;--y:-30px;animation-delay:.1s} .invite-sparkles i:nth-child(2){--x:52px;--y:-36px;animation-delay:.5s;background:var(--teal)}
.invite-sparkles i:nth-child(3){--x:-46px;--y:34px;animation-delay:.9s} .invite-sparkles i:nth-child(4){--x:58px;--y:26px;animation-delay:1.3s;background:var(--amber)} .invite-sparkles i:nth-child(5){--x:0;--y:-58px;animation-delay:1.7s}
.big-input{font-size:20px!important;font-weight:600;height:54px!important;letter-spacing:-.01em}
.logo{color:var(--ink)}
.logo.anim rect{transform-box:fill-box;transform-origin:center;animation:logo-in .7s var(--spring) both}
.logo.anim .l2{animation-delay:.08s} .logo.anim .l3{animation-delay:.16s} .logo.anim .l4{animation-delay:.24s}

/* ---------- campos ---------- */
.field{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted);text-align:left}
.field>span{font-weight:500;color:var(--ink3)}
.field input,.field textarea,.field select,.card-reply input,.linkbox input,.irep input{height:42px;border:1px solid var(--border);border-radius:10px;padding:0 12px;font:14.5px var(--font);color:var(--ink);background:var(--surface);outline:none;transition:border-color .15s,box-shadow .2s}
.field textarea{height:auto;padding:10px 12px;line-height:1.5;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus,.card-reply input:focus,.hashin:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(217,242,122,.55)}
.field.has-err input{border-color:var(--red)}
.ferr{color:var(--red);font-size:12.5px;animation:view-in .25s}
.hashin{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:10px;padding:0 12px;background:var(--surface);transition:border-color .15s,box-shadow .2s}
.hashin>span{color:var(--muted2);font-family:var(--mono)}
.hashin input{border:0!important;box-shadow:none!important;outline:none;height:40px;padding:0!important;flex:1;min-width:0;background:transparent}
.checklist{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow:auto;border:1px solid var(--line2);border-radius:12px;padding:4px}
.check{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;cursor:pointer;font-size:14px;color:var(--ink);transition:background .15s}
.check:hover{background:var(--soft)} .check.on{background:var(--lime-tint)}
.check input{width:16px;height:16px;accent-color:var(--ink);margin:0}
button.check{width:100%;border:0;background:none;text-align:left}
button.check:disabled{opacity:.55;cursor:default}
.linkbox{display:flex;gap:8px}
.linkbox input{flex:1;min-width:0;font:12.5px var(--mono);background:var(--subtle)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:28px;height:28px;border-radius:9px;border:0;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .2s var(--spring),box-shadow .2s}
.swatch:hover{transform:scale(1.12)}
.swatch.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink);transform:scale(1.05)}
.switch{position:relative;display:inline-flex;flex:none;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch i{width:36px;height:22px;border-radius:11px;background:var(--border2);position:relative;transition:background .25s}
.switch i::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .3s var(--spring)}
.switch input:checked+i{background:var(--teal)} .switch input:checked+i::after{transform:translateX(14px)}
.switch input:focus-visible+i{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- diálogos y menús ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:40;padding:16px;animation:fade .2s}
.scrim.top{align-items:flex-start;padding-top:12vh}
.sheet{position:relative;width:480px;max-width:100%;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);border-radius:22px;box-shadow:var(--sh-3);padding:24px;display:flex;flex-direction:column;gap:16px;animation:sheet-in .38s var(--spring)}
.sheet.wide{width:640px}
.sheet.sheet-review{width:720px}
.sheet-x{position:absolute;right:12px;top:12px}
.m-grab{display:none}
.sheet-h{display:flex;align-items:center;gap:14px;padding-right:30px}
.sheet-h h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.015em}
.sheet-h p{margin:3px 0 0;font-size:13.5px;color:var(--muted);line-height:1.45}
.sheet-f{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:4px}
/* En el móvil los botones del modal no se van con el scroll: siempre a mano, abajo. */
@media (max-width:640px){
  .sheet{padding:20px 18px}
  .sheet-f{position:sticky;bottom:-20px;z-index:1;margin:0 -18px -20px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line2)}
  .sheet-f .btn{flex:1 1 0;justify-content:center;min-height:44px}
}
.perms{list-style:none;margin:0;padding:12px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:10px;font-size:14px}
.perms li{display:flex;flex-direction:column;gap:1px;animation:view-in .4s var(--out) both}
.perms li:nth-child(2){animation-delay:.05s} .perms li:nth-child(3){animation-delay:.1s} .perms li:nth-child(4){animation-delay:.15s}
.perms span{color:var(--muted);font-size:13px}
.fine{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted2)}
.tabs-line{display:flex;gap:4px;border-bottom:1px solid var(--line2);margin:-4px 0 2px}
.tab-l{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;padding:9px 10px;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .25s}
.tab-l:hover{color:var(--ink)} .tab-l.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:500}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);padding:6px;z-index:30;animation:menu-in .22s var(--out);transform-origin:top right}
.menu.up{top:auto;bottom:calc(100% + 8px);left:0;right:0;transform-origin:bottom center}
.mi{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;border-radius:9px;background:transparent;font-size:14px;color:var(--ink);text-align:left;transition:background .12s}
.mi:hover,.mi:focus-visible{background:var(--soft);color:var(--ink)} .mi:focus-visible{outline:none} .mi.strong{font-weight:600} .mi.danger{color:var(--red)}
.mi-info{padding:8px 10px 10px;font-size:13px;border-bottom:1px solid var(--line2);margin-bottom:4px;display:flex;flex-direction:column;gap:1px}
.mi-info small{color:var(--muted);font-size:12px}
.toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;z-index:75;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--on-ink);font-size:13.5px;padding:10px 14px;border-radius:12px;box-shadow:var(--sh-3);animation:toast-in .4s var(--spring)}
.toast.tone-danger{background:var(--red);color:#fff}
.toast.leaving{animation:toast-out .3s var(--ease) forwards}
.toast-act{border:0;background:color-mix(in srgb,currentColor 15%,transparent);color:inherit;border-radius:7px;padding:4px 8px;font-size:12.5px}

/* ---------- armazón ---------- */
.shell{display:flex;gap:10px;height:100%;padding:10px}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.panel{flex:1;min-height:0;background:var(--surface);border-radius:16px;box-shadow:var(--sh-1);position:relative;overflow:hidden}
.panel.center{display:flex;align-items:center;justify-content:center;padding:32px}
.view-in{animation:view-in .4s var(--out)}
/* El modo simulado, en la cabecera de las conversaciones con workers */
.sim{color:var(--red);font-weight:600}
.chat-h .subrow{display:flex;align-items:center;gap:8px;min-width:0}
.chat-h .subrow .sim{font-size:12.5px;white-space:nowrap}
.noticebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--lime-tint);border:1px solid var(--lime-line);color:var(--ink2);font-size:13px;line-height:1.4;padding:8px 10px 8px 14px;border-radius:12px;animation:view-in .4s}
@media (max-width:640px){.noticebar .grow{flex-basis:100%}.noticebar .btn{flex:1 1 0;justify-content:center;min-height:40px}}
.offline{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--on-ink);font-size:12.5px;padding:6px 12px;border-radius:999px;z-index:70;animation:toast-in .3s var(--spring)}
.offline::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:7px;vertical-align:1px}

/* ---------- barra lateral ---------- */
.side{width:252px;flex:none;display:flex;flex-direction:column;min-height:0;transition:width .32s var(--out)}
/* marca de la app */
/* Todos los iconos (también el de plegar) van en una columna fija a 25px del borde: 4px + 10px + la mitad de los 22px del hueco.
   La barra plegada mide 50px, así que esa columna queda centrada y al plegar/desplegar nada se mueve de sitio. */
.side-top{flex:none;display:flex;align-items:center;gap:6px;padding:4px 4px 6px 8px}
.side-search-w{flex:none;display:inline-flex}
.side-search{color:var(--muted)}
.app-brand{flex:1;min-width:0;display:flex;align-items:center;gap:8px;color:var(--ink);font:600 15px var(--font);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;animation:fade .3s var(--ease)}
.secadd-w{margin-left:auto;display:inline-flex}
.secadd-w+.secadd-w{margin-left:-4px} /* varios botones en la cabecera: juntos a la derecha, no repartidos */
.app-brand:hover{color:var(--ink)}
.app-brand .logo{flex:none;transition:transform .35s var(--spring)}
.app-brand:hover .logo{transform:rotate(-8deg) scale(1.06)}
/* menú de cuenta con la zona del espacio */
.acct-menu{min-width:270px}
.org-zone{margin:-2px -2px 6px;padding:4px 2px 6px;border-radius:12px;background:var(--soft);border:1px solid var(--line2)}
.org-h{display:flex;align-items:center;gap:10px;padding:8px 10px 10px}
.org-h b{display:block;font-size:14.5px;letter-spacing:-.01em}
.org-h small{display:block;font-size:12px;color:var(--muted)}
.org-zone .mi:hover{background:var(--ground)}
.mi-foot{padding:8px 10px 4px;margin-top:4px;border-top:1px solid var(--line2);font-size:11.5px;color:var(--muted2)}
.side-toggle{color:var(--muted)}
.side-toggle-w{flex:none}
.nav-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:22px}
.nav-tipw{display:block}
.ucnt{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ink);color:var(--on-ink);font:600 11.5px/20px var(--font);text-align:center;flex:none;animation:pop .35s var(--spring)}
.nav.on .ucnt{background:var(--teal)}
.ic-dot{position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--ink);border:2px solid var(--ground);animation:pop .4s var(--spring)}
.ic-cnt{position:absolute;right:-9px;top:-8px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--ink);color:var(--on-ink);font:600 10px/16px var(--mono);text-align:center;animation:pop .4s var(--spring)}
/* barra plegada: solo iconos */
.side.collapsed{width:50px}
.side.collapsed .lbl{display:none!important}
.side.collapsed .nav{justify-content:center;padding:0;height:34px}
/* separadores simétricos: la misma distancia arriba y abajo */
.side.collapsed .sec{padding:0;height:0;border-top:1px solid var(--sep);margin:8px 14px}
.side.collapsed .sec .secadd-w,.side.collapsed .nav.invite,.side.collapsed .nav.empty-cta{display:none}
.side-add{display:none}
.side.collapsed .side-add{display:flex;justify-content:center;flex:none;height:34px;align-items:center}
.add-dash{width:32px;height:32px;border-radius:10px;border:1.5px dashed var(--border3);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s,transform .25s var(--spring)}
.add-dash:hover,.add-dash.on{border-color:var(--ink);color:var(--ink);transform:translateY(-2px) scale(1.05)}
.add-dash.on .ic{transform:rotate(45deg)}
.add-dash .ic{transition:transform .25s var(--spring)}
.menu.flyout{right:auto;min-width:220px;z-index:80;transform-origin:left center;animation:sub-in .22s var(--out)}
.side.collapsed .me{justify-content:center;padding:7px 0}
.side.collapsed .side-scroll{scrollbar-width:none}
.side.collapsed .menu.up{right:auto;width:250px}
.side-scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:1px;padding:4px 4px 10px}
.nav{position:relative;display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:9px;color:var(--ink2);font-size:14px;border:0;background:transparent;width:100%;text-align:left;transition:background .15s,color .15s}
.nav:hover{background:var(--hover);color:var(--ink)}
.nav.on{background:var(--sel);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(26,28,25,.06)}
.nav.unread{font-weight:600;color:var(--ink)}
/* Canal silenciado (STU-84): atenuado, con la campana tachada y sin destacar lo no leído. */
.nav.muted{color:var(--muted2)} .nav.muted .nav-ic{opacity:.6} .nav.muted:hover,.nav.muted.on{color:var(--ink2)}
.mute-ic{display:inline-flex;align-items:center;color:var(--muted2);flex:none}
.mi-note{padding:0 10px 6px 36px;max-width:270px;font-size:11.5px;line-height:1.35;color:var(--muted2)}
.nav.pr{}
.nav.wk .grow{display:flex;flex-direction:column;min-width:0}
.wk-name{display:flex;align-items:center;gap:5px;min-width:0}
.wk-name .ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-sub{font-size:11.5px;font-weight:400;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:view-in .3s}
.nav.invite,.nav.empty-cta{color:var(--muted)}
.nav.more{color:var(--muted)} .nav.more .nav-ic .ic{transition:transform .2s} .nav.more.open .nav-ic .ic{transform:rotate(180deg)}
.dash{width:22px;height:22px;border-radius:7px;border:1.5px dashed var(--border3);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);flex:none}
.sec{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted2);padding:12px 4px 4px 10px}
.secadd{margin-left:auto;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:6px;color:var(--ink3);transition:background .15s,transform .2s var(--spring)}
.secadd:hover{background:var(--hover);transform:rotate(90deg)}
.secadd.browse:hover{transform:none}
.subs{display:flex;flex-direction:column;margin:1px 0 4px 21px;border-left:1.5px solid var(--border2);padding-left:2px}
.sub{display:flex;align-items:center;gap:8px;padding:3px 10px;font-size:12.5px;color:var(--ink3);animation:slide-in .4s var(--out) both}
.sub-spin{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--teal);border-right-color:transparent;animation:spin .8s linear infinite;margin-left:auto}
.side-foot{flex:none;padding:8px 4px 2px;border-top:1px solid var(--sep)}
.me-wrap{position:relative}
.me-dot{position:absolute;left:-2px;top:-2px;width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--ground);animation:pop .45s var(--spring)}
.mi-sep{height:1px;background:var(--line2);margin:4px 6px}
.mi-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;animation:pop .45s var(--spring)}
.mi kbd{margin-left:auto}
.msub{position:relative}
.msub.open>.mi{background:var(--soft)}
.menu.menu-sub{top:auto;bottom:-6px;left:calc(100% + 8px);right:auto;min-width:250px;transform-origin:bottom left;animation:sub-in .22s var(--out)}
.ws-mi.cur{font-weight:600}
@keyframes sub-in{from{opacity:0;transform:translateX(-6px) scale(.98)}}
.me{width:100%;display:flex;align-items:center;gap:10px;padding:7px 8px 7px 5px;border:0;border-radius:12px;background:transparent;font-size:14px;text-align:left;color:var(--ink);transition:background .15s}
.me:hover,.me.on{background:var(--hover)}
.me small{display:block;font-size:12px;color:var(--muted)}

/* ---------- buscador ---------- */
.palette{width:580px;max-width:100%;background:var(--surface);border-radius:18px;box-shadow:var(--sh-3);overflow:hidden;animation:palette-in .3s var(--spring)}
.palette input{width:100%;height:56px;border:0;border-bottom:1px solid var(--line2);padding:0 20px;font-size:16px;outline:none}
.hits{max-height:56vh;overflow:auto;padding:6px}
.hit-group{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted2);padding:10px 10px 4px}
.hit{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:transparent;text-align:left;color:var(--ink);transition:background .1s}
.hit.on{background:var(--soft2)}
.hit-ic{width:24px;display:flex;justify-content:center;color:var(--ink3)}
.hit b{display:block;font-size:14px;font-weight:500}
.hit small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hits-empty{padding:26px;text-align:center;color:var(--muted)}

/* ---------- conversación ---------- */
.chat{display:flex;flex-direction:column}
.chat-h{display:flex;align-items:center;gap:12px;min-height:66px;box-sizing:border-box;padding:12px 18px;border-bottom:1px solid var(--line);position:relative;z-index:3;background:var(--glass);backdrop-filter:blur(8px)}
.chat-h .title{font-size:16px;font-weight:600;display:flex;align-items:center;gap:6px;letter-spacing:-.01em}
.chat-h .subt{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.state-dot{width:7px;height:7px;border-radius:50%;background:var(--border2);flex:none;transition:background .3s}
.state-dot.st-thinking{background:var(--lime);box-shadow:0 0 0 3px rgba(217,242,122,.45);animation:breath 1.2s infinite}
.state-dot.st-working,.state-dot.st-writing{background:var(--teal);animation:breath 1s infinite}
.state-dot.st-waiting{background:var(--amber)} .state-dot.st-blocked{background:var(--red)} .state-dot.st-done{background:var(--green)}
/* el estado de un worker, como el de una persona: en línea (verde) o trabajando (azul) */
.state-dot.pres-online{background:var(--green)} .state-dot.pres-working{background:var(--blue);animation:breath 1s infinite}
.ch-icon{width:36px;height:36px;border-radius:11px;background:var(--ground);display:flex;align-items:center;justify-content:center;color:var(--ink2);flex:none}
/* Un canal con color propio: el trazo de su # en ese color, mezclado con la tinta del tema para que se lea en claro y en
   oscuro (un lima puro no se vería sobre claro); en los iconos con recuadro, además, un fondo muy suave del mismo color. */
.tinted,.tinted .ic,.tinted .ic.dim{color:color-mix(in oklab,var(--chc) 72%,var(--ink));color:oklch(from var(--chc) .5 c h)}
:root[data-theme=dark] :is(.tinted,.tinted .ic,.tinted .ic.dim){color:oklch(from var(--chc) .78 c h)}
.ch-icon.tinted,.m-chface.tinted{background:color-mix(in oklab,var(--chc) 16%,var(--soft2))}
:root[data-theme=dark] :is(.ch-icon.tinted,.m-chface.tinted){background:color-mix(in oklab,oklch(from var(--chc) .6 c h) 20%,var(--soft2))}
.swatch.none{background:transparent;box-shadow:inset 0 0 0 1.5px var(--border3);position:relative}
.swatch.none::after{content:'';position:absolute;left:5px;right:5px;top:50%;height:1.5px;background:var(--border3);transform:rotate(-45deg)}
/* «Otro color»: el selector del sistema, escondido bajo el muestrario. Sin elegir, un + sobre un arcoíris suave. */
.swatch.custom{position:relative;display:grid;place-items:center;cursor:pointer;overflow:hidden}
.swatch.custom.empty{background:conic-gradient(from 90deg,#e8684a,#f2b544,#d9f27a,#0e6b58,#d6e6f5,#3b3f9e,#e3ddf3,#e8684a)}
.swatch.custom .ic{width:14px;height:14px;color:#fff;filter:drop-shadow(0 0 2px rgba(0,0,0,.45))}
.swatch.custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.menu.ch-menu{min-width:220px;z-index:40}
.members-btn{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px 0 10px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink2);transition:border-color .15s,box-shadow .2s}
.members-btn:hover{border-color:var(--ink);box-shadow:var(--sh-2)}
.stackf{display:flex}
.stackf>.av{margin-left:-7px;box-shadow:0 0 0 2px var(--surface);border-radius:8px}
.stackf>.av:first-child{margin-left:0}
.thread{flex:1;min-height:0;overflow:auto;padding:18px 24px 8px;scroll-behavior:smooth}
/* Sin barra de scroll a la vista (ni el carril vacío), en el hilo y en la barra lateral: se desplaza igual, y la barra fina asoma solo al pasar por encima. */
.thread,.side-scroll{scrollbar-width:thin;scrollbar-color:transparent transparent}
.thread:hover,.side-scroll:hover{scrollbar-color:color-mix(in srgb,var(--faint) 60%,transparent) transparent}
.thread-in{display:flex;flex-direction:column;gap:14px;min-height:100%;justify-content:flex-end}
.load-older{align-self:center;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:12.5px;color:var(--muted)}
.load-older:hover{color:var(--ink);border-color:var(--ink)}
.day-sep{display:flex;align-items:center;gap:12px;color:var(--muted2);font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin:6px 0}
.day-sep::before,.day-sep::after{content:'';flex:1;height:1px;background:var(--line2)}
/* Donde empieza lo que no habías leído (como en Slack): una línea con «Mensajes nuevos» a la derecha. */
.thread:not(.bubbles) .unread-sep{display:flex;align-items:center;gap:10px;color:var(--red);font-size:11.5px;font-weight:600;margin:4px 0}
.thread:not(.bubbles) .unread-sep::before{content:'';flex:1;height:1px;background:var(--red);opacity:.7}
.msg{display:flex;gap:12px;position:relative}
.msg.enter{animation:msg-in .45s var(--out) both}
/* Las tarjetas y sus opciones entran con su mensaje nuevo; al volver a una conversación, ya están ahí. */
.thread :is(.msg,.bmsg) :is(.card,.opt):not(:is(.enter *)){animation:none}
/* backwards, no both: el clip-path final no debe quedarse puesto, recortaría los botones de acción que asoman por encima. */
.msg.from-worker.enter .bubble:last-child{animation:reveal-down .5s var(--out) backwards}
.who{display:flex;align-items:baseline;gap:7px;font-size:14.5px}
.who b{font-weight:600}
.iatag{font:600 9px var(--mono);color:var(--ink3);background:var(--lime2);border-radius:4px;padding:1px 4px;align-self:center}
.newtag{display:inline-block;font:600 10px var(--font);color:var(--green);background:var(--green2);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:1px;line-height:1.4}
.t{font-size:11.5px;color:var(--muted2);white-space:nowrap}
.bubble{position:relative;border-radius:10px;margin:0 -8px;padding:2px 8px;transition:background .15s}
.bubble:hover{background:var(--subtle)}
.bubble.pending{opacity:.55}
.bubble.failed{background:var(--red2)}
/* Con reacciones al final, el sombreado acaba a media altura de ellas: quedan medio fuera, como en una app de mensajería. */
.bubble:is(:has(>.reacts:last-child),:has(>.reacts+.msg-acts)){isolation:isolate}
.bubble:is(:has(>.reacts:last-child),:has(>.reacts+.msg-acts)):is(:hover,.failed,.in-hilo){background:none}
.bubble:is(:has(>.reacts:last-child),:has(>.reacts+.msg-acts))::before{content:'';position:absolute;inset:0 0 13px;border-radius:inherit;background:transparent;transition:background .15s;z-index:-1}
.bubble:is(:has(>.reacts:last-child),:has(>.reacts+.msg-acts)):hover::before{background:var(--subtle)}
.bubble.failed:is(:has(>.reacts:last-child),:has(>.reacts+.msg-acts))::before{background:var(--red2)}
.bubble.in-hilo:is(:has(>.reacts:last-child),:has(>.reacts+.msg-acts))::before{background:var(--blue-tint2)}
.bubble>.reacts .react:not(.mine){background:var(--panel)}
/* Cada mensaje, una fila de lado a lado (como en Slack): el sombreado cubre también la columna de la cara. */
.msg.rows .bubble{padding-left:56px}
.msg.rows .bubble.head{padding-top:6px;margin-top:-4px}
.msg-av{position:absolute;left:8px;top:6px;display:flex}
.msg.rows .bubble:hover .av-pair-p{box-shadow:0 0 0 2.5px var(--subtle)}
.msg.rows .replies-bar,.msg.rows .call-sum{margin-left:48px}
.msg-acts{position:absolute;right:4px;top:-10px;display:none;gap:4px;z-index:3}
.bubble:hover .msg-acts,.msg-acts:focus-within,.msg-acts:has(.rpick-pop){display:flex;animation:pop .25s var(--spring)}
.reply-btn{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--ink3);box-shadow:var(--sh-2);transition:transform .2s var(--spring),color .15s}
.reply-btn:hover{color:var(--ink);transform:translateY(-1px) scale(1.06)}
.rpick{position:relative;display:inline-flex}
.rpick-pop{position:absolute;right:0;bottom:calc(100% + 6px);display:flex;gap:2px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:var(--sh-3);animation:menu-in .2s var(--out);transform-origin:bottom right;white-space:nowrap}
.rpick-pop button{width:32px;height:32px;border:0;border-radius:50%;background:transparent;font-size:18px;line-height:1;animation:chip-in .3s var(--spring) both;transition:transform .2s var(--spring),background .15s}
.rpick-pop button:hover{background:var(--soft);transform:scale(1.25) translateY(-2px)}
.reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.react{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 8px;border-radius:999px;border:1px solid var(--line);background:var(--subtle);font-size:14px;line-height:1;color:var(--ink3);transition:background .15s,border-color .15s,transform .2s var(--spring)}
.react:not(:disabled):hover{border-color:var(--border2);transform:translateY(-1px)}
.react.mine{background:var(--lime-tint);border-color:var(--lime-line);color:var(--lime-ink)}
/* El emoji salta solo cuando llega la reacción con la conversación abierta, no cada vez que la abres (`useArrived`). */
.react .e{display:inline-block}
.react small{font:600 11.5px var(--mono)}
.react:disabled{cursor:default}
.quote{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);border-left:2px solid var(--line);padding-left:8px;margin:2px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* El texto de los mensajes, a tamaño de lectura (15 px, como Slack): 14 se queda pequeño para leer seguido. */
.txt{font-size:15px;line-height:1.5;word-wrap:break-word}
.txt p{margin:0 0 8px} .txt p:last-child{margin-bottom:0}
.txt ul,.txt ol{margin:2px 0 8px;padding-left:22px} .txt li{margin:2px 0}
.txt .h{font-weight:600;margin-bottom:2px}
/* Una cita, discreta: el verde lima es de lo que te toca contestar (las tarjetas abiertas), no de lo citado. */
.txt blockquote{margin:4px 0;padding:1px 10px;border-left:2px solid var(--border3);color:var(--muted)}
.txt a{text-decoration:underline;text-underline-offset:2px}
.txt li>ul,.txt li>ol{margin:2px 0 2px}
.txt s{text-decoration-thickness:1px}
/* Bloque de código en un mensaje (ui/bits.jsx › CodeBlock): tal cual, de lado si no cabe, con «Copiar». */
.md-code{position:relative;margin:4px 0 8px}
.md-code:last-child{margin-bottom:0}
.md-code pre{margin:0;padding:10px 40px 10px 12px;background:var(--soft);border:1px solid var(--line2);border-radius:10px;overflow-x:auto;font:12.5px/1.55 var(--mono);color:var(--ink2);white-space:pre;tab-size:2}
.md-code pre code{background:none;padding:0;border-radius:0;font:inherit}
.md-copy{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:7px;background:var(--surface);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,color .15s;box-shadow:0 0 0 1px var(--line2)}
.md-code:hover .md-copy,.md-copy:focus-visible{opacity:1}
.md-copy:hover{color:var(--ink)}
@media (pointer:coarse){.md-copy{opacity:1}}
.at{background:var(--lime2);border-radius:5px;padding:0 3px;font-weight:500;color:var(--ink)}
/* Una mención que lleva a una conversación (ui/MentionChip.jsx): sin subrayado, se nota al pasar por encima. */
.txt a.at-link,a.at-link{color:var(--ink);text-decoration:none;cursor:pointer;transition:background .15s}
a.at-link:hover{background:var(--lime-line);color:var(--ink)}
/* Quien escribe un mensaje (su cara, su nombre) y las filas de quién está en un canal (ui/WhoCard.jsx, `AuthorLink`): la
   misma tarjeta que una @mención; como un nombre normal, y se nota al pasar por encima. */
a.who-link{color:inherit;text-decoration:none;cursor:pointer;display:inline-flex;align-items:inherit;min-width:0}
a.who-link:hover b,a.who-link:focus-visible b{text-decoration:underline;text-underline-offset:2px}
.mrow-who{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.ment-card{z-index:90;width:280px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);padding:14px;display:flex;flex-direction:column;gap:12px;animation:menu-in .18s var(--out)}
.mc-top{display:flex;align-items:center;gap:12px;min-width:0}
.mc-who{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
/* El estado, a la derecha en la fila del nombre: si no cabe, se corta el nombre y el estado se lee entero. */
.mc-name{display:flex;align-items:center;gap:10px;min-width:0}
.mc-who b{display:flex;align-items:center;gap:6px;min-width:0;font-size:15px;font-weight:600}
.mc-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mc-who b .iatag{flex:none}
.mc-st{margin-left:auto;flex:none;font-size:11.5px;color:var(--muted)}
.mc-st.working{color:var(--blue)}
.mc-who small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-who small.mc-ident{white-space:normal}
/* El punto de estado de la foto, sobre la tarjeta (su borde, del color de la tarjeta). */
.ment-card .av .pres{right:-3px;bottom:-3px;width:13px;height:13px;border-width:2.5px;border-color:var(--surface)}
.mc-go{align-self:stretch;justify-content:center}
.files{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.file-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:6px 6px 6px 10px;background:var(--surface);font-size:13px}
.file-chip .fname{font-weight:500;color:var(--ink);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-chip small{color:var(--muted2)}
.sys{display:flex;align-items:center;gap:9px;padding:2px 0;margin-left:48px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.sys.enter{animation:view-in .4s var(--out)}
.sys>.ic{color:var(--faint)}
.sys .t{margin-left:2px}
.ev-stopped,.ev-run_failed{color:var(--red)}
.ev-stopped>.ic,.ev-run_failed>.ic{color:var(--red)}
.ev-right_hand{color:var(--ink)}
.run-events{align-self:flex-start;max-width:calc(100% - 48px);margin-left:48px}
.run-events.enter{animation:view-in .4s var(--out)}
.run-sum{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--subtle);border-radius:999px;padding:5px 12px 5px 10px;font-size:12.5px;color:var(--ink3);max-width:100%;transition:border-color .15s,background .15s}
.run-sum:not(.solo):hover{border-color:var(--border);background:var(--soft)}
.run-sum>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.run-sum .chev{transition:transform .25s var(--ease);color:var(--faint)}
.run-events.open .chev{transform:rotate(90deg)}
.run-list{list-style:none;margin:6px 0 0 14px;padding:0 0 0 12px;border-left:1.5px solid var(--line);display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink3)}
.run-list li{display:flex;gap:10px;justify-content:space-between;animation:slide-in .3s var(--out) both}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-left:48px}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:13.5px;color:var(--ink);text-align:left;
  animation:chip-in .45s var(--spring) both;transition:border-color .15s,transform .2s var(--spring),box-shadow .2s}
.chip:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-2)}
.chip .ic{color:var(--teal)}
.chip.sm{min-height:28px;padding:3px 11px;font-size:12.5px;animation:none}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.nudge{display:flex;align-items:center;gap:12px;max-width:600px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:linear-gradient(120deg,var(--lime-tint),var(--surface));font-size:13.5px;line-height:1.45;color:var(--ink2)}
.nudge.enter{animation:msg-in .5s var(--out)}
.shimmer{background:linear-gradient(90deg,var(--muted) 0%,var(--ink) 40%,var(--muted) 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 1.8s linear infinite}
.composer{position:relative;margin:4px 20px 2px;border:1px solid var(--line);border-radius:16px;padding:8px 8px 8px 6px;background:var(--surface);transition:border-color .15s}
.composer:focus-within{border-color:var(--faint)}
.composer.drag{border-color:var(--teal);border-style:dashed;background:var(--green-tint)}
.composer-row{display:flex;align-items:flex-end;gap:6px}
.composer-more{position:relative;display:inline-flex}
.menu.composer-menu{top:auto;bottom:calc(100% + 10px);left:-2px;right:auto;min-width:280px;transform-origin:bottom left}
.composer-menu .mi{white-space:nowrap}
.composer-menu .mi small{font:11px var(--mono);color:var(--muted2)}
.mi:disabled{color:var(--ink3);cursor:default} .mi:disabled:hover{background:transparent}
.soon{font-size:11px;font-weight:500;color:var(--teal);background:var(--lime2);border-radius:999px;padding:2px 8px}
.icon-btn.listening{background:var(--red2);color:var(--red);animation:mic-pulse 1.4s ease-in-out infinite}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(194,65,45,.35)}50%{box-shadow:0 0 0 5px rgba(194,65,45,0)}}
.composer textarea{flex:1;border:0;outline:none;resize:none;overflow-y:hidden;font:15px/1.5 var(--font);color:var(--ink);background:transparent;padding:6px 4px;max-height:min(330px,40vh);min-height:34px}
/* Un mensaje largo: el campo se desplaza sin la barra gruesa del navegador a la vista; la fina asoma al pasar por encima,
   como en la conversación. Su hueco va siempre reservado, para que el texto no cambie de línea al aparecer. */
.composer textarea{scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-gutter:stable}
.composer textarea:hover{scrollbar-color:color-mix(in srgb,var(--faint) 60%,transparent) transparent}
/* Menciones resaltadas mientras escribes: un espejo detrás del campo con el mismo texto (transparente) y un fondo bajo
   cada mención (Composer › MentionMirror). El campo va encima, transparente. */
.cmp-box{display:contents}
.cmp-contents{display:contents}
.cmp-field{position:relative;flex:1;min-width:0;display:flex}
.cmp-field>textarea{position:relative;z-index:1;flex:1;width:100%;background:transparent}
.cmp-hl{position:absolute;inset:0;z-index:0;overflow:hidden;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;color:transparent;pointer-events:none;border-style:solid;border-color:transparent;margin:0}
.cmp-hl mark{color:transparent;background:var(--lime2);border-radius:4px;box-shadow:0 0 0 2px var(--lime2)}
/* Respuestas sugeridas (Composer › suggestions): botones encima del campo; al pulsar uno se escribe en él. */
.sug-chips.sug-out{margin:6px 20px 6px;gap:6px;flex-wrap:wrap;justify-content:flex-start}
.sug-chips.sug-out .chip{flex:none;min-height:32px;font-size:13px}
/* Cada sugerencia es una píldora con dos partes: el texto (lo escribe en el campo) y una flecha que la envía ya. Al
   enviarla, la flecha sale disparada hacia arriba, la píldora se va detrás y las demás se apagan. */
.sug-pill{padding:0;gap:0;overflow:hidden;cursor:default}
.sug-pill .sug-t{border:0;background:none;color:inherit;font:inherit;padding:5px 6px 5px 13px;cursor:pointer;text-align:left;min-height:inherit}
.sug-pill .sug-go{flex:none;width:24px;height:24px;margin:3px 4px 3px 2px;border:0;border-radius:50%;background:var(--soft2);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .25s var(--spring),background .2s,color .2s}
.sug-pill .sug-go .ic,.sug-pill .sug-go svg{width:13px;height:13px;color:inherit;stroke-width:2.4}
.sug-pill:hover .sug-go,.sug-pill .sug-go:focus-visible{background:var(--ink);color:var(--surface)}
.sug-pill .sug-go:hover{transform:scale(1.12)}
.sug-pill .sug-go:hover svg{animation:sug-nudge .6s var(--spring) infinite}
.sug-pill .sug-go:active{transform:scale(.92)}
.sug-chips.flying .sug-pill:not(.go){animation:none;opacity:.35;transform:scale(.97);transition:opacity .2s,transform .2s}
.sug-pill.go{animation:sug-away .26s cubic-bezier(.5,0,.75,0) forwards;border-color:var(--ink)}
.sug-pill.go .sug-go{background:var(--ink);color:var(--surface)}
.sug-pill.go .sug-go svg{animation:sug-shoot .26s cubic-bezier(.5,0,.75,0) forwards}
@keyframes sug-nudge{0%,100%{transform:none}50%{transform:translateY(-2px)}}
@keyframes sug-shoot{to{transform:translateY(-16px);opacity:0}}
@keyframes sug-away{40%{transform:translateY(2px) scale(1.02)}100%{transform:translateY(-14px) scale(.96);opacity:0}}
@media (hover:none){.sug-pill .sug-go{background:var(--ink);color:var(--surface)}}
@media (prefers-reduced-motion:reduce){.sug-pill.go,.sug-pill.go .sug-go svg,.sug-pill .sug-go:hover svg{animation:none}}
/* Barra de formato (chat/FormatBar.jsx): encima del texto, dentro del recuadro; «Aa» la enseña u oculta. */
.fmt-bar{display:flex;align-items:center;gap:2px;padding:0 2px 6px;margin:0 0 4px 34px;border-bottom:1px solid var(--line2)}
.fmt-btn{width:30px;min-width:24px;height:28px;flex:0 1 30px;border:0;border-radius:7px;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s}
.fmt-btn:hover,.fmt-btn:focus-visible{background:var(--ground);color:var(--ink)}
.fmt-btn:active{transform:scale(.94)}
.fmt-g{font:600 14px/1 var(--font);text-decoration-thickness:1.5px}
.fmt-i{font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:15px}
.fmt-sep{width:1px;height:16px;margin:0 5px;background:var(--line);flex:none}
.fmt-aa{font:600 13px/1 var(--font);letter-spacing:-.02em}
.fmt-toggle{color:var(--muted)}
.fmt-toggle.on{color:var(--ink)}
.fmt-link{display:flex;flex-direction:column;gap:14px}
.fmt-btn.on{background:var(--ground);color:var(--ink)}
.fmt-emo{font-size:15px;line-height:1;filter:grayscale(1);opacity:.75;transition:filter .15s,opacity .15s}
.fmt-btn:hover .fmt-emo,.fmt-btn.on .fmt-emo{filter:none;opacity:1}
/* Poco ancho (el panel de un hilo, que baja a 320 px, o una conversación estrecha): el texto ocupa toda la línea y los
   botones van debajo (adjuntar a la izquierda; formato, micro y enviar a la derecha); la barra de formato empieza en el
   borde y encoge sus botones para que quepa entera, también el 🙂. Se mide el propio recuadro, no la pantalla. En el
   móvil (compact) no: allí el campo es otro y una hoja sale desde dentro. */
.composer:not(.compact){container:composer/inline-size}
@container composer (max-width:439px){
  .composer-row{flex-wrap:wrap;row-gap:2px}
  .cmp-field{order:-1;flex:1 0 100%}
  .composer-row .fmt-toggle{margin-left:auto}
  .fmt-bar{margin-left:0;gap:0}
  .fmt-sep{margin:0 3px}
  .rec-tx .long{display:none}.rec-tx .short{display:inline}
  .mention-pop{max-width:calc(100% - 16px)}
}
/* Selector de emojis (chat/EmojiPicker.jsx): encima del campo, desde el botón 🙂 de la barra. */
.emo-pop{position:absolute;right:8px;bottom:calc(100% + 8px);width:352px;height:380px;max-width:calc(100% - 16px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);z-index:7;overflow:hidden;animation:menu-in .16s var(--out)}
.emo-q{margin:10px 10px 6px;height:36px;border:1px solid var(--border);border-radius:10px;padding:0 12px;font:14px var(--font);color:var(--ink);background:var(--surface);outline:none}
.emo-q:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(217,242,122,.45)}
.emo-tabs{display:flex;gap:2px;padding:0 8px 6px;border-bottom:1px solid var(--line2)}
.emo-tab{flex:1;height:30px;border:0;border-radius:8px;background:transparent;font-size:16px;line-height:1;cursor:pointer;filter:grayscale(.6);transition:background .15s,filter .15s}
.emo-tab:hover{background:var(--ground);filter:none}
.emo-grid{flex:1;overflow-y:auto;padding:2px 8px 8px;position:relative}
.emo-h{position:sticky;top:0;z-index:1;background:var(--surface);font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);padding:8px 4px 4px}
.emo-cells{display:grid;grid-template-columns:repeat(9,1fr);gap:1px}
.emo-cell{aspect-ratio:1;border:0;border-radius:8px;background:transparent;font-size:21px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s,transform .1s}
.emo-cell:hover,.emo-cell:focus-visible{background:var(--ground);outline:none;transform:scale(1.12)}
.emo-none{margin:6px 4px;font-size:13px;color:var(--muted)}
.emo-foot{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-top:1px solid var(--line2);font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emo-foot.muted{color:var(--muted2);font-size:12px}
.emo-big{font-size:22px;line-height:1}
/* Sugerencias al escribir «:» + palabra (el desplegable de @). */
.pop-emo{width:22px;font-size:19px;line-height:1;text-align:center}
.emoji-pop .pop-item{height:38px}
.composer-tip{height:20px;margin:0 24px 6px;padding:2px 0 0 38px;font-size:11.5px;line-height:18px;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(-2px);transition:opacity .3s var(--ease),transform .3s var(--out);pointer-events:none}
.composer-tip.on{opacity:1;transform:none}
.composer-tip.warn,.rec-float.warn{color:var(--amber-ink)}
/* Algo fijo en la línea de los avisos (la casilla del hilo): se aparta mientras hay un aviso. */
.composer-under{position:relative}
.composer-foot{position:absolute;top:3px;left:24px;right:24px;height:20px;display:flex;align-items:center;transition:opacity .2s var(--ease)}
.composer-foot.off{opacity:0;pointer-events:none}
/* «Está escribiendo» en esa misma línea (ordenador, como en Slack): tapa los consejos sin mover nada; junto a la casilla
   del hilo, a la derecha. */
.typing.below{position:absolute;top:1px;left:24px;right:24px;height:20px;margin:0;padding-left:8px;font-size:11.5px;transform:translateY(-2px)}
.typing.below.on{transform:none}
.typing.below .typing-in{height:20px}
.typing.below .typing-in>span:last-child{overflow:hidden;text-overflow:ellipsis}
.composer-under.with-foot .typing.below{left:auto;max-width:50%;display:flex;justify-content:flex-end}
.send{width:36px;height:36px;border-radius:50%;border:0;background:var(--border2);color:var(--on-ink);display:flex;align-items:center;justify-content:center;flex:none;transition:background .2s,transform .25s var(--spring)}
.send.ready{background:var(--ink);transform:scale(1.04)}
.send.ready:hover{transform:scale(1.1) rotate(-8deg)}
.send:disabled{cursor:default}
/* Voz: grabar en el compositor */
.composer.recording{border-color:var(--faint)}
.rec-bar{display:flex;align-items:center;gap:8px;min-height:36px;animation:view-in .2s var(--out)}
.rec-time{display:inline-flex;align-items:center;gap:7px;font:500 13px var(--mono);color:var(--ink2);min-width:54px;font-variant-numeric:tabular-nums}
.rec-time.near{color:var(--amber-ink)}
.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--red);animation:rec-blink 1.2s ease-in-out infinite}
@keyframes rec-blink{0%,100%{opacity:1}50%{opacity:.35}}
.rec-wave{flex:1;min-width:0;height:26px;display:flex;align-items:center;justify-content:flex-end;gap:2px;overflow:hidden}
.rec-wave i{flex:1;max-width:4px;min-width:2px;border-radius:2px;background:var(--ink3);transition:height .08s linear}
.rec-wave i.empty{background:var(--line)}
.rec-bar.busy .rec-wave{justify-content:flex-start;font-size:13px}
.rec-bar.quiet .rec-wave{justify-content:flex-start;font-size:13px;color:var(--amber-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:26px}
.rec-left{font-size:11.5px;color:var(--amber-ink);white-space:nowrap}
.rec-tx{gap:6px}
.rec-stop{color:var(--red)}
.icon-btn.mic,.m-send.mic{touch-action:none;user-select:none;-webkit-user-select:none}
.rec-tx .short{display:none}
.rec-quiet .short{display:none}
@media (max-width:560px){.rec-tx .long,.rec-quiet .long{display:none}.rec-tx .short,.rec-quiet .short{display:inline}.rec-bar .icon-btn,.rec-bar .send,.rec-tx{min-width:44px;height:44px}.icon-btn.mic,.composer .send{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.rec-dot{animation:none}.rec-wave i{transition:none}}
/* Voz: la nota en el chat */
/* Nota de voz: el texto va como un mensaje más y esto es el reproductor, una pastilla con borde en el color del texto
   (sirve igual sobre el fondo, en la línea del nombre o en una burbuja tuya). Hasta que la escuchas, el botón va relleno
   y con un punto al lado; sonando, también. El botón relleno va en `--vn-ink` (el color del texto donde va) con el icono
   en `--vn-on` (el del fondo); `currentColor` no vale ahí, porque el botón cambia su propio color. */
.vn{--vn-ink:var(--ink);--vn-on:var(--surface);position:relative;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 4px;border-radius:16px;vertical-align:middle;
  color:inherit;font-weight:400;line-height:1;background:var(--surface);border:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.vn.loading{opacity:.6}
.vn-play{width:24px;height:24px;flex:none;padding:0;border:0;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,currentColor 9%,transparent);color:inherit;transition:background .15s,color .15s}
.vn-play:hover{background:color-mix(in srgb,currentColor 16%,transparent)}
.vn.unheard .vn-play,.vn.playing .vn-play{background:var(--vn-ink);color:var(--vn-on)}
.vn-play svg{width:11px;height:11px}
.vn-play svg path{fill:currentColor;stroke-linejoin:round}
.vn.playing .vn-play svg path{fill:none;stroke-width:2.6}
.vn-play:focus-visible,.vn-wave:focus-visible,.vn-rate:focus-visible,.vn-toggle:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.vn-wave{display:flex;align-items:center;gap:2px;height:20px;border-radius:3px;cursor:pointer}
.vn-wave i{flex:none;width:2px;border-radius:1px;background:color-mix(in srgb,currentColor 26%,transparent);transition:background .15s}
.vn-wave i.on{background:currentColor}
.vn-time{min-width:30px;text-align:right;font:12px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.vn:not(.on) .vn-time{opacity:.7}
.vn-dot{width:6px;height:6px;flex:none;margin-right:4px;border-radius:50%;background:currentColor}
.vn-rate{height:22px;min-width:34px;padding:0 6px;flex:none;border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:11px;
  background:color-mix(in srgb,currentColor 5%,transparent);color:inherit;font:500 11px/1 var(--mono)}
.vn-rate:hover{border-color:color-mix(in srgb,currentColor 32%,transparent)}
/* Lo que se dijo tal cual (cuando hay versión corta y se pide ver el original): un poco más apagado. */
.txt.vn-said{color:var(--ink3)}
/* «Ver original» / «Ver versión corta»: un enlace discreto. */
.vn-toggle{height:24px;padding:0 4px;border:0;border-radius:4px;background:transparent;color:var(--muted2);font-size:12px;font-weight:500;line-height:1;
  text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:2px;white-space:nowrap}
.vn-toggle:hover{color:var(--ink);text-decoration-color:currentColor}
/* En el escritorio va en su propia línea, bajo el nombre y la hora; el enlace, en la línea del nombre tras la hora y
   tan discreto como ella. */
.who .vn-toggle{height:auto;padding:0;font-size:11.5px;font-weight:400;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.who .t.via:has(+ .vn-toggle){margin-left:0}
.vn-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:4px 0 6px}
.av-mic{position:absolute;right:-5px;bottom:-5px;z-index:2;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);color:var(--muted)}
.av-mic .ic,.av-mic svg{width:11px;height:11px}
.send-failed{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px}
/* Voz: conversación en directo (encima del compositor, sin tapar mensajes) */
.send.live{background:var(--surface);color:var(--ink);border:1px solid var(--border2)}
.send.live:hover{border-color:var(--ink);transform:scale(1.06)}
/* Una conversación por voz ya colgada, abierta a un lado (como un hilo): solo se lee, no hay compositor. */
.vc-panel .thread{padding-bottom:16px}
.live-pill{margin:4px 20px 6px;display:flex;flex-direction:column;gap:8px;padding:8px 8px 8px 12px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2);animation:live-in .35s var(--spring)}
@keyframes live-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.live-top{display:flex;align-items:center;gap:10px}
/* Su cara en la llamada: el anillo sigue el contorno de su foto (el cuadrado redondeado de .av, con su radio en --r),
   nunca un círculo alrededor de un cuadrado. Hablando, el anillo entero; pensando, un arco que recorre el borde. */
.live-face{position:relative;flex:none;display:inline-flex}
.live-face>.av::after{content:"";position:absolute;inset:-4px;border-radius:calc(var(--r) + 4px);border:2px solid var(--teal);opacity:0;transition:opacity .2s;pointer-events:none}
.live-pill.is-speaking .live-face>.av::after{opacity:1;animation:live-ring 1.1s ease-in-out infinite}
.live-pill:is(.is-thinking,.is-reconnecting) .live-face>.av::after{opacity:1;border:0;padding:2px;
  background:conic-gradient(from var(--arc),transparent 0 55%,color-mix(in srgb,var(--teal) 35%,transparent) 78%,var(--teal) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:arc-run 1.6s linear infinite}
/* Se ha ido la conexión y está volviendo: su cara, apagada y con el arco en gris, más deprisa; las ondas, quietas. */
.live-pill.is-reconnecting .live-face{opacity:.55}
.live-pill.is-reconnecting .live-face>.av::after{background:conic-gradient(from var(--arc),transparent 0 55%,var(--border3) 100%);animation-duration:1.1s}
.live-pill.is-reconnecting .live-waves{opacity:.35}
@keyframes live-ring{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.live-main{flex:1;min-width:0;line-height:1.35}
.live-state{font-size:13.5px;font-weight:600;color:var(--ink)}
.live-pill.is-connecting .live-state{color:var(--muted)}
.live-cap{font-size:13px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-cap b{color:var(--ink2);font-weight:500}
.live-log{list-style:none;margin:0;padding:2px 4px 0 0;max-height:min(30vh,220px);overflow-y:auto;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.4;color:var(--ink2);overscroll-behavior:contain}
.live-line b{display:block;font-size:12px;font-weight:600;color:var(--ink3)}
.live-line.me{align-self:flex-end;text-align:right;max-width:85%}
.live-line:not(.me){max-width:92%}
.live-lvl{display:flex;align-items:center;gap:2px;height:22px;width:26px;flex:none}
.live-lvl i{flex:1;border-radius:2px;background:var(--border2);transition:height .08s linear,background .2s}
.live-lvl.on i{background:var(--teal)}
.live-icon{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .2s var(--spring),background .15s}
.live-icon:hover{transform:scale(1.06)}
.live-icon.off{background:var(--amber2);border-color:var(--amber-line);color:var(--amber-ink)}
.live-icon.hang{background:var(--red);border-color:var(--red);color:var(--on-ink)}
.live-pill button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* Las ondas: barras redondas que suben con la voz (la tuya en tinta, la suya en su color), respiran y van y vienen. */
.live-waves{flex:1;min-width:60px;max-width:260px;height:40px;display:flex;align-items:center;justify-content:center;gap:3px;margin:0 auto}
.live-waves i{flex:1;max-width:5px;height:100%;border-radius:99px;background:var(--border2);transform:scaleY(.1);transform-origin:center;transition:background .25s;will-change:transform}
.live-waves[data-who="them"] i{background:linear-gradient(180deg,var(--teal),color-mix(in srgb,var(--teal) 55%,var(--lime)))}
.live-waves[data-who="me"] i{background:var(--ink2)}
.live-waves[data-who="think"] i{background:color-mix(in srgb,var(--teal) 45%,var(--border2))}
@media (max-width:560px){
  .live-pill{margin:4px 12px 6px}
  .live-log{max-height:min(28vh,180px)}
  .live-icon{width:44px;height:44px}
}
/* Fuera de su chat (otra conversación, tus chats…): la llamada sigue, en una barra flotante. Tocarla vuelve al chat. */
/* En el escritorio, encima del teléfono: abajo a la derecha de la conversación que se ve, justo sobre el campo de
   escribir y alineada con su borde derecho (CallWidget la coloca; la conversación le guarda el hueco, sin tapar el último
   mensaje). Sin conversación a la vista, en la esquina de abajo a la derecha. */
.live-float{position:fixed;z-index:120;left:auto;right:24px;bottom:24px;width:240px;margin:0;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 10px;max-width:calc(100vw - 32px);box-sizing:border-box}
.chat-col[data-live-under]>.thread{padding-bottom:calc(8px + var(--live-room,0px))}
.live-float-back{display:flex;align-items:center;gap:10px;min-width:0;border:0;background:transparent;padding:0 4px 0 0;text-align:left;color:var(--ink);cursor:pointer}
.live-float-t{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.live-float-t b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-float-t span{font-size:12.5px;color:var(--ink3)}
.live-float .live-icon{width:42px;height:42px}
@media (max-width:820px){
  /* En el móvil, abajo, flotando sobre lo que se ve; en una conversación, justo encima del campo de escribir (mobile.css). */
  .live-float{left:10px;right:10px;width:auto;top:auto;bottom:calc(6px + env(safe-area-inset-bottom));height:56px;box-sizing:border-box;padding-top:0;padding-bottom:0;justify-content:space-between;z-index:300}
}
/* El widget de la llamada (live/CallWidget.jsx): por encima de todo lo de Cuadrilla (ventanas, su ordenador…), en su
   chat y fuera. Arriba su cara y qué hace; abajo las ondas y los botones; encima, si se abren, los ajustes o lo que se
   dice. Los indicadores siguen el audio: --them (su voz) mueve el anillo de su cara, --me (tu micro) el del micro.
   Siempre el mismo ancho: abrir lo que se dice o los ajustes la hace crecer hacia arriba, nunca más ancha. */
.live-float.cw{flex-direction:column;align-items:stretch;gap:10px;width:300px;padding:10px}
.cw-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who who" "waves btns";align-items:center;gap:8px 6px}
.cw-who{grid-area:who;display:flex;align-items:center;gap:10px;min-width:0}
span.cw-who{padding:0 4px 0 0}
.cw .live-waves{grid-area:waves;height:30px;min-width:0;max-width:none;margin:0;gap:2px}
.cw-btns{grid-area:btns;display:flex;gap:6px;flex:none}
.live-float.cw .live-icon{width:36px;height:36px}
.cw-b.on{background:var(--soft2);border-color:var(--border2)}
.cw .live-face>.av::after{transition:none;animation:none;opacity:calc(var(--them,0) * 1.2);transform:scale(calc(1 + var(--them,0) * .12))}
.cw:is(.is-thinking,.is-reconnecting) .live-face>.av::after{opacity:.85;transform:none}
.cw-mic{position:relative}
.cw-mic::before{content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 calc(var(--me,0) * 7px) color-mix(in srgb,var(--ink2) 26%,transparent)}
.cw[data-who="me"] .cw-mic{border-color:var(--ink2)}
.cw-panel{display:flex;flex-direction:column;gap:10px;padding:2px 2px 10px;border-bottom:1px solid var(--line);animation:menu-in .18s var(--out)}
.cw-ph{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px}
.cw-set{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cw-sl{font-size:13px;font-weight:600;color:var(--ink2)}
.cw-set .seg-b{padding:5px 10px}
.cw-hint{margin:0;font-size:12px;line-height:1.4;color:var(--ink3)}
.cw-lines .live-log{max-height:min(40vh,280px)}
.cw-empty{font-size:13px;color:var(--ink3)}
.live-line.now{opacity:.7}
.cw .live-line{display:block}
.cw .live-line b{display:block;margin-bottom:1px}
.cw .live-float-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:820px){
  /* En el móvil, una sola fila: su cara y qué hace, y los botones; lo que se abre, encima (crece hacia arriba). */
  .live-float.cw{height:auto;min-height:56px;width:auto;padding:8px 8px 8px 10px;gap:8px}
  .cw-bar{grid-template-areas:"who btns"}
  .cw .live-waves{display:none}
  .cw-panel{padding:4px 2px 10px}
  .live-float.cw .live-icon{width:40px;height:40px}
  .cw-lines .live-log{max-height:min(45vh,320px)}
}
@media (prefers-reduced-motion:reduce){.live-pill,.live-face>.av::after{animation:none!important}.cw-panel{animation:none}}
/* «¿A qué Javier te refieres?»: antes de enviar, con dos que se llaman igual. La cara, grande: es a quién eliges. */
.who-ask-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.who-ask-b{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}
.who-ask-b:hover,.who-ask-b:focus-visible{border-color:var(--sel);background:var(--soft2)}
.who-ask-t{display:flex;flex-direction:column;min-width:0}
.who-ask-t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mention-pop{position:absolute;left:8px;bottom:calc(100% + 8px);width:300px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);padding:6px;z-index:6;animation:menu-in .2s var(--out);transform-origin:bottom left}
.pop-item{display:flex;align-items:center;gap:10px;width:100%;height:44px;padding:0 10px;border:0;border-radius:9px;background:transparent;text-align:left;color:var(--ink)}
.pop-item.on{background:var(--soft2)}
.replying{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:2px 6px 8px 10px;border-bottom:1px solid var(--line2);margin-bottom:6px;animation:view-in .25s}
.replying b{color:var(--ink)}
.replying>svg{flex:none}
.replying-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.replying-who::after{content:': '}
.replying .icon-btn{margin-left:auto}
.attach-row{display:flex;flex-wrap:wrap;gap:6px;padding:2px 6px 8px}
.attach-chip{position:relative;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:5px 4px 5px 9px;font-size:12.5px;background:var(--subtle);overflow:hidden;animation:pop .3s var(--spring)}
.attach-chip .fname{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.attach-chip small{color:var(--muted2)}
.attach-chip .prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line2)}
.attach-chip .prog i{display:block;height:100%;background:var(--teal);transition:width .2s}
.attach-chip .attach-thumb{width:28px;height:28px;margin:-2px 0 -2px -5px;border-radius:6px;object-fit:cover;border:1px solid var(--line)}
.attach-chip.done{border-color:var(--green-line);background:var(--green-tint)}

/* ---------- tarjetas ---------- */
.card{max-width:600px;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:10px;margin-top:4px;box-shadow:0 10px 28px -20px rgba(26,28,25,.35);animation:card-pop .5s var(--spring) both}
.card.compact{box-shadow:none;margin-top:0;max-width:none}
.card.closed{background:var(--surface2)}
.card.gone{color:var(--muted);font-size:13px;box-shadow:none}
.card.q{border-left:3px solid var(--lime)} .card.a{border-left:3px solid var(--lime)} .card.checkout{border-left-color:var(--lime)} .card.h{border-left:3px solid var(--teal)} .card.ho{border-left:3px solid var(--border3)}
/* Contestada (o ya sin nada que hacer), su franja pasa a gris: el lima siempre dice «te toca». */
.card.q.closed,.card.a.closed{border-left-color:var(--border3)}
.card-kicker{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted2)}
.card-title{font-size:15px;font-weight:600;line-height:1.4;letter-spacing:-.005em}
.card-from{margin-top:-2px;font-size:13px;color:var(--ink3);overflow-wrap:anywhere}
.card-from b{font-weight:600;color:var(--ink2)}
.card-body{font-size:13.5px;line-height:1.5;color:var(--ink3);white-space:pre-wrap}
.card-pre{margin:0;font:12px var(--mono);background:var(--soft);border-radius:10px;padding:10px;max-height:200px;overflow:auto}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1.5px solid var(--border);background:var(--surface);border-radius:11px;padding:8px 14px;font-size:14px;font-weight:500;animation:chip-in .4s var(--spring) both;transition:border-color .15s,background .15s,transform .15s var(--spring)}
.opt:hover{border-color:var(--ink);background:var(--lime2);transform:translateY(-1px)}
.opt:active{transform:scale(.97)}
/* Pregunta con opciones (un toque); respondida, la elegida marcada y las demás apagadas */
.q-opts .opt{display:inline-flex;align-items:center;gap:6px;text-align:left;line-height:1.3;color:var(--ink)}
.q-opts .opt.static,.q-opts .opt.static:hover{cursor:default;transform:none;animation:none;background:var(--surface);border-color:var(--border)}
.q-opts .opt.static.chosen{border-color:var(--green-line);background:var(--green-tint);color:var(--green-ink);font-weight:600}
.q-opts .opt.static.dim{opacity:.5}
.q-opts .opt .ic{width:14px;height:14px}
/* Encima de la pregunta, solo lo que no se ve: de quién es el encargo o que llega como su responsable. */
.q-context{font-size:12.5px;margin-bottom:-4px}
/* Debajo de las opciones, las dos salidas discretas: «Otra cosa…» a la izquierda y «No responder» a la derecha. */
.q-foot{display:flex;align-items:center;gap:12px;margin-top:-2px}
.q-link{border:0;background:none;padding:2px 0;font:500 13px var(--font);color:var(--muted);cursor:pointer;border-radius:6px;transition:color .15s}
.q-link:hover{color:var(--ink)}
.q-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.q-link.skip{margin-left:auto;color:var(--muted2)}
/* En el modal (Inicio, la página suelta): las opciones en lista a todo el ancho, «Otra cosa…» como su última fila (un
   campo donde se escribe ya) y una sola línea abajo: «No responder» a la izquierda y «Abrir la conversación…» a la derecha. */
.q-sheet .q-opts{flex-direction:column;align-items:stretch}
.q-sheet .q-opts .opt{justify-content:flex-start;padding:11px 14px}
.q-other{display:flex;align-items:center;gap:6px;border:1.5px solid var(--border);border-radius:11px;padding:3px 4px 3px 14px;background:var(--surface);transition:border-color .15s}
.q-other:focus-within{border-color:var(--ink)}
.q-other input,.q-other input:focus{flex:1;min-width:0;border:0;background:none;box-shadow:none;outline:none;font:500 14px var(--font);color:var(--ink);height:34px;padding:0}
.q-other input::placeholder{color:var(--muted)}
.q-send{width:32px;height:32px;flex:none;border:0;border-radius:9px;background:var(--ink);color:var(--surface);display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.q-send:disabled{background:var(--soft2);color:var(--muted2);cursor:default}
.q-sheet .q-foot{flex-wrap:wrap;margin-top:2px}
.q-sheet .q-link.skip{margin-left:0}
.q-foot-end{margin-left:auto}
.req-body .card.q > .card-head{display:none}
.card-reply{display:flex;gap:8px;align-items:center}
.card-reply input{flex:1;min-width:0;height:36px}
.card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.card-actions.co-after{margin-top:6px;gap:4px}
.card.inline{margin-top:6px;max-width:520px}
/* Una acción ya respondida se queda como tarjeta, más compacta: lo que se iba a hacer y lo que se contestó. */
.card.a.inline.closed{padding:10px 14px;gap:7px;box-shadow:none;border-left-color:var(--border3)}
.card.a.inline.closed .card-title{font-size:14px}
.card.a.inline.closed .card-input{font-size:12.5px;padding:7px 10px;gap:4px 10px}
.card.a.inline.closed .card-state{font-size:12.5px}
.card-remember{margin:-4px 0 0}
.card-actions.co-after .btn.ghost{color:var(--ink2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.card-state{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);flex-wrap:wrap;animation:view-in .3s}
.card-state.ok{color:var(--green)} .card-state.no{color:var(--red)}
.card-state.unsure{color:var(--amber-ink);background:var(--amber2);border:1px solid var(--amber-line);border-radius:8px;padding:6px 9px}
.card-repeat{margin:0;font-size:12.5px;color:var(--amber-ink);background:var(--amber2);border:1px solid var(--amber-line);border-radius:8px;padding:6px 9px}
.card-state.ok .ic{animation:pop .4s var(--spring)}
/* Lo que ha aprendido un worker: se decide en la conversación */
.learned-card{max-width:520px;border-left:3px solid var(--lime)}
.learned-card.closed{border-left-color:var(--border3)}
/* «X ha aprendido tareas como…»: una línea de la conversación, con su botón para decidir o ver. */
.learned-line{flex-wrap:nowrap;min-width:0}
.learned-line .ll-text{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:520px}
.learned-line>.ic,.learned-line .t,.learned-line .ll-state,.learned-line .ll-link{flex:none;white-space:nowrap}
.learned-line>.ic{color:var(--ink3)}
.learned-line .ll-state{display:inline-flex;align-items:center;gap:4px}
.learned-line .ll-state.ok{color:var(--green)}
.learned-line .ll-link{border:0;background:none;padding:0;font:inherit;color:var(--ink2);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.learned-line .ll-link:hover{color:var(--ink)}
.learned-line .ll-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.req-body .learned-card{border-left:0}
/* Las tarjetas con franja de color a la izquierda: esa esquina, recta (redondeada, la franja se curva). */
.card.q,.card.a,.card.h,.card.ho,.learned-card{border-top-left-radius:0;border-bottom-left-radius:0}
.lc-toggle{border:0;background:none;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:var(--ink2);padding:2px 0}
.lc-toggle:hover{color:var(--ink)}
.lc-toggle .chev{width:13px;height:13px;color:var(--muted2);transition:transform .25s var(--ease)}
.lc-toggle .chev.on{transform:rotate(90deg)}
.lc-steps{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:5px;font-size:13.5px;line-height:1.45;color:var(--ink3);animation:view-in .25s}
.lc-ask{display:flex;flex-direction:column;gap:8px;animation:view-in .25s}
.lc-ask .card-body{margin:0}
.lc-undo{margin-left:2px;color:var(--ink2);height:26px}
.learned-card .card-state:focus{outline:none}
.learned-card .card-state:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.lc-skel{display:flex;flex-direction:column;gap:7px}
.lc-skel span{height:11px;border-radius:6px;background:linear-gradient(90deg,var(--soft2) 0%,var(--soft) 40%,var(--soft2) 80%);background-size:300% 100%;animation:skel 1.4s ease-in-out infinite}
.lc-skel span+span{width:65%}
.lc-skel-actions{height:30px}
/* En el móvil, todo lo que se toca de la tarjeta, de 44 px */
@media (pointer:coarse){
  .learned-card .card-actions .btn,.learned-card .lc-undo{min-height:44px;padding:0 14px}
  .learned-card .lc-toggle{min-height:44px}
  .lc-skel-actions{height:44px}
}
.breath{width:8px;height:8px;border-radius:50%;background:var(--amber);animation:breath 1.6s infinite}
.card-top{display:flex;gap:14px;align-items:center}
.stack{display:flex}
.stack-item{margin-left:-10px;border-radius:10px;box-shadow:0 0 0 2px var(--surface);animation:stack-in .5s var(--spring) both}
.stack-item:first-child{margin-left:0}
.tasks{margin:0;padding:0 0 0 20px;font-size:13.5px;color:var(--ink2);line-height:1.6}
.helpers{display:flex;flex-direction:column;gap:8px}
.hbar{height:6px;border-radius:3px;background:var(--soft2);overflow:hidden}
.hbar>div{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--teal),#3BA486);transition:width .6s var(--out);position:relative}
.hbar>div::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:sweep 1.4s linear infinite}
.hrow{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink3);animation:slide-in .35s var(--out) both}
.hname{width:52px;flex:none;font-weight:500}
.htask{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted2)}
.hstat{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-family:var(--mono)}
.hstat.working{color:var(--amber-ink)} .hstat.done{color:var(--green)}
.hstat.done .ic{animation:pop .4s var(--spring)}
.dotspin{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;display:inline-block}

/* ---------- hojas ---------- */
.mlist{display:flex;flex-direction:column;gap:2px}
.mrow{display:flex;align-items:center;gap:10px;padding:5px 2px;font-size:14px;color:var(--ink)}
.wname{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.wname>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wname .wname-role{display:inline;margin:0;font-size:inherit}
.wname .wname-2{display:block;margin:0;font-size:12.5px}
.app-sw .wname-1{font-weight:500} .app-sw .wname-role{font-weight:400}
.rename-row{display:flex;gap:8px;align-items:center}
.table{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.tr{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--line2);font-size:14px;background:var(--surface);animation:view-in .35s var(--out) both}
.tr:first-child{border-top:0}
/* Cada fila anima su entrada y queda con su propio apilado: la del menú abierto sube y la tabla deja de recortarlo */
.tr:has(.menu){position:relative;z-index:5}
.table:has(.menu){overflow:visible}
.table:has(.menu)>.tr:first-child{border-radius:13px 13px 0 0}
.table:has(.menu)>.tr:last-child{border-radius:0 0 13px 13px}
.tr b{font-weight:600;display:block}
.tr small{display:block;font-size:12px}
.tr b small{display:inline;font-weight:400}
/* Ajustes › Apps: las personas de una app aprobada para varias, debajo de su fila. */
.tr-sub{padding-left:58px;background:var(--subtle);animation:none}
.learned .tr{flex-wrap:wrap}
.learned .tr .grow{min-width:220px}
.learned .tr b{overflow-wrap:anywhere}
.learned-acts{display:flex;gap:8px;margin-left:auto}
@media (max-width:560px){.learned-acts .btn{min-height:44px}}
.tr.paused{opacity:.6}
.run-dots{display:flex;gap:4px;margin-top:5px}
.rd{width:8px;height:8px;border-radius:50%;background:var(--border2)}
.rd.done{background:var(--green)} .rd.failed{background:var(--red)} .rd.missed{background:var(--amber)} .rd.queued,.rd.running{background:var(--teal);animation:breath 1s infinite} .rd.skipped{background:var(--border2)}
.pick-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.cand{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 7px;border-radius:12px;font:500 14px var(--font);color:var(--ink);background:var(--surface);border:1.5px solid var(--border);transition:border-color .15s,transform .2s var(--spring)}
.cand:hover{transform:translateY(-1px)} .cand.on{border-color:var(--ink);background:var(--lime-tint)}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--soft2);border-radius:11px;padding:3px;gap:2px}
.usage-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.usage-h h3{margin:0}
.usage-line{display:flex;gap:12px;padding:3px 0;font-size:14px}
.usage-line>span{min-width:min(230px,45%);color:var(--muted)}
.usage-line>b{white-space:nowrap}
.day-chart{margin-top:16px}
.day-chart-h{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;margin-bottom:8px}
.day-chart-h h4{margin:0;font-size:13px;font-weight:500;color:var(--ink3)}
.day-plot{position:relative;padding-top:16px}
.day-max{position:absolute;top:0;left:0;font-size:11.5px}
.day-bars{display:flex;align-items:stretch;height:120px;border-top:1px dashed var(--line);border-bottom:1px solid var(--sep);gap:calc(min(2px, 40% / var(--n)))}
.day-col{flex:1;min-width:0;display:flex;align-items:flex-end;justify-content:center;border-radius:4px 4px 0 0;cursor:default}
.day-col:hover{background:var(--line2)}
.day-col i{display:block;width:100%;max-width:28px;border-radius:min(4px, 30%) min(4px, 30%) 0 0;background:var(--ink3);opacity:.8;transition:opacity .15s}
.day-col:hover i{opacity:1}
.day-col.today i{opacity:.45}
.day-col.today:hover i{opacity:.7}
.day-axis{display:flex;justify-content:space-between;font-size:11.5px;margin-top:5px}
.sa-sec{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.sa-h{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.sa-h small{font-weight:400}
.sa-body{display:flex;flex-direction:column;gap:14px;transition:opacity .2s}
.sa-body.busy{opacity:.5}
.day-col.over i{background:var(--red);opacity:.85}
.sa-body .more-d>summary{margin-top:4px}
.sa-stats .stat small:last-child{line-height:1.35}
.sa-rows{display:flex;flex-direction:column;gap:12px}
.sa-row{display:flex;flex-direction:column;gap:4px;min-width:0}
.sa-row-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14px}
.sa-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-row-h b{white-space:nowrap;font-variant-numeric:tabular-nums}
.sa-bar{display:block;height:6px;border-radius:3px;background:var(--soft2);overflow:hidden}
.sa-bar i{display:block;height:100%;border-radius:3px;background:var(--ink3);opacity:.8}
.sa-hours{height:80px}
.sa-job-n{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.day-col:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.more-d{margin-top:12px}
.more-d summary{cursor:pointer;font-size:13px;color:var(--muted);padding:4px 0;width:max-content}
.more-d[open] summary{margin-bottom:8px}
.seg-b{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;border-radius:9px;padding:6px 12px;font-size:13px;color:var(--muted);transition:background .2s,color .2s}
.seg-b.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);font-weight:500}
.sched{display:flex;flex-direction:column;gap:10px}
.sched-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;color:var(--ink2)}
.sched-row input,.sched-row select{height:36px;border:1px solid var(--border);border-radius:9px;padding:0 10px;background:var(--surface);font-size:14px}
.sched-row .num{width:74px}
.days{display:flex;gap:6px}
.day{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);font-weight:600;font-size:13px;color:var(--muted);transition:all .2s var(--spring)}
.day.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink);transform:scale(1.06)}

/* ---------- actividad ---------- */
.drawer-scrim{position:fixed;inset:0;background:var(--scrim);z-index:40;display:flex;justify-content:flex-end;animation:fade .2s}
.drawer{width:480px;max-width:100%;height:100%;background:var(--surface);box-shadow:var(--sh-3);display:flex;flex-direction:column;animation:drawer-in .4s var(--out)}
.drawer-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line2)}
.drawer-h small{display:block;font-size:12px}
.drawer-body{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.drawer-f{display:flex;align-items:center;gap:8px;padding:10px 18px;border-top:1px solid var(--line2);font-size:12px;color:var(--muted)}
.run{border:1px solid var(--line2);border-radius:14px;overflow:hidden;animation:view-in .35s var(--out) both}
.run-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:var(--surface);text-align:left;transition:background .15s}
.run-head:hover{background:var(--subtle)}
.run-head small{display:block;font-size:12px}
.run-head .chev{transition:transform .25s;color:var(--faint)}
.run.open .run-head .chev{transform:rotate(90deg)}
.rdot{width:9px;height:9px;border-radius:50%;background:var(--border2);flex:none}
.rdot.completed{background:var(--green)} .rdot.waiting{background:var(--amber)} .rdot.failed,.rdot.stopped{background:var(--red)} .rdot.running{background:var(--teal);animation:breath 1s infinite}
.run-body{padding:4px 14px 12px;background:var(--surface2);border-top:1px solid var(--line2)}
.timeline{list-style:none;margin:8px 0;padding:0;position:relative}
.timeline::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:var(--line)}
.tl{display:flex;gap:12px;padding:5px 0;font-size:13px;animation:slide-in .3s var(--out) both}
.tl-dot{width:11px;height:11px;border-radius:50%;background:var(--surface);border:2px solid var(--border2);flex:none;margin-top:3px;position:relative;z-index:1}
.tl.model .tl-dot{border-color:var(--lime);background:var(--lime2)} .tl.tool .tl-dot{border-color:var(--teal)} .tl.inject .tl-dot{border-color:var(--amber);background:var(--amber2)} .tl.error .tl-dot{border-color:var(--red)}
.tl-l b{font-weight:500}
.thinking{margin-top:4px;font-size:12.5px;font-style:italic;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:9px;padding:6px 9px;white-space:pre-wrap;max-height:160px;overflow:auto}
.tl-pre{margin:4px 0 0;font:11.5px var(--mono);background:var(--surface);border:1px solid var(--line2);border-radius:8px;padding:6px 8px;max-height:140px;overflow:auto;white-space:pre-wrap}
.tl-msg{margin-top:4px;font-size:12.5px;color:var(--ink2);background:var(--lime2);border-radius:9px;padding:6px 9px}
.run-ho{display:grid;gap:4px;margin:8px 0 2px;font-size:12.5px;color:var(--ink2);line-height:1.45}
.run-ho b{color:var(--ink);font-weight:600}
.run-meta{font-size:11.5px;color:var(--muted2);padding-top:6px;border-top:1px solid var(--line2)}

/* ---------- inicio ---------- */
.home{background:var(--panel);overflow-x:hidden;overflow-y:auto}
.home-in{max-width:1080px;margin:0 auto;padding:34px 34px 48px;display:flex;flex-direction:column;gap:20px}
.greet{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.greet h1{margin:0;font-size:32px;font-weight:600;letter-spacing:-.03em;flex:1;line-height:1.15}
.reveal span{display:inline-block;animation:word-in .6s var(--out) both}
.date{font-size:11.5px;color:var(--muted);letter-spacing:.04em;animation:view-in .6s .2s both}
.now{display:flex;align-items:center;gap:14px;flex-wrap:wrap;animation:view-in .45s var(--out)}
.now-l{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(14,107,88,.5);animation:presPulse 1.8s ease-out infinite}
.now-list{display:flex;gap:8px;flex-wrap:wrap}
.now-item{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 12px 6px 7px;color:var(--ink);box-shadow:var(--sh-1);animation:chip-in .45s var(--spring) both;transition:transform .2s var(--spring),box-shadow .2s}
.now-item:hover{transform:translateY(-2px);box-shadow:var(--sh-2);color:var(--ink)}
.now-item b{font-size:13.5px;display:block}
.now-item small{display:block;font-size:11.5px;color:var(--muted);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:36px 24px;background:var(--surface);border-radius:22px;border:1px solid var(--line);box-shadow:var(--sh-2);animation:card-in .6s var(--out)}
.hero-cta h2{margin:6px 0 0;font-size:22px;letter-spacing:-.02em}
.hero-cta p{margin:0;max-width:480px;color:var(--muted);line-height:1.55}
.hero-cta .btn.big{width:auto;margin-top:8px}
.hero-art{display:flex}
.hero-art img{width:52px;height:52px;border-radius:16px;margin-left:-10px;box-shadow:0 0 0 3px var(--surface);animation:bounce-in .7s var(--spring) both}
.hero-art img:first-child{margin-left:0}
.ask{display:flex;align-items:center;gap:12px;height:62px;padding:0 10px 0 14px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 14px 34px -20px rgba(0,0,0,.25);transition:border-color .2s,box-shadow .25s;animation:card-in .5s var(--out)}
.ask:focus-within{border-color:var(--ink);box-shadow:0 18px 38px -20px rgba(0,0,0,.3),0 0 0 4px rgba(217,242,122,.45)}
.ask input{border:0;outline:none;background:transparent;font-size:16px;height:44px}
.ask-hint{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted2);white-space:nowrap}
.ask .go{width:40px;height:40px;border:0;border-radius:50%;background:var(--ink);color:var(--on-ink);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .25s var(--spring)}
.ask .go:hover{transform:translateX(2px) scale(1.05)}
.pr-ph{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;padding:20px 22px;background:var(--surface);border:1.5px dashed var(--border2);border-radius:18px;animation:card-in .5s var(--out)}
.pr-text{flex:1 1 380px;min-width:0;display:flex;gap:14px}
.pr-text h2{margin:0 0 6px;font-size:17px;font-weight:600}
.pr-text p{margin:0;font-size:14px;line-height:1.5;color:var(--ink3)}
.pr-icon{width:42px;height:42px;border-radius:13px;background:var(--ink);display:flex;align-items:center;justify-content:center;flex:none;animation:float 3s ease-in-out infinite}
.pr-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pr-icon.big{width:52px;height:52px;border-radius:16px}
.pick-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto;padding:2px}
.pick-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);text-align:left;color:var(--ink);transition:border-color .15s,background .15s,transform .2s var(--spring);animation:row-in .35s var(--out) both}
.pick-row:hover{border-color:var(--border2);transform:translateY(-1px)}
.pick-row.on{border-color:var(--ink);background:var(--lime-tint)}
.pick-row b{display:flex;align-items:center;gap:6px;font-size:14.5px}
.pick-row b .pill{margin:0}
.pick-row small{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:1px}
.pick-note{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--teal);flex:none}
.pick-radio{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;flex:none;transition:background .2s,border-color .2s}
.pick-row.on .pick-radio{background:var(--ink);border-color:var(--ink);color:var(--on-ink);animation:pop .35s var(--spring)}
.pick-radio .ic{width:12px;height:12px}
.pr-pick .btn{height:40px;border-radius:12px}
.inbox{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-1);animation:card-in .55s .05s var(--out) both}
.inbox-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px 10px 18px;border-bottom:1px solid var(--line2)}
.inbox-h h2{margin:0;font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex:1}
.tabs{display:flex;gap:2px;background:var(--soft2);border-radius:10px;padding:3px}
.tab{border:0;height:28px;padding:0 11px;border-radius:8px;font:500 12.5px var(--font);background:transparent;color:var(--ink3);display:inline-flex;align-items:center;gap:5px;transition:background .2s,color .2s}
.tab small{font:600 10px var(--mono);background:var(--soft2);border-radius:6px;padding:0 4px}
.tab.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.irow-wrap{border-top:1px solid var(--line2);animation:row-in .45s var(--out) both;max-height:800px;transition:max-height .32s var(--ease),opacity .25s,transform .3s}
.irow-wrap:first-of-type{border-top:0}
.irow-wrap.leaving{max-height:0;opacity:0;transform:translateX(30px);overflow:hidden}
.irow{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 18px 0 12px;cursor:pointer;transition:background .15s}
a.irow{color:inherit;text-decoration:none}
.irow:hover{background:var(--subtle)}
.irow.open{background:var(--subtle)}
.irow.unread .iwho,.irow.unread .it{font-weight:600}
.irow-app{cursor:default;flex-wrap:wrap}
/* Las decisiones van debajo: el asunto (qué app y para qué) se lee entero también en pantallas estrechas. */
.irow-app .irow-acts{flex-basis:100%;justify-content:flex-end;margin:0 0 12px}
.irow-acts .irow-split{margin-right:auto;padding-left:36px}
/* «Decidir una a una»: la cabecera de la app y, sangradas debajo, sus personas. */
.irow-head .irow-acts{margin-bottom:8px}
/* Los botones de decidir una petición: un grupo (para mover el foco) que no cambia la maquetación. */
.decide-btns{display:contents}
.irow-wrap:has(.irow-sub){border-top:0}
.irow-sub{padding-left:48px;background:var(--subtle);box-shadow:inset 3px 0 0 var(--line)}
.irow-sub:hover{background:var(--subtle)}
/* Quién pide una app: cabe «Luis y Ana» sin cortarse. */
.irow-app .iwho{width:auto;min-width:72px;max-width:180px}
.irow-app:hover{background:transparent}
.irow-acts{display:flex;gap:6px;flex:none;margin-left:4px}
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:transparent;transition:background .3s}
.dot.on{background:var(--teal);animation:pop .5s var(--spring)}
.iwho{width:72px;flex:none;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ikind.k-helpers{background:var(--green-tint);color:var(--green-ink)}
/* Avisos de Inicio: los que llevan a otro sitio (tope de gasto, una lista que no se sincroniza). Se quitan con la ✕. */
.notices .irow{cursor:default}
.notices .irow+.irow{border-top:1px solid var(--line2)}
.notice-ic{width:24px;height:24px;border-radius:50%;background:var(--amber2);color:var(--amber-ink);display:flex;align-items:center;justify-content:center;flex:none}
.notice-ic .ic{width:13px;height:13px}
.notices .notice-t{white-space:normal;line-height:1.4;padding:10px 0}
.notices .btn .ic{width:14px;height:14px}

/* «Hilos»: una tarjeta por hilo (el mensaje que lo empezó y sus últimas respuestas) y, a la derecha, el hilo entero. */
.hilos{display:flex;flex-direction:column}
.hl-scroll{flex:1;min-width:0;min-height:0}
.hl-page-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hl-page-h h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.02em}
.hl-page-h p{margin:2px 0 0}
.hl-page-ic{width:40px;height:40px;border-radius:12px;background:var(--lime2);color:var(--teal);display:flex;align-items:center;justify-content:center;flex:none}
.hl-page-ic .ic{width:20px;height:20px}
.hl-list{display:flex;flex-direction:column;gap:28px}
.hl-sep{display:flex;align-items:center;gap:12px;color:var(--muted2);font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin:12px 0 -12px}
/* Todo leído: «Estás al día» con aire, y lo de la semana bastante más abajo, con su título discreto. */
.hl-done{margin:0 0 12px;border:1px dashed var(--border);border-radius:18px}
.hl-sec{margin:0 0 -16px;color:var(--muted2);font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.hl-sep::before,.hl-sep::after{content:'';flex:1;height:1px;background:var(--line2)}
.hl-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-1);padding:12px 16px 10px;display:flex;flex-direction:column;gap:10px;animation:row-in .4s var(--out) both;min-width:0;transition:border-color .2s,opacity .2s}
/* Lo ya leído, más apagado (se aviva al pasar por encima o al abrirlo). */
.hl-card:not(.unread){opacity:.78}
.hl-card:not(.unread):hover,.hl-card:not(.unread):focus-within,.hl-card.on{opacity:1}
.hl-card.on{border-color:var(--ink3)}
.hl-h{display:flex;align-items:center;gap:8px;font-size:14px;min-width:0}
.hl-where{min-width:0;font-weight:600;color:var(--ink);text-decoration:none}
.hl-where:hover{text-decoration:underline;text-underline-offset:2px}
.hl-new{flex:none;font:600 11px var(--mono);border-radius:6px;padding:1px 6px;background:var(--red2);color:var(--red)}
.hl-draft{flex:none;display:inline-flex;border:0;background:none;padding:0;cursor:pointer}
.hl-when{margin-left:auto;flex:none}
.hl-msg{position:relative;display:flex;gap:10px;align-items:flex-start;min-width:0}
/* Al sacar el ratón, los emojis aguantan un segundo (por si vuelve) antes de irse; al pasar a otro mensaje, se van ya.
   Con el teclado se quedan mientras el foco esté en ellos; el clic en un emoji, no (el foco del ratón no cuenta). */
.hl-msg-acts{position:absolute;right:0;top:-14px;display:flex;z-index:3;visibility:hidden;opacity:0;transform:scale(.92);transform-origin:bottom right;transition:opacity .15s var(--out) 1s,transform .15s var(--out) 1s,visibility 0s 1.15s}
.hl-msg:hover .hl-msg-acts,.hl-msg-acts:has(:focus-visible),.hl-msg-acts:has(.rpick-pop){visibility:visible;opacity:1;transform:none;transition:opacity .12s var(--out),transform .25s var(--spring),visibility 0s}
.hl-card:has(.hl-msg:hover) .hl-msg:not(:hover) .hl-msg-acts:not(:has(:focus-visible)){visibility:hidden;opacity:0;transition:none}
.hl-msg-acts .rpick{display:none}
.rquick{display:flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:var(--sh-3);white-space:nowrap}
.rquick button{width:30px;height:30px;border:0;border-radius:50%;background:transparent;font-size:17px;line-height:1;transition:transform .2s var(--spring),background .15s}
.rquick button:hover,.rquick button:focus-visible{background:var(--soft);transform:scale(1.25) translateY(-2px)}
.rquick button.on{background:var(--lime-tint);box-shadow:inset 0 0 0 1px var(--lime-line)}
@media (hover:none){.hl-msg-acts{visibility:visible;opacity:1;transform:none;transition:none;top:-4px}.hl-msg-acts .rquick{display:none}.hl-msg-acts .rpick{display:inline-flex}.hl-msg-acts .reply-btn{box-shadow:none;border-color:transparent;background:none}}
.hl-av{position:relative;display:flex;flex:none}
.hl-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.hl-who{display:flex;align-items:baseline;gap:8px;font-size:13.5px}
.hl-main .txt{font-size:14px;line-height:1.5;color:var(--ink2);overflow-wrap:anywhere}
.hl-main .reacts{margin-top:2px}
.hl-root{padding-bottom:10px;border-bottom:1px solid var(--line2)}
/* «Ver lo que se hablaba antes»: lo de antes del hilo en su conversación, más pequeño y en gris (solo se lee). */
.hl-before-row{display:flex;margin:-4px 0 -4px 42px}
.list-lead{display:contents}
.hl-before-btn{display:inline-flex;align-items:center;gap:6px;margin:0;padding:2px 0;border:0;background:none;font-size:12.5px;color:var(--muted2);cursor:pointer}
.hl-before-btn:hover:not(:disabled){color:var(--ink)}
.hl-before-btn .ic{width:13px;height:13px}
.hl-before{display:flex;flex-direction:column;gap:8px;padding-bottom:10px;border-bottom:1px dashed var(--line2)}
.hl-before-h{display:flex;align-items:center;gap:12px;min-height:22px;padding-left:34px}
.hl-before-h>.muted{font-size:12px}
.hl-before-hide{margin-left:auto!important}
.hl-day{margin:2px 0 -2px 34px;color:var(--muted2);font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:capitalize}
.hl-earlier{opacity:.72}
.hl-earlier .hl-who{font-size:12.5px}
.hl-earlier .hl-main .txt{font-size:13px;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.hl-root .txt{display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;overflow:hidden}
.hl-replies{display:flex;flex-direction:column;gap:10px}
.hl-card.cut .hl-root{padding-bottom:0;border-bottom:0}
/* «Ver N respuestas anteriores»: la tarjeta, rota de lado a lado (deja ver el fondo con los bordes en zigzag). */
.hl-gap{--z:7px;--bg:color-mix(in srgb,#000 var(--hl-gap-dim,4%),var(--hl-gap-bg,var(--panel)));--shade:color-mix(in srgb,#000 var(--hl-gap-shade,6%),var(--bg));position:relative;display:flex;align-items:center;justify-content:center;height:42px;margin:0 calc(-1 * var(--hl-pad,18px));padding:0;border:0;cursor:pointer;
  background:linear-gradient(var(--shade),var(--bg) 14px calc(100% - 14px),var(--shade));
  --zig:conic-gradient(from 135deg at top,#0000 0,#000 0 90deg,#0000 0) top/calc(var(--z)*2) var(--z) repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - var(--z)*2 + 2px) no-repeat,conic-gradient(from -45deg at bottom,#0000 0,#000 0 90deg,#0000 0) bottom/calc(var(--z)*2) var(--z) repeat-x;
  -webkit-mask:var(--zig);mask:var(--zig)}
.hl-gap span{font-size:12.5px;color:var(--muted2);text-decoration:underline;text-underline-offset:2px;border-radius:4px;transition:color .15s}
.hl-gap:hover span{color:var(--ink)}
.hl-gap:focus-visible{outline:none}
.hl-gap:focus-visible span{color:var(--ink);outline:2px solid var(--border3);outline-offset:3px}
.hl-replies .unread-sep{display:flex;align-items:center;gap:10px;color:var(--red);font-size:11.5px;font-weight:600}
.hl-replies .unread-sep::before{content:'';flex:1;height:1px;background:var(--red);opacity:.7}
/* La respuesta, a la altura del texto de las respuestas (su cara, 28px, y el hueco, 10px): la misma caja que en el hilo,
   sin el margen que lleva en la conversación. */
.hl-reply{margin-left:38px}
.hl-reply .composer{margin:0}
.hl-reply .composer-tip{margin:4px 4px 0;padding-left:0}
/* La línea de debajo de la caja (lo que pasa al grabar o dictar) solo ocupa sitio mientras dice algo. */
.hl-reply .composer-tip:not(.on){display:none}
/* Mientras escribes en la tarjeta, la marca «Borrador» de arriba sobra (lo tienes delante). */
.hl-card:has(.hl-reply:focus-within) .hl-draft{display:none}
/* Debajo de la caja, a su misma altura y sin borde: lo demás que se hace con el hilo, en pequeño y sin competir con ella. */
.hl-acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:-6px -8px 0 38px}
.hl-acts .btn{color:var(--muted)}
.hl-acts .btn:hover{color:var(--ink)}
.hl-acts .btn .ic{width:14px;height:14px}
.hl-acts .hl-open{margin-left:auto}
@media (max-width:560px){.hl-acts{margin-left:-11px}.hl-acts .btn{min-height:40px}}
.ikind{flex:none;font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.03em;border-radius:6px;padding:2px 6px;background:var(--soft2);color:var(--ink3)}
.ikind.k-question{background:var(--lime2);color:var(--lime-ink)} .ikind.k-approval{background:var(--amber2);color:var(--amber-ink)} .ikind.k-mention{background:var(--blue-tint);color:var(--blue-ink)} .ikind.k-dm{background:var(--violet-tint);color:var(--violet-ink)} .ikind.k-ping{background:var(--green2);color:var(--green-ink)}
.isubj{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.iwhere{flex:none;font-size:11px;color:var(--ink3);background:var(--soft2);border-radius:6px;padding:2px 7px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iwhen{width:44px;flex:none;font-size:11.5px;color:var(--muted2);text-align:right}
.idetail{display:flex;flex-direction:column;gap:10px;padding:2px 18px 16px 50px;background:var(--subtle);animation:reveal-down .35s var(--out)}
.notice-d{display:flex;flex-direction:column;gap:10px}
.itext{font-size:14px;line-height:1.55;color:var(--ink2);max-width:720px;white-space:pre-wrap}
.open-link{display:inline-flex;align-items:center;gap:5px;align-self:flex-start}

/* ---------- contratar ---------- */
.hire-panel{background:radial-gradient(ellipse at top,var(--lime-tint),var(--surface) 60%)}
.hire{width:100%;max-width:540px;display:flex;flex-direction:column;align-items:stretch;gap:16px;text-align:center}
.hire h1{margin:0;font-size:30px;font-weight:600;letter-spacing:-.025em}
.hire .lead{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.hire .field{text-align:left}
.hire-stage{position:relative;align-self:center;width:96px;height:96px;margin-bottom:4px}
.hire-face{width:96px;height:96px;border-radius:28px;position:relative;z-index:1;box-shadow:var(--sh-2);animation:face-swap .5s var(--spring)}
.hire-glow{position:absolute;inset:-18px;border-radius:40px;background:radial-gradient(circle,rgba(217,242,122,.9),transparent 65%);animation:breath 3s ease-in-out infinite}
.faces{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.face{padding:3px;border-radius:18px;border:0;background:transparent;opacity:.6;transition:opacity .2s,transform .25s var(--spring),box-shadow .2s;animation:chip-in .4s var(--spring) both}
.face:hover{opacity:1;transform:translateY(-3px)}
.face.on{opacity:1;box-shadow:0 0 0 2px var(--ink);transform:scale(1.05)}
.face img{width:44px;height:44px;border-radius:14px;display:block}
.faces.small .face img{width:40px;height:40px;border-radius:12px}
.hire .row input{flex:1;min-width:0}
.hire .row .btn{height:42px;border-radius:10px}
.privacy-note{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:12px 14px;border-radius:14px;background:var(--lime-tint);border:1px solid var(--lime-line);animation:view-in .45s .1s var(--out) both}
.pn-ic{width:30px;height:30px;border-radius:9px;background:var(--ink);color:var(--on-ink);display:flex;align-items:center;justify-content:center;flex:none}
.privacy-note b{display:block;font-size:14px;margin-bottom:2px}
.privacy-note div>span{font-size:13px;line-height:1.45;color:var(--ink3)}
.hire .btn.big{margin-top:4px}
/* El principal: cómo trabajará (dos opciones con radio, una ya marcada) */
.mode-choice{display:flex;flex-direction:column;gap:8px;text-align:left}
.mode-opt{display:flex;gap:12px;align-items:flex-start;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.mode-opt:hover{border-color:var(--border2)}
.mode-opt.on{border-color:var(--lime-line);background:var(--lime-tint)}
.mode-opt b{display:flex;align-items:center;gap:6px;font-size:14px;margin-bottom:2px}
.mode-opt small{display:block;font-size:13px;line-height:1.45;color:var(--ink3)}
.mode-radio{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;border:1.5px solid var(--border2);transition:border-width .15s,border-color .15s}
.mode-opt.on .mode-radio{border:5.5px solid var(--ink)}
/* «Quién puede hablar con…»: cada opción es una caja y, en «algunas personas», la lista va dentro. El foco del teclado,
   dentro de la caja y con su forma (fuera parecía un segundo borde). */
.access-choice{display:flex;flex-direction:column;gap:8px;text-align:left}
.access-opt{border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .15s,background .15s}
.access-opt:hover{border-color:var(--border2)}
.access-opt.on{border-color:var(--lime-line);background:var(--lime-tint)}
.access-opt>.mode-opt,.access-opt>.mode-opt:hover{border:0;background:transparent}
.access-opt>.mode-opt:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:14px}
.access-people{display:flex;flex-direction:column;gap:2px;padding:0 10px 10px 38px}
.access-people .apps-search{height:36px;margin:0 0 6px}
.access-people .fine{padding:4px 6px 0}
/* En el ordenador, con mucha gente, la lista no estira la ventana: se desplaza dentro (el buscador queda arriba). */
.access-rows{display:flex;flex-direction:column;gap:2px}
@media (min-width:821px){.access-rows{max-height:304px;overflow:auto}}
.access-row{display:flex;align-items:center;gap:10px;width:100%;padding:5px 6px;border:0;border-radius:10px;background:transparent;color:var(--ink);text-align:left;cursor:pointer;transition:background .12s}
@media (hover:hover){.access-row:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}}
.access-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:10px}
.access-row .grow{display:flex;align-items:baseline;gap:6px;min-width:0}
.access-row b{flex:none;max-width:100%;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.access-row small{min-width:0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.access-row.fixed{cursor:default}
.access-row.fixed:hover{background:transparent}
.access-check{flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.access-check .ic{width:11px;height:11px}
.access-row[aria-checked="true"] .access-check{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.access-row.fixed .access-check{opacity:.45}
.hire .mode-fine{margin-top:-8px}
.pmode-alt{align-self:center;font-size:13.5px;color:var(--muted);min-height:32px}
.gate-top{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 10px}
.gate-top b{font-size:14.5px}
.role-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}

/* ---------- bloques de ajustes ---------- */
.card-block{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;max-width:720px;box-shadow:var(--sh-1)}
.card-block h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
/* Ficheros del espacio (Ajustes › General › StorageBlock). */
.st-head{display:flex;align-items:baseline;gap:4px;font-size:15px}
.st-head b{font-size:20px;font-weight:600;letter-spacing:-.01em}
.st-bar{height:8px;border-radius:999px;background:var(--soft2);overflow:hidden}
.st-bar i{display:block;height:100%;border-radius:inherit;background:var(--ink);transition:width .4s var(--out)}
.st-bar.st-near i{background:var(--amber)}
.st-bar.st-full i{background:var(--red)}
.st-warn{color:var(--amber-ink)}
.st-kinds{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column}
.st-kinds li{display:grid;grid-template-columns:1fr auto 72px;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--line2);font-size:13.5px}
.st-kinds li b{font-weight:500;text-align:right}
.block-h{display:flex;align-items:center;gap:10px}
.block-h h2{flex:1}
.kv{display:flex;gap:12px;font-size:14px}
.kv span{width:120px;color:var(--muted)}
.icon-row{display:flex;align-items:center;gap:18px}
.icon-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.icon-actions .hint{width:100%}
.role-select{height:32px;border:1px solid var(--border);border-radius:8px;padding:0 8px;background:var(--surface);font-size:13px}
.role{font-size:12px;font-weight:500;border-radius:999px;padding:3px 10px;background:var(--soft2);color:var(--ink3)}
.role.r-owner{background:var(--ink);color:var(--lime)} .role.r-admin{background:var(--lime2);color:var(--lime-ink)}
.danger-zone{border-color:var(--red-line)}
.danger-zone h2,.danger-zone h3{color:var(--red)}
.danger-zone h3+.dz-row{border-top:0;padding-top:4px}
.dz-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line2)}
.dz-row b{display:block;font-size:14px}
.dz-row small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.dz-row>div{flex:1}

/* ---------- ajustes: pantalla completa encima de la app ---------- */
/* El menú de secciones ocupa el sitio de la barra lateral; el contenido va en el panel blanco. Debajo de .scrim (40) para que sus diálogos queden encima. */
.prefs{position:fixed;inset:0;z-index:36;display:flex;gap:10px;padding:10px;background:var(--ground);outline:none;animation:prefs-in .34s var(--out)}
@keyframes prefs-in{from{opacity:0;transform:scale(1.015)}}
.prefs-nav{width:252px;flex:none;display:flex;flex-direction:column;min-height:0;animation:side-in .4s var(--out)}
.prefs-back{display:flex;align-items:center;gap:10px;height:38px;margin:0 4px 6px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--ink2);font:500 14px var(--font);text-align:left;transition:background .15s,color .15s}
.prefs-back:hover{background:var(--hover);color:var(--ink)}
.prefs-back .ic{transition:transform .25s var(--spring)}
.prefs-back:hover .ic{transform:translateX(-3px)}
.prefs-back kbd{margin-left:auto}
.prefs-scroll{flex:1;min-height:0;overflow:auto;padding:0 4px 10px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin}
.prefs-group{display:flex;flex-direction:column;gap:1px}
.prefs-gh{display:flex;align-items:center;gap:9px;padding:10px 10px 6px;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted2);min-width:0}
.prefs-gh .grow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnav{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:0;border-radius:9px;background:transparent;color:var(--ink2);font:14px var(--font);text-align:left;transition:background .15s,color .15s}
.pnav:hover{background:var(--hover);color:var(--ink)}
.pnav.on{background:var(--sel);color:var(--ink);font-weight:500;box-shadow:inset 0 0 0 1px rgba(26,28,25,.06)}
.pnav .ic{color:var(--ink3)}
.pnav.on .ic{color:var(--ink)}
.pnav.danger,.pnav.danger .ic{color:var(--red)}
.prefs-foot{flex:none;padding:8px 4px 2px;border-top:1px solid var(--sep)}
.prefs-me{padding:4px 10px 8px;font-size:13px;min-width:0}
.prefs-me b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prefs-me small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prefs-main{position:relative;flex:1;min-width:0;overflow:auto;background:var(--surface);border-radius:16px;box-shadow:var(--sh-1);scrollbar-width:thin}
/* A la altura del título (44px de arriba de .prefs-in, 31px de alto; la X mide 34). */
.prefs-x{position:sticky;top:14px;float:right;margin:42.5px 14px 0 0;z-index:2}
.prefs-in{max-width:720px;margin:0 auto;padding:44px 36px 72px;display:flex;flex-direction:column;gap:16px;animation:view-in .35s var(--out)}
.prefs-h{display:flex;align-items:flex-end;gap:16px;margin-bottom:6px}
.prefs-h h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.2;display:flex;align-items:center;gap:10px}
.prefs-h h1 .cnt{font-size:12px;height:22px;min-width:24px;border-radius:11px}
.prefs-info{display:inline-grid;place-items:center;width:26px;height:26px;border:0;border-radius:50%;background:none;color:var(--faint);cursor:help}
.prefs-info:hover,.prefs-info:focus-visible{color:var(--ink);background:var(--soft)}
.prefs-h p{margin:6px 0 0;max-width:560px;color:var(--muted);font-size:14px;line-height:1.5}
.prefs-h .btn{flex:none}
.prefs .card-block{max-width:none;box-shadow:none;border-color:var(--line)}
.prefs .card-block h3,.m-prefs .card-block h3{margin:0;font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.prefs .adv-h{margin:22px 0 -4px;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.prefs .adv-h4{margin:14px 0 4px;font-size:13px;font-weight:500;color:var(--ink3)}
.prefs .card-block.flush{padding:0;border:0;background:transparent}
.prefs .card-block .block-h h3{flex:1}
/* Dentro de Ajustes, sin cajas dentro de cajas: cada bloque es una sección separada por una línea, y las listas son filas
   con su separador. Solo la zona peligrosa sigue en caja, para que se note. */
.prefs-in .card-block{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:22px 0 0}
.prefs-in .prefs-h+.card-block,.prefs-in .adv-h+.card-block{border-top:0;padding-top:6px}
.prefs-in .card-block.flush{border-top:0;padding-top:0}
.prefs-in .table{border:0;border-radius:0;overflow:visible}
.prefs-in .tr{background:transparent;padding:11px 0}
.prefs-in .tr.tr-sub{padding-left:44px}
.prefs-in .card-block.flush .table{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.prefs-in .card-block.flush .tr:first-child{border-top:0}
.prefs-in .card-block.danger-zone{border:1px solid var(--red-line);border-radius:18px;padding:22px;margin-top:10px}
.stack-form{display:flex;flex-direction:column;gap:14px}
.roles-help .kv{align-items:center}
.audit-row{width:100%;text-align:left;font:inherit;color:inherit;border-left:0;border-right:0;border-bottom:0;cursor:pointer}
.table>.audit-row:first-child{border-top:0}
.audit-row:hover{background:var(--hover)}
.audit-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.audit-row .grow{min-width:0}
.audit-row-chev{flex:none;color:var(--muted2)}
.audit-outcome{color:var(--muted)}
.audit-outcome.danger{color:var(--red)}
.audit-facts{display:flex;flex-direction:column;gap:8px;margin:0}
.audit-facts>div{display:flex;gap:12px;font-size:14px;line-height:1.45}
.audit-facts dt{flex:none;width:150px;color:var(--muted)}
.audit-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.audit-note{margin:0;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:14px;line-height:1.5}
.audit-badge{align-self:flex-start;margin:0;padding:3px 10px;border-radius:999px;background:var(--soft);font-size:12.5px;font-weight:500}
.audit-badge.danger{background:var(--red2);color:var(--red)}
.audit-badge.warn{background:var(--amber2)}
.audit-seal{display:flex;align-items:flex-start;gap:8px;margin:0}
.audit-seal svg{flex:none;margin-top:2px}
.audit-steps-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.audit-steps-h h3{margin:0;font-size:15px;font-weight:600}
.audit-steps{list-style:none;margin:0;padding:0;border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.audit-step{border-top:1px solid var(--line2);font-size:14px}
.audit-step:first-child{border-top:0}
.audit-step-line,.audit-step summary{display:flex;align-items:baseline;gap:12px;padding:9px 12px}
.audit-step summary{cursor:pointer;list-style:none}
.audit-step summary::-webkit-details-marker{display:none}
.audit-step summary:hover{background:var(--hover)}
.audit-step summary:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.audit-step-time{flex:none;color:var(--muted2);font-variant-numeric:tabular-nums;font-size:12.5px}
.audit-step-chev{flex:none;align-self:center;color:var(--muted2);transition:transform .2s var(--out)}
.audit-step details[open] .audit-step-chev{transform:rotate(180deg)}
.audit-step-body{display:flex;flex-direction:column;gap:10px;padding:2px 12px 12px 82px}
.audit-step-body p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.audit-step-body .audit-facts>div{font-size:13.5px}
.audit-step-body .audit-facts dt{width:110px}
.roles-help .kv .role{width:auto;flex:none;min-width:96px;text-align:center}
.roles-help .kv small{font-size:13px}
.danger-zone .dz-row:first-child{border-top:0;padding-top:0}
.danger-zone .dz-row:last-child{padding-bottom:0}
/* Ajustes de administración (P12): presupuestos, modelos, integraciones, espacios de datos, calidad y auditoría. */
.pill.amber{background:var(--amber2);color:var(--ink)} .pill.red{background:var(--red2);color:var(--red)}
.spend-bar{display:block;height:6px;margin-top:8px;border-radius:3px;background:var(--soft2);overflow:hidden;max-width:420px}
.spend-bar i{display:block;height:100%;border-radius:3px;background:var(--teal);transition:width .4s var(--out)}
.spend-bar.warn i{background:var(--amber)} .spend-bar.over i{background:var(--red)}
.cap-row{display:flex;align-items:flex-end;gap:12px}
  .audit-facts>div{flex-direction:column;gap:0}
  .audit-facts dt{width:auto;font-size:12.5px}
  .audit-step-body{padding-left:12px}
.cap-row>.grow{min-width:0}
.cap-row>.grow>b{display:block;font-weight:600}
.cap-row>.grow>small{display:block;margin-top:2px}
.cap-row>.field{flex:1;max-width:260px}
.cap-edit{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.cap-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,180px);gap:12px}
.cap-stop{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer}
.tr.tr-open{align-items:flex-start}
.tr.tr-wrap{align-items:flex-start}
.tr.hook-row{flex-wrap:wrap}
.tr.hook-row>.grow{min-width:0}
.tr.hook-row>.cap-edit{flex-basis:100%}
.copy-line{display:flex;align-items:center;gap:8px;margin-top:8px;padding:4px 4px 4px 10px;border:1px solid var(--line);border-radius:10px;background:var(--subtle);min-width:0}
.copy-line code{flex:1;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.key-once{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:12px;background:var(--lime2)}
.key-once b{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px}
.scope-pick{display:flex;flex-wrap:wrap;gap:8px}
.chip-check{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--border);border-radius:999px;font-size:13px;color:var(--ink2);cursor:pointer;transition:border-color .15s,background .15s}
.chip-check input{margin:0;accent-color:var(--teal)}
.chip-check.on{border-color:var(--ink);background:var(--soft);color:var(--ink)}
.class-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.class-opt{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .15s}
.class-opt input{position:absolute;opacity:0;pointer-events:none}
.class-opt b{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink)}
.class-opt small{font-size:12px;line-height:1.4}
.class-opt.on{border-color:var(--ink)}
.class-opt:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.stat b{font-size:20px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.audit-filters{display:flex;gap:10px;align-items:center}
.audit-filters input{width:100%;height:36px;border:1px solid var(--border);border-radius:10px;padding:0 12px;font:14px var(--font);color:var(--ink);background:var(--surface)}
.audit-filters .role-select{height:36px}
.adm-when{white-space:nowrap;flex:none}
.tr-models{flex-wrap:wrap}
.prefs-note{padding:10px 14px;border-radius:12px;background:var(--soft);color:var(--ink2);font-size:13.5px}
@media (max-width:640px){
  .cap-row{flex-direction:column;align-items:stretch}
  .cap-row>.field{max-width:none}
  .cap-fields,.class-pick{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .audit-filters{flex-direction:column;align-items:stretch}
  .prefs-h .btn.fit{align-self:flex-start}
}
/* Tema: tres tarjetas con una miniatura de la app. */
.theme-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.theme-opt{display:flex;flex-direction:column;gap:8px;padding:8px 8px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);text-align:left;color:var(--ink);transition:border-color .15s,transform .2s var(--spring),box-shadow .2s}
.theme-opt:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--sh-2)}
.theme-opt.on{border-color:var(--ink);box-shadow:0 0 0 3px rgba(217,242,122,.45)}
.theme-opt small{padding:0 4px;font-size:12px;color:var(--muted)}
.theme-l{display:flex;align-items:center;gap:8px;padding:2px 4px 0;font-weight:600;font-size:14px}
.theme-radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border2);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:background .2s,border-color .2s}
.theme-opt.on .theme-radio{background:var(--ink);border-color:var(--ink);color:var(--on-ink);animation:pop .35s var(--spring)}
.theme-radio .ic{width:11px;height:11px}
.theme-prev{position:relative;display:block;height:92px;border-radius:9px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.theme-prev>span{position:absolute;inset:0;display:flex;gap:5px;padding:7px;--g:#ECEEE6;--s:#fff;--k:#1A1C19;--m:#D7DAD0;background:var(--g)}
.theme-prev>.tp-d,.tp-dark>.tp-l{--g:#121411;--s:#1D1F1C;--k:#ECEEE6;--m:#383B34}
.tp-system>.tp-d{clip-path:polygon(100% 0,100% 100%,0 100%)}
.tp-side{width:26%;display:flex;flex-direction:column;gap:5px;padding-top:3px}
.tp-side::before,.tp-side::after{content:'';height:5px;border-radius:3px;background:var(--m)}
.tp-side::before{width:80%;background:var(--k)}
.tp-main{flex:1;background:var(--s);border-radius:6px;padding:9px 8px;display:flex;flex-direction:column;gap:6px}
.tp-main b{display:block;height:6px;border-radius:3px;background:var(--m)}
.tp-main b:first-child{width:55%;background:var(--k)} .tp-main b:nth-child(2){width:85%} .tp-main b:nth-child(3){width:40%;background:#D9F27A}

/* ---------- animaciones ---------- */
@keyframes view-in{from{opacity:0;transform:translateY(6px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes msg-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes reveal-down{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes card-pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes card-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sheet-in{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:none}}
@keyframes palette-in{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes menu-in{from{opacity:0;transform:scale(.94) translateY(-4px)}to{opacity:1;transform:none}}
@keyframes drawer-in{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(10px) scale(.95)}}
@keyframes live-in{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
@keyframes chip-in{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
@keyframes row-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes slide-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes stack-in{from{opacity:0;transform:translateX(-12px) scale(.7)}to{opacity:1;transform:none}}
@keyframes bounce-in{0%{opacity:0;transform:translateY(20px) scale(.6)}60%{opacity:1;transform:translateY(-4px) scale(1.05)}100%{transform:none}}
@keyframes word-in{from{opacity:0;transform:translateY(60%);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
@keyframes morph{0%{transform:scale(.85) rotate(-6deg);opacity:.4}100%{transform:none;opacity:1}}
@keyframes face-swap{0%{transform:scale(.7) rotate(-10deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breath{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}
@keyframes halo-pulse{0%{box-shadow:0 0 0 0 rgba(217,242,122,.9)}70%{box-shadow:0 0 0 6px rgba(217,242,122,0)}100%{box-shadow:0 0 0 0 rgba(217,242,122,0)}}
@keyframes done-flash{0%{box-shadow:0 0 0 0 rgba(47,143,91,.7);opacity:1}100%{box-shadow:0 0 0 8px rgba(47,143,91,0);opacity:0}}
@keyframes presPulse{0%{box-shadow:0 0 0 0 rgba(47,143,91,.45)}70%{box-shadow:0 0 0 6px rgba(47,143,91,0)}100%{box-shadow:0 0 0 0 rgba(47,143,91,0)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes skel{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.shake{animation:shake .4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes logo-in{0%{opacity:0;transform:scale(.3) rotate(-45deg)}100%{opacity:1;transform:none}}
@keyframes sparkle{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1)}}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(80px,60px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-70px,-50px)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-120px,40px) scale(1.2)}}

/* ==========================================================================
   Capa de movimiento: transiciones entre vistas, escalonados, brillos y detalles.
   Todo se desactiva con prefers-reduced-motion (abajo).
   ========================================================================== */

/* Transiciones entre vistas (View Transitions API; si el navegador no la tiene, no pasa nada). */
.main-col{view-transition-name:main}
::view-transition-group(main){animation-duration:.38s;animation-timing-function:var(--out)}
html[data-vt=view]::view-transition-old(root),html[data-vt=view]::view-transition-new(root),
html[data-vt=ws]::view-transition-old(root),html[data-vt=ws]::view-transition-new(root){animation:none}
html[data-vt=view]::view-transition-old(main){animation:vt-fade-out .14s var(--ease) both}
html[data-vt=view]::view-transition-new(main){animation:vt-main-in .34s var(--out) both}
html[data-vt=ws]::view-transition-old(main){animation:vt-ws-out .2s var(--ease) both}
html[data-vt=ws]::view-transition-new(main){animation:vt-ws-in .5s var(--out) both}
html[data-vt=page]::view-transition-old(root){animation:vt-page-out .2s var(--ease) both}
html[data-vt=page]::view-transition-new(root){animation:vt-page-in .42s var(--out) both}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-main-in{from{opacity:0;transform:translateY(8px)}}
@keyframes vt-ws-out{to{opacity:0;transform:scale(.985);filter:blur(3px)}}
@keyframes vt-ws-in{from{opacity:0;transform:translateY(10px) scale(1.012);filter:blur(4px)}}
@keyframes vt-page-out{to{opacity:0;transform:scale(.99)}}
@keyframes vt-page-in{from{opacity:0;transform:translateY(12px) scale(.995)}}

/* Al cambiar de espacio, la barra lateral entra escalonada. */
.stagger>*{animation:side-in .45s var(--out) both}
.stagger>*:nth-child(2){animation-delay:15ms}.stagger>*:nth-child(3){animation-delay:30ms}.stagger>*:nth-child(4){animation-delay:45ms}
.stagger>*:nth-child(5){animation-delay:60ms}.stagger>*:nth-child(6){animation-delay:75ms}.stagger>*:nth-child(7){animation-delay:90ms}
.stagger>*:nth-child(8){animation-delay:105ms}.stagger>*:nth-child(9){animation-delay:120ms}.stagger>*:nth-child(10){animation-delay:135ms}
.stagger>*:nth-child(11){animation-delay:150ms}.stagger>*:nth-child(12){animation-delay:165ms}.stagger>*:nth-child(n+13){animation-delay:180ms}
@keyframes side-in{from{opacity:0;transform:translateX(-8px)}}
.swap{animation:swap-in .4s var(--out)}
@keyframes swap-in{from{opacity:0;transform:translateY(5px)}}

/* Esqueleto mientras carga un espacio que aún no has visitado. */
.sk-side{gap:12px;padding:16px 12px}
.sk-line{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--hover) 0%,var(--ground) 40%,var(--hover) 80%);background-size:300% 100%;animation:skel 1.4s ease-in-out infinite,fade .3s both}
.sk-gap{display:block;height:10px}
.sk-panel{display:flex;align-items:center;justify-content:center}

/* Botones oscuros: un brillo cruza al pasar el ratón. */
.btn.dark{position:relative;overflow:hidden;isolation:isolate}
.btn.dark::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-130%);transition:transform .8s var(--out)}
.btn.dark:hover::after{transform:translateX(130%)}
.btn.dark:hover{box-shadow:0 10px 22px -10px rgba(26,28,25,.7);transform:translateY(-1px)}
.btn.dark:active{transform:scale(.97)}

/* Enviar: la flecha sale disparada y vuelve. */
.send .ic.fly{animation:send-fly .55s var(--out)}
@keyframes send-fly{0%{transform:none}38%{transform:translateY(-18px);opacity:0}39%{transform:translateY(16px);opacity:0}100%{transform:none;opacity:1}}

/* Avisos con barra de tiempo restante. */
.toast{position:relative;overflow:hidden}
.toast::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:currentColor;opacity:.5;transform-origin:left;animation:toast-bar var(--ms,3500ms) linear forwards}
/* Ratón encima o foco dentro: la cuenta atrás se para (y la barra con ella). */
.toast.paused::after{animation-play-state:paused}
@keyframes toast-bar{to{transform:scaleX(0)}}

/* Entrada: un foco de luz sigue al puntero. */
.auth::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px circle at var(--mx,50%) var(--my,35%),rgba(217,242,122,.30),transparent 60%)}
.auth-card{transition:transform .5s var(--out),box-shadow .5s var(--out)}
.auth-card:focus-within{transform:translateY(-2px);box-shadow:0 40px 80px -30px rgba(26,28,25,.35),0 2px 6px rgba(26,28,25,.06)}

/* Inicio: una luz ambiental se mueve despacio detrás del saludo. */
.home{position:relative}
.home::before{content:'';position:absolute;top:-180px;right:-140px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(217,242,122,.34),transparent 62%);animation:drift1 24s ease-in-out infinite;pointer-events:none}
.home-in{position:relative}

/* «Todo al día»: el check se dibuja. */
.es-check path{stroke-dasharray:20;stroke-dashoffset:20;animation:draw .55s .25s var(--out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}


/* Contadores: rebote al cambiar. */
.cnt.pop{animation:pop .45s var(--spring)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .home::before,.auth::before{display:none}
}

/* ---------- chat: cuerpo con barra lateral derecha ---------- */
.chat-body{flex:1;min-height:0;display:flex}
.chat-col{flex:1;min-width:0;display:flex;flex-direction:column}
/* Ancho: el que dejó la persona arrastrando su borde (--wp-w, 320–560 px); la conversación nunca baja de 360 px. */
.wpanel{position:relative;width:min(var(--wp-w,400px),max(320px,calc(100% - 360px)));flex:none;border-left:1px solid var(--line2);background:var(--surface2);display:flex;flex-direction:column;min-height:0;animation:wp-in .38s var(--out)}
.wp-resize{position:absolute;left:-4px;top:0;bottom:0;width:8px;z-index:3;cursor:col-resize;touch-action:none}
.wp-resize::after{content:'';position:absolute;left:3px;top:0;bottom:0;width:2px;border-radius:1px;background:transparent;transition:background .15s}
.wp-resize:hover::after,.wp-resize:focus-visible::after,body.resizing .wp-resize::after{background:var(--border3)}
.wp-resize:focus-visible{outline:none}
body.resizing{cursor:col-resize;user-select:none}
/* cabecera fija: quién es, qué hace ahora, la chincheta y cerrar. Cara a la izquierda; a su lado, nombre y puesto, y
   debajo, en su propia fila y a lo ancho (también bajo los botones), el estado. Nada tiene alto fijo: si el puesto o el
   estado son largos, se parten y la cabecera crece; nunca se pisan. */
.wp-head{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"av id acts" "av meta meta";align-items:start;column-gap:12px;row-gap:2px;padding:14px 10px 10px 16px}
.wp-head .av{grid-area:av}
.wp-head-id{grid-area:id;min-width:0;display:flex;flex-direction:column;gap:2px}
.wp-head-name{display:flex;align-items:center;gap:6px;min-width:0}
.wp-head-name b{font-size:16px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* el puesto: hasta dos líneas y, si no cabe, «…» */
.wp-head-sub{font-size:12.5px;line-height:1.35;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* el estado: su fila tiene siempre alto (al empezar o terminar de operar no se mueve nada), pero crece con el texto */
.wp-meta{grid-area:meta;min-width:0;min-height:24px;display:flex;align-items:flex-start;flex-wrap:wrap;gap:6px}
.wp-status{display:flex;align-items:flex-start;gap:6px;min-width:0;max-width:100%;padding:2px 0;font-size:12px;line-height:16px;color:var(--ink3)}
.wp-status .state-dot{margin-top:4.5px}
.wp-status-t{min-width:0;overflow-wrap:anywhere}
.wp-status small{font-size:12px}
.wp-stop{padding:0;border:0;background:none;font:inherit;color:var(--ink2);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.wp-stop:hover{color:var(--ink)}
/* «Detener», arriba con los demás botones: en rojo, como el resto de botones de parar */
.wp-head .wp-stop{color:var(--red)}
.wp-head .wp-stop:hover{background:var(--red2)}
.wp-head-acts{grid-area:acts;display:flex;gap:2px}
.wp-head-acts .icon-btn{width:30px;height:30px;border-radius:8px}
/* pestañas */
.wp-tabs{flex:none;display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--line2)}
.wp-tab{border:0;background:transparent;padding:9px 8px;font:500 13px var(--font);color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .25s}
.wp-tab:hover{color:var(--ink)}
.wp-tab.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.wp-tab:focus-visible{outline:2px solid var(--border3);outline-offset:-2px;border-radius:6px}
/* bloques de una pestaña */
.wp-sum{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px 4px}
.wp-sum .wp-role{margin-top:0}
.menu.wp-menu{min-width:240px;z-index:40}
.wp-menu .mi small{display:block;font-size:11.5px;color:var(--muted)}
.wp-menu .mi .grow{min-width:0;line-height:1.25}
.wp-menu span.mi{cursor:default;color:var(--ink2)}
.wp-menu span.mi:hover{background:transparent}
/* Sin transform en la animación: un diálogo fijo de dentro (el ordenador en grande) se quedaría encerrado en el bloque. */
.wp-block{padding:14px 16px 4px;animation:fade .25s var(--ease)}
.wp-block+.wp-block{border-top:1px solid var(--line2);margin-top:10px}
.wp-block-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted2)}
.wp-block-h>.ic{width:14px;height:14px;color:var(--muted)}
.wp-block-h .pill{margin:0;height:18px;padding:0 7px;font-size:11px;letter-spacing:0;text-transform:none}
.wp-block-b{display:flex;flex-direction:column;gap:10px}
.wp-pad{padding:14px 16px 4px;animation:fade .25s var(--ease)}
/* La «Ficha completa» (la tercera capa): una hoja grande y alta, con la cabecera compacta (su cara, su nombre y su
   puesto), las pestañas y el contenido a lo ancho, sin márgenes de más. */
.sheet.wide.wdeep{width:min(880px,calc(100vw - 48px));height:min(760px,calc(100dvh - 48px));padding:0;gap:0;overflow:hidden}
.wdeep>.sheet-h{padding:16px 56px 10px 20px;gap:12px}
.wdeep>.sheet-h h2{font-size:16px}
.wdeep>.sheet-h p{margin-top:1px;font-size:12.5px}
.wdeep>.sheet-x{top:12px;right:12px}
.wdeep .wp-tabs{padding:0 12px}
.wdeep-b{flex:1;min-height:0;overflow:auto;padding:14px 20px 20px;display:flex;flex-direction:column;gap:10px;animation:fade .25s var(--ease)}
.wdeep-b .wp-set{margin:0}
/* Con scroll, nada se encoge: una caja con overflow:hidden se aplastaba hasta no verse (los ajustes del correo). */
.wdeep-b>*{flex-shrink:0}
.wdeep-b .wp-sum{padding:0}
.wdeep-b>.wp-block{padding:0}
.wdeep-b>.wp-block+.wp-block{margin-top:4px;padding-top:14px}
.wp-body .wp-set{margin:14px 16px}
.sheet .wp-edit{padding:4px 0 0;animation:none}
@keyframes wp-in{from{opacity:0;transform:translateX(16px)}}
/* Misma altura que la cabecera del chat (.chat-h), para que las dos líneas casen. */
.wp-h{display:flex;align-items:center;gap:6px;min-height:44px;box-sizing:border-box;padding:6px 8px 6px 16px;border-bottom:1px solid var(--line2);font-size:13px}
/* Cabecera compacta, independiente de la de la conversación: no intenta alinearse con ella. */
.wp-h .icon-btn{width:28px;height:28px;border-radius:7px}
.wp-h .btn.sm{height:26px;padding:0 9px;font-size:12px;border-radius:7px}
.wp-body{flex:1;overflow:auto;padding:0 0 18px;scrollbar-width:thin}
/* Rol: lo primero que se lee después del nombre. */
.wp-role{width:100%;margin-top:12px;padding:12px 14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line2);text-align:left}
.wp-role.empty{background:transparent;border-style:dashed;border-color:var(--border)}
.wp-role-l{display:block;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.wp-role-t{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink2);white-space:pre-wrap;overflow-wrap:anywhere}
.wp-role-t.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.wp-role.empty .wp-role-t{color:var(--muted);font-size:13px}
.wp-role .link-btn{font-size:inherit}
.wp-role>.link-btn{margin-top:4px;font-size:12.5px}
.wp-edit{display:flex;flex-direction:column;gap:14px;padding:18px 18px 16px;animation:reveal-down .3s var(--out)}
.wp-field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:500;color:var(--muted)}
.wp-field small{font-size:12px;font-weight:400;line-height:1.4;color:var(--muted)}
.wp-edit .wp-input{background:var(--surface);border-color:var(--line)}
.wp-edit .wp-faces{justify-content:center}
/* Principal: si aún no tienes, una invitación clara; si ya lo es, un chip arriba y el atajo a Inicio como fila. */
.wp-chip-pr{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:999px;background:var(--lime-tint);border:1px solid var(--lime-line);font-size:12.5px;font-weight:500;color:var(--lime-ink)}
.wp-set{display:flex;flex-direction:column;margin:0 18px 14px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.wp-set-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border:0;border-top:1px solid var(--line2);background:var(--surface);font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:background .15s}
.wp-set-row:first-child{border-top:0}
.wp-set-row:hover{background:var(--soft)}
.wp-set-row b{display:block;font-size:13.5px;font-weight:500}
.wp-set-row small{display:block;font-size:12.5px;line-height:1.4;color:var(--muted)}
.wp-set-row .chev{color:var(--muted2)}
.wp-link{display:flex;align-items:center;gap:10px;padding:11px 18px;border-top:1px solid var(--line2);font-size:13.5px;color:var(--ink2);text-decoration:none;transition:background .15s,color .15s}
.wp-link:hover{background:var(--soft);color:var(--ink)}
.wp-link>.ic:first-child{width:15px;height:15px;color:var(--muted)}
.wp-link .chev{color:var(--muted2)}
.wp-principal{display:flex;margin:4px 18px 16px;padding:12px 14px;border-radius:14px;text-align:left;font:inherit;color:var(--ink)}
.wp-principal .wp-pr-star{width:30px;height:30px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.wp-principal b{display:block;font-size:14px}
.wp-principal small,.wp-principal p{display:block;margin:0;font-size:12.5px;line-height:1.45;color:var(--ink3)}
.wp-principal.cta{width:calc(100% - 36px);align-items:center;gap:12px;border:1px dashed var(--border2);background:var(--surface);cursor:pointer;transition:border-color .15s,background .2s,transform .25s var(--spring),box-shadow .2s}
.wp-principal.cta:hover{border-style:solid;border-color:var(--ink);background:var(--lime2);transform:translateY(-1px);box-shadow:var(--sh-2)}
.wp-principal.cta .wp-pr-star{background:var(--lime2);box-shadow:none}
.wp-principal.cta:hover .wp-pr-star{background:var(--surface);animation:pop .45s var(--spring)}
.wp-principal.cta .chev{color:var(--muted2);transition:transform .25s var(--spring)}
.wp-principal.cta:hover .chev{transform:translateX(2px);color:var(--ink)}
/* Encargo: se lee como texto, se edita con el lápiz. */
.wp-text{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink3);white-space:pre-wrap}
.wp-row{display:flex;gap:6px;align-items:center}
.wp-input{width:100%;border:1px solid transparent;border-radius:10px;padding:7px 9px;font:14px/1.5 var(--font);background:transparent;color:var(--ink);resize:vertical;transition:border-color .15s,background .15s,box-shadow .2s}
.wp-input:hover{background:var(--surface);border-color:var(--line)}
.wp-input:focus{outline:none;background:var(--surface);border-color:var(--border2);box-shadow:0 0 0 3px rgba(217,242,122,.35)}
.wp-row .wp-input{font-weight:600}
.wp-faces{justify-content:flex-start}
.wp-saved{position:absolute;right:4px;bottom:-16px;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--green);opacity:0;transform:translateY(-3px);transition:opacity .25s,transform .3s var(--spring)}
.wp-saved.on{opacity:1;transform:none}
.wp-saved .ic{width:12px;height:12px}
.wp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wp-list li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;color:var(--ink3)}
.wp-list li .pill{margin:0;flex:none}
.wp-list li small{display:block;font-size:11.5px}
.wp-list.mem li{padding:8px 4px 8px 8px;border-radius:10px;background:var(--surface);border:1px solid var(--line2);animation:row-in .35s var(--out) both}
.wp-about{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.wp-list.files li{align-items:center}
.wp-list.files .fname{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis}
.wp-acts{display:flex;flex-direction:column;gap:6px}
.wp-acts .run-head{padding:8px 10px}
.wp-ack{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink3);padding:6px 10px;border-radius:10px;background:var(--soft);animation:row-in .35s var(--out) both}
.wp-ack-e{font-size:15px}
.wp-routines{display:flex;flex-direction:column;gap:6px}
.wp-rt{display:flex;align-items:center;gap:8px;padding:8px 6px 8px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line2);font-size:13px;animation:row-in .35s var(--out) both}
.wp-rt b{display:block;font-size:13px}
.wp-rt small{display:block;font-size:11.5px}
.wp-rt.paused{opacity:.65}
.switch.sm i{width:30px;height:18px} .switch.sm i::after{width:12px;height:12px} .switch.sm input:checked+i::after{transform:translateX(12px)}
.wp-danger{border-top:1px solid var(--line2);padding:16px 18px 4px}

/* cabecera: estado, detener y privacidad */
.chat-h .subt{animation:swap-in .35s var(--out)}
.subt-t{overflow:hidden;text-overflow:ellipsis}
.priv-btn.shared{color:var(--teal)}
.pp-h{display:flex;align-items:center;gap:8px;font-size:14px}
.pp-t{margin:0;font-size:13px;line-height:1.5;color:var(--ink3)}

/* «Escribiendo…» */
.pc-live{flex:none;max-height:0;margin:0 24px;overflow:hidden;opacity:0;transition:max-height .25s var(--out),opacity .25s var(--ease)}
.pc-live.on{max-height:64px;opacity:1;margin-bottom:4px}
.pc-live-in{display:flex;align-items:center;gap:8px;min-height:32px;padding:3px 4px 3px 10px;border:1px solid var(--sep);border-radius:10px;background:var(--surface);font-size:13px;color:var(--ink2)}
.pc-live-text{flex:1;min-width:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-live-in .btn{flex:none}
.pc-live-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ink3);animation:pclive 1.6s ease-in-out infinite}
@keyframes pclive{50%{opacity:.35}}
.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}
.pc-big-note{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:10px;background:var(--surface);color:var(--ink2);font-size:13px;box-shadow:var(--sh-3)}
@media (prefers-reduced-motion:reduce){.pc-live-dot{animation:none}.pc-live{transition:none}}
.typing{flex:none;height:22px;margin:0 24px;padding-left:14px;font-size:12px;color:var(--muted);overflow:hidden;opacity:0;transform:translateY(3px);transition:opacity .25s var(--ease),transform .25s var(--out);pointer-events:none}
.typing.on{opacity:1;transform:none}
.typing-in{display:flex;align-items:center;gap:7px;height:22px;white-space:nowrap}
.typing b{color:var(--ink3);font-weight:600}
.typing-faces{display:flex}
.typing-faces .av+.av{margin-left:-6px}
.typing-dots{display:inline-flex;gap:3px;margin-left:5px;vertical-align:middle}
.typing-dots b{width:4px;height:4px;border-radius:50%;background:var(--muted2);animation:tdot 1.2s ease-in-out infinite}
.typing-dots b:nth-child(2){animation-delay:.15s} .typing-dots b:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}

/* menciones: @ y # */
.pop-h{font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted2);padding:4px 10px 6px}
/* Nombre arriba y pista debajo, cada uno en su línea y cortado con «…»: un nombre largo no se parte ni pisa las filas
   de al lado, y la pista («privado: no puede estar en canales») no lo empuja. Entero al pasar el ratón (tipIfCut). */
.pop-item>:not(.pop-t){flex:none}
.pop-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pop-n,.pop-s{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-s{font-size:11.5px}
.pop-item.warn .pop-n{color:var(--ink3)}
.pop-warn{color:var(--amber-ink);font-size:11.5px}
.pop-hash{width:20px;height:20px;border-radius:6px;background:var(--soft2);display:inline-flex;align-items:center;justify-content:center}
.pop-hash .ic{width:12px;height:12px}
.ch-ref{background:var(--blue-tint);color:var(--blue-ink);border-radius:5px;padding:0 3px;font-weight:500}
.ch-ref:hover{background:var(--blue-tint2);color:var(--blue-ink)}
.mnote{margin-top:6px;padding:2px 0 2px 10px;border-left:2px solid var(--border);font-size:12.5px;line-height:1.5;color:var(--muted);animation:reveal-down .3s var(--out)}
.mnote b{color:var(--ink3);font-weight:600}
.mnote-f{font-size:11.5px;color:var(--muted2)}
/* Quien lo escribió se lo pasó a su asistente: lo ven todos, discreto bajo el mensaje. */
.passed{margin-top:2px;font-size:12px;line-height:1.4;color:var(--muted)}
.bgroup.mine .passed{text-align:right}
.lnk{border:0;background:transparent;padding:0;font:inherit;color:var(--teal);font-weight:500;cursor:pointer}
.lnk:hover{text-decoration:underline}
.lnk.muted{color:var(--muted2);font-weight:400}
.share-explain{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--lime-tint);border:1px solid var(--lime-line);font-size:13px;line-height:1.45;color:var(--ink3);animation:reveal-down .3s var(--out)}
.share-explain .ic{margin-top:2px;flex:none}
/* Tus workers que no son públicos: por qué no se pueden invitar a un canal y dónde cambiarlo (su perfil). */
.hint.not-public{display:flex;gap:6px;align-items:flex-start}
.hint.not-public .ic{margin-top:2px;flex:none}
.hint.not-public a{color:inherit;text-decoration:underline}
.hint.not-public .not-public-lock{display:inline-flex;flex:none;border-radius:4px;cursor:help}
.mini-badge{position:absolute;right:-4px;bottom:-4px;background:var(--surface);border-radius:50%;padding:1px;box-shadow:0 0 0 1px var(--line)}
.ic.xs{width:11px;height:11px}

/* tooltip (src/ui/tooltips.js: lo coloca en px; aquí solo el aspecto) e icono de privacidad */
.tip{position:fixed;z-index:200;max-width:260px;background:var(--ink);color:var(--on-ink);font-size:12.5px;line-height:1.45;font-weight:400;padding:6px 9px;border-radius:8px;box-shadow:var(--sh-3);pointer-events:none;text-align:left;white-space:normal;overflow-wrap:break-word;letter-spacing:0;text-transform:none;animation:tip-in .1s var(--out)}
@keyframes tip-in{from{opacity:0;margin-top:3px}}
.tip.below{animation-name:tip-in-b}
@keyframes tip-in-b{from{opacity:0;margin-top:-3px}}
.tip.right{animation-name:tip-in-r}
@keyframes tip-in-r{from{opacity:0;margin-left:-3px}}
/* los añadidos de la derecha de cada fila (privacidad, contador) centrados en vertical */
.nav > .lbl:not(.grow){display:inline-flex;align-items:center;flex:none;align-self:center}
/* Quién puede hablar con un worker (STU-90, ui/WorkerIdentity.jsx): arriba a la derecha de vuestra conversación,
   «Compartir» si es solo tuyo o sus caras si es compartido (el mismo botón que los miembros de un canal); su explicación
   y el aviso de la primera vez que hablas con uno que no es tuyo. */
.members-btn.id-share{gap:6px;height:32px;padding:0 12px 0 10px;border-radius:999px;font:500 13px/1 inherit;cursor:pointer}
.members-btn.id-share .ic{width:15px;height:15px}
.members-btn.id-faces{height:34px;gap:6px;padding:0 8px 0 5px;cursor:pointer;font-family:inherit}
.id-faces-more{font-size:12px;font-weight:600;color:var(--ink3)}
.members-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* El bocadillo de «Compartir» al estrenar un worker (ShareTip): una vez por persona, señalando el botón. */
.share-tip-at{position:relative;display:inline-flex;flex:none}
.share-tip{position:absolute;top:calc(100% + 12px);right:-4px;z-index:20;width:236px;box-sizing:border-box;background:var(--ink);color:var(--on-ink);border-radius:14px;padding:10px 34px 10px 13px;font-size:13px;line-height:1.45;text-align:left;box-shadow:var(--sh-3);transform-origin:85% 0;animation:share-tip-in .5s var(--spring) both,share-tip-bob 2.6s ease-in-out .8s 3}
.share-tip::before{content:'';position:absolute;top:-6px;right:28px;width:14px;height:14px;background:inherit;border-radius:3px 0 0 0;transform:rotate(45deg)}
.share-tip p{margin:0}
.share-tip b{font-weight:600}
.share-tip-x{position:absolute;top:6px;right:6px;width:22px;height:22px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:inherit;opacity:.7;cursor:pointer}
.share-tip-x:hover{opacity:1;background:color-mix(in srgb,var(--on-ink) 14%,transparent)}
@keyframes share-tip-in{from{opacity:0;transform:translateY(6px) scale(.92)}to{opacity:1;transform:none}}
@keyframes share-tip-bob{0%,100%{translate:0 0}50%{translate:0 3px}}
@media (prefers-reduced-motion:reduce){.share-tip{animation:none}}
.id-notice{display:flex;align-items:center;gap:10px;margin:4px 20px 6px;padding:8px 8px 8px 10px;border-radius:12px;background:var(--lime-tint);border:1px solid var(--lime-line);color:var(--ink2);font-size:13px;line-height:1.45;animation:view-in .4s}
.id-notice p{margin:0}
.id-notice .link-btn{font-size:inherit;color:var(--ink2);padding:0}
.id-notice .btn{flex:none}
/* La «i» arriba, a la altura de la primera línea (una caja de una línea de alto); «Entendido», centrado. */
.id-notice-msg{display:flex;align-items:flex-start;gap:10px;min-width:0}
.id-notice-ic{display:grid;place-items:center;flex:none;height:1.45em;color:var(--teal)}
/* En el móvil, en una sola fila: la «i», la frase con «Saber más» y «Entendido» a la derecha. */
html.m .id-notice{margin:2px 10px 6px;gap:8px;padding:5px 5px 5px 10px;font-size:13px;line-height:1.35}
html.m .id-notice-msg{gap:8px}
html.m .id-notice-ic{height:1.35em}
html.m .id-notice .btn{height:32px;padding:0 10px}
.id-remind{display:flex;align-items:center;gap:6px;margin:2px 22px 4px;font-size:12.5px;line-height:1.4;color:var(--muted2);animation:view-in .4s}
.id-remind .ic{flex:none;color:var(--teal)}
.id-remind .link-btn{font-size:inherit;padding:0}
html.m .id-remind{margin:2px 14px 4px}
.id-info{display:flex;flex-direction:column;gap:14px}
.id-info-p b{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600}
.id-info-p ul{margin:6px 0 0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.5;color:var(--ink2)}
.id-info .fine{margin:0}
.warn-box{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:var(--amber2);border:1px solid var(--amber-line);color:var(--ink2);font-size:13px;line-height:1.5}
.warn-box b{display:flex;align-items:center;gap:6px;color:var(--amber-ink);font-size:13.5px;font-weight:600}
.check-after{display:inline-flex;margin-left:6px;vertical-align:middle}
.checkout .co-top{display:flex;align-items:flex-start;gap:12px}
.co-total{font-size:15px;font-weight:600;color:var(--ink);background:var(--lime2);border-radius:8px;padding:2px 8px;flex:none}

/* ---------- móvil ---------- */
@media (max-width:820px){
  .shell{padding:0;gap:0}
  .main-col{padding:8px;gap:6px}
  .wpanel{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:58;box-shadow:var(--sh-3);background:var(--surface2)}
  .wp-resize{display:none}
  .typing{margin:0 14px;padding-left:6px}
  .typing.below{left:14px;right:14px;margin:0}
  .pc-live{margin:0 12px}
  .pc-live.on{max-height:76px}
  .pc-live-in .btn{min-height:44px}
  .side-toggle-w{display:none}
  .menu.menu-sub{position:static;box-shadow:none;border:0;padding:2px 0 2px 14px;min-width:0;animation:reveal-down .25s var(--out)}
  .thread{padding:14px 12px 6px}
  .composer{margin:4px 10px 2px}
  .sug-chips.sug-out{margin:6px 10px 4px}
  .composer-tip{margin:0 14px 4px;padding-left:34px}
  .chips{margin-left:0}
  .home-in{padding:22px 16px 36px}
  .greet h1{font-size:25px}
  .iwhen,.iwhere,.ask-hint,.members-btn .small{display:none}
  /* «Para ti» en el móvil: quién y qué arriba; el asunto debajo, en dos líneas como mucho (no se corta en una). */
  .irow{flex-wrap:wrap;row-gap:4px;padding:10px 14px 10px 12px}
  .iwho{width:auto;max-width:50%}
  .isubj{flex-basis:100%;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding-left:36px}
  .idetail{padding-left:16px}
  .auth-card{padding:28px 20px}
  .chat-h .subt{max-width:52vw}
  .tabs{order:3;width:100%;overflow-x:auto}
  .prefs{flex-direction:column;gap:0;padding:0}
  .prefs-nav{width:auto;border-bottom:1px solid var(--sep);padding:8px 0 0}
  .prefs-back{margin:0 8px 4px}
  .prefs-back kbd,.prefs-gh,.prefs-foot{display:none}
  .prefs-scroll{flex-direction:row;gap:2px;overflow-x:auto;padding:0 8px 8px;scrollbar-width:none}
  .prefs-group{flex-direction:row;gap:2px}
  .pnav{width:auto;white-space:nowrap;padding:6px 10px}
  .prefs-main{border-radius:0;box-shadow:none}
  .prefs-x{display:none}
  .prefs-in{padding:22px 16px 48px}
  .prefs-h{flex-direction:column;align-items:stretch}
  .prefs-h h1{font-size:22px}
  .theme-pick{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .theme-prev{height:64px}
  .theme-opt small{display:none}
}

/* Tarjeta con captura de la pantalla del worker */
.card.screen .shot{position:relative;margin:10px 0 12px;border-radius:10px;overflow:hidden;border:1px solid var(--line, var(--line));background:#0f1012;line-height:0;user-select:none;-webkit-user-select:none}
.card.screen .shot img{width:100%;height:auto;display:block}
.card.screen.closed .shot{opacity:.55;max-height:140px}
.card.screen.closed .shot img{object-fit:cover;object-position:top}
.card.screen .shot.tappable{cursor:crosshair;touch-action:manipulation}
.shot-pt{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid #fff;background:rgba(20,20,20,.82);color:#fff;font:600 12px/22px var(--font);text-align:center;box-shadow:0 0 0 3px rgba(217,242,122,.9);padding:0;cursor:pointer}
.card.screen .card-actions .fine{margin:0 0 0 4px}
.card.screen .shot{margin:2px 0}
.card.screen .shot.zoomable{cursor:zoom-in;display:flex;justify-content:center}
.card.screen .shot.zoomable img{width:auto;max-width:100%;max-height:340px}
.shot-zoom{position:absolute;right:8px;bottom:8px;border:0;border-radius:999px;background:rgba(20,20,20,.72);color:#fff;font:500 11.5px/1 var(--font);padding:6px 10px;cursor:zoom-in;opacity:0;transition:opacity .15s}
.shot-zoom{opacity:1}
/* En el modal, la captura en grande (también ya contestada): ahí se lee el código o se busca la casilla */
.sheet.sheet-shot{width:min(1040px,94vw)}
.req-body .card.screen .shot.zoomable{width:fit-content;max-width:100%;margin:2px auto}
.req-body .card.screen .shot.zoomable img{max-height:calc(100dvh - 380px)}
.req-body .card.screen.closed .shot{opacity:1;max-height:none}
.shot-bigview{flex-direction:column;gap:14px;cursor:default}
.shot-big{position:relative;line-height:0;cursor:crosshair;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.scrim.imgview .shot-big img{max-width:min(1400px,94vw);max-height:calc(100vh - 140px);cursor:crosshair}
.shot-big-bar{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:12px;background:var(--surface);color:var(--ink2);font-size:13px;box-shadow:var(--sh-3)}
/* Cabecera de tarjeta con «Descartar» discreto */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}
/* Capturas e imágenes dentro de un mensaje */
.msg-shots{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.msg-shot{display:block;max-width:560px;width:100%;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--soft);line-height:0;cursor:zoom-in;transition:box-shadow .2s}
.msg-shot:hover{box-shadow:var(--sh-2)}
.msg-shot img{width:100%;height:auto;display:block}
/* Un GIF, como mucho a su tamaño: uno pequeño estirado se ve borroso (`--shot-w`, su ancho, si se sabe). */
.msg-shot.gif{max-width:min(560px,var(--shot-w,560px))}
/* La vista previa de un enlace (como en Slack): una raya a la izquierda, la web, el título, de qué va y su imagen. */
.link-cards{display:flex;flex-direction:column;gap:8px;margin-top:6px;max-width:560px}
.link-card{position:relative;display:flex;gap:12px;align-items:flex-start;border-left:3px solid var(--border2);padding:2px 30px 2px 12px}
/* Una vista previa que llega un momento después del mensaje aparece sin más; las que ya estaban al abrir, quietas. */
.link-card.arrive{animation:fade .25s var(--ease)}
.link-card.only-pic{padding-left:0;border-left:0}
.lc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lc-site{font-size:12.5px;font-weight:600;color:var(--muted2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lc-title{font-weight:600;color:var(--teal);line-height:1.35;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc-title:hover{text-decoration:underline;text-underline-offset:2px}
.lc-desc{font-size:13.5px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc-pic{display:block;margin-top:6px;max-width:360px;border:1px solid var(--line);border-radius:10px;overflow:hidden;line-height:0;background:var(--soft)}
.lc-pic img{width:100%;height:auto;max-height:280px;object-fit:cover;display:block}
.lc-thumb{flex:none;width:72px;height:72px;border-radius:8px;overflow:hidden;border:1px solid var(--line);line-height:0;background:var(--soft)}
.lc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lc-menu{position:absolute;top:0;right:0}
.lc-x{opacity:0;transition:opacity .15s}
.link-card:hover .lc-x,.lc-x:focus-visible,.lc-x.on{opacity:1}
.menu.lc-pop{min-width:260px;z-index:40}
.lc-pop .mi{white-space:nowrap}
@media (hover:none){.lc-x{opacity:.7}}
.msg-video{display:block;max-width:560px;width:100%;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0f1012;line-height:0}
.msg-video video{display:block;width:100%;max-height:420px;background:#0f1012}
/* Visor de imagen a pantalla completa */
.scrim.imgview{background:rgba(12,13,12,.82);z-index:60;cursor:zoom-out}
.scrim.imgview img{max-width:min(1280px,100%);max-height:100%;border-radius:10px;box-shadow:0 20px 60px -20px rgba(0,0,0,.6);cursor:default}
.imgview-x{position:absolute;top:14px;right:14px;color:#fff;background:rgba(255,255,255,.12)}
.imgview-x:hover{background:rgba(255,255,255,.22)}
.scrim.imgview:has(.imgview-bar){padding-bottom:76px}
.imgview-bar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:8px;z-index:1;cursor:default}
.imgview-act{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:13.5px;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.imgview-act:hover{background:rgba(255,255,255,.24)}
.imgview-act:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fwd-thumbs{display:flex;gap:8px;margin:0 0 12px}
.fwd-thumbs img{max-width:160px;max-height:120px;border-radius:8px;border:1px solid var(--line);object-fit:cover}

/* Ordenador del worker (panel) */
.pc{display:flex;flex-direction:column;gap:10px}
.pc-row{display:flex;align-items:center;gap:8px;font-size:13.5px}
.pc-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);flex:none}
.pc-dot.on{background:var(--green)}.pc-dot.warn{background:var(--amber)}.pc-dot.paused{background:var(--muted2)}.pc-dot.starting{background:var(--amber);animation:breath 1.4s ease-in-out infinite}.pc-dot.error{background:var(--red)}
.pc-screen{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--soft2);line-height:0;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:var(--muted2);font-size:12.5px}
.pc-screen.empty{flex-direction:column;gap:10px;padding:16px;line-height:1.45;text-align:center}
.pc-screen.empty .spinner{color:var(--muted2)}
.pc-screen img{width:100%;height:auto;display:block;user-select:none;-webkit-user-select:none}
.pc-screen.clickable img{cursor:zoom-in}
.pc-drive .pc-screen.clickable img{cursor:crosshair}
.pc-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pc-actions .icon-btn{margin-left:auto}
.pc-drive .pc-screen img{cursor:crosshair}
.pc-type{margin-top:10px;flex-direction:column;align-items:stretch;gap:8px}
.pc-type-l{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted2)}
.pc-type-l input{width:100%;min-width:0;flex:none;height:38px}
.pc-keys{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pc-keys .muted{font-size:12.5px;flex-basis:100%}
.pc-type-row{display:flex;gap:8px;align-items:center}
.pc-type-row input{flex:1}
.sheet.pc-drive-sheet{width:min(1280px,96vw)}
.pc-drive .pc-screen{width:min(100%,calc((100dvh - 300px) * 1.6));margin:0 auto}
.pc-actions .pc-wipe{margin-left:auto;min-height:32px}
.pc-take{align-self:flex-start;margin-top:2px}
.pc-actions .pc-wipe:disabled{opacity:.5;text-decoration:none}
.pc-wipe-info ul{margin:4px 0 10px;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.pc-mobile-hint{display:none}
.pc-zoom{width:100%;padding:0;cursor:zoom-in}
.pc-zoom:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pc-drive .pc-screen{position:relative}
.pc-mark{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.35);box-shadow:0 0 0 2px rgba(0,0,0,.35);pointer-events:none;animation:pc-mark 1.2s ease-out forwards}
@keyframes pc-mark{from{transform:scale(.6);opacity:1}to{transform:scale(1.4);opacity:0}}
.pc-big{width:min(1280px,100%)}
/* Su ordenador en directo y en tus manos (RemoteDesk.jsx): a pantalla completa, su escritorio como vídeo y una barra arriba */
.desk{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:rgb(14,15,14);animation:fade .18s;color:var(--ink)}
.desk-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 12px 8px;padding:7px 8px 7px 10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);flex:none}
.desk-who{display:flex;align-items:center;gap:10px;min-width:0}
.desk-who-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.desk-who-t b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desk-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.desk-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:breath 1.4s ease-in-out infinite}
.desk-status.live .desk-dot{background:var(--green);animation:pclive 2.4s ease-in-out infinite}
.desk-status.ended .desk-dot{background:var(--red);animation:none}
.desk-actions{display:flex;align-items:center;gap:6px;flex:none}
.desk-more{position:relative}
.desk-menu{min-width:250px}
.desk-ghost.on{background:var(--soft)}
.desk-ask{align-self:center;max-width:min(720px,calc(100% - 24px));margin:0 12px 8px;padding:7px 14px;border-radius:999px;background:var(--surface2);color:var(--ink2);font-size:13.5px;line-height:1.4;text-align:center;box-shadow:var(--sh-1)}
.desk-ask-l{font-weight:600;color:var(--ink)}
.desk-stage{position:relative;flex:1;min-height:0;margin:0 12px 12px;display:flex}
.desk-screen{flex:1;min-width:0;min-height:0;transition:opacity .25s,filter .25s}
.desk-screen.dim{opacity:.3;filter:grayscale(.5)}
.desk-screen canvas{border-radius:8px;box-shadow:0 24px 70px -24px rgba(0,0,0,.8);outline:none}
.desk-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(400px,calc(100% - 32px));padding:22px 26px;border-radius:16px;background:var(--surface);box-shadow:var(--sh-3);text-align:center;font-size:14px;color:var(--ink2);line-height:1.45}
.desk-note b{font-size:15px;color:var(--ink)}
.desk-end-ic{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--soft);color:var(--ink3)}
.desk-end-a{display:flex;gap:8px;margin-top:6px}
.desk-toast{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--surface);color:var(--ink2);font-size:13px;box-shadow:var(--sh-3)}
.desk-hint{display:flex;margin:0 auto;align-items:center;gap:12px;width:max-content;max-width:min(620px,calc(100% - 24px));padding:9px 10px 9px 16px;border-radius:14px;background:var(--surface);color:var(--ink2);font-size:13.5px;line-height:1.4;box-shadow:var(--sh-3);animation:menu-in .22s var(--out)}
.desk-hint.warn{border:1px solid var(--amber-line)}
.desk-type{margin:0 auto;width:min(640px,calc(100% - 24px));display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-3);animation:menu-in .2s var(--out)}
.desk-type-l{font-size:12.5px;color:var(--muted)}
.desk-type-row{display:flex;gap:8px;align-items:flex-end}
.desk-type-row textarea{flex:1;min-width:0;min-height:38px;max-height:120px;resize:none;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--white);font:14px/1.4 var(--font);color:var(--ink)}
.desk-type-row :is(textarea,input){flex:1;min-width:0;min-height:38px;max-height:120px;resize:none;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--white);font:14px/1.4 var(--font);color:var(--ink)}
.desk-type-row :is(textarea,input):focus-visible{outline:2px solid var(--ink3);outline-offset:1px}
.desk-type-row .btn{height:38px}
.desk-keys{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.desk-type-x{margin-left:auto}
.pc-big-bar{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px)}
/* El aviso de «Tomar el control» y las capturas se abren desde esa barra, pero a nivel de página: por encima de la pantalla en grande (60). */
.scrim:has(> .pc-take-sheet),.scrim:has(> .pc-drive-sheet){z-index:65}
/* Con barra, la imagen le deja sitio: así no tapa lo de abajo de su pantalla (en un formulario, el botón de enviar). */
.pc-bigview:has(.pc-big-bar){padding-bottom:84px}
.pc-big-bar .pc-big-note{position:static;transform:none;display:inline-flex;align-items:center;gap:8px}
@media (max-width:640px){
  .desk-bar{margin:6px;padding:8px;gap:8px;flex-wrap:wrap}
  .desk-who{flex:1 1 100%}
  .desk-actions{flex:1 1 100%;justify-content:flex-end}
  .desk-actions .desk-ghost{margin-right:auto}
  .desk-bar{position:relative}
  .desk-more{position:static}
  .desk-menu{left:0;right:0;top:calc(100% + 6px);min-width:0}
  .desk-who-t b{font-size:13px}
  .desk-actions .btn{min-height:44px;padding:0 12px}
  .desk-actions .desk-icon{width:44px;height:44px}
  .desk-stage{margin:0 0 6px}
  .desk-screen canvas{border-radius:0}
  .desk-ask{font-size:13px;border-radius:12px}
  .desk-dock{position:absolute;left:8px;right:8px;bottom:10px;z-index:2}
  .desk-hint{flex-direction:column;align-items:stretch;text-align:left}
  .desk-keys .btn,.desk-type-row .btn{min-height:44px}
  .pc-big-bar{flex-direction:column;align-items:stretch;bottom:12px}
}
/* En el escritorio, los controles son una píldora debajo de su pantalla, que se queda con todo el sitio. */
/* De arriba abajo: su pantalla (pegada a lo de abajo), lo que te pide, la pista o «Escribir» y la píldora. */
.desk-dock{display:flex;flex-direction:column;align-items:center;gap:8px}
.desk-dock:empty{display:none}
@media (min-width:641px){
  .desk-stage{order:1;margin-top:14px;margin-bottom:0}
  .desk-screen canvas{margin-bottom:0!important}
  .desk-ask{order:2;margin:10px 12px 0}
  .desk-dock{order:3;margin-top:10px}
  .desk-bar{order:4;align-self:center;margin:10px auto 14px;padding:6px 6px 6px 8px;gap:18px;border-radius:999px}
  .desk-bar .btn{border-radius:999px}
  .desk-menu{top:auto;bottom:calc(100% + 10px)}
}
@media (prefers-reduced-motion:reduce){.desk,.desk-hint,.desk-type{animation:none}.desk-dot{animation:none}}

.pc-big .pc-screen{aspect-ratio:auto}
@media (max-width:640px){.pc-mobile-hint{display:inline}.pc-actions .btn,.pc-actions .pc-wipe,.pc-keys .btn,.pc-type-row .btn,.pc-screen.empty .btn{min-height:44px}.pc-drive .pc-screen{width:100%}.pc-bigview .pc-big{width:100%;max-height:100%;overflow:auto}.pc-bigview .pc-big .pc-screen:not(.empty){width:200%}}

/* Formulario seguro de la bóveda */
.secret-form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.secret-form input{height:38px;border:1px solid var(--border);border-radius:10px;padding:0 12px;font:14px var(--font);color:var(--ink);background:var(--surface);outline:none;min-width:0}
.secret-form input:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(217,242,122,.55)}
.secret-row{display:flex;gap:8px}.secret-row input{flex:1}
.secret-form .fine{display:flex;gap:6px;align-items:flex-start;margin:2px 0 0}
/* Código de verificación (doble factor): un solo campo, grande y espaciado para leerlo bien al escribirlo o pegarlo;
   el error pegado al campo; «No tengo el código» lejos del botón de enviar (un dedo que falla no descarta nada). */
.code-form{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.code-form .code-input{height:48px;max-width:260px;border:1px solid var(--border);border-radius:10px;padding:0 14px;font:600 22px/1 var(--mono);letter-spacing:.14em;color:var(--ink);background:var(--surface);outline:none;min-width:0}
.code-form .code-input::placeholder{font:500 15px var(--font);letter-spacing:0;color:var(--muted2)}
.code-form .code-input:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(217,242,122,.55)}
.code-form .code-input[aria-invalid="true"],.code-form .code-input[aria-invalid="true"]:focus{border-color:var(--red);box-shadow:0 0 0 4px var(--red2)}
.code-form .card-err{margin:-4px 0 0}
.code-form .fine{display:flex;gap:6px;align-items:flex-start;margin:2px 0 0}
.code-form .code-no{align-self:flex-start;margin-top:4px}
.card.code .card-body .link-btn{font-size:inherit;padding:0}
.req-body .card.code .card-title{display:none}
@media (max-width:640px){.code-form .code-input{max-width:none;font-size:24px}.code-form .card-actions .btn{min-height:44px;width:100%;justify-content:center}.code-form .code-no{min-height:44px;display:inline-flex;align-items:center}.card.code .card-body .link-btn{padding:11px 0;margin:-11px 0}}
.form-fields .field textarea{min-height:72px;font:14px var(--font)}
.form-fields .field input,.form-fields .field textarea{width:100%;box-sizing:border-box}
@media (max-width:640px){.secret-form .card-actions{flex-direction:column;align-items:stretch;gap:4px}.secret-form .card-actions .btn{min-height:44px;width:100%;justify-content:center}.secret-form .card-actions .link-btn{min-height:44px}}
.form-answers{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:4px 12px;margin:10px 0 4px;font-size:13.5px}
.form-answers dt{color:var(--muted)}
.form-answers dd{margin:0;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.vault-list .tr .ic{flex:none}
.vault-row{flex-direction:column;align-items:stretch;gap:0}
.vault-main{display:flex;align-items:center;gap:12px;min-width:0}
.vault-main .grow{min-width:0}.vault-main .grow small{display:block;overflow-wrap:anywhere}
.vault-row .vault-form{margin:10px 0 2px;padding:14px;border:1px solid var(--line2);border-radius:12px;background:var(--ground)}
.vault-uses{list-style:none;margin:8px 0 2px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink2)}
.vault-uses li{display:flex;align-items:center;gap:8px}.vault-uses li.denied{color:var(--muted)}
.vault-workers{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow:auto;border:1px solid var(--line2);border-radius:10px;padding:4px}
.vault-form .field .seg{align-self:flex-start}
/* Un dato largo (una clave, un certificado): área de texto tapada hasta que se pide verlo */
.secret-text{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.secret-text textarea{width:100%;box-sizing:border-box;min-height:64px;height:auto;padding:9px 12px;font:13px var(--mono);resize:vertical;border:1px solid var(--border);border-radius:10px;color:var(--ink);background:var(--surface);outline:none}
.secret-text textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(217,242,122,.55)}
.secret-text textarea.masked{-webkit-text-security:disc}
.secret-form .field input,.secret-form .field textarea{width:100%;box-sizing:border-box}

/* Propósito del canal en la cabecera */
.chat-h button.subt.purpose{border:0;background:none;padding:0;font:inherit;font-size:12.5px;color:var(--muted);cursor:text;max-width:100%;text-align:left;display:block}
.chat-h button.subt.purpose:hover{color:var(--ink2)}
.chat-h button.subt.purpose.empty{opacity:.7}
.chat-h .purpose-in{display:block;width:min(520px,100%);height:24px;margin-top:1px;border:1px solid var(--border);border-radius:7px;padding:0 8px;font:12.5px var(--font);color:var(--ink);background:var(--surface);outline:none}
.chat-h .purpose-in:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(217,242,122,.55)}
.members-btn{padding:0 10px}

/* Primeros pasos (Inicio) */
.fs{display:flex;flex-direction:column;gap:14px;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-2);animation:card-in .5s var(--out)}
.fs-h{display:flex;align-items:center;gap:12px}
.fs-h h2{margin:0;font-size:17px;letter-spacing:-.01em}
.fs-h p{margin:2px 0 0}
.fs-n{font-size:12px;color:var(--muted);white-space:nowrap}
.fs-art{display:flex}.fs-art img{width:30px;height:30px;border-radius:50%;margin-left:-8px;border:2px solid var(--surface)}.fs-art img:first-child{margin-left:0}
.fs-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fs-steps li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.fs-steps li.cur{color:var(--ink);font-weight:600}
.fs-steps li.done{text-decoration:line-through;text-decoration-color:var(--border3)}
.fs-dot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;flex:none}
.fs-steps li.cur .fs-dot{border-color:var(--ink)}
.fs-steps li.done .fs-dot{background:var(--lime);border-color:transparent;color:#1A1C19}
.fs-try{display:flex;flex-wrap:wrap;gap:8px}
.fs .btn.dark{align-self:flex-start}
.pr-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0;font-size:13.5px;color:var(--muted)}

.who .t.via{margin-left:4px}
/* Por qué viene a contarlo si nadie le ha escrito («Recordatorio», «Encargo a Manolo»): junto a la hora. */
.who .t.motive{margin-left:4px;color:var(--ink3);font-weight:500}
/* En qué está la tarea que empezó este mensaje (TaskStatus): una línea, sin avisar. */
.task-status{margin:4px 0 2px;font-size:13px;color:var(--ink3);line-height:1.35}
.wp-danger .wp-swap{display:block;margin:0 0 12px;font-size:13px;color:var(--muted)}
.wp-mobile{margin:0;padding:11px 18px;border-top:1px solid var(--line2);font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wp-mobile .ic{width:15px;height:15px}
.wp-mobile:not(.on){flex-direction:column;align-items:flex-start;gap:1px}
.wp-mobile .link-btn{font-size:13.5px;color:var(--ink2);text-decoration:none;text-align:left}
.wp-mobile .link-btn:hover{color:var(--ink);text-decoration:underline}
.wp-mobile small{font-size:12px}
.wp-mobile.on{color:var(--ink2)}

/* ---------- peticiones: píldora en la conversación, modal y página suelta /r/<token> ---------- */
.req-pill{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin-top:6px;padding:7px 10px 7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:500 13px var(--font);color:var(--ink);box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .2s,transform .15s var(--spring)}
.req-pill:hover{border-color:var(--ink);box-shadow:var(--sh-2)}
.req-pill:active{transform:scale(.98)}
.req-pill .ic{width:14px;height:14px;flex:none}
.req-pill.mine{background:var(--lime2);border-color:var(--lime-line)}
.req-pill.closed{background:var(--surface2);color:var(--muted)}
.req-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.req-state{font-size:12px;color:var(--muted2);white-space:nowrap}
.req-pill.closed .req-state.ok{color:var(--green)}
.req-body .card{border:0;padding:0;box-shadow:none;animation:none;max-width:none;margin:0}
.req-body .card.closed{background:none}
.req-body .card-kicker{display:none}
.req-body .card-head{justify-content:flex-start;min-height:0}
.card-input{display:grid;grid-template-columns:max-content 1fr;gap:6px 12px;margin:0;font-size:13.5px;line-height:1.45;background:var(--soft);border-radius:10px;padding:10px 12px}
.card-input dt{color:var(--muted2);font-weight:500}
.card-input dd{margin:0;white-space:pre-wrap;word-break:break-word;min-width:0}
.card-input .wide{grid-column:1/-1}
.card-input dt.wide{margin-top:4px;color:var(--ink2);font-weight:600}
.card-input dd .card-input{background:none;padding:0;border-radius:0}
.card-input dt.wide:not(:first-child){border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.card-input-group{display:flex;flex-direction:column;gap:6px}
/* Un email por enviar (STU-140): sus cabeceras, el mensaje como en el correo y, al editar, los campos en la tarjeta. */
.card-input.mail-fields{align-items:baseline}
.mail-in{width:100%;min-width:0;font:inherit;font-size:13.5px;color:var(--ink)}
input.mail-in{height:32px}
textarea.mail-in{display:block;resize:vertical;line-height:1.55;padding:9px 11px;min-height:110px}
.mail-in.bad{border-color:var(--red)}
.mail-fields .ferr,.mail-body-edit .ferr{display:block;margin-top:3px}
.mail-body-wrap{display:flex;flex-direction:column;gap:4px}
.mail-body{font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;max-height:340px;overflow:auto}
.mail-body.clamp{max-height:9.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
.card.a.inline.closed .mail-body{font-size:13px;padding:8px 10px}
/* Los archivos de una tarjeta (STU-137): miniaturas que se abren en grande; lo que no es imagen, por su nombre. */
.card-files{display:flex;flex-wrap:wrap;gap:10px}
.card-file{display:flex;flex-direction:column;gap:3px;width:128px;min-width:0}
.card-file-thumb{display:flex;align-items:center;justify-content:center;width:128px;height:96px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--soft);padding:0;color:var(--muted2);cursor:zoom-in}
.card-file-thumb.doc{cursor:pointer}
.card-file-thumb:hover{border-color:var(--border2)}
.card-file-thumb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.card-file-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card-file-gone{display:flex;align-items:center;justify-content:center;width:128px;height:96px;border:1px dashed var(--border);border-radius:10px;color:var(--muted2)}
.card-file-name{font-size:12px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-file-note{font-size:11.5px;color:var(--muted)}
.card.a.inline.closed .card-file,.card.a.inline.closed :is(.card-file-thumb,.card-file-gone){width:84px}
.card.a.inline.closed :is(.card-file-thumb,.card-file-gone){height:63px}
.req-page{min-height:100%;display:flex;justify-content:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
.req-page-in{width:100%;max-width:520px;display:flex;flex-direction:column;gap:16px}
.req-brand{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink2)}
.req-from{display:flex;align-items:center;gap:10px}
.req-from .iatag{margin:0 2px 0 6px;vertical-align:2px}
.req-page .card{max-width:none;margin:0;padding:18px;border-radius:18px}
.req-msg{background:var(--surface);border-radius:18px;padding:22px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.req-msg h1{margin:0;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.req-msg p{margin:0}
.req-fine{text-align:center}
@media (max-width:520px){
  .req-page .card-actions .btn{flex:1 1 auto;justify-content:center}
  .card .card-actions .btn{min-height:44px}
  .req-page .card-actions.co-after .btn{flex:0 1 auto}
  .req-page .btn,.req-page .opt,.req-body .btn,.req-body .opt{min-height:44px}
  .req-page .link-btn{min-height:44px;padding:0 8px}
  .q-foot .q-link{min-height:44px}
  .q-other input,.q-other input:focus{height:40px;font-size:16px}
  .q-send{width:36px;height:36px}
  .q-opts{flex-direction:column;align-items:stretch}
  .q-opts .opt{min-height:44px;padding:10px 14px}
  .card.q .card-reply input{height:44px;font-size:16px}
  .card.q .card-reply .btn{min-height:44px}
  .req-msg .btn{align-self:stretch;justify-content:center}
  .card-input{grid-template-columns:1fr}
  .card-input dd{margin-bottom:4px}
  input.mail-in,textarea.mail-in{font-size:16px}
  input.mail-in{height:40px}
  /* Un email se lee como en el correo: «Para  ana@…» en una línea, también en el móvil. */
  .card-input.mail-fields{grid-template-columns:max-content 1fr}
  .card-input.mail-fields dd{margin-bottom:0}
  .card-file,:is(.card-file-thumb,.card-file-gone){width:96px}
  :is(.card-file-thumb,.card-file-gone){height:72px}
}

/* ---------- retoques del modo oscuro ---------- */
:root[data-theme=dark] .role.r-owner{background:var(--lime2);color:var(--lime)}
:root[data-theme=dark] .blob{opacity:.16}
:root[data-theme=dark] .auth-bg .grid{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)}
:root[data-theme=dark] .auth::before{background:radial-gradient(560px circle at var(--mx,50%) var(--my,35%),rgba(217,242,122,.08),transparent 60%)}
:root[data-theme=dark] .home::before{background:radial-gradient(circle,rgba(217,242,122,.07),transparent 62%)}
:root[data-theme=dark] .hl-gap{--hl-gap-dim:22%;--hl-gap-shade:28%}
:root[data-theme=dark] .hire-glow{background:radial-gradient(circle,rgba(217,242,122,.28),transparent 65%)}
:root[data-theme=dark] .swatch{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
:root[data-theme=dark] .btn.dark{box-shadow:none}
:root[data-theme=dark] .btn.dark::after{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%)}
:root[data-theme=dark] .btn.danger:hover{background:#D4553F}
:root[data-theme=dark] .field input:focus,:root[data-theme=dark] .field textarea:focus,:root[data-theme=dark] .field select:focus,:root[data-theme=dark] .hashin:focus-within{box-shadow:0 0 0 4px rgba(217,242,122,.18)}
:root[data-theme=dark] .ask:focus-within{box-shadow:0 18px 38px -20px rgba(0,0,0,.6),0 0 0 4px rgba(217,242,122,.16)}
:root[data-theme=dark] img[src^="/avatars/"]{filter:brightness(.94)}
/* Al cambiar de tema, el cambio se funde (si el navegador tiene View Transitions). */
html[data-vt=theme]::view-transition-old(root),html[data-vt=theme]::view-transition-new(root){animation:none;mix-blend-mode:normal}
html[data-vt=theme]::view-transition-new(root){animation:vt-theme .45s var(--out)}
@keyframes vt-theme{from{clip-path:circle(0 at var(--tx,50%) var(--ty,50%))}to{clip-path:circle(150vmax at var(--tx,50%) var(--ty,50%))}}
html[data-vt=theme] .main-col{view-transition-name:none}


.chat-h .name-btn{border:0;background:none;padding:0;font:inherit;font-size:16px;font-weight:600;color:var(--ink);cursor:text;letter-spacing:-.01em}
.chat-h .name-btn .ic{opacity:0;transition:opacity .15s}
.chat-h .name-btn:hover .ic,.chat-h .name-btn:focus-visible .ic{opacity:1}
.chat-h .name-in{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--ink);border-radius:8px;padding:0 8px;height:28px;box-shadow:0 0 0 3px rgba(217,242,122,.55)}
.chat-h .name-in input{border:0;outline:none;background:transparent;font:600 16px var(--font);color:var(--ink);width:min(320px,52vw);height:26px}

/* Visor de ficheros */
.file-chip button.fname{border:0;background:none;padding:0;font:inherit;font-weight:500;cursor:pointer;text-align:left}
.file-chip button.fname:hover{text-decoration:underline}
.scrim.fv-scrim{z-index:55;align-items:stretch;padding:28px 16px}
.fv{width:min(860px,100%);margin:0 auto;display:flex;flex-direction:column;background:var(--surface, #fff);border-radius:16px;box-shadow:var(--sh-3, 0 20px 60px -20px rgba(0,0,0,.4));overflow:hidden;animation:card-in .3s var(--out)}
.fv-h{display:flex;align-items:center;gap:6px;padding:12px 14px 12px 20px;border-bottom:1px solid var(--line)}
.fv-name{font-size:14.5px;word-break:break-all}
.fv-b{flex:1;overflow:auto;padding:22px 28px 32px;font-size:15px;line-height:1.6;color:var(--ink)}
.fv-load{display:flex;justify-content:center;padding:40px}
.fv-md .fv-h,.fv-md h2.fv-h,.fv-md h3.fv-h,.fv-md h4.fv-h,.fv-md h5.fv-h{display:block;border:0;padding:0;margin:1.2em 0 .4em;line-height:1.25;letter-spacing:-.01em}
.fv-md h2.fv-h{font-size:22px}.fv-md h3.fv-h{font-size:18px}.fv-md h4.fv-h{font-size:16px}.fv-md h5.fv-h{font-size:14.5px}
.fv-md > :first-child{margin-top:0}
.fv-md p{margin:.5em 0}.fv-md ul,.fv-md ol{margin:.5em 0;padding-left:1.4em}
.fv-md blockquote{margin:.6em 0;padding:.2em 0 .2em 14px;border-left:3px solid var(--line);color:var(--muted)}
.fv-md hr{border:0;border-top:1px solid var(--line);margin:1.4em 0}
.fv-md code{font-family:var(--mono, ui-monospace, monospace);font-size:.9em;background:rgba(127,127,127,.12);padding:.1em .35em;border-radius:5px}
.fv-code,.fv-text{font-family:var(--mono, ui-monospace, monospace);font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word;margin:.6em 0}
.fv-code{background:rgba(127,127,127,.09);border-radius:10px;padding:12px 14px}
.fv-text{margin:0}
.fv-table{overflow:auto;margin:.8em 0;border:1px solid var(--line);border-radius:10px}
.fv-table table{border-collapse:collapse;width:100%;font-size:13.5px}
.fv-table th,.fv-table td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:nowrap}
/* Que quepan todas las columnas: el texto largo (una web, un enlace de LinkedIn) baja de línea en vez de cortarse. */
.fv-table td{white-space:normal;min-width:6.5em;max-width:260px}
.fv-table td a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.fv-table th{font-weight:600;background:rgba(127,127,127,.06);position:sticky;top:0}
.fv-table tr:last-child td{border-bottom:0}
@media (max-width:640px){.scrim.fv-scrim{padding:0}.fv{border-radius:0}.fv-b{padding:18px 18px 28px}}

/* worker que escribe de parte de alguien: dos caras unidas */
/* De parte de alguien (su asistente): su cara con la de esa persona encima, en la esquina; --s es la suya (Via.jsx). */
.av-pair{position:relative;display:inline-flex;flex:none;width:var(--s,36px);height:var(--s,36px);align-self:flex-start}
.av-pair .av-pair-p{position:absolute;right:-6px;bottom:-6px;box-shadow:0 0 0 2.5px var(--surface);border-radius:7px}
/* El nombre de quien escribe de parte de alguien, en la conversación, en un hilo y en «Hilos». */
.via .via-who{font-weight:500;color:var(--ink3)}

/* Documento abierto a la derecha (se lee mientras se habla) */
.doc-pane{width:clamp(380px,40vw,720px);flex:none;display:flex;flex-direction:column;min-height:0;background:var(--surface);border-radius:16px;box-shadow:var(--sh-1);overflow:hidden;animation:wp-in .32s var(--out)}
.doc-pane .fv-h{min-height:66px;box-sizing:border-box}
.doc-pane .fv-b{padding:20px 26px 32px}
.file-chip.on{border-color:var(--ink);box-shadow:0 0 0 3px rgba(217,242,122,.45)}
/* Documento vivo (STU-128, STU-134): en qué está el guardado, lo que ha cambiado y editarlo en el propio panel. */
.fv-title{min-width:0;display:flex;flex-direction:column;gap:2px}
.fv-st{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.fv-st.dirty{color:var(--amber-ink)}
.fv-st.saving{color:var(--muted)}
.fv-st.ok{color:var(--green)}
.fv-st.bad{color:var(--red)}
.linkish{border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.fv-news{display:flex;align-items:center;gap:8px;padding:9px 14px 9px 20px;background:var(--green-tint);border-bottom:1px solid var(--green-line);font-size:13.5px;color:var(--green-ink);flex-wrap:wrap}
.fv-news.bad{background:var(--red2);border-color:var(--red-line);color:var(--red)}
.fv-b.editing{display:flex;padding:0}
.fv-edit{flex:1;width:100%;min-height:60vh;border:0;outline:none;resize:none;padding:20px 26px 32px;font-family:var(--mono, ui-monospace, monospace);font-size:13.5px;line-height:1.6;color:var(--ink);background:transparent;box-sizing:border-box}
.fv-theirs{flex:none;max-height:40%;border-bottom:1px solid var(--line)}
.fv-diff{font-family:var(--mono, ui-monospace, monospace);font-size:13px;line-height:1.55}
.dl{display:flex;gap:8px;padding:1px 8px;border-radius:4px;white-space:pre-wrap;word-break:break-word}
.dl-m{flex:none;width:1ch;color:var(--muted2);user-select:none}
.dl-add{background:var(--green2);color:var(--green-ink)}
.dl-add .dl-m{color:var(--green)}
.dl-del{background:var(--red2);color:var(--red);text-decoration:line-through;text-decoration-color:rgba(194,65,45,.5)}
.dl-del .dl-m{color:var(--red)}
.dl-fold{color:var(--muted2);font-family:var(--font);font-size:12px;padding:6px 8px;margin:4px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.file-chip .du{color:var(--muted);font-size:12.5px;white-space:nowrap}
.file-chip .du .add{color:var(--green);font-weight:600}
.file-chip .du .del{color:var(--red);font-weight:600}
.du-note{font-size:13px;color:var(--muted);margin-top:4px}
.file-chip.upd{flex-wrap:wrap;row-gap:4px}
.bub .file-chip.upd .du{flex-basis:100%;order:3;padding-bottom:8px}
/* En el móvil (burbujas): toda la tarjeta abre el fichero y descargar se pulsa con el dedo (44×44). */
.bub .files{display:flex}
.bub .file-chip{display:flex;width:100%;min-width:0;padding:0 0 0 12px;gap:6px}
.bub .file-chip .fname{flex:1;min-width:0;max-width:none;min-height:44px;display:flex;align-items:center}
.bub .file-chip .fdl{width:44px;height:44px;flex:none}

/* ---------- hilos de respuestas ---------- */
.replies-bar{display:flex;align-items:center;gap:8px;margin:4px 0 4px;padding:2px 0;border:0;border-radius:6px;background:none;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;max-width:100%;text-align:left}
/* Como en Slack: una línea bajo el mensaje, fuera de su sombreado; al pasar por encima, solo se subraya «N respuestas». */
.replies-bar .rb-n{color:var(--blue-ink);font-weight:600;text-underline-offset:2px}
.replies-bar:hover .rb-n,.replies-bar.on .rb-n{text-decoration:underline}
.rb-faces{display:flex}
.rb-faces>*{box-shadow:0 0 0 2px var(--surface);border-radius:6px}
.rb-faces>*+*{margin-left:-5px}
.rb-new{font-size:11px;font-weight:600;color:var(--blue-ink);background:var(--blue-tint);border-radius:6px;padding:0 6px}
.rb-when{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Una respuesta sin enviar en el hilo (STU-103): la marca «Borrador», junto a sus respuestas o sola bajo el mensaje. */
.draft-mark{display:inline-flex;align-items:center;gap:3px;flex:none;font-size:11px;font-weight:600;color:var(--amber-ink);background:var(--amber2);border:1px solid var(--amber-line);border-radius:6px;padding:0 6px;line-height:16px}
.draft-mark .ic{flex:none}
.hilo-tag{display:inline-flex;align-items:center;gap:4px;align-self:center;margin-left:2px}
.hilo-tag .ic{width:13px;height:13px}
button.hilo-tag{border:0;background:none;padding:0;font-family:inherit;cursor:pointer}
button.hilo-tag:hover{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.bubble.in-hilo{background:var(--blue-tint2)}
.hilo-panel{background:var(--surface)}
.hilo-panel .thread{padding:16px 16px 8px}
/* «Ver lo que se hablaba antes» en el hilo abierto: encima del mensaje que lo empezó. */
.hilo-panel .hl-before-row.hilo-before{margin:0 0 -6px}
.hilo-panel .hl-before.hilo-before{padding-bottom:12px}
.hilo-panel .hilo-before .hl-before-h{padding-left:0}
.hilo-panel .hilo-before .hl-day{margin-left:0}
.hilo-panel .composer{margin:4px 12px 2px}
.hilo-panel .composer-tip{margin:0 16px 6px}
.hilo-panel .composer-foot{left:16px;right:16px}
.hilo-panel .typing.below{left:16px;right:16px}
.hilo-panel .composer-under.with-foot .typing.below{left:auto}
.hilo-h .ic{color:var(--ink3)}
.hilo-h .hilo-follow.on .ic{color:var(--ink)}
.hilo-sep{display:flex;align-items:center;gap:10px;margin:10px 0 2px;color:var(--muted2);font-size:11.5px;font-weight:600}
.hilo-sep::after{content:'';flex:1;height:1px;background:var(--line2)}
.hilo-bc{display:flex;align-items:center;gap:7px;margin:-4px 24px 10px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.hilo-bc input{margin:0;accent-color:var(--ink)}
.composer-foot .hilo-bc{margin:0}
@media (max-width:820px){.hilo-panel{width:100vw}.hilo-panel .wp-resize{display:none}.hilo-bc{margin:-2px 14px 10px}.composer-foot .hilo-bc{margin:0}}

/* ---- P11: conectores y plantillas ---- */
/* Logo de una app: su icono sobre blanco o la inicial sobre su color de marca. */
.app-logo{--s:36px;display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--s);height:var(--s);border-radius:calc(var(--s)*.26);overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line);font-weight:700;font-size:calc(var(--s)*.44);line-height:1;user-select:none}
.app-logo img{width:100%;height:100%;object-fit:contain;display:block}
.app-logo.letter{box-shadow:none;background:var(--soft2);color:var(--ink3)}
.app-soon{flex:none;font-size:12px;font-weight:500;color:var(--muted2);background:var(--soft2);border-radius:999px;padding:3px 10px;white-space:nowrap}

/* Diálogo «Conectar aplicaciones» */
.sheet.apps-sheet{width:760px;height:min(740px,calc(100dvh - 32px));overflow:hidden;gap:14px}
.apps-hicon{display:flex;align-items:center;gap:6px;margin-left:-8px}
.apps-tools{display:flex;flex-direction:column;gap:10px}
.apps-search{display:flex;align-items:center;gap:8px;height:42px;border:1px solid var(--border);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--muted);transition:border-color .15s,box-shadow .2s}
.apps-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(217,242,122,.55)}
.apps-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:14.5px;color:var(--ink)}
.apps-cats{display:flex;flex-wrap:wrap;gap:6px}
.apps-cats .chip{animation:none}
.apps-cats .chip:hover{transform:none;box-shadow:none}
.apps-scroll{flex:1;min-height:0;overflow-y:auto;margin:0 -24px -24px;padding:4px 24px 28px;display:flex;flex-direction:column;gap:22px}
.apps-sec{display:flex;flex-direction:column;gap:8px}
.apps-sec h3{margin:0;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted2)}
.apps-sec h3.app-sub{margin-top:6px;font-size:11px}
.apps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.app-tile{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);animation:row-in .35s var(--out) both}
.app-tile b{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:600}
.app-tile small{font-size:12.5px;line-height:1.4;color:var(--muted2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.app-tile.is-soon .app-logo{opacity:.6}
.app-tile.is-soon b{color:var(--muted2)}
.app-tile .btn{flex:none}
.app-on{width:14px;height:14px;color:var(--green)}
/* «Ver todas» / «Ver más» del catálogo: una fila con los logos de lo que hay detrás, no un botón suelto. */
.apps-more-row{display:flex;align-items:center;gap:14px;width:100%;margin-top:10px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface2);font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease)}
.apps-more-row:hover{border-color:var(--border2);background:var(--surface)}
.apps-more-row:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.apps-more-row b{display:block;font-size:14px;font-weight:600}
.apps-more-row small{display:block;font-size:12.5px;color:var(--muted2);line-height:1.4}
.apps-more-row>.ic{flex:none;color:var(--ink3);transition:transform .15s var(--ease)}
.apps-more-row:hover>.ic{transform:translateX(3px);color:var(--ink)}
.apps-more-logos{display:flex;flex:none}
.apps-more-logos .app-logo{box-shadow:0 0 0 2px var(--surface2),0 0 0 3px var(--line)}
.apps-more-logos .app-logo+.app-logo{margin-left:-6px}
/* «Ver las 87 →» junto al título de cada categoría en «Ver todas». */
.apps-cat-all{margin-left:auto;display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:2px 0;font:500 12.5px var(--font);letter-spacing:0;text-transform:none;color:var(--ink2);cursor:pointer}
.apps-cat-all .ic{width:13px;height:13px;transition:transform .15s var(--ease)}
.apps-cat-all:hover{color:var(--ink)}
.apps-cat-all:hover .ic{transform:translateX(2px)}
.apps-more-row:hover .apps-more-logos .app-logo{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line)}
.apps-asked-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.apps-asked-l li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--lime-line);border-radius:var(--r);background:var(--lime-tint);font-size:13.5px}
.apps-asked-l small{display:block;font-size:12.5px;color:var(--ink3);line-height:1.4}
/* Las personas de una app que piden varias, al decidir una a una. */
.apps-asked-l li.apps-asked-sub{margin-left:44px;background:transparent}
.apps-asked-l .btn{flex:none}
/* Detalle de una app */
.app-detail{gap:20px}
.app-desc{margin:0;font-size:14px;line-height:1.5;color:var(--ink3)}
.app-detail>.ok-t{margin:-12px 0 0}
.app-workers{display:flex;flex-direction:column;gap:6px}
.app-sw{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);cursor:pointer;transition:border-color .15s}
.app-sw:hover{border-color:var(--border)}
.app-sw b{display:block;font-size:14px;font-weight:500}
.app-sw small{display:block;font-size:12.5px;color:var(--muted2);line-height:1.4}
.app-sw.off{cursor:default}
.app-sw.off:hover{border-color:var(--line2)}
.app-sw.off .switch{opacity:.55;cursor:default}
.app-fine .ic,.cc-key .fine .ic{width:12px;height:12px;vertical-align:-2px}
.app-connect-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* Aprobar (paso 1) antes de conectar (paso 2): el paso 1, destacado; el 2, apagado hasta que toque. */
.apps-sec.app-approve{padding:14px 16px;border:1px solid var(--lime-line);border-radius:var(--r);background:var(--lime-tint)}
.apps-sec.app-approve .hint{color:var(--ink3)}
.apps-sec.is-locked>.hint,.apps-sec.is-locked .app-workers{opacity:.6}
.app-key{display:flex;flex-direction:column;gap:10px}
.app-tools{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.app-tools li{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 0;border-top:1px solid var(--line2)}
.app-tools li:first-child{border-top:0}
.app-tools li .grow{flex:1 1 220px}
.app-tools b{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500}
.app-tools b .pill{margin:0}
.app-tools small{font-size:12.5px;color:var(--muted2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.app-seg{flex:none}
.app-seg .seg-b{min-height:30px}
.app-eff{font-size:12.5px;color:var(--muted2);white-space:nowrap}
.app-tool-sure{flex:1 1 100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 12px;border:1px solid var(--amber-line);border-radius:var(--r-sm);background:var(--amber2);color:var(--amber-ink);font-size:13px;line-height:1.4;animation:reveal-down .25s var(--out)}
.app-tool-sure .btn{flex:none}
.app-danger{display:flex;padding-top:14px;border-top:1px solid var(--line2)}
/* Varias cuentas de una app (dos Gmail): cada una en su recuadro, con su nombre arriba. */
.app-account{display:flex;flex-direction:column;gap:8px}
.app-account.boxed{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface2)}
.app-account-h{display:flex;align-items:center;gap:8px;min-height:30px}
.app-account-h b{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.app-account-h small{display:block;font-size:12.5px;color:var(--muted2);overflow-wrap:anywhere}
.app-account-h input{min-width:0;height:32px;border:1px solid var(--border);border-radius:8px;padding:0 10px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink)}
.app-account-h input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(217,242,122,.55)}
.app-account-h .icon-btn{flex:none}
.app-account .app-danger{padding-top:10px}

/* Panel del worker › Apps */
.wp-apps{display:flex;flex-direction:column;gap:8px}
.wp-apps-l li{align-items:center}
button.wp-app{display:flex;align-items:center;gap:10px;width:calc(100% + 16px);min-height:40px;margin:0 -8px;padding:4px 8px;border:0;border-radius:10px;background:none;font-size:13.5px;color:var(--ink);text-align:left;transition:background .15s}
button.wp-app:hover{background:var(--soft)}
.wp-app small,.wp-app.asked small{display:block;font-size:11.5px}
button.wp-app small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-app .chev{color:var(--muted2)}
li.wp-app.asked{gap:10px;font-size:13.5px;color:var(--ink)}
.wp-apps-h{margin-top:4px;font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted2)}

/* Bienvenida de una plantilla: sus primeras tareas, bajo el mensaje */
.chips.in-msg{margin:10px 0 4px}

/* Petición «Conectar» */
.cc-apps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cc-apps li{padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);transition:background .3s,border-color .3s}
.cc-apps li.is-connected{background:var(--green-tint);border-color:var(--green-line)}
.cc-row{display:flex;align-items:center;gap:12px}
.cc-row b{display:block;font-size:14px;font-weight:600}
.cc-row small{display:block;font-size:12.5px;color:var(--ink3);line-height:1.4}
.cc-row .btn{flex:none}
.cc-open{flex:none;max-width:150px;text-align:right;line-height:1.35}
.cc-key{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.cc-key .card-reply{display:flex;gap:8px}
.cc-key .card-reply input{flex:1;min-width:0}
.cc-key.has-err .card-reply input,.cc-key.has-err .card-reply input:focus{border-color:var(--red)}
.cc-err{display:block;margin-top:6px}

/* Contratar: galería de puestos */
.hire-panel{overflow-y:auto}
/* Contratar: personas (rejilla y modal) */
.car-fig{width:100%;height:100%;object-fit:cover;object-position:50% 18%;pointer-events:none;display:block}
.car-foot{position:absolute;left:0;right:0;bottom:0;padding:56px 18px 16px;text-align:left;color:#fff;background:linear-gradient(to top,rgba(38,26,18,.62),rgba(38,26,18,0))}
.car-name{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.car-role{display:block;margin-top:3px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.88}
.car-apps{display:flex;gap:6px;margin-bottom:10px}
.car-app{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(0,0,0,.2)}
.car-kind{position:absolute;top:12px;left:12px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em;background:rgba(255,255,255,.9);color:#3b2e24}
.person-card.custom{background:var(--surface);border:2px dashed var(--border2);box-shadow:none;animation:none}
.person-card.custom:hover{border-color:var(--ink);box-shadow:var(--sh-2)}
.custom-in{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;text-align:center;color:var(--ink)}
.custom-in b{font-size:17px}
.custom-in small{font-size:12.5px;line-height:1.45;color:var(--muted)}
.custom-plus{width:56px;height:56px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--ink2);transition:transform .25s var(--spring)}
.person-card.custom:hover .custom-plus{transform:scale(1.08)}
.car-kind.hired{display:inline-flex;align-items:center;gap:4px;max-width:calc(100% - 24px);background:#2f9e5b;color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.car-kind.hired>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Ya contratado: en gris (vuelve a color al pasar por encima, por si quieres otro igual). */
.person-card.is-hired{background:#8d8a87}
.person-card.is-hired .car-fig{filter:grayscale(1) brightness(.8) contrast(.8);opacity:.45;transition:filter .3s,opacity .3s,transform .4s var(--out)}
.person-card.is-hired:hover .car-fig{filter:grayscale(.4) brightness(.95);opacity:.85}
.person-card.is-hired .car-apps{filter:grayscale(1);opacity:.5}
.person-card.is-hired .car-name,.person-card.is-hired .car-role{opacity:.75}
.person-card.sk{cursor:default;animation:none;background:var(--soft)}
.hire-extra{margin-top:2px}
.sheet.wide.hire-sheet{width:760px;max-width:100%}
.hs-info .privacy-note{align-self:stretch}
.repeat-notice .rn{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 8px 0}
.repeat-notice .rn h2{margin:6px 0 0;font-size:20px;font-weight:600;letter-spacing:-.015em}
.repeat-notice .rn .link-btn{font-size:13.5px}
.assistant-notice .an-text{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.assistant-notice .an-more{align-self:flex-start;font-size:13.5px}
.assistant-vs .avw{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.avw-col{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;background:var(--soft);border:1px solid var(--line)}
.avw-col.assistant{background:var(--lime-tint);border-color:var(--lime-line)}
.avw-col b{font-size:15px;font-weight:600}
.avw-col small{color:var(--muted);font-size:12.5px}
.avw-col ul{margin:10px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.45;color:var(--ink2)}
@media (max-width:640px){.assistant-vs .avw{grid-template-columns:1fr}}
.repeat-notice .rn p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.hs{display:flex;gap:20px;align-items:stretch}
/* Un worker cuya cara se está haciendo: un hueco cálido que respira (nunca la cara de otro mientras tanto). */
.av-coming{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(135deg,#e2d5c6,#cdbcaa);animation:av-coming 1.8s ease-in-out infinite}
@keyframes av-coming{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.av-coming{animation:none;opacity:.8}}
/* Contratar a otra persona para un puesto: la figura del perfil, atenuada, con «Otra persona» encima. */
.hs-fig.other img{filter:grayscale(.7) blur(2px);opacity:.55}
.hs-other{position:absolute;inset:auto 10px 12px;padding:10px 12px;border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:var(--sh-2, 0 2px 8px rgba(0,0,0,.12));font-size:12.5px;line-height:1.4}
.hs-other b{display:block;font-size:13.5px}
.hs-fig .car-kind{top:10px;left:10px;font-size:10.5px}
.hs-fig{position:relative;flex:none;width:200px;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:#d6c6b5}
.hs-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.hs-info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
.hs-info h2{margin:0;font-size:21px;font-weight:600;letter-spacing:-.015em}
.hs-sum{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
.hs-apps{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hs-apps .car-app{box-shadow:0 0 0 1px var(--line)}
/* Sobre fondo claro el círculo blanco no aporta: el logo solo, algo más grande. En oscuro, con su círculo. */
:root:not([data-theme=dark]) .hs-apps .car-app:not(.more){background:none;box-shadow:none}
:root:not([data-theme=dark]) .hs-apps .car-app:not(.more) .app-logo{--s:24px !important}
.hs-note.info .link-btn{color:inherit;font-size:inherit;padding:0}
.hs-apps .car-app.more{background:none;box-shadow:none;border:1px dashed var(--border2);color:var(--muted);cursor:default}
/* El nombre, abajo del todo (a ras de la figura), aparte de lo informativo. */
.hs-info .field{width:100%;margin-top:auto;padding-top:14px}
/* Los logos ya llevan su fondo: dentro de una pastilla o un círculo, sin otro borde más. */
.car-app .app-logo{box-shadow:none}
/* En el móvil, a dos columnas: su puesto, qué hace y sus apps a la izquierda, su figura a la derecha
   (con el tipo abajo, que tapa menos); lo demás, debajo a lo ancho. */
@media (max-width:640px){
  .hs{display:grid;grid-template-columns:1fr 124px;grid-auto-flow:row dense;column-gap:14px;row-gap:10px}
  .hs-info{display:contents}
  .hs-fig{grid-column:2;grid-row:1/span 3;width:124px}
  .hs-fig .car-kind{top:auto;bottom:6px;left:6px;padding:2px 7px;font-size:9.5px}
  .hs-info h2{grid-column:1;align-self:end}
  .hs-sum,.hs-apps{grid-column:1;align-self:start}
  .hs-info>*:not(h2):not(.hs-sum):not(.hs-apps){grid-column:1/-1}
  .hs-info .field{margin-top:8px;padding-top:0}
  /* Tres apps y el «+», para que no quede apretado. */
  .hs-apps .car-app:not(.more):nth-of-type(n+4){display:none}
  /* El nombre y, debajo, lo que será (como en el escritorio). */
  .hs-info .field,.hs-info .err{order:2}
  .hs-info .hs-note{order:3}
}
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.person-card{position:relative;aspect-ratio:2/3;border:0;padding:0;border-radius:18px;overflow:hidden;background:#d6c6b5;box-shadow:var(--sh-1);cursor:pointer;text-align:left;font:inherit;transition:transform .25s var(--spring),box-shadow .25s;animation:chip-in .4s var(--spring) both}
.person-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,14,8,.22)}
.person-card:hover .car-fig{transform:scale(1.03)}
.person-card .car-fig{transition:transform .4s var(--out)}
.person-card .car-foot{padding:44px 14px 12px}
.person-card .car-name{font-size:16px}
.person-card .car-role{font-size:10.5px}
.person-card .car-app{width:26px;height:26px}
.person-card .car-apps{margin-bottom:8px;gap:5px}
.person-card .car-kind{top:10px;left:10px;font-size:10.5px}
@media (max-width:640px){.people-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
.hire-panel>.hire{margin:auto}
.hire-back{align-self:flex-start;min-height:32px;border:0;background:none;padding:0;font-size:13.5px}
.hire-gal-in{max-width:1080px;margin:0 auto;padding:40px 34px 56px;display:flex;flex-direction:column;gap:20px}
.hire-gal-h h1{margin:0;font-size:30px;font-weight:600;letter-spacing:-.025em}
.hire-gal-h .lead{margin:6px 0 0;max-width:620px;font-size:15px;line-height:1.5;color:var(--muted)}
.hire-scratch{font-size:15px;color:var(--ink2);min-height:32px}
.app-logo.is-soon{opacity:.45}
.hire-filters{display:flex;align-items:center;gap:10px}
/* Buscador y departamentos en una sola fila: los que no caben, con scroll de lado. */
.hire-filters .apps-search{flex:0 0 240px}
.hire-filters .apps-cats{flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.hire-filters .apps-cats::-webkit-scrollbar{display:none}
.hire-filters .apps-cats .chip{flex:none}
.tpl-sec{display:flex;flex-direction:column;gap:10px}
.tpl-sec h2{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted2)}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.tpl-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;min-height:136px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1);text-align:left;color:var(--ink);transition:border-color .15s,box-shadow .2s,transform .2s var(--spring);animation:chip-in .4s var(--spring) both}
.tpl-card:hover{border-color:var(--border2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.tpl-card.sk{cursor:default;animation:none}
.tpl-card.sk:hover{transform:none;box-shadow:var(--sh-1);border-color:var(--line)}
.tpl-card b{font-size:15px;font-weight:600;line-height:1.3}
.tpl-dep{font-size:11.5px;font-weight:500;color:var(--muted2)}
.tpl-sum{font-size:13px;line-height:1.45;color:var(--ink3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpl-apps{display:flex;align-items:center;gap:4px;margin-top:auto;padding-top:4px}
.tpl-apps small{font-size:11.5px;color:var(--muted2);margin-left:2px}
/* Contratar: lo que trae el puesto */
.tpl-brings{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface2);text-align:left}
.tpl-brings p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.tpl-brings dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0;font-size:13px;line-height:1.45}
.tpl-brings dt{color:var(--muted2)}
.tpl-brings dd{margin:0;color:var(--ink2)}
.tpl-brings-apps{display:flex;flex-direction:column;gap:6px}
.tpl-app{display:flex;align-items:center;gap:8px;min-width:0}
.tpl-app b{font-weight:500}
.tpl-app small{margin-left:auto;font-size:12px;color:var(--muted2);white-space:nowrap}
.tpl-app.is-soon b{color:var(--muted2)}

@media (max-width:820px){
  .hire-gal-in{padding:22px 16px 40px;gap:16px}
  .hire-gal-h h1{font-size:25px}
  .tpl-grid{grid-template-columns:minmax(0,1fr)}
  .tpl-card{min-height:0}
  .hire-filters{flex-direction:column;align-items:stretch}
  .hire-filters .apps-search{flex:none}
  .hire-filters .apps-cats{flex:none;margin:0 -16px;padding:0 16px 2px}
  .hire-filters .apps-cats .chip{flex:none;min-height:40px}
}
@media (max-width:640px){
  .scrim:has(>.apps-sheet){padding:0;align-items:stretch}
  .sheet.apps-sheet{width:100%;height:100%;max-height:none;border-radius:0;padding:16px 16px 0}
  .apps-scroll{margin:0 -16px;padding:4px 16px calc(24px + env(safe-area-inset-bottom))}
  .apps-grid{grid-template-columns:minmax(0,1fr)}
  .apps-tools .apps-cats{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none}
  .apps-tools .apps-cats .chip{flex:none;min-height:40px}
  .app-tile .btn,.apps-asked-l .btn,.app-detail .btn,li.wp-app .btn{min-height:40px}
  .cc-row .btn,.cc-key .btn,.connect .card-actions .link-btn,.req-body .chip,.chips.in-msg .chip{min-height:44px}
  .cc-key .card-reply input{height:44px}
  .app-tools .app-seg{width:100%}
  .app-seg .seg-b{flex:1;min-height:40px}
  .apps-asked-l li{flex-wrap:wrap}
  .apps-asked-l li .grow{flex:1 1 160px}
  .apps-asked-l li .btn{margin-left:auto}
  .cc-open{max-width:110px}
  .tpl-brings dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .tpl-brings dd{margin-bottom:6px}
}
/* Modelos: el modelo de cada parte y de dónde sale; Calidad: tres cifras principales y el resto debajo. */
.model-now{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;min-width:0;max-width:50%}
.model-now .small{overflow-wrap:anywhere}
.model-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stats-main{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats-main .stat b{font-size:28px}
.stats-main .stat .hint{margin-top:2px}
.stats-more{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding-top:12px;border-top:1px solid var(--line2)}
.stats-more .stat b{font-size:15px;font-weight:600}
/* Llamadas: siete cifras secundarias, en 4 + 3 en vez de 5 + 2. */
.stats-more.stats-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.field.has-err .hashin,.field.has-err .hashin:focus-within{border-color:var(--red);box-shadow:0 0 0 4px var(--red2)}
.space-row{flex-wrap:wrap}
.space-row>.grow{min-width:min(220px,100%)}
.space-members .tr{flex-wrap:wrap}
.space-members .tr>.grow{min-width:min(160px,100%)}
.space-members{min-width:0;display:flex;flex-direction:column;gap:10px;flex-basis:100%;padding-top:4px}
.space-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.space-add .role-select{height:36px}
@media (max-width:640px){
  .tr-models{align-items:flex-start}
  .model-now{align-items:flex-start;text-align:left;max-width:none;flex-basis:100%}
  .stats-main{grid-template-columns:minmax(0,1fr)}
  .stats-more{grid-template-columns:repeat(2,minmax(0,1fr))}
  .space-add .role-select,.space-add .btn{min-height:44px;flex:1 1 100%}
  .space-members .tr .role-select{flex:1;min-height:44px}
  .space-members .tr .btn{min-height:44px}
}

/* Ajustes › Avisos: en el móvil, el estado arriba y los botones debajo (sin desbordar a 375 px). */
@media (max-width:560px){.tr.tg-row{flex-wrap:wrap}.tr.tg-row>.grow{flex-basis:100%;min-width:0}.tr.tg-row .role-select{flex:1 1 140px;min-width:0;height:40px}.tr.tg-row .btn{min-height:40px}}
/* «Manejarlo yo»: pellizcar o «+»/«−» para ampliar (la imagen crece dentro de su recuadro, que se desplaza), y el aviso
   de cierre por no usarlo. */
.pc-drive{position:relative}
.pc-pinch{touch-action:pan-x pan-y}
.pc-drive.zoomed .pc-pinch{overflow:auto;max-height:calc(100dvh - 300px);border-radius:10px;-webkit-overflow-scrolling:touch}
.pc-drive.zoomed .pc-screen{width:100%;max-width:none}
.pc-zoom-ctl{position:absolute;top:8px;right:8px;display:flex;gap:4px;padding:3px;border-radius:10px;background:var(--glass);box-shadow:var(--sh-2)}
.pc-zoom-ctl .icon-btn{width:32px;height:32px;font-size:18px;line-height:1}
.pc-zoom-ctl .icon-btn:disabled{opacity:.4}
@media (max-width:640px){.pc-zoom-ctl .icon-btn{width:44px;height:44px}.card-actions.co-after .btn{min-height:44px}.pc-idle .btn{min-height:44px}.pc-drive.zoomed .pc-pinch{max-height:60dvh}}
.pc-idle{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;display:flex;align-items:center;gap:10px;padding:8px 10px;box-shadow:var(--sh-2);border-radius:var(--r-sm);background:var(--amber2);border:1px solid var(--amber-line);color:var(--amber-ink);font-size:13.5px}
/* Peticiones: el error de responder va junto a sus botones; lo que falta por conectar, dicho. */
.card-err{margin-top:-2px}
.cc-left{margin:0;font-size:13px;line-height:1.45;color:var(--amber-ink);background:var(--amber2);border:1px solid var(--amber-line);border-radius:var(--r-sm);padding:7px 10px}
/* Avisos en el móvil: arriba, a lo ancho y compactos (abajo tapaban el escritor y los botones); se quitan tocándolos. */
@media (max-width:640px){
  .toasts{top:calc(env(safe-area-inset-top,0px) + 8px);bottom:auto;left:12px;right:12px;transform:none;align-items:stretch}
  .toast{font-size:13px;padding:8px 12px;animation-name:toast-in-top}
  .toast.leaving{animation-name:toast-out-top}
}
@keyframes toast-in-top{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toast-out-top{to{opacity:0;transform:translateY(-8px) scale(.97)}}
/* Objetivos: los resultados clave propuestos, dentro del aviso y antes de «Pedir cambios / Aprobar» (en el móvil la lista
   de abajo queda fuera de la vista; en escritorio se ve al lado y no se repite). */
/* Contratar: el botón, pegado abajo del panel (que se desplaza) para que nunca quede fuera de la vista. */
.hire-foot{position:sticky;bottom:0;z-index:2;display:flex;flex-direction:column;gap:8px;margin:0 -12px;padding:12px 12px calc(4px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,transparent,var(--surface) 14px)}
.hire-foot .btn.big{margin-top:0;width:100%}
/* /r/: la respuesta espera unos segundos con «Deshacer» antes de salir. */
.req-held{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);background:var(--ink);color:var(--on-ink);font-size:13.5px;animation:view-in .3s var(--out)}
.req-held .btn{background:color-mix(in srgb,var(--on-ink) 14%,transparent);color:inherit;border-color:transparent;min-height:36px}

/* ---------- Listas (listas de trabajo compartidas) ---------- */
.wl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.wl-card{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-1);color:var(--ink);text-decoration:none;transition:transform .2s var(--spring),box-shadow .2s}
.wl-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.wl-card-h{display:flex;align-items:center;gap:6px;min-width:0}
.wl-card-h b{flex:1;font-size:15px;font-weight:600}
.wl-card-f{display:flex;justify-content:space-between;gap:8px;font-size:13px;flex-wrap:wrap}
.wl-bar{display:flex;height:8px;border-radius:999px;background:var(--soft2);overflow:hidden}
.wl-bar i{display:block;height:100%;transition:width .5s var(--out)}
.wl-bar .b-done{background:var(--green)} .wl-bar .b-closed{background:var(--border3)} .wl-bar .b-active{background:var(--blue-tint2)}
.wl-page h1 .pill{vertical-align:middle;margin-left:10px}
.wl-totals{display:flex;flex-wrap:wrap;gap:0 6px}
.wl-totals b{color:var(--ink);font-weight:600}
.wl-acts{display:flex;gap:8px;flex-wrap:wrap}
.wl-st{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;background:var(--soft2);color:var(--ink3)}
.wl-st.t-active{background:var(--blue-tint);color:var(--blue-ink)}
.wl-st.t-done{background:var(--green2);color:var(--green-ink)}
.wl-st.t-failed{background:var(--soft);color:var(--muted)}
.wl-st.t-needs_human{background:var(--amber2);color:var(--amber-ink)}
.wl-st.t-discarded{background:var(--soft);color:var(--muted)}
.wl-pills{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0}
.wl-links{display:flex;flex-wrap:wrap;gap:8px}
.wl-who,.wl-link{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:4px 12px 4px 6px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font:500 13px var(--font);color:var(--ink);text-decoration:none;max-width:100%;min-width:0}
.wl-link{padding-left:10px}
.wl-who small,.wl-link small{font-weight:400;white-space:nowrap}
.wl-who:hover,.wl-link:hover{border-color:var(--ink)}
.wl-who.on{border-color:var(--ink);background:var(--soft)}
.wl-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wl-filters select{height:38px;border:1px solid var(--border);border-radius:10px;padding:0 10px;font:14px var(--font);color:var(--ink);background:var(--surface);max-width:100%}
.wl-search{flex:1 1 240px;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted)}
.wl-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px var(--lime2)}
.wl-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:14px var(--font);color:var(--ink)}
.wl-table{display:flex;flex-direction:column;border-radius:14px;background:var(--surface);box-shadow:var(--sh-1);overflow:hidden}
.wl-tr{display:grid;grid-template-columns:minmax(180px,1.4fr) 150px minmax(150px,1fr) minmax(160px,1.2fr) minmax(120px,1fr);gap:12px;align-items:center;padding:10px 16px;border:0;border-top:1px solid var(--line2);background:var(--surface);text-align:left;font:14px var(--font);color:var(--ink);width:100%}
.wl-tr:first-child{border-top:0}
.wl-table.no-res .wl-tr{grid-template-columns:minmax(180px,1.4fr) 150px minmax(150px,1fr) minmax(160px,1.4fr)}
.wl-hint-w{margin:0;padding:10px 14px;border-radius:12px;background:var(--amber2);color:var(--amber-ink);font-size:13.5px;line-height:1.5}
button.wl-tr{cursor:pointer;transition:background .15s}
button.wl-tr:hover,button.wl-tr.on{background:var(--subtle)}
.wl-th{font-size:12px;font-weight:500;color:var(--muted);padding-top:9px;padding-bottom:9px;background:var(--soft)}
.wl-tr>span{min-width:0}
.wl-c-title{display:flex;flex-direction:column}
.wl-c-title b{font-weight:500}
.wl-c-title small,.wl-c-who small,.wl-c-step small{font-size:12px}
.wl-c-who{display:flex;align-items:center;gap:7px}
.wl-c-step .ell,.wl-c-who .ell{display:block}
.wl-att{display:block;font-size:11.5px;margin-top:2px}
.wl-more{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wl-none{display:flex;align-items:center;gap:12px;padding:20px;border-radius:14px;background:var(--surface);box-shadow:var(--sh-1);flex-wrap:wrap}
.wl-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.wl-tpl{display:flex;flex-direction:column;gap:3px;text-align:left;padding:11px 13px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font:13px var(--font);transition:border-color .15s}
.wl-tpl b{font-weight:600;font-size:14px}
.wl-tpl small{color:var(--muted);line-height:1.4}
.wl-tpl:hover{border-color:var(--border3)} .wl-tpl.on{border-color:var(--ink);background:var(--lime-tint)}
.wl-preview{display:grid;gap:10px;padding:12px 14px;border-radius:12px;background:var(--subtle);font-size:13px}
.wl-preview p{margin:2px 0 0;color:var(--ink2);line-height:1.45}
.wl-preview .wl-preview-d{display:none;margin:0;font-weight:500;color:var(--ink)}
@media (max-width:560px){.wl-tpls{grid-template-columns:repeat(2,minmax(0,1fr))}.wl-tpl small{display:none}.wl-tpl{min-height:48px;justify-content:center}.wl-preview .wl-preview-d{display:block}}
.wl-rules summary{cursor:pointer;font-size:13.5px;font-weight:500;color:var(--ink3);padding:4px 0}
.wl-rules-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.wl-csv{font-size:12.5px;white-space:pre}
.wl-file{display:flex;align-items:center;gap:10px;font-size:13px;min-width:0}
.wl-imported{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:12px;background:var(--green-tint);border:1px solid var(--green-line)}
.wl-imported ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink2);line-height:1.6}
.wl-drawer .drawer-h .grow{min-width:0;display:flex;flex-direction:column}
.wl-sec{display:flex;flex-direction:column;gap:6px;padding:6px 4px 12px;border-bottom:1px solid var(--line2)}
.wl-sec:last-child{border-bottom:0}
.wl-sec h3{margin:6px 0 2px;font-size:12.5px;font-weight:600;color:var(--muted);text-transform:none}
.wl-kv{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;font-size:13.5px;align-items:center}
.wl-kv>span:first-child{color:var(--muted)}
.wl-kv>span:last-child{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.wl-v{overflow-wrap:anywhere}
.wl-hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.wl-hist li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px}
.wl-hist li div{display:flex;flex-direction:column;min-width:0}
.wl-hist small{font-size:12px}
.wl-hdot{width:18px;height:18px;border-radius:50%;background:var(--soft2);flex:none}
.wl-move{display:flex;gap:8px}
.wl-move select{flex:1;min-width:0;height:34px;border:1px solid var(--border);border-radius:9px;padding:0 9px;font:13.5px var(--font);color:var(--ink);background:var(--surface)}
.wl-row-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
@media (max-width:820px){
  .wl-th{display:none}
  .wl-tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t s" "w w" "p p";gap:4px 10px;padding:12px 14px}
  .wl-tr>.wl-c-title{grid-area:t} .wl-tr>span:nth-child(2){grid-area:s;justify-self:end;text-align:right}
  .wl-tr>.wl-c-who{grid-area:w} .wl-tr>.wl-c-step{grid-area:p}
  .wl-tr>.wl-c-who:has(>.muted:only-child),.wl-tr>.wl-c-step:has(>.muted:only-child){display:none}
  .wl-c-res{display:none}
  .wl-table.no-res .wl-tr{grid-template-columns:minmax(0,1fr) auto}
  .wl-acts{width:100%} .wl-acts .btn{flex:1;min-height:44px}
  .wl-filters select{flex:1 1 45%;min-height:44px}
  .wl-search{flex-basis:100%;min-height:44px}
  .wl-rules-g{grid-template-columns:1fr}
  .wl-kv{grid-template-columns:110px minmax(0,1fr)}
  .wl-who small{display:none}
  .wl-row-acts .btn,.wl-move .btn{min-height:44px} .wl-move select{min-height:44px}
}
/* Listas › «Desde una app» (SyncFromApp.jsx): configurar la sincronización y ver su estado. */
.ls{display:flex;flex-direction:column;gap:14px;min-width:0}
.ls-lead{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.ls-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ls-head .hint{margin-top:2px}
.ls-sec{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--line2)}
.ls-sec h3{margin:0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
.ls-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;background:var(--soft2);color:var(--ink3);font-size:12px;font-weight:600}
.ls-apps{display:flex;flex-wrap:wrap;gap:8px}
.ls-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ls-more summary{cursor:pointer;font-size:13px;color:var(--muted);padding:4px 0}
.ls-more[open] summary{margin-bottom:10px}
.ls-check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);cursor:pointer;min-height:36px}
.ls-check input,.ls-chip input{width:16px;height:16px;accent-color:var(--ink)}
.ls-states{display:flex;flex-wrap:wrap;gap:8px}
.ls-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1.5px solid var(--border);border-radius:10px;font-size:13.5px;color:var(--ink);background:var(--surface);cursor:pointer}
.ls-chip.on{border-color:var(--ink);background:var(--lime-tint)}
.ls-sample{display:flex;flex-direction:column;gap:8px}
.ls-table{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.ls-table table{border-collapse:collapse;width:100%;font-size:12.5px}
.ls-table th,.ls-table td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--line2);white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.ls-table th{font-weight:500;color:var(--muted);background:var(--subtle);font-family:var(--mono);font-size:11.5px}
.ls-table tr:last-child td{border-bottom:0}
.ls-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.ls-stats div{background:var(--subtle);border:1px solid var(--line2);border-radius:var(--r-sm);padding:8px 10px}
.ls-stats dt{font-size:12px;color:var(--muted2)}
.ls-stats dd{margin:2px 0 0;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.ls-box{display:flex;flex-direction:column;gap:8px;border:1px solid var(--amber-line);background:var(--amber2);color:var(--amber-ink);border-radius:var(--r);padding:10px 12px;font-size:13.5px}
.ls-box p{margin:0}
.ls-box.bad{border-color:var(--red-line);background:var(--red2);color:var(--ink)}
.ls-foot .ls-box{border-color:var(--line);background:var(--subtle);color:var(--ink)}
.ls-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ls-rows li{display:flex;align-items:center;flex-wrap:wrap;gap:6px;color:var(--ink)}
.ls-why{flex-basis:100%}
.ls-copy{display:flex;gap:8px}
.ls-copy input{flex:1;min-width:0;height:34px;border:1px solid var(--border);border-radius:8px;padding:0 10px;font:12.5px var(--mono);background:var(--subtle);color:var(--ink)}
.ls-foot{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px;border-top:1px solid var(--line2)}
.ls-foot>.btn.ghost:first-child{margin-left:-11px}
.ls-cap{margin:0 0 6px;font-size:12px;color:var(--muted2)}
.ls-confirm{display:flex;flex-direction:column;gap:6px;border-top:1px solid currentColor;border-top-color:color-mix(in srgb,currentColor 25%,transparent);padding-top:8px}
.ls-confirm p{margin:0}
.ls-foot .ls-box{flex:1}
.ls-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;padding-top:16px;border-top:1px solid var(--line2)}
.ls-actions .ferr,.ls-why-not{flex-basis:100%;text-align:right;margin:0}
@media (max-width:600px){
  .ls-map{grid-template-columns:1fr}
  .ls-actions .btn{flex:1}
  .ls-head .btn{width:100%}
}
/* ───────── Equipos de workers (0071): el árbol de la barra lateral, la sección «Equipo» y sus tarjetas ───────── */
.team-row{position:relative}
.team-row>.nav,.team-row>.nav-tipw>.nav{padding-right:40px}
.team-tog{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:7px;color:var(--muted);transition:background .15s,color .15s}
.team-tog:hover{background:var(--hover);color:var(--ink)}
/* Tu asistente: un micro justo a la derecha de su nombre, solo al pasar por su fila (lo sin leer sigue a la derecha del
   todo). Graba ahí mismo y la grabación ocupa su fila (chat/QuickVoice.jsx). Sin ratón (una tableta), se ve siempre. */
.asg-row{position:relative}
.asg-mic-spot{flex:none;width:24px}
.asg-mic{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:6px;color:var(--ink3);opacity:0;pointer-events:none;transition:opacity .12s,background .15s,color .15s}
.asg-mic .ic{width:15px;height:15px}
.asg-row:hover .asg-mic,.asg-mic:focus-visible{opacity:1;pointer-events:auto}
.asg-mic:hover,.asg-mic:focus-visible{background:var(--hover);color:var(--ink)}
@media (hover:none){.asg-mic{opacity:1;pointer-events:auto}}
.qv-bar{display:flex;align-items:center;gap:6px;min-width:0}
.qv-bar .rec-bar{flex:1;min-width:0;gap:4px}
.qv-bar .rec-time{min-width:44px}
.qv-under>.nav,.qv-under>.nav-tipw,.qv-under>.team-tog{visibility:hidden}
.qv-side{position:absolute;inset:0;padding:0 2px 0 10px;border-radius:9px;background:var(--sel)}
.qv-side .rec-bar{min-height:0}
.qv-side .icon-btn,.qv-side .send{width:28px;height:28px}
/* Ya enviada, la barra no se va: dice qué pasa con ella (enviándose, enviada, sin conexión o no se pudo) y se quita sola. */
.qv-status{gap:6px;font-size:13px;color:var(--ink2)}
.qv-st-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--muted)}
.qv-st-ic .spinner{width:13px;height:13px}
.qv-st-ic .ic{width:15px;height:15px}
.qv-st-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qv-status.sending .qv-st-text{color:var(--muted)}
.qv-status.sent .qv-st-ic{color:var(--green)}
.qv-status.failed .qv-st-ic,.qv-status.failed .qv-st-text{color:var(--red)}
.qv-status .btn.sm{flex:none;gap:5px;height:28px;padding:0 9px}
.qv-status .btn.sm .ic{width:13px;height:13px}
.qv-side .qv-status .btn.sm span{display:none}
/* Si su fila no se ve (barra plegada, ajustes encima), la grabación flota abajo a la izquierda, sin tapar la barra plegada. */
.qv-float{position:fixed;left:84px;bottom:16px;z-index:74;width:min(380px,calc(100vw - 32px));padding:8px 8px 8px 12px;border-radius:16px;background:var(--surface);box-shadow:var(--sh-2),var(--sh-1);animation:toast-in .25s var(--spring)}
.team-tog .ic{transition:transform .2s var(--out)}
.team-tog.open .ic{transform:rotate(90deg)}
.team-subs .team-sub{border-radius:7px;color:var(--ink3);text-decoration:none;min-height:30px}
.team-subs .team-sub:hover{background:var(--hover);color:var(--ink)}
.team-subs .team-sub.on{background:var(--sel);color:var(--ink)}
.team-subs .team-sub.unread{font-weight:600;color:var(--ink)}
@media (max-width:820px){.team-row>.nav{padding-right:50px}.team-tog{width:40px;height:40px;right:4px}.team-subs .team-sub{min-height:40px}}
/* «Contratar a…»: lo que propone un worker, editable antes de guardarlo. */
.hire-fields{display:grid;gap:10px;margin-top:12px}
.hire-fields textarea{width:100%;resize:vertical;min-height:84px}
.hire-face-btn{padding:0;border:0;background:transparent;border-radius:14px;cursor:pointer;position:relative}
.hire-face-btn:focus-visible{box-shadow:0 0 0 3px var(--ink)}
.hire-faces{justify-content:flex-start;margin-top:10px}
.hire-why{margin:10px 0 0;font-size:13.5px;line-height:1.45}
.hire-note{margin:8px 0 0;font-size:12.5px}
.hire-errand{margin-top:10px;font-size:13.5px}
.hire-errand summary{cursor:pointer;color:var(--ink3)}
.hire-errand p{margin:6px 0 0;color:var(--ink2);line-height:1.45;white-space:pre-wrap}
.team-sum{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:10px 0 0;font-size:13.5px;align-items:baseline}
.team-sum dt{color:var(--muted2);font-size:12.5px}
.team-sum dd{margin:0;color:var(--ink2);line-height:1.45;min-width:0;overflow-wrap:anywhere}
.team-step{display:inline-flex;align-items:center;gap:8px}
.team-step b{min-width:1.6em;text-align:center;font-size:15px;line-height:24px;font-variant-numeric:tabular-nums}
.team-step .muted{margin-left:4px;font-size:12.5px}
.team-names{border:0;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.team-names legend{font-size:12.5px;color:var(--ink3);padding:0;margin-bottom:6px}
.team-names input{height:34px;border:1px solid var(--border);border-radius:var(--r-sm);padding:0 10px;font:inherit;font-size:13.5px;background:var(--surface);color:var(--ink);min-width:0}
.team-names input:focus{outline:2px solid var(--teal);outline-offset:1px}
.team-notice{margin:12px 0 0;padding:9px 12px;border-radius:var(--r-sm);background:var(--amber2);border:1px solid var(--amber-line);color:var(--amber-ink);font-size:12.5px;line-height:1.5}
.acc-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.acc-st.missing,.acc-st.code{color:var(--amber-ink)!important}
@media (max-width:640px){
  .team-sum{grid-template-columns:1fr;gap:2px}
  .team-sum dd{margin-bottom:6px}
  .team-step .icon-btn,.team-names input,.acc-acts .btn,.acc-acts .link-btn{min-height:44px;min-width:44px}
  .team-acc .cc-row{flex-wrap:wrap}
  .acc-acts{width:100%;justify-content:flex-start}
}
.team-sec{display:flex;flex-direction:column;gap:10px}
.team-sec-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.team-sec-h .muted{margin-left:auto}
.team-members li{display:flex;align-items:center;gap:6px}
.team-m{display:flex;align-items:center;gap:10px;color:var(--ink2);text-decoration:none;padding:4px 6px;border-radius:8px;min-width:0}
.team-m:hover{background:var(--hover)}
.team-m b{display:block;font-size:13.5px;font-weight:600}
.team-m small{display:block}
.team-acts{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:640px){.team-acts .btn,.team-members .icon-btn{min-height:44px;min-width:44px}.team-m{min-height:44px}}
.hit.hit-sub{padding-left:34px}
.teams-block h3{margin:0 0 6px}
.team-tr{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;border-radius:10px;padding:8px}
.team-tr:hover{background:var(--hover)}
.team-tr .grow b{display:block}
.team-st{font-size:11px;color:var(--muted2);white-space:nowrap}
.team-st.nosession{color:var(--amber-ink)}
.team-names-w{margin:12px 0 0}
.team-names-w summary{font-size:12.5px;color:var(--ink3);cursor:pointer;min-height:32px;display:flex;align-items:center;gap:6px}
.team-card .card-actions{position:sticky;bottom:0;background:var(--surface);padding-top:10px;padding-bottom:4px;z-index:1}
.btn-sub{font-weight:400;opacity:.85}
.acc-st{white-space:nowrap}
.team-acc .cc-row{flex-wrap:wrap}
.team-acc .acc-acts{width:100%;justify-content:flex-start;padding-left:48px}
.team-notice-d summary{font-size:12.5px;color:var(--muted);cursor:pointer;min-height:32px;display:flex;align-items:center}
.acc-go{font-size:inherit;color:var(--amber-ink);text-decoration:underline;text-underline-offset:2px}
.team-hint{margin:8px 0 0}
@media (max-width:640px){.team-names{grid-template-columns:1fr}.team-acc .acc-acts{padding-left:0}.team-names-w summary,.team-notice-d summary{min-height:44px}}
/* Las listas de un worker, en su panel (sin entrada en el menú). */
.wp-lists{display:grid;gap:10px;justify-items:start}
.wp-lists .wp-list{width:100%}
.wp-li{display:flex;align-items:flex-start;gap:8px}
.wp-li-a{display:grid;gap:5px;min-width:0;color:var(--ink);text-decoration:none;padding:6px 0}
.wp-li-a:hover b{text-decoration:underline;text-underline-offset:2px}
.wp-li-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.wp-li .link-btn{margin-top:6px;min-height:32px}
.wl-give{display:grid;gap:6px;max-height:320px;overflow:auto}
.wl-give-o{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;min-height:44px}
.wl-give-o small{display:block}
.wl-give-o.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.wl-give-new{margin-top:12px;display:inline-flex;align-items:center;gap:6px;min-height:36px}
.wl-crew{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;padding:0;list-style:none;font-size:13px}
.wl-crew li{display:flex;align-items:center;gap:6px;min-width:0}
.wl-crew small{color:var(--muted)}
.wl-crew-w{margin:12px 0 0}
.wl-crew-n{font-weight:500;color:var(--ink2)}

/* Conectar apps: «Ver las N de …» bajo cada categoría y la nota de Composio en el detalle */

/* ---- Videollamadas (src/call): la ventana (pequeña en una esquina o en grande), el aviso de «te llaman», «Unirse». */
.call{position:fixed;z-index:55;display:flex;flex-direction:column;background:#111311;color:#fff;box-shadow:var(--sh-3);overflow:hidden;animation:pop .3s var(--out)}
.call.mini{right:20px;bottom:96px;width:360px;border-radius:var(--r-xl)}
.call.big{inset:16px;border-radius:var(--r-xl)}
.call-h{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 14px}
.call.framed{right:auto;bottom:auto}
.call.mini.framed .call-grid{height:auto;flex:1}
.call.framed .call-h{cursor:grab;user-select:none;touch-action:none;padding-left:22px}
.call-icon.call-move{width:26px;height:26px;color:rgba(255,255,255,.55);cursor:grab}
.call-icon.call-move:hover{transform:none;color:#fff}
.call-size{position:absolute;left:0;top:0;z-index:2;width:20px;height:20px;border:0;border-radius:var(--r-xl) 0 6px 0;background:transparent;color:rgba(255,255,255,.4);cursor:nwse-resize;touch-action:none;display:flex;align-items:flex-start;justify-content:flex-start;padding:4px}
.call-size:hover,.call-size:focus-visible{color:#fff;background:rgba(255,255,255,.1)}
body.call-moving,body.call-moving *{cursor:grabbing!important;user-select:none}
body.call-sizing,body.call-sizing *{cursor:nwse-resize!important;user-select:none}
.call-title{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;background:none;border:0;padding:0;color:inherit;text-align:left;font:inherit;cursor:pointer}
.call-title b{font-size:14px;font-weight:600}
.call-st{font:500 12.5px var(--mono);color:rgba(255,255,255,.65);white-space:nowrap}
.call-grid{flex:1;min-height:0;display:grid;gap:6px;padding:0 8px;position:relative}
.call.mini .call-grid{height:220px;flex:none}
.call-grid.n1{grid-template-columns:1fr}
.call-grid.n2{grid-template-columns:1fr}
.call-grid.n3,.call-grid.n4{grid-template-columns:1fr 1fr}
.call.big .call-grid.n2{grid-template-columns:1fr 1fr}
.call-tile{position:relative;min-height:0;border-radius:14px;background:#1f221e;overflow:hidden;display:flex;align-items:center;justify-content:center}
.call-tile video{width:100%;height:100%;object-fit:cover;display:block}
.call-tile.screen video{object-fit:contain;background:#000}
.call-tile video.mirror{transform:scaleX(-1)}
.call-tile video.off{position:absolute;opacity:0;pointer-events:none}
.call-face{display:flex}
.call-name{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;max-width:calc(100% - 16px);padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.5);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-wait{position:absolute;inset:auto 10px 40px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.8)}
/* Tú, cuando hay alguien más: en una esquinita encima de los demás. */
.call-tile.me.pip{position:absolute;right:16px;bottom:10px;width:30%;max-width:200px;aspect-ratio:4/3;border:2px solid #111311;box-shadow:var(--sh-2);z-index:1}
.call-grid.n3 .call-tile.me.pip,.call-grid.n4 .call-tile.me.pip{position:relative;inset:auto;width:auto;max-width:none;aspect-ratio:auto;border:0;box-shadow:none}
.call-grid.n2 .call-tile:not(.me),.call-grid.n1 .call-tile{grid-column:1/-1}
.call.big .call-grid.n2 .call-tile.me.pip{position:relative;inset:auto;width:auto;max-width:none;aspect-ratio:auto;border:0;box-shadow:none}
.call.big .call-grid.n2 .call-tile:not(.me){grid-column:auto}
.call-ctrl{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px}
.call-icon{width:42px;height:42px;flex:none;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .2s var(--spring),background .15s}
.call-icon:hover:not(:disabled){background:rgba(255,255,255,.2);transform:scale(1.06)}
.call-icon:disabled{opacity:.45}
.call-icon.ghost{width:32px;height:32px;background:transparent}
.call-icon.off{background:#fff;color:#111311}
.call-icon.on{background:var(--lime);color:#1A1C19}
.call-icon.hang{background:var(--red);width:52px}
.call-icon.hang:hover{background:#a8361f}
.call-ring{position:fixed;z-index:56;top:16px;right:16px;width:min(420px,calc(100vw - 32px));display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-3);animation:pop .35s var(--spring)}
.call-ring .grow{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.call-ring b{font-size:14px}
.call-ring span{font-size:12.5px;color:var(--muted)}
.call-join{gap:6px}
.call-banner{display:flex;align-items:center;gap:10px;margin:8px 20px 0;padding:8px 8px 8px 12px;border-radius:var(--r);background:var(--lime-tint);border:1px solid var(--lime-line);color:var(--lime-ink);font-size:13px;font-weight:500}
.call-banner .ic{flex:none}
@media (max-width:767px){
  .call.big{inset:0;border-radius:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .call.mini{left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);width:auto}
  .call.mini .call-grid{height:160px}
  .call-icon{width:50px;height:50px}
  .call-icon.hang{width:62px}
  .call-ring{top:calc(env(safe-area-inset-top,0px) + 8px);left:12px;right:12px;width:auto;flex-wrap:wrap}
  .call-ring .grow{flex:1 1 60%}
  .call-banner{margin:8px 12px 0}
}

/* ==========================================================================
   Panel del equipo (#/equipo): solo el equipo de Cuadrilla
   ========================================================================== */
.bo{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh;min-height:100dvh;background:var(--ground);color:var(--ink)}
.bo-side{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:22px;padding:22px 14px;border-right:1px solid var(--line);background:var(--panel)}
.bo-brand{display:flex;gap:10px;align-items:center;padding:0 8px}
.bo-brand b{display:block;font-size:14.5px;letter-spacing:-.01em}
.bo-brand span{display:flex;gap:4px;align-items:center;font-size:11.5px;color:var(--muted)}
.bo-nav{display:flex;flex-direction:column;gap:2px}
.bo-nav-item{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;color:var(--ink3);font-size:14px;text-decoration:none;transition:background .15s,color .15s}
.bo-nav-item:hover{background:var(--hover);color:var(--ink)}
.bo-nav-item.on{background:var(--ink);color:var(--on-ink)}
.bo-nav-item.on .ic{color:var(--lime)}
.bo-back{margin-top:auto;display:flex;gap:8px;align-items:center;padding:9px 10px;border-radius:10px;color:var(--muted);font-size:13px;text-decoration:none}
.bo-back:hover{background:var(--hover);color:var(--ink)}
.bo-main{min-width:0;padding:26px clamp(16px,3vw,40px) 60px}
.bo-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.bo-head h1{font-size:26px;letter-spacing:-.025em;margin:0}
.bo-range{display:inline-flex;padding:3px;border-radius:11px;background:var(--soft2);border:1px solid var(--line)}
.bo-range button{border:0;background:transparent;padding:6px 12px;border-radius:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.bo-range button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);font-weight:550}
.bo-body{display:flex;flex-direction:column;gap:20px;animation:bo-in .35s var(--out)}
@keyframes bo-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bo-body{animation:none}}
.bo-loading{display:grid;place-items:center;min-height:180px}
.bo-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.bo-kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.bo-kpi{display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1);min-width:0}
.bo-kpi-label{font-size:12.5px;color:var(--muted)}
.bo-kpi-value{font-size:28px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-kpi-sub{display:flex;gap:6px;align-items:center;font-size:12px;min-height:18px;flex-wrap:wrap}
.bo-delta{display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border-radius:999px;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--soft2);color:var(--muted)}
.bo-delta.good{background:var(--green2);color:var(--green-ink)}
.bo-delta.bad{background:var(--red2);color:var(--red)}
.bo-delta.up:not(.good):not(.bad){background:var(--lime-tint);color:var(--lime-ink)}
.bo-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bo-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:20px 22px 18px;min-width:0}
.bo-card.flush{padding:0;overflow:hidden}
.bo-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.bo-card-head h3{margin:0;font-size:15px;letter-spacing:-.01em}
.bo-card-head p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.bo-chart{position:relative;width:100%}
.bo-chart svg{display:block;overflow:visible}
.bo-grid{stroke:var(--line2);stroke-dasharray:3 4}
.bo-axis{stroke:var(--line)}
.bo-cross{stroke:var(--border3);stroke-dasharray:2 3}
.bo-tick{font-size:11px;fill:var(--faint);font-variant-numeric:tabular-nums}
.bo-tip{position:absolute;top:0;transform:translate(-50%,-6px);pointer-events:none;background:var(--ink);color:var(--on-ink);padding:5px 9px;border-radius:8px;font-size:12px;display:flex;flex-direction:column;align-items:center;box-shadow:var(--sh-2);white-space:nowrap}
.bo-tip span{opacity:.7;font-size:11px}
.bo-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.bo-bar-row{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;gap:12px;align-items:center;width:100%;padding:5px 6px;border:0;border-radius:8px;background:none;text-align:left;font:inherit;color:inherit}
.bo-bar-row.click:hover,.bo-bar-row:hover{background:var(--subtle)}
.bo-bar-label{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-bar-track{height:10px;border-radius:999px;background:var(--soft);overflow:hidden}
.bo-bar{display:block;height:100%;border-radius:999px;background:var(--teal);transition:width .6s var(--out)}
.bo-bar.ink{background:var(--ink3)}
.bo-bar-val{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink2);min-width:52px;text-align:right}
.bo-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.bo-intro h2{margin:0 0 4px;font-size:20px;letter-spacing:-.02em}
.bo-intro p{margin:0;max-width:62ch;font-size:13.5px}
.bo-note{margin:0;padding:10px 14px;border-radius:10px;background:var(--lime-tint);color:var(--lime-ink);font-size:13px;border:1px solid var(--lime-line)}
.bo-topics{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bo-topic{border-top:1px solid var(--line2);padding:10px 0}
.bo-topic:first-child{border-top:0}
.bo-topic-main{display:grid;grid-template-columns:28px minmax(160px,1.3fr) minmax(80px,1fr) 92px auto 34px;gap:12px;align-items:center}
.bo-topic-toggle{width:28px;height:28px;border:0;border-radius:7px;background:none;display:grid;place-items:center;color:var(--muted)}
.bo-topic-toggle:not(:disabled):hover{background:var(--hover)}
.bo-dot{width:5px;height:5px;border-radius:50%;background:var(--border2)}
.bo-topic-name{display:flex;flex-direction:column;gap:2px;border:0;background:none;padding:2px 0;text-align:left;font:inherit;color:inherit;min-width:0}
.bo-topic-name b{display:flex;gap:5px;align-items:center;font-size:14.5px}
.bo-topic-name .muted{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-topic-name:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border2)}
.bo-topic-bar{height:12px;border-radius:999px;background:var(--soft);overflow:hidden}
.bo-topic-bar i{display:block;height:100%;max-width:100%;border-radius:999px;background:linear-gradient(90deg,var(--teal),color-mix(in oklab,var(--teal) 70%,var(--lime)))}
.bo-topic-stats{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.bo-topic-stats b{font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bo-topic-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.bo-pill{display:inline-flex;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:550;background:var(--soft2);color:var(--muted)}
.bo-pill.good{background:var(--green2);color:var(--green-ink)}
.bo-pill.warn{background:var(--amber2);color:var(--amber-ink)}
.bo-pill.bad{background:var(--red2);color:var(--red)}
.bo-pill.muted{color:var(--faint)}
.bo-subtopics{list-style:none;margin:8px 0 2px 40px;padding:0;display:flex;flex-direction:column;gap:2px}
.bo-subtopics li{display:flex;align-items:center;gap:6px}
.bo-sub{flex:1;display:grid;grid-template-columns:minmax(140px,1fr) minmax(80px,1.2fr) 48px;gap:12px;align-items:center;padding:6px 8px;border:0;border-radius:8px;background:none;text-align:left;font:inherit;font-size:13.5px;color:inherit}
.bo-sub:hover{background:var(--subtle)}
.bo-sub span:first-child{display:flex;gap:6px;align-items:center}
.bo-sub b{text-align:right;font-variant-numeric:tabular-nums}
.bo-sub-bar{height:6px;border-radius:999px;background:var(--soft);overflow:hidden}
.bo-sub-bar i{display:block;height:100%;border-radius:999px;background:var(--teal);opacity:.7}
.bo-ai{display:inline-flex;padding:0 5px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:.04em;background:var(--violet-tint);color:var(--violet-ink)}
.bo-chips{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0 0 40px}
.bo-chips.inline{margin:0}
.bo-chip{display:inline-flex;padding:2px 8px;border-radius:7px;font-size:11.5px;background:var(--soft);color:var(--ink3);border:1px solid var(--line)}
.bo-cands,.bo-cannot,.bo-changes,.bo-access,.bo-asks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bo-cands li{display:grid;grid-template-columns:1fr 90px;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line2)}
.bo-cands li:first-child,.bo-cannot li:first-child,.bo-changes li:first-child,.bo-access li:first-child,.bo-asks li:first-child{border-top:0}
.bo-cand{display:flex;flex-direction:column;gap:2px;border:0;background:none;padding:0;text-align:left;font:inherit;color:inherit}
.bo-cand b{font-size:13.5px}
.bo-progress{height:6px;border-radius:999px;background:var(--soft);overflow:hidden}
.bo-progress i{display:block;height:100%;border-radius:999px;background:var(--violet-ink);opacity:.55}
.bo-cannot li{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid var(--line2);font-size:13.5px}
.bo-changes li{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line2);font-size:13.5px}
.bo-changes li.undone{opacity:.55}
.bo-who{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:650;background:var(--soft2);color:var(--ink3);text-transform:uppercase}
.bo-who.ai{background:var(--violet-tint);color:var(--violet-ink)}
.block{display:block}
.bo-search{display:flex;gap:8px;align-items:center;height:36px;padding:0 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--muted);min-width:240px}
.bo-search input{border:0;background:none;outline:0;font:inherit;font-size:14px;color:var(--ink);width:100%}
.bo-search:focus-within{border-color:var(--border3)}
.bo-table-wrap{overflow-x:auto}
.bo-table{width:100%;border-collapse:collapse;font-size:13.5px}
.bo-table th{position:sticky;top:0;background:var(--surface2);text-align:left;font-weight:500;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line);padding:0}
.bo-table th button{border:0;background:none;font:inherit;color:inherit;padding:11px 14px;width:100%;text-align:left;white-space:nowrap}
.bo-table th button:hover{color:var(--ink)}
.bo-table th:not(:has(button)){padding:11px 14px}
.bo-table td{padding:11px 14px;border-bottom:1px solid var(--line2);font-variant-numeric:tabular-nums;vertical-align:middle}
.bo-table tr:hover td{background:var(--subtle)}
.bo-table tr.quiet td{color:var(--muted)}
.bo-hours{display:grid;grid-template-columns:repeat(24,1fr);gap:4px;height:130px;align-items:end}
.bo-hour{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.bo-hour i{display:block;width:100%;border-radius:4px 4px 1px 1px;background:var(--teal);min-height:0;transition:height .6s var(--out)}
.bo-hour span{font-size:10.5px;color:var(--faint);height:12px;font-variant-numeric:tabular-nums}
.bo-callout{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-lg);background:var(--amber2);color:var(--amber-ink);border:1px solid var(--amber-line)}
.bo-callout .ic{flex:none;margin-top:2px}
.bo-callout p{margin:3px 0 0;font-size:13.5px}
.bo-apps{display:flex;flex-direction:column}
.bo-apps-head,.bo-app{display:grid;grid-template-columns:minmax(110px,1fr) minmax(120px,1.4fr) minmax(120px,1.4fr);gap:16px;align-items:center}
.bo-apps-head{font-size:12px;color:var(--muted);padding-bottom:6px}
.bo-app{padding:7px 0;border-top:1px solid var(--line2);font-size:13.5px}
.bo-mini{display:flex;gap:8px;align-items:center}
.bo-mini i{display:block;height:10px;border-radius:999px;min-width:2px;max-width:calc(100% - 44px)}
.bo-mini i.teal{background:var(--teal)}
.bo-mini i.ink{background:var(--ink3)}
.bo-mini em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink2);font-size:12.5px}
.bo-access li{display:grid;grid-template-columns:30px 1fr auto auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line2);font-size:13.5px}
.bo-asks li{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line2)}
.bo-asks li>div:first-child{display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.bo-asks-tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.bo-form{display:flex;flex-direction:column;gap:12px}
.bo-form hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.bo-form-row{display:flex;gap:8px;flex-wrap:wrap}
.bo-form select{height:38px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--ink);padding:0 10px;font:inherit}
@media (max-width:1180px){.bo-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.bo-topic-main{grid-template-columns:28px minmax(140px,1fr) 80px auto 34px}.bo-topic-bar{display:none}}
@media (max-width:900px){.bo-grid2{grid-template-columns:minmax(0,1fr)}.bo-kpis.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .bo{grid-template-columns:minmax(0,1fr)}
  .bo-side{position:sticky;top:0;z-index:5;height:auto;flex-direction:column;gap:10px;padding:12px 16px 8px;border-right:0;border-bottom:1px solid var(--line)}
  .bo-back{position:absolute;top:10px;right:12px;margin:0;padding:6px 8px;font-size:12.5px}
  .bo-nav{flex-direction:row;overflow-x:auto;gap:4px;margin:0 -16px;padding:0 16px;scrollbar-width:none}
  .bo-nav-item{flex:none;padding:7px 11px;font-size:13px}
  .bo-main{padding:18px 16px 48px}
  .bo-head h1{font-size:22px}
  .bo-kpis,.bo-kpis.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .bo-kpi-value{font-size:23px}
  .bo-topic-main{grid-template-columns:24px minmax(0,1fr) auto 30px;row-gap:4px}
  .bo-topic-meta{grid-column:2 / -1;grid-row:2}
  .bo-subtopics,.bo-chips{margin-left:28px}
  .bo-sub{grid-template-columns:minmax(0,1fr) 40px}.bo-sub-bar{display:none}
  .bo-search{min-width:0;width:100%}
  .bo-table thead{display:none}
  .bo-table,.bo-table tbody,.bo-table tr,.bo-table td{display:block;width:100%}
  .bo-table tr{padding:10px 14px;border-bottom:1px solid var(--line2)}
  .bo-table td{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border:0}
  .bo-table td::before{content:attr(data-label);color:var(--muted);font-size:12px}
  .bo-table td:first-child{display:block;padding-bottom:6px}.bo-table td:first-child::before{content:none}
  .bo-apps-head,.bo-app{grid-template-columns:minmax(0,1fr) 1fr 1fr;gap:10px}
  .bo-access li{grid-template-columns:30px 1fr auto}.bo-access li>span:nth-child(3){display:none}
  .bo-asks li{flex-direction:column}.bo-asks-tags{justify-content:flex-start}
}
.bo-fill{display:flex;flex-direction:column;gap:20px;transition:opacity .2s}
.bo-card .bo-fill{gap:0}
.bo-fill.stale{opacity:.55}
.bo-kpi.link{border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:box-shadow .15s,transform .15s}
.bo-kpi.link:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.bo-kpi.link.attention .bo-kpi-value{color:var(--amber-ink)}
.bo-kpi.link.attention{background:var(--amber2)}
.bo-note{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bo-note.bad{background:var(--red2);color:var(--red);border-color:var(--red-line)}
.bo-times{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.bo-check{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--subtle);border:1px solid var(--line2);cursor:pointer}
.bo-check input{margin-top:3px}
.bo-check span{display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.bo-details{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:14px 18px;font-size:13.5px}
.bo-details summary{cursor:pointer;color:var(--muted)}
.bo-details dl{display:grid;grid-template-columns:minmax(160px,auto) 1fr;gap:6px 16px;margin:12px 0 0}
.bo-details dt{color:var(--muted)}
.bo-details dd{margin:0;font-variant-numeric:tabular-nums}
.bo-nav-item{transition:none}
@media (max-width:820px){.bo-table td.bo-hide-m{display:none}.bo-details dl{grid-template-columns:1fr}.bo-nav{mask-image:linear-gradient(90deg,#000 85%,transparent)}}
.bo-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bo-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bo-tile{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:12px;background:var(--subtle);border:1px solid var(--line2)}
.bo-tile b{font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bo-tile span{font-size:13.5px}
.bo-chip.sm{margin-left:8px;font-size:10.5px;padding:1px 6px}
.bo-heat{display:grid;grid-template-columns:34px repeat(24,minmax(0,1fr));gap:3px;align-items:center}
.bo-heat i{display:block;aspect-ratio:1.6;border-radius:4px;background:color-mix(in oklab,var(--teal) calc(var(--a,0)*100%),var(--soft))}
.bo-heat-h{font-size:10.5px;color:var(--faint);text-align:center;font-variant-numeric:tabular-nums}
.bo-heat-d{font-size:11.5px;color:var(--muted)}
.bo-cohort{width:100%;border-collapse:separate;border-spacing:3px;font-size:12.5px;font-variant-numeric:tabular-nums}
.bo-cohort th{font-weight:500;color:var(--muted);font-size:11.5px;text-align:center;padding:4px}
.bo-cohort th:first-child,.bo-cohort td:first-child{text-align:left}
.bo-cohort td{padding:7px 6px;text-align:center;border-radius:6px}
.bo-cohort td:nth-child(n+3){background:color-mix(in oklab,var(--teal) calc(var(--a,0)*100%),var(--soft));color:var(--ink)}
.bo-cohort td.empty{background:transparent}
.bo-share b{font-variant-numeric:tabular-nums}
@media (max-width:1180px){.bo-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.bo-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.bo-grid3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.bo-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.bo-heat{gap:2px;grid-template-columns:26px repeat(24,minmax(0,1fr))}}
.bo-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:15px}
.bo-crumbs button{border:0;background:none;padding:3px 6px;margin:-3px -2px;border-radius:7px;font:inherit;color:var(--muted);letter-spacing:-.01em}
.bo-crumbs button:hover{background:var(--hover);color:var(--ink)}
.bo-crumbs button.on{color:var(--ink);font-weight:650}
.bo-crumbs .ic{color:var(--faint)}
.bo-node{display:flex;gap:20px;align-items:center;padding:4px 0 16px;margin-bottom:6px;border-bottom:1px solid var(--line2)}
.bo-node-num{display:flex;flex-direction:column;align-items:flex-start}
.bo-node-num b{font-size:34px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.bo-node-num span{font-size:12px;color:var(--muted)}
.bo-node-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.bo-node-meta p{margin:0;font-size:14px}
.bo-sub-h{margin:14px 0 2px;font-size:12.5px;font-weight:550;color:var(--muted);text-transform:none}
.bo-topic-main{grid-template-columns:minmax(180px,1.3fr) minmax(80px,1fr) 92px auto 34px 34px !important}
.bo-topic.other .bo-topic-name b,.bo-topic.other .bo-topic-stats b{color:var(--muted)}
.bo-topic.other .bo-topic-bar i{background:var(--border2)}
.bo-topic .bo-chips{margin-left:0}
.bo-loading.small{min-height:80px}
.bo-asks li{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center}
.bo-asks-what{display:flex;flex-direction:column;gap:2px;font-size:13.5px;min-width:0}
.bo-asks-n{display:flex;align-items:center;gap:6px}
.bo-asks-n i{display:block;height:8px;border-radius:999px;background:var(--teal);min-width:3px;max-width:44px}
.bo-asks-n em{font-style:normal;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink2)}
@media (max-width:1180px){.bo-topic-main{grid-template-columns:minmax(140px,1fr) 80px auto 34px 34px !important}}
@media (max-width:820px){.bo-topic-main{grid-template-columns:minmax(0,1fr) auto 30px 30px !important}.bo-topic-meta{grid-column:1 / -1;grid-row:2}.bo-asks li{grid-template-columns:48px minmax(0,1fr)}.bo-asks-tags{grid-column:2}.bo-node{flex-direction:column;align-items:flex-start;gap:8px}}
.bo-node.last{border-bottom:0;padding-bottom:0;margin-bottom:0}
.bo-kpis.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.bo-callout.bad{background:var(--red2);color:var(--red);border-color:var(--red-line)}
.bo-errs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bo-errs>li{border-top:1px solid var(--line2)}
.bo-errs>li:first-child{border-top:0}
.bo-err-head{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;width:100%;padding:10px 4px;border:0;background:none;text-align:left;font:inherit;color:inherit;border-radius:8px}
.bo-err-head:hover{background:var(--subtle)}
.bo-err-title,.bo-err-n{display:flex;flex-direction:column;gap:2px}
.bo-err-n{align-items:flex-end}
.bo-err-n b{font-size:17px;font-variant-numeric:tabular-nums}
.bo-err-body{padding:0 4px 14px 34px;display:flex;flex-direction:column;gap:8px}
.bo-code{margin:0;padding:10px 12px;border-radius:9px;background:var(--soft);border:1px solid var(--line);font-family:var(--mono);font-size:12px;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto;color:var(--ink2)}
.bo-chip.link{cursor:pointer;font:inherit;font-size:11.5px}
.bo-chip.link:hover{border-color:var(--border3);color:var(--ink)}
.bo-plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bo-plain li{padding:8px 0;border-top:1px solid var(--line2);font-size:13.5px}
.bo-plain li:first-child{border-top:0}
.link-btn.strong{color:var(--ink);font-size:13.5px;font-weight:600;text-decoration:none}
.link-btn.strong:hover{text-decoration:underline}
.bo-bad{color:var(--red)}
.sheet.bo-run{width:860px}
.bo-run-body{display:flex;flex-direction:column;gap:16px}
.bo-run-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bo-run-facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0}
.bo-run-facts div{padding:10px;border-radius:10px;background:var(--subtle);border:1px solid var(--line2)}
.bo-run-facts dt{font-size:11.5px;color:var(--muted)}
.bo-run-facts dd{margin:2px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.bo-wf{display:flex;flex-direction:column;gap:2px;max-height:360px;overflow:auto;padding-right:4px}
.bo-wf-row{display:grid;grid-template-columns:minmax(160px,38%) 1fr 64px;gap:10px;align-items:center;font-size:12.5px;padding:2px 0}
.bo-wf-name{display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-wf-kind{flex:none;width:16px;height:16px;border-radius:4px;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:700;background:var(--soft2);color:var(--ink3)}
.bo-wf-kind.model{background:var(--violet-tint);color:var(--violet-ink)}
.bo-wf-kind.tool{background:var(--blue-tint);color:var(--blue-ink)}
.bo-wf-track{position:relative;height:12px;background:var(--soft);border-radius:4px}
.bo-wf-track i{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--teal)}
.bo-wf-row.err .bo-wf-track i{background:var(--red)}
.bo-wf-row.err .bo-wf-name{color:var(--red)}
.bo-wf-ms{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.bo-details.flat{box-shadow:none;border:1px solid var(--line);padding:10px 14px}
.bo-events{margin:10px 0 0;padding-left:0;list-style:none;font-size:12.5px;display:flex;flex-direction:column;gap:3px;max-height:260px;overflow:auto}
.bo-events li.err{color:var(--red)}
.mono{font-family:var(--mono)}
@media (max-width:1180px){.bo-kpis.five{grid-template-columns:repeat(3,minmax(0,1fr))}.bo-run-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.bo-kpis.five{grid-template-columns:repeat(2,minmax(0,1fr))}.bo-wf-row{grid-template-columns:minmax(0,1fr) 54px}.bo-wf-track{grid-column:1 / -1;grid-row:2}}
.bo-kpi.attention{background:var(--amber2)}
.bo-kpi.attention .bo-kpi-value{color:var(--amber-ink)}
.bo-filter{margin-top:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px;font:inherit;font-size:12.5px;color:var(--ink2)}
.bo-filter:hover{border-color:var(--border3)}
.bo-filter.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.bo-one{margin:0;font-size:14px}
.bo-variant{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px dashed var(--line)}
.bo-variant:first-of-type{border-top:0;padding-top:0}
.bo-gate-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--lime-tint);color:var(--lime-ink);border:1px solid var(--lime-line);margin-bottom:4px}
.bo-invite{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;margin-bottom:10px}
.bo-invite .btn{height:42px;margin-bottom:22px}
.bo-linkbox{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;background:var(--lime-tint);border:1px solid var(--lime-line);margin-bottom:12px}
.bo-linkbox p{margin:0;font-size:13.5px}
.bo-linkrow{display:flex;gap:8px}
.bo-linkrow input{flex:1;min-width:0;height:36px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--ink);padding:0 10px;font-family:var(--mono);font-size:12px}
.bo-admins{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.bo-admins li{display:grid;grid-template-columns:30px 1fr auto auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line2);font-size:13.5px}
.bo-admins li:first-child{border-top:0}
.bo-admins li>.bo-pill:last-child{grid-column:3 / span 2;justify-self:end}
@media (max-width:820px){.bo-invite{grid-template-columns:1fr}.bo-invite .btn{margin-bottom:0}.bo-admins li{grid-template-columns:30px 1fr auto}.bo-admins li .btn{grid-column:2 / -1;justify-self:start}}
.bo-row-confirm{display:inline-flex;gap:4px}
.bo-row-confirm .small{align-self:center;margin-right:4px}
.bo-confirm{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:12px;background:var(--amber2);border:1px solid var(--amber-line);color:var(--amber-ink);font-size:13.5px;margin-bottom:12px}
.bo-confirm p{margin:0;flex:1;min-width:240px}
/* El correo de una invitación a Cuadrilla: fijo, se lee como texto (no como un campo que no deja escribir). */
.auth-fixed{margin:0;padding:10px 12px;border-radius:10px;background:var(--soft);border:1px solid var(--line2);color:var(--ink2);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.err.small{font-size:12px}
/* Tu asistente: su hueco en la barra (por rellenar, también plegada), el tipo que no se puede elegir y los avisos. */
.side.collapsed .nav.empty-cta.asg-slot{display:flex}
.mode-opt.off{opacity:.6;cursor:not-allowed}
.mode-opt.off:hover{border-color:var(--line)}
.hs-note{display:flex;gap:8px;align-items:flex-start;width:100%;padding:9px 12px;border-radius:12px;background:var(--soft);border:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--ink2)}
.hs-note.info{background:var(--blue-tint);border-color:var(--blue-tint2);color:var(--blue-ink)}
.hs-note svg{flex:none;margin-top:2px}
.asg-have{text-align:center;align-items:center}
.asg-acts{justify-content:center;gap:8px;flex-wrap:wrap}
.danger-box{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:12px;background:var(--red2);border:1px solid var(--red-line);color:var(--ink);font-size:13.5px;line-height:1.5}
.danger-box b{display:flex;align-items:center;gap:6px;color:var(--red);font-size:14px}
.danger-box.big{padding:16px 18px;font-size:14.5px;border-width:2px}
.danger-box.big b{font-size:16px}
.danger-box label{display:flex;gap:8px;align-items:flex-start;font-weight:500;cursor:pointer}
.danger-box label input{margin-top:3px}
.wp-set-row .btn{flex:none}
.wp-set-row.static{cursor:default}
.wp-set-row.static:hover{background:var(--surface)}
.wp-set-row.sub{padding:6px 14px 6px 28px;border-top:0}
.wp-set-row.sub small{color:var(--ink2,var(--ink))}
.wp-alerts{border-top:1px solid var(--line2);padding:4px 0}

/* De qué se habló en una llamada (su resumen al colgar), bajo su línea en el chat. */
.call-sum{margin:2px 0 4px;font-size:13.5px;line-height:1.45;color:var(--ink2);max-width:62ch}
/* Recién colgada: el resumen está en camino. */
.call-sum.summarizing{color:var(--muted);font-style:italic}
.call-sum.summarizing .typing-dots{margin-left:4px}

/* Organigrama (STU-101, org/OrgChart.jsx): un árbol de arriba abajo. Cada persona es una tarjeta; sus workers, en
   columna debajo; la gente que depende de ella, más abajo, unida con líneas como un árbol genealógico. Si no cabe,
   se desplaza de lado (sin mover la página). */
.org-scroll{overflow:auto;padding:4px 4px 24px}
.org-canvas{width:max-content;min-width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center}
/* Ajustes › Organigrama: todo el ancho de la pantalla de ajustes, no la columna de texto. */
.prefs-in.wide{max-width:none}
.prefs-in.wide .prefs-h{max-width:720px}
.org-empty{display:flex;gap:12px;align-items:flex-start;background:var(--soft);border:1px dashed var(--border2);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:12px}
.org-empty b{display:block;font-size:14px;margin-bottom:2px}
.org-empty span{color:var(--muted);line-height:1.5;font-size:13.5px}
.org-empty-ic{display:grid!important;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--lime2);color:var(--ink);flex:none}
.org-level{display:flex;justify-content:center;margin:0;padding:22px 0 0;position:relative;list-style:none}
.org-level.root{padding-top:0;gap:18px}
.org-level>li{position:relative;display:flex;flex-direction:column;align-items:center;padding:22px 8px 0;list-style:none}
.org-level.root>li{padding-top:0}
/* Las líneas: una horizontal sobre los hermanos y una vertical hasta cada uno. */
.org-level:not(.root)>li::before,.org-level:not(.root)>li::after{content:'';position:absolute;top:0;right:50%;width:50%;height:22px;border-top:1.5px solid var(--border)}
.org-level:not(.root)>li::after{right:auto;left:50%;border-left:1.5px solid var(--border)}
.org-level:not(.root)>li:only-child::before{display:none}
.org-level:not(.root)>li:only-child::after{border-top:0}
.org-level:not(.root)>li:first-child::before,.org-level:not(.root)>li:last-child::after{border-top:0}
.org-level:not(.root)>li:last-child::before{border-right:1.5px solid var(--border);border-radius:0 8px 0 0}
/* La bajada del último ya la dibuja su esquina (::before): sin la otra raya, que salía doble. */
.org-level:not(.root)>li:last-child:not(:only-child)::after{border-left:0}
.org-level:not(.root)>li:first-child:not(:only-child)::after{border-radius:8px 0 0 0}
.org-level:not(.root)::before{content:'';position:absolute;top:0;left:50%;height:22px;border-left:1.5px solid var(--border)}
.org-level:not(.root)>li:last-child::before{width:calc(50% - .75px)}
.org-person{display:flex;align-items:center;gap:10px;width:270px;padding:10px 10px 10px 12px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);text-align:left;position:relative;z-index:1;animation:view-in .4s var(--out)}
.org-person.yours{border-color:var(--border2)}
.org-person.none{border-style:dashed}
.org-person .grow,.org-card .grow{display:flex;flex-direction:column;min-width:0}
.org-person b{font-size:14px;font-weight:600}
.org-person small,.org-card small{font-size:12px}
.org-none{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--soft2);color:var(--muted)}
.org-fold .ic,.org-fold svg{transition:transform .2s var(--out)}
.org-fold.open svg{transform:rotate(90deg)}
.org-workers{list-style:none;margin:0;padding:8px 0 0;display:flex;flex-direction:column;gap:6px;width:270px;position:relative}
.org-workers::before{content:'';position:absolute;top:0;left:22px;height:8px;border-left:1.5px dashed var(--border)}
.org-workers .org-workers{width:auto;margin-left:14px;padding-left:10px;border-left:1.5px solid var(--line)}
.org-workers .org-workers::before{display:none}
.org-card{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r);border:1px solid var(--line2);background:var(--panel);color:inherit;text-decoration:none;min-width:0;text-align:left;transition:background .15s,border-color .15s}
.org-card:hover,.org-card:focus-visible{background:var(--hover);border-color:var(--line)}
.org-card b{font-size:13px;font-weight:600;display:flex;align-items:center;gap:5px}
.org-card.assistant small{color:var(--ink3)}
.org-card .pill{margin-left:auto;flex:none}
/* «Responsable: Javier · Lo contrató Ana» y «Cambiar responsable», en Resumen (chat/WorkerPanel.jsx). */
/* Resumen sin cajas: sus partes con su título; el responsable, en su bloque. */
.wp-sum{gap:18px}
/* «De qué se encarga», lo primero del resumen y a todo el ancho: dos líneas grises en cursiva, la segunda acabada en
   «… Ver más» si hay más (lo mide una copia invisible, .wp-does-probe). */
.wp-does{position:relative;width:100%;min-width:0;margin-bottom:-4px}
.wp-does-t{margin:0;font:italic 13px/1.5 var(--font);color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.wp-does-t .wp-does-more{padding:0;font:inherit;font-style:normal;white-space:nowrap}
.wp-does-probe{position:absolute;top:0;left:0;right:0;visibility:hidden;pointer-events:none}
.wp-sec{width:100%;display:flex;flex-direction:column;gap:8px}
.wp-sec-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.wp-sec-act{display:inline-flex;align-items:center;gap:4px;min-height:24px;flex-shrink:0}
.wp-sec-h{margin:0;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted2)}
.wp-owner{width:100%;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line2)}
.wp-owner-none{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--soft);color:var(--muted)}
.wp-owner-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.wp-owner-l{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.wp-owner-n{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-owner-n b{font-weight:500}
.wp-owner-who{color:var(--ink);text-decoration:none}
.wp-owner-who:hover b{text-decoration:underline;text-underline-offset:3px}
.wp-owner-t small{font-size:12px}
.wp-owner-edit{flex:none;color:var(--muted)}
.wp-owner-edit:hover{color:var(--ink)}
/* Mover a la gente en el organigrama (admins): se arrastra una persona encima de su jefe, o arriba («Dirección») para
   que no dependa de nadie. Mientras se arrastra, se marcan dónde se puede soltar y dónde caería. */
.org-person.movable{cursor:grab}
.org-person.movable:active{cursor:grabbing}
.org-person.dragging{opacity:.45}
.org-person.target{border-style:dashed;border-color:var(--border3)}
.org-person.over{border-style:solid;border-color:var(--ink);box-shadow:0 0 0 3px var(--soft2);transform:scale(1.02);transition:transform .15s var(--out)}
.org-person.movable{padding-left:6px;padding-right:6px;gap:6px}
.org-grip{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:var(--faint);cursor:grab}
.org-grip:hover{color:var(--ink);background:var(--soft)}
.org-more{flex:none;color:var(--faint)}
.org-more:hover,.org-more:focus-visible{color:var(--ink)}
.org-grip:active{cursor:grabbing}
/* «Ver en el organigrama» (tarjeta de una persona o de un worker, y su Responsable): el árbol en grande, encima de todo,
   señalando dónde está. */
.mc-acts{display:flex;align-items:center;gap:6px;align-self:stretch}
.mc-acts .mc-go{flex:1}
.mc-acts .mc-org{flex:none}
.mc-go[aria-disabled=true],.mc-go[aria-disabled=true]:hover,.mc-go[aria-disabled=true]:active{opacity:.4;cursor:default;transform:none;box-shadow:none;background:var(--ink)}
.mc-go[aria-disabled=true]::after{display:none}
.wp-org{width:24px;height:24px;opacity:.7}
.wp-org:hover,.wp-org:focus-visible{opacity:1}
.org-person.focus,.org-card.focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--lime2);animation:org-here 1.6s var(--out) 2}
@keyframes org-here{0%,100%{box-shadow:0 0 0 3px var(--lime2)}50%{box-shadow:0 0 0 7px var(--lime2)}}
@media (prefers-reduced-motion:reduce){.org-person.focus,.org-card.focus{animation:none}}
.org .ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* «¿De quién dependes?» y, para admins, quién sigue sin su sitio en el organigrama (org/OrgAsks.jsx, en Inicio). */
.org-ask{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 14px 14px 16px;margin-bottom:14px;animation:view-in .4s var(--out)}
.org-ask h2{font-size:15px;font-weight:600;margin:0 0 2px}
.org-ask p{margin:0;line-height:1.5;font-size:13.5px}
.org-ask-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--lime2);color:var(--ink);flex:none}
.org-ask-list select{height:34px;border:1px solid var(--border);border-radius:8px;padding:0 8px;background:var(--surface);font-size:13px;min-width:0;max-width:100%}
.org-ask-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.org-ask-list li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.org-ask-list li .grow{min-width:120px}
/* La bienvenida, primer paso: «¿De quién dependes?» (org/OrgAsks.jsx › AskBossStep), antes de «¿Por quién empiezas?». */
.ask-boss{overflow-y:auto}
.ask-boss-in{max-width:560px;margin:0 auto;padding:48px 20px 40px;display:flex;flex-direction:column;gap:14px}
.ask-boss-in h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.02em}
.ask-boss-in .lead{margin:0;color:var(--muted);line-height:1.5}
.ask-boss-in .pick-list{max-height:min(46vh,420px);overflow:auto}
.ask-boss-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.org-ask-ic.big{width:44px;height:44px;border-radius:12px}
/* Como en los modales: «Seguir» a la derecha; en el móvil, uno debajo de otro con «Seguir» arriba. */
@media (max-width:640px){.ask-boss-in{padding:24px 16px 32px}.ask-boss-in h1{font-size:22px}.ask-boss-acts{flex-direction:column-reverse;align-items:stretch}.ask-boss-acts .grow{display:none}}
.invite-what{margin:-4px 0 18px;color:var(--ink);font-weight:500;font-size:15px}
.join-boss{margin:4px 0 14px;max-height:min(44vh,380px);overflow:auto;text-align:left;width:100%;align-self:stretch;display:flex;flex-direction:column}
.join-boss .pick-row{width:100%}
/* «¿Y a qué te dedicas?» debajo de «¿De quién dependes?» al unirse (ui/job.jsx). */
.join-job{margin:0 0 12px}
/* La dirección en su recuadro, con la etiqueta encima del borde; al arrastrar a alguien con jefe, es donde se suelta
   para que no dependa de nadie. */
.org-top{position:relative;padding:28px 18px 0}
.org-top.bare{padding:0}
/* El recuadro abarca solo la fila de arriba (alto de una tarjeta); lo que cuelga de ellos queda fuera. */
.org-top-band{position:absolute;left:0;right:0;top:0;height:100px;border:1.5px solid var(--line);border-radius:var(--r-xl);transition:border-color .15s,background .15s}
.org-top>.org-level.root,.org-top>.org-level.root>li{pointer-events:none}
.org-top:not(.bare)>.org-level.root>li>.org-workers{padding-top:24px}
.org-top:not(.bare)>.org-level.root>li>.org-workers::before{height:24px}
.org-top>.org-level.root>li>*{pointer-events:auto}
.org-top-label{position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:0 10px;background:var(--surface);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.org-top-band.drop{border-style:dashed;border-color:var(--border3)}
.org-top-band.drop .org-top-label{text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--ink3)}
.org-top-band.over{border-style:solid;border-color:var(--ink);background:var(--soft)}
/* «Ver en el organigrama»: casi a pantalla completa (un lienzo), con un margen que deja ver que está encima. */
.sheet.wide.org-modal{width:calc(100vw - 48px);height:calc(100vh - 48px);height:calc(100dvh - 48px);max-width:none;max-height:none}
.org-modal>.org{flex:1;min-height:0;display:flex;flex-direction:column}
.org-modal .org-scroll{flex:1;min-height:0;padding-top:14px}
.org-scroll{padding-top:14px}
.bo-usage{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.bo-usage-bar{width:120px;height:6px;border-radius:999px;background:var(--soft2);overflow:hidden;flex:none}
.bo-usage-bar i{display:block;height:100%;border-radius:999px;background:var(--teal)}
.bo-usage.full{color:var(--amber-ink)}
.bo-usage.full .bo-usage-bar i{background:var(--amber)}
/* Así te verá el equipo (WhoCard › PersonCardPreview): tu tarjeta, quieta, mientras escribes a qué te dedicas. */
.mc-preview{margin:4px 0 0;display:flex;flex-direction:column;gap:8px;width:100%;text-align:left}
.mc-preview figcaption{font-size:12.5px;color:var(--muted)}
.ment-card.is-preview{position:relative;z-index:auto;width:100%;box-shadow:var(--sh-1);animation:none;pointer-events:none;user-select:none}
.ment-card.is-preview .mc-ph{font-style:italic;opacity:.6}
/* Tu foto, en la vista previa: un lápiz encima al pasar el ratón (o con el teclado); en pantallas táctiles, siempre, en
   la esquina, para que se vea que se puede. */
.mc-photo{position:relative;flex:none;padding:0;border:0;background:none;border-radius:calc(48px * .28);cursor:pointer;pointer-events:auto}
.mc-photo-edit{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:rgba(20,22,19,.55);color:#fff;opacity:0;transition:opacity .15s}
.mc-photo:hover .mc-photo-edit,.mc-photo:focus-visible .mc-photo-edit,.mc-photo.busy .mc-photo-edit{opacity:1}
.mc-photo:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:none){.mc-photo-edit{inset:auto;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--surface);opacity:1;box-shadow:0 0 0 2px var(--surface)}.mc-photo-edit svg{width:12px;height:12px}}
/* Unirse (screens.jsx › AskBossOnJoin): en el móvil, todo a la izquierda, como los campos y la tarjeta. */
@media (max-width:640px){.auth-card.auth-ask{align-items:stretch;text-align:left}.auth-card.auth-ask .lead{max-width:none}.auth-card.auth-ask .link-btn{align-self:center}}

/* Correo de cada worker (pestaña «Correo», sus ajustes y Ajustes › Correo) */
.mail-stack{display:flex;flex-direction:column;gap:12px}
.mail-head{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.mail-addr{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:13px;color:var(--ink);word-break:break-all}
.mail-warn{display:block;color:var(--amber-ink);font-size:12px;line-height:1.45}
p.mail-warn{background:var(--amber2);border:1px solid var(--amber-line);border-radius:10px;padding:8px 10px}
.mail-sub{display:flex;align-items:center;gap:6px;margin:14px 0 8px;font-size:13px;font-weight:600;color:var(--ink2)}
.mail-sub .pill{margin-left:2px}
.mail-list li{display:block}
.mail-thread{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--line2);background:var(--surface);border-radius:10px;padding:8px 10px;color:var(--ink);font-size:13px;transition:background .15s,border-color .15s}
.mail-thread:hover{background:var(--hover);border-color:var(--line)}
.mail-thread .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.mail-thread .pill,.mail-thread .chev{flex:none}
.mail-thread:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.mail-snip{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted2);font-size:12px}
.mail-view{display:flex;flex-direction:column;gap:10px}
.mail-back{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;text-decoration:none}
.mail-subject{margin:0;font-size:15px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.mail-decide{display:flex;flex-direction:column;gap:8px;background:var(--amber2);border:1px solid var(--amber-line);border-radius:10px;padding:10px 12px;color:var(--amber-ink);font-size:13px}
.mail-decide .row{gap:8px;flex-wrap:wrap}
.mail-msgs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mail-msg{border:1px solid var(--line2);background:var(--surface);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.mail-msg.out{background:var(--soft);margin-left:18px}
.mail-msg-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.mail-msg-h b{color:var(--ink);font-weight:600}
.mail-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.5;color:var(--ink2);max-height:420px;overflow:auto}
.mail-original{display:block;width:100%;height:60vh;border:1px solid var(--line);border-radius:10px;background:#fff}
.mail-seg{flex-wrap:wrap}
.mail-field textarea,.mail-field input{width:100%}
.mail-actions{gap:8px;flex-wrap:wrap}
/* Un email de la persona al worker, en su conversación: se ve que llegó por email (con su asunto). */
.mail-in-chat{display:flex;align-items:center;gap:6px;margin:2px 0 4px;padding:4px 8px;border-radius:8px;background:var(--soft);color:var(--muted);font-size:12.5px;width:fit-content;max-width:100%}
.mail-in-chat b{color:var(--ink2);font-weight:500;overflow-wrap:anywhere}
/* Sus ajustes de correo (Ficha completa › Correo): cada parte con su aire, dentro del mismo bloque. */
.wp-set-row.col{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px}
.wp-set-row.col .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.wp-set-row.col .seg{align-self:flex-start}
.wp-set-row.col > .hint{margin:0}
.wp-set-row.col > .mail-warn{margin:0}
.mail-set > label.wp-set-row{padding:12px 14px}
.mail-set-fields{display:flex;flex-direction:column;gap:14px;padding:14px;border-top:1px solid var(--line2);background:var(--surface)}
.mail-set-fields .field{gap:6px}
.mail-set-fields .field>span{font-size:13.5px;font-weight:500;color:var(--ink)}
.mail-set-fields .field small{font-size:12px;line-height:1.45;color:var(--muted2)}
.mail-set-fields .mail-save{align-self:flex-start}
.mail-set .mail-actions{padding:12px 14px;border-top:1px solid var(--line2);background:var(--surface)}
.mail-set-rules{padding:14px;border-top:1px solid var(--line2);background:var(--surface)}
.mail-set-rules .mail-sub{margin:0 0 8px}
.mail-set-rules .hint{margin-top:6px}
.mail-copy{gap:8px;align-items:center;padding:6px 0}
.mail-copy code{display:block;font-family:var(--mono);font-size:12px;color:var(--ink2);word-break:break-all}
.mail-form{margin-top:10px;max-width:520px}
.mail-form .btn{align-self:flex-start}