:root {
  /* === ai_ops "control-plane" design system (applied verbatim) =============
     Dark, dense, technical. Color is rationed: orange = identity, blue = the
     one primary action, green/amber/red = real signal only. Greys do all the
     structural work. Legacy token names (--surface/--raised/--accent/--ok/…)
     are aliased to the DS values at the bottom so every pre-existing class and
     view inherits the new look with zero markup churn. */

  /* --- base surfaces (darkest → lightest) --- */
  --bg:            #0B0B0D;
  --panel:         #16161A;
  --panel-2:       #1C1C21;
  --panel-3:       #232329;

  /* --- borders / hairlines --- */
  --border:        #26262B;
  --border-strong: #33333A;

  /* --- text --- */
  --text:          #F4F4F6;
  --muted:         #8B8B93;
  --muted-2:       #7F7F88;  /* AA-viable on panel surfaces at the 9-11px sizes we use it */

  /* --- brand: orange = identity --- */
  --orange:        #FF5A1F;
  --orange-hover:  #FF6E3B;
  --orange-soft:   rgba(255, 90, 31, 0.14);
  --orange-border: rgba(255, 90, 31, 0.40);

  /* --- primary action: blue = Aprobar / Launch --- */
  --blue:          #2D6CFF;
  --blue-hover:    #4880FF;
  --blue-soft:     rgba(45, 108, 255, 0.14);
  --blue-border:   rgba(45, 108, 255, 0.40);
  --blue-t:        rgba(45, 108, 255, 0.22);  /* row-updated flash start (C12) */

  /* --- semantic signal --- */
  --green:         #22C55E; --green-soft: rgba(34, 197, 94, 0.14);  --green-border: rgba(34, 197, 94, 0.40);
  --amber:         #F59E0B; --amber-soft: rgba(245, 158, 11, 0.14); --amber-border: rgba(245, 158, 11, 0.40);
  --red:           #EF4444; --red-soft:   rgba(239, 68, 68, 0.14);  --red-border:   rgba(239, 68, 68, 0.40);
  --violet:        #8B5CF6; --violet-soft: rgba(139, 92, 246, 0.16); --violet-border: rgba(139, 92, 246, 0.42);

  /* --- semantic aliases (reference these in components) --- */
  --surface-app: var(--bg); --surface-card: var(--panel);
  --surface-raised: var(--panel-2); --surface-hover: var(--panel-3);
  --accent-brand: var(--orange); --accent-action: var(--blue);
  --focus-ring: var(--blue);

  /* --- status → tone (drives every status pill) --- */
  --tone-info:     var(--blue);  --tone-info-soft:     var(--blue-soft);  --tone-info-border:     var(--blue-border);
  --tone-progress: var(--amber); --tone-progress-soft: var(--amber-soft); --tone-progress-border: var(--amber-border);
  --tone-ok:       var(--green); --tone-ok-soft:       var(--green-soft); --tone-ok-border:       var(--green-border);
  --tone-alert:    var(--red);   --tone-alert-soft:    var(--red-soft);   --tone-alert-border:    var(--red-border);
  --tone-neutral:  var(--muted); --tone-neutral-soft:  rgba(139,139,147,0.14); --tone-neutral-border: rgba(139,139,147,0.34);
  --tone-accent:   var(--violet); --tone-accent-soft:  var(--violet-soft); --tone-accent-border:  var(--violet-border);

  /* --- typography --- */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px;
  --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.55;
  --tracking-label: 0.06em; --tracking-tight: -0.01em;

  /* --- spacing (4px grid) --- */
  --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px;
  --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px; --space-9: 32px;
  --space-10: 40px; --space-12: 56px;

  /* --- radii (small, technical) --- */
  --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px;
  --border-width: 1px;

  /* --- shadows (restrained) --- */
  --shadow-none: none;
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.45);
  --shadow-pop: 0 8px 28px rgba(0,0,0,0.55);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);

  /* --- motion --- */
  --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 90ms; --dur-base: 140ms;

  /* --- layout --- */
  --sidebar-w: 228px; --content-max: 980px;

  /* === legacy aliases — old names → DS values (zero-churn inheritance) ===== */
  --surface: var(--panel); --raised: var(--panel-2); --overlay: var(--panel-3);
  --text-2: var(--muted); --text-3: var(--muted-2);
  --accent: var(--blue); --accent-strong: var(--blue-hover);
  --accent-bg: var(--blue-soft); --accent-fill: var(--blue); --accent-ink: #fff;
  --ok-bg: var(--green-soft); --warn: var(--amber); --warn-bg: var(--amber-soft);
  --danger: var(--red); --danger-bg: var(--red-soft); --danger-border: var(--red-border);
  --ok: var(--green);
  --info: var(--blue); --info-bg: var(--blue-soft);
  --teal: var(--orange); --teal-bg: var(--orange-soft);
  --purple: var(--muted); --purple-bg: var(--tone-neutral-soft);
  --neutral: var(--muted); --neutral-2: var(--muted-2);
  --sp-0: var(--space-1); --sp-1: var(--space-2); --sp-2: var(--space-4); --sp-3: var(--space-5);
  --sp-4: var(--space-6); --sp-5: var(--space-7); --sp-6: var(--space-8); --sp-8: var(--space-9); --sp-12: var(--space-12);
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13.5px; --fs-lg: 15px; --fs-xl: 20px;
  --font-ui: var(--font-sans);
  --radius: var(--radius-md);  /* --radius-sm/-xs/-lg already defined above with DS values */
  --shadow: var(--shadow-md); --shadow-lift: var(--shadow-pop);
}
@keyframes aiops-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-color: var(--border-strong) transparent; }
body { background: var(--bg); color: var(--text);
       font: 13.5px/1.55 var(--font-ui);
       font-feature-settings: "tnum" 1, "cv05" 1; -webkit-font-smoothing: antialiased;
       text-rendering: optimizeLegibility; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--text); }
.content-link { color: var(--text); }
.content-link:hover { text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--accent-bg); }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* utilities */
.cluster { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.chk { display: flex; gap: 9px; align-items: flex-start; font-weight: 400; cursor: pointer;
  text-transform: none; letter-spacing: normal; margin: 0; }
.chk input { margin-top: 3px; flex: none; width: auto; }
.chk span { font-size: 12.5px; color: var(--text-2); line-height: 1.5;
  text-transform: none; letter-spacing: normal; }
.chk b { color: var(--text); font-weight: 600; }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }
.cap { max-width: 900px; }
.w-auto { width: auto; }
.t-danger { color: var(--danger); }
.inline-form { display: inline; }
.list { margin-left: 18px; font-size: var(--fs-md); color: var(--text-2); }
.list-warn { color: var(--warn); }
.thumb { max-height: 180px; max-width: 280px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.thumb-sm { max-height: 160px; max-width: 260px; margin: var(--sp-2) var(--sp-2) 0 0; }
.tone-active { color: #34d399; } .tone-idle { color: #fbbf24; } .tone-dead { color: #f87171; } .tone-gone { color: var(--neutral); }
.dot.tone-active { background: #34d399; } .dot.tone-idle { background: #fbbf24; } .dot.tone-dead { background: #f87171; } .dot.tone-gone { background: var(--neutral); }
.ic { vertical-align: -2px; flex: none; }

/* ---- page header ---- */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
            margin-bottom: 18px; flex-wrap: wrap; }
.pagehead h1 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.pagehead-sub { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.pagehead-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sub { color: var(--text-3); margin-bottom: 16px; font-size: 12px; }
.ip { color: var(--text-3); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; word-break: break-all; }

/* ---- stat cards (OpenRouter style) ---- */
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        padding: 14px 16px 13px; display: flex; flex-direction: column; gap: 5px; }
.stat-label { color: var(--text-2); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono); }
.stat-num { color: var(--text); font-size: 28px; font-weight: 500; letter-spacing: -.01em; line-height: 1.0; font-family: var(--font-mono); }
.stat-foot { font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-size: 11.5px; }
.delta.up { color: var(--ok); } .delta.down { color: var(--danger); } .delta.flat { color: var(--text-3); }
.delta-note { color: var(--text-3); }

/* ---- underline tabs ---- */
.utabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.utabs .utab { padding: 9px 14px 11px; color: var(--text-2); font-weight: 600; font-size: 13px;
               border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .13s; }
.utabs .utab:hover { color: var(--text); }
.utabs .utab.on { color: var(--text); border-bottom-color: var(--accent-strong); }

/* ---- progress list (top-N) ---- */
.pglist { display: flex; flex-direction: column; gap: 12px; }
.pgi-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; margin-bottom: 5px; }
.pgi-name { color: var(--text); font-weight: 550; }
.pgi-val { color: var(--text-2); font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12px; }
.pgi-bar { height: 5px; background: var(--raised); border-radius: 3px; overflow: hidden; }
.pgi-bar span { display: block; height: 100%; border-radius: 3px; }

/* ---- data table (OpenRouter style) ---- */
.dtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.dtable thead th { color: var(--text-3); font-size: 10.5px; font-weight: 650; text-transform: uppercase;
                   letter-spacing: .07em; text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.dtable tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.dtable tbody tr:last-child td { border-bottom: none; }
.dtable tbody tr { transition: background .12s; }
.dtable tbody tr:hover { background: var(--raised); }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); color: var(--text-2); }
.dtable .mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.dwrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto;
         width: 100%; max-width: 100%; min-width: 0; }
.dwrap .dtable { min-width: 640px; }
/* en phone, el modo cards reflowea la tabla — el min-width del scroll-wrapper no aplica */
@media (max-width: 640px) { .dwrap .dtable.cards { min-width: 0; } }
details.okfold .dtable { min-width: 640px; }
.dgroup-head { padding: 11px 16px 9px; color: var(--text-2); font-size: 11px; font-weight: 650;
               text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; }

/* ---- learning / aprendizaje screen ---- */
.lgrid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .lgrid { grid-template-columns: 1fr; } }
.le-row { display: flex; gap: var(--space-3); align-items: flex-start; padding: 10px 0;
          border-bottom: 1px solid var(--border); }
.le-row:last-child { border-bottom: none; }
.le-body { flex: 1; min-width: 0; }
.le-ex { color: var(--text); font-size: 13px; line-height: 1.4; }
.le-note { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.le-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
           color: var(--muted-2); font-size: 11px; white-space: nowrap; }
.le-src { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
          letter-spacing: .05em; padding: 1px 5px; border-radius: var(--radius-sm); }
.le-auto { color: var(--blue); background: rgba(91,141,239,.14); }
.le-manual { color: var(--muted); background: var(--panel-2); }
.le-at { color: var(--muted-2); }
.rec-off { opacity: .5; }
.rec-acts { white-space: nowrap; text-align: right; }
.linkbtn { background: none; border: none; color: var(--blue); cursor: pointer; font: inherit;
           font-size: 12px; padding: 2px 6px; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn-danger { color: var(--red); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ---- forms & buttons ---- */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       background: var(--raised); color: var(--text); border: 1px solid var(--border-strong);
       border-radius: 8px; padding: 7px 13px; font: 600 12.5px/1.2 inherit; cursor: pointer;
       min-height: 34px; transition: all .13s; }
button:hover { background: var(--overlay); border-color: #50505a; }
button:active { transform: translateY(1px); }
button[disabled] { opacity: .45; cursor: wait; transform: none; }
button.ok { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); font-weight: 600; }
button.ok:hover { background: #46dcef; border-color: #46dcef; }
button.ok .ic { color: var(--accent-ink); }
/* secondary-destructive (rechazar/descartar/re-encolar): neutral until hover —
   red is reserved for genuinely bad/down, not for the operator's send-back path */
button.warn { background: transparent; border-color: var(--border-strong); color: var(--text-2); }
button.warn:hover { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
button.warn:hover .ic { color: var(--danger); }
button.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
button.ghost:hover { background: var(--raised); color: var(--text); }
button.sm { padding: 4px 10px; min-height: 28px; font-size: 12px; }
input, textarea, select { background: var(--bg); color: var(--text); border: 1px solid var(--border-strong);
       border-radius: 7px; padding: 9px 11px; font: 13.5px/1.45 var(--font-ui); width: 100%; transition: border-color .13s, box-shadow .13s; }
/* normalize the native file input: no ugly box, the picker button reads as a
   secondary button, the filename hint is muted mono */
input[type=file] { border: none; background: none; padding: 0; font-family: var(--font-mono);
                   font-size: 11.5px; color: var(--text-3); cursor: pointer; }
input[type=file]::file-selector-button { font: 600 12px var(--font-ui); background: var(--raised);
       color: var(--text); border: 1px solid var(--border-strong); border-radius: 7px; padding: 7px 12px;
       margin-right: 10px; cursor: pointer; transition: background .13s, border-color .13s; }
input[type=file]::file-selector-button:hover { background: var(--overlay); border-color: var(--accent-strong); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-strong);
       box-shadow: 0 0 0 3px var(--accent-bg); }
label { color: var(--text-2); font-size: 12px; font-weight: 550; display: block; margin: 10px 0 4px; }

/* ---- modal dialogs ---- */
dialog { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
         border-radius: var(--radius-lg); padding: 0; width: min(560px, calc(100vw - 32px));
         margin: auto; box-shadow: var(--shadow-lift); }
dialog::backdrop { background: rgba(5,5,8,.65); backdrop-filter: blur(3px); }
dialog .dlg-head { display: flex; align-items: center; justify-content: space-between;
                   padding: 14px 18px 0; }
dialog .dlg-head h2 { font-size: 14.5px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
dialog .dlg-body { padding: 4px 18px 18px; }
dialog .dlg-foot { padding: 0 18px 18px; }
dialog .dlg-foot button { width: 100%; }
dialog button.close { background: none; border: none; color: var(--text-3); min-height: 28px; padding: 4px; }
dialog button.close:hover { color: var(--text); background: var(--raised); border-radius: 6px; }
dialog[open] { animation: dlg-in .16s ease; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- task list (compact rows) ---- */
.tlist { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tgroup { padding: 11px 16px 9px; color: var(--text-2); font-size: 11px; font-weight: 650;
          text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 8px;
          border-bottom: 1px solid var(--border); }
.tgroup .tg-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tgroup .tg-cnt { color: var(--text-3); font-weight: 600; }
.tgroup.empty { color: var(--text-3); }
.tgroup.empty .tg-dot { opacity: .4; }
.trow.empty { color: var(--text-3); font-size: 12px; padding: 9px 16px; font-style: normal; }
/* status dots — single source for cola/historial/kanban column dots */
/* status-dot law: cyan=primary-loop, green=ready/done, amber=needs-you,
   red=bad, neutral=machine-busy/inert */
.sd-proposed    { background: var(--info); }
.sd-approved    { background: var(--violet); }
.sd-in_progress { background: var(--neutral); }
.sd-review      { background: var(--ok); }
.sd-blocked     { background: var(--warn); }
.sd-failed      { background: var(--danger); }
.sd-done        { background: var(--neutral); }
.sd-rejected    { background: var(--neutral-2); }
.trow { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border);
        transition: background .12s; }
.trow:last-child { border-bottom: none; }
.trow:hover { background: var(--raised); }
.trow .tr-client { flex: 0 0 auto; }
.trow .tr-title { flex: 1 1 auto; min-width: 0; font-weight: 550; font-size: 13px; color: var(--text);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .tr-title a { color: var(--text); }
.trow .tr-title a:hover { text-decoration: underline; text-underline-offset: 2px; }
.trow .tr-meta { flex: 0 0 auto; color: var(--text-3); font-size: 11px; font-family: var(--font-mono); white-space: nowrap; }
.trow .tr-id { flex: 0 0 auto; color: var(--text-3); font-size: 11px; font-family: var(--font-mono); }
.trow .tr-chips { flex: 0 0 auto; display: flex; gap: 5px; align-items: center; }
@media (max-width: 767px) {
  .trow { flex-wrap: wrap; gap: 7px; }
  .trow .tr-title { flex: 1 1 100%; order: -1; }
}

/* ---- HOY attention queue ---- */
.queue { margin-bottom: 26px; }
.queue-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.queue-head .qtitle { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.queue-head .qcount { color: var(--text); background: var(--raised); border: 1px solid var(--border);
                      border-radius: 10px; padding: 0 8px; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.queue-head .qaccent { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.qaccent.qa-decidir   { background: var(--accent); }
.qaccent.qa-revisar   { background: var(--ok); }
.qaccent.qa-atascadas { background: var(--danger); }
.qaccent.qa-enmarcha  { background: var(--neutral); }
.qcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 11px; }
.qcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
         padding: 13px 15px; transition: border-color .14s, box-shadow .14s; }
.qcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
/* P1 urgency reads from the amber priority chip, not a colored edge bar. */
.qcard .chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.qcard .t { font-weight: 600; font-size: var(--fs-md); margin: 8px 0 3px; line-height: 1.4;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qcard .t a { color: var(--text); } .qcard .t a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.qcard .meta { color: var(--text-3); font-size: 11.5px; margin-bottom: 2px; line-height: 1.5; word-break: break-word; }
.qcard .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.qcard form { display: inline; }
.qcard details { background: none; border: none; padding: 0; margin: 0; }
.qcard details summary { font-size: 12px; color: var(--text-2); }
.qcard details summary:hover { color: var(--danger); }
/* running strip (read-only) */
.runstrip { display: flex; flex-direction: column; gap: 8px; }
.runrow { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border);
          border-radius: var(--radius-sm); padding: 10px 14px; }
.runrow .rdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent-strong); }
.runrow .rdot.stall { background: var(--danger); }
.runrow .rtitle { font-weight: 550; font-size: 13px; color: var(--text); flex: 1 1 auto; min-width: 0;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runrow .rphase { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.runrow .rhb { color: var(--text-3); font-size: 11px; font-family: var(--font-mono); white-space: nowrap; }
/* happy empty state */
.allclear { text-align: center; padding: 60px 20px; }
.allclear .ico { width: 52px; height: 52px; border-radius: 50%; background: var(--ok-bg); color: var(--ok);
                 display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.allclear h2 { font-size: 18px; font-weight: 650; color: var(--text); }
.allclear p { color: var(--text-3); font-size: 13px; margin-top: 6px; }

/* ---- severity fleet table ---- */
.sevsec { margin-bottom: 18px; }
.sevsec .sevhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
                   color: var(--text-2); font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; }
.srvname { font-weight: 600; font-size: 13px; color: var(--text); }
.srvsub { color: var(--text-3); font-size: 11.5px; margin-top: 1px; }
details.okfold { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; margin-bottom: 14px; }
details.okfold > summary { padding: 12px 16px; color: var(--text-2); font-weight: 600; font-size: 12.5px;
                           list-style: none; display: flex; align-items: center; gap: 8px; }
details.okfold > summary::-webkit-details-marker { display: none; }
details.okfold[open] > summary { border-bottom: 1px solid var(--border); }
details.okfold .dtable { border: none; }

/* ---- kanban ---- */
.board { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 16px;
         scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.board::-webkit-scrollbar { height: 9px; }
.board::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
.col { flex: 0 0 330px; min-width: 330px; scroll-snap-align: start;
       background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
       padding: 6px; min-height: 160px; max-height: calc(100vh - 200px); overflow-y: auto;
       transition: flex-basis .22s ease, min-width .22s ease; }
.col::-webkit-scrollbar { width: 7px; }
.col::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.col h3 { color: var(--text-2); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .09em;
          padding: 8px 8px 10px; position: sticky; top: 0; z-index: 5; cursor: pointer; user-select: none;
          background: linear-gradient(var(--surface) 78%, transparent); display: flex; align-items: center; gap: 7px; }
.col h3:hover { color: var(--text); }
.col h3 .cdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.col h3 .cnt { color: var(--text); background: var(--raised); border: 1px solid var(--border);
               border-radius: 10px; padding: 0 7px; font-size: 10.5px; }
.col h3 .chev { margin-left: auto; transition: transform .2s; color: var(--text-3); }
.col.collapsed { flex: 0 0 44px; min-width: 44px; overflow: hidden; }
.col.collapsed .colbody { display: none; }
.col.collapsed h3 { writing-mode: vertical-rl; padding: 14px 3px; height: 100%; background: none; }
.col.collapsed h3 .chev { transform: rotate(180deg); margin: 8px 0 0; }
.colempty { color: var(--text-3); font-size: 12px; text-align: center; padding: 26px 8px;
            border: 1px dashed var(--border); border-radius: var(--radius-sm); margin: 2px; }
.card { background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius-sm);
        padding: 11px 12px; margin-bottom: 8px; transition: border-color .14s, box-shadow .14s; }
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.card .chips { display: flex; gap: 5px; flex-wrap: wrap; }
.card .t { font-weight: 600; font-size: var(--fs-md); margin: 7px 0 3px; line-height: 1.4; letter-spacing: -.005em;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .t a { display: block; }
.card .t a { color: var(--text); }
.card .t a:hover { color: var(--accent); }
.card .meta { color: var(--text-3); font-size: 11.5px; margin-bottom: 3px; line-height: 1.5; word-break: break-word;
              display: flex; gap: 5px; align-items: baseline; flex-wrap: wrap; }
.card .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.card form { display: inline; }
.card details { padding: 6px 0 0; margin: 0; background: none; border: none; }
.card details summary { font-size: 12px; color: var(--text-2); }
.card details summary:hover { color: var(--danger); }

details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
          padding: 10px 14px; margin-bottom: 12px; transition: border-color .15s; }
summary { color: var(--text-2); font-weight: 600; cursor: pointer; font-size: 12.5px; user-select: none;
          list-style: none; display: flex; align-items: center; gap: 7px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid var(--text-3);
                  border-bottom: 1.5px solid var(--text-3); transform: rotate(-45deg); transition: transform .15s; flex: none; }
details[open] > summary::before { transform: rotate(45deg); }
summary:hover { color: var(--text); }

/* ---- 3-panel detail: chat center, context+actions in a sticky right rail ---- */
.detail3 { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 30px;
           align-items: start; max-width: 1200px; }
.d3-main { min-width: 0; }
.d3-main .dt-title { font-size: 23px; font-weight: 700; letter-spacing: -.02em; line-height: 1.22;
                     margin: 2px 0 3px; max-width: 30ch; }
.d3-main .dt-meta { color: var(--text-3); font-family: var(--font-mono); font-size: 11.5px;
                    letter-spacing: .01em; margin-bottom: 18px; }
.d3-side { position: sticky; top: 22px; display: flex; flex-direction: column; gap: 12px; }
.d3-side .panel { margin-bottom: 0; }
.d3-side details { margin-bottom: 0; }
.kv-rail { grid-template-columns: 84px 1fr; gap: 8px 12px; align-items: center; }
.kv-rail dd { display: flex; flex-wrap: wrap; gap: 5px; }
@media (max-width: 1024px) {
  .detail3 { grid-template-columns: 1fr; gap: 16px; }
  .d3-side { position: static; }
}

/* ---- operator decision surface (top of task detail) ----
   The whole point: lead the eye to what's needed NOW. The action card is the
   first and loudest block; the activity log below is recessed evidence. The
   "needs you" signal is amber (the ac-flag), NOT a colored left border. */

/* passive states collapse to one calm strip — no heavy card */
.statestrip { display: flex; align-items: center; gap: 9px; margin: 4px 0 20px;
              padding: 9px 13px; border-radius: var(--radius-sm); font-size: 13px;
              border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }
.statestrip .ic { flex: none; }
.statestrip.ss-ok    { color: var(--ok);   border-color: var(--ok-border, rgba(56,211,154,.3)); background: var(--ok-bg); }
.statestrip.ss-busy  { color: var(--text-2); }
.statestrip.ss-busy .ic { color: var(--accent); }
.statestrip.ss-queued { color: var(--text-2); }
.statestrip.ss-queued .ic { color: var(--text-3); }
.statestrip.ss-gone  { color: var(--text-3); }

/* the loud action card: this task is waiting on YOU */
.actcard { background: var(--raised); border: 1px solid var(--border-strong);
           border-radius: var(--radius); padding: 18px 20px 20px; margin: 4px 0 22px;
           max-width: 760px; box-shadow: 0 2px 18px rgba(0,0,0,.32); }
.ac-flag { display: inline-flex; align-items: center; gap: 6px; color: var(--warn);
           font-family: var(--font-mono); font-size: 11px; font-weight: 600;
           text-transform: uppercase; letter-spacing: .1em; margin-bottom: 9px; }
.ac-flag .ic { color: var(--warn); }
.ac-ask { font-size: 16.5px; font-weight: 650; line-height: 1.35; letter-spacing: -.01em;
          color: var(--text); margin: 0 0 8px; max-width: 56ch; }
.ac-gist { color: var(--text-2); font-size: 13px; line-height: 1.55; margin: 0 0 16px;
           max-width: 64ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
           overflow: hidden; }
.ac-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ac-actions form, .ac-primary form { display: inline; }
.ac-primary { margin-bottom: 4px; }
button.lg { font-size: 14px; font-weight: 650; padding: 9px 18px; }

/* the agent's open questions — answered in place, then re-sent */
.ac-respond { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.ac-respond > .ac-note-l { margin-top: 0; }
.ac-qs { margin-bottom: 16px; }
.ac-qs-h { display: flex; align-items: center; gap: 6px; color: var(--warn);
           font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
           text-transform: uppercase; letter-spacing: .09em; margin-bottom: 10px; }
.ac-qs-h .ic { color: var(--warn); }
.aq { margin-bottom: 13px; }
.aq:last-child { margin-bottom: 0; }
.aq-q { color: var(--text); font-size: 13px; font-weight: 550; margin: 0 0 6px;
        display: flex; gap: 7px; align-items: baseline; line-height: 1.5; }
.aq-q .ic { color: var(--warn); flex: none; align-self: flex-start; margin-top: 2px; }
.aq textarea { background: var(--bg); }
button.resend { background: transparent; border-color: var(--border-strong); color: var(--text); font-weight: 550; }
button.resend:hover { background: var(--overlay); border-color: var(--accent); color: var(--text); }

/* recessed evidence zone (activity log lives under the decision) */
.evidence { margin-top: 4px; }
.ev-head { display: flex; align-items: center; gap: 7px; color: var(--text-3);
           font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
           text-transform: uppercase; letter-spacing: .12em;
           padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.ev-head .ic { color: var(--text-3); }

/* ---- markdown / text artifact viewer ---- */
.md-doc { max-width: 820px; color: var(--text); font-size: 14px; line-height: 1.65; }
.md-doc h2, .md-doc h3, .md-doc h4, .md-doc h5 { color: var(--text); letter-spacing: -.01em;
        margin: 20px 0 8px; line-height: 1.3; }
.md-doc h2 { font-size: 18px; } .md-doc h3 { font-size: 15.5px; } .md-doc h4, .md-doc h5 { font-size: 13.5px; color: var(--text-2); }
.md-doc p { margin: 8px 0; color: var(--text-2); }
.md-doc ul { margin: 8px 0 8px 20px; color: var(--text-2); }
.md-doc li { margin: 3px 0; }
.md-doc strong { color: var(--text); font-weight: 600; }
.md-doc code { font-family: var(--font-mono); font-size: 12.5px; background: var(--raised);
        padding: 1px 5px; border-radius: 4px; color: var(--accent); }
.md-doc pre.md-code, .md-raw { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
        background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
        padding: 12px 14px; overflow-x: auto; color: var(--text-2); white-space: pre-wrap; word-break: break-word; margin: 10px 0; }
.md-doc pre.md-code code { background: none; padding: 0; color: inherit; }

/* ---- detail page ---- */
.detail { max-width: 900px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
         padding: 16px 18px; margin-bottom: 14px; }
.panel h2 { color: var(--text-3); font-size: 11px; font-weight: 650; text-transform: uppercase;
            letter-spacing: .09em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.panel .body { color: var(--text); font-size: 13.5px; white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
.panel .quote { background: var(--bg); border: 1px solid var(--border);
                border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; color: var(--text-2);
                white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow-y: auto; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px; font-size: 12.5px; }
.kv dt { color: var(--text-3); } .kv dd { color: var(--text); word-break: break-word; }

/* ---- inbox ---- */
.msg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
       padding: 13px 15px; margin-bottom: 10px; transition: border-color .15s; max-width: 920px; }
.msg:hover { border-color: var(--border-strong); }
.msg .msg-head { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.msg .msg-from { color: var(--text-2); font-size: 12px; }
.msg .msg-age { color: var(--text-3); font-size: 11.5px; font-family: var(--font-mono); margin-left: auto; }
.msg .body { color: var(--text-2); font-size: 13px; margin: 9px 0 2px; white-space: pre-wrap; word-break: break-word; line-height: 1.55; }
.msg .content-muted { color: var(--text-3); }
.msg .msg-tasks { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.msg .msg-tasks a:hover { text-decoration: none; }
.msg .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* inbox action row: primary assign · quiet ignore · attach tucked right */
.msg-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.msg-act > form.cluster select.w-auto { min-width: 150px; }
.msg-attach { margin-left: auto; border: none; background: none; padding: 0; margin-bottom: 0; }
.msg-attach > summary { font-size: 12px; color: var(--text-3); padding: 0; }
.msg-attach > summary:hover { color: var(--text-2); }
@media (max-width: 600px) { .msg-attach { margin-left: 0; } }
table.plain td { padding: 2px 8px 2px 0; font-size: 13px; }

/* ---- clamped bodies (inbox) ---- */
.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.clamp.open { -webkit-line-clamp: unset; }
.expand { color: var(--accent); font-size: var(--fs-sm); cursor: pointer; background: none; border: none; min-height: 24px; padding: 0; }
/* ---- pending pipeline strip ---- */
.pending { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
           background: var(--warn-bg); border: 1px solid rgba(246,181,61,.22);
           border-radius: var(--radius-sm); padding: 9px 13px; margin-bottom: var(--sp-3); font-size: var(--fs-sm); color: var(--text-2); }
.pending > .ic { color: var(--warn); }
.pending a { font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.pending.info { background: var(--accent-bg); border-color: rgba(52,208,230,.22); }
.pending.info > .ic { color: var(--accent); }
/* ---- file capture note ---- */
.filenote { color: var(--teal); font-size: var(--fs-sm); margin-top: 4px; }
/* stat cards: 4→2 on narrow */
@media (max-width: 900px) {
  .statrow { grid-template-columns: repeat(2, 1fr); }
}

/* small screens: legacy-component reflow (the DS shell rules live at 641/860/640) */
@media (max-width: 640px) {
  .stat-num { font-size: 23px; }
  .qcards { grid-template-columns: 1fr; }
  .card .actions button, .qcard .actions button { flex: 1 1 40%; }
  .kv { grid-template-columns: 1fr; }
  .pagehead-actions { width: 100%; }
}

/* ===========================================================================
   DESIGN SYSTEM — control-plane components, shell & screens (applied verbatim)
   Appended last so these rules win the cascade over the legacy block above;
   the legacy classes survive (re-coloured by the token aliases) until each
   screen's markup is migrated to the DS structure.
   =========================================================================== */
body { font-family: var(--font-sans); }

/* ---- pill (StatusPill / generic badge) ---- */
.ds-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  border-radius: var(--radius-xs); font-family: var(--font-sans); font-size: var(--text-2xs);
  font-weight: var(--weight-semibold); letter-spacing: .02em; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--tone-neutral-border); background: var(--tone-neutral-soft);
  color: var(--tone-neutral); text-decoration: none; }
a.ds-pill:hover { text-decoration: none; filter: brightness(1.12); }
button.ds-pill { cursor: pointer; }
.ds-pill.sm { height: 18px; padding: 0 7px; font-size: 10px; }
.ds-pill .ds-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.ds-pill.pulse .ds-dot { animation: aiops-pulse 1.5s var(--ease) infinite; }
.ds-pill .ic { width: 13px; height: 13px; }
.ds-pill.t-info     { color: var(--tone-info);     background: var(--tone-info-soft);     border-color: var(--tone-info-border); }
.ds-pill.t-progress { color: var(--tone-progress); background: var(--tone-progress-soft); border-color: var(--tone-progress-border); }
.ds-pill.t-ok       { color: var(--tone-ok);       background: var(--tone-ok-soft);       border-color: var(--tone-ok-border); }
.ds-pill.t-alert    { color: var(--tone-alert);    background: var(--tone-alert-soft);    border-color: var(--tone-alert-border); }
.ds-pill.t-neutral  { color: var(--tone-neutral);  background: var(--tone-neutral-soft);  border-color: var(--tone-neutral-border); }
.ds-pill.t-accent   { color: var(--tone-accent);   background: var(--tone-accent-soft);   border-color: var(--tone-accent-border); }
.is-pending { opacity: .45; pointer-events: none; transition: opacity var(--dur-base) var(--ease); }
.cl-rightform { margin-left: auto; }
/* Right-side approval drawer (opened from a list row). Docks flush to the right
   edge, full height — the operator reviews/approves without leaving the board. */
.peekdlg { border: none; background: transparent; padding: 0; margin: 0 0 0 auto;
  height: 100dvh; max-height: 100dvh; max-width: 520px; width: 92vw; }
.peekdlg::backdrop { background: rgba(0,0,0,.45); }
.peekdlg[open] { animation: peekIn .18s var(--ease); }
@keyframes peekIn { from { transform: translateX(26px); opacity: .3; } to { transform: none; opacity: 1; } }
/* confirm custom del DS (data-confirm) — reemplaza al confirm() nativo */
.cfdlg { background: var(--panel); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  padding: var(--space-7); width: min(400px, calc(100vw - 48px)); }
.cfdlg::backdrop { background: rgba(0,0,0,.55); }
.cfdlg[open] { animation: cfIn .14s var(--ease); }
@keyframes cfIn { from { transform: translateY(6px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cfdlg[open] { animation: none; } }
.cf-msg { font-size: var(--text-base); line-height: var(--leading-normal); overflow-wrap: anywhere; }
.cf-actions { display: flex; justify-content: flex-end; gap: var(--space-4); margin-top: var(--space-7); }
.peek-body { background: var(--panel); border: none; border-left: 1px solid var(--border-strong);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  padding: 16px 18px; box-shadow: var(--shadow-pop); height: 100%; max-height: 100dvh; overflow: auto; }
/* collapsible list groups (Todas / por-cliente): header folds its rows onto one line */
.tl-grp { display: block; }
.tl-group { cursor: pointer; user-select: none; }
.tl-gchev { display: inline-flex; align-items: center; color: var(--text-3);
  transition: transform var(--dur-fast) var(--ease); }
.tl-grp.collapsed .tl-gchev { transform: rotate(-90deg); }
.tl-grp.collapsed .tl-grows { display: none; }
.tl-group:focus-visible { outline: 2px solid var(--tone-accent); outline-offset: -2px; }
.peek-h1 { display: flex; align-items: center; gap: var(--space-3); }
.peek-id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
.peek-title { font-size: var(--text-lg); margin: 8px 0 0; line-height: var(--leading-snug); overflow-wrap: anywhere; }
.peek-open, .peek-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: var(--radius-sm); color: var(--muted); background: transparent; border: none; cursor: pointer; }
.peek-open:hover, .peek-x:hover { background: var(--panel-3); color: var(--text); }
.peek-sec { margin: 10px 0; }
.tk-ctitle { cursor: pointer; }

/* ---- priority tag ---- */
.ds-prio { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid;
  border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: var(--text-2xs);
  font-weight: var(--weight-semibold); letter-spacing: .02em; cursor: default; }
button.ds-prio { cursor: pointer; }
.ds-prio.p1 { color: var(--red);   background: var(--red-soft);   border-color: var(--red-border); }
.ds-prio.p2 { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-border); }
.ds-prio.p3 { color: var(--muted); background: var(--tone-neutral-soft); border-color: var(--tone-neutral-border); }

/* ---- client chip ---- */
.ds-client { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 5px;
  background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: var(--radius-full);
  vertical-align: middle; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.ds-client.sm { height: 24px; gap: 6px; padding: 0 8px 0 4px; }
.ds-client.editable { cursor: pointer; }
.ds-client.editable:hover { background: var(--orange-soft); border-color: var(--orange-border); }
.ds-client .ds-av { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: var(--radius-full); background: var(--orange); color: #fff; font-size: 10px;
  font-weight: var(--weight-bold); letter-spacing: .02em; flex: none; }
.ds-client.sm .ds-av { width: 18px; height: 18px; font-size: 9px; }
.ds-client .ds-cl-main { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.ds-client .ds-cl-nm { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); white-space: nowrap; }
.ds-client.sm .ds-cl-nm { font-size: var(--text-xs); }
.ds-client .ds-cl-slug { font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); }
.ds-client .ic { color: var(--muted); }

/* ---- channel (icon + label) ---- */
.ds-chan { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs);
  font-weight: var(--weight-medium); color: var(--muted); }
.ds-chan .ic { color: var(--muted); }

/* ---- buttons (Button) — restyle the global control to the DS palette ---- */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  height: 32px; min-height: 32px; padding: 0 14px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: var(--weight-medium) var(--text-sm)/1 var(--font-sans); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
button:hover, .btn:hover { background: var(--panel-3); border-color: var(--border-strong); }
button:active { transform: translateY(0.5px); }
button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
button.ok, .btn.ok { background: var(--blue); border-color: transparent; color: #fff; }
button.ok:hover { background: var(--blue-hover); }
button.ok .ic { color: #fff; }
button.warn { background: transparent; border-color: var(--border-strong); color: var(--muted); }
button.warn:hover { background: var(--red-soft); border-color: var(--red-border); color: var(--red); }
button.warn:hover .ic { color: var(--red); }
button.danger { background: var(--red); border-color: transparent; color: #fff; }
button.danger:hover { background: #F25C5C; }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover { background: var(--panel-2); color: var(--text); }
button.sm, .btn.sm { height: 26px; min-height: 26px; padding: 0 10px; font-size: var(--text-xs); }
button.lg, .btn.lg { height: 38px; min-height: 38px; padding: 0 18px; font-size: var(--text-base); }

/* ---- icon button ---- */
.ds-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  min-height: 30px; padding: 0; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--muted); cursor: pointer; }
.ds-iconbtn.sm { width: 26px; height: 26px; min-height: 26px; }
.ds-iconbtn.lg { width: 34px; height: 34px; min-height: 34px; }
.ds-iconbtn:hover { background: var(--panel-3); color: var(--text); }
.ds-iconbtn.solid { background: var(--panel-2); color: var(--text); }
.ds-iconbtn.solid:hover { background: var(--panel-3); }

/* ---- inputs (Field/Select) ---- */
input, textarea, select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 7px 10px; font: var(--text-sm)/var(--leading-snug) var(--font-sans);
  width: 100%; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.ds-field { display: flex; flex-direction: column; gap: var(--space-3); }
.ds-fld-l { font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--muted-2); }
.ds-fld-hint { font-size: var(--text-xs); color: var(--muted-2); }
.ds-input { width: 100%; box-sizing: border-box; }
.ds-input.mono { font-family: var(--font-mono); }
.ds-select-wrap { position: relative; display: block; }
.ds-select { appearance: none; -webkit-appearance: none; padding-right: 30px; }
.ds-select-wrap .ic { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
input[type=file] { border: none; background: none; padding: 0; font-family: var(--font-mono);
  font-size: var(--text-xs); color: var(--muted-2); cursor: pointer; }
input[type=file]::file-selector-button { font: var(--weight-medium) var(--text-xs) var(--font-sans);
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 6px 12px; margin-right: 10px; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--panel-3); }
/* input nativo oculto — lo reemplaza el botón sintetizado .fe-btn (texto es_AR) */
input[type=file].fe-hidden { position: absolute; width: 1px; height: 1px; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
label { color: var(--muted-2); font-size: var(--text-2xs); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-label); display: block; margin: 10px 0 4px; }

/* ---- panel & key-value (Panel / KeyValue) ---- */
.ds-panel { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.ds-panel-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.ds-panel-htxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-panel-title { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--muted); }
.ds-panel-sub { font-size: var(--text-xs); color: var(--muted-2); }
.ds-panel-acts { display: flex; align-items: center; gap: var(--space-3); }
.ds-panel-b { padding: var(--space-6); }
.ds-panel-b.flush { padding: 0; }
.ds-kv { display: flex; align-items: baseline; gap: var(--space-5); }
.ds-kv-k { flex: 0 0 auto; min-width: 96px; font-size: var(--text-2xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); }
.ds-kv-v { font-size: var(--text-sm); color: var(--text); min-width: 0; word-break: break-word; }
.ds-kv-v.mono { font-family: var(--font-mono); }

/* ---- attachment (full inline renderer) ---- */
.ds-att { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.ds-att-h { display: flex; align-items: center; gap: var(--space-4); padding: 8px 12px;
  border-bottom: 1px solid var(--border); background: var(--panel-2); }
.ds-att-h .ic { color: var(--muted); flex: none; }
.ds-att-htxt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ds-att-nm { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-att-meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); }
.ds-att-dlbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: var(--radius-sm); color: var(--muted); flex: none; }
.ds-att-dlbtn:hover { background: var(--panel-3); color: var(--text); }
.ds-att-b { padding: var(--space-5); }
.ds-att-img { max-width: 100%; max-height: 360px; border-radius: var(--radius-sm); display: block; }
.ds-att-audio { width: 100%; height: 38px; }
.ds-att-text { font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-snug);
  color: var(--muted); white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow-y: auto; margin: 0; }
.ds-att-table { border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-xs); width: 100%; }
.ds-att-table td { border: 1px solid var(--border); padding: 4px 8px; color: var(--muted); }
.ds-att-dl { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--blue); }

/* ---- modal dialog → DS .cmodal look (reuses existing <dialog> JS) ---- */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 0; width: min(468px, calc(100vw - 32px)); margin: auto;
  box-shadow: var(--shadow-pop); }
dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
dialog .dlg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); }
dialog .dlg-head h2 { font-size: var(--text-md); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: var(--space-4); }
dialog .dlg-body { padding: var(--space-6); }
dialog .dlg-foot { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border); background: var(--panel-2); }
dialog .dlg-foot button { width: 100%; }
dialog button.close { background: none; border: none; color: var(--muted-2); width: 28px; height: 28px; min-height: 28px; padding: 0; }
dialog button.close:hover { color: var(--text); background: var(--panel-2); }

/* ===========================================================================
   APP SHELL — DS console (sidebar + control-plane section + topbar)
   =========================================================================== */
.console { display: flex; height: 100vh; overflow: hidden; }
.cside { width: var(--sidebar-w); flex: none; background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: var(--space-6) var(--space-5); gap: var(--space-7);
  overflow: hidden; transition: width var(--dur-base) var(--ease); }
.cbrand { display: flex; align-items: center; padding: 2px var(--space-3) 0; height: 30px; }
.cbrand svg { height: 26px; width: auto; display: block; }
.cbrand .cbrand-mark { display: none; }
.console.collapsed .cbrand-full { display: none; }
.console.collapsed .cbrand-mark { display: block; height: 28px; }
.ccollapse { color: var(--muted-2); margin-top: var(--space-2); }
.cnav { display: flex; flex-direction: column; gap: 2px; }
.cnav-sec { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--muted-2); padding: var(--space-5) var(--space-4) var(--space-3); }
.cnav-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-sm);
  color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-medium); text-align: left; width: 100%;
  background: none; border: none; min-height: 0; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.cnav-item .ic { color: var(--muted-2); }
.cnav-item:hover { background: var(--panel-2); color: var(--text); }
.cnav-item:hover .ic { color: var(--muted); }
.cnav-item.on { background: var(--orange-soft); color: var(--orange); }
.cnav-item.on .ic { color: var(--orange); }
.cnav-item .ccount { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2);
  background: var(--panel-2); padding: 1px 7px; border-radius: var(--radius-full); }
.cnav-item.on .ccount { color: var(--orange); background: rgba(255,90,31,.16); }
.cnav-item .cdot { margin-left: auto; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--orange); flex: none; }
/* collapse toggle swaps its glyph (close ↔ open) with the sidebar state */
.ccollapse .ic + .ic { display: none; }
.console.collapsed .ccollapse .ic:first-of-type { display: none; }
.console.collapsed .ccollapse .ic + .ic { display: inline-flex; }
/* footer admin gear (off-nav Gmail/Devices/Activity) */
.cgear { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: var(--radius-sm); color: var(--muted-2); flex: none; }
.cgear:hover { background: var(--panel-3); color: var(--text); }
.console.collapsed .cgear { display: none; }
.cside .cfoot { margin-top: auto; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4);
  border-top: 1px solid var(--border); }
.cav { width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: var(--radius-full); background: var(--panel-3); border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted); flex: none; cursor: pointer; }
button.cav:hover { background: var(--panel-3); color: var(--text); border-color: var(--muted-2); }
.cop { min-width: 0; flex: 1; }
.cop b { display: block; color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.cop span { color: var(--muted-2); font-family: var(--font-mono); font-size: var(--text-2xs); }
.cfoot form { display: inline-flex; }
.console.collapsed .cside { width: 62px; padding-left: var(--space-3); padding-right: var(--space-3); }
.console.collapsed .cnav-item { justify-content: center; padding: var(--space-4) 0; }
.console.collapsed .cnav-item > :not(.ic), .console.collapsed .cnav-sec, .console.collapsed .cop, .console.collapsed .cbrand-word { display: none; }
.cmain { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.cscrim { display: none; }
.cdock { display: none; }
.ctop { flex: none; display: flex; align-items: center; gap: var(--space-5); height: 52px; padding: 0 var(--space-7);
  border-bottom: 1px solid var(--border); background: var(--bg); }
.ctop .ctitle { font-size: var(--text-md); font-weight: var(--weight-semibold);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctop .csub { font-size: var(--text-xs); color: var(--muted-2); font-family: var(--font-mono); }
.ctop-head { display: contents; }   /* transparent on desktop; flex column on phone */
.ctop-hsub { display: none; }        /* the DS .appbar-hsub — phone-only */
.ctop .spacer { flex: 1; }
.ctop-actions { display: contents; }
.cback { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-height: 30px;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); margin-right: var(--space-2); flex: none; }
.cback:hover { color: var(--text); background: var(--panel-3); }
.mback { display: none; }  /* mobile-only back-to-list button, injected by JS in sel-mode */
.cside-mob { display: none; }  /* "Ajustes" group — only shown when the sidebar is the phone "Más" sheet */
.mb-seg-wrap { display: none; }  /* DS wide segmented control — phone-only (desktop keeps its own toolbar) */
.hide-phone { display: contents; }  /* transparent on desktop (children stay flex items); display:none only ≤640px */
/* mobile-only lead icons / row wrappers — inert on desktop so shared rows are unchanged */
.mr-ic { display: none; }            /* reuniones: video lead icon (phone only) */
.th-smain { display: contents; }     /* threads: transparent wrapper on desktop */
.th-sic { display: none; }           /* threads: kind lead icon (phone only) */
.dv-ic { display: none; }            /* dispositivos: device lead icon (phone only) */
.ccreate { display: inline-flex; align-items: center; gap: var(--space-3); height: 30px; min-height: 30px;
  padding: 0 var(--space-5) 0 var(--space-4); background: var(--blue); border: none; border-radius: var(--radius-sm);
  color: #fff; font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; }
.ccreate:hover { background: var(--blue-hover); }
.ccreate .ic { color: #fff; }
.csearch { display: inline-flex; align-items: center; gap: var(--space-3); height: 30px; padding: 0 var(--space-5);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--muted-2); font-family: var(--font-mono); font-size: var(--text-xs); min-width: 200px; }
main.cscreen { flex: 1; min-height: 0; min-width: 0; max-width: none; margin: 0; overflow-y: auto;
  padding: var(--space-8) var(--space-9) var(--space-10); }
main.cscreen.flush { padding: 0; overflow: hidden; display: flex; }
main.cscreen.flush > * { flex: 1; min-height: 0; min-width: 0; }
.cempty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-5); text-align: center; color: var(--muted-2); padding: var(--space-12); }
.cempty .ce-t { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--muted); }
.cempty .ce-s { font-size: var(--text-sm); color: var(--muted-2); max-width: 320px; line-height: var(--leading-snug); }
/* TABLET (641–860px): sidebar collapses to a 62px icon-only rail */
@media (min-width: 641px) and (max-width: 860px) {
  .cside { width: 62px; padding-left: var(--space-3); padding-right: var(--space-3); }
  .cside .cnav-item > :not(.ic), .cside .cnav-sec, .cside .cop, .cside .cbrand-word { display: none; }
  .cside .cnav-item { justify-content: center; padding: var(--space-4) 0; }
}

/* PHONE (<=640px): off-canvas drawer + tightened chrome (iPhone 16 Pro Max) */
@media (max-width: 640px) {
  /* primary mobile nav = bottom DOCK; the sidebar becomes the "Más" overflow sheet */
  .cdock { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border-top: 1px solid var(--border);
    padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  .cdock-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 50px; padding: 5px 2px; border-radius: var(--radius-sm);
    background: none; border: none; color: var(--muted-2); font-family: inherit;
    font-size: 10.5px; font-weight: var(--weight-semibold); cursor: pointer; text-decoration: none; }
  .cdock-item .ic { color: var(--muted-2); }
  .cdock-item.on, .cdock-item.on .ic { color: var(--orange); }
  .cdock-item:active { background: var(--panel-2); }
  .cdock-ic { position: relative; display: inline-flex; }
  .cdock-badge { position: absolute; top: -6px; left: 58%;
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full); background: var(--panel-3); color: var(--text);
    border: 1px solid var(--border-strong); font-family: var(--font-mono);
    font-size: 9.5px; font-weight: var(--weight-bold); line-height: 1; }
  .cdock-badge.nc { background: var(--orange); color: #fff; border-color: transparent; }
  .cdock-badge.amber { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-border); }
  /* on a focused/pushed detail the screen owns the full height + its own bottom
     action bar — hide the dock (task detail via .dirH-bar; inbox/threads/clientes/
     reuniones/borradores via sel-mode). .has-dirbar is the JS-set fallback for
     browsers without :has() (applySelMode toggles it on .cmain). */
  .cmain:has(.dirH-bar) .cdock, .cmain.has-dirbar .cdock,
  .console.sel-mode .cdock { display: none; }
  /* the last list row must clear the fixed dock (+ home-indicator inset) */
  main.cscreen.flush { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .console.sel-mode main.cscreen.flush, .cmain:has(.dirH-bar) main.cscreen.flush,
  .cmain.has-dirbar main.cscreen.flush { padding-bottom: 0; }
  /* sidebar = the "Más" overflow sheet (off-canvas drawer); full nav + footer preserved */
  .cside {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 80;
    width: min(84vw, 300px); max-width: none;
    transform: translateX(-100%); transition: transform var(--dur-base) var(--ease);
    box-shadow: 0 0 0 1px var(--border), 24px 0 48px rgba(0,0,0,.45);
    padding: max(var(--space-6), env(safe-area-inset-top)) var(--space-5) max(var(--space-6), env(safe-area-inset-bottom));
    padding-left: max(var(--space-5), env(safe-area-inset-left));
  }
  /* keep full labels in the drawer (override any rail/collapse rules) */
  .cside .cnav-item > :not(.ic), .cside .cnav-sec, .cside .cop, .cside .cbrand-word { display: revert; }
  .cside .cnav-item { justify-content: flex-start; padding: var(--space-4); min-height: 44px; }
  /* reveal the mobile-only "Ajustes" group inside the "Más" sheet */
  .cside-mob { display: block; }
  .console.nav-open .cside { transform: translateX(0); }
  .console.collapsed .cside { width: min(84vw, 300px); padding-left: max(var(--space-5), env(safe-area-inset-left)); padding-right: var(--space-5); }
  /* scrim dims the content and catches the close tap */
  .cscrim { display: block; position: fixed; inset: 0; z-index: 70;
    background: rgba(0,0,0,.5); opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease); }
  .console.nav-open .cscrim { opacity: 1; pointer-events: auto; }
  body.nav-locked { overflow: hidden; }

  /* APP HEADER — two tiers: (row 1) large title + bell; (row 2) the per-page
     actions as a horizontally-scrollable toolbar. This stops the desktop toolbar
     (client dropdown + view toggles + big create button) from cramming and wrapping
     into the title. Frosted + pinned above the scroller for a native feel. */
  .ctop { flex-wrap: wrap; gap: 0 var(--space-3); height: auto; min-height: 62px;
    padding: max(var(--space-2), env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); }
  .ctop .spacer { display: none; }
  .ctop .cback { order: 0; }
  /* DS .appbar.header: title (xl) stacked over a mono context sub-line */
  .ctop .ctop-head { order: 1; display: flex; flex-direction: column; justify-content: center;
    gap: 2px; flex: 1 1 auto; min-width: 0; padding: 10px 0; }
  .ctop .ctitle { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: -0.01em; line-height: 1.12; }
  .ctop .csub { display: none; }
  .ctop .ctop-hsub { display: flex; align-items: center; gap: var(--space-3); min-height: 16px;
    font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2);
    white-space: nowrap; overflow: hidden; }
  .ctop .cnotif-btn { order: 2; }
  /* desktop-only header chrome is hidden on the phone — the DS header is just the
     title + sub-line + (search / "+"). */
  .hide-phone { display: none !important; }
  /* DS wide segmented control (Cronológica/Por triage, Lista/Kanban, filter strips) */
  .mb-seg-wrap { display: block; padding: 2px var(--space-6) 10px; }
  .mb-seg { display: flex; padding: 2px; background: var(--panel-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); gap: 2px; }
  .mb-seg a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 9px 10px; border-radius: 3px; font-size: var(--text-xs); font-weight: var(--weight-medium);
    color: var(--muted); text-decoration: none; }
  .mb-seg a.on { background: var(--panel-3); color: var(--text); }
  /* inbox list-head (count + client filter + icon toggle) is replaced on the phone
     by the header sub-line + the .mb-seg control */
  .cmain .in-list-head { display: none; }
  /* DS list row: 34px rounded-square channel icon (orange ring when unread), title-led */
  .cmain .in-row { grid-template-columns: none; display: flex; align-items: flex-start;
    gap: var(--space-5); padding: 11px var(--space-6); border-left: none; }
  .cmain .in-row .ir-chan { width: 34px; height: 34px; padding: 0; border-radius: var(--radius-sm);
    background: var(--panel-2); border: 1px solid var(--border); align-items: center;
    justify-content: center; color: var(--muted); flex: none; }
  .cmain .in-row.unread .ir-chan { border-color: var(--orange-border); color: var(--orange); }
  .cmain .in-row .ir-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-base);
    font-weight: var(--weight-semibold); color: var(--text); line-height: var(--leading-snug); }
  .cmain .in-row .ir-preview { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-sm); color: var(--muted); }
  /* BORRADORES row → same DS list-row shape (row-ic mail icon + title-led body) */
  .cmain .dx-srow { flex-direction: row; align-items: flex-start; gap: var(--space-5);
    padding: 11px var(--space-6); border-left: none; }
  .cmain .dx-sic { display: inline-flex; width: 34px; height: 34px; border-radius: var(--radius-sm);
    background: var(--panel-2); border: 1px solid var(--border); align-items: center;
    justify-content: center; color: var(--muted); flex: none; }
  .cmain .dx-smain { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  .cmain .dx-ssubj { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-base);
    font-weight: var(--weight-semibold); color: var(--text); line-height: var(--leading-snug); max-width: none; }
  .cmain .dx-sprev { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-snug); }
  .cmain .dx-smeta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: 2px; }
  .cmain .dx-sto { display: inline; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
  .cmain .dx-listhead { display: none; }   /* count→header; client filter + view toggle are desktop-only */
  /* CLIENTES row: 34px orange ext avatar (DS Avatar ext) */
  .cmain .cl-row .cl-av { width: 34px; height: 34px; background: var(--orange-soft);
    border-color: var(--orange-border); color: var(--orange); }
  /* detail (sel-mode) app bar: centered pinned title, no sub-line */
  .console.sel-mode .ctop .ctop-head { padding: 0; }
  .console.sel-mode .ctop .ctitle { font-size: var(--text-md); font-weight: var(--weight-semibold); text-align: center; }
  .console.sel-mode .ctop .ctop-hsub, .console.sel-mode .csub-sep { display: none; }
  /* DS header actions: compact icon buttons pinned top-right, inline with the
     title (search / "+"). Capped width + horizontal scroll so a screen that still
     carries extra actions can't crowd the title. */
  .ctop-actions { order: 2; display: flex; flex: 0 1 auto; align-items: center; gap: var(--space-2);
    margin-left: auto; max-width: 52%; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0;
    /* fade-edges signal the hidden overflow (the scrollbar is suppressed) */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%); }
  .ctop-actions::-webkit-scrollbar { display: none; }
  .ctop-actions > * { flex: 0 0 auto; }
  .ctop .cnotif-btn { order: 3; }
  /* create reads as a bare "+" icon on the phone (blue is rationed for Aprobar) */
  .ctop-actions .ccreate { margin-left: 0; width: 40px; height: 40px; min-height: 40px; padding: 0;
    background: none; border: none; color: var(--muted); font-weight: var(--weight-semibold); }
  .ctop-actions .ccreate .ic { color: var(--muted); }
  .ctop-actions .ccreate:active { background: var(--panel-2); color: var(--text); }

  /* content density: tight sides + safe-area insets */
  main.cscreen { padding: var(--space-6) max(14px, env(safe-area-inset-right)) calc(72px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }

  /* tap targets */
  .cnav-item, .cnotif-btn, .cav, .cgear, .btn, .ccreate, .ds-iconbtn { min-height: 44px; }
  .cnav-item { min-height: 44px; }

  /* tables remain horizontally swipeable, never clip the page */
  .dwrap, .tablewrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* the in-body page title duplicates the app-bar title on phone (one fact, one
     place) — the app bar always carries it, so drop the redundant H1; keep the
     sub-line + actions as the page's context strip. */
  .pagehead h1 { display: none; }
  .pagehead { display: block; margin-bottom: var(--space-5); }
  .pagehead-sub { margin-top: 0; }
  /* WIDE TABLES → stacked labelled CARD rows on phone (gmail log, device tokens).
     Opt-in via `.dtable.cards` so untouched tables keep their desktop layout. Each
     <td> shows its column name (data-label) inline; a `.cardhead` cell is the row's
     bold title. No more right-edge clipping. */
  .dtable.cards, .dtable.cards tbody, .dtable.cards tr, .dtable.cards td { display: block; width: auto; }
  .dtable.cards thead { display: none; }
  .dtable.cards tr { border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--panel); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
  .dtable.cards td { display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-6); padding: 4px 0; border: none; text-align: right; min-height: 0; font-size: var(--text-sm); }
  .dtable.cards td::before { content: attr(data-label); flex: 0 0 auto; text-align: left;
    color: var(--muted-2); font-family: var(--font-sans); font-size: var(--text-2xs);
    text-transform: uppercase; letter-spacing: var(--tracking-label); }
  .dtable.cards td[data-label=""]::before { display: none; }
  .dtable.cards td:empty { display: none; }
  .dtable.cards td.num { font-family: var(--font-mono); color: var(--muted); }
  .dtable.cards td.cardhead { display: block; text-align: left; padding: 0 0 6px;
    margin-bottom: 4px; border-bottom: 1px solid var(--border);
    font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text);
    overflow-wrap: anywhere; }
  .dtable.cards td.cardhead::before { display: none; }
  .dtable.cards td[colspan] { text-align: center; }
  .dtable.cards td[colspan]::before { display: none; }

  /* kanban: full-width snapping columns; collapsed stay narrow */
  .col { flex: 0 0 88vw; min-width: 88vw; max-width: 88vw; scroll-snap-align: start; }
  .col.collapsed { flex: 0 0 44px; min-width: 44px; max-width: 44px; }

  /* split detail + peek dialog go full width, stacked, with internal scroll */
  .detail3 { grid-template-columns: 1fr; gap: 16px; }
  .d3-side { position: static; }
  /* MASTER/DETAIL SPLITS → single column on phone. The base grid defs
     (.inbox-split 384px 1fr, .threads-split 340px 1fr, .cl-split, .mtg-split) sit
     LATER in source, so a plain `.inbox-split{}` here loses the cascade — scope
     with `main.cscreen` to win. (This is why the inbox detail was crushed to a
     46px sliver before.) */
  main.cscreen .inbox-split, main.cscreen .threads-split,
  main.cscreen .cl-split, main.cscreen .mtg-split, main.cscreen .dx-split {
    display: flex; flex-direction: column; grid-template-columns: none; height: auto; min-height: 100%; }
  main.cscreen .cl-aside, main.cscreen .mtg-aside, main.cscreen .dx-slist {
    border-right: none; border-bottom: 1px solid var(--border); overflow: visible; }
  main.cscreen .cl-detail, main.cscreen .mtg-detail, main.cscreen .dx-detail { min-height: 0; overflow: visible; }
  /* MASTER/DETAIL = list-first navigation, like a native mail/chat app: show the
     LIST full-width; selecting an item (?sel=/?c=/?m= in the URL → .console.sel-mode
     via JS) swaps to the DETAIL full-screen with a back-to-list button in the header.
     No more scrolling past 100 arrivals — or stacking a bleeding split — to read one
     item. Covers inbox (.in-detail), threads (.th-detail), clients + reuniones (also
     .in-detail), and borradores (.dx-detail). */
  main.cscreen .inbox-aside, main.cscreen .th-aside {
    border-right: none; overflow: visible; width: auto; }
  main.cscreen .in-list-scroll, main.cscreen .th-slist { overflow: visible; }
  main.cscreen .in-detail, main.cscreen .th-detail { min-height: 0; height: auto; }
  .console:not(.sel-mode) .in-detail, .console:not(.sel-mode) .th-detail,
  .console:not(.sel-mode) .dx-detail { display: none; }
  .console.sel-mode .inbox-aside, .console.sel-mode .th-aside,
  .console.sel-mode .cl-aside, .console.sel-mode .mtg-aside,
  .console.sel-mode .dx-slist { display: none; }
  .console.sel-mode .in-detail, .console.sel-mode .th-detail,
  .console.sel-mode .dx-detail { display: flex; }
  /* in a focused item, the list-context tools (search/filters/create/toggles) are
     noise — hide the action toolbar; the back button replaces them. */
  .console.sel-mode .ctop-actions { display: none; }
  .console.sel-mode .ctop.has-actions { border-bottom: 1px solid var(--border); }
  .console.sel-mode .mback { display: inline-flex; }
  .peekdlg { width: 100vw; max-width: 100vw; margin: 0; }
  .peek-body { max-height: 100dvh; border-left: none; border-radius: 0; }

  /* stat cards: 2-up, single column when very narrow; forms full-width */
  .statrow { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cluster { width: 100%; }

  /* TAP TARGETS: the .sm variant (26px) and other compact controls override the
     global 44px rule — restore comfortable touch sizes on phone without touching
     desktop. */
  button.sm, .btn.sm { height: 44px; min-height: 44px; padding: 0 14px; font-size: var(--text-sm); }
  /* the notif bell pins its own 32px box (later, equal-specificity rule wins) —
     beat it with a more specific selector to get a real touch target */
  .ctop .cnotif-btn, button.cnotif-btn { width: 44px; height: 44px; min-height: 44px; }
  /* inbox client-assignment rows + checklist-note toggles + inline action links */
  button.assign-opt, .assign-list .assign-opt { min-height: 44px; }
  button.note-item { min-height: 44px; padding: var(--space-3) 0; }
  .linkbtn { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--space-3); }
  /* inputs/selects are padding-sized (~34px) — give them a tappable floor */
  input:not([type=file]):not([type=checkbox]):not([type=radio]), select, textarea { min-height: 44px; }
  .fact-sel, select.fact-sel, .ds-input, .ds-select { min-height: 44px; }
  a.tl-chip, .tl-filters .tl-chip { min-height: 44px; height: 44px; padding: 0 var(--space-5); }
  /* topbar action buttons (Procesar con IA, etc.) inherit the bare 32px button —
     give them a full touch target */
  .ctop button, .ctop > .btn { min-height: 44px; height: 44px; }
  a.fl-filter { min-height: 44px; height: 44px; }
  .view-seg button, .view-seg a { width: 44px; height: 40px; min-height: 40px; }
  .peek-head .peek-open, .peek-head .peek-x { width: 40px; height: 40px; min-height: 40px; }
  .tl-clientsel, .tl-clientsel.tl-clientsel { min-height: 44px; }
  input[type=file] { min-height: 44px; }
  .brief-ed summary, details > summary { min-height: 44px; display: flex; align-items: center; }

  /* FLEET: reflow the rigid 9-col grid into readable cards — name+host prominent,
     instance count + caret on the right; noisy/empty columns hidden (full data on
     the row's detail). No more sideways-scrolling a crammed table. */
  /* NOTE: these component rules live LATER in the source than this @media block,
     so plain `.fl-row{}` etc. lose the cascade (equal specificity, later wins).
     Scope with `.cmain ` to win — the components all render inside .cmain. */
  .cmain .fl-table { overflow: visible; }
  .cmain .fl-detail { min-width: 0; }
  .cmain .fl-head { display: none; }
  .cmain .fl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 0; padding: 13px 6px; }
  .cmain .fl-row > * { min-width: 0; }
  .cmain .flc-status { flex: 0 0 auto; }
  .cmain .flc-name { flex: 1 1 auto; }
  .cmain .flc-inst { flex: 0 0 auto; white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
  .cmain .flc-inst::after { content: " inst"; color: var(--muted-2); }
  .cmain .flc-caret { flex: 0 0 auto; }
  .cmain .flc-region, .cmain .flc-bars, .cmain .flc-clients, .cmain .flc-load, .cmain .flc-up { display: none; }
  .cmain .fl-summary { grid-template-columns: repeat(3, 1fr); }
  .cmain .fl-toolbar { flex-wrap: wrap; }
  /* TASKS list view + CLIENTS stat grid: reflow / fewer columns so nothing crams */
  .cmain .tl-rowhead { display: none; }
  .cmain .tq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-height: 0; padding: 12px 14px; }
  .cmain .tq-row > * { min-width: 0; }
  .cmain .cl-stats { grid-template-columns: repeat(2, 1fr); }

  /* FILTER STRIPS — status/segmented filters were wrapping into 2–3 messy rows.
     On phone they become a single horizontally-scrollable, sticky strip (native
     "filter bar" pattern): swipe through chips, they pin under the header while
     the list scrolls. Edge-to-edge, hidden scrollbar. */
  .cmain .tl-filters { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--space-3);
    padding: 10px 14px; margin: 0 -14px; position: sticky; top: 0; z-index: 3;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .cmain .tl-filters::-webkit-scrollbar { display: none; }
  .cmain .tl-filters > * { flex: 0 0 auto; }
  /* affordance: fade at the right edge signals there are more chips to swipe */
  .cmain .tl-filters { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .cmain .tl-filters .csearch, .cmain .tl-filters .csearch input { max-width: 150px; }
  .cmain .tl-chip, a.tl-chip { height: 36px; min-height: 36px; border-radius: var(--radius-full); }
  /* the client <select> sits inline in the strip, not stretched full-width */
  .cmain .tl-filters .tl-clientsel { width: auto; max-width: 60vw; }
  /* fleet segmented control: let all four options scroll rather than truncate */
  .cmain .fl-filters { overflow-x: auto; max-width: 100%; scrollbar-width: none; flex-wrap: nowrap; }
  .cmain .fl-filters::-webkit-scrollbar { display: none; }
  .cmain .fl-filter { flex: 0 0 auto; }
  /* fleet stat tiles: dial the oversized mono numbers down to a balanced ramp */
  .cmain .ft-n { font-size: var(--text-xl); }
  .cmain .ft-l { font-size: var(--text-3xs); }
  .cmain .fl-tile { padding: var(--space-5) var(--space-6); }
  /* fleet row: drop the redundant warning triangle, keep the status dot */
  .cmain .flc-status .fl-flag { display: none; }

  /* PEEK overlay (reuses _action_card): make its decision buttons full-width and
     ≥44px so approving/answering from the board peek is as easy as in the detail. */
  .peek-body .ac-actions, .peek-body .ac-primary { display: flex; flex-direction: column; gap: var(--space-4); }
  .peek-body .ac-actions form, .peek-body .ac-primary form { display: flex; width: 100%; }
  .peek-body .ac-actions button, .peek-body .ac-primary button,
  .peek-body button.resend {
    width: 100%; height: 46px; min-height: 46px; font-size: var(--text-sm); }
  .peek-body textarea { font-size: 16px; }
  .peek-body input[type=file] { min-height: 44px; }

  /* ===== Run-2 pixel pass: DS list-row shape for reuniones · threads · fleet ·
     gmail · devices. All .cmain-scoped and appended at the END of this block so
     they win the cascade (esp. fleet, over run-1's .cmain .flc-bars{display:none}). */

  /* REUNIONES row → 34px video-icon lead + title-led body */
  .cmain .mtg-lhead { display: none; }
  .cmain .mtg-row { display: flex; align-items: flex-start; gap: var(--space-5);
    grid-template-columns: none; padding: 11px var(--space-6); border-left: none; }
  .cmain .mtg-row .mr-dot { display: none; }
  .cmain .mtg-row .mr-ic { display: inline-flex; width: 34px; height: 34px; flex: none;
    border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--border);
    align-items: center; justify-content: center; color: var(--muted); }
  .cmain .mtg-row.active .mr-ic { border-color: var(--orange-border); color: var(--orange); }
  .cmain .mtg-row .mr-main { flex: 1; }
  .cmain .mtg-row .mr-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-base);
    font-weight: var(--weight-semibold); color: var(--text); line-height: var(--leading-snug); }
  .cmain .mtg-row .mr-client { font-size: var(--text-sm); }
  .cmain .mtg-row .mr-meta { display: flex; flex-wrap: wrap; margin-top: 2px; }

  /* THREADS row → 34px kind-icon lead (orange ring when waiting_operator) + title-led body */
  .cmain .th-srow { flex-direction: row; align-items: flex-start; gap: var(--space-5);
    padding: 11px var(--space-6); border-left: none; }
  .cmain .th-sic { display: inline-flex; width: 34px; height: 34px; border-radius: var(--radius-sm);
    background: var(--panel-2); border: 1px solid var(--border); align-items: center;
    justify-content: center; color: var(--muted); flex: none; }
  .cmain .th-srow.needs .th-sic { border-color: var(--orange-border); color: var(--orange); }
  .cmain .th-smain { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  .cmain .th-smain .th-stitle { order: 1; white-space: normal; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
  .cmain .th-smain .th-sr2 { order: 2; flex-wrap: wrap; gap: var(--space-3); }
  .cmain .th-smain .th-sr1 { order: 3; flex-wrap: wrap; gap: var(--space-3); }
  .cmain .th-smain .th-kindtag { display: none; }
  .cmain .th-smain .spacer { display: none; }

  /* FLEET: reveal CPU/MEM/DISK as DS .metric/.bar mini-bars on a wrapped line */
  .cmain .flc-bars { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
    flex: 0 0 100%; order: 99; margin-top: 10px; min-width: 0; }
  .cmain .flc-bars .fl-bar { display: grid; grid-template-columns: 1fr auto;
    grid-template-rows: auto auto; column-gap: var(--space-3); row-gap: 4px; align-items: center; }
  .cmain .flc-bars .fb-k { grid-column: 1; grid-row: 1; font-size: 10px; color: var(--muted-2); }
  .cmain .flc-bars .fb-v { grid-column: 2; grid-row: 1; text-align: right;
    font-size: 10px; color: var(--text); font-weight: var(--weight-semibold); }
  .cmain .flc-bars .fb-track { grid-column: 1 / -1; grid-row: 2; height: 5px; }
  .cmain .fl-row > .fl-host { display: none; }

  /* GMAIL log: .dtable.cards rows nudged toward .row (scoped .gmail-log) */
  .cmain .dtable.cards.gmail-log tr { padding: 11px var(--space-6); }
  .cmain .dtable.cards.gmail-log td[data-label="asunto"],
  .cmain .dtable.cards.gmail-log td[data-label="motivo"] {
    justify-content: flex-start; text-align: left; color: var(--muted);
    font-size: var(--text-sm); line-height: var(--leading-snug); }
  .cmain .dtable.cards.gmail-log td[data-label="asunto"]::before,
  .cmain .dtable.cards.gmail-log td[data-label="motivo"]::before { display: none; }

  /* DISPOSITIVOS token cards → 34px device-icon lead on the card head (scoped .devcards) */
  .cmain .dtable.cards.devcards td.cardhead { display: flex; align-items: center; gap: var(--space-4); justify-content: flex-start; }
  .cmain .dtable.cards.devcards td.cardhead .dv-ic {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); }
}

/* KANBAN ≤1024 (tablet + phone): repeat(4,1fr)+overflow:hidden crushed columns
   to ~170px on tablets — swipeable snap columns at a comfortable width instead. */
@media (max-width: 1024px) {
  .tk-cols { display: flex; grid-template-columns: none; overflow-x: auto;
    overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: var(--space-5); padding: var(--space-6) var(--space-5); }
  .tk-col { flex: 0 0 min(360px, 82vw); min-width: min(360px, 82vw);
    max-width: min(360px, 82vw); scroll-snap-align: start; }
  .tk-colcards { overflow-y: visible; }
}

/* very narrow phones: stat cards collapse to one column */
@media (max-width: 380px) {
  .statrow { grid-template-columns: 1fr; }
}

/* coarse pointers (touch) get comfortable hit areas regardless of width */
@media (pointer: coarse) and (max-width: 860px) {
  .cnav-item, .cnotif-btn, .btn, .ccreate { min-height: 44px; }
}

/* ===========================================================================
   SCREEN LAYERS — per-screen DS classes (pasted from the kit; resets &
   full-viewport wrappers stripped; .card/.detail/.pending/.quote renamed to
   .dcard/.in-detail/.dpending/.dquote to avoid clobbering legacy screens).
   =========================================================================== */
.spacer { flex: 1; }
.view-seg { display: flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
.view-seg button, .view-seg a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 24px; min-height: 24px; border: none; background: none; color: var(--muted-2); border-radius: var(--radius-xs); cursor: pointer; }
.view-seg button:hover, .view-seg a:hover { color: var(--text); } .view-seg button.on, .view-seg a.on { background: var(--panel-3); color: var(--text); }
.block-label { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-5); }
.media-list { display: flex; flex-direction: column; gap: var(--space-5); }
.media-note { font-size: var(--text-xs); color: var(--muted-2); margin-bottom: var(--space-3); }

/* ---- INBOX ---- */
.inbox-split { flex: 1; display: grid; grid-template-columns: 384px 1fr; min-height: 0; height: 100%; }
.inbox-aside { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg); }
.in-list-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); }
.ilh-count { font-size: var(--text-xs); color: var(--muted); font-weight: var(--weight-medium); }
.ilh-needs { color: var(--orange); }
.in-list-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.in-list { display: flex; flex-direction: column; }
.in-fchip { flex: none; display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) var(--space-6) 0;
  padding: 6px 10px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--orange);
  background: var(--orange-soft); border: 1px solid var(--orange-border); border-radius: var(--radius-sm); }
.in-fchip .ic { flex: none; }
.in-fchip-x { margin-left: auto; display: inline-flex; align-items: center; color: var(--muted); border-radius: var(--radius-sm); padding: 1px; }
.in-fchip-x:hover { color: var(--text); background: var(--raised); }
.grp { display: flex; flex-direction: column; }
.grp-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-3); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--muted-2); position: sticky; top: 0; background: var(--bg); z-index: 1; }
.grp-head .grp-count { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); background: var(--panel-2); padding: 1px 7px; border-radius: var(--radius-full); }
.grp-head.urgent .grp-count { color: var(--orange); background: var(--orange-soft); }
.in-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: start; gap: var(--space-5); width: 100%; text-align: left; padding: var(--space-5) var(--space-6); background: none; border: none; border-bottom: 1px solid var(--border); border-left: 2px solid transparent; cursor: pointer; font-family: inherit; color: inherit; transition: background var(--dur-fast) var(--ease); }
.in-row:hover { background: var(--panel); }
.in-row.active { background: var(--panel); border-left-color: var(--muted-2); }
.in-row.unread .ir-title { color: var(--text); font-weight: var(--weight-semibold); }
.in-row.urgent { border-left-color: var(--orange); }
.ir-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--text); flex: none; align-self: center; }
.ir-chan { display: flex; padding-top: 2px; }
.ir-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ir-line1 { display: flex; align-items: baseline; gap: var(--space-4); }
.ir-client { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir-noclient { display: inline-flex; align-items: center; gap: 4px; color: var(--orange); }
.ir-time { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); flex: none; }
.ir-title { font-size: var(--text-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir-preview { font-size: var(--text-xs); color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir-pills { display: flex; align-items: center; gap: var(--space-3); margin-top: 2px; }
.ir-assign { display: inline-flex; align-items: center; align-self: center; }
.in-detail { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--panel-2); }
.detail-head { flex: none; padding: var(--space-6) var(--space-8); border-bottom: 1px solid var(--border); background: var(--bg); display: flex; flex-direction: column; gap: var(--space-4); }
.dh-top { display: flex; align-items: center; gap: var(--space-4); }
.dh-from { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.dh-meta { font-size: var(--text-xs); color: var(--muted-2); } .dh-time { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
.dh-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0; letter-spacing: var(--tracking-tight); }
.dh-pills { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.detail-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: var(--space-8) var(--space-8) 150px; display: flex; flex-direction: column; gap: var(--space-7); }
.detail-client { display: flex; align-items: center; gap: var(--space-5); }
.src-block { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.src-head { display: flex; align-items: center; gap: var(--space-4); }
.src-kind { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); font-weight: var(--weight-semibold); }
.src-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text); }
.src-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
.src-kv { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-5); align-items: baseline; }
.src-k { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); }
.src-v { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text); word-break: break-all; }
.msg-body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); white-space: pre-wrap; }
.msg-quote { margin-top: var(--space-5); border-left: 2px solid var(--border-strong); padding-left: var(--space-6); color: var(--muted); font-size: var(--text-base); line-height: var(--leading-normal); }
/* thread package card — "Completá antes de enviar" blockers */
.pkg-falta { background: var(--amber-soft); border: 1px solid var(--amber-border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); margin: var(--space-5) 0; }
.falta-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.falta-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--text); }
.falta-list li svg { color: var(--amber); flex: none; margin-top: 2px; }
/* opportunity (lead) link / attach picker in the inbox detail */
.opp { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); }
.opp.linked { display: flex; align-items: center; gap: var(--space-5); }
.opp-l { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; flex: none; }
.opp-link { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--orange); font-weight: var(--weight-semibold); text-decoration: none; font-size: var(--text-sm); }
.opp-link:hover { text-decoration: underline; }
.opp summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text); }
.opp summary::-webkit-details-marker { display: none; }
.opp .assign { margin-top: var(--space-5); }
/* email conversation (Gmail-style thread) */
.conv { display: flex; flex-direction: column; gap: var(--space-5); }
.conv-msg { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.conv-msg.out { background: var(--panel-2); border-color: var(--blue-border); margin-left: var(--space-7); }
.conv-msg.focus { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange-border) inset; }
.conv-head { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); }
.conv-av { width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: #fff; font-size: var(--text-2xs); font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; flex: none; }
.conv-who { font-weight: var(--weight-semibold); color: var(--text); display: flex; align-items: center; gap: var(--space-3); }
.conv-msg.out .conv-who { color: var(--blue); }
.conv-at { margin-left: auto; color: var(--muted-2); font-size: var(--text-xs); }
.conv-quoted { margin-top: var(--space-4); }
.conv-quoted summary { cursor: pointer; color: var(--muted-2); font-size: var(--text-xs); list-style: none; display: inline-flex; align-items: center; gap: var(--space-3); padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-full); }
.conv-quoted summary::-webkit-details-marker { display: none; }
.conv-quoted-body { margin-top: var(--space-4); border-left: 2px solid var(--border-strong); padding-left: var(--space-6); color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-normal); white-space: pre-wrap; }
.conv-media { display: flex; flex-direction: column; gap: var(--space-4); }
.conv-tasks { display: flex; flex-direction: column; gap: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-5); }
.conv-tasks-l { font-size: var(--text-xs); color: var(--muted-2); display: flex; align-items: center; gap: var(--space-3); }
.conv-task { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.conv-task:hover { border-color: var(--border-strong); background: var(--panel-2); }
.conv-task .tr-id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
.conv-task .tr-title { flex: 1; font-size: var(--text-sm); }
.conv-acts { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: var(--space-5); }
.conv-acts-hint { font-size: var(--text-xs); color: var(--muted-2); display: flex; align-items: center; gap: var(--space-3); }
.mk-task summary { cursor: pointer; list-style: none; font-size: var(--text-sm); color: var(--blue); display: inline-flex; align-items: center; gap: var(--space-3); }
.mk-task summary::-webkit-details-marker { display: none; }
.mk-form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.mk-form input, .mk-form textarea, .mk-form select { width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4); color: var(--text); font-size: var(--text-sm); font-family: inherit; }
.mk-row { display: flex; gap: var(--space-4); align-items: center; }
.mk-row select { flex: 1; }
.task-list { display: flex; flex-direction: column; gap: var(--space-4); }
.task-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.task-row .tr-id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); flex: none; }
.task-row .tr-title { font-size: var(--text-sm); color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row .tr-link { font-size: var(--text-xs); color: var(--blue); flex: none; }
.reply-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); }
.reply-box.sent { border-color: var(--green-border); }
.reply-text { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-foot { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); flex-wrap: wrap; }
.reply-sent { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: var(--text-xs); }
.assign { background: var(--panel); border: 1px solid var(--orange-border); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.assign-head { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.assign-hint { margin-left: auto; font-size: var(--text-2xs); color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; }
.assign-opt { display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-4); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; text-align: left; min-height: 0; }
.assign-opt:hover { background: var(--panel-2); }
.assign-opt .assign-av { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--orange); color: #fff; font-size: 10px; font-weight: var(--weight-bold); flex: none; }
.assign-opt .assign-nm { flex: 1; font-size: var(--text-sm); color: var(--text); }
.assign-opt .ic { color: var(--muted-2); }
.reassign { display: inline-block; }
.reassign > summary { list-style: none; cursor: pointer; display: inline-flex; }
.reassign > summary::-webkit-details-marker { display: none; }
.reassign > summary::before { content: none; }
.reassign[open] > .assign { margin-top: var(--space-4); max-width: 360px; }
.clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.clamp-6 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.rail-more { margin-top: var(--space-5); }
.rail-more > summary { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); }
.dest-line { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); display: flex; flex-direction: column; gap: 3px; }
/* image lightbox — contained overlay, not full-bleed */
.lb { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); backdrop-filter: blur(3px); padding: var(--space-9); }
.lb.show { display: flex; }
.lb img { max-width: 80vw; max-height: 82vh; border-radius: var(--radius-md); border: 1px solid var(--border-strong); box-shadow: var(--shadow-pop); background: var(--bg); }
.lb-x { position: absolute; top: var(--space-7); right: var(--space-7); width: 36px; height: 36px; min-height: 36px; border-radius: var(--radius-full); background: var(--panel-2); border: 1px solid var(--border-strong); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lb-x:hover { background: var(--panel-3); }
/* spawn toggle (action bar) */
.spawn-toggle { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--muted); cursor: pointer; min-height: 0; background: none; border: none; }
/* higher specificity than the F5 global checkbox rule: this one must stay hidden */
.spawn-toggle input[type="checkbox"] { display: none; }
.spawn-toggle .spawn-box { width: 18px; height: 18px; border-radius: var(--radius-xs); border: 1px solid var(--border-strong);
  background: var(--panel-2); flex: none; display: inline-flex; align-items: center; justify-content: center;
  background-repeat: no-repeat; background-position: center; background-size: 13px 13px;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.spawn-toggle:hover .spawn-box { border-color: var(--blue); }
.spawn-toggle input:checked ~ .spawn-box { background-color: var(--blue); border-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.2 11.5 13 4.5'/%3E%3C/svg%3E"); }
.detail-bar { position: absolute; left: var(--space-7); right: var(--space-7); bottom: var(--space-6); margin: 0 auto; max-width: 620px; z-index: 20; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6); background: rgba(20,20,24,.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.db-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.db-hint { display: inline-flex; align-items: center; flex: none; gap: var(--space-3); font-size: var(--text-xs); color: var(--muted-2); white-space: nowrap; }

/* ---- TASKS (list + kanban) ---- */
.tl-screen { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tl-filters { flex: none; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-7); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tl-chip { display: inline-flex; align-items: center; gap: var(--space-3); height: 28px; min-height: 28px; padding: 0 var(--space-5); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; }
.tl-chip:hover { color: var(--text); }
.tl-chip.on { background: var(--panel-3); border-color: var(--border-strong); color: var(--text); }
.tl-chip .tl-n { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.tl-chip.on .tl-n { color: var(--text); }
.tl-chip.alert .tl-n { color: var(--red); }
.tl-spacer { flex: 1 1 auto; }
.tl-clientsel { height: 28px; padding: 0 var(--space-4); background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--text-xs);
  font-weight: var(--weight-medium); cursor: pointer; max-width: 220px; }
.tl-clientsel:hover { border-color: var(--border-strong); }
.tl-list { flex: 1; min-height: 0; overflow-y: auto; }
.tl-rowhead, .tq-row { display: grid; grid-template-columns: 40px 60px 1fr 170px 124px 72px; align-items: center; gap: var(--space-4); padding: 0 var(--space-7); }
.tl-rowhead { height: 34px; position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--border); z-index: 1; }
.tl-rowhead span { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); font-weight: var(--weight-semibold); }
.tq-row { min-height: 52px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); border-left: 2px solid transparent; cursor: pointer; font-family: inherit; color: inherit; transition: background var(--dur-fast) var(--ease); }
.tq-row:hover { background: var(--panel); border-left-color: var(--muted-2); }
.tl-id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
.tl-title { font-size: var(--text-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-age { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); text-align: right; }
.tl-empty { padding: var(--space-9); text-align: center; color: var(--muted-2); font-size: var(--text-sm); }
.tl-group { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-7) var(--space-3); background: var(--bg); position: sticky; top: 34px; z-index: 1; }
.tl-gdot { width: 6px; height: 6px; border-radius: var(--radius-full); flex: none; opacity: .85; }
.tl-glabel { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); font-weight: var(--weight-semibold); }
.tl-gcount { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.tk-wrap { flex: 1; min-height: 0; min-width: 0; display: flex; }
.tk-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); width: 100%; padding: var(--space-7); overflow: hidden; min-height: 0; }
.tk-col { display: flex; flex-direction: column; gap: var(--space-5); min-height: 0; }
.tk-colhead { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--muted-2); }
.tk-colhead.alert { color: var(--red); }
.tk-cn { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); background: var(--panel-2); padding: 1px 7px; border-radius: var(--radius-full); }
.tk-colcards { display: flex; flex-direction: column; gap: var(--space-4); overflow-y: auto; min-height: 0; padding-bottom: var(--space-7); }
.tk-card { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; text-align: left; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); cursor: pointer; font-family: inherit; color: inherit; transition: border-color var(--dur-fast) var(--ease); }
.tk-card:hover { border-color: var(--border-strong); }
.tk-c1 { display: flex; align-items: center; gap: var(--space-3); }
.tk-cid { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.tk-ctitle { font-size: var(--text-sm); color: var(--text); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tk-cfoot { display: flex; align-items: center; gap: var(--space-4); width: 100%; }
.tk-cfoot > :last-child { margin-left: auto; }
.tk-empty { color: var(--muted-2); font-size: var(--text-xs); padding: var(--space-5); }

/* ---- TASK DETAIL ---- */
.tx { padding: var(--space-8); }
.hdr { display: flex; align-items: flex-start; gap: var(--space-6); }
.hdr-id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
.hdr-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 4px 0 0; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.hdr-right { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--space-4); }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); }
.fact { display: flex; align-items: center; gap: var(--space-4); }
.fact .k { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); }
.fact .v { font-size: var(--text-sm); color: var(--text); }
.fact .v.mono { font-family: var(--font-mono); }
.prose { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); white-space: pre-wrap; }
/* .quote is aliased to the DS .dquote look: legacy call-sites (drafts / mensaje
   original) render styled without touching their markup. .panel .quote (higher
   specificity) keeps the old panel style on legacy screens. */
.dquote, .quote { border-left: 2px solid var(--border-strong); padding: 2px 0 2px var(--space-6); color: var(--muted); font-size: var(--text-base); line-height: var(--leading-normal); }
.dcard { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); }
.dcard.pad { padding: var(--space-6); }
.draised { background: var(--panel-2); }
.sep { height: 1px; background: var(--border); margin: var(--space-7) 0; border: none; }
.gap5 > * + * { margin-top: var(--space-5); } .gap6 > * + * { margin-top: var(--space-6); } .gap7 > * + * { margin-top: var(--space-7); }
.thread { display: flex; flex-direction: column; }
.ev { display: grid; grid-template-columns: 30px 1fr; gap: var(--space-5); position: relative; padding-bottom: var(--space-7); }
.ev:last-child { padding-bottom: 0; }
.ev::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: 0; width: 1px; background: var(--border); }
.ev:last-child::before { display: none; }
.ev-dot { width: 30px; height: 30px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--muted); z-index: 1; flex: none; }
.ev.operator .ev-dot { border-color: var(--orange-border); background: var(--orange-soft); color: var(--orange); }
.ev.ai .ev-dot { border-color: var(--blue-border); background: var(--blue-soft); color: var(--blue); }
.ev.worker .ev-dot { color: var(--text); }
.ev.alert .ev-dot { border-color: var(--red-border); background: var(--red-soft); color: var(--red); }
.ev-head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.ev-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.ev-actor { font-size: var(--text-2xs); letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--radius-xs); }
.ev-actor.operator { color: var(--orange); background: var(--orange-soft); }
.ev-actor.ai { color: var(--blue); background: var(--blue-soft); }
.ev-actor.worker { color: var(--muted); background: var(--panel-3); }
.ev-actor.system { color: var(--muted-2); background: var(--panel-2); }
.ev-at { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.ev-link { font-size: var(--text-xs); color: var(--blue); }
.ev-link:hover { text-decoration: underline; }
.ev-head .ev-link { margin-left: var(--space-4); }
.block-label .ev-link { margin-left: auto; font-weight: var(--weight-regular); text-transform: none; letter-spacing: 0; }
.ev-detail { font-size: var(--text-sm); color: var(--muted); margin-top: 3px; line-height: var(--leading-snug); }
.ev-body { margin-top: var(--space-4); }
.diff { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-xs); }
.diff .from { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--red); }
.diff .to { color: var(--green); font-weight: var(--weight-medium); }
.needs { margin-top: var(--space-5); padding: var(--space-5) var(--space-6); background: var(--amber-soft); border: 1px solid var(--amber-border); border-radius: var(--radius-sm); }
.needs .nq { display: flex; gap: var(--space-4); font-size: var(--text-sm); color: var(--text); }
.needs .ic { color: var(--amber); flex: none; margin-top: 1px; }
.err { margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--red); background: var(--red-soft); border: 1px solid var(--red-border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); }
.summary { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.actions-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.actions-list li { display: flex; gap: var(--space-4); font-size: var(--text-sm); color: var(--muted); }
.actions-list .ic { color: var(--green); flex: none; margin-top: 1px; }
.reply-draft { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-6); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); }
.reply-chan { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); text-transform: uppercase; }
.reply-att { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); font-size: var(--text-xs); color: var(--muted); }
.reply-att svg { color: var(--muted); flex: none; }
.reply-att.none { color: var(--amber); }
.audit { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-xs); color: var(--green); }
.exec-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.exec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-5); }
.exec-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.exec-cell .ek { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); }
.exec-cell .ev { font-size: var(--text-sm); color: var(--text); }
.exec-cell .ev.mono { font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.exec-diff { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.exec-diff .ek { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); }
.exec-diff .ev.mono { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.exec-cmd { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: var(--space-4) var(--space-5); word-break: break-all; line-height: var(--leading-snug); }
.live { display: flex; flex-direction: column; gap: var(--space-4); background: var(--panel); border: 1px solid var(--amber-border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); }
.live-top { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); color: var(--text); }
.live-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--amber); flex: none; animation: aiops-pulse 1.5s var(--ease) infinite; }
.live-bar { height: 4px; background: var(--panel-3); border-radius: var(--radius-full); overflow: hidden; }
.live-bar span { display: block; height: 100%; background: var(--amber); border-radius: var(--radius-full); }
.live-meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.dpending { border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--panel); overflow: hidden; }
.dpending-head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); }
.dpending-head .pt { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.dpending-head .ps { font-size: var(--text-xs); color: var(--muted); }
.dpending-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.dpending-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.dpending.tone-approve { border-color: var(--blue-border); } .dpending.tone-approve .dpending-head { background: var(--blue-soft); color: var(--blue); }
.dpending.tone-answer { border-color: var(--amber-border); } .dpending.tone-answer .dpending-head { background: var(--amber-soft); color: var(--amber); }
.dpending.tone-review { border-color: var(--green-border); } .dpending.tone-review .dpending-head { background: var(--green-soft); color: var(--green); }
.dpending.tone-alert { border-color: var(--red-border); } .dpending.tone-alert .dpending-head { background: var(--red-soft); color: var(--red); }
.dpending.tone-idle .dpending-head { background: var(--panel-2); color: var(--muted); }
.done-strip { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); font-size: var(--text-sm); }
.done-strip.ok { background: var(--green-soft); border: 1px solid var(--green-border); color: var(--green); }
.done-strip.mut { background: var(--tone-neutral-soft); border: 1px solid var(--tone-neutral-border); color: var(--muted); }
.state-hero { display: flex; flex-direction: column; gap: var(--space-4); }
.td-host { flex: 1; min-height: 0; display: flex; }
.dirH { display: flex; height: 100%; min-height: 0; width: 100%; }
.dirH-context { width: 340px; flex: none; overflow-y: auto; min-height: 0; padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); border-right: 1px solid var(--border); }
.dirH-context .hdr-title { font-size: var(--text-md); }
.dirH-command { position: relative; flex: 1; display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; background: var(--panel-2); }
.dirH-hero { flex: none; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-8); border-bottom: 1px solid var(--border); background: var(--bg); }
.dirH-hero .sh-name { font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); flex: none; }
.dirH-hero .sh-head { font-size: var(--text-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dirH-feed { flex: 1; overflow-y: auto; padding: var(--space-8) var(--space-8) 168px; display: flex; flex-direction: column; gap: var(--space-7); min-height: 0; }
/* tall "answer" bar (N worker questions) floats higher → reserve more space so
   the suggested-reply panel can scroll clear of it instead of hiding behind it */
.dirH-command.cmd-tallbar .dirH-feed { padding-bottom: 470px; }
.notes-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); }
.notes-list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.note-item { display: flex; gap: var(--space-4); align-items: flex-start; font-size: var(--text-xs); color: var(--text); line-height: var(--leading-snug); }
.exec-hint { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); border-radius: var(--radius-md); background: var(--panel-2); border: 1px solid var(--border); }
.exec-hint .ic { color: var(--muted-2); margin-top: 1px; flex: none; }
.exec-t { display: flex; flex-direction: column; gap: 1px; font-size: var(--text-xs); color: var(--muted); line-height: 1.35; }
.exec-t b { color: var(--text); font-weight: var(--weight-semibold); }
.exec-function { background: var(--orange-soft); border-color: var(--orange-border); }
.exec-function .ic { color: var(--orange); }
.dirH-bar { position: absolute; bottom: 24px; left: 0; right: 0; max-width: 540px; margin: 0 auto; z-index: 30; padding: var(--space-5) var(--space-6); background: rgba(20,20,24,.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: var(--space-4); }
.dirH-bar.tone-approve { border-color: var(--blue-border); }
.dirH-bar.tone-answer { border-color: var(--amber-border); }
.dirH-bar.tone-review { border-color: var(--green-border); }
.dirH-bar.tone-alert { border-color: var(--red-border); }
/* phone: the fixed 340px context rail crushes the command/thread pane to a sliver
   (text wraps one word per line) — stack the panes vertically and give the command
   pane the full width. */
@media (max-width: 767px) {
  /* The task detail is ONE natural page scroll on phone. The desktop chat-pane
     (.dirH-feed: flex:1 + overflow-y:auto) collapses to a ~244px peephole holding
     thousands of px of timeline/result/attachments — un-constrain it so EVERY detail
     (spec, message, worker timeline, RESULTADO, evidence, PDF) is visible by scrolling
     the whole page. main un-flushes so it's the single scroller. */
  main.cscreen.flush { overflow-y: auto; display: block; }
  .dirH { flex-direction: column; height: auto; min-height: 0; }
  /* the conversation/decision pane leads on phone; the context rail follows */
  .dirH-command { height: auto; min-height: 0; flex: none; order: 1; }
  .dirH-feed { flex: none; overflow: visible; height: auto; min-height: 0; }
  .dirH-context { width: auto; flex: none; order: 2; border-right: none;
    border-bottom: none; border-top: 1px solid var(--border); }
  /* let the action-bar foot wrap instead of squeezing the toggle to one-word-per-line */
  .bar-foot, .db-foot { flex-wrap: wrap; }
  .bar-foot .spacer, .db-foot .spacer { flex-basis: 100%; height: 0; }
  .bar-foot .spawn-toggle { flex-basis: 100%; }
}

/* PHONE (<=640px): the state-aware action bar becomes a TRUE sticky bottom sheet
   pinned to the viewport — the operator's decision (Aprobar / Rechazar / Responder
   / Reintentar) is always within thumb reach, never buried mid-scroll and never
   floating over content. Opaque + safe-area inset so nothing bleeds through. */
@media (max-width: 640px) {
  .dirH-bar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    max-width: none; margin: 0; z-index: 60;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-left: none; border-right: none; border-bottom: none;
    border-top: 2px solid var(--border-strong);
    background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 -10px 30px rgba(0,0,0,.5);
    padding: var(--space-5) max(var(--space-5), env(safe-area-inset-right))
             calc(var(--space-5) + env(safe-area-inset-bottom))
             max(var(--space-5), env(safe-area-inset-left));
    gap: var(--space-3);
    max-height: 72vh; overflow-y: auto;
  }
  .dirH-bar.tone-approve { border-top-color: var(--blue); }
  .dirH-bar.tone-answer  { border-top-color: var(--amber); }
  .dirH-bar.tone-review  { border-top-color: var(--green); }
  .dirH-bar.tone-alert   { border-top-color: var(--red); }
  /* reserve room under the fixed sheet so the feed can scroll fully clear of it */
  .dirH-feed { padding-bottom: 220px; }
  .dirH-command.cmd-tallbar .dirH-feed { padding-bottom: 60vh; }
  /* the action row: stack the primary actions full-width, ≥44px, primary last */
  .dirH-bar .bar-foot { gap: var(--space-3); padding-top: var(--space-4); }
  .dirH-bar .bar-foot > button,
  .dirH-bar .bar-foot > .btn {
    flex: 1 1 calc(50% - var(--space-3)); min-width: 0;
    height: 46px; min-height: 46px; font-size: var(--text-sm); padding: 0 12px;
  }
  /* Comentar (secondary on decision states) drops to its own full row so the
     decision buttons (Aprobar/Rechazar etc.) read as the clear primary pair */
  .dirH-bar.tone-approve .bar-foot > button:first-of-type,
  .dirH-bar.tone-review .bar-foot > button:first-of-type,
  .dirH-bar.tone-answer .bar-foot > button:first-of-type,
  .dirH-bar.tone-alert .bar-foot > button:first-of-type { flex-basis: 100%; }
  .dirH-bar .bar-foot .bar-note { flex-basis: 100%; }
  /* inputs inside the sheet are comfortable to tap */
  .dirH-bar textarea { min-height: 56px; font-size: 16px; }
  .dirH-bar .ans-in { height: 44px; min-height: 44px; font-size: 16px; }
  .dirH-bar .bar-attach { min-height: 44px; }
  .dirH-bar .bar-attach input[type=file] { min-height: 44px; }
}
.bar-foot { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.bar-note { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--muted); min-width: 0; }
.bar-note.ok { color: var(--green); }
.bar-attach { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
              font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-3); }
.ans-list { display: flex; flex-direction: column; gap: var(--space-5); }
.ans-q { display: flex; flex-direction: column; gap: var(--space-3); }
.ans-qt { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--text); line-height: var(--leading-snug); }
.ans-n { width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber-border); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; flex: none; margin-top: 1px; }

/* ---- THREADS ---- */
.th-kind { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; }
.th-list { width: 100%; overflow-y: auto; }
.th-row { display: grid; grid-template-columns: 120px 1fr 170px auto 130px; align-items: center; gap: var(--space-6); width: 100%; text-align: left; padding: var(--space-6) var(--space-7); background: none; border: none; border-bottom: 1px solid var(--border); border-left: 2px solid transparent; cursor: pointer; font-family: inherit; color: inherit; transition: background var(--dur-fast) var(--ease); }
.th-row:hover { background: var(--panel); border-left-color: var(--muted-2); }
.th-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.th-title { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-sub { font-size: var(--text-xs); color: var(--muted-2); }
.th-gate { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--amber); }
.threads-split { display: grid; grid-template-columns: 340px 1fr; width: 100%; min-height: 0; height: 100%; }
.th-aside { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--bg); overflow: hidden; }
.th-timeline { display: flex; flex-direction: column; }
.th-step { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) 0; position: relative; }
.th-sdot { width: 11px; height: 11px; border-radius: var(--radius-full); background: var(--panel-3); border: 1px solid var(--border-strong); flex: none; z-index: 1; }
.th-step.done .th-sdot { background: var(--green); border-color: var(--green); }
.th-step.active .th-sdot { background: var(--amber); border-color: var(--amber); }
.th-slabel { font-size: var(--text-sm); color: var(--text); flex: 1; }
.th-sstate { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.th-context { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-6); white-space: pre-wrap; max-height: 172px; overflow-y: auto; }

/* ---- DRAFTS ---- */
.dr2-screen { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.dr2-head { flex: none; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-7); border-bottom: 1px solid var(--border); }
.dr2-count { font-size: var(--text-sm); color: var(--muted); } .dr2-count b { color: var(--text); }
.dr2-note { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--muted-2); }
.dr2-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-7) max(var(--space-8), calc(50% - 460px)); display: flex; flex-direction: column; gap: var(--space-5); }
.dx-kcard { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.dx-kcard.done { opacity: .62; }
.dx-kr1 { display: flex; align-items: center; gap: var(--space-4); } .dx-kr1 > :last-child { margin-left: auto; }
.dx-ksubj { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text); }
.dx-recip { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
.dx-allow { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); font-size: var(--text-xs); flex-wrap: wrap; }
.dx-allow.ok { color: var(--green); background: var(--green-soft); border: 1px solid var(--green-border); }
.dx-allow.warn { color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-border); }
.dx-allow-to { font-family: var(--font-mono); color: var(--text); }

/* ---- MEETINGS ---- */
.mtg-split { display: grid; grid-template-columns: 360px 1fr; min-height: 0; height: 100%; width: 100%; }
.mtg-aside { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg); }
.mtg-lhead { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); }
.mlh-count { font-size: var(--text-xs); color: var(--muted); font-weight: var(--weight-medium); }
.mlh-sub { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.mtg-search { flex: none; display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) var(--space-6); padding: 7px 10px; background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.mtg-search input { flex: 1; background: none; border: none; outline: none; box-shadow: none; padding: 0; color: var(--text); font-size: var(--text-sm); min-width: 0; }
.mtg-list { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
.mtg-row { display: grid; grid-template-columns: 8px 1fr; align-items: start; gap: var(--space-4); width: 100%; text-align: left; padding: var(--space-5) var(--space-6); background: none; border: none; border-bottom: 1px solid var(--border); border-left: 2px solid transparent; cursor: pointer; font-family: inherit; color: inherit; transition: background var(--dur-fast) var(--ease); }
.mtg-row:hover { background: var(--panel); } .mtg-row.active { background: var(--panel); border-left-color: var(--muted-2); }
.mr-dot { width: 6px; height: 6px; border-radius: var(--radius-full); margin-top: 6px; opacity: .9; }
.mr-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mr-line1 { display: flex; align-items: baseline; gap: var(--space-4); }
.mr-client { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-when { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); flex: none; }
.mr-title { font-size: var(--text-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-meta { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-2xs); color: var(--muted-2); font-family: var(--font-mono); }
.mtg-detail { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--panel-2); }
.mtg-rec { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.mtg-rec-head { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.mtg-fathom { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--orange); }
.mtg-audio { width: 100%; height: 38px; }
.mtg-summary { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); }
.mtg-people { display: flex; flex-direction: column; gap: var(--space-3); }
.mtg-person { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.mtg-av { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--panel-3); border: 1px solid var(--border-strong); font-family: var(--font-mono); font-size: 10px; color: var(--muted); flex: none; }
.mp-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mp-name { font-size: var(--text-sm); color: var(--text); }
.mp-email { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.mp-tag { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 1px 7px; border-radius: var(--radius-xs); flex: none; }
.mp-tag.int { color: var(--muted-2); border: 1px solid var(--border-strong); }
.mp-tag.ext { color: var(--orange); background: var(--orange-soft); border: 1px solid var(--orange-border); }
.mtg-transcript { display: flex; flex-direction: column; gap: var(--space-5); border-left: 2px solid var(--border-strong); padding-left: var(--space-6); }
.mtg-turn { display: grid; grid-template-columns: 42px auto 1fr; gap: var(--space-4); align-items: baseline; }
.mt-time { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.mt-who { font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.mt-text { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-snug); }

/* ---- CLIENTS ---- */
.cl-split { display: grid; grid-template-columns: 320px 1fr; min-height: 0; height: 100%; width: 100%; }
.cl-aside { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg); }
.cl-lhead { flex: none; display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6) var(--space-4); }
.cl-count { font-size: var(--text-xs); color: var(--muted); font-weight: var(--weight-medium); }
.cl-search { flex: none; display: flex; align-items: center; gap: var(--space-3); margin: 0 var(--space-6) var(--space-4); padding: 7px 10px; background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.cl-search input { flex: 1; background: none; border: none; outline: none; box-shadow: none; padding: 0; color: var(--text); font-size: var(--text-sm); min-width: 0; }
.cl-list { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
.cl-row { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: var(--space-4); width: 100%; text-align: left; padding: var(--space-4) var(--space-6); background: none; border: none; border-bottom: 1px solid var(--border); border-left: 2px solid transparent; cursor: pointer; font-family: inherit; color: inherit; transition: background var(--dur-fast) var(--ease); }
.cl-row:hover { background: var(--panel); } .cl-row.active { background: var(--panel); border-left-color: var(--orange); }
.cl-av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--panel-3); border: 1px solid var(--border-strong); font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-semibold); color: var(--muted); flex: none; }
.cl-row.active .cl-av { background: var(--orange-soft); border-color: var(--orange-border); color: var(--orange); }
.cl-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cl-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-slug { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.cl-open { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--orange-soft); color: var(--orange); font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-semibold); }
.cl-detail { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--panel-2); padding: var(--space-8); gap: var(--space-7); }
.cl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.cl-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-5); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); }
.cs-n { font-family: var(--font-mono); font-size: var(--text-xl); color: var(--text); line-height: 1; }
.cs-n.open { color: var(--orange); }
.cs-l { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); }
.cl-servers, .cl-contacts { display: flex; flex-direction: column; gap: var(--space-4); }
.cl-server, .cl-contact { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.csv-env { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); padding: 1px 7px; flex: none; color: var(--muted); }
.csv-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.csv-key { font-size: var(--text-sm); color: var(--text); }
.csv-meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.cl-edit { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--muted); background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); padding: 3px 9px; cursor: pointer; }
.cl-edit:hover { color: var(--text); border-color: var(--muted-2); }
.cl-ctx { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-7); }
.cl-ctx-edit { width: 100%; box-sizing: border-box; min-height: 300px; resize: vertical; background: var(--bg); border: 1px solid var(--orange-border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-7); color: var(--text); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-normal); outline: none; }

/* ---- FLEET ---- */
.fl-screen { flex: 1; display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--bg); }
.fl-summary { flex: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); }
.fl-tile { display: flex; flex-direction: column; gap: 3px; padding: var(--space-6) var(--space-7); background: var(--bg); }
.ft-n { font-family: var(--font-mono); font-size: var(--text-2xl); line-height: 1; color: var(--text); }
.ft-l { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); }
.fl-toolbar { flex: none; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-7); border-bottom: 1px solid var(--border); }
.fl-table { flex: 1; overflow-y: auto; min-height: 0; }
.fl-head, .fl-row { display: grid; grid-template-columns: 40px 1.5fr 1fr 1.5fr 46px 2.1fr 48px 60px 30px; align-items: center; gap: var(--space-4); padding: 0 var(--space-7); }
a.fl-row { text-decoration: none; color: inherit; }
.fb-track i.lvl-ok { background: var(--green); } .fb-track i.lvl-warn { background: var(--amber); } .fb-track i.lvl-bad { background: var(--red); }
.fl-head { position: sticky; top: 0; z-index: 2; height: 34px; background: var(--bg); border-bottom: 1px solid var(--border); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); font-weight: var(--weight-semibold); }
.fl-row { min-height: 56px; border-bottom: 1px solid var(--border); }
.flc-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fl-nm { font-size: var(--text-sm); color: var(--text); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-host { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.flc-bars { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fl-bar { display: grid; grid-template-columns: 30px 1fr 38px; align-items: center; gap: var(--space-3); }
.fb-k { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; color: var(--muted-2); }
.fb-track { height: 4px; background: var(--panel-3); border-radius: var(--radius-full); overflow: hidden; }
.fb-track i { display: block; height: 100%; border-radius: var(--radius-full); }
.fb-v { font-family: var(--font-mono); font-size: 9px; color: var(--muted-2); text-align: right; }
.flc-inst { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); text-align: center; }

/* ===========================================================================
   SPEC PARITY — rules emitted by page markup but previously undefined, ported
   verbatim from the kit's per-screen CSS (tokens already match). Appended last
   so they win the cascade.
   =========================================================================== */

/* ---- TASK DETAIL: result extras, diff, spawned, floating-bar composer ---- */
.dirH-result { border-top: 1px solid var(--border); padding-top: var(--space-7); }
.dirH-bar textarea { width: 100%; box-sizing: border-box; resize: none; min-height: 30px; max-height: 110px; padding: 0; background: transparent; border: none; color: var(--text); font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-snug); outline: none; }
.dirH-bar textarea::placeholder { color: var(--muted-2); }
.dirH-bar textarea:focus { box-shadow: none; }
.bar-foot .spacer { flex: 1; }
.bar-note .ic { width: 14px; height: 14px; flex: none; }
.bar-note.mut { color: var(--muted); }
.diff .df { color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-2xs); }
.diff .arrow { color: var(--muted-2); }
.reply-draft.sent { border-color: var(--green-border); }
.exec-meta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.exec-meta a { color: var(--blue); text-decoration: none; } .exec-meta a:hover { text-decoration: underline; }
.exec-cell.wide { grid-column: span 2; }
.exec-stage { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); text-decoration: none; transition: border-color var(--dur-fast) var(--ease); }
.exec-stage:hover { border-color: var(--blue); }
.exec-stage .ic { color: var(--blue); flex: none; }
.exec-stage.prod { border-color: var(--amber); background: var(--amber-soft); }
.exec-stage.prod .ic { color: var(--amber); }
.exec-stage.prod:hover { border-color: var(--amber); }
.exec-stage.prod .es-label { color: var(--amber); font-weight: var(--weight-semibold); }
.exec-audit.prod { color: var(--amber); border-top-color: var(--amber-border, var(--border)); }

/* ---- recipient editor on the suggested-reply card ---- */
/* Gmail-style To: row — pills + autocomplete add input. Lives at the top of
   the suggested-reply card; AJAX auto-saves on every change. */
.reply-draft { display: flex; flex-direction: column; gap: var(--space-4); }
.reply-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border);
  background: var(--panel-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.rh-label { flex: none; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--muted-2); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.rh-pills { flex: 1; min-width: 240px; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  min-height: 30px; cursor: text; transition: border-color var(--dur-fast) var(--ease); }
.rh-pills:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.rh-pill { display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 2px 4px 2px 8px; background: var(--panel-2); border: 1px solid var(--border-strong);
  border-radius: 999px; font-size: var(--text-xs); color: var(--text); max-width: 100%; }
.rh-pill .rh-pname { font-weight: var(--weight-medium); }
.rh-pill .rh-pemail { color: var(--muted-2); font-family: var(--font-mono); font-size: 10.5px; }
.rh-pill .rh-pname + .rh-pemail::before { content: "·"; margin: 0 4px; }
.rh-pill .rh-x { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; min-height: 0; background: transparent; border: none;
  color: var(--muted); border-radius: 999px; cursor: pointer; font-size: 14px; line-height: 1; }
.rh-pill .rh-x:hover { background: var(--panel-3); color: var(--text); }
.rh-pill.is-invalid { border-color: var(--danger); background: rgba(248,81,73,.08); }
.rh-add { flex: 1; min-width: 140px; height: 24px; min-height: 24px; padding: 0 6px;
  background: transparent; border: none; outline: none; box-shadow: none;
  color: var(--text); font-size: var(--text-sm); }
.rh-add:focus { outline: none; box-shadow: none; }
.rh-saved { font-size: var(--text-2xs); color: var(--green); letter-spacing: var(--tracking-label);
  text-transform: uppercase; transition: opacity var(--dur-base) var(--ease); }
.reply-to-tag { display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--green); padding: 2px 6px; border-radius: var(--radius-sm);
  background: rgba(46,160,67,.10); border: 1px solid rgba(46,160,67,.25); }
.reply-to-tag.mut { color: var(--muted-2); background: var(--panel-2);
  border-color: var(--border); }
.reply-body { white-space: pre-wrap; padding: 0 var(--space-5); color: var(--text);
  font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.es-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.es-label { font-size: var(--text-sm); color: var(--text); }
.es-url { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-go { font-size: var(--text-xs); color: var(--blue); flex: none; }
.exec-rollback { display: flex; flex-direction: column; gap: var(--space-3); }
.exec-rollback .ek { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); }
.exec-rollback .ek .ic { color: var(--muted-2); }
.exec-audit { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-xs); color: var(--green); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.exec-audit .ic { flex: none; } .exec-audit.dirty { color: var(--red); }
.spawned { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--orange-soft); border: 1px solid var(--orange-border); border-radius: var(--radius-sm); }
.spawned .sp-id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--orange); flex: none; }
.spawned .sp-title { font-size: var(--text-sm); color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spawned .sp-link { font-size: var(--text-xs); color: var(--blue); white-space: nowrap; flex: none; }
.ans-list { max-height: 240px; overflow-y: auto; }
.ans-in { width: 100%; box-sizing: border-box; padding: 7px 10px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-sans); font-size: var(--text-sm); outline: none; transition: border-color var(--dur-fast) var(--ease); }
.ans-in:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.block-label .ic { width: 13px; height: 13px; }
/* task-detail rail = the editor itself (no nested "Ajustes" block) */
.hdr-titles { min-width: 0; flex: 1; }
.rail-title { width: 100%; box-sizing: border-box; margin-top: 4px; font-family: var(--font-sans);
  font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight);
  color: var(--text); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 5px 7px; }
.rail-title:hover, .rail-spec:hover { border-color: var(--border); }
.rail-title:focus, .rail-spec:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); background: var(--panel-2); }
.rail-spec { width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; font-family: var(--font-sans);
  font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 7px; }
.rail-spec::placeholder { color: var(--muted-2); }
.fact-sel { width: auto; max-width: 190px; height: 28px; min-height: 28px; padding: 0 8px; font-size: var(--text-sm);
  background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); }
.rail-save { display: none; margin-top: var(--space-4); }
.dirH-context:focus-within .rail-save { display: flex; }
.rail-actbtn { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.dirH-context form { margin: 0; }
/* NotesCard (rail checklist) */
.notes-card .nc-label { margin: 0 0 var(--space-4); }
.note-form { margin: 0; }
.note-item { display: flex; gap: var(--space-4); align-items: flex-start; width: 100%; min-width: 0;
  text-align: left; background: none; border: none; padding: 0; min-height: 0;
  font-size: var(--text-xs); color: var(--text); line-height: var(--leading-snug); cursor: pointer; }
.note-item .nbox { width: 18px; height: 18px; border-radius: var(--radius-xs); border: 1px solid var(--border-strong); flex: none;
  background: var(--panel-2); margin-top: -1px; display: inline-flex; align-items: center; justify-content: center; color: #fff;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.note-item:hover .nbox { border-color: var(--blue); }
.note-item .nt { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.note-item.done .nbox { background: var(--blue); border-color: var(--blue); }
.note-item.done .nt { color: var(--muted-2); text-decoration: line-through; }
.failure-detail { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-5); margin: 0; max-height: 360px; overflow-y: auto;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.note-add { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5);
  border-top: 1px solid var(--border); padding-top: var(--space-4); color: var(--muted-2); }
.note-add .ic { flex: none; }
.note-add input { flex: 1; background: transparent; border: none; outline: none; box-shadow: none; padding: 0;
  color: var(--text); font-family: var(--font-sans); font-size: var(--text-xs); }
.note-add input::placeholder { color: var(--muted-2); }

/* ---- THREADS: steps dots, board, split rows, timeline gate, gate bar ---- */
.th-steps { display: inline-flex; align-items: center; gap: 4px; }
.th-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--border-strong); }
.th-dot.done { background: var(--green); border-color: var(--green); }
.th-dot.active { background: var(--amber); border-color: var(--amber); }
.th-dot.gate { background: var(--amber-soft); border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.th-steps.compact .th-dot { width: 7px; height: 7px; }
.th-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); width: 100%; padding: var(--space-7); overflow: hidden; min-height: 0; }
.th-col { display: flex; flex-direction: column; gap: var(--space-5); min-height: 0; }
.th-colhead { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--muted-2); }
.th-colhead.alert { color: var(--amber); }
.th-cn { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); background: var(--panel-2); padding: 1px 7px; border-radius: var(--radius-full); }
.th-colhead.alert .th-cn { color: var(--amber); background: var(--amber-soft); }
.th-colcards { display: flex; flex-direction: column; gap: var(--space-5); overflow-y: auto; min-height: 0; padding-bottom: var(--space-7); }
.th-card { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); cursor: pointer; text-align: left; font-family: inherit; color: inherit; transition: border-color var(--dur-fast) var(--ease); }
.th-card:hover { border-color: var(--border-strong); }
.th-c1 { display: flex; align-items: center; gap: var(--space-4); width: 100%; } .th-c1 > :last-child { margin-left: auto; }
.th-ctitle { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.th-cgate { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-xs); color: var(--amber); line-height: var(--leading-snug); }
.th-empty { color: var(--muted-2); font-size: var(--text-xs); padding: var(--space-5); }
.th-slist { overflow-y: auto; min-height: 0; }
.th-srow { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; width: 100%; text-align: left; padding: var(--space-5) var(--space-6); background: none; border: none; border-bottom: 1px solid var(--border); border-left: 2px solid transparent; cursor: pointer; font-family: inherit; color: inherit; transition: background var(--dur-fast) var(--ease); }
.th-srow:hover { background: var(--panel); } .th-srow.on { background: var(--panel); border-left-color: var(--muted-2); }
.th-sr1 { display: flex; align-items: center; gap: var(--space-4); width: 100%; } .th-sr1 > :last-child { margin-left: auto; }
.th-stitle { font-size: var(--text-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.th-sr2 { display: flex; align-items: center; gap: var(--space-4); width: 100%; } .th-sr2 > :last-child { margin-left: auto; }
.th-dwhen { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
.th-dtitle { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.th-blabel { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-5); }
.th-step::before { content: ''; position: absolute; left: 5px; top: 18px; bottom: -2px; width: 1px; background: var(--border); }
.th-step:last-child::before { display: none; }
.th-step.gate .th-sdot { background: var(--amber-soft); border-color: var(--amber); }
.th-step.done .th-slabel { color: var(--muted); }
.th-step.active .th-sstate, .th-step.gate .th-sstate { color: var(--amber); }
.th-gatebar { position: absolute; left: var(--space-7); right: var(--space-7); bottom: var(--space-6); margin: 0 auto; max-width: 620px; z-index: 20; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6); background: rgba(20,20,24,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--amber-border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
.th-gatebar .gb-ico { color: var(--amber); flex: none; }
.th-gatebar .gb-text { min-width: 0; }
.th-gatet { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.th-gates { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; line-height: var(--leading-snug); }
.th-gatebar > :last-child { margin-left: auto; flex: none; }
.th-docs { display: flex; flex-direction: column; gap: var(--space-5); }
.th-doc { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-5) var(--space-6); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: border-color .12s; }
.th-doc:hover { border-color: var(--border-strong); }
.th-doc-ic { color: var(--muted-2); flex: none; margin-top: 1px; }
.th-doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.th-doc-r1 { display: flex; align-items: baseline; gap: var(--space-5); }
.th-doc-name { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); }
.th-doc-meta { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); white-space: nowrap; }
.th-doc-desc { font-size: var(--text-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-doc-open { flex: none; align-self: center; color: var(--accent); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.th-doc:hover .th-doc-open { color: var(--accent-strong); }
.th-history { border-top: 1px solid var(--border); padding-top: var(--space-6); }
.th-history > summary { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); font-weight: var(--weight-semibold); cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-4); }
.th-history > summary::-webkit-details-marker { display: none; }
.th-history[open] > summary { margin-bottom: var(--space-6); }

/* ---- DRAFTS: the full split (.dx-*) set + pipeline ---- */
.dx-split { display: grid; grid-template-columns: 320px 1fr; width: 100%; height: 100%; min-height: 0; }
.dx-slist { border-right: 1px solid var(--border); overflow-y: auto; min-height: 0; }
.dx-listhead { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 1; }
.dx-srow { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; width: 100%; text-align: left; padding: var(--space-5) var(--space-6); background: none; border: none; border-bottom: 1px solid var(--border); border-left: 2px solid transparent; cursor: pointer; font-family: inherit; color: inherit; }
.dx-srow:hover { background: var(--panel); } .dx-srow.on { background: var(--panel); border-left-color: var(--muted-2); }
.dx-sr1 { display: flex; align-items: center; gap: var(--space-4); width: 100%; }
.dx-swhen { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.dx-ssubj { font-size: var(--text-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* mobile-only DS-row extras on a draft row — inert on desktop (icon/preview/recipient
   hidden, wrapper transparent) so the desktop split list is unchanged */
.dx-smain { display: contents; }
.dx-sic, .dx-sprev, .dx-sto { display: none; }
.dx-detail { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--panel-2); }
.dx-dhead { flex: none; padding: var(--space-6) var(--space-8); border-bottom: 1px solid var(--border); background: var(--bg); display: flex; flex-direction: column; gap: var(--space-4); }
.dx-dtop { display: flex; align-items: center; gap: var(--space-4); }
.dx-dfrom { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.dx-dwhen { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2); }
.dx-dtitle { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0; letter-spacing: var(--tracking-tight); }
.dx-dpills { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.dx-dsrcline { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.dx-dscroll { flex: 1; overflow-y: auto; min-height: 0; padding: var(--space-8) var(--space-8) 104px; display: flex; flex-direction: column; gap: var(--space-7); }
.dx-dbar { position: absolute; left: var(--space-7); right: var(--space-7); bottom: var(--space-6); margin: 0 auto; max-width: 560px; z-index: 20; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); background: rgba(20,20,24,.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.dx-dbar .spacer { flex: 1; }
.dx-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.dx-in { border-left: 2px solid var(--border-strong); padding-left: var(--space-6); }
.dx-in-head { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); margin-bottom: var(--space-3); }
.dx-in-text { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--muted); white-space: pre-wrap; }
.dx-out-head { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); margin-bottom: var(--space-3); }
.dx-regen-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: var(--space-3); color: var(--orange); }
.dx-msg { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-5) var(--space-6); white-space: pre-wrap; }
.dx-allow-t { color: inherit; }
.dx-allow-btn { margin-left: auto; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--amber); background: transparent; border: 1px solid var(--amber-border); border-radius: var(--radius-xs); padding: 3px 10px; cursor: pointer; }
.dx-allow-btn:hover { background: var(--amber); color: var(--bg); }
.dx-allow-form { margin-left: auto; }
.dx-subj { width: 100%; box-sizing: border-box; margin-bottom: var(--space-4); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-sm); padding: 5px 7px; color: var(--text);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.dx-subj:hover { border-color: var(--border); }
.dx-subj:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); background: var(--panel-2); }
.dx-edit { width: 100%; box-sizing: border-box; resize: vertical; min-height: 160px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6); color: var(--text); font-family: var(--font-sans);
  font-size: var(--text-base); line-height: var(--leading-normal); }
.dx-edit:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.dx-save { display: none; margin-top: var(--space-3); }
.dx-out:focus-within .dx-save { display: flex; }
.dx-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); width: 100%; padding: var(--space-7) var(--space-8); overflow: hidden; min-height: 0; }
.dx-col { display: flex; flex-direction: column; gap: var(--space-5); min-height: 0; }
.dx-colhead { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--muted-2); }
.dx-colcount { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); background: var(--panel-2); padding: 1px 7px; border-radius: var(--radius-full); }
.dx-colcards { display: flex; flex-direction: column; gap: var(--space-5); overflow-y: auto; min-height: 0; padding-bottom: var(--space-7); }
.dx-kprev { font-size: var(--text-xs); color: var(--muted-2); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dx-kfoot { display: flex; align-items: center; gap: var(--space-4); }
.dx-kwhen { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.dx-colempty { font-size: var(--text-xs); color: var(--muted-2); padding: var(--space-6); text-align: center; }
.dx-pipe { display: flex; flex-direction: column; min-height: 0; width: 100%; } .dx-pipe .dx-cols { flex: 1; min-height: 0; }

/* ---- INBOX: triage groups + muted ignored rows ---- */
.in-row.ignored { opacity: .5; }
.in-row.ignored:hover { opacity: .75; }
.grp-head .ic { color: var(--muted-2); flex: none; }
.grp-head.urgent { color: var(--orange); } .grp-head.urgent .ic { color: var(--orange); }
.tl-by { color: var(--orange); font-weight: var(--weight-medium); }
.db-input { width: 100%; box-sizing: border-box; resize: none; min-height: 28px; max-height: 100px; padding: 0;
  background: transparent; border: none; outline: none; color: var(--text); font-family: var(--font-sans);
  font-size: var(--text-sm); line-height: var(--leading-snug); }
.db-input::placeholder { color: var(--muted-2); }
.bar-urgent { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm);
  color: var(--orange); font-weight: var(--weight-medium); }
.assign-sug { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--orange); background: var(--orange-soft); border: 1px solid var(--orange-border);
  border-radius: var(--radius-xs); padding: 1px 6px; margin-left: auto; }
.assign-opt.guess, .assign-opt.guess:hover { background: var(--orange-soft); }
.fl-flag.degraded { color: var(--amber); } .fl-flag.down { color: var(--red); }
.ds-att-noprev { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--muted-2); }
.ds-att-noprev .ic { flex: none; }

/* ---- FLEET: status dot/flag, region/clients cells, filters, row detail ---- */
.flc-status { display: inline-flex; align-items: center; gap: 5px; }
.fl-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex: none; }
.fl-dot.online { background: var(--green); } .fl-dot.degraded { background: var(--amber); }
.fl-dot.down { background: var(--red); } .fl-dot.maintenance { background: var(--muted-2); }
.fl-flag { display: inline-flex; color: var(--amber); }
.flc-region { display: flex; flex-direction: column; gap: 1px; font-size: var(--text-xs); color: var(--muted); min-width: 0; }
.fl-prov { font-size: var(--text-2xs); color: var(--muted-2); }
.flc-clients { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.flc-load { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.flc-up { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flc-caret { display: inline-flex; justify-content: center; color: var(--muted-2); }
.fl-filters { display: flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
.fl-filter { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: none; background: none; color: var(--muted); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-medium); border-radius: var(--radius-xs); cursor: pointer; white-space: nowrap; }
.fl-filter:hover { color: var(--text); } .fl-filter.on { background: var(--panel-3); color: var(--text); }
.ff-n { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); } .fl-filter.on .ff-n { color: var(--muted); }
.ft-n.ok { color: var(--green); } .ft-n.warn { color: var(--amber); } .ft-n.bad { color: var(--red); } .ft-n.mut { color: var(--muted-2); }
.fl-detail { padding: var(--space-6) var(--space-7) var(--space-7) 56px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-5); }
.fld-grid { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
.fld-cell { display: flex; flex-direction: column; gap: 2px; }
.fld-k { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); }
.fld-v { font-size: var(--text-sm); color: var(--text); } .fld-v.mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.fld-note { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-xs); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); }
.fld-note .ic { flex: none; }
.fld-note.degraded { color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-border); }
.fld-note.down { color: var(--red); background: var(--red-soft); border: 1px solid var(--red-border); }
.fld-note.maintenance, .fld-note.online { color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); }
.fld-clients { display: flex; align-items: center; gap: var(--space-5); }
.fld-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.fld-chip { font-size: var(--text-xs); color: var(--muted); background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); padding: 2px 9px; }
.fb-track i { transition: width var(--dur-base) var(--ease); }

/* ---- MEETINGS: kind tag, duration, bullets, transcript who, suggested tasks ---- */
.mr-kind { color: var(--muted); } .mr-sep { opacity: .5; }
.mtg-kicon { display: inline-flex; flex: none; }
.mtg-kind-tag { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); padding: 1px 7px; }
.mtg-internal-tag { font-size: var(--text-xs); color: var(--muted); }
.mtg-dur { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); margin-left: auto; }
.mtg-rec-head .spacer { flex: 1; }
.mtg-bullets { margin: var(--space-5) 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: var(--space-3); }
.mtg-bullets li { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-snug); }
.mtg-bullets li::marker { color: var(--muted-2); }
.mt-who.int { color: var(--muted); } .mt-who.ext { color: var(--text); }
.mtg-suggest { display: flex; flex-direction: column; gap: var(--space-4); }
.mtg-sug { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.mtg-sug.done { opacity: .6; }
.ms-title { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text); }
.ms-type { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); text-transform: uppercase; letter-spacing: var(--tracking-label); flex: none; }
.ms-existing { font-size: var(--text-xs); color: var(--muted-2); font-style: italic; flex: none; }
.ms-created { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--green); flex: none; }
.mtg-bar .db-foot { border-top: none; padding-top: 0; }

/* ---- CLIENTS: status tag/dot, big avatar, env colors, contacts, markdown ---- */
.cl-st { width: 7px; height: 7px; border-radius: var(--radius-full); flex: none; }
.cl-st.active { background: var(--green); } .cl-st.prospect { background: var(--orange); } .cl-st.paused { background: var(--muted-2); }
.cl-bigav { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--orange-soft); border: 1px solid var(--orange-border); color: var(--orange); font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-bold); flex: none; }
.cl-status-tag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: var(--weight-medium); }
.cl-status-tag .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.cl-status-tag.active { color: var(--green); } .cl-status-tag.prospect { color: var(--orange); } .cl-status-tag.paused { color: var(--muted-2); }
.cl-sector { font-size: var(--text-xs); color: var(--muted); }
.cl-since { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.csv-env.prod { color: var(--red); border-color: var(--red-border); }
.csv-env.staging { color: var(--amber); border-color: var(--amber-border); }
.csv-env.demo { color: var(--blue); border-color: var(--blue-border); }
.cl-contacts { display: flex; flex-direction: column; gap: var(--space-3); }
.cl-contact { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cl-cav { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--panel-3); border: 1px solid var(--border-strong); font-family: var(--font-mono); font-size: 10px; color: var(--muted); flex: none; }
.cl-cmain { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.cl-cname { font-size: var(--text-sm); color: var(--text); }
.cl-cemail { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-2); }
.cl-crole { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); flex: none; }
.cl-ctx-hint { font-size: var(--text-2xs); color: var(--muted-2); text-transform: none; letter-spacing: 0; font-weight: var(--weight-regular); }
.md-h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text); margin: 0 0 var(--space-4); letter-spacing: var(--tracking-tight); }
.md-h4 { font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted-2); font-weight: var(--weight-semibold); margin: var(--space-6) 0 var(--space-3); }
.md-p { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--muted); margin: 0 0 var(--space-3); }
.md-ul { margin: 0 0 var(--space-3); padding-left: 18px; display: flex; flex-direction: column; gap: var(--space-3); }
.md-ul li { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--muted); } .md-ul li::marker { color: var(--muted-2); }
.cl-ctx strong, .md-ul strong, .md-p strong { color: var(--text); font-weight: var(--weight-semibold); }
.cl-ctx-edit:focus { box-shadow: var(--ring); }
.cl-bar .db-foot { border-top: none; padding-top: 0; }

/* ---- topbar bell + notification dropdown + page list ---- */
.cnotif-btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-height: 32px; padding: 0; background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted);
  cursor: pointer; }
.cnotif-btn:hover { background: var(--panel-2); color: var(--text); }
.cnotif-btn .ic { pointer-events: none; }
.cnotif-bdg { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--danger); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; pointer-events: none; }
.cnotif-dd { position: fixed; top: 56px; right: 16px; width: min(380px, calc(100vw - 24px));
  max-height: 70vh; overflow: hidden;
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop); z-index: 90; }
.cnotif-dd[hidden] { display: none; }
.cnotif-dd-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); background: var(--panel-2);
  font-size: var(--text-xs); color: var(--text); }
.cnotif-list { overflow-y: auto; flex: 1; min-height: 0; }
.cnotif-row { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text);
  background: transparent; transition: background var(--dur-fast) var(--ease); }
.cnotif-row:hover { background: var(--panel-2); }
.cnotif-row.unread { background: rgba(60,134,255,.05); }
.cnotif-row.unread:hover { background: rgba(60,134,255,.10); }
.cnotif-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex: none; margin-top: 6px; }
.cnotif-dot.t-info { background: var(--blue); }
.cnotif-dot.t-ok { background: var(--green); }
.cnotif-dot.t-progress { background: var(--amber); }
.cnotif-dot.t-alert { background: var(--danger); }
.cnotif-main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1; }
.cnotif-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  font-size: var(--text-2xs); color: var(--muted-2); letter-spacing: var(--tracking-label);
  text-transform: uppercase; }
.cnotif-kind { font-weight: var(--weight-semibold); }
.cnotif-age { font-family: var(--font-mono); }
.cnotif-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text);
  overflow-wrap: anywhere; }
.cnotif-body { font-size: var(--text-xs); color: var(--muted); line-height: var(--leading-snug);
  overflow-wrap: anywhere; max-height: 4.6em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cnotif-empty { padding: var(--space-7) var(--space-6); color: var(--muted-2); font-size: var(--text-sm);
  text-align: center; }
.cnotif-foot { display: block; padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border);
  color: var(--blue); font-size: var(--text-xs); font-weight: var(--weight-medium); text-decoration: none;
  text-align: center; background: var(--panel-2); }
.cnotif-foot:hover { background: var(--panel-3); }
.cnotif-fullist { display: flex; flex-direction: column; border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden; background: var(--panel); margin-top: var(--space-5); }
.cnotif-fullist .cnotif-row:last-child { border-bottom: none; }

/* ---- toast stack (top-right) — notifications AND action feedback (toast()) ---- */
.notif-toasts { position: fixed; top: 16px; right: 16px; display: flex; flex-direction: column;
  gap: var(--space-4); z-index: 110; pointer-events: none; }
.notif-toast { pointer-events: auto; min-width: 280px; max-width: 360px; background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
  display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5);
  text-decoration: none; color: var(--text);
  transform: translateX(20px); opacity: 0; transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
.notif-toast.in { transform: translateX(0); opacity: 1; }
.notif-toast .nt-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex: none; margin-top: 6px; }
.notif-toast .nt-dot.t-info { background: var(--blue); }
.notif-toast .nt-dot.t-ok { background: var(--green); }
.notif-toast .nt-dot.t-progress { background: var(--amber); }
.notif-toast .nt-dot.t-alert { background: var(--danger); }
.notif-toast .nt-main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1; }
.notif-toast .nt-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.notif-toast .nt-body { font-size: var(--text-xs); color: var(--muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-toast .nt-x { background: none; border: none; color: var(--muted-2); cursor: pointer; padding: 2px;
  font-size: 14px; line-height: 1; }
.notif-toast .nt-x:hover { color: var(--text); }

/* ---- invalid-input feedback (recipient pills editor) ---- */
@keyframes aiops-shake { 0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.shake { animation: aiops-shake .3s var(--ease) 1; }

/* ---- connection / refresh state pill (header, managed by JS) ---- */
.conn-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; flex: none;
  border-radius: var(--radius-full); font-family: var(--font-mono); font-size: var(--text-2xs);
  font-weight: var(--weight-semibold); white-space: nowrap; }
.conn-pill.offline { color: var(--red); background: var(--red-soft); border: 1px solid var(--red-border); }
.conn-pill.paused { color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-border); }

/* ---- DS kanban column collapse (.tk-col mirrors legacy .col behaviour) ---- */
.tk-col[data-col] > .tk-colhead { cursor: pointer; user-select: none; }
.tk-col.collapsed .tk-colcards { display: none; }
.tk-col.collapsed .tk-colhead { opacity: .7; }

/* ===========================================================================
   F3 — paridad + bulk (shared shell rules)
   =========================================================================== */
/* exec-panel values: .xv replaces the collided .ev (the thread timeline owns
   .ev's 30px grid) — normal flow, mono variant, safe wrapping */
.xv { display: block; font-size: var(--text-sm); color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.xv.mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.exec-diff .xv.mono { color: var(--text-2); white-space: pre-wrap; word-break: break-word; }

/* long-prose overflow guard: pre-wrap bodies must also break unbroken runs
   (URLs, tokens, filenames) instead of pushing the layout sideways */
.msg-body, .prose, .dx-in-text, .dx-msg, .th-context, .mtg-summary,
.conv-quoted-body, .tl-draft-body, .ctx-body, .mt-text { overflow-wrap: anywhere; }

/* client chips inside fixed grid tracks (tareas/threads lists): every cell may
   shrink and the client name ellipsizes instead of blowing the columns */
.tq-row > *, .th-row > * { min-width: 0; }
.tl-client { min-width: 0; overflow: hidden; display: flex; align-items: center; }
.tl-client .ds-client, .tq-row .ds-client, .th-row .ds-client { max-width: 100%; }
.tl-client .ds-cl-nm, .tq-row .ds-cl-nm, .th-row .ds-cl-nm { overflow: hidden; text-overflow: ellipsis; }

/* kanban card summary — muted two-line teaser under the title */
.tk-csum { font-size: var(--text-xs); color: var(--muted); line-height: var(--leading-snug);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  overflow-wrap: anywhere; }

/* expander hookup for the DS clamps (ui.clamped() emits the div+button pair) */
.clamp-3.open, .clamp-6.open { -webkit-line-clamp: unset; }

/* ===========================================================================
   F4 — a11y + overflow polish (shared shell rules)
   =========================================================================== */
/* search hosts show the focus state their inner inputs suppress (outline:none) */
.mtg-search:focus-within, .cl-search:focus-within {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
/* long hostnames/emails in client cards ellipsize instead of blowing the row */
.csv-meta, .cl-cemail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ---- bulk selection (C9): row checkboxes + sticky action bar ---- */
.bsel-w { display: inline-flex; align-items: center; justify-content: center; align-self: center;
  padding: 4px; cursor: pointer; flex: none; }
.bsel-w .bsel { margin: 0; cursor: pointer; }
.bulk-bar { position: sticky; bottom: 0; z-index: 30; display: none; align-items: center;
  gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-6);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--border-strong); }
.bulk-bar .bulk-count, .bulk-bar [data-bulk-count] { font-family: var(--font-mono);
  font-size: var(--text-xs); color: var(--text); font-weight: var(--weight-semibold); white-space: nowrap; }
main:has(input.bsel:checked) .bulk-bar { display: flex; }

/* ===========================================================================
   F5 — C11 selección + C12 señales de vida
   =========================================================================== */
/* C11: the ONE custom DS checkbox — every input[type=checkbox] in the app
   (.bsel bulk rows, .chk labels, .cluster toggles). 18px box, blue when
   checked, tilde = the icon-set "check" path inlined as data-URI (white
   round stroke) — no emoji, no external assets. Late in the cascade on
   purpose: it overrides the generic input rule and per-context sizing. */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0; flex: none;
  background: var(--panel-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs); cursor: pointer;
  display: inline-block; vertical-align: -4px;
  background-repeat: no-repeat; background-position: center; background-size: 13px 13px;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
input[type="checkbox"]:hover { border-color: var(--blue); }
input[type="checkbox"]:focus-visible {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
input[type="checkbox"]:checked {
  background-color: var(--blue); border-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.2 11.5 13 4.5'/%3E%3C/svg%3E");
}
/* context alignment: .chk labels align the box to the first text line
   (flex-start rows); flex-center contexts (.bsel-w, .cluster) need nothing */
.chk input[type="checkbox"] { margin-top: 1px; }

/* C12: changed-row flash after a swap — modules mark stable rows with
   data-live-key; the swap machinery diffs textContent and tags real changes.
   The global prefers-reduced-motion rule already kills the animation; the
   explicit block keeps that guarantee local. */
@keyframes aiops-rowflash { from { background-color: var(--blue-t); } to { background-color: transparent; } }
.row-updated { animation: aiops-rowflash 1.2s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .row-updated { animation: none; } }

/* C12: system-pulse strip (/hoy) — neutral mono chips, icon + value */
.sys-pulse { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.sp-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  border-radius: var(--radius-full); border: 1px solid var(--tone-neutral-border);
  background: var(--tone-neutral-soft); color: var(--text-2);
  font-family: var(--font-mono); font-size: var(--text-2xs); white-space: nowrap; }
.sp-chip .ic { width: 12px; height: 12px; color: var(--muted); }
.sp-chip b { color: var(--text); font-weight: var(--weight-semibold); }
.sp-chip time.ago { color: var(--text); }
.sp-chip .live-dot { width: 6px; height: 6px; }

/* C12: arrival-pipeline strip (inbox detail) — Recibido → Adjuntos → IA */
.pipe-strip { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--text-2xs); color: var(--muted); line-height: 1.4; }
.pipe-step { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pipe-step .ic { width: 12px; height: 12px; flex: none; }
.pipe-step.done { color: var(--text-2); }
.pipe-step.done .ic { color: var(--green); }
.pipe-step.active { color: var(--text); }
.pipe-step.skip { color: var(--muted-2); }
.pipe-step .live-dot { width: 6px; height: 6px; }
.pipe-sep { color: var(--muted-2); flex: none; display: inline-flex; }
.pipe-sep .ic { width: 10px; height: 10px; }

/* C12: heartbeat freshness chips (worker panels / in_progress rows) */
.hb-fresh, .hb-stale { display: inline-flex; align-items: center; gap: 6px; height: 20px;
  padding: 0 8px; border-radius: var(--radius-full); border: 1px solid;
  font-family: var(--font-mono); font-size: var(--text-2xs); white-space: nowrap; }
.hb-fresh { color: var(--green); background: var(--green-soft); border-color: var(--green-border); }
.hb-stale { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-border); }
.hb-fresh .live-dot { width: 6px; height: 6px; background: var(--green); }
.hb-stale .live-dot { width: 6px; height: 6px; }
.hb-fresh time.ago, .hb-stale time.ago { color: inherit; }
a.ev { color: inherit; text-decoration: none; display: flex; }
a.ev:hover .ev-title { text-decoration: underline; }

.auth-wrap { max-width: 380px; margin: 12vh auto 0; display: flex; flex-direction: column;
  gap: var(--space-6); text-align: center; padding: 0 var(--space-6); }
.auth-wrap h1 { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.auth-sub { color: var(--muted-2); font-size: var(--text-sm); }
.auth-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); text-align: left; }
.auth-card label { margin-top: 0; }
.auth-wide { width: 100%; }
.auth-msg { min-height: 18px; font-size: var(--text-sm); color: var(--red); }
.auth-msg.ok { color: var(--green); }
.auth-link { color: var(--blue); font-size: var(--text-sm); }
.auth-link:hover { text-decoration: underline; }
.auth-url { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-5);
  word-break: break-all; white-space: pre-wrap; text-align: left; margin: 0; }

.tl-when { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.tl-meta { color: var(--text-2); font-size: 12.5px; }
.tl-quote { background: var(--bg); border: 1px solid var(--border);
            border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text-2);
            font-size: 12.5px; margin: 6px 0; white-space: pre-wrap; max-height: 200px;
            overflow-y: auto; }
.tl-hb summary { color: var(--text-3); font-weight: 600; }
.tl-hblist { margin: 6px 0 0 18px; font-size: 12.5px; color: var(--text-2);
             max-height: 320px; overflow-y: auto; }
.tl-hblist li { margin-bottom: 3px; }
/* inline artifacts (Sprint 10): images + PDF previews render in place */
.tl-art-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.tl-art-img { display: inline-flex; flex-direction: column; gap: 4px; max-width: 200px;
              border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px;
              background: var(--bg); transition: border-color .14s; }
.tl-art-img:hover { border-color: var(--accent-strong); }
.tl-art-img img { max-width: 100%; max-height: 150px; border-radius: var(--radius-xs); display: block;
                  object-fit: cover; }
.tl-art-name { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-art-pdf { margin: 8px 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
              overflow: hidden; background: var(--bg); }
.tl-art-cap { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2);
              padding: 7px 10px; border-bottom: 1px solid var(--border); display: flex; gap: 6px; align-items: center; }
.tl-art-pdf iframe { width: 100%; height: 460px; border: 0; display: block; background: #fff; }
@media (max-width: 600px) { .tl-art-pdf iframe { height: 320px; } }

.prod-auth { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
.prod-auth .block-label .ic { color: var(--warn, #f59e0b); }
.prod-auth.on { border-color: var(--danger, #dc3545); background: rgba(220,53,69,.08); }
.prod-auth.on .block-label .ic { color: var(--danger, #dc3545); }

/* tareas list: bulk-checkbox column + inline approve column (8 tracks) */
.tl-rowhead, .tq-row { grid-template-columns: 26px 36px 56px 1fr 165px 118px 88px 70px; }
.tl-act { display: flex; justify-content: flex-end; }
.tl-act button { white-space: nowrap; }
.bulk-set { display: inline-flex; align-items: center; gap: var(--space-3); }
.bulk-set .fact-sel { max-width: 150px; }
.sd-waiting_client { background: var(--info); }
/* the peek embeds the SAME state bar as the detail — unpin it inside the panel */
.peek-body .dirH-bar { position: static; max-width: none; margin: 12px 0 0; }
/* brief editor surfaced on the detail's command column (proposed) */
.dirH-brief { padding: var(--space-4) var(--space-7) 0; }
/* inline draft editor toggle (no more ?edit_reply= navigation) */
.reply-editwrap { margin-top: var(--space-3); }
.reply-editwrap > summary { list-style: none; display: inline-flex; align-items: center;
  gap: 6px; cursor: pointer; width: fit-content; }
.reply-editwrap > summary::-webkit-details-marker { display: none; }

.worker-live { flex: none; display: flex; flex-direction: column; gap: 6px;
  margin: var(--space-4) var(--space-8) 0; padding: 10px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); }
.worker-live.stale { border-color: var(--amber-border); background: var(--amber-soft); }
.worker-live .wl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.worker-live .wl-step { font-size: var(--text-sm); color: var(--text-2); line-height: 1.5;
  word-break: break-word; }
.worker-live .wl-elapsed { display: inline-flex; align-items: center; gap: 5px;
  font-weight: var(--weight-regular); font-size: var(--text-2xs); color: var(--muted);
  font-family: var(--font-mono); white-space: nowrap; }
.worker-live .wl-hint { display: flex; align-items: center; gap: 6px;
  font-size: var(--text-2xs); color: var(--amber); }
/* row/card chips: keep the ticking age on one quiet mono line */
.tq-row .tl-act .hb-fresh, .tq-row .tl-act .hb-stale { height: 18px; padding: 0 6px; }
.tk-c1 .hb-fresh, .tk-c1 .hb-stale { height: 18px; padding: 0 6px; }
.qaccent.qa-esperando { background: var(--info); }
.hoy-pulse { margin-bottom: var(--space-4); }

.mr-add { display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; }
.mr-add input { flex:1 1 200px; min-width:160px; }
.mr-row { display:flex; align-items:center; gap:var(--space-5); padding:10px 0; border-bottom:1px solid var(--border); }
.mr-row:last-child { border-bottom:none; }
.mr-main { flex:1; min-width:0; }
.mr-cond { font-size:var(--text-sm); color:var(--text); }
.mr-meta { font-size:var(--text-xs); color:var(--muted-2); margin-top:2px; font-family:var(--font-mono); }

.in-selnote { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4);
  padding:var(--space-3) var(--space-4); background:var(--tone-progress-soft);
  border:1px solid var(--tone-progress-border); border-radius:var(--radius-sm);
  font-size:var(--text-xs); color:var(--text); }
.in-selnote .ic { flex:none; color:var(--tone-progress); }
.in-selnote a { margin-left:auto; white-space:nowrap; color:var(--blue); }
.in-more { display:flex; align-items:center; justify-content:center; gap:var(--space-3);
  padding:var(--space-5); color:var(--muted); font-size:var(--text-sm); }
.in-more:hover { color:var(--text); background:var(--panel-2); }
form.csearch input { flex:1; min-width:0; background:none; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:var(--text-sm); padding:0; }
.att-add { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); }
.att-add form { display:flex; align-items:center; gap:var(--space-4); }
.att-add .att-file { font-size:var(--text-xs); color:var(--muted); max-width:240px; }
.att-add .att-hint { font-size:var(--text-xs); color:var(--muted-2); }
.conv-out-meta { margin-bottom:var(--space-3); }

.in-list .in-row { grid-template-columns: auto 22px 1fr auto; }
.in-row .bsel-w { align-self: center; margin-left:-4px; }
.bulk-form { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; width:100%; }
.bulk-assign { display:inline-flex; align-items:center; gap:var(--space-2); }
.bulk-assign select { max-width:150px; }
.grp-head .grp-sel { margin-left:auto; display:inline-flex; align-items:center;
  background:none; border:none; padding:2px; color:var(--muted-2); cursor:pointer; }
.grp-head .grp-sel:hover { color:var(--text); }

.ir-proc { display:inline-flex; align-items:center; gap:5px; font-size:var(--text-2xs);
  color:var(--muted); font-family:var(--font-mono); white-space:nowrap; }
.ir-proc .live-dot { width:6px; height:6px; }
.pipe-step a { color:var(--blue); }
.pipe-step a:hover { text-decoration:underline; }

.msg-alt { margin-top:var(--space-3); min-width:0; }
.msg-view { display:inline-flex; gap:2px; margin-bottom:var(--space-3); padding:2px;
  background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); }
.mv-btn { border:none; background:none; cursor:pointer; padding:2px 10px;
  color:var(--muted); font-family:inherit; font-size:var(--text-xs);
  border-radius:var(--radius-xs); transition:color 90ms, background 90ms; }
.mv-btn:hover { color:var(--text); }
.mv-btn.on { background:var(--panel); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.2); }
.msg-html { display:block; width:100%; height:400px; min-height:120px; max-height:70vh;
  resize:vertical; overflow:auto; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:#fff; }
.msg-alt[data-view="html"] .msg-text { display:none; }
.msg-alt[data-view="text"] .msg-html { display:none; }

.le-ex, .le-note { overflow-wrap: anywhere; white-space: normal; min-width: 0; }
.dtable.cards .le-ex { max-width: 100%; }

.resp-panel { background: var(--raised); border: 1px solid var(--border);
              border-radius: var(--radius); padding: 13px 15px; margin-top: 10px; }
.resp-panel.resp-sent { opacity: .8; }
.resp-head { font-weight: 600; color: var(--text); display: flex; gap: 7px;
             align-items: center; margin-bottom: 8px; font-size: 13px; }
.resp-head > .ic { color: var(--accent); }
.resp-panel textarea, .resp-panel input { width: 100%; }
.resp-attach { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 11px; }
.ra-head { display: flex; align-items: center; gap: 6px; color: var(--text-3);
           font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
           text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.ra-head .ic { color: var(--text-3); }
.ra-list { display: flex; flex-direction: column; gap: 6px; }
.ra-item { display: flex; align-items: center; gap: 6px; }
.ra-file { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
           padding: 7px 10px; background: var(--surface); border: 1px solid var(--border);
           border-radius: var(--radius-sm); color: var(--text); font-size: 12.5px; }
.ra-file:hover { border-color: var(--accent); }
.ra-file .ic { color: var(--accent); flex: none; }
.ra-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-size { margin-left: auto; color: var(--text-3); font-family: var(--font-mono); font-size: 11px; flex: none; }
.ra-rm button { padding: 6px 8px; }

.step-row { display:flex; align-items:center; gap:10px; padding:7px 0;
            border-bottom:1px dashed var(--border); }
.step-row:last-of-type { border-bottom:none; }
.step-dot { width:10px; height:10px; border-radius:50%; background:var(--bg);
            border:1.5px solid var(--border); flex-shrink:0; }
.step-dot.sd-done { background:var(--ok); border-color:var(--ok); }
.step-dot.sd-review { background:var(--ok); border-color:var(--ok); opacity:.6; }
.step-dot.sd-in_progress { background:var(--warn); border-color:var(--warn); }
.step-dot.sd-approved, .step-dot.sd-proposed { border-color:var(--accent-strong); }
.step-dot.sd-blocked, .step-dot.sd-failed { background:var(--danger); border-color:var(--danger); }
.step-label { flex:1; color:var(--text); }
.draftcard { background:var(--bg); border:1px solid var(--border); border-radius:12px;
             padding:14px 16px; margin-top:12px; }
.draftcard textarea, .draftcard input { width:100%; }
.doc-meta { margin-left:auto; }
.cap-on { color:var(--ok); font-size:11px; font-weight:600; }

.th-kindtag { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); }
.th-kindtag.sm { font-size:9.5px; }
.th-captag { display:inline-flex; align-items:center; gap:5px; font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--amber); background:var(--amber-soft); border:1px solid var(--amber-border); border-radius:var(--radius-full); padding:2px 8px; }
.th-magnet { color:var(--amber); display:inline-flex; }
/* stepper */
.st-row { display:inline-flex; align-items:center; gap:0; }
.st-dot { width:9px; height:9px; border-radius:999px; background:var(--panel-3); border:1.5px solid var(--border-strong); flex:none; }
.st-dot.done { background:var(--green); border-color:var(--green); }
.st-dot.active, .st-dot.gate { background:var(--amber); border-color:var(--amber); }
.st-bar { width:16px; height:1.5px; background:var(--border-strong); flex:none; }
.st-bar.on { background:var(--green); }
.st-row.compact .st-dot { width:7px; height:7px; }
.st-row.compact .st-bar { width:9px; }
/* decision signpost */
.th-actioncard { display:flex; gap:var(--space-5); align-items:flex-start; padding:var(--space-5) var(--space-6); background:var(--panel-2); border:1px solid var(--amber-border); border-radius:var(--radius-md); }
.th-ac-ico { width:28px; height:28px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center; background:var(--amber-soft); color:var(--amber); flex:none; }
.th-ac-label { font-size:9.5px; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--amber); font-weight:var(--weight-semibold); }
.th-ac-act { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text); margin-top:2px; }
.th-ac-sub { font-size:var(--text-xs); color:var(--muted); margin-top:3px; line-height:var(--leading-snug); }
/* split shell */
.threads-split { display:grid; grid-template-columns:360px 1fr; width:100%; height:100%; min-height:0; }
.th-aside { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--border); background:var(--bg); }
.th-slist { overflow-y:auto; min-height:0; }
.th-srow { display:flex; flex-direction:column; gap:var(--space-4); width:100%; text-align:left; padding:var(--space-5) var(--space-6); background:none; border:none; border-bottom:1px solid var(--border); border-left:2px solid transparent; cursor:pointer; font-family:inherit; color:inherit; text-decoration:none; transition:background var(--dur-fast) var(--ease); }
.th-srow:hover { background:var(--panel); }
.th-srow.on { background:var(--panel); border-left-color:var(--muted-2); }
.th-srow.needs, .th-srow.on.needs { border-left-color:var(--amber); }
.th-sr1 { display:flex; align-items:center; gap:var(--space-4); }
.th-stitle { font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.th-sr2 { display:flex; align-items:center; gap:var(--space-4); }
/* detail header */
.th-detail { display:flex; flex-direction:column; min-height:0; min-width:0; height:100%; background:var(--bg); }
.th-dhead { flex:none; padding:var(--space-6) var(--space-8) var(--space-5); border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:var(--space-4); }
.th-dh1 { display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; }
.th-dtitle { font-size:var(--text-lg); font-weight:var(--weight-semibold); margin:0; letter-spacing:var(--tracking-tight); line-height:var(--leading-tight); }
.th-dh2 { display:flex; align-items:center; gap:var(--space-6); flex-wrap:wrap; }
.th-counts { display:inline-flex; align-items:center; gap:5px; font-size:var(--text-xs); color:var(--muted-2); }
.th-counts svg, .th-counts .ic { color:var(--muted-2); }
.th-dwhen { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--muted-2); }
.th-dbody { flex:1; min-height:0; overflow:hidden; container-type:inline-size; }
/* spine layout */
.sp-phase { display:grid; grid-template-columns:minmax(0,1fr) 320px; height:100%; min-height:0; }
.sp-main { overflow-y:auto; min-height:0; padding:var(--space-8); }
.sp-rail { overflow-y:auto; min-height:0; border-left:1px solid var(--border); background:var(--panel); padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-7); }
.rail-block { display:flex; flex-direction:column; gap:var(--space-5); }
.rail-label { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-2xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--muted-2); font-weight:var(--weight-semibold); }
.rail-label svg, .rail-label .ic { color:var(--muted-2); }
.rail-meta { margin-left:auto; text-transform:none; letter-spacing:0; font-family:var(--font-mono); font-size:9.5px; color:var(--muted-2); font-weight:var(--weight-regular); }
/* phase spine */
.ph-stack { max-width:860px; }
.ph { display:grid; grid-template-columns:28px minmax(0,1fr); gap:var(--space-6); position:relative; padding-bottom:var(--space-8); }
.ph:last-child { padding-bottom:0; }
.ph::before { content:''; position:absolute; left:13.5px; top:30px; bottom:0; width:1.5px; background:var(--border); }
.ph:last-child::before { display:none; }
.ph-marker { display:flex; justify-content:center; }
.ph-mark { width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; flex:none; font-family:var(--font-mono); font-size:var(--text-xs); background:var(--panel-2); border:1px solid var(--border-strong); color:var(--muted-2); z-index:1; }
.ph-mark.done { background:var(--green-soft); border-color:var(--green-border); color:var(--green); }
.ph-mark.active { background:var(--amber-soft); border-color:var(--amber-border); color:var(--amber); }
.ph-mark.gate { background:var(--amber); border-color:var(--amber); color:var(--bg); }
.ph-content { min-width:0; padding-top:1px; }
.ph-head { display:flex; align-items:baseline; gap:var(--space-4); padding-bottom:var(--space-4); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.ph-n { font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); }
.ph-label { font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--text); }
.ph.todo .ph-label { color:var(--muted); }
.ph-type { font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-xs); padding:1px 6px; }
.ph-state { font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); }
.ph-state.active, .ph-state.gate { color:var(--amber); }
.ph-state.done { color:var(--green); }
.ph-events { display:flex; flex-direction:column; padding-top:var(--space-5); }
.ph-empty { font-size:var(--text-xs); color:var(--muted-2); font-style:italic; padding-top:var(--space-4); }
/* events — grouped */
.tl-ev.grouped { display:grid; grid-template-columns:14px minmax(0,1fr); gap:var(--space-4); padding-bottom:var(--space-5); position:relative; }
.tl-ev.grouped:last-child { padding-bottom:0; }
.tl-gdot { width:7px; height:7px; border-radius:999px; background:var(--border-strong); margin-top:7px; justify-self:center; }
.tl-gdot.operator { background:var(--orange); }
.tl-gdot.client { background:var(--green); }
.tl-gdot.gate { background:var(--amber); }
.tl-gdot.alert { background:var(--red); }
.tl-evmain { min-width:0; }
.tl-head { display:flex; align-items:baseline; gap:var(--space-4); flex-wrap:wrap; }
.tl-title { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text); }
.tl-title code { font-family:var(--font-mono); font-size:var(--text-xs); background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-xs); padding:1px 5px; color:var(--text); font-weight:var(--weight-regular); }
.tl-ver { font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--muted-2); }
.tl-actor { font-size:var(--text-2xs); letter-spacing:.04em; text-transform:uppercase; padding:1px 6px; border-radius:var(--radius-xs); }
.tl-actor.operator { color:var(--orange); background:var(--orange-soft); }
.tl-actor.worker { color:var(--muted); background:var(--panel-3); }
.tl-actor.system { color:var(--muted-2); background:var(--panel-2); }
.tl-actor.client { color:var(--green); background:var(--green-soft); }
.tl-at { margin-left:auto; font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--muted-2); }
.tl-detail { font-size:var(--text-sm); color:var(--muted); margin-top:3px; line-height:var(--leading-snug); }
.tl-quote { display:block; border-left:2px solid var(--border-strong); padding-left:var(--space-5); color:var(--muted); font-style:italic; }
.tl-body { margin-top:var(--space-5); }
.tl-foot { display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-4); flex-wrap:wrap; }
.tl-ref { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--muted-2); }
.tl-tt { font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-xs); padding:1px 6px; }
.tl-tag { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:9.5px; color:var(--muted-2); }
.tl-tag.map { color:var(--muted); }
.tl-open { font-size:var(--text-xs); color:var(--blue); flex:none; text-decoration:none; }
.tl-approve { display:inline-flex; gap:var(--space-4); }
/* inline draft panel */
.tl-draft { background:var(--panel); border:1px solid var(--border-strong); border-radius:var(--radius-md); overflow:hidden; }
.tl-draft.sent { border-color:var(--green-border); }
.tl-draft-head { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--border); }
.tl-draft-kind { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text); }
.tl-draft-head > :last-child { margin-left:auto; }
.tl-draft-meta { padding:var(--space-5) var(--space-6) 0; display:flex; flex-direction:column; gap:var(--space-3); }
.tl-kv { display:flex; gap:var(--space-5); font-size:var(--text-xs); }
.tl-kv .k { width:52px; flex:none; font-family:var(--font-mono); color:var(--muted-2); text-transform:uppercase; font-size:9.5px; padding-top:2px; }
.tl-kv .v { color:var(--text); min-width:0; }
.tl-draft-body { padding:var(--space-5) var(--space-6); font-size:var(--text-sm); color:var(--muted); line-height:var(--leading-normal); white-space:pre-wrap; }
.tl-draft-atts { display:flex; flex-wrap:wrap; gap:var(--space-4); padding:0 var(--space-6) var(--space-5); }
.tl-att { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--text-xs); color:var(--muted); background:var(--panel-2); border:1px dashed var(--border-strong); border-radius:var(--radius-sm); padding:4px 9px; }
.tl-att em { font-style:normal; font-size:9px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); margin-left:2px; }
.tl-att.ready { border-style:solid; color:var(--text); }
.tl-gatesteps { display:flex; flex-direction:column; gap:var(--space-3); padding:0 var(--space-6) var(--space-5); }
.tl-gstep { display:flex; align-items:center; gap:var(--space-4); width:100%; text-align:left; padding:var(--space-4) var(--space-5); background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; text-decoration:none; }
.tl-gstep:hover { border-color:var(--border-strong); }
.tl-check { width:18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--panel-3); border:1.5px solid var(--border-strong); color:var(--muted-2); flex:none; }
.tl-gstep.done .tl-check { background:var(--green); border-color:var(--green); color:var(--bg); }
.tl-gstep-t { font-size:var(--text-sm); color:var(--text); }
.tl-gstep.done .tl-gstep-t { color:var(--muted); }
.tl-draft-foot { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5) var(--space-6); border-top:1px solid var(--border); background:var(--panel-2); }
.tl-blocked { display:inline-flex; align-items:center; gap:5px; font-size:var(--text-xs); color:var(--amber); }
.tl-sentnote { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); color:var(--green); }
/* gate picker */
.tl-gate-sub { font-size:var(--text-sm); color:var(--muted); margin-bottom:var(--space-5); line-height:var(--leading-snug); }
.tl-opts { display:flex; flex-direction:column; gap:var(--space-4); }
.tl-opt { display:flex; align-items:flex-start; gap:var(--space-5); padding:var(--space-5) var(--space-6); background:var(--panel); border:1px solid var(--border-strong); border-radius:var(--radius-md); text-align:left; cursor:pointer; position:relative; transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.tl-opt:hover { border-color:var(--muted-2); }
.tl-opt input { position:absolute; opacity:0; width:0; height:0; }
.tl-opt:has(input:checked) { border-color:var(--amber); background:var(--amber-soft); }
.tl-radio { width:18px; height:18px; border-radius:999px; border:1.5px solid var(--border-strong); display:inline-flex; align-items:center; justify-content:center; flex:none; margin-top:1px; color:var(--bg); }
.tl-opt:has(input:checked) .tl-radio { background:var(--amber); border-color:var(--amber); }
.tl-radio .ic { opacity:0; }
.tl-opt:has(input:checked) .tl-radio .ic { opacity:1; }
.tl-opt-main { display:flex; flex-direction:column; gap:4px; min-width:0; }
.tl-opt-top { display:flex; align-items:baseline; gap:var(--space-4); flex-wrap:wrap; }
.tl-opt-title { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text); }
.tl-gate-foot { display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-5); }
.tl-gate-hint { font-size:var(--text-xs); color:var(--muted-2); }
/* rail blocks */
.ctx-stack { display:flex; flex-direction:column; gap:var(--space-4); }
.ctx-sec { background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-5); }
.ctx-h { display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-4); flex-wrap:wrap; }
.ctx-heading { font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--text); }
.ctx-when { margin-left:auto; font-family:var(--font-mono); font-size:9.5px; color:var(--muted-2); }
.ctx-body { font-size:var(--text-xs); color:var(--muted); line-height:var(--leading-snug); white-space:pre-wrap; }
.doc-stack { display:flex; flex-direction:column; gap:var(--space-4); }
.doc-row { display:flex; align-items:flex-start; gap:var(--space-4); padding:var(--space-5); background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); text-decoration:none; }
.doc-ico { color:var(--muted-2); flex:none; margin-top:1px; }
.doc-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.doc-top { display:flex; align-items:baseline; gap:var(--space-4); }
.doc-name { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text); }
.doc-ver { font-family:var(--font-mono); font-size:9.5px; color:var(--muted-2); }
.doc-ex { font-size:var(--text-xs); color:var(--muted); line-height:var(--leading-snug); }
.doc-meta { font-family:var(--font-mono); font-size:9.5px; color:var(--muted-2); margin-left:0; }
.doc-open { font-size:var(--text-xs); color:var(--blue); flex:none; align-self:center; }
/* board (status) */
.th-cols { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); width:100%; height:100%; padding:var(--space-7); overflow:hidden; min-height:0; }
.th-col { display:flex; flex-direction:column; gap:var(--space-5); min-height:0; }
.th-colhead { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-2xs); letter-spacing:var(--tracking-label); text-transform:uppercase; font-weight:var(--weight-semibold); color:var(--muted-2); }
.th-colhead.alert { color:var(--amber); }
.th-cn { margin-left:auto; font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--muted-2); background:var(--panel-2); padding:1px 7px; border-radius:var(--radius-full); }
.th-colcards { display:flex; flex-direction:column; gap:var(--space-5); overflow-y:auto; min-height:0; padding-bottom:var(--space-7); }
.th-card { display:flex; flex-direction:column; gap:var(--space-4); align-items:flex-start; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-5); cursor:pointer; text-decoration:none; transition:border-color var(--dur-fast) var(--ease); }
.th-card:hover { border-color:var(--border-strong); }
.th-card.needs { border-color:var(--amber-border); }
.th-c1 { display:flex; align-items:center; gap:var(--space-4); width:100%; }
.th-ctitle { font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text); text-decoration:none; }
.th-cmeta { font-size:var(--text-xs); color:var(--muted-2); }
.th-cneed { display:flex; align-items:center; gap:var(--space-4); width:100%; padding-top:var(--space-4); border-top:1px solid var(--border); margin-top:var(--space-3); }
.th-cneed-l { display:inline-flex; align-items:center; gap:5px; font-size:var(--text-xs); color:var(--amber); min-width:0; }
.th-cneed > :last-child { margin-left:auto; flex:none; }
.th-empty { color:var(--muted-2); font-size:var(--text-xs); padding:var(--space-5); }
.th-composer { max-width:860px; margin-top:var(--space-8); }
.th-composer textarea { width:100%; }
/* F4: acciones portadas al rail + paquete pendiente en el split */
.sp-rail textarea, .sp-rail input { width:100%; }
.sp-rail .rail-block .sub { font-size:var(--text-xs); line-height:var(--leading-snug); }
.rail-kv { display:flex; flex-direction:column; gap:var(--space-3); }
.th-pkg { max-width:860px; margin-bottom:var(--space-8); }
/* container query: stack rail under events when the PANE (not viewport) is narrow */
@container (max-width:1000px) {
  .sp-phase { display:block; overflow-y:auto; height:100%; }
  .sp-phase .sp-main { overflow:visible; min-height:0; padding:var(--space-7); }
  .sp-phase .sp-rail { overflow:visible; min-height:0; border-left:none; border-top:1px solid var(--border); }
  .ph-stack { max-width:none; }
}
/* PHONE: the list+detail split stacked side-by-side bled the detail pane into the
   viewport — collapse to a single column (list on top, detail below) and make the
   board columns swipe instead of crushing into 4 clipped columns. */
@media (max-width:640px) {
  .threads-split { display:flex; flex-direction:column; grid-template-columns:none; height:auto; min-height:100%; }
  .th-aside { border-right:none; border-bottom:1px solid var(--border); overflow:visible; }
  .th-slist { overflow-y:visible; }
  .th-detail { height:auto; }
  .th-srow { min-height:56px; }
  .th-cols { display:flex; grid-template-columns:none; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; gap:var(--space-5); padding:var(--space-6) var(--space-5); }
  .th-col { flex:0 0 82vw; min-width:82vw; max-width:82vw; scroll-snap-align:start; }
  .th-colcards { overflow-y:visible; }
}

.fl-acc > summary { cursor: pointer; list-style: none; }
.fl-acc > summary::-webkit-details-marker { display: none; }
.fl-acc > summary .flc-caret .ic { transition: transform .15s ease; }
.fl-acc[open] > summary .flc-caret .ic { transform: rotate(180deg); }