/* ============================================================
   Kairos Discovery — prototype layer
   Everything Kairos-specific lives here. app.css stays an untouched
   port of the SimOS design system so the two never tangle.
   ============================================================ */


/* Screens are documents: they scroll. The SimOS shell locks the viewport
   for an operator app, which is the wrong default here. */
body.simos-body { overflow: auto; }

/* An author `display` beats the UA rule for [hidden], and .login sets
   display:grid, so the screen switcher needs the last word. */
[hidden] { display: none !important; }

/* ---------- Login ---------- */
/* app.css pins .login to exactly 100vh; let it grow on short viewports. */
.login { height: auto; min-height: 100vh; padding: 40px 20px; }

.login .brand .mark {
  width: 30px; height: 30px; object-fit: contain;
  /* the celestial isotipo is a light blue; on the ink card of dark mode it
     holds up, so the asset swaps rather than inverts (see the <picture>). */
}
.login .brand .name { font-size: 21px; }

.login .field + .field { margin-top: 14px; }

/* app.css fills inputs with --surface, which is pure white and therefore
   invisible on the white login card. Drop them a step and give them an edge. */
.login .input {
  background: var(--surface-2);
  border-color: var(--line);
  padding: 11px 14px;
}
.login .input:focus { background: var(--surface); border-color: var(--fg); }

.login .btn.full { width: 100%; justify-content: center; margin-top: 22px; }

.login .forgot {
  display: block; margin-top: 10px; text-align: right;
  font-size: 12px; color: var(--fg-mute); text-decoration: none;
}
.login .forgot:hover { color: var(--fg); text-decoration: underline; }

.or {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 16px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-mute); letter-spacing: 0.08em; text-transform: uppercase;
}
.or::before, .or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.sso {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: transparent;
  color: var(--fg); cursor: pointer;
  font: 500 13px var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.sso + .sso { margin-top: 8px; }
.sso:hover { border-color: var(--fg); background: var(--surface-2); }
.sso .ic { width: 15px; height: 15px; flex-shrink: 0; }

/* app.css sets the login footer in mono, which reads as code here. */
.login .footer {
  font-family: var(--font-body); font-size: 12px;
  line-height: 1.6; letter-spacing: 0; margin-top: 26px;
}
.login .footer a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.login .footer a:hover { border-bottom-color: var(--fg); }

/* ============================================================
   App topbar (logged in)
   ============================================================ */
.bar {
  display: flex; align-items: center; gap: 12px;
  height: var(--topbar-h); padding: 0 22px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
}
.bar .brand { display: flex; align-items: center; gap: 9px; }
.bar .brand .mark { width: 21px; height: 21px; object-fit: contain; }
.bar .brand .name {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -0.02em; font-size: 15px;
}
.bar .sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 3px; }
.bar .org { font-size: 13px; font-weight: 600; }
.bar .spacer { flex: 1; }

/* ============================================================
   First entry — the empty state a client admin lands on
   ============================================================ */
.first {
  max-width: 620px; margin: 0 auto;
  padding: 74px 24px 100px;
}
.first h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 36px; line-height: 1.12; letter-spacing: -0.03em;
  text-wrap: balance; margin: 16px 0 14px;
}
.first .lead {
  font-size: 15px; line-height: 1.6; color: var(--fg-mute);
  max-width: 52ch;
}

.steps { margin: 38px 0 34px; }
.step {
  display: grid; grid-template-columns: 26px minmax(0, 1fr);
  gap: 15px; padding: 18px 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step .n {
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--surface-2); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute);
  margin-top: 1px;
}
.step .t { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.step .d { font-size: 13px; color: var(--fg-mute); line-height: 1.55; margin-top: 4px; }

.first .cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.first .out {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--fg-mute); line-height: 1.6;
}
.first .out a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.first .out a:hover { border-bottom-color: var(--fg); }

/* ============================================================
   Agent conversation — the spine of the whole product.
   There are no settings screens. Anything you'd configure, you
   ask for, and the agent renders it inline as something you can
   act on. Config is an outcome of talking, never a place to go.
   ============================================================ */
.chat {
  max-width: 700px; margin: 0 auto; padding: 0 24px;
  min-height: calc(100vh - var(--topbar-h));
  display: flex; flex-direction: column;
}

.who {
  display: flex; align-items: center; gap: 8px;
  padding: 42px 0 26px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--fg-mute); letter-spacing: 0.07em; text-transform: uppercase;
}
.who img { width: 17px; height: 17px; object-fit: contain; }

.thread { flex: 1; display: flex; flex-direction: column; gap: 18px; padding-bottom: 28px; }

.msg { animation: fade-up 340ms var(--ease-smooth); }
.msg.agent {
  font-size: 17px; line-height: 1.55; letter-spacing: -0.01em;
  max-width: 34em; text-wrap: pretty;
}
.msg.user {
  align-self: flex-end; max-width: 80%;
  background: var(--surface-2); color: var(--fg);
  padding: 11px 17px; border-radius: var(--r-md);
  font-size: 15px; line-height: 1.5;
}

/* thinking indicator */
.dots { display: inline-flex; gap: 4px; align-items: center; height: 26px; }
.dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-mute);
  animation: blink 1.2s var(--ease-out) infinite;
}
.dots i:nth-child(2) { animation-delay: 0.18s; }
.dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: 0.5; } }

/* one-tap answers, so typing is always optional */
.chips { display: flex; gap: 7px; flex-wrap: wrap; animation: fade-up 340ms var(--ease-smooth); }
.chip {
  padding: 8px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: transparent;
  color: var(--fg); cursor: pointer;
  font: 500 13.5px var(--font-body);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip:hover { background: var(--surface); border-color: var(--fg); }
.chip.soft { color: var(--fg-mute); border-style: dashed; }

/* Structured output the agent renders mid-conversation. This is what
   replaces a settings form: it appears where you are, already filled. */
.emit {
  background: var(--surface); border-radius: var(--r-lg);
  padding: 18px 20px; max-width: 34em;
  animation: fade-up 380ms var(--ease-smooth);
}
.emit .k {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.emit .title {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.02em; margin: 7px 0 0;
  display: flex; align-items: center; gap: 8px;
}
.emit .title .edit { color: var(--fg-mute); cursor: pointer; opacity: 0; transition: opacity var(--dur-fast); }
.emit:hover .title .edit { opacity: 1; }
.emit .desc { font-size: 13.5px; color: var(--fg-mute); line-height: 1.55; margin-top: 6px; }
.emit .row {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.emit .rows { margin-top: 14px; }
.emit .row .nm { font-size: 13.5px; font-weight: 500; }
.emit .row .rl { font-size: 12.5px; color: var(--fg-mute); }
.emit .row .spacer { flex: 1; }
.emit .acts { display: flex; gap: 8px; margin-top: 16px; }

/* ---------- Composer ---------- */
.composer-wrap {
  position: sticky; bottom: 0;
  background: linear-gradient(to bottom, transparent, var(--bg) 22%);
  padding: 18px 0 22px;
}
.composer {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 11px 12px 11px 17px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.composer:focus-within { border-color: var(--fg); }
.composer textarea {
  flex: 1; border: none; background: transparent; resize: none; outline: none;
  color: var(--fg); font: inherit; font-size: 15px; line-height: 1.5;
  max-height: 160px; padding: 6px 0;
}
.composer textarea::placeholder { color: var(--fg-mute); }
.icobtn {
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: transparent; color: var(--fg-mute);
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.icobtn:hover { background: var(--surface-2); color: var(--fg); }
.icobtn.send { background: var(--fg); color: var(--bg); }
.icobtn.send:hover { background: var(--btn-hover); }
.composer-hint {
  font-size: 11.5px; color: var(--fg-mute); text-align: center;
  margin-top: 10px; line-height: 1.5;
}

.rowx {
  width: 27px; height: 27px; border-radius: 50%;
  border: none; background: transparent; color: var(--fg-mute);
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.rowx:hover { background: var(--surface-2); color: var(--fg); }

/* ============================================================
   Workspace — initiatives panel + shared outcome
   The rule that shapes this screen: what you said to the agent is
   yours alone. What was understood is the team's. The sidebar lists
   initiatives, never conversations.
   ============================================================ */
.shell {
  display: grid; grid-template-columns: 262px minmax(0, 1fr);
  height: calc(100vh - var(--topbar-h));
}
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .side { display: none; } }

.side {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 14px 10px 12px;
  display: flex; flex-direction: column;
}
.side .new {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; margin-bottom: 16px;
  border-radius: 10px; border: 1px dashed var(--line-2);
  background: transparent; color: var(--fg); cursor: pointer;
  font: 500 13.5px var(--font-body); text-align: left;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.side .new:hover { border-color: var(--fg); background: var(--surface); }
.side .grp {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0 12px 7px; margin-top: 12px;
}

.ini {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px 10px; border-radius: 10px;
  border: none; background: transparent; color: var(--fg); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.ini:hover { background: var(--surface); }
.ini.on { background: var(--surface-2); }
.ini .nm {
  font-size: 13.5px; font-weight: 500; line-height: 1.35;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ini .st {
  display: flex; align-items: center; gap: 8px; margin-top: 7px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute);
}
.ini .st .track { flex: 1; height: 2px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.ini .st .track > i { display: block; height: 100%; background: var(--fg-mute); }
.ini.on .st .track > i { background: var(--fg); }
.ini.done .st .track > i { background: var(--sev-success); }

.side .foot {
  margin-top: auto; padding: 12px 10px 2px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 9px;
}
.side .foot .nm { font-size: 12.5px; font-weight: 500; }
.side .foot .rl { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); }

/* ---------- Main outcome panel ---------- */
.main { overflow-y: auto; }
.pane { max-width: 780px; padding: 32px 36px 80px; }

.pane .head { display: flex; align-items: flex-start; gap: 16px; }
.pane h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 27px; line-height: 1.15; letter-spacing: -0.025em;
  margin: 10px 0 0;
}
.pane .head .spacer { flex: 1; }

.people { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.stack { display: flex; }
.stack .avatar { margin-right: -5px; box-shadow: 0 0 0 2px var(--bg); }
.stack .avatar.pending {
  background: transparent; border: 1px dashed var(--line-2); color: var(--fg-mute);
}
.people .txt { font-size: 12.5px; color: var(--fg-mute); }

.privacy {
  display: flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 10px 13px;
  border-radius: var(--r-sm); background: var(--surface-2);
  font-size: 12px; color: var(--fg-mute); line-height: 1.5;
}
.privacy svg { flex-shrink: 0; opacity: 0.6; }

.sec { margin-top: 34px; }
.sec .h {
  display: flex; align-items: baseline; gap: 9px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding-bottom: 4px;
}
.sec .h .n { opacity: 0.6; }

.find { padding: 17px 0 15px; border-top: 1px solid var(--line); }
.find:last-child { border-bottom: 1px solid var(--line); }
.find .txt { font-size: 15px; line-height: 1.55; letter-spacing: -0.005em; max-width: 62ch; }
.find .foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.find .foot .spacer { flex: 1; }
.find .acts { display: flex; gap: 2px; opacity: 0.5; transition: opacity var(--dur-fast); }
.find:hover .acts, .find:focus-within .acts { opacity: 1; }
.find.clash .acts { opacity: 1; }
.act {
  border: none; background: transparent; color: var(--fg-mute); cursor: pointer;
  padding: 4px 9px; border-radius: var(--r-pill);
  font: 500 11px var(--font-body); text-transform: none; letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 5px;
}
.act:hover { background: var(--surface-2); color: var(--fg); }

/* A finding two areas describe differently. The whole point of running
   discovery across areas at once, so it gets weight, not a footnote. */
.find.clash { border-left: 2px solid var(--sev-warn); padding-left: 15px; margin-left: -17px; }
.find .clashnote {
  margin-top: 11px; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--sev-warn-bg); font-size: 12.5px; line-height: 1.55;
  color: var(--fg); max-width: 58ch;
}
.find .clashnote b { font-weight: 600; }

.cmts { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.cmt {
  padding-left: 13px; border-left: 2px solid var(--line-2);
  font-size: 13px; line-height: 1.55; max-width: 58ch;
}
.cmt .au { font-weight: 600; font-size: 13px; }
.cmt .when { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); margin-left: 6px; }
.cmt .body { color: var(--fg-mute); margin-top: 2px; }
.cmtbox {
  display: flex; align-items: center; gap: 9px; margin-top: 13px;
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: transparent;
  font-size: 12.5px; color: var(--fg-mute); cursor: text; max-width: 58ch;
}

/* ---------- Missing / owed ---------- */
.owe {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.owe:last-child { border-bottom: 1px solid var(--line); }
.owe .nm { font-size: 13.5px; font-weight: 500; }
.owe .rl { font-size: 12px; color: var(--fg-mute); }
.owe .spacer { flex: 1; }
.owe .ago { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); }

/* ============================================================
   User menu, toasts, and the live/collaborative states
   ============================================================ */
.usermenu { position: relative; }
.avatarbtn { border: none; background: transparent; padding: 0; cursor: pointer; display: block; }
.menu {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 500;
  min-width: 232px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lift);
}
.menu-h { padding: 10px 12px 11px; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
.menu-h .nm { font-size: 13px; font-weight: 600; }
.menu-h .rl { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); margin-top: 3px; }
.menu button {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border-radius: 8px;
  border: none; background: transparent; color: var(--fg);
  font: 500 13px var(--font-body); cursor: pointer;
}
.menu button:hover { background: var(--surface-2); }

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 900;
  transform: translate(-50%, 14px);
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--fg); color: var(--bg);
  font-size: 13px; font-weight: 500;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-smooth);
  box-shadow: var(--shadow-lift);
}
.toast.in { opacity: 1; transform: translate(-50%, 0); }

/* Waiting for the first answer. Honest, and it moves, so it doesn't
   read as a screen that failed to load. */
.empty { padding: 34px 0 10px; }
.empty .dots { margin-bottom: 14px; }
.empty .t { font-size: 15px; font-weight: 600; }
.empty .d { font-size: 13px; color: var(--fg-mute); margin-top: 5px; line-height: 1.55; max-width: 46ch; }

/* A finding that just arrived while you were looking at the page. */
.find.fresh { animation: fade-up 420ms var(--ease-smooth); }
.find.confirmed .txt { border-left: 2px solid var(--sev-success); padding-left: 12px; margin-left: -14px; }
.act.on { color: var(--sev-success); }
.act:disabled { opacity: 0.5; cursor: default; }

.resolve { margin-top: 13px; max-width: 58ch; }
.resolve .q {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute);
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 9px;
}
.quick {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; margin-bottom: 6px;
  border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: transparent; color: var(--fg); cursor: pointer;
  font: 400 13px var(--font-body); line-height: 1.45;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.quick:hover { border-color: var(--fg); background: var(--surface); }
.fix {
  width: 100%; padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--fg); font: inherit; font-size: 13px; resize: none; outline: none;
  margin-bottom: 9px;
}
.fix:focus { border-color: var(--fg); }
.cmt.fix { border-left-color: var(--sev-warn); }

.cmtbox input {
  flex: 1; border: none; background: transparent; outline: none;
  color: var(--fg); font: inherit; font-size: 12.5px;
}
.cmtbox:focus-within { border-color: var(--fg); }

/* ============================================================
   Onboarding — el punto de contacto arma su directorio.
   Guiado y determinista: no hay nada que "entender" aquí, hay una
   forma correcta de armarlo y el producto la enseña mientras avanza.
   ============================================================ */
.onb { max-width: 720px; margin: 0 auto; padding: 40px 24px 120px; }

.stepper { display: flex; align-items: center; gap: 0; margin-bottom: 40px; }
.stepper .s {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-mute);
}
.stepper .s .n {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-2); display: grid; place-items: center;
  font-size: 10px;
}
.stepper .s.on { color: var(--fg); }
.stepper .s.on .n { background: var(--fg); color: var(--bg); }
.stepper .s.done .n { background: var(--surface-3); color: var(--fg); }
.stepper .line { flex: 1; height: 1px; background: var(--line); margin: 0 12px; }

.onb h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 30px; line-height: 1.15; letter-spacing: -0.03em;
  text-wrap: balance; margin: 0 0 12px;
}
.onb .lead { font-size: 14.5px; line-height: 1.6; color: var(--fg-mute); max-width: 54ch; }

/* Lo que el producto le enseña al usuario, en el momento en que le sirve. */
.teach {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 20px; padding: 13px 15px;
  border-radius: var(--r-md); background: var(--surface-2);
  font-size: 13px; line-height: 1.55; max-width: 58ch;
}
.teach svg { flex-shrink: 0; margin-top: 2px; opacity: 0.55; }
.teach b { font-weight: 600; }

/* ---------- Paso 1: áreas ---------- */
.pickgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 9px; margin: 28px 0 0;
}
.pick {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: transparent;
  color: var(--fg); cursor: pointer; text-align: left;
  font: 500 13.5px var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pick:hover { border-color: var(--fg-mute); background: var(--surface); }
.pick .box {
  width: 17px; height: 17px; border-radius: 5px; flex-shrink: 0;
  border: 1px solid var(--line-2); display: grid; place-items: center;
  color: transparent;
}
.pick.on { border-color: var(--fg); background: var(--surface); }
.pick.on .box { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* ---------- Paso 2: personas por área ---------- */
.arow { padding: 18px 0; border-top: 1px solid var(--line); }
.arow:last-of-type { border-bottom: 1px solid var(--line); }
.arow .ah { display: flex; align-items: center; gap: 10px; }
.arow .ah .nm { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.arow .ah .spacer { flex: 1; }
.arow .ah .miss {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sev-warn);
}
.arow .list { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }

.prow {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--r-md); background: var(--surface);
}
.prow .nm { font-size: 13.5px; font-weight: 500; }
.prow .rl { font-size: 12px; color: var(--fg-mute); }
.prow .spacer { flex: 1; }
.tag {
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: transparent;
  color: var(--fg-mute); cursor: pointer;
  font: 500 11.5px var(--font-body); white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
.tag:hover { border-color: var(--fg-mute); color: var(--fg); }
.tag.on { border-color: var(--fg); background: var(--fg); color: var(--bg); }

.addbtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--r-pill);
  border: 1px dashed var(--line-2); background: transparent;
  color: var(--fg-mute); cursor: pointer; font: 500 12.5px var(--font-body);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.addbtn:hover { border-color: var(--fg); color: var(--fg); }

/* buscador del directorio */
.finder { position: relative; margin-top: 12px; }
.finder input {
  width: 100%; padding: 11px 15px; border-radius: var(--r-md);
  border: 1px solid var(--fg); background: var(--surface);
  color: var(--fg); font: inherit; font-size: 13.5px; outline: none;
}
.results {
  margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden; max-height: 260px; overflow-y: auto;
}
.res {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 14px; border: none; background: transparent;
  color: var(--fg); cursor: pointer; text-align: left;
}
.res:hover { background: var(--surface-2); }
.res .nm { font-size: 13.5px; font-weight: 500; }
.res .rl { font-size: 12px; color: var(--fg-mute); }
.res .spacer { flex: 1; }
.res .ar { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute); letter-spacing: 0.05em; text-transform: uppercase; }
.res.mail { border-top: 1px solid var(--line); color: var(--fg-mute); font-size: 12.5px; }

/* guía viva: reglas simples, sin adivinanzas */
.guide {
  margin-top: 26px; padding: 15px 17px;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: transparent;
}
.guide .h {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute);
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 10px;
}
.guide .item {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; line-height: 1.5; padding: 5px 0;
}
.guide .item .ck { flex-shrink: 0; margin-top: 2px; }
.guide .item.ok { color: var(--fg-mute); }
.guide .item.ok .ck { color: var(--sev-success); }
.guide .item.todo .ck { color: var(--sev-warn); }

.onbnav { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.onbnav .spacer { flex: 1; }
.onbnav .hint { font-size: 12px; color: var(--fg-mute); }

/* ---------- Paso 3 ---------- */
.summary { margin-top: 26px; }
.sumgrp { padding: 15px 0; border-top: 1px solid var(--line); }
.sumgrp:last-child { border-bottom: 1px solid var(--line); }
.sumgrp .ar {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute);
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 9px;
}
.sumgrp .ppl { display: flex; flex-wrap: wrap; gap: 7px; }
.pchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 6px; border-radius: var(--r-pill);
  background: var(--surface-2); font-size: 13px;
}
.pchip .t {
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute);
  letter-spacing: 0.05em; text-transform: uppercase;
}

/* ---------- Paso 1: el problema, en sus palabras ---------- */
.bigbox {
  margin-top: 26px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line-2);
  padding: 20px 22px 14px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.bigbox:focus-within { border-color: var(--fg); }
.bigbox textarea {
  width: 100%; border: none; background: transparent; resize: none; outline: none;
  color: var(--fg); font: inherit; font-size: 16.5px; line-height: 1.6;
  letter-spacing: -0.01em; min-height: 118px;
}
.bigbox textarea::placeholder { color: var(--fg-mute); }
.bigbox .tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--line);
}
.bigbox .tools .spacer { flex: 1; }
.bigbox .count { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); }

.mic {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: transparent;
  color: var(--fg); cursor: pointer; font: 500 13px var(--font-body);
  transition: all var(--dur-fast) var(--ease-out);
}
.mic:hover { border-color: var(--fg); }
.mic.rec { border-color: var(--sev-critical); color: var(--sev-critical); }
.mic.rec .d {
  width: 8px; height: 8px; border-radius: 50%; background: var(--sev-critical);
  animation: pulse 1.6s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) { .mic.rec .d { animation: none; } }
.mic .t { font-family: var(--font-mono); font-size: 11px; }

.ghostlink {
  border: none; background: transparent; color: var(--fg-mute); cursor: pointer;
  font: 500 12.5px var(--font-body); padding: 6px 4px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2);
}
.ghostlink:hover { color: var(--fg); text-decoration-color: var(--fg); }

/* ---------- Paso 2: lo que se infirió ---------- */
.readback { margin-top: 26px; }
.readback .k {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute);
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 9px;
}
.titleedit {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 17px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid transparent;
}
.titleedit:focus-within { border-color: var(--fg); }
.titleedit input {
  flex: 1; border: none; background: transparent; outline: none; color: var(--fg);
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.02em;
}
.titleedit svg { opacity: 0.4; flex-shrink: 0; }

.acards { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.acard {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 15px; border-radius: var(--r-md);
  background: var(--surface);
}
.acard .nm { font-size: 14px; font-weight: 600; }
.acard .why { font-size: 12px; color: var(--fg-mute); margin-top: 2px; }
.acard .why q { font-style: normal; color: var(--fg); }
.acard .spacer { flex: 1; }
.acard.add {
  background: transparent; border: 1px dashed var(--line-2);
  color: var(--fg-mute); cursor: pointer; font: 500 13px var(--font-body);
}
.acard.add:hover { border-color: var(--fg); color: var(--fg); }

/* Las palabras del punto de contacto, intactas. Ancla todo lo demás. */
.said { margin-top: 22px; padding-left: 15px; border-left: 2px solid var(--line-2); max-width: 62ch; }
.said .k {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute);
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 7px;
}
.said p { font-size: 14px; line-height: 1.6; color: var(--fg-mute); }

/* ============================================================
   Revisión de preguntas — el admin aprueba antes de que salga
   un solo correo. Es control, y de paso le enseña qué hace esto.
   ============================================================ */
.qcard {
  border-radius: var(--r-lg); background: var(--surface);
  padding: 18px 20px 16px; margin-bottom: 12px;
}
.qcard .ph { display: flex; align-items: center; gap: 11px; }
.qcard .ph .nm { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.qcard .ph .rl { font-size: 12px; color: var(--fg-mute); }
.qcard .ph .spacer { flex: 1; }
.qcard .ph .est {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute);
  letter-spacing: 0.04em; text-transform: uppercase;
}

.qlist { margin-top: 14px; }
.qrow {
  display: grid; grid-template-columns: 17px minmax(0, 1fr) 27px;
  gap: 10px; align-items: start;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.qrow .n {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute);
  padding-top: 7px;
}
.qrow textarea {
  width: 100%; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--fg); resize: none; outline: none;
  font: inherit; font-size: 13.5px; line-height: 1.5;
  padding: 5px 8px; margin-left: -8px;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.qrow textarea:hover { background: var(--surface-2); }
.qrow textarea:focus { border-color: var(--fg); background: var(--bg); }
.qrow .rowx { opacity: 0; transition: opacity var(--dur-fast); }
.qrow:hover .rowx, .qrow:focus-within .rowx { opacity: 1; }

/* Una pregunta sembrada con lo que el propio admin escribió. */
.qrow.seed textarea { color: var(--fg); }
.qrow.seed .n { color: var(--fg); }

.qadd {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px dashed var(--line-2); background: transparent;
  color: var(--fg-mute); cursor: pointer; font: 500 12px var(--font-body);
}
.qadd:hover { border-color: var(--fg); color: var(--fg); }

.sendbar {
  position: sticky; bottom: 0; margin-top: 26px;
  padding: 18px 0 22px;
  background: linear-gradient(to bottom, transparent, var(--bg) 30%);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sendbar .hint { font-size: 12px; color: var(--fg-mute); }

/* stepper compacto sobre el chat, para que el primer recorrido se sienta uno solo */
.chatstep { padding-top: 30px; }
.chatstep .stepper { margin-bottom: 0; }

/* ---------- Preguntas propuestas, plegadas por persona ---------- */
.qppl { margin-top: 11px; }
.qp { border-top: 1px solid var(--line); }
.qp:first-child { border-top: none; }
.qph {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 0; border: none; background: transparent;
  color: var(--fg); cursor: pointer; text-align: left;
}
.qph .nm { font-size: 13.5px; font-weight: 500; }
.qph .rl { font-size: 12px; color: var(--fg-mute); }
.qph .spacer { flex: 1; }
.qph .cnt { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); letter-spacing: 0.03em; }
.qph .chev { color: var(--fg-mute); transition: transform var(--dur-fast) var(--ease-out); }
.qp.open .qph .chev { transform: rotate(180deg); }
.qbody { padding-bottom: 6px; }

.qrow {
  display: grid; grid-template-columns: 17px minmax(0, 1fr) 27px;
  gap: 9px; align-items: start; padding: 3px 0;
}
.qrow .n { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); padding-top: 8px; }
.qrow textarea {
  width: 100%; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--fg); resize: none; outline: none;
  font: inherit; font-size: 13px; line-height: 1.5; padding: 5px 8px; margin-left: -8px;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.qrow textarea:hover { background: var(--surface-2); }
.qrow textarea:focus { border-color: var(--fg); background: var(--bg); }
.qrow .rowx { opacity: 0; transition: opacity var(--dur-fast); }
.qrow:hover .rowx, .qrow:focus-within .rowx { opacity: 1; }

.qadd {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 8px 0 4px 8px; padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px dashed var(--line-2); background: transparent;
  color: var(--fg-mute); cursor: pointer; font: 500 11.5px var(--font-body);
}
.qadd:hover { border-color: var(--fg); color: var(--fg); }

.fineprint {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--fg-mute); line-height: 1.5;
}

/* ---------- Composer grabando ---------- */
.icobtn.on { background: var(--sev-critical-bg); color: var(--sev-critical); width: auto; padding: 0 12px; border-radius: var(--r-pill); }
.rectime { font-family: var(--font-mono); font-size: 11px; }

/* ============================================================
   La conversación como puesto de trabajo:
   iniciativas a la izquierda, el hilo en el centro, y a la derecha
   el flujo que se va dibujando con lo que se va entendiendo.
   ============================================================ */
.shell3 {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr) 400px;
  height: calc(100vh - var(--topbar-h));
}
.shell3 .side { height: auto; }
.shell3 .chat {
  overflow-y: auto; max-width: none;
  padding: 0 34px; min-height: 0;
}
.shell3 .chat .thread { max-width: 640px; }
.shell3 .chat .who { max-width: 640px; }
.shell3 .composer-wrap { max-width: 640px; }
@media (max-width: 1180px) {
  .shell3 { grid-template-columns: minmax(0, 1fr) 340px; }
  .shell3 .side { display: none; }
}
@media (max-width: 900px) {
  .shell3 { grid-template-columns: 1fr; height: auto; }
  .canvas { display: none; }
}

.canvas {
  border-left: 1px solid var(--line);
  background: var(--sidebar-bg);
  overflow-y: auto;
  padding: 20px 18px 30px;
}
.canvas .ch {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute);
  letter-spacing: 0.07em; text-transform: uppercase;
  margin-bottom: 14px;
}
.canvas .ch .n { opacity: 0.6; }
.canvas .blank {
  font-size: 12.5px; color: var(--fg-mute); line-height: 1.55;
  padding: 10px 0 4px;
}

/* ---------- El flujo ---------- */
.flow { position: relative; }
.flow svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.flow svg path { stroke: var(--line-2); stroke-width: 1.2; fill: none; }
.flow svg path.dash { stroke-dasharray: 3 3; }

.fnode {
  position: absolute; width: 168px;
  padding: 9px 11px 10px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line);
  animation: fade-up 380ms var(--ease-smooth);
}
.fnode .k {
  font-family: var(--font-mono); font-size: 8.5px; color: var(--fg-mute);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.fnode .t { font-size: 12px; font-weight: 600; line-height: 1.3; margin-top: 3px; letter-spacing: -0.01em; }
.fnode.sys { background: var(--surface-2); }
.fnode.pain { border-color: var(--sev-warn); background: var(--sev-warn-bg); }
.fnode.pain .k { color: var(--sev-warn); }
.fnode.gap {
  border-style: dashed; border-color: var(--line-2); background: transparent;
}
.fnode.gap .t { color: var(--fg-mute); font-weight: 500; }
.fnode.gap .who {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font-family: var(--font-mono); font-size: 8.5px; color: var(--fg);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0; background: none;
}
.fnode.gap .who .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sev-warn); }

/* ---------- Preguntas que se van acumulando ---------- */
.queue { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.qitem {
  padding: 11px 0; border-bottom: 1px solid var(--line);
  animation: fade-up 380ms var(--ease-smooth);
}
.qitem .to {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute);
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 5px;
}
.qitem .to .spacer { flex: 1; }
.qitem .q { font-size: 12.5px; line-height: 1.45; }
.qitem .x {
  border: none; background: transparent; color: var(--fg-mute);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px;
}
.qitem .x:hover { color: var(--fg); }
.queue .send { margin-top: 16px; width: 100%; justify-content: center; }
.queue .note { font-size: 11px; color: var(--fg-mute); line-height: 1.5; margin-top: 9px; text-align: center; }

/* aviso corto en el hilo cuando se agrega una pregunta */
.added {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--surface-2); font-size: 12.5px; color: var(--fg-mute);
  animation: fade-up 320ms var(--ease-smooth);
}
.added b { color: var(--fg); font-weight: 600; }

/* ---------- Rieles plegables ---------- */
.railbtn {
  width: 30px; height: 30px; border-radius: 8px;
  border: none; background: transparent; color: var(--fg-mute);
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.railbtn:hover { background: var(--surface-2); color: var(--fg); }
.railbtn.on { color: var(--fg); }

.shell3.nos { grid-template-columns: minmax(0, 1fr) 400px; }
.shell3.noc { grid-template-columns: 244px minmax(0, 1fr); }
.shell3.nos.noc { grid-template-columns: minmax(0, 1fr); }
.shell.nos { grid-template-columns: minmax(0, 1fr); }
.shell3.nos > .side, .shell.nos > .side { display: none; }
.shell3.noc > .canvas { display: none; }

/* ---------- Riel del flujo, ancho a gusto ---------- */
.shell3 { grid-template-columns: 244px minmax(0, 1fr) 5px var(--cw, 400px); }
.shell3.nos { grid-template-columns: minmax(0, 1fr) 5px var(--cw, 400px); }
.shell3.noc { grid-template-columns: 244px minmax(0, 1fr); }
.shell3.nos.noc { grid-template-columns: minmax(0, 1fr); }
.shell3.noc > .resizer { display: none; }

.resizer { position: relative; cursor: col-resize; background: transparent; }
.resizer::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 1px;
  background: var(--line); transition: background var(--dur-fast), width var(--dur-fast);
}
.resizer:hover::after, .resizer.drag::after { background: var(--fg); width: 2px; }
body.resizing { cursor: col-resize; user-select: none; }

.canvas .ch .spacer { flex: 1; }
.canvas .ch .wide {
  border: none; background: transparent; color: var(--fg-mute); cursor: pointer;
  padding: 2px 5px; border-radius: 6px; display: inline-grid; place-items: center;
}
.canvas .ch .wide:hover { background: var(--surface-2); color: var(--fg); }

/* ---------- Estado de la pregunta, sobre el propio nodo ---------- */
.fnode.gap .st {
  display: flex; align-items: center; gap: 6px; margin-top: 7px;
  font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-mute);
}
.fnode.gap .st .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sev-warn); }
.fnode.gap.sent .st .dot { background: var(--fg); }
.fnode.gap.sent { border-style: solid; border-color: var(--line); }
.fnode.gap.sent .st .dot { background: var(--sev-success); }
.fnode.gap .st .spacer { flex: 1; }
.fnode .info {
  border: none; background: transparent; color: var(--fg-mute); cursor: pointer;
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 9px; line-height: 1;
  outline: 1px solid var(--line-2); outline-offset: -1px;
}
.fnode .info:hover { color: var(--fg); outline-color: var(--fg); }

.pop {
  position: absolute; z-index: 40; width: 288px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 14px;
  box-shadow: var(--shadow-lift);
  animation: fade-up 200ms var(--ease-smooth);
}
.pop .k {
  font-family: var(--font-mono); font-size: 8.5px; color: var(--fg-mute);
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 8px;
}
.pop textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--fg); font: inherit; font-size: 12.5px;
  line-height: 1.45; padding: 8px 10px; resize: none; outline: none;
}
.pop textarea:focus { border-color: var(--fg); }
.pop .acts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }


/* ---------- Pregunta propuesta: tiene que pedir el visto bueno ---------- */
/* Si esto se ve como una nota más del hilo, nadie entiende que hay algo
   que aprobar. Es una tarjeta, con fondo propio y un botón sólido. */
.qprop {
  background: var(--surface); border-radius: var(--r-lg);
  border: 1px solid var(--sev-warn);
  padding: 16px 18px 15px; max-width: 34em;
  animation: fade-up 340ms var(--ease-smooth);
}
.qprop .hd { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.qprop .badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--sev-warn-bg); color: var(--fg);
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.qprop .badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sev-warn);
}
.qprop .for {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.qprop .q { font-size: 15px; line-height: 1.5; margin-top: 11px; }
.qprop .acts { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.qprop .fine {
  font-size: 11.5px; color: var(--fg-mute); line-height: 1.5;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
}
.qprop textarea {
  width: 100%; margin-top: 11px; border: 1px solid var(--fg); border-radius: 10px;
  background: var(--bg); color: var(--fg); font: inherit; font-size: 14.5px;
  line-height: 1.5; padding: 10px 12px; resize: none; outline: none;
}

/* aprobada: sigue visible, pero deja de pedir atención */
.qprop.ok { border-color: transparent; background: var(--surface-2); padding-bottom: 16px; }
.qprop.ok .q { font-size: 14px; color: var(--fg-mute); }
.qprop.ok .tick {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--sev-success); color: var(--bg);
  display: grid; place-items: center;
}

/* ---------- Árbol de la iniciativa ---------- */
.tree { margin-bottom: 4px; }
.ini { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ini .chev { color: var(--fg-mute); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); }
.ini.on .chev { transform: rotate(90deg); color: var(--fg); }
.ini .nm { flex: 1; min-width: 0; }
.ini .st { width: 100%; padding-left: 19px; }

.subs { padding: 2px 0 6px; }
.sub {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 12px 6px 31px; border-radius: 8px;
  border: none; background: transparent; color: var(--fg-mute);
  cursor: pointer; text-align: left; font: 400 12.5px var(--font-body);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.sub:hover { background: var(--surface); color: var(--fg); }
.sub.on { background: var(--surface-2); color: var(--fg); font-weight: 500; }
.sub .n { margin-left: auto; font-family: var(--font-mono); font-size: 10px; opacity: 0.7; }
.sub .livedot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sev-success);
  animation: pulse 1.6s var(--ease-out) infinite;
}

/* ---------- Vistas del panel ---------- */
.panelead { font-size: 13px; color: var(--fg-mute); line-height: 1.6; max-width: 58ch; margin-top: 16px; }

.plist { margin-top: 20px; }
.prow2 {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 12px;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.prow2:last-child { border-bottom: 1px solid var(--line); }
.prow2 .pi .nm { font-size: 14px; font-weight: 600; }
.prow2 .pi .rl { font-size: 12.5px; color: var(--fg-mute); margin-top: 2px; }
.prow2 .asked {
  grid-column: 2 / -1; font-size: 12.5px; color: var(--fg-mute);
  line-height: 1.5; margin-top: -4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prow2 .ago { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); }

.docs { margin-top: 20px; }
.doc {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 0; border-top: 1px solid var(--line);
}
.doc:last-child { border-bottom: 1px solid var(--line); }
.doc .ic {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--surface-2); display: grid; place-items: center; color: var(--fg-mute);
}
.doc .nm { font-size: 13.5px; font-weight: 500; }
.doc .mt { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); margin-top: 3px; letter-spacing: 0.02em; }
.doc .spacer { flex: 1; }

/* ---------- Hallazgos: resumen, hallazgos, pendientes, gente ---------- */
.stats { display: flex; gap: 44px; flex-wrap: wrap; margin-top: 22px; }
.stats .s { display: flex; flex-direction: column-reverse; gap: 5px; }
.stats .num {
  font-family: var(--font-display); font-weight: 800; font-size: 32px;
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.stats .lbl {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.secnote { font-size: 12.5px; color: var(--fg-mute); line-height: 1.5; margin: 2px 0 10px; max-width: 56ch; }
.sec .privacy { margin-top: 16px; }
.sec .said { border-left: 2px solid var(--line-2); padding-left: 15px; margin-top: 10px; }
.sec .said p { font-size: 14px; line-height: 1.6; color: var(--fg-mute); max-width: 62ch; }

/* ---------- Selector lista / tablero ---------- */
.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.seg button {
  border: none; background: transparent; color: var(--fg-mute);
  font: 500 12px var(--font-body); padding: 5px 13px; border-radius: var(--r-pill); cursor: pointer;
}
.seg button.on { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

/* ---------- Tablero de la iniciativa ---------- */
.board {
  display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 12px; margin-top: 22px; align-items: start;
}
@media (max-width: 1100px) { .board { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }

.col { min-width: 0; border-radius: var(--r-md); padding: 6px; transition: background var(--dur-fast); }
.col.over { background: var(--surface-2); outline: 1px dashed var(--fg); outline-offset: -1px; }
.colh {
  display: flex; align-items: baseline; gap: 8px; padding: 2px 5px 0;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.colh .nm { color: var(--fg); }
.colh .n { margin-left: auto; }
.colnote { padding: 6px 5px 11px; font-size: 11px; color: var(--fg-mute); line-height: 1.45; }
.cards { display: flex; flex-direction: column; gap: 8px; }
.colempty {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute);
  padding: 14px 5px; opacity: 0.6; letter-spacing: 0.04em;
}

.card2 {
  background: var(--surface); border-radius: var(--r-md);
  border: 1px solid var(--line); padding: 12px 13px 11px;
  cursor: grab; animation: fade-up 300ms var(--ease-smooth);
}
.card2:hover { border-color: var(--line-2); }
.card2.dragging { opacity: 0.4; }
.card2 .txt { font-size: 12.5px; line-height: 1.5; }
.card2 .meta { display: flex; align-items: center; gap: 7px; margin-top: 11px; }
.card2 .meta .nm { font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute); letter-spacing: 0.04em; text-transform: uppercase; }
.card2 .meta .spacer { flex: 1; }
.card2 .meta .tag {
  font-family: var(--font-mono); font-size: 8.5px; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--sev-warn-bg); color: var(--sev-warn); letter-spacing: 0.05em;
}
.card2 .cacts { display: flex; gap: 2px; margin-top: 7px; opacity: 0; transition: opacity var(--dur-fast); }
.card2:hover .cacts, .card2:focus-within .cacts { opacity: 1; }
.card2.prop { border-color: var(--sev-warn); }
.card2.done { background: var(--surface-2); cursor: default; }
.card2.done .txt { color: var(--fg-mute); }

.addcard {
  width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: var(--r-md);
  border: 1px dashed var(--line-2); background: transparent; color: var(--fg-mute);
  cursor: pointer; font: 500 12px var(--font-body); text-align: left;
}
.addcard:hover { border-color: var(--fg); color: var(--fg); }

.newcard { margin-top: 8px; }
.newcard textarea, .newcard select {
  width: 100%; border: 1px solid var(--fg); border-radius: 10px;
  background: var(--bg); color: var(--fg); font: inherit; font-size: 12.5px;
  padding: 9px 11px; outline: none; resize: none;
}
.newcard select { margin-top: 6px; padding: 8px 11px; }
.newcard .acts { display: flex; gap: 6px; margin-top: 8px; }

/* ---------- El tablero usa todo el ancho ---------- */
.pane.wide { max-width: none; padding-right: 42px; }

.card2 .ctype {
  font-family: var(--font-mono); font-size: 8.5px; color: var(--fg-mute);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px;
}
.card2.sel { border-color: var(--fg); }
.card2 .labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.lab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--fg-mute);
  font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.lab.hot { background: var(--sev-warn-bg); color: var(--sev-warn); }
.lab .x { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; }
.lab.add { border: 1px dashed var(--line-2); background: transparent; cursor: pointer; }
.lab.add:hover { border-color: var(--fg); color: var(--fg); }

.labmenu {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
  padding: 8px; border-radius: var(--r-sm); background: var(--surface-2);
}
.labmenu button {
  border: none; background: var(--bg); color: var(--fg-mute); cursor: pointer;
  padding: 4px 9px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.04em;
}
.labmenu button:hover { color: var(--fg); }

.newcard .ntype, .newcard .nwho { margin-bottom: 6px; }

/* ---------- Cajón de detalle ---------- */
.drawer {
  position: fixed; top: var(--topbar-h); right: 0; bottom: 0; z-index: 800;
  width: 440px; max-width: 92vw;
  background: var(--bg); border-left: 1px solid var(--line-2);
  box-shadow: -18px 0 48px rgba(0,0,0,0.10);
  padding: 20px 24px 30px; overflow-y: auto;
  transform: translateX(100%); transition: transform 280ms var(--ease-smooth);
}
.drawer.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }

.drawer .dh { display: flex; align-items: center; gap: 9px; }
.drawer .dh .ctype {
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.drawer .dh .spacer { flex: 1; }
.drawer h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  line-height: 1.3; letter-spacing: -0.02em; margin: 16px 0 20px;
  outline: none; border-bottom: 1px solid transparent;
}
.drawer h2:focus { border-bottom-color: var(--fg); }

.dgrid {
  display: grid; grid-template-columns: 94px minmax(0, 1fr);
  gap: 12px 14px; align-items: center;
  padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.dgrid .k, .dsec .k {
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.dgrid select, .newcard select {
  width: 100%; padding: 8px 11px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--fg); font: inherit; font-size: 12.5px; outline: none;
}
.dgrid select:focus { border-color: var(--fg); }
.dlabels { display: flex; flex-wrap: wrap; gap: 5px; }

.dsec { padding: 18px 0; border-bottom: 1px solid var(--line); }
.dsec .k { margin-bottom: 9px; }
.ddetail {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--fg); font: inherit; font-size: 13px;
  line-height: 1.55; padding: 10px 12px; resize: none; outline: none;
}
.ddetail:focus { border-color: var(--fg); background: var(--bg); }
.dlink { font-size: 12.5px; color: var(--fg-mute); line-height: 1.5; }

.dlog .lrow {
  display: flex; align-items: center; gap: 9px; padding: 5px 0;
  font-size: 12.5px; color: var(--fg-mute);
}
.dlog .lrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); flex-shrink: 0; }
.dlog .lrow .when { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; }

.dfoot { display: flex; gap: 7px; flex-wrap: wrap; padding-top: 20px; }

/* ---------- Ida y vuelta entre el hilo y el tablero ---------- */
.tolink {
  border: none; background: transparent; color: var(--fg); cursor: pointer;
  font: 500 11.5px var(--font-body); padding: 0; margin-left: 6px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2);
}
.tolink:hover { text-decoration-color: var(--fg); }

/* al llegar desde el tablero, el mensaje se señala solo */
.flash { animation: flashin 1.4s var(--ease-out); }
@keyframes flashin {
  0% { box-shadow: 0 0 0 3px var(--sev-warn); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }

.dperson { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dperson .nm { font-size: 13px; font-weight: 600; }
.dperson .rl { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute); margin-top: 2px; letter-spacing: 0.04em; text-transform: uppercase; }
.dlink q { font-style: normal; color: var(--fg); }
.dsec .btn { margin-top: 11px; }

/* ---------- "Qué falta": la acción pendiente, no la topología ---------- */
/* Lo pendiente cabe en una línea: qué falta y el botón que lo resuelve. */
.dsec.pending {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface-2); border-radius: var(--r-md);
  padding: 11px 13px; border-bottom: none; margin-top: 4px;
}
.dsec.pending .spacer { flex: 1; }
.dsec.pending .btn { margin-top: 0; }
/* el bloque ya es --surface-2, así que el botón secundario se perdía en él */
.dsec.pending .btn.secondary { background: var(--surface); }
.dsec.pending .btn.secondary:hover { background: var(--bg); }
.need { font-size: 12.5px; line-height: 1.5; color: var(--fg-mute); min-width: 12em; }
.need b { color: var(--fg); font-weight: 600; }

/* ---------- Lo que contestó, dentro del cajón ---------- */
.dsum { font-size: 14px; line-height: 1.6; margin-top: 14px; }

/* Selector detalle / respuesta. Los dos textos pueden ser largos,
   así que ocupan el mismo sitio y se turnan. */
.toggle2 {
  display: inline-flex; background: var(--fg); border-radius: var(--r-pill);
  padding: 3px; gap: 2px;
}
.toggle2 button {
  border: none; background: transparent; color: var(--bg); opacity: 0.62;
  font: 500 12.5px var(--font-body); padding: 7px 17px;
  border-radius: var(--r-pill); cursor: pointer;
  transition: opacity var(--dur-fast), background var(--dur-fast);
}
.toggle2 button:hover:not(:disabled) { opacity: 0.9; }
.toggle2 button.on { background: var(--bg); color: var(--fg); opacity: 1; }
.toggle2 button:disabled { opacity: 0.32; cursor: not-allowed; }
.toggle2 + #dtab { margin-top: 14px; }

/* ---------- Avisos de sistema en el hilo ---------- */
.sys {
  align-self: center; max-width: 88%; text-align: center;
  padding: 7px 15px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--fg-mute);
  font-size: 11.5px; line-height: 1.45;
  animation: fade-up 320ms var(--ease-smooth);
}
.sys b { color: var(--fg); font-weight: 600; }

/* ---------- Modal de "falta información" ---------- */
.modal-scrim { background: rgba(12,12,12,0.42); backdrop-filter: blur(3px); }
.modal { max-width: 460px; min-width: 0; width: 92vw; }
.modal h3 { font-size: 19px; letter-spacing: -0.02em; }
.modal .body { color: var(--fg-mute); font-size: 13.5px; line-height: 1.6; }
.modal .body p { margin-bottom: 14px; }
.misslist { display: flex; flex-direction: column; gap: 2px; }
.miss {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.miss .nm { font-size: 13.5px; font-weight: 500; color: var(--fg); }
.miss .rl { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute); margin-top: 3px; letter-spacing: 0.04em; text-transform: uppercase; }
.miss .avatar.pending { font-family: var(--font-mono); }

/* ---------- Pestañas del riel ---------- */
.ctabs { display: flex; align-items: center; gap: 3px; margin-bottom: 16px; }
.ctabs .spacer { flex: 1; }
.ctabs button[data-tab] {
  border: none; background: transparent; color: var(--fg-mute); cursor: pointer;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.07em; text-transform: uppercase;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.ctabs button[data-tab]:hover:not(:disabled) { background: var(--surface); color: var(--fg); }
.ctabs button[data-tab].on { background: var(--fg); color: var(--bg); }
.ctabs button[data-tab]:disabled { opacity: 0.35; cursor: not-allowed; }
.cnote { font-size: 11.5px; color: var(--fg-mute); line-height: 1.5; margin-bottom: 14px; }

/* nodo que todavía no existe: hay que construirlo */
.fnode.new { border-color: var(--fg); border-style: solid; }
.fnode.new .k { color: var(--fg); }

/* ---------- Vista de la propuesta ---------- */
.pdf { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.pdf .page { padding: 22px 20px 26px; background: var(--surface); }
.pdf .ph1 { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -0.02em; }
.pdf .ph2 { font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 5px; }
.pdf .ph3 { font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute); letter-spacing: 0.06em; text-transform: uppercase; margin: 18px 0 9px; }
.pdf .lines { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.pdf .lines span { height: 5px; border-radius: 3px; background: var(--surface-3); display: block; }
.pdfmeta {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute);
  letter-spacing: 0.05em; text-transform: uppercase; background: var(--sidebar-bg);
}
.pdfmeta .spacer { flex: 1; }
.pdfacts { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- Agendar con Kairos ---------- */
.callbar {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  max-width: 640px; margin: 0 auto 10px;
  padding: 11px 15px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-2);
  font-size: 12.5px; line-height: 1.5; color: var(--fg-mute);
}
.callbar svg { flex-shrink: 0; opacity: 0.6; }
.callbar .spacer { flex: 1; }
.callbar b { color: var(--fg); font-weight: 600; }
.callbar.done { background: var(--sev-success-bg); border-color: transparent; }
.callbar.done svg { color: var(--sev-success); opacity: 1; }

.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.slot {
  padding: 11px 13px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: transparent;
  color: var(--fg); cursor: pointer; font: 500 13px var(--font-body); text-align: left;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.slot:hover { border-color: var(--fg); background: var(--surface-2); }

.callside {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--fg-mute);
}
.callside b { color: var(--fg); font-weight: 600; }

/* La acción siempre a la vista: en pantallas largas no era obvio que
   había que bajar para continuar. */
.onbnav {
  position: sticky; bottom: 0; z-index: 5;
  margin-top: 30px; padding: 16px 0 20px;
  background: linear-gradient(to bottom, transparent, var(--bg) 45%);
}

/* ============================================================
   Sesión del invitado
   ============================================================ */
.guestwho { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); letter-spacing: 0.05em; text-transform: uppercase; }

.gprog { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.gprog .track { flex: 1; height: 3px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.gprog .track > i { display: block; height: 100%; background: var(--fg); border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease-smooth); }
.gprog .n { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); }

.glist { display: flex; flex-direction: column; gap: 2px; }
.gq {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 10px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.4; color: var(--fg-mute);
}
.gq .tick {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line-2); display: grid; place-items: center;
  font-size: 9px; color: transparent; margin-top: 1px;
}
.gq.done { color: var(--fg-mute); }
.gq.done .tick { background: var(--sev-success); border-color: transparent; color: var(--bg); }
.gq.cur { background: var(--surface); color: var(--fg); font-weight: 500; }
.gq.cur .tick { border-color: var(--fg); }
.gnote {
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--fg-mute); line-height: 1.55;
}

/* el pacto, antes de preguntar nada */
.gpact { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.gpact > div { font-size: 13px; line-height: 1.55; color: var(--fg-mute); }
.gpact b { color: var(--fg); font-weight: 600; }

.quoted {
  margin-top: 9px; padding-left: 14px; border-left: 2px solid var(--line-2);
  font-size: 14px; line-height: 1.6; color: var(--fg-mute);
}

.gdrop {
  display: flex; align-items: center; gap: 10px; margin-top: 9px;
  padding: 16px; border-radius: var(--r-md);
  border: 1px dashed var(--line-2); color: var(--fg-mute); font-size: 12.5px;
}

.outlist { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.outlist > div {
  font-size: 13.5px; line-height: 1.55; padding-left: 14px;
  border-left: 2px solid var(--line-2);
}

/* ---------- Barra lateral del invitado ---------- */
.gside { padding: 8px 12px 0; }
.gside .k {
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute);
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 8px;
}
.gside .ttl {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  line-height: 1.3; letter-spacing: -0.02em;
}
.gside .meta { font-size: 11.5px; color: var(--fg-mute); margin-top: 6px; line-height: 1.5; }
.gside .why { font-size: 12px; color: var(--fg-mute); line-height: 1.55; }
.gside .why b { color: var(--fg); font-weight: 600; }
.gside .areas { display: flex; flex-wrap: wrap; gap: 4px; }

/* ============================================================
   Vista Kairos
   ============================================================ */
.hq { max-width: 1120px; padding: 30px 36px 80px; }
.hq .dval { font-size: 13px; }

.need2 {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 16px; margin-bottom: 8px;
  border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line); cursor: pointer;
  transition: border-color var(--dur-fast);
}
.need2:hover { border-color: var(--fg); }
.need2 .dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--fg-mute); }
.need2.hot .dot { background: var(--sev-warn); }
.need2.cold .dot { background: var(--sev-critical); }
.need2 .nm { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.need2 .txt { font-size: 13px; color: var(--fg-mute); margin-top: 3px; line-height: 1.5; }
.need2 .spacer { flex: 1; }
.need2 .ago { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }

.ctable { margin-top: 6px; }
.crow {
  display: grid; grid-template-columns: minmax(0,2.2fr) 90px 110px 130px minmax(0,1fr);
  align-items: center; gap: 14px;
  padding: 13px 6px; border-top: 1px solid var(--line);
  cursor: pointer; border-radius: 8px;
  transition: background var(--dur-fast);
}
.crow:not(.chead):hover { background: var(--surface); }
.crow:last-child { border-bottom: 1px solid var(--line); }
.crow.chead {
  border-top: none; cursor: default;
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.crow.chead:hover { background: transparent; }
.crow .nm { font-size: 13.5px; font-weight: 500; display: block; }
.crow .sub { font-size: 11.5px; color: var(--fg-mute); display: block; margin-top: 2px; }
.crow .mono { font-family: var(--font-mono); font-size: 11px; }
.crow .dim { color: var(--fg-mute); }
@media (max-width: 900px) { .crow { grid-template-columns: 1fr auto; } .crow > :nth-child(2), .crow > :nth-child(3), .crow > :nth-child(5) { display: none; } }

/* la cabecera de la vista Kairos vive fuera de .pane, así que necesita
   sus propias medidas: si no, hereda el h1 de portada */
.hq .head { display: flex; align-items: flex-start; gap: 16px; }
.hq .head .spacer { flex: 1; }
.hq h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 27px; line-height: 1.15; letter-spacing: -0.025em; margin: 10px 0 0;
}
.hq .sec { margin-top: 34px; }
.hq .sec .h {
  display: flex; align-items: baseline; gap: 9px; padding-bottom: 10px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.hq .sec .h .n { opacity: 0.6; }

/* ============================================================
   Alta de un cliente nuevo
   ============================================================ */
.siteinput {
  display: flex; align-items: center; gap: 0; margin-top: 26px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); padding: 5px 5px 5px 18px;
  transition: border-color var(--dur-fast);
  max-width: 560px;
}
.siteinput:focus-within { border-color: var(--fg); }
.siteinput .pre { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-mute); }
.siteinput input {
  flex: 1; border: none; background: transparent; outline: none; color: var(--fg);
  font-family: var(--font-mono); font-size: 13.5px; padding: 10px 8px;
}
.tryit { font-size: 12px; color: var(--fg-mute); margin-top: 11px; }
.tryit .tolink { font-size: 12px; }

.foundcard {
  margin-top: 24px; padding: 20px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  animation: fade-up 340ms var(--ease-smooth);
}
.foundcard .fh { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.foundcard .fnm {
  border: none; background: transparent; outline: none; color: var(--fg); width: 100%;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.foundcard .fnm:focus { border-bottom-color: var(--fg); }
.foundcard .src { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute); letter-spacing: 0.04em; margin-top: 5px; }

.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fgrid.two { grid-template-columns: repeat(2, 1fr); margin-top: 26px; }
@media (max-width: 760px) { .fgrid, .fgrid.two { grid-template-columns: 1fr; } }
.fgrid label, .fabout {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.fabout { margin-top: 14px; }
.fgrid input, .fabout input, .fabout textarea {
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  color: var(--fg); font: 400 13px var(--font-body); letter-spacing: 0; text-transform: none;
  padding: 10px 12px; outline: none; resize: none;
}
.fgrid input:focus, .fabout input:focus, .fabout textarea:focus { border-color: var(--fg); }
.ftech { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ftech .k { font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 9px; }

.foundcard.loading .skel { border-radius: 6px; }
.foundcard .skel.l1 { height: 15px; width: 45%; margin-bottom: 8px; }
.foundcard .skel.l2 { height: 10px; width: 28%; }
.foundcard .skel.l3 { height: 10px; width: 100%; margin-top: 10px; }
.foundcard .skel.l4 { height: 10px; width: 62%; margin-top: 10px; }
.foundcard .mono2.skel { border-radius: 13px; }
.readnote {
  display: flex; align-items: center; gap: 9px; margin-top: 18px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute);
  letter-spacing: 0.05em; text-transform: uppercase;
}

/* el correo, como se va a ver */
.mail {
  margin-top: 24px; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
}
.mail .mh { padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--sidebar-bg); }
.mail .mh .row { display: flex; align-items: center; gap: 12px; padding: 4px 0; font-size: 12.5px; }
.mail .mh .k {
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute);
  letter-spacing: 0.07em; text-transform: uppercase; width: 52px; flex-shrink: 0;
}
.mail .mh input {
  flex: 1; border: none; background: transparent; outline: none; color: var(--fg);
  font: 600 13px var(--font-body); border-bottom: 1px solid transparent; padding: 2px 0;
}
.mail .mh input:focus { border-bottom-color: var(--fg); }
.mail .mb { padding: 18px 20px; }
.mail .mb textarea {
  width: 100%; border: none; background: transparent; outline: none; resize: none;
  color: var(--fg); font: 400 13.5px/1.65 var(--font-body);
}
.mail .mcta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px; border-top: 1px solid var(--line);
}
.mail .fake {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--fg); color: var(--bg); font: 500 13px var(--font-body);
}
.mail .fake img { width: 15px; height: 15px; }
.mail .dim { font-size: 11.5px; color: var(--fg-mute); }

.sent { text-align: center; padding: 40px 0 0; }
.sent .tickbig {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 22px;
  background: var(--sev-success); color: var(--bg); display: grid; place-items: center;
}
.sent h1 { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; }
.sent .lead { margin: 12px auto 0; max-width: 46ch; }
.sent .inv { max-width: 380px; margin: 0 auto; }
.sent .onbnav { justify-content: center; }

/* ============================================================
   Consola Kairos: navegación a la izquierda, una tabla por sección
   ============================================================ */
.hqshell { display: grid; grid-template-columns: 244px minmax(0, 1fr); height: calc(100vh - var(--topbar-h)); }
@media (max-width: 900px) { .hqshell { grid-template-columns: 1fr; } .hqshell .side { display: none; } }
.hqmain { overflow-y: auto; padding: 30px 34px 70px; }

.hqtop { margin-bottom: 24px; }
.hqtop h1 { font-family: var(--font-display); font-weight: 800; font-size: 27px; letter-spacing: -0.03em; line-height: 1.15; }
.hqtop .hsub { font-size: 13px; color: var(--fg-mute); margin-top: 7px; max-width: 62ch; line-height: 1.55; }

/* barra de herramientas */
.tbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--fg-mute); min-width: 230px;
}
.search:focus-within { border-color: var(--fg); }
.search input { border: none; background: transparent; outline: none; color: var(--fg); font: 400 12.5px var(--font-body); width: 100%; }

/* tabla */
.tbl { border-top: 1px solid var(--line); }
.tbl .tr {
  display: grid; align-items: center; gap: 16px;
  padding: 12px 10px; border-bottom: 1px solid var(--line);
}
.tbl .tr.th {
  padding: 9px 10px; border-bottom: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute);
  letter-spacing: 0.08em; text-transform: uppercase;
  position: sticky; top: 0; background: var(--bg); z-index: 2;
}
.tbl .th .sortable { cursor: pointer; user-select: none; }
.tbl .th .sortable:hover { color: var(--fg); }
.tbl .th .ar { font-style: normal; margin-left: 5px; }
.tbl .tr.click { cursor: pointer; transition: background var(--dur-fast); }
.tbl .tr.click:hover { background: var(--surface); }
.tbl .tr > span { min-width: 0; font-size: 13px; }
.tbl .num { font-family: var(--font-mono); font-size: 11px; }
.tbl .dim { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); }
.tbl .nm { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl .sub2 { display: block; font-size: 11.5px; color: var(--fg-mute); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tempty { padding: 34px 10px; font-size: 13px; color: var(--fg-mute); }

.cocell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cocell .cwho { min-width: 0; }
.cocell .cwho .nm { font-size: 13.5px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cocell .cwho .rl { font-size: 11px; color: var(--fg-mute); display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono2 {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--surface-2); color: var(--fg);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
}
.mono2.sm { width: 30px; height: 30px; border-radius: 9px; font-size: 10px; }
.mono2.big { width: 46px; height: 46px; border-radius: 13px; font-size: 14px; }

.partc { display: flex; align-items: center; gap: 9px; }
.partc .track { flex: 1; height: 3px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.partc .track > i { display: block; height: 100%; background: var(--fg); border-radius: var(--r-pill); }
.partc .fr { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); }
.fr.dim { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); opacity: 0.7; }

/* tarjetas de resumen */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { display: flex; flex-direction: column; padding: 16px 17px 15px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.tile .num { font-family: var(--font-display); font-weight: 800; font-size: 29px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tile .num i { font-style: normal; font-size: 16px; }
.tile .lbl { font-size: 12.5px; font-weight: 600; margin-top: 9px; }
.tile .tsub { font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 4px; }

.hsec { margin-top: 30px; }
.hh { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }

/* lo que te espera */
.needrow {
  display: grid; grid-template-columns: 36px minmax(0, 1.05fr) minmax(0, 1.6fr) auto 16px;
  align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 7px; cursor: pointer; position: relative; overflow: hidden;
  transition: border-color var(--dur-fast);
}
.needrow:hover { border-color: var(--fg); }
.needrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sev-warn); }
.needrow.cold::before { background: var(--sev-critical); }
.needrow .cwho { min-width: 0; }
.needrow .cwho .nm { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.needrow .cwho .rl { font-size: 11.5px; color: var(--fg-mute); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.needrow .txt { font-size: 13px; line-height: 1.45; color: var(--fg-mute); }
.needrow .ago { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.needrow .chev { color: var(--fg-mute); opacity: 0; transition: opacity var(--dur-fast); }
.needrow:hover .chev { opacity: 1; }
@media (max-width: 1000px) {
  .needrow { grid-template-columns: 36px minmax(0,1fr) 16px; }
  .needrow .txt { grid-column: 2 / -1; }
  .needrow .ago { display: none; }
}

/* estado de la invitación */
.inv { display: flex; align-items: center; gap: 14px; }
.ivstep { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute); letter-spacing: 0.05em; text-transform: uppercase; }
.ivstep .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-3); flex-shrink: 0; }
.ivstep.on { color: var(--fg); }
.ivstep.on .dot { background: var(--sev-success); }
.inv.big { margin: 22px 0 6px; justify-content: center; }

/* cabecera del cajón de cliente */
.cid { display: flex; align-items: center; gap: 13px; margin: 16px 0 14px; }
.cid h2.plain { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; margin: 0; }
.cid .site { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-mute); margin-top: 4px; }
.cabout { font-size: 13.5px; line-height: 1.6; color: var(--fg-mute); margin-bottom: 12px; }
.chips2 { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.dval .dim { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-mute); margin-top: 3px; }
.track.mini { display: block; height: 3px; border-radius: var(--r-pill); background: var(--surface-3); margin-top: 7px; overflow: hidden; }
.track.mini > i { display: block; height: 100%; background: var(--fg); }
.dsec .acts { display: flex; gap: 7px; margin-top: 13px; flex-wrap: wrap; }

/* el aside de la consola usa las clases de SimOS, que están scoped a .sidebar */
.side .nav-group { margin-top: 14px; }
.side .nav-group .label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--fg-mute); text-transform: uppercase; padding: 0 12px 6px;
}
.hqshell .side { padding: 14px 10px 16px; display: flex; flex-direction: column; }
.hqshell .side .foot { margin-top: auto; }

/* ---------- Ficha del cliente ---------- */
.hqtop .tolink { display: inline-block; margin-bottom: 12px; font-size: 12px; }
.chead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.chead .ci { min-width: 0; }
.chead .cn { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.chead .cm { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-mute); margin-top: 5px; letter-spacing: 0.02em; }
.chead .spacer { flex: 1; }

.ctabs2 { display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.ctabs2 button {
  border: none; background: transparent; color: var(--fg-mute); cursor: pointer;
  padding: 9px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font: 500 13px var(--font-body);
}
.ctabs2 button:hover:not(:disabled) { color: var(--fg); }
.ctabs2 button.on { color: var(--fg); border-bottom-color: var(--fg); }
.ctabs2 button:disabled { opacity: 0.35; cursor: not-allowed; }

.cgrid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 34px; align-items: start; }
@media (max-width: 1100px) { .cgrid { grid-template-columns: 1fr; gap: 24px; } }
.cside { display: flex; flex-direction: column; gap: 2px; }
.kv { padding: 12px 0; border-top: 1px solid var(--line); }
.kv:last-child { border-bottom: 1px solid var(--line); }
.kv .k { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--fg-mute); letter-spacing: 0.07em; text-transform: uppercase; }
.kv .v { display: block; font-size: 13.5px; margin-top: 6px; }
.kv .v i { display: block; font-style: normal; font-size: 11.5px; color: var(--fg-mute); margin-top: 3px; }
.kv .inv { flex-wrap: wrap; gap: 10px; }

.cnote2 { font-size: 12.5px; color: var(--fg-mute); line-height: 1.55; max-width: 62ch; margin-bottom: 14px; }
.flowbox { padding: 6px 0 20px; }

.bullets { display: flex; flex-direction: column; gap: 9px; }
.bullets > div { font-size: 13.5px; line-height: 1.55; padding-left: 15px; border-left: 2px solid var(--line-2); }

.assume { display: flex; flex-direction: column; gap: 8px; }
.asrow {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; border-radius: var(--r-md);
  background: var(--sev-warn-bg); border: 1px solid transparent;
}
.asrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sev-warn); margin-top: 6px; flex-shrink: 0; }
.asrow .at { font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.asrow .aw { font-size: 12.5px; color: var(--fg-mute); margin-top: 4px; line-height: 1.5; }
.asrow .spacer { flex: 1; }
.warnnum { color: var(--sev-warn); font-weight: 700; }

.tline { display: flex; flex-direction: column; }
.ev { display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.ev .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); margin-top: 6px; flex-shrink: 0; }
.ev .et { font-size: 13.5px; font-weight: 500; }
.ev .ed { font-size: 12.5px; color: var(--fg-mute); margin-top: 3px; line-height: 1.5; }
.ev .ew { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-mute); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }

/* ---------- Filtros y paginación ---------- */
.fsel {
  appearance: none; -webkit-appearance: none;
  padding: 8px 30px 8px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--fg); font: 400 12.5px var(--font-body); cursor: pointer; outline: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
.fsel:hover { border-color: var(--line-2); }
.fsel:focus { border-color: var(--fg); }
.tbar .spacer { flex: 1; }
.tbar .per { color: var(--fg-mute); }

.pgr {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 14px 10px 0;
}
.pgr .cnt { font-family: var(--font-mono); font-size: 10px; color: var(--fg-mute); letter-spacing: 0.04em; }
.pgr .spacer { flex: 1; }
.pgr .gap { color: var(--fg-mute); padding: 0 3px; font-size: 12px; }
.pg {
  min-width: 30px; height: 30px; padding: 0 9px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--fg-mute);
  cursor: pointer; font: 500 12.5px var(--font-body);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.pg:hover:not(:disabled) { background: var(--surface); color: var(--fg); }
.pg.on { background: var(--fg); color: var(--bg); }
.pg:disabled { opacity: 0.3; cursor: default; }